Use layout property for panel view (#21418)

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

@@ -25,8 +25,6 @@ declare global {
 export class HuiCard extends ReactiveElement {
   @property({ type: Boolean }) public preview = false;
 
-  @property({ attribute: false }) public isPanel = false;
-
   @property({ attribute: false }) public config?: LovelaceCardConfig;
 
   @property({ attribute: false }) public hass?: HomeAssistant;
@@ -178,11 +176,14 @@ export class HuiCard extends ReactiveElement {
           this._loadElement(createErrorCardConfig(e.message, null));
         }
       }
-      if (changedProps.has("isPanel")) {
-        this._element.isPanel = this.isPanel;
-      }
       if (changedProps.has("layout")) {
-        this._element.layout = this.layout;
+        try {
+          this._element.layout = this.layout;
+          // For backwards compatibility
+          (this._element as any).isPanel = this.layout === "panel";
+        } catch (e: any) {
+          this._loadElement(createErrorCardConfig(e.message, null));
+        }
       }
     }
 

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

@@ -53,7 +53,7 @@ export class HuiEntityFilterCard
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ type: Boolean }) public isPanel = false;
+  @property({ attribute: false }) public layout?: string;
 
   @property({ type: Boolean }) public preview = false;
 
@@ -118,7 +118,7 @@ export class HuiEntityFilterCard
     if (this._element) {
       this._element.hass = this.hass;
       this._element.preview = this.preview;
-      this._element.isPanel = this.isPanel;
+      this._element.layout = this.layout;
     }
 
     if (changedProps.has("_config")) {

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

@@ -29,9 +29,6 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
     };
   }
 
-  @property({ type: Boolean, reflect: true })
-  public isPanel = false;
-
   @property({ attribute: false })
   public layout?: string;
 
@@ -63,7 +60,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
     }
 
     let padding = "";
-    const ignoreAspectRatio = this.isPanel || this.layout === "grid";
+    const ignoreAspectRatio = this.layout === "panel" || this.layout === "grid";
     if (!ignoreAspectRatio) {
       if (this._config.aspect_ratio) {
         const ratio = parseAspectRatio(this._config.aspect_ratio);

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

@@ -54,11 +54,7 @@ interface MapEntityConfig extends EntityConfig {
 class HuiMapCard extends LitElement implements LovelaceCard {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean, reflect: true })
+  @property({ attribute: false }) public layout?: string;
-  public isPanel = false;
-
-  @property({ attribute: false })
-  public layout?: string;
 
   @state() private _stateHistory?: HistoryStates;
 
@@ -301,7 +297,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
   private _computePadding(): void {
     const root = this.shadowRoot!.getElementById("root");
 
-    const ignoreAspectRatio = this.isPanel || this.layout === "grid";
+    const ignoreAspectRatio = this.layout === "panel" || this.layout === "grid";
     if (!this._config || ignoreAspectRatio || !root) {
       return;
     }

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

@@ -29,8 +29,7 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
 
   @state() protected _config?: T;
 
-  @property({ type: Boolean, reflect: true })
+  @property({ attribute: false }) public layout?: string;
-  public isPanel = false;
 
   public getCardSize(): number | Promise<number> {
     return 1;
@@ -62,6 +61,10 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
         });
       }
     }
+
+    if (changedProperties.has("layout")) {
+      this.toggleAttribute("ispanel", this.layout === "panel");
+    }
   }
 
   private _createCardElement(cardConfig: LovelaceCardConfig) {

src/panels/lovelace/types.ts

@@ -51,7 +51,6 @@ export type LovelaceLayoutOptions = {
 
 export interface LovelaceCard extends HTMLElement {
   hass?: HomeAssistant;
-  isPanel?: boolean;
   preview?: boolean;
   layout?: string;
   getCardSize(): number | Promise<number>;

src/panels/lovelace/views/hui-panel-view.ts

@@ -105,7 +105,7 @@ export class PanelView extends LitElement implements LovelaceViewElement {
     }
 
     const card: HuiCard = this.cards[0];
-    card.isPanel = true;
+    card.layout = "panel";
 
     if (this.isStrategy || !this.lovelace?.editMode) {
       card.preview = false;