Add disabled option for cards and sections (#27026)

* Add hidden config option for cards and sections

* Rename to disabled

src/data/lovelace/config/card.ts

@@ -14,4 +14,5 @@ export interface LovelaceCardConfig {
   type: string;
   [key: string]: any;
   visibility?: Condition[];
+  disabled?: boolean;
 }

src/data/lovelace/config/section.ts

@@ -4,6 +4,7 @@ import type { LovelaceStrategyConfig } from "./strategy";
 
 export interface LovelaceBaseSectionConfig {
   visibility?: Condition[];
+  disabled?: boolean;
   column_span?: number;
   row_span?: number;
   /**

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

@@ -275,7 +275,7 @@ export class HuiCard extends ReactiveElement {
     );
   }
 
-  private _updateVisibility(forceVisible?: boolean) {
+  private _updateVisibility(ignoreConditions?: boolean) {
     if (!this._element || !this.hass) {
       return;
     }
@@ -285,9 +285,18 @@ export class HuiCard extends ReactiveElement {
       return;
     }
 
+    if (this.preview) {
+      this._setElementVisibility(true);
+      return;
+    }
+
+    if (this.config?.disabled) {
+      this._setElementVisibility(false);
+      return;
+    }
+
     const visible =
-      forceVisible ||
-      this.preview ||
+      ignoreConditions ||
       !this.config?.visibility ||
       checkConditionsMet(this.config.visibility, this.hass);
     this._setElementVisibility(visible);

src/panels/lovelace/sections/hui-section.ts

@@ -222,16 +222,32 @@ export class HuiSection extends ReactiveElement {
     }
   }
 
-  private _updateElement(forceVisible?: boolean) {
+  private _updateElement(ignoreConditions?: boolean) {
     if (!this._layoutElement) {
       return;
     }
+
+    if (this.preview) {
+      this._setElementVisibility(true);
+      return;
+    }
+
+    if (this.config.disabled) {
+      this._setElementVisibility(false);
+      return;
+    }
+
     const visible =
-      forceVisible ||
-      this.preview ||
+      ignoreConditions ||
       !this.config.visibility ||
       checkConditionsMet(this.config.visibility, this.hass);
 
+    this._setElementVisibility(visible);
+  }
+
+  private _setElementVisibility(visible: boolean) {
+    if (!this._layoutElement) return;
+
     if (this.hidden !== !visible) {
       this.style.setProperty("display", visible ? "" : "none");
       this.toggleAttribute("hidden", !visible);