Convert hui-picture-entity-card to TypeScript/LitElement

src/data/entity.ts

@@ -0,0 +1 @@
+export const UNAVAILABLE = "unavailable";

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -0,0 +1,175 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html/lib/shady-render";
+import { classMap } from "lit-html/directives/classMap";
+
+import "../../../components/ha-card";
+import "../components/hui-image";
+
+import computeDomain from "../../../common/entity/compute_domain";
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+import computeStateName from "../../../common/entity/compute_state_name";
+
+import { longPress } from "../common/directives/long-press-directive";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { HomeAssistant } from "../../../types";
+import { LovelaceCardConfig } from "../../../data/lovelace";
+import { LovelaceCard } from "../types";
+import { handleClick } from "../common/handle-click";
+import { UNAVAILABLE } from "../../../data/entity";
+
+interface Config extends LovelaceCardConfig {
+  entity: string;
+  name?: string;
+  navigation_path?: string;
+  image?: string;
+  camera_image?: string;
+  state_image?: {};
+  aspect_ratio?: string;
+  tap_action?: "toggle" | "call-service" | "more-info" | "navigate";
+  hold_action?: "toggle" | "call-service" | "more-info" | "navigate";
+  service?: string;
+  service_data?: object;
+  show_name?: boolean;
+  show_state?: boolean;
+}
+
+class HuiPictureEntityCard extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceCard {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    return 3;
+  }
+
+  public setConfig(config: Config): void {
+    if (!config || !config.entity) {
+      throw new Error("Invalid Configuration: 'entity' required");
+    }
+
+    if (
+      computeDomain(config.entity) !== "camera" &&
+      (!config.image && !config.state_image && !config.camera_image)
+    ) {
+      throw new Error("No image source configured.");
+    }
+
+    this._config = { show_name: true, show_state: true, ...config };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this.hass || !this.hass.states[this._config.entity]) {
+      return html``;
+    }
+
+    const stateObj = this.hass.states[this._config.entity];
+    const name = this._config.name || computeStateName(stateObj);
+    const state = computeStateDisplay(
+      this.localize,
+      stateObj,
+      this.hass.language
+    );
+
+    let footer: TemplateResult | string = "";
+    if (this._config.show_name && this._config.show_state) {
+      footer = html`
+        <div class="footer both">
+          <div>${name}</div>
+          <div>${state}</div>
+        </div>
+      `;
+    } else if (this._config.show_name) {
+      footer = html`
+        <div class="footer">${name}</div>
+      `;
+    } else if (this._config.show_state) {
+      footer = html`
+        <div class="footer state">${state}</div>
+      `;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card>
+        <hui-image
+          .hass="${this.hass}"
+          .image="${this._config.image}"
+          .stateImage="${this._config.state_image}"
+          .cameraImage="${
+            computeDomain(this._config.entity) === "camera"
+              ? this._config.entity
+              : this._config.camera_image
+          }"
+          .entity="${this._config.entity}"
+          .aspectRatio="${this._config.aspect_ratio}"
+          @ha-click="${this._handleClick}"
+          @ha-hold="${this._handleHold}"
+          .longPress="${longPress()}"
+          class="${
+            classMap({
+              clickable: stateObj.state !== UNAVAILABLE,
+            })
+          }"
+        ></hui-image>
+        ${footer}
+      </ha-card>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-card {
+          min-height: 75px;
+          overflow: hidden;
+          position: relative;
+        }
+        hui-image.clickable {
+          cursor: pointer;
+        }
+        .footer {
+          @apply --paper-font-common-nowrap;
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: rgba(0, 0, 0, 0.3);
+          padding: 16px;
+          font-size: 16px;
+          line-height: 16px;
+          color: white;
+        }
+        .both {
+          display: flex;
+          justify-content: space-between;
+        }
+        .state {
+          text-align: right;
+        }
+      </style>
+    `;
+  }
+
+  private _handleClick() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-picture-entity-card": HuiPictureEntityCard;
+  }
+}
+
+customElements.define("hui-picture-entity-card", HuiPictureEntityCard);

src/panels/lovelace/common/handle-click.ts

@@ -3,11 +3,12 @@ import { LovelaceElementConfig } from "../elements/types";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import { toggleEntity } from "../../../../src/panels/lovelace/common/entity/toggle-entity";
+import { LovelaceCardConfig } from "../../../data/lovelace";
 
 export const handleClick = (
   node: HTMLElement,
   hass: HomeAssistant,
-  config: LovelaceElementConfig,
+  config: LovelaceElementConfig | LovelaceCardConfig,
   hold: boolean
 ): void => {
   let action = config.tap_action || "more-info";