diff --git a/src/panels/lovelace/cards/hui-card.ts b/src/panels/lovelace/cards/hui-card.ts index ee77c8818ec2..6249acaba095 100644 --- a/src/panels/lovelace/cards/hui-card.ts +++ b/src/panels/lovelace/cards/hui-card.ts @@ -31,11 +31,11 @@ export class HuiCard extends ReactiveElement { @property({ attribute: false }) public hass?: HomeAssistant; - public build() { + public load() { if (!this.config) { throw new Error("Cannot build card without config"); } - this._buildElement(this.config); + this._loadElement(this.config); } private _element?: LovelaceCard; @@ -81,43 +81,39 @@ export class HuiCard extends ReactiveElement { return this._element?.getLayoutOptions?.() ?? {}; } - private _createElement(config: LovelaceCardConfig) { - const element = createCardElement(config); + private _loadElement(config: LovelaceCardConfig) { + this._element = createCardElement(config); if (this.hass) { - element.hass = this.hass; + this._element.hass = this.hass; } - element.preview = this.preview; + this._element.preview = this.preview; // For backwards compatibility - (element as any).editMode = this.preview; + (this._element as any).editMode = this.preview; // Update element when the visibility of the card changes (e.g. conditional card or filter card) - element.addEventListener("card-visibility-changed", (ev: Event) => { + this._element.addEventListener("card-visibility-changed", (ev: Event) => { ev.stopPropagation(); this._updateVisibility(); }); - element.addEventListener( + this._element.addEventListener( "ll-upgrade", (ev: Event) => { ev.stopPropagation(); - element.hass = this.hass; + if (this.hass) { + this._element!.hass = this.hass; + } fireEvent(this, "card-updated"); }, { once: true } ); - element.addEventListener( + this._element.addEventListener( "ll-rebuild", (ev: Event) => { ev.stopPropagation(); - this._buildElement(config); + this._loadElement(config); fireEvent(this, "card-updated"); }, { once: true } ); - return element; - } - - private _buildElement(config: LovelaceCardConfig) { - this._element = this._createElement(config); - while (this.lastChild) { this.removeChild(this.lastChild); } @@ -128,7 +124,7 @@ export class HuiCard extends ReactiveElement { super.willUpdate(changedProps); if (!this._element) { - this.build(); + this.load(); } } @@ -141,7 +137,7 @@ export class HuiCard extends ReactiveElement { if (this.config !== oldConfig && this.config) { const typeChanged = this.config?.type !== oldConfig?.type; if (typeChanged) { - this._buildElement(this.config); + this._loadElement(this.config); } else { this._element?.setConfig(this.config); fireEvent(this, "card-updated"); @@ -154,7 +150,7 @@ export class HuiCard extends ReactiveElement { this._element.hass = this.hass; } } catch (e: any) { - this._buildElement(createErrorCardConfig(e.message, null)); + this._loadElement(createErrorCardConfig(e.message, null)); } } if (changedProps.has("preview")) { @@ -163,7 +159,7 @@ export class HuiCard extends ReactiveElement { // For backwards compatibility (this._element as any).editMode = this.preview; } catch (e: any) { - this._buildElement(createErrorCardConfig(e.message, null)); + this._loadElement(createErrorCardConfig(e.message, null)); } } if (changedProps.has("isPanel")) { diff --git a/src/panels/lovelace/cards/hui-conditional-card.ts b/src/panels/lovelace/cards/hui-conditional-card.ts index 68ee58b9cb3b..630a7494c9b0 100644 --- a/src/panels/lovelace/cards/hui-conditional-card.ts +++ b/src/panels/lovelace/cards/hui-conditional-card.ts @@ -41,7 +41,7 @@ class HuiConditionalCard extends HuiConditionalBase implements LovelaceCard { element.hass = this.hass; element.preview = this.preview; element.config = cardConfig; - element.build(); + element.load(); return element; } diff --git a/src/panels/lovelace/cards/hui-entity-filter-card.ts b/src/panels/lovelace/cards/hui-entity-filter-card.ts index 5475fc550448..d79e88ad0daf 100644 --- a/src/panels/lovelace/cards/hui-entity-filter-card.ts +++ b/src/panels/lovelace/cards/hui-entity-filter-card.ts @@ -249,7 +249,7 @@ export class HuiEntityFilterCard element.hass = this.hass; element.preview = this.preview; element.config = cardConfig; - element.build(); + element.load(); return element; } } diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts index f22dc3351fe1..33c6d3e7aaa2 100644 --- a/src/panels/lovelace/cards/hui-stack-card.ts +++ b/src/panels/lovelace/cards/hui-stack-card.ts @@ -70,7 +70,7 @@ export abstract class HuiStackCard const element = document.createElement("hui-card"); element.hass = this.hass; element.config = cardConfig; - element.build(); + element.load(); return element; } diff --git a/src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts index 6fba848973b9..68c0487beee4 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts @@ -146,7 +146,7 @@ export class HuiCardLayoutEditor extends LitElement { this._defaultLayoutOptions = this._cardElement?.getElementLayoutOptions(); }); - this._cardElement.build(); + this._cardElement.load(); this._defaultLayoutOptions = this._cardElement.getElementLayoutOptions(); } catch (err) { // eslint-disable-next-line no-console diff --git a/src/panels/lovelace/sections/hui-section.ts b/src/panels/lovelace/sections/hui-section.ts index 61f2eddd41fe..07dc7a78f8af 100644 --- a/src/panels/lovelace/sections/hui-section.ts +++ b/src/panels/lovelace/sections/hui-section.ts @@ -64,7 +64,7 @@ export class HuiSection extends ReactiveElement { ev.stopPropagation(); this._cards = [...this._cards]; }); - element.build(); + element.load(); return element; } diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts index af1307db81c7..ea0bb5a89512 100644 --- a/src/panels/lovelace/views/hui-view.ts +++ b/src/panels/lovelace/views/hui-view.ts @@ -82,7 +82,7 @@ export class HUIView extends ReactiveElement { ev.stopPropagation(); this._cards = [...this._cards]; }); - element.build(); + element.load(); return element; }