Migrate card preview to UpdatingElement (#5884)

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

@@ -248,19 +248,12 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
   }
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.has("_setTemp")) {
-      return true;
-    }
     return hasConfigOrEntityChanged(this, changedProps);
   }
 
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
-    if (changedProps.has("_setTemp")) {
-      this.rescale_svg();
-    }
-
     if (
       !this._config ||
       !this.hass ||
@@ -283,23 +276,18 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
     }
 
-    const stateObj = this.hass!.states[this._config!.entity];
+    const stateObj = this.hass.states[this._config.entity];
     if (!stateObj) {
       return;
     }
-    const newTemp = this._getSetTemp(stateObj);
-    if (
-      Array.isArray(this._setTemp) &&
-      Array.isArray(newTemp) &&
-      (this._setTemp[0] !== newTemp[0] || this._setTemp[1] !== newTemp[1])
-    ) {
-      this._setTemp = newTemp;
-    } else if (this._setTemp !== newTemp) {
-      this._setTemp = newTemp;
+
+    if (!oldHass || oldHass.states[this._config.entity] !== stateObj) {
+      this._setTemp = this._getSetTemp(stateObj);
+      this._rescale_svg();
     }
   }
 
-  private rescale_svg() {
+  private _rescale_svg() {
     // Set the viewbox of the SVG containing the set temperature to perfectly
     // fit the text
     // That way it will auto-scale correctly

src/panels/lovelace/editor/card-editor/hui-card-preview.ts

@@ -4,16 +4,16 @@ import { LovelaceCardConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import { createCardElement } from "../../create-element/create-card-element";
 import { LovelaceCard } from "../../types";
-import { ConfigError } from "../types";
 import { createErrorCardConfig } from "../../create-element/create-element-base";
+import { property, PropertyValues, UpdatingElement } from "lit-element";
 
-export class HuiCardPreview extends HTMLElement {
-  private _hass?: HomeAssistant;
+export class HuiCardPreview extends UpdatingElement {
+  @property() public hass?: HomeAssistant;
+
+  @property() public config?: LovelaceCardConfig;
 
   private _element?: LovelaceCard;
 
-  private _config?: LovelaceCardConfig;
-
   private get _error() {
     return this._element?.tagName === "HUI-ERROR-CARD";
   }
@@ -22,59 +22,60 @@ export class HuiCardPreview extends HTMLElement {
     super();
     this.addEventListener("ll-rebuild", () => {
       this._cleanup();
-      if (this._config) {
-        this.config = this._config;
+      if (this.config) {
+        this._createCard(this.config);
       }
     });
   }
 
-  set hass(hass: HomeAssistant) {
-    if (!this._hass || this._hass.language !== hass.language) {
-      this.style.direction = computeRTL(hass) ? "rtl" : "ltr";
-    }
+  protected update(changedProperties: PropertyValues) {
+    super.update(changedProperties);
 
-    this._hass = hass;
-    if (this._element) {
-      this._element.hass = hass;
-    }
-  }
+    if (changedProperties.has("config")) {
+      const oldConfig = changedProperties.get("config") as
+        | undefined
+        | LovelaceCardConfig;
 
-  set error(error: ConfigError) {
-    this._createCard(
-      createErrorCardConfig(`${error.type}: ${error.message}`, undefined)
-    );
-  }
-
-  set config(configValue: LovelaceCardConfig) {
-    const curConfig = this._config;
-    this._config = configValue;
-
-    if (!configValue) {
-      this._cleanup();
-      return;
-    }
-
-    if (!configValue.type) {
-      this._createCard(
-        createErrorCardConfig("No card type found", configValue)
-      );
-      return;
-    }
-
-    if (!this._element) {
-      this._createCard(configValue);
-      return;
-    }
-
-    // in case the element was an error element we always want to recreate it
-    if (!this._error && curConfig && configValue.type === curConfig.type) {
-      try {
-        this._element.setConfig(configValue);
-      } catch (err) {
-        this._createCard(createErrorCardConfig(err.message, configValue));
+      if (!this.config) {
+        this._cleanup();
+        return;
+      }
+
+      if (!this.config.type) {
+        this._createCard(
+          createErrorCardConfig("No card type found", this.config)
+        );
+        return;
+      }
+
+      if (!this._element) {
+        this._createCard(this.config);
+        return;
+      }
+
+      // in case the element was an error element we always want to recreate it
+      if (!this._error && oldConfig && this.config.type === oldConfig.type) {
+        try {
+          this._element.setConfig(this.config);
+        } catch (err) {
+          this._createCard(createErrorCardConfig(err.message, this.config));
+        }
+      } else {
+        this._createCard(this.config);
+      }
+    }
+
+    if (changedProperties.has("hass")) {
+      const oldHass = changedProperties.get("hass") as
+        | HomeAssistant
+        | undefined;
+      if (!oldHass || oldHass.language !== this.hass!.language) {
+        this.style.direction = computeRTL(this.hass!) ? "rtl" : "ltr";
+      }
+
+      if (this._element) {
+        this._element.hass = this.hass;
       }
-    } else {
-      this._createCard(configValue);
     }
   }
 
@@ -82,8 +83,8 @@ export class HuiCardPreview extends HTMLElement {
     this._cleanup();
     this._element = createCardElement(configValue);
 
-    if (this._hass) {
-      this._element!.hass = this._hass;
+    if (this.hass) {
+      this._element!.hass = this.hass;
     }
 
     this.appendChild(this._element!);

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -25,6 +25,7 @@ import type { ConfigChangedEvent, HuiCardEditor } from "./hui-card-editor";
 import "./hui-card-picker";
 import "./hui-card-preview";
 import type { EditCardDialogParams } from "./show-edit-card-dialog";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 
 declare global {
   // for fire event