diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts index 97ca5aab28..54f6d3fda2 100644 --- a/src/panels/lovelace/cards/hui-markdown-card.ts +++ b/src/panels/lovelace/cards/hui-markdown-card.ts @@ -41,7 +41,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard { @property() private _content = ""; - @property() private _unsubRenderTemplate?: Promise; + @property() private _unsubRenderTemplate?: UnsubscribeFunc; public getCardSize(): number { return this._config === undefined @@ -121,24 +121,25 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard { return; } - this._unsubRenderTemplate = subscribeRenderTemplate( - this.hass.connection, - (result) => { - this._content = result; - }, - { - template: this._config.content, - entity_ids: this._config.entity_id, - variables: { - config: this._config, - user: this.hass.user!.name, + try { + this._unsubRenderTemplate = await subscribeRenderTemplate( + this.hass.connection, + (result) => { + this._content = result; }, - } - ); - this._unsubRenderTemplate.catch(() => { + { + template: this._config.content, + entity_ids: this._config.entity_id, + variables: { + config: this._config, + user: this.hass.user!.name, + }, + } + ); + } catch { this._content = this._config!.content; this._unsubRenderTemplate = undefined; - }); + } } private async _tryDisconnect(): Promise { @@ -147,9 +148,8 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard { } try { - const unsub = await this._unsubRenderTemplate; + this._unsubRenderTemplate(); this._unsubRenderTemplate = undefined; - unsub(); } catch (e) { if (e.code === "not_found") { // If we get here, the connection was probably already closed. Ignore. diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 06b839075d..d9d7e5ce4f 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -115,6 +115,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { oldConfig.theme !== this._config.theme ) { applyThemesOnElement(this, this.hass.themes, this._config.theme); + this.requestUpdate(); } } diff --git a/src/panels/lovelace/common/compute-card-size.ts b/src/panels/lovelace/common/compute-card-size.ts index a8f884f75c..b572b0b5e3 100644 --- a/src/panels/lovelace/common/compute-card-size.ts +++ b/src/panels/lovelace/common/compute-card-size.ts @@ -1,5 +1,5 @@ import { LovelaceCard } from "../types"; export const computeCardSize = (card: LovelaceCard): number => { - return typeof card.getCardSize === "function" ? card.getCardSize() : 1; + return typeof card.getCardSize === "function" ? card.getCardSize() : 4; }; diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts index cf2870801e..9b0216d155 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -284,16 +284,23 @@ export class HuiCardPicker extends LitElement { "ll-rebuild", (ev) => { ev.stopPropagation(); - element.parentElement!.replaceChild( - this._createCardElement(cardConfig), - element - ); + this._rebuildCard(element, cardConfig); }, { once: true } ); return element; } + private _rebuildCard( + cardElToReplace: LovelaceCard, + config: LovelaceCardConfig + ): void { + const newCardEl = this._createCardElement(config); + if (cardElToReplace.parentElement) { + cardElToReplace.parentElement!.replaceChild(newCardEl, cardElToReplace); + } + } + private async _renderCardElement(card: Card): Promise { let { type } = card; const { showElement, isCustom, name, description } = card;