Convert hui-image-element to TypeScript/LitElement (#1890)

* Convert hui-image-element to TypeScript/LitElement

WIP
Some of the state portions passed down to ha-image are not updating the view.

* Fixed setting of properties

* Add tagnamemap interface

* Address review comments

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

@@ -1,5 +1,5 @@
 import "../elements/hui-icon-element";
-import "../elements/hui-image-element.js";
+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";

src/panels/lovelace/elements/hui-image-element.js

@@ -1,66 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../components/hui-image.js";
-
-import ElementClickMixin from "../mixins/element-click-mixin.js";
-import { longPressBind } from "../common/directives/long-press-directive";
-
-/*
- * @appliesMixin ElementClickMixin
- */
-class HuiImageElement extends ElementClickMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        :host(.clickable) {
-          cursor: pointer;
-          overflow: hidden;
-          -webkit-touch-callout: none !important;
-        }
-        hui-image {
-          -webkit-user-select: none !important;
-        }
-      </style>
-      <hui-image
-        hass="[[hass]]"
-        entity="[[_config.entity]]"
-        image="[[_config.image]]"
-        state-image="[[_config.state_image]]"
-        camera-image="[[_config.camera_image]]"
-        filter="[[_config.filter]]"
-        state-filter="[[_config.state_filter]]"
-        title$="[[computeTooltip(hass, _config)]]"
-        aspect-ratio="[[_config.aspect_ratio]]"
-      ></hui-image>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: 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) {
-      throw Error("Error in element configuration");
-    }
-
-    this.classList.toggle("clickable", config.tap_action !== "none");
-    this._config = config;
-  }
-}
-customElements.define("hui-image-element", HuiImageElement);

src/panels/lovelace/elements/hui-image-element.ts

@@ -0,0 +1,94 @@
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../components/hui-image.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";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceElementConfig {
+  image?: string;
+  state_image?: string;
+  camera_image?: string;
+  filter?: string;
+  state_filter?: string;
+  aspect_ratio?: string;
+}
+
+export class HuiImageElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: Config): void {
+    if (!config) {
+      throw Error("Error in element configuration");
+    }
+
+    this.classList.toggle("clickable", config.tap_action !== "none");
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <hui-image
+        .hass=${this.hass}
+        .entity="${this._config.entity}"
+        .image="${this._config.image}"
+        .stateImage=${this._config.state_image}
+        .cameraImage=${this._config.camera_image}
+        .filter=${this._config.filter}
+        .stateFilter=${this._config.state_filter}
+        .title="${computeTooltip(this.hass!, this._config)}"
+        .aspectRatio="${this._config.aspect_ratio}"
+        @ha-click="${this._handleClick}"
+        @ha-hold="${this._handleHold}"
+        .longPress="${longPress()}"
+      ></hui-image>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host(.clickable) {
+          cursor: pointer;
+          overflow: hidden;
+          -webkit-touch-callout: none !important;
+        }
+        hui-image {
+          -webkit-user-select: none !important;
+        }
+      </style>
+    `;
+  }
+
+  private _handleClick() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-image-element": HuiImageElement;
+  }
+}
+
+customElements.define("hui-image-element", HuiImageElement);