Add rebuild to conditional and always show in edit mode (#5429)

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

@@ -5,6 +5,7 @@ import { createCardElement } from "../create-element/create-card-element";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { computeCardSize } from "../common/compute-card-size";
 import { ConditionalCardConfig } from "./types";
+import { LovelaceCardConfig } from "../../../data/lovelace";
 
 @customElement("hui-conditional-card")
 class HuiConditionalCard extends HuiConditionalBase implements LovelaceCard {
@@ -19,7 +20,8 @@ class HuiConditionalCard extends HuiConditionalBase implements LovelaceCard {
     return {
       type: "conditional",
       conditions: [],
-      card: { type: "" },
+      // @ts-ignore
+      card: {},
     };
   }
 
@@ -30,17 +32,35 @@ class HuiConditionalCard extends HuiConditionalBase implements LovelaceCard {
       throw new Error("No card configured.");
     }
 
-    if (this._element && this._element.parentElement) {
+    this._element = this._createCardElement(config.card);
-      this.removeChild(this._element);
-    }
-
-    this._element = createCardElement(config.card) as LovelaceCard;
-    this.appendChild(this._element);
   }
 
   public getCardSize(): number {
     return computeCardSize(this._element as LovelaceCard);
   }
+
+  private _createCardElement(cardConfig: LovelaceCardConfig) {
+    const element = createCardElement(cardConfig) as LovelaceCard;
+    if (this.hass) {
+      element.hass = this.hass;
+    }
+    element.addEventListener(
+      "ll-rebuild",
+      (ev) => {
+        ev.stopPropagation();
+        this._rebuildCard(cardConfig);
+      },
+      { once: true }
+    );
+    return element;
+  }
+
+  private _rebuildCard(config: LovelaceCardConfig): void {
+    this._element = this._createCardElement(config);
+    if (this.lastChild) {
+      this.replaceChild(this._element, this.lastChild);
+    }
+  }
 }
 
 declare global {

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

@@ -9,6 +9,7 @@ import { evaluateFilter } from "../common/evaluate-filter";
 
 class EntityFilterCard extends HTMLElement implements LovelaceCard {
   public isPanel?: boolean;
+  private _editMode = false;
   private _element?: LovelaceCard;
   private _config?: EntityFilterCardConfig;
   private _configEntities?: EntityFilterEntityConfig[];
@@ -51,6 +52,14 @@ class EntityFilterCard extends HTMLElement implements LovelaceCard {
     }
   }
 
+  set editMode(editMode: boolean) {
+    this._editMode = editMode;
+    if (!this._element) {
+      return;
+    }
+    this._element.editMode = editMode;
+  }
+
   set hass(hass: HomeAssistant) {
     if (!hass || !this._config) {
       return;
@@ -114,6 +123,7 @@ class EntityFilterCard extends HTMLElement implements LovelaceCard {
       }
 
       element.isPanel = this.isPanel;
+      element.editMode = this._editMode;
       element.hass = hass;
     }
 

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

@@ -5,6 +5,7 @@ import {
   CSSResult,
   css,
   property,
+  PropertyValues,
 } from "lit-element";
 
 import { createCardElement } from "../create-element/create-card-element";
@@ -25,21 +26,10 @@ export abstract class HuiStackCard extends LitElement implements LovelaceCard {
     return { cards: [] };
   }
 
+  @property() public hass?: HomeAssistant;
+  @property() public editMode?: boolean;
   @property() protected _cards?: LovelaceCard[];
   @property() private _config?: StackCardConfig;
-  private _hass?: HomeAssistant;
-
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-
-    if (!this._cards) {
-      return;
-    }
-
-    for (const element of this._cards) {
-      element.hass = this._hass;
-    }
-  }
 
   public getCardSize(): number {
     return 1;
@@ -56,6 +46,21 @@ export abstract class HuiStackCard extends LitElement implements LovelaceCard {
     });
   }
 
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (
+      !this._cards ||
+      (!changedProps.has("hass") && !changedProps.has("editMode"))
+    ) {
+      return;
+    }
+
+    for (const element of this._cards) {
+      element.hass = this.hass;
+      element.editMode = this.editMode;
+    }
+  }
+
   protected render(): TemplateResult {
     if (!this._config || !this._cards) {
       return html``;
@@ -87,8 +92,8 @@ export abstract class HuiStackCard extends LitElement implements LovelaceCard {
 
   private _createCardElement(cardConfig: LovelaceCardConfig) {
     const element = createCardElement(cardConfig) as LovelaceCard;
-    if (this._hass) {
+    if (this.hass) {
-      element.hass = this._hass;
+      element.hass = this.hass;
     }
     element.addEventListener(
       "ll-rebuild",

src/panels/lovelace/components/hui-conditional-base.ts

@@ -12,6 +12,7 @@ import { ConditionalCardConfig } from "../cards/types";
 @customElement("hui-conditional-base")
 export class HuiConditionalBase extends UpdatingElement {
   @property() public hass?: HomeAssistant;
+  @property() public editMode?: boolean;
   @property() protected _config?: ConditionalCardConfig | ConditionalRowConfig;
   protected _element?: LovelaceCard | LovelaceRow;
 
@@ -30,8 +31,11 @@ export class HuiConditionalBase extends UpdatingElement {
       throw new Error("Conditions are invalid.");
     }
 
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
     this._config = config;
-    this.style.display = "none";
   }
 
   protected update(): void {
@@ -39,13 +43,19 @@ export class HuiConditionalBase extends UpdatingElement {
       return;
     }
 
-    const visible = checkConditionsMet(this._config.conditions, this.hass);
+    this._element.editMode = this.editMode;
+
+    const visible =
+      this.editMode || checkConditionsMet(this._config.conditions, this.hass);
+
+    this.style.setProperty("display", visible ? "" : "none");
 
     if (visible) {
       this._element.hass = this.hass;
+      if (!this._element.parentElement) {
+        this.appendChild(this._element);
+      }
     }
-
-    this.style.setProperty("display", visible ? "" : "none");
   }
 }
 

src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts

@@ -13,7 +13,7 @@ import "@polymer/paper-tabs";
 import { struct } from "../../common/structs/struct";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
-import { StackCardConfig } from "../../cards/types";
+import { ConditionalCardConfig } from "../../cards/types";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { LovelaceConfig } from "../../../../data/lovelace";
 
@@ -41,13 +41,13 @@ export class HuiConditionalCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property() public hass?: HomeAssistant;
   @property() public lovelace?: LovelaceConfig;
-  @property() private _config?: StackCardConfig;
+  @property() private _config?: ConditionalCardConfig;
   @property() private _GUImode = true;
   @property() private _guiModeAvailable? = true;
   @property() private _cardTab: boolean = false;
   @query("hui-card-editor") private _cardEditorEl?: HuiCardEditor;
 
-  public setConfig(config: StackCardConfig): void {
+  public setConfig(config: ConditionalCardConfig): void {
     this._config = cardConfigStruct(config);
   }
 
@@ -75,7 +75,7 @@ export class HuiConditionalCardEditor extends LitElement
       ${this._cardTab
         ? html`
             <div class="card">
-              ${this._config.card.type
+              ${this._config.card.type !== undefined
                 ? html`
                     <div class="card-options">
                       <mwc-button
@@ -225,6 +225,7 @@ export class HuiConditionalCardEditor extends LitElement
     if (!this._config) {
       return;
     }
+    // @ts-ignore
     this._config.card = {};
     fireEvent(this, "config-changed", { config: this._config });
   }

src/panels/lovelace/entity-rows/types.ts

@@ -69,6 +69,7 @@ export type LovelaceRowConfig =
 
 export interface LovelaceRow extends HTMLElement {
   hass?: HomeAssistant;
+  editMode?: boolean;
   setConfig(config: LovelaceRowConfig);
 }
 

src/panels/lovelace/special-rows/hui-conditional-row.ts

@@ -13,12 +13,7 @@ class HuiConditionalRow extends HuiConditionalBase implements LovelaceRow {
       throw new Error("No row configured.");
     }
 
-    if (this._element && this._element.parentElement) {
-      this.removeChild(this._element);
-    }
-
     this._element = createRowElement(config.row) as LovelaceRow;
-    this.appendChild(this._element);
   }
 }