Convert hui-icon-element to TypeScript/LitElement and extract ElementClick mixin functions

src/common/dom/handle-click.ts

@@ -0,0 +1,44 @@
+import { HomeAssistant } from "../../types";
+import { LovelaceElementConfig } from "../../panels/lovelace/elements/types";
+import { fireEvent } from "../dom/fire_event.js";
+import toggleEntity from "../../../src/panels/lovelace/common/entity/toggle-entity";
+
+export const handleClick = (
+  node: HTMLElement,
+  hass: HomeAssistant,
+  config: LovelaceElementConfig,
+  hold: boolean
+): void => {
+  let action = config.tap_action || "more-info";
+
+  if (hold && config.hold_action) {
+    action = config.hold_action;
+  }
+
+  if (action === "none") {
+    return;
+  }
+
+  switch (action) {
+    case "more-info":
+      fireEvent(node, "hass-more-info", { entityId: config.entity });
+      break;
+    case "navigate":
+      // this.navigate(config.navigation_path); // TODO wait for balloob's navigate function
+      break;
+    case "toggle":
+      toggleEntity(hass, config.entity);
+      break;
+    case "call-service": {
+      if (config.service) {
+        const [domain, service] = config.service.split(".", 2);
+        const serviceData = Object.assign(
+          {},
+          { entity_id: config.entity },
+          config.service_data
+        );
+        hass.callService(domain, service, serviceData);
+      }
+    }
+  }
+};

src/common/string/compute-tooltip.ts

@@ -0,0 +1,38 @@
+import computeStateName from "../../common/entity/compute_state_name";
+import { HomeAssistant } from "../../types";
+import { LovelaceElementConfig } from "../../panels/lovelace/elements/types";
+
+export const computeTooltip = (
+  hass: HomeAssistant,
+  config: LovelaceElementConfig
+): string => {
+  if (config.title) {
+    return config.title;
+  }
+
+  let stateName = "";
+  let tooltip: string;
+
+  if (config.entity) {
+    stateName =
+      config.entity in hass.states
+        ? computeStateName(hass.states[config.entity])
+        : config.entity;
+  }
+
+  switch (config.tap_action) {
+    case "navigate":
+      tooltip = `Navigate to ${config.navigation_path}`;
+      break;
+    case "toggle":
+      tooltip = `Toggle ${stateName}`;
+      break;
+    case "call-service":
+      tooltip = `Call service ${config.service}`;
+      break;
+    default:
+      tooltip = `Show more-info: ${stateName}`;
+  }
+
+  return tooltip;
+};

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

@@ -1,4 +1,4 @@
-import "../elements/hui-icon-element.js";
+import "../elements/hui-icon-element";
 import "../elements/hui-image-element.js";
 import "../elements/hui-service-button-element.js";
 import "../elements/hui-state-badge-element.js";

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

@@ -1,53 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-icon.js";
-
-import ElementClickMixin from "../mixins/element-click-mixin.js";
-import { longPressBind } from "../common/directives/long-press-directive";
-
-/*
- * @appliesMixin ElementClickMixin
- */
-class HuiIconElement extends ElementClickMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          cursor: pointer;
-        }
-      </style>
-      <ha-icon
-        icon="[[_config.icon]]"
-        title$="[[computeTooltip(hass, _config)]]"
-      ></ha-icon>
-    `;
-  }
-
-  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 || !config.icon) {
-      throw Error("Error in element configuration");
-    }
-
-    this._config = config;
-  }
-}
-customElements.define("hui-icon-element", HuiIconElement);

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

@@ -0,0 +1,67 @@
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../../../components/ha-icon.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";
+
+interface Config extends LovelaceElementConfig {
+  icon: string;
+}
+
+export class HuiIconElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: Config) {
+    if (!config.icon) {
+      throw Error("Invalid Configuration: 'icon' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render() {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-icon
+        .icon="${this._config.icon}"
+        .title="${computeTooltip(this.hass!, this._config)}"
+        @ha-click="${(ev) => handleClick(ev, this.hass!, this._config!, false)}"
+        @ha-hold="${(ev) => handleClick(ev, this.hass!, this._config!, true)}"
+        .longPress="${longPress()}"
+      ></ha-icon>
+    `;
+  }
+
+  private renderStyle() {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-icon-element": HuiIconElement;
+  }
+}
+
+customElements.define("hui-icon-element", HuiIconElement);

src/panels/lovelace/elements/types.ts

@@ -4,6 +4,12 @@ export interface LovelaceElementConfig {
   type: string;
   entity?: string;
   style: object;
+  tap_action?: string;
+  navigation_path?: string;
+  service?: string;
+  title?: string;
+  hold_action?: string;
+  service_data?: object;
 }
 
 export interface LovelaceElement extends HTMLElement {

src/panels/lovelace/mixins/element-click-mixin.js

@@ -1,70 +1,16 @@
 import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin.js";
-import toggleEntity from "../common/entity/toggle-entity.js";
+import { computeTooltip } from "../../../common/string/compute-tooltip";
-import NavigateMixin from "../../../mixins/navigate-mixin";
+import { handleClick } from "../../../common/dom/handle-click";
-import EventsMixin from "../../../mixins/events-mixin.js";
-import computeStateName from "../../../common/entity/compute_state_name";
 
-/*
- * @polymerMixin
- * @appliesMixin EventsMixin
- * @appliesMixin NavigateMixin
- */
 export default dedupingMixin(
   (superClass) =>
-    class extends NavigateMixin(EventsMixin(superClass)) {
+    class extends superClass {
-      handleClick(hass, config, hold) {
+      handleClick(...args) {
-        let action = config.tap_action || "more-info";
+        handleClick(this, ...args);
-        if (hold) {
-          action = config.hold_action;
-        }
-        if (action === "none") return;
-
-        switch (action) {
-          case "more-info":
-            this.fire("hass-more-info", { entityId: config.entity });
-            break;
-          case "navigate":
-            this.navigate(config.navigation_path);
-            break;
-          case "toggle":
-            toggleEntity(hass, config.entity);
-            break;
-          case "call-service": {
-            const [domain, service] = config.service.split(".", 2);
-            const serviceData = Object.assign(
-              {},
-              { entity_id: config.entity },
-              config.service_data
-            );
-            hass.callService(domain, service, serviceData);
-          }
-        }
       }
 
-      computeTooltip(hass, config) {
+      computeTooltip(...args) {
-        if (config.title) return config.title;
+        computeTooltip(...args);
-
-        const stateName =
-          config.entity in hass.states
-            ? computeStateName(hass.states[config.entity])
-            : config.entity;
-
-        let tooltip;
-        switch (config.tap_action) {
-          case "navigate":
-            tooltip = `Navigate to ${config.navigation_path}`;
-            break;
-          case "toggle":
-            tooltip = `Toggle ${stateName}`;
-            break;
-          case "call-service":
-            tooltip = `Call service ${config.service}`;
-            break;
-          default:
-            tooltip = `Show more-info: ${stateName}`;
-        }
-
-        return tooltip;
       }
     }
 );