Convert hui-state-label-element to TypeScript/LitElement (#1893)

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

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

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

@@ -1,74 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display.js";
-
-import "../../../components/entity/ha-state-label-badge.js";
-
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-import ElementClickMixin from "../mixins/element-click-mixin.js";
-import { longPressBind } from "../common/directives/long-press-directive";
-
-/*
- * @appliesMixin ElementClickMixin
- * @appliesMixin LocalizeMixin
- */
-class HuiStateLabelElement extends LocalizeMixin(
-  ElementClickMixin(PolymerElement)
-) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          cursor: pointer;
-        }
-        .state-label {
-          padding: 8px;
-          white-space: nowrap;
-        }
-      </style>
-      <div class="state-label" title$="[[computeTooltip(hass, _config)]]">
-        [[_config.prefix]][[_computeStateDisplay(_stateObj)]][[_config.suffix]]
-      </div>
-    `;
-  }
-
-  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];
-  }
-
-  _computeStateDisplay(stateObj) {
-    return stateObj ? computeStateDisplay(this.localize, stateObj) : "-";
-  }
-}
-customElements.define("hui-state-label-element", HuiStateLabelElement);

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

@@ -0,0 +1,78 @@
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../../../components/entity/ha-state-label-badge.js";
+
+import { computeTooltip } from "../../../common/string/compute-tooltip";
+import computeStateDisplay from "../../../common/entity/compute_state_display.js";
+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";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceElementConfig {
+  prefix?: string;
+  suffix?: string;
+}
+
+class HuiStateLabelElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.entity) {
+      throw Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    const state = this.hass!.states[this._config.entity!];
+    return html`
+      ${this.renderStyle()}
+      <div
+        .title="${computeTooltip(this.hass!, this._config)}"
+        @ha-click="${() => handleClick(this, this.hass!, this._config!, false)}"
+        @ha-hold="${() => handleClick(this, this.hass!, this._config!, true)}"
+        .longPress="${longPress()}"
+      >
+      ${this._config.prefix}${
+      state ? computeStateDisplay(this.localize, state) : "-"
+    }${this._config.suffix}
+      </div>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+        div {
+          padding: 8px;
+          white-space: nowrap;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-state-label-element": HuiStateLabelElement;
+  }
+}
+
+customElements.define("hui-state-label-element", HuiStateLabelElement);