Merge aa6d7093a2 into cff54b73a4

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

@@ -24,6 +24,8 @@ export class HuiCardFeatures extends LitElement {
 
   @property({ attribute: false }) public color?: string;
 
+  @property({ type: Boolean }) public editMode = false;
+
   private _featuresElements = new WeakMap<
     LovelaceCardFeatureConfig,
     LovelaceCardFeature | HuiErrorCard
@@ -49,6 +51,7 @@ export class HuiCardFeatures extends LitElement {
       element.hass = this.hass;
       (element as LovelaceCardFeature).stateObj = stateObj;
       (element as LovelaceCardFeature).color = this.color;
+      (element as LovelaceCardFeature).editMode = this.editMode;
     }
 
     return html`${element}`;

src/panels/lovelace/card-features/hui-conditional-card-feature.ts

@@ -0,0 +1,78 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { customElement, property } from "lit/decorators";
+import { PropertyValues } from "lit";
+import { HuiConditionalBase } from "../components/hui-conditional-base";
+import { createCardFeatureElement } from "../create-element/create-card-feature-element";
+import { LovelaceCardFeature } from "../types";
+import {
+  ConditionalCardFeatureConfig,
+  LovelaceCardFeatureConfig,
+} from "./types";
+
+@customElement("hui-conditional-card-feature")
+class HuiConditionalFeature
+  extends HuiConditionalBase
+  implements LovelaceCardFeature
+{
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  @property({ attribute: false }) public color?: string;
+
+  public static getStubConfig(): ConditionalCardFeatureConfig {
+    return {
+      type: "conditional",
+      conditions: [],
+      feature: {},
+    };
+  }
+
+  protected willUpdate(changedProp: PropertyValues): void {
+    super.willUpdate(changedProp);
+    if (changedProp.has("stateObj")) {
+      (this._element! as LovelaceCardFeature).stateObj = this.stateObj;
+    }
+  }
+
+  public setConfig(config: ConditionalCardFeatureConfig): void {
+    this.validateConfig(config);
+
+    if (!config.feature) {
+      throw new Error("No feature configured");
+    }
+
+    this._element = this._createFeatureElement(config.feature);
+  }
+
+  private _createFeatureElement(featureConfig: LovelaceCardFeatureConfig) {
+    const element = createCardFeatureElement(
+      featureConfig
+    ) as LovelaceCardFeature;
+    if (this.hass) {
+      element.hass = this.hass;
+      element.stateObj = this.stateObj;
+      element.color = this.color;
+    }
+    element.addEventListener(
+      "ll-rebuild",
+      (ev) => {
+        ev.stopPropagation();
+        this._rebuildFeature(featureConfig);
+      },
+      { once: true }
+    );
+    return element;
+  }
+
+  private _rebuildFeature(config: LovelaceCardFeatureConfig): void {
+    this._element = this._createFeatureElement(config);
+    if (this.lastChild) {
+      this.replaceChild(this._element, this.lastChild);
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-conditional-card-feature": HuiConditionalFeature;
+  }
+}

src/panels/lovelace/card-features/types.ts

@@ -1,6 +1,7 @@
 import { AlarmMode } from "../../../data/alarm_control_panel";
 import { HvacMode } from "../../../data/climate";
 import { OperationMode } from "../../../data/water_heater";
+import { Condition } from "../common/validate-condition";
 
 export interface CoverOpenCloseCardFeatureConfig {
   type: "cover-open-close";
@@ -18,6 +19,12 @@ export interface CoverTiltPositionCardFeatureConfig {
   type: "cover-tilt-position";
 }
 
+export interface ConditionalCardFeatureConfig {
+  type: "conditional";
+  feature: LovelaceCardFeatureConfig;
+  conditions: Condition[];
+}
+
 export interface LightBrightnessCardFeatureConfig {
   type: "light-brightness";
 }
@@ -144,6 +151,7 @@ export type LovelaceCardFeatureConfig =
   | CoverPositionCardFeatureConfig
   | CoverTiltPositionCardFeatureConfig
   | CoverTiltCardFeatureConfig
+  | ConditionalCardFeatureConfig
   | FanPresetModesCardFeatureConfig
   | FanSpeedCardFeatureConfig
   | HumidifierToggleCardFeatureConfig

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

@@ -51,6 +51,8 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public editMode = false;
+
   @state() private _config?: ThermostatCardConfig;
 
   public getCardSize(): number {
@@ -141,6 +143,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
           .hass=${this.hass}
           .stateObj=${stateObj}
           .features=${this._config.features}
+          .editMode=${this.editMode}
         ></hui-card-features>
       </ha-card>
     `;

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

@@ -102,6 +102,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public editMode = false;
+
   @state() private _config?: TileCardConfig;
 
   public setConfig(config: ThermostatCardConfig): void {
@@ -474,6 +476,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
                 .stateObj=${stateObj}
                 .color=${this._config.color}
                 .features=${this._config.features}
+                .editMode=${this.editMode}
               ></hui-card-features>
             `
           : nothing}

src/panels/lovelace/components/hui-conditional-base.ts

@@ -11,7 +11,8 @@ import {
   validateConditionalConfig,
 } from "../common/validate-condition";
 import { ConditionalRowConfig, LovelaceRow } from "../entity-rows/types";
-import { LovelaceCard } from "../types";
+import { LovelaceCard, LovelaceCardFeature } from "../types";
+import { ConditionalCardFeatureConfig } from "../card-features/types";
 
 function extractMediaQueries(
   conditions: (Condition | LegacyCondition)[]
@@ -33,9 +34,12 @@ export class HuiConditionalBase extends ReactiveElement {
 
   @property({ type: Boolean }) public editMode = false;
 
-  @state() protected _config?: ConditionalCardConfig | ConditionalRowConfig;
+  @state() protected _config?:
+    | ConditionalCardConfig
+    | ConditionalRowConfig
+    | ConditionalCardFeatureConfig;
 
-  protected _element?: LovelaceCard | LovelaceRow;
+  protected _element?: LovelaceCard | LovelaceRow | LovelaceCardFeature;
 
   private _mediaQueriesListeners: Array<() => void> = [];
 
@@ -46,7 +50,10 @@ export class HuiConditionalBase extends ReactiveElement {
   }
 
   protected validateConfig(
-    config: ConditionalCardConfig | ConditionalRowConfig
+    config:
+      | ConditionalCardConfig
+      | ConditionalRowConfig
+      | ConditionalCardFeatureConfig
   ): void {
     if (!config.conditions) {
       throw new Error("No conditions configured");

src/panels/lovelace/create-element/create-card-feature-element.ts

@@ -7,6 +7,7 @@ import "../card-features/hui-cover-open-close-card-feature";
 import "../card-features/hui-cover-position-card-feature";
 import "../card-features/hui-cover-tilt-card-feature";
 import "../card-features/hui-cover-tilt-position-card-feature";
+import "../card-features/hui-conditional-card-feature";
 import "../card-features/hui-fan-preset-modes-card-feature";
 import "../card-features/hui-fan-speed-card-feature";
 import "../card-features/hui-humidifier-modes-card-feature";
@@ -40,6 +41,7 @@ const TYPES: Set<LovelaceCardFeatureConfig["type"]> = new Set([
   "cover-position",
   "cover-tilt-position",
   "cover-tilt",
+  "conditional",
   "fan-preset-modes",
   "fan-speed",
   "humidifier-modes",

src/panels/lovelace/types.ts

@@ -121,6 +121,7 @@ export interface LovelaceGenericElementEditor<C = any> extends HTMLElement {
 export interface LovelaceCardFeature extends HTMLElement {
   hass?: HomeAssistant;
   stateObj?: HassEntity;
+  editMode?: boolean;
   setConfig(config: LovelaceCardFeatureConfig);
   color?: string;
 }