Convert hui-group-entity-row to TypeScript/LitElement (#2015)

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

* Address review comment and Travis errors

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

@@ -1,73 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/hui-generic-entity-row";
-import "../../../components/entity/ha-entity-toggle";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display";
-import { DOMAINS_TOGGLE } from "../../../common/const";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiGroupEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <hui-generic-entity-row hass="[[hass]]" config="[[_config]]">
-        ${this.groupControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get groupControlTemplate() {
-    return html`
-      <template is="dom-if" if="[[_canToggle]]">
-        <ha-entity-toggle
-          hass="[[hass]]"
-          state-obj="[[_stateObj]]"
-        ></ha-entity-toggle>
-      </template>
-      <template is="dom-if" if="[[!_canToggle]]">
-        <div>[[_computeState(_stateObj)]]</div>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-      _canToggle: {
-        type: Boolean,
-        computed: "_computeCanToggle(_stateObj.attributes.entity_id)",
-      },
-    };
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeCanToggle(entityIds) {
-    return entityIds.some((entityId) =>
-      DOMAINS_TOGGLE.has(entityId.split(".", 1)[0])
-    );
-  }
-
-  _computeState(stateObj) {
-    return computeStateDisplay(this.localize, stateObj);
-  }
-}
-customElements.define("hui-group-entity-row", HuiGroupEntityRow);

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

@@ -0,0 +1,88 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../components/hui-generic-entity-row";
+import "../../../components/entity/ha-entity-toggle";
+import "./hui-error-entity-row";
+
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+import { DOMAINS_TOGGLE } from "../../../common/const";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { HomeAssistant } from "../../../types";
+import { EntityRow, EntityConfig } from "./types";
+
+class HuiGroupEntityRow extends hassLocalizeLitMixin(LitElement)
+  implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: EntityConfig;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public setConfig(config: EntityConfig): void {
+    if (!config) {
+      throw new Error("Configuration error");
+    }
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this.hass) {
+      return html``;
+    }
+
+    const stateObj = this.hass.states[this._config.entity];
+
+    if (!stateObj) {
+      return html`
+        <hui-error-entity-row
+          .entity="${this._config.entity}"
+        ></hui-error-entity-row>
+      `;
+    }
+
+    return html`
+      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+        >
+        ${
+          this._computeCanToggle(stateObj.attributes.entity_id)
+            ? html`
+                <ha-entity-toggle
+                  .hass="${this.hass}"
+                  .stateObj="${stateObj}"
+                ></ha-entity-toggle>
+              `
+            : html`
+                <div>
+                  ${
+                    computeStateDisplay(
+                      this.localize,
+                      stateObj,
+                      this.hass.language
+                    )
+                  }
+                </div>
+              `
+        }
+      </hui-generic-entity-row>
+    `;
+  }
+
+  private _computeCanToggle(entityIds): boolean {
+    return entityIds.some((entityId) =>
+      DOMAINS_TOGGLE.has(entityId.split(".", 1)[0])
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-group-entity-row": HuiGroupEntityRow;
+  }
+}
+
+customElements.define("hui-group-entity-row", HuiGroupEntityRow);