From 9f6afb162adfa83ec071b6f7ff59b942a8d71a0c Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 3 Jun 2024 16:05:41 +0200
Subject: [PATCH] Make lovelace optional in card and section (#20970)

---
 src/panels/lovelace/cards/hui-card.ts       | 8 ++++----
 src/panels/lovelace/sections/hui-section.ts | 9 ++++++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-card.ts b/src/panels/lovelace/cards/hui-card.ts
index 7cda1eeaca..19c6f08ee3 100644
--- a/src/panels/lovelace/cards/hui-card.ts
+++ b/src/panels/lovelace/cards/hui-card.ts
@@ -16,7 +16,7 @@ import type { Lovelace, LovelaceCard, LovelaceLayoutOptions } from "../types";
 export class HuiCard extends ReactiveElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public lovelace!: Lovelace;
+  @property({ attribute: false }) public lovelace?: Lovelace;
 
   @property({ attribute: false }) public isPanel = false;
 
@@ -65,7 +65,7 @@ export class HuiCard extends ReactiveElement {
   public createElement(config: LovelaceCardConfig) {
     const element = createCardElement(config) as LovelaceCard;
     element.hass = this.hass;
-    element.editMode = this.lovelace.editMode;
+    element.editMode = this.lovelace?.editMode;
     return element;
   }
 
@@ -90,7 +90,7 @@ export class HuiCard extends ReactiveElement {
         this._element.hass = this.hass;
       }
       if (changedProperties.has("lovelace")) {
-        this._element.editMode = this.lovelace.editMode;
+        this._element.editMode = this.lovelace?.editMode;
       }
       if (changedProperties.has("hass") || changedProperties.has("lovelace")) {
         this._updateElement();
@@ -131,7 +131,7 @@ export class HuiCard extends ReactiveElement {
     }
     const visible =
       forceVisible ||
-      this.lovelace.editMode ||
+      this.lovelace?.editMode ||
       !this._config?.visibility ||
       checkConditionsMet(this._config.visibility, this.hass);
 
diff --git a/src/panels/lovelace/sections/hui-section.ts b/src/panels/lovelace/sections/hui-section.ts
index bff0d3eb44..5a12701384 100644
--- a/src/panels/lovelace/sections/hui-section.ts
+++ b/src/panels/lovelace/sections/hui-section.ts
@@ -38,10 +38,10 @@ declare global {
 export class HuiSection extends ReactiveElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public lovelace!: Lovelace;
-
   @property({ attribute: false }) public config!: LovelaceSectionRawConfig;
 
+  @property({ attribute: false }) public lovelace?: Lovelace;
+
   @property({ type: Number }) public index!: number;
 
   @property({ type: Number }) public viewIndex!: number;
@@ -222,7 +222,7 @@ export class HuiSection extends ReactiveElement {
     }
     const visible =
       forceVisible ||
-      this.lovelace.editMode ||
+      this.lovelace?.editMode ||
       !this.config.visibility ||
       checkConditionsMet(this.config.visibility, this.hass);
 
@@ -246,6 +246,7 @@ export class HuiSection extends ReactiveElement {
     this._layoutElementType = config.type;
     this._layoutElement.addEventListener("ll-create-card", (ev) => {
       ev.stopPropagation();
+      if (!this.lovelace) return;
       showCreateCardDialog(this, {
         lovelaceConfig: this.lovelace.config,
         saveConfig: this.lovelace.saveConfig,
@@ -255,6 +256,7 @@ export class HuiSection extends ReactiveElement {
     });
     this._layoutElement.addEventListener("ll-edit-card", (ev) => {
       ev.stopPropagation();
+      if (!this.lovelace) return;
       const { cardIndex } = parseLovelaceCardPath(ev.detail.path);
       showEditCardDialog(this, {
         lovelaceConfig: this.lovelace.config,
@@ -265,6 +267,7 @@ export class HuiSection extends ReactiveElement {
     });
     this._layoutElement.addEventListener("ll-delete-card", (ev) => {
       ev.stopPropagation();
+      if (!this.lovelace) return;
       if (ev.detail.confirm) {
         confDeleteCard(this, this.hass!, this.lovelace!, ev.detail.path);
       } else {