Convert hui-state-icon-element to TypeScript/LitElement (#1891)

* Convert hui-state-icon-element to TypeScript/LitElement

The icon is not currently dispalying and therefor cannot determine if changing as well. Everything else is working. Should probably create a base class for all these elements to extend for simple things like checking for the entity and setting hass correctly once I get that sorted out.

* Fixed setting of properties

* Remove ! on this._config

* Addressed review comments

* Moved event handlers to private functions to avoid arrow function creation on each render
* Check for `hass` before looking for state
* Movevd absolute import above relative imports

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

@@ -2,7 +2,7 @@ import "../elements/hui-icon-element";
 import "../elements/hui-image-element";
 import "../elements/hui-service-button-element";
 import "../elements/hui-state-badge-element.js";
-import "../elements/hui-state-icon-element.js";
+import "../elements/hui-state-icon-element";
 import "../elements/hui-state-label-element";
 
 import { fireEvent } from "../../../common/dom/fire_event.js";

src/panels/lovelace/elements/hui-state-icon-element.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/entity/state-badge.js";
-
-import ElementClickMixin from "../mixins/element-click-mixin.js";
-import { longPressBind } from "../common/directives/long-press-directive";
-
-/*
- * @appliesMixin ElementClickMixin
- */
-class HuiStateIconElement extends ElementClickMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          cursor: pointer;
-        }
-      </style>
-      <state-badge
-        state-obj="[[_stateObj]]"
-        title$="[[computeTooltip(hass, _config)]]"
-      ></state-badge>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      _config: Object,
-      _stateObj: Object,
-    };
-  }
-
-  ready() {
-    super.ready();
-    longPressBind(this);
-    this.addEventListener("ha-click", () =>
-      this.handleClick(this.hass, this._config, false)
-    );
-    this.addEventListener("ha-hold", () =>
-      this.handleClick(this.hass, this._config, true)
-    );
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw Error("Error in element configuration");
-    }
-
-    this._config = config;
-  }
-
-  _hassChanged(hass) {
-    this._stateObj = hass.states[this._config.entity];
-  }
-}
-customElements.define("hui-state-icon-element", HuiStateIconElement);

src/panels/lovelace/elements/hui-state-icon-element.ts

@@ -0,0 +1,77 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../../../components/entity/state-badge.js";
+
+import { computeTooltip } from "../../../common/string/compute-tooltip";
+import { handleClick } from "../../../common/dom/handle-click";
+import { longPress } from "../common/directives/long-press-directive";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceElement, LovelaceElementConfig } from "./types.js";
+import { HomeAssistant } from "../../../types.js";
+
+export class HuiStateIconElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: LovelaceElementConfig;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: LovelaceElementConfig): void {
+    if (!config.entity) {
+      throw Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.hass.states[this._config.entity!]
+    ) {
+      return html``;
+    }
+
+    const state = this.hass!.states[this._config.entity!];
+    return html`
+      ${this.renderStyle()}
+      <state-badge
+        .stateObj=${state}
+        .title="${computeTooltip(this.hass!, this._config)}"
+        @ha-click="${this._handleClick}"
+        @ha-hold="${this._handleHold}"
+        .longPress="${longPress()}"
+      ></state-badge>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+      </style>
+    `;
+  }
+
+  private _handleClick() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-state-icon-element": HuiStateIconElement;
+  }
+}
+
+customElements.define("hui-state-icon-element", HuiStateIconElement);