More card size tweaking (#6073)

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

@@ -77,7 +77,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
 
   public async getCardSize(): Promise<number> {
     if (!this._config || !this.hass) {
-      return 3;
+      return 5;
     }
 
     const stateObj = this.hass.states[this._config.entity];

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

@@ -79,7 +79,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
   @internalProperty() private _shouldRenderRipple = false;
 
   public getCardSize(): number {
-    return 2;
+    return (
+      (this._config?.show_icon ? 3 : 0) + (this._config?.show_name ? 1 : 0)
+    );
   }
 
   public setConfig(config: ButtonCardConfig): void {

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

@@ -34,8 +34,8 @@ class HuiConditionalCard extends HuiConditionalBase implements LovelaceCard {
     this._element = this._createCardElement(config.card);
   }
 
-  public async getCardSize(): Promise<number> {
+  public getCardSize(): Promise<number> | number {
-    return await computeCardSize(this._element as LovelaceCard);
+    return computeCardSize(this._element as LovelaceCard);
   }
 
   private _createCardElement(cardConfig: LovelaceCardConfig) {

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

@@ -19,13 +19,13 @@ import "../components/hui-entities-toggle";
 import { createHeaderFooterElement } from "../create-element/create-header-footer-element";
 import { createRowElement } from "../create-element/create-row-element";
 import { LovelaceRow } from "../entity-rows/types";
-import { LovelaceHeaderFooterConfig } from "../header-footer/types";
 import {
   LovelaceCard,
   LovelaceCardEditor,
   LovelaceHeaderFooter,
 } from "../types";
 import { EntitiesCardConfig, EntitiesCardEntityConfig } from "./types";
+import { computeCardSize } from "../common/compute-card-size";
 
 @customElement("hui-entities-card")
 class HuiEntitiesCard extends LitElement implements LovelaceCard {
@@ -61,6 +61,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
 
   private _showHeaderToggle?: boolean;
 
+  private _headerElement?: LovelaceHeaderFooter;
+
+  private _footerElement?: LovelaceHeaderFooter;
+
   set hass(hass: HomeAssistant) {
     this._hass = hass;
     this.shadowRoot!.querySelectorAll("#states > div > *").forEach(
@@ -68,11 +72,12 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
         (element as LovelaceRow).hass = hass;
       }
     );
-    this.shadowRoot!.querySelectorAll(".header-footer > *").forEach(
+    if (this._headerElement) {
-      (element: unknown) => {
+      this._headerElement.hass = hass;
-        (element as LovelaceHeaderFooter).hass = hass;
+    }
-      }
+    if (this._footerElement) {
-    );
+      this._footerElement.hass = hass;
+    }
     const entitiesToggle = this.shadowRoot!.querySelector(
       "hui-entities-toggle"
     );
@@ -81,15 +86,24 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     }
   }
 
-  public getCardSize(): number {
+  public async getCardSize(): Promise<number> {
     if (!this._config) {
       return 0;
     }
     // +1 for the header
-    return (
+    let size =
       (this._config.title || this._showHeaderToggle ? 1 : 0) +
-      this._config.entities.length
+      (this._config.entities.length || 1);
-    );
+    if (this._headerElement) {
+      const headerSize = computeCardSize(this._headerElement);
+      size += headerSize instanceof Promise ? await headerSize : headerSize;
+    }
+    if (this._footerElement) {
+      const footerSize = computeCardSize(this._footerElement);
+      size += footerSize instanceof Promise ? await footerSize : footerSize;
+    }
+
+    return size;
   }
 
   public setConfig(config: EntitiesCardConfig): void {
@@ -113,6 +127,24 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     } else {
       this._showHeaderToggle = config.show_header_toggle;
     }
+
+    if (this._config.header) {
+      this._headerElement = createHeaderFooterElement(this._config.header);
+      if (this._hass) {
+        this._headerElement.hass = this._hass;
+      }
+    } else {
+      this._headerElement = undefined;
+    }
+
+    if (this._config.footer) {
+      this._footerElement = createHeaderFooterElement(this._config.footer);
+      if (this._hass) {
+        this._footerElement.hass = this._hass;
+      }
+    } else {
+      this._footerElement = undefined;
+    }
   }
 
   protected updated(changedProps: PropertyValues): void {
@@ -142,8 +174,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
 
     return html`
       <ha-card>
-        ${this._config.header
+        ${this._headerElement
-          ? this.renderHeaderFooter(this._config.header, "header")
+          ? html`<div class="header-footer header">
+              ${this._headerElement}
+            </div>`
           : ""}
         ${!this._config.title && !this._showHeaderToggle && !this._config.icon
           ? ""
@@ -178,8 +212,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
           )}
         </div>
 
-        ${this._config.footer
+        ${this._footerElement
-          ? this.renderHeaderFooter(this._config.footer, "footer")
+          ? html`<div class="header-footer footer">
+              ${this._footerElement}
+            </div>`
           : ""}
       </ha-card>
     `;
@@ -248,17 +284,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private renderHeaderFooter(
-    conf: LovelaceHeaderFooterConfig,
-    className: string
-  ): TemplateResult {
-    const element = createHeaderFooterElement(conf);
-    if (this._hass) {
-      element.hass = this._hass;
-    }
-    return html` <div class=${"header-footer " + className}>${element}</div> `;
-  }
-
   private renderEntity(entityConf: EntitiesCardEntityConfig): TemplateResult {
     const element = createRowElement(
       this._config!.state_color

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

@@ -29,6 +29,7 @@ import {
 } from "../types";
 import { HuiErrorCard } from "./hui-error-card";
 import { EntityCardConfig } from "./types";
+import { computeCardSize } from "../common/compute-card-size";
 
 @customElement("hui-entity-card")
 export class HuiEntityCard extends LitElement implements LovelaceCard {
@@ -79,8 +80,13 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
     }
   }
 
-  public getCardSize(): number {
+  public async getCardSize(): Promise<number> {
-    return 1 + (this._config?.footer ? 1 : 0);
+    let size = 2;
+    if (this._footerElement) {
+      const footerSize = computeCardSize(this._footerElement);
+      size += footerSize instanceof Promise ? await footerSize : footerSize;
+    }
+    return size;
   }
 
   protected render(): TemplateResult {

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

@@ -57,8 +57,9 @@ class EntityFilterCard extends UpdatingElement implements LovelaceCard {
 
     if (this.lastChild) {
       this.removeChild(this.lastChild);
-      this._element = undefined;
     }
+
+    this._element = this._createCardElement(this._baseCardConfig);
   }
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
@@ -81,7 +82,12 @@ class EntityFilterCard extends UpdatingElement implements LovelaceCard {
 
   protected update(changedProps: PropertyValues) {
     super.update(changedProps);
-    if (!this.hass || !this._config || !this._configEntities) {
+    if (
+      !this.hass ||
+      !this._config ||
+      !this._configEntities ||
+      !this._element
+    ) {
       return;
     }
 
@@ -114,8 +120,8 @@ class EntityFilterCard extends UpdatingElement implements LovelaceCard {
       return;
     }
 
-    if (!this._element) {
+    if (!this.lastChild) {
-      this._element = this._createCardElement({
+      this._element.setConfig({
         ...this._baseCardConfig!,
         entities: entitiesList,
       });

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

@@ -68,7 +68,10 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
   public getCardSize(): number {
     return (
       (this._config!.title ? 1 : 0) +
-      Math.ceil(this._configEntities!.length / 5)
+      Math.max(
+        Math.ceil(this._configEntities!.length / (this._config!.columns || 5)),
+        1
+      )
     );
   }
 

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

@@ -237,7 +237,9 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   protected firstUpdated(changedProps: PropertyValues): void {
     super.firstUpdated(changedProps);
-    this.loadMap();
+    if (this.isConnected) {
+      this.loadMap();
+    }
     const root = this.shadowRoot!.getElementById("root");
 
     if (!this._config || this.isPanel || !root) {

src/panels/lovelace/common/compute-card-size.ts

@@ -1,7 +1,7 @@
-import { LovelaceCard } from "../types";
+import { LovelaceCard, LovelaceHeaderFooter } from "../types";
 
 export const computeCardSize = (
-  card: LovelaceCard
+  card: LovelaceCard | LovelaceHeaderFooter
 ): number | Promise<number> => {
   if (typeof card.getCardSize === "function") {
     return card.getCardSize();

src/panels/lovelace/header-footer/hui-buttons-header-footer.ts

@@ -23,6 +23,10 @@ export class HuiButtonsHeaderFooter extends LitElement
 
   private _configEntities?: EntityConfig[];
 
+  public getCardSize(): number {
+    return 1;
+  }
+
   public setConfig(config: ButtonsHeaderFooterConfig): void {
     this._configEntities = processConfigEntities(config.entities);
     this.requestUpdate();

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -40,6 +40,10 @@ export class HuiGraphHeaderFooter extends LitElement
 
   private _fetching = false;
 
+  public getCardSize(): number {
+    return 2;
+  }
+
   public setConfig(config: GraphHeaderFooterConfig): void {
     if (!config?.entity || config.entity.split(".")[0] !== "sensor") {
       throw new Error(

src/panels/lovelace/header-footer/hui-picture-header-footer.ts

@@ -35,6 +35,10 @@ export class HuiPictureHeaderFooter extends LitElement
 
   @property() protected _config?: PictureHeaderFooterConfig;
 
+  public getCardSize(): number {
+    return 3;
+  }
+
   public setConfig(config: PictureHeaderFooterConfig): void {
     if (!config || !config.image) {
       throw new Error("Invalid Configuration: 'image' required");

src/panels/lovelace/types.ts

@@ -49,6 +49,7 @@ export interface LovelaceCardConstructor extends Constructor<LovelaceCard> {
 
 export interface LovelaceHeaderFooter extends HTMLElement {
   hass?: HomeAssistant;
+  getCardSize(): number | Promise<number>;
   setConfig(config: LovelaceHeaderFooterConfig): void;
 }