diff --git a/src/panels/lovelace/cards/hui-conditional-card.ts b/src/panels/lovelace/cards/hui-conditional-card.ts index 33a3c03510..1cca6391fc 100644 --- a/src/panels/lovelace/cards/hui-conditional-card.ts +++ b/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.removeChild(this._element); - } - - this._element = createCardElement(config.card) as LovelaceCard; - this.appendChild(this._element); + this._element = this._createCardElement(config.card); } 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 { diff --git a/src/panels/lovelace/cards/hui-entity-filter-card.ts b/src/panels/lovelace/cards/hui-entity-filter-card.ts index 0bf897c960..53fbe8bd49 100644 --- a/src/panels/lovelace/cards/hui-entity-filter-card.ts +++ b/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; } diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts index 05dd4cdf67..1c6b1c4c12 100644 --- a/src/panels/lovelace/cards/hui-stack-card.ts +++ b/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) { - element.hass = this._hass; + if (this.hass) { + element.hass = this.hass; } element.addEventListener( "ll-rebuild", diff --git a/src/panels/lovelace/components/hui-conditional-base.ts b/src/panels/lovelace/components/hui-conditional-base.ts index a3a1387b7d..c54661f7fd 100644 --- a/src/panels/lovelace/components/hui-conditional-base.ts +++ b/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"); } } diff --git a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts index dec169ca6e..1675f6e883 100644 --- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts +++ b/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`
- ${this._config.card.type + ${this._config.card.type !== undefined ? html`