Convert hui-vertical-stack-card to TypeScript/LitElement (home-assist…

…ant#1846)

Failed to rebase previous branch and am taking my working changes and applying to a new branch based off of current master.

Updated tslint.json to allow for prefixed `_` to variable names

src/panels/lovelace/cards/hui-vertical-stack-card.ts

@@ -0,0 +1,93 @@
+import { html, LitElement } from "@polymer/lit-element";
+
+import computeCardSize from "../common/compute-card-size.js";
+import createCardElement from "../common/create-card-element.js";
+
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { HomeAssistant } from "../../../types";
+
+interface Config extends LovelaceConfig {
+  cards: LovelaceConfig[];
+}
+
+class HuiVerticalStackCard extends LitElement implements LovelaceCard {
+  protected config?: Config;
+  private _hass?: HomeAssistant;
+
+  static get properties() {
+    return {
+      config: {},
+    };
+  }
+
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+    for (const el of this.shadowRoot!.querySelectorAll("#root > *")) {
+      const element = el as LovelaceCard;
+      element.hass = this._hass;
+    }
+  }
+
+  public getCardSize() {
+    let totalSize = 0;
+    for (const element of this.shadowRoot!.querySelectorAll("#root > *")) {
+      totalSize += computeCardSize(element);
+    }
+
+    return totalSize;
+  }
+
+  public setConfig(config: Config) {
+    if (!config || !config.cards || !Array.isArray(config.cards)) {
+      throw new Error("Card config incorrect");
+    }
+    this.config = config;
+  }
+
+  protected render() {
+    if (!this.config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <div id="root">
+        ${this.config.cards.map((card) => this.createCardElement(card))}
+      </div>
+    `;
+  }
+
+  private renderStyle() {
+    return html`
+      <style>
+        #root {
+          display: flex;
+          flex-direction: column;
+        }
+        #root > * {
+          margin: 4px 0 4px 0;
+        }
+        #root > *:first-child {
+          margin-top: 0;
+        }
+        #root > *:last-child {
+          margin-bottom: 0;
+        }
+      </style>
+    `;
+  }
+
+  private createCardElement(card: LovelaceConfig): LovelaceCard {
+    const element = createCardElement(card) as LovelaceCard;
+    element.hass = this._hass;
+    return element;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-vertical-stack-card": HuiVerticalStackCard;
+  }
+}
+
+customElements.define("hui-vertical-stack-card", HuiVerticalStackCard);

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

@@ -19,7 +19,7 @@ import "../cards/hui-picture-entity-card";
 import "../cards/hui-picture-glance-card";
 import "../cards/hui-plant-status-card.js";
 import "../cards/hui-sensor-card.js";
-import "../cards/hui-vertical-stack-card.js";
+import "../cards/hui-vertical-stack-card.ts";
 import "../cards/hui-weather-forecast-card";
 import "../cards/hui-gauge-card.js";
 

tslint.json

@@ -4,6 +4,12 @@
     "interface-name": false,
     "no-submodule-imports": false,
     "ordered-imports": false,
-    "object-literal-sort-keys": false
+    "object-literal-sort-keys": false,
+    "variable-name": [
+      true,
+      "ban-keywords",
+      "check-format",
+      "allow-leading-underscore"
+    ]
   }
 }