Fix layout-break card with HA 2024.6

src/layouts/base-column-layout.ts

@@ -4,6 +4,7 @@ import {
   CardConfigGroup,
   CardConfig,
   LovelaceCard,
+  HuiCard,
   ColumnViewConfig,
 } from "../types";
 import { ResizeObserver } from "resize-observer/lib/ResizeObserver";
@@ -142,7 +143,7 @@ export class BaseColumnLayout extends BaseLayout {
     }
   }
 
-  _shouldShow(card: LovelaceCard, config: CardConfig, index: number) {
+  _shouldShow(card: LovelaceCard | HuiCard, config: CardConfig, index: number) {
     if (!super._shouldShow(card, config, index)) return false;
 
     if (this._config.layout?.reflow) {
@@ -156,8 +157,8 @@ export class BaseColumnLayout extends BaseLayout {
     return false;
   }
 
-  isBreak(card: LovelaceCard) {
-    return card.localName === "layout-break";
+  isBreak(config: CardConfig) {
+    return config.type === "custom:layout-break";
   }
 
   async _makeLayout() {

src/layouts/base-layout.ts

@@ -1,14 +1,15 @@
 import { css, html, LitElement } from "lit";
 import { property } from "lit/decorators.js";
 import {
-  CardConfigGroup,
   CardConfig,
+  CardConfigGroup,
+  HuiCard,
   LovelaceCard,
   ViewConfig,
 } from "../types";
 
 export class BaseLayout extends LitElement {
-  @property() cards: Array<LovelaceCard> = [];
+  @property() cards: Array<LovelaceCard | HuiCard> = [];
   @property() index: number;
   @property() narrow: boolean;
   @property() hass;
@@ -45,7 +46,7 @@ export class BaseLayout extends LitElement {
     }
   }
 
-  _shouldShow(card: LovelaceCard, config: CardConfig, index: number) {
+  _shouldShow(card: LovelaceCard | HuiCard, config: CardConfig, index: number) {
     if (config.view_layout?.show === "always") return true;
     if (config.view_layout?.show === "never") return false;
     if (

src/layouts/grid.ts

@@ -2,8 +2,9 @@ import { css, html } from "lit";
 import {
   CardConfig,
   CardConfigGroup,
-  LovelaceCard,
   GridViewConfig,
+  HuiCard,
+  LovelaceCard,
 } from "../types";
 import { BaseLayout } from "./base-layout";
 
@@ -90,7 +91,7 @@ class GridLayout extends BaseLayout {
     }
   }
 
-  _shouldShow(card: LovelaceCard, config: CardConfig, index: number) {
+  _shouldShow(card: LovelaceCard | HuiCard, config: CardConfig, index: number) {
     if (!super._shouldShow(card, config, index)) return false;
 
     const mq = this._mediaQueries[index];

src/layouts/horizontal.ts

@@ -9,7 +9,7 @@ class HorizontalLayout extends BaseColumnLayout {
       if (c.config.view_layout?.column) i = c.config.view_layout.column;
       const col = cols[(i - 1) % cols.length];
       col.appendChild(this.getCardElement(c));
-      if (this.isBreak(c.card)) {
+      if (this.isBreak(c.config)) {
         i = 0;
         if (!this.lovelace?.editMode) {
           col.removeChild(c.card);

src/layouts/vertical.ts

@@ -8,7 +8,7 @@ class VerticalLayout extends BaseColumnLayout {
       if (c.config.view_layout?.column) i = c.config.view_layout.column;
       const col = cols[(i - 1) % cols.length];
       col.appendChild(this.getCardElement(c));
-      if (this.isBreak(c.card)) {
+      if (this.isBreak(c.config)) {
         i = i + 1;
       }
     }

src/types.ts

@@ -5,6 +5,12 @@ export interface LovelaceCard extends HTMLElement {
   getCardSize?(): Promise<number> | number;
 }
 
+export interface HuiCard extends HTMLElement {
+  hass: any;
+  editMode?: boolean;
+  getCardSize?(): Promise<number> | number;
+}
+
 export interface CardConfig {
   type: string;
   view_layout?: {
@@ -20,7 +26,7 @@ export interface CardConfig {
 }
 
 export interface CardConfigGroup {
-  card: LovelaceCard;
+  card: LovelaceCard | HuiCard;
   config: CardConfig;
   index: number;
   show?: boolean;