Introduce typescript to hui-conditional-card (#1831)

src/panels/lovelace/cards/hui-conditional-card.js

@@ -1,84 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import computeCardSize from "../common/compute-card-size.js";
-import createCardElement from "../common/create-card-element.js";
-
-class HuiConditionalCard extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        .hidden {
-          display: none;
-        }
-      </style>
-      <div id="card"></div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      _config: Object,
-    };
-  }
-
-  ready() {
-    super.ready();
-    if (this._config) this._buildConfig();
-  }
-
-  setConfig(config) {
-    if (
-      !config ||
-      !config.card ||
-      !Array.isArray(config.conditions) ||
-      !config.conditions.every((c) => c.entity && (c.state || c.state_not))
-    ) {
-      throw new Error("Error in card configuration.");
-    }
-
-    this._config = config;
-    if (this.$) this._buildConfig();
-  }
-
-  _buildConfig() {
-    const config = this._config;
-    const root = this.$.card;
-    while (root.lastChild) {
-      root.removeChild(root.lastChild);
-    }
-
-    const element = createCardElement(config.card);
-    element.hass = this.hass;
-    root.appendChild(element);
-    if (this.hass) this._hassChanged(this.hass);
-  }
-
-  getCardSize() {
-    const el = this.$.card && this.$.card.lastChild;
-    return el ? computeCardSize(el) : 1;
-  }
-
-  _hassChanged(hass) {
-    const root = this.$.card;
-    if (!root || !root.lastChild) return;
-
-    root.lastChild.hass = hass;
-
-    const conditions = this._config.conditions;
-    const visible = conditions.every((c) => {
-      if (c.entity in hass.states) {
-        if (c.state) return hass.states[c.entity].state === c.state;
-        return hass.states[c.entity].state !== c.state_not;
-      }
-      return false;
-    });
-    root.classList.toggle("hidden", !visible);
-    this.style.setProperty("margin", !visible ? "0" : null);
-  }
-}
-customElements.define("hui-conditional-card", HuiConditionalCard);

src/panels/lovelace/cards/hui-conditional-card.ts

@@ -0,0 +1,64 @@
+import computeCardSize from "../common/compute-card-size.js";
+import createCardElement from "../common/create-card-element.js";
+import { HomeAssistant } from "../../../types.js";
+import { LovelaceCard, LovelaceConfig } from "../types.js";
+
+interface Condition {
+  entity: string;
+  state?: string;
+  state_not?: string;
+}
+
+interface Config extends LovelaceConfig {
+  card: LovelaceConfig;
+  conditions: Condition[];
+}
+
+class HuiConditionalCard extends HTMLElement implements LovelaceCard {
+  protected config?: Config;
+  protected card?: LovelaceCard;
+
+  public setConfig(config) {
+    if(
+      !config.card ||
+      !config.conditions ||
+      !Array.isArray(config.conditions) ||
+      !config.conditions.every((c) => c.entity && (c.state || c.state_not))
+    ) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this.config = config;
+    this.card = createCardElement(config.card);
+    if (this.card) {
+      this.appendChild(this.card);
+      this.card.hass = this.hass;
+    }
+  }
+
+  set hass(hass: HomeAssistant) {
+    const visible = this.config &&
+      this.config.conditions.every((c) => {
+      if (!(c.entity in hass.states)) { return false; }
+      if (c.state) { return hass.states[c.entity].state === c.state; }
+      return hass.states[c.entity].state !== c.state_not;
+    });
+
+    if (visible && this.card) { this.card.hass = hass; }
+
+    this.style.setProperty("display", visible? "" : "none");
+  }
+
+  public getCardSize() {
+    return computeCardSize(this.card);
+  }
+
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-conditional-card": HuiConditionalCard;
+  }
+}
+
+customElements.define("hui-conditional-card", HuiConditionalCard);

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

@@ -1,7 +1,7 @@
 import { fireEvent } from "../../../common/dom/fire_event.js";
 
 import "../cards/hui-alarm-panel-card.js";
-import "../cards/hui-conditional-card.js";
+import "../cards/hui-conditional-card.ts";
 import "../cards/hui-entities-card.js";
 import "../cards/hui-entity-button-card.ts";
 import "../cards/hui-entity-filter-card.js";