Convert hui-state-badge-element to TypeScript/LitElement (#1892)

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

The state image is not updating. This is true with the image-element as well. There's probably something simple between them both that I'm missing in my syntax for defining them

* Added htmlmap interface

* Addressed review comments

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

@@ -1,7 +1,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-badge-element";
 import "../elements/hui-state-icon-element";
 import "../elements/hui-state-label-element";
 

src/panels/lovelace/elements/hui-state-badge-element.js

@@ -1,49 +0,0 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "../../../components/entity/ha-state-label-badge.js";
-import computeStateName from "../../../common/entity/compute_state_name";
-
-class HuiStateBadgeElement extends PolymerElement {
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-    };
-  }
-
-  static get observers() {
-    return ["_updateBadge(hass, _config)"];
-  }
-
-  _updateBadge(hass, config) {
-    if (!hass || !config || !(config.entity in hass.states)) return;
-
-    if (!this._badge) {
-      this._badge = document.createElement("ha-state-label-badge");
-    }
-
-    const stateObj = hass.states[config.entity];
-    this._badge.setProperties({
-      hass,
-      state: stateObj,
-      title: computeStateName(stateObj),
-    });
-
-    if (!this.lastChild) {
-      this.appendChild(this._badge);
-    }
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw Error("Error in element configuration");
-    }
-
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
-
-    this._badge = null;
-    this._config = config;
-  }
-}
-customElements.define("hui-state-badge-element", HuiStateBadgeElement);

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

@@ -0,0 +1,53 @@
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../../../components/entity/ha-state-label-badge.js";
+
+import computeStateName from "../../../common/entity/compute_state_name";
+import { LovelaceElement, LovelaceElementConfig } from "./types.js";
+import { HomeAssistant } from "../../../types.js";
+import { TemplateResult } from "lit-html";
+
+export class HuiStateBadgeElement extends 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`
+      <ha-state-label-badge
+        .hass=${this.hass}
+        .state=${state}
+        .title="${computeStateName(state)}"
+      ></ha-state-label-badge>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-state-badge-element": HuiStateBadgeElement;
+  }
+}
+
+customElements.define("hui-state-badge-element", HuiStateBadgeElement);