Fix hass setting on stack (#1868)

* Fix hass setting on stack

* Don't set hass on pic elements if undefined

* Don't set hass on entity rows if undefined

* prefix config prop

* Pic elements set hass yoooo

* Remove interface

* Make stack config private

* Fix import

* Lint

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

@@ -31,8 +31,8 @@ interface Config extends LovelaceConfig {
 class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
   protected _hass?: HomeAssistant;
-  protected config?: Config;
-  protected configEntities?: ConfigEntity[];
+  protected _config?: Config;
+  protected _configEntities?: ConfigEntity[];
 
   set hass(hass) {
     this._hass = hass;
@@ -45,16 +45,16 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
 
   static get properties(): PropertyDeclarations {
     return {
-      config: {},
+      _config: {},
     };
   }
 
   public getCardSize() {
-    if (!this.config) {
+    if (!this._config) {
       return 0;
     }
     // +1 for the header
-    return (this.config.title ? 1 : 0) + this.config.entities.length;
+    return (this._config.title ? 1 : 0) + this._config.entities.length;
   }
 
   public setConfig(config: Config) {
@@ -77,15 +77,15 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
       }
     }
 
-    this.config = config;
-    this.configEntities = entities;
+    this._config = config;
+    this._configEntities = entities;
   }
 
   protected render() {
-    if (!this.config || !this._hass) {
+    if (!this._config || !this._hass) {
       return html``;
     }
-    const { show_header_toggle, title } = this.config;
+    const { show_header_toggle, title } = this._config;
 
     return html`
       ${this.renderStyle()}
@@ -102,7 +102,7 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
                   : html`
                   <hui-entities-toggle
                     .hass="${this._hass}"
-                    .entities="${this.configEntities!.map(
+                    .entities="${this._configEntities!.map(
                       (conf) => conf.entity
                     )}"
                   >
@@ -111,7 +111,7 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
             </div>`
         }
         <div id="states">
-          ${this.configEntities!.map((entityConf) =>
+          ${this._configEntities!.map((entityConf) =>
             this.renderEntity(entityConf)
           )}
         </div>
@@ -156,7 +156,9 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
 
   private renderEntity(entityConf) {
     const element = createRowElement(entityConf);
-    element.hass = this._hass;
+    if (this._hass) {
+      element.hass = this._hass;
+    }
     if (
       entityConf.entity &&
       !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity))

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

@@ -3,16 +3,9 @@ import { TemplateResult } from "lit-html";
 
 import computeCardSize from "../common/compute-card-size.js";
 
-import { LovelaceCard, LovelaceConfig } from "../types";
-import HuiStackCard from "./hui-stack-card";
-
-interface Config extends LovelaceConfig {
-  cards: LovelaceConfig[];
-}
-
-class HuiHorizontalStackCard extends HuiStackCard implements LovelaceCard {
-  protected config?: Config;
+import { HuiStackCard } from "./hui-stack-card";
 
+class HuiHorizontalStackCard extends HuiStackCard {
   public getCardSize(): number {
     let totalSize = 0;
 

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

@@ -10,15 +10,14 @@ interface Config extends LovelaceConfig {
   cards: LovelaceConfig[];
 }
 
-export default abstract class HuiStackCard extends LitElement
-  implements LovelaceCard {
-  protected config?: Config;
+export abstract class HuiStackCard extends LitElement implements LovelaceCard {
   protected _cards?: LovelaceCard[];
+  private _config?: Config;
   private _hass?: HomeAssistant;
 
   static get properties() {
     return {
-      config: {},
+      _config: {},
     };
   }
 
@@ -40,16 +39,18 @@ export default abstract class HuiStackCard extends LitElement
     if (!config || !config.cards || !Array.isArray(config.cards)) {
       throw new Error("Card config incorrect");
     }
-    this.config = config;
+    this._config = config;
     this._cards = config.cards.map((card) => {
       const element = createCardElement(card) as LovelaceCard;
-      element.hass = this._hass;
+      if (this._hass) {
+        element.hass = this._hass;
+      }
       return element;
     });
   }
 
   protected render(): TemplateResult {
-    if (!this.config) {
+    if (!this._config) {
       return html``;
     }
 

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

@@ -1,38 +1,11 @@
-import { html, LitElement } from "@polymer/lit-element";
+import { html } 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 _cards?: LovelaceCard[];
-  private _hass?: HomeAssistant;
-
-  static get properties() {
-    return {
-      config: {},
-    };
-  }
-
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-
-    if (!this._cards) {
-      return;
-    }
-
-    for (const element of this._cards) {
-      element.hass = this._hass;
-    }
-  }
+import { HuiStackCard } from "./hui-stack-card";
+import { TemplateResult } from "lit-html";
 
+class HuiVerticalStackCard extends HuiStackCard {
   public getCardSize() {
     let totalSize = 0;
 
@@ -47,32 +20,7 @@ class HuiVerticalStackCard extends LitElement implements LovelaceCard {
     return totalSize;
   }
 
-  public setConfig(config: Config) {
-    if (!config || !config.cards || !Array.isArray(config.cards)) {
-      throw new Error("Card config incorrect");
-    }
-    this.config = config;
-    this._cards = config.cards.map((card) => {
-      const element = createCardElement(card) as LovelaceCard;
-      element.hass = this._hass;
-      return element;
-    });
-  }
-
-  protected render() {
-    if (!this.config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <div id="root">
-        ${this._cards!}
-      </div>
-    `;
-  }
-
-  private renderStyle() {
+  protected renderStyle(): TemplateResult {
     return html`
       <style>
         #root {