Convert hui-climate-entity-row to TypeScript/LitElement (#1899)

* Convert hui-climate-entity-row to TypeScript/LitElement

* Address review comments

* Address review comments

src/panels/lovelace/common/create-row-element.js

@@ -1,6 +1,6 @@
 import { fireEvent } from "../../../common/dom/fire_event.js";
 
-import "../entity-rows/hui-climate-entity-row.js";
+import "../entity-rows/hui-climate-entity-row";
 import "../entity-rows/hui-cover-entity-row.js";
 import "../entity-rows/hui-group-entity-row.js";
 import "../entity-rows/hui-input-number-entity-row.js";

src/panels/lovelace/entity-rows/hui-climate-entity-row.js

@@ -1,61 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-climate-state.js";
-import "../components/hui-generic-entity-row.js";
-
-class HuiClimateEntityRow extends PolymerElement {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.climateControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        ha-climate-state {
-          text-align: right;
-        }
-      </style>
-    `;
-  }
-
-  static get climateControlTemplate() {
-    return html`
-      <ha-climate-state
-        hass="[[hass]]"
-        state-obj="[[_stateObj]]"
-      ></ha-climate-state>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-}
-customElements.define("hui-climate-entity-row", HuiClimateEntityRow);

src/panels/lovelace/entity-rows/hui-climate-entity-row.ts

@@ -0,0 +1,65 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../../../components/ha-climate-state.js";
+import "../components/hui-generic-entity-row.js";
+
+import { HomeAssistant } from "../../../types.js";
+import { EntityRow, EntityConfig } from "./types.js";
+
+class HuiClimateEntityRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: EntityConfig;
+
+  static get properties() {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public setConfig(config: EntityConfig): void {
+    if (!config || !config.entity) {
+      throw new Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <hui-generic-entity-row
+        .hass=${this.hass}
+        .config=${this._config}
+      >
+        <ha-climate-state
+          .hass=${this.hass}
+          .stateObj=${this.hass.states[this._config.entity]}
+        ></ha-climate-state>
+      </hui-generic-entity-row>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-climate-state {
+          text-align: right;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-climate-entity-row": HuiClimateEntityRow;
+  }
+}
+
+customElements.define("hui-climate-entity-row", HuiClimateEntityRow);