Convert hui-entities-toggle to TypeScript/LitElement (#2144)

* Convert hui-entities-toggle to TypeScript/LitElement

* Assign types to _callService

src/panels/lovelace/components/hui-entities-toggle.js

@@ -1,60 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-toggle-button/paper-toggle-button";
-
-import { DOMAINS_TOGGLE } from "../../../common/const";
-import { turnOnOffEntities } from "../common/entity/turn-on-off-entities";
-
-class HuiEntitiesToggle extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          width: 38px;
-          display: block;
-        }
-        paper-toggle-button {
-          cursor: pointer;
-          --paper-toggle-button-label-spacing: 0;
-          padding: 13px 5px;
-          margin: -4px -5px;
-        }
-      </style>
-      <template is="dom-if" if="[[_toggleEntities.length]]">
-        <paper-toggle-button
-          checked="[[_computeIsChecked(hass, _toggleEntities)]]"
-          on-change="_callService"
-        ></paper-toggle-button>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      entities: Array,
-      _toggleEntities: {
-        type: Array,
-        computed: "_computeToggleEntities(hass, entities)",
-      },
-    };
-  }
-
-  _computeToggleEntities(hass, entityIds) {
-    return entityIds.filter(
-      (entityId) =>
-        entityId in hass.states && DOMAINS_TOGGLE.has(entityId.split(".", 1)[0])
-    );
-  }
-
-  _computeIsChecked(hass, entityIds) {
-    return entityIds.some((entityId) => hass.states[entityId].state === "on");
-  }
-
-  _callService(ev) {
-    const turnOn = ev.target.checked;
-    turnOnOffEntities(this.hass, this._toggleEntities, turnOn);
-  }
-}
-
-customElements.define("hui-entities-toggle", HuiEntitiesToggle);

src/panels/lovelace/components/hui-entities-toggle.ts

@@ -0,0 +1,84 @@
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  PropertyValues,
+} from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
+
+import { DOMAINS_TOGGLE } from "../../../common/const";
+import { turnOnOffEntities } from "../common/entity/turn-on-off-entities";
+import { HomeAssistant } from "../../../types";
+
+class HuiEntitiesToggle extends LitElement {
+  public entities?: string[];
+  protected hass?: HomeAssistant;
+  private _toggleEntities?: string[];
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      entities: {},
+      _toggleEntities: {},
+    };
+  }
+
+  public updated(changedProperties: PropertyValues) {
+    if (changedProperties.has("entities")) {
+      this._toggleEntities = this.entities!.filter(
+        (entityId) =>
+          entityId in this.hass!.states &&
+          DOMAINS_TOGGLE.has(entityId.split(".", 1)[0])
+      );
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!this._toggleEntities) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <paper-toggle-button
+        ?checked="${
+          this._toggleEntities!.some(
+            (entityId) => this.hass!.states[entityId].state === "on"
+          )
+        }"
+        @change="${this._callService}"
+      ></paper-toggle-button>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          width: 38px;
+          display: block;
+        }
+        paper-toggle-button {
+          cursor: pointer;
+          --paper-toggle-button-label-spacing: 0;
+          padding: 13px 5px;
+          margin: -4px -5px;
+        }
+      </style>
+    `;
+  }
+
+  private _callService(ev: MouseEvent): void {
+    const turnOn = (ev.target as PaperToggleButtonElement).checked;
+    turnOnOffEntities(this.hass!, this._toggleEntities!, turnOn!);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-entities-toggle": HuiEntitiesToggle;
+  }
+}
+
+customElements.define("hui-entities-toggle", HuiEntitiesToggle);