Add style and preset modes options to climate preset tile feature (#17977)

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

@@ -1,6 +1,6 @@
 import "../tile-features/hui-alarm-modes-tile-feature";
 import "../tile-features/hui-climate-hvac-modes-tile-feature";
-import "../tile-features/hui-climate-presets-tile-feature";
+import "../tile-features/hui-climate-preset-modes-tile-feature";
 import "../tile-features/hui-cover-open-close-tile-feature";
 import "../tile-features/hui-cover-position-tile-feature";
 import "../tile-features/hui-cover-tilt-position-tile-feature";
@@ -22,7 +22,7 @@ import {
 const TYPES: Set<LovelaceTileFeatureConfig["type"]> = new Set([
   "alarm-modes",
   "climate-hvac-modes",
-  "climate-presets",
+  "climate-preset-modes",
   "cover-open-close",
   "cover-position",
   "cover-tilt-position",

src/panels/lovelace/editor/config-elements/hui-climate-preset-modes-tile-feature-editor.ts

@@ -0,0 +1,133 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { FormatEntityAttributeValueFunc } from "../../../../common/translations/entity-state";
+import { LocalizeFunc } from "../../../../common/translations/localize";
+import "../../../../components/ha-form/ha-form";
+import type {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
+import type { HomeAssistant } from "../../../../types";
+import {
+  ClimatePresetModesTileFeatureConfig,
+  LovelaceTileFeatureContext,
+} from "../../tile-features/types";
+import type { LovelaceTileFeatureEditor } from "../../types";
+
+@customElement("hui-climate-preset-modes-tile-feature-editor")
+export class HuiClimatePresetModesTileFeatureEditor
+  extends LitElement
+  implements LovelaceTileFeatureEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public context?: LovelaceTileFeatureContext;
+
+  @state() private _config?: ClimatePresetModesTileFeatureConfig;
+
+  public setConfig(config: ClimatePresetModesTileFeatureConfig): void {
+    this._config = config;
+  }
+
+  private _schema = memoizeOne(
+    (
+      localize: LocalizeFunc,
+      formatEntityAttributeValue: FormatEntityAttributeValueFunc,
+      stateObj?: HassEntity
+    ) =>
+      [
+        {
+          name: "style",
+          selector: {
+            select: {
+              multiple: false,
+              mode: "list",
+              options: ["dropdown", "icons"].map((mode) => ({
+                value: mode,
+                label: localize(
+                  `ui.panel.lovelace.editor.card.tile.features.types.climate-preset-modes.style_list.${mode}`
+                ),
+              })),
+            },
+          },
+        },
+        {
+          name: "preset_modes",
+          selector: {
+            select: {
+              multiple: true,
+              mode: "list",
+              options:
+                stateObj?.attributes.preset_modes?.map((mode) => ({
+                  value: mode,
+                  label: formatEntityAttributeValue(
+                    stateObj,
+                    "preset_mode",
+                    mode
+                  ),
+                })) || [],
+            },
+          },
+        },
+      ] as const satisfies readonly HaFormSchema[]
+  );
+
+  protected render() {
+    if (!this.hass || !this._config) {
+      return nothing;
+    }
+
+    const stateObj = this.context?.entity_id
+      ? this.hass.states[this.context?.entity_id]
+      : undefined;
+
+    const data: ClimatePresetModesTileFeatureConfig = {
+      style: "dropdown",
+      preset_modes: [],
+      ...this._config,
+    };
+
+    const schema = this._schema(
+      this.hass.localize,
+      this.hass.formatEntityAttributeValue,
+      stateObj
+    );
+
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${data}
+        .schema=${schema}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
+  }
+
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
+    switch (schema.name) {
+      case "style":
+      case "preset_modes":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.tile.features.types.climate-preset-modes.${schema.name}`
+        );
+      default:
+        return "";
+    }
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-climate-preset-modes-tile-feature-editor": HuiClimatePresetModesTileFeatureEditor;
+  }
+}

src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts

@@ -27,7 +27,6 @@ import { HomeAssistant } from "../../../../types";
 import { getTileFeatureElementClass } from "../../create-element/create-tile-feature-element";
 import { supportsAlarmModesTileFeature } from "../../tile-features/hui-alarm-modes-tile-feature";
 import { supportsClimateHvacModesTileFeature } from "../../tile-features/hui-climate-hvac-modes-tile-feature";
-import { supportsClimatePresetsTileFeature } from "../../tile-features/hui-climate-presets-tile-feature";
 import { supportsCoverOpenCloseTileFeature } from "../../tile-features/hui-cover-open-close-tile-feature";
 import { supportsCoverPositionTileFeature } from "../../tile-features/hui-cover-position-tile-feature";
 import { supportsCoverTiltPositionTileFeature } from "../../tile-features/hui-cover-tilt-position-tile-feature";
@@ -41,14 +40,15 @@ import { supportsTargetTemperatureTileFeature } from "../../tile-features/hui-ta
 import { supportsVacuumCommandTileFeature } from "../../tile-features/hui-vacuum-commands-tile-feature";
 import { supportsWaterHeaterOperationModesTileFeature } from "../../tile-features/hui-water-heater-operation-modes-tile-feature";
 import { LovelaceTileFeatureConfig } from "../../tile-features/types";
+import { supportsClimatePresetModesTileFeature } from "../../tile-features/hui-climate-preset-modes-tile-feature";
 
 type FeatureType = LovelaceTileFeatureConfig["type"];
 type SupportsFeature = (stateObj: HassEntity) => boolean;
 
-const FEATURE_TYPES: FeatureType[] = [
+const UI_FEATURE_TYPES = [
   "alarm-modes",
   "climate-hvac-modes",
-  "climate-presets",
+  "climate-preset-modes",
   "cover-open-close",
   "cover-position",
   "cover-tilt-position",
@@ -61,35 +61,39 @@ const FEATURE_TYPES: FeatureType[] = [
   "target-temperature",
   "vacuum-commands",
   "water-heater-operation-modes",
-];
+] as const satisfies readonly FeatureType[];
 
-const EDITABLES_FEATURE_TYPES = new Set<FeatureType>([
+type UiFeatureTypes = (typeof UI_FEATURE_TYPES)[number];
+
+const EDITABLES_FEATURE_TYPES = new Set<UiFeatureTypes>([
   "vacuum-commands",
   "alarm-modes",
   "climate-hvac-modes",
   "water-heater-operation-modes",
   "lawn-mower-commands",
+  "climate-preset-modes",
 ]);
 
-const SUPPORTS_FEATURE_TYPES: Record<FeatureType, SupportsFeature | undefined> =
+const SUPPORTS_FEATURE_TYPES: Record<
-  {
+  UiFeatureTypes,
-    "alarm-modes": supportsAlarmModesTileFeature,
+  SupportsFeature | undefined
-    "climate-hvac-modes": supportsClimateHvacModesTileFeature,
+> = {
-    "climate-presets": supportsClimatePresetsTileFeature,
+  "alarm-modes": supportsAlarmModesTileFeature,
-    "cover-open-close": supportsCoverOpenCloseTileFeature,
+  "climate-hvac-modes": supportsClimateHvacModesTileFeature,
-    "cover-position": supportsCoverPositionTileFeature,
+  "climate-preset-modes": supportsClimatePresetModesTileFeature,
-    "cover-tilt-position": supportsCoverTiltPositionTileFeature,
+  "cover-open-close": supportsCoverOpenCloseTileFeature,
-    "cover-tilt": supportsCoverTiltTileFeature,
+  "cover-position": supportsCoverPositionTileFeature,
-    "fan-speed": supportsFanSpeedTileFeature,
+  "cover-tilt-position": supportsCoverTiltPositionTileFeature,
-    "lawn-mower-commands": supportsLawnMowerCommandTileFeature,
+  "cover-tilt": supportsCoverTiltTileFeature,
-    "light-brightness": supportsLightBrightnessTileFeature,
+  "fan-speed": supportsFanSpeedTileFeature,
-    "light-color-temp": supportsLightColorTempTileFeature,
+  "lawn-mower-commands": supportsLawnMowerCommandTileFeature,
-    "target-temperature": supportsTargetTemperatureTileFeature,
+  "light-brightness": supportsLightBrightnessTileFeature,
-    "vacuum-commands": supportsVacuumCommandTileFeature,
+  "light-color-temp": supportsLightColorTempTileFeature,
-    "water-heater-operation-modes":
+  "target-temperature": supportsTargetTemperatureTileFeature,
-      supportsWaterHeaterOperationModesTileFeature,
+  "vacuum-commands": supportsVacuumCommandTileFeature,
-    "select-options": supportsSelectOptionTileFeature,
+  "water-heater-operation-modes": supportsWaterHeaterOperationModesTileFeature,
-  };
+  "select-options": supportsSelectOptionTileFeature,
+};
 
 const CUSTOM_FEATURE_ENTRIES: Record<
   string,
@@ -181,7 +185,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
   }
 
   private _getSupportedFeaturesType() {
-    const featuresTypes = FEATURE_TYPES as string[];
+    const featuresTypes = UI_FEATURE_TYPES as readonly string[];
     const customFeaturesTypes = customTileFeatures.map(
       (feature) => `${CUSTOM_TYPE_PREFIX}${feature.type}`
     );

src/panels/lovelace/tile-features/hui-climate-preset-modes-tile-feature.ts

@@ -0,0 +1,222 @@
+import { mdiTuneVariant } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { supportsFeature } from "../../../common/entity/supports-feature";
+import "../../../components/ha-control-select";
+import type { ControlSelectOption } from "../../../components/ha-control-select";
+import "../../../components/ha-control-select-menu";
+import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu";
+import {
+  ClimateEntity,
+  ClimateEntityFeature,
+  computePresetModeIcon,
+} from "../../../data/climate";
+import { UNAVAILABLE } from "../../../data/entity";
+import { HomeAssistant } from "../../../types";
+import { LovelaceTileFeature, LovelaceTileFeatureEditor } from "../types";
+import { ClimatePresetModesTileFeatureConfig } from "./types";
+
+export const supportsClimatePresetModesTileFeature = (stateObj: HassEntity) => {
+  const domain = computeDomain(stateObj.entity_id);
+  return (
+    domain === "climate" &&
+    supportsFeature(stateObj, ClimateEntityFeature.PRESET_MODE)
+  );
+};
+
+@customElement("hui-climate-preset-modes-tile-feature")
+class HuiClimatePresetModeTileFeature
+  extends LitElement
+  implements LovelaceTileFeature
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: ClimateEntity;
+
+  @state() private _config?: ClimatePresetModesTileFeatureConfig;
+
+  @state() _currentPresetMode?: string;
+
+  @query("ha-control-select-menu", true)
+  private _haSelect?: HaControlSelectMenu;
+
+  static getStubConfig(
+    _,
+    stateObj?: HassEntity
+  ): ClimatePresetModesTileFeatureConfig {
+    return {
+      type: "climate-preset-modes",
+      style: "dropdown",
+      preset_modes: stateObj?.attributes.preset_modes || [],
+    };
+  }
+
+  public static async getConfigElement(): Promise<LovelaceTileFeatureEditor> {
+    await import(
+      "../editor/config-elements/hui-climate-preset-modes-tile-feature-editor"
+    );
+    return document.createElement(
+      "hui-climate-preset-modes-tile-feature-editor"
+    );
+  }
+
+  public setConfig(config: ClimatePresetModesTileFeatureConfig): void {
+    if (!config) {
+      throw new Error("Invalid configuration");
+    }
+    this._config = config;
+  }
+
+  protected willUpdate(changedProp: PropertyValues): void {
+    super.willUpdate(changedProp);
+    if (changedProp.has("stateObj") && this.stateObj) {
+      this._currentPresetMode = this.stateObj.attributes.preset_mode;
+    }
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (this._haSelect && changedProps.has("hass")) {
+      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+      if (
+        this.hass &&
+        this.hass.formatEntityAttributeValue !==
+          oldHass?.formatEntityAttributeValue
+      ) {
+        this._haSelect.layoutOptions();
+      }
+    }
+  }
+
+  private async _valueChanged(ev: CustomEvent) {
+    const presetMode =
+      (ev.detail as any).value ?? ((ev.target as any).value as string);
+
+    const oldPresetMode = this.stateObj!.attributes.preset_mode;
+
+    if (presetMode === oldPresetMode) return;
+
+    this._currentPresetMode = presetMode;
+
+    try {
+      await this._setMode(presetMode);
+    } catch (err) {
+      this._currentPresetMode = oldPresetMode;
+    }
+  }
+
+  private async _setMode(mode: string) {
+    await this.hass!.callService("climate", "set_preset_mode", {
+      entity_id: this.stateObj!.entity_id,
+      preset_mode: mode,
+    });
+  }
+
+  protected render(): TemplateResult | null {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.stateObj ||
+      !supportsClimatePresetModesTileFeature(this.stateObj)
+    ) {
+      return null;
+    }
+
+    const stateObj = this.stateObj;
+
+    const modes = stateObj.attributes.preset_modes || [];
+
+    const options = modes
+      .filter((mode) => (this._config!.preset_modes || []).includes(mode))
+      .map<ControlSelectOption>((mode) => ({
+        value: mode,
+        label: this.hass!.formatEntityAttributeValue(
+          this.stateObj!,
+          "preset_mode",
+          mode
+        ),
+        path: computePresetModeIcon(mode),
+      }));
+
+    if (this._config.style === "icons") {
+      return html`
+        <div class="container">
+          <ha-control-select
+            .options=${options}
+            .value=${this._currentPresetMode}
+            @value-changed=${this._valueChanged}
+            hide-label
+            .ariaLabel=${this.hass!.formatEntityAttributeName(
+              stateObj,
+              "preset_mode"
+            )}
+            .disabled=${this.stateObj!.state === UNAVAILABLE}
+          >
+          </ha-control-select>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="container">
+        <ha-control-select-menu
+          show-arrow
+          hide-label
+          .label=${this.hass!.formatEntityAttributeName(
+            stateObj,
+            "preset_mode"
+          )}
+          .value=${this._currentPresetMode}
+          .disabled=${this.stateObj.state === UNAVAILABLE}
+          fixedMenuPosition
+          naturalMenuWidth
+          @selected=${this._valueChanged}
+          @closed=${stopPropagation}
+        >
+          <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
+          ${options.map(
+            (option) => html`
+              <ha-list-item .value=${option.value} graphic="icon">
+                <ha-svg-icon slot="graphic" .path=${option.path}></ha-svg-icon>
+                ${option.label}
+              </ha-list-item>
+            `
+          )}
+        </ha-control-select-menu>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-control-select-menu {
+        box-sizing: border-box;
+        --control-select-menu-height: 40px;
+        --control-select-menu-border-radius: 10px;
+        line-height: 1.2;
+        display: block;
+        width: 100%;
+      }
+      ha-control-select {
+        --control-select-color: var(--tile-color);
+        --control-select-padding: 0;
+        --control-select-thickness: 40px;
+        --control-select-border-radius: 10px;
+        --control-select-button-border-radius: 10px;
+      }
+      .container {
+        padding: 0 12px 12px 12px;
+        width: auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-climate-modes-preset-modes-feature": HuiClimatePresetModeTileFeature;
+  }
+}

src/panels/lovelace/tile-features/hui-climate-presets-tile-feature.ts

@@ -1,140 +0,0 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
-import { stateColorCss } from "../../../common/entity/state_color";
-import { ClimateEntity, computePresetModeIcon } from "../../../data/climate";
-import { UNAVAILABLE } from "../../../data/entity";
-import { HomeAssistant } from "../../../types";
-import { LovelaceTileFeature } from "../types";
-import { ClimatePresetsTileFeatureConfig } from "./types";
-import type { ControlSelectOption } from "../../../components/ha-control-select";
-import { computeDomain } from "../../../common/entity/compute_domain";
-import "../../../components/ha-control-button";
-import "../../../components/ha-control-button-group";
-import "../../../components/ha-control-select";
-import "../../../components/ha-control-slider";
-
-export const supportsClimatePresetsTileFeature = (stateObj: HassEntity) => {
-  const domain = computeDomain(stateObj.entity_id);
-  return domain === "climate";
-};
-
-@customElement("hui-climate-presets-tile-feature")
-class HuiClimatePresetsTileFeature
-  extends LitElement
-  implements LovelaceTileFeature
-{
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @property({ attribute: false }) public stateObj?: ClimateEntity;
-
-  @state() private _config?: ClimatePresetsTileFeatureConfig;
-
-  @state() _currentPreset?: string;
-
-  static getStubConfig(): ClimatePresetsTileFeatureConfig {
-    return {
-      type: "climate-presets",
-    };
-  }
-
-  public setConfig(config: ClimatePresetsTileFeatureConfig): void {
-    if (!config) {
-      throw new Error("Invalid configuration");
-    }
-    this._config = config;
-  }
-
-  protected willUpdate(changedProp: PropertyValues): void {
-    super.willUpdate(changedProp);
-    if (changedProp.has("stateObj") && this.stateObj) {
-      this._currentPreset = this.stateObj.attributes.preset_mode as string;
-    }
-  }
-
-  private async _valueChanged(ev: CustomEvent) {
-    const preset = (ev.detail as any).value as string;
-    const oldPreset = this.stateObj!.attributes.preset_mode;
-
-    if (preset === oldPreset) return;
-    this._currentPreset = preset;
-
-    try {
-      await this._setPreset(preset);
-    } catch (err) {
-      this._currentPreset = oldPreset;
-    }
-  }
-
-  private async _setPreset(preset: string) {
-    await this.hass!.callService("climate", "set_preset_mode", {
-      entity_id: this.stateObj!.entity_id,
-      preset_mode: preset,
-    });
-  }
-
-  protected render(): TemplateResult | null {
-    if (
-      !this._config ||
-      !this.hass ||
-      !this.stateObj ||
-      !supportsClimatePresetsTileFeature(this.stateObj)
-    ) {
-      return null;
-    }
-
-    const color = stateColorCss(this.stateObj);
-
-    const presets = (this.stateObj.attributes.preset_modes as string[]) || [];
-
-    const options = presets.map<ControlSelectOption>((preset) => ({
-      value: preset,
-      label: this.hass!.formatEntityAttributeName(this.stateObj!, preset),
-      path: computePresetModeIcon(preset),
-    }));
-
-    return html`
-      <div class="container">
-        <ha-control-select
-          .options=${options}
-          .value=${this._currentPreset}
-          @value-changed=${this._valueChanged}
-          hide-label
-          .ariaLabel=${this.hass.localize("ui.card.climate.preset")}
-          style=${styleMap({
-            "--control-select-color": color,
-          })}
-          .disabled=${this.stateObj!.state === UNAVAILABLE}
-        >
-        </ha-control-select>
-      </div>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-control-select {
-        --control-select-color: var(--tile-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-climate-preset-tile-feature": HuiClimatePresetsTileFeature;
-  }
-}

src/panels/lovelace/tile-features/hui-select-options-tile-feature.ts

@@ -72,9 +72,10 @@ class HuiSelectOptionsTileFeature
   private async _valueChanged(ev: CustomEvent) {
     const option = (ev.target as any).value as string;
 
-    if (option === this.stateObj!.state) return;
-
     const oldOption = this.stateObj!.state;
+
+    if (option === oldOption) return;
+
     this._currentOption = option;
 
     try {

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

@@ -40,8 +40,10 @@ export interface ClimateHvacModesTileFeatureConfig {
   hvac_modes?: HvacMode[];
 }
 
-export interface ClimatePresetsTileFeatureConfig {
+export interface ClimatePresetModesTileFeatureConfig {
-  type: "climate-presets";
+  type: "climate-preset-modes";
+  style?: "dropdown" | "icons";
+  preset_modes?: string[];
 }
 
 export interface SelectOptionsTileFeatureConfig {
@@ -84,7 +86,7 @@ export interface LawnMowerCommandsTileFeatureConfig {
 export type LovelaceTileFeatureConfig =
   | AlarmModesTileFeatureConfig
   | ClimateHvacModesTileFeatureConfig
-  | ClimatePresetsTileFeatureConfig
+  | ClimatePresetModesTileFeatureConfig
   | CoverOpenCloseTileFeatureConfig
   | CoverPositionTileFeatureConfig
   | CoverTiltPositionTileFeatureConfig

src/translations/en.json

@@ -5038,8 +5038,14 @@
                     "label": "Climate HVAC modes",
                     "hvac_modes": "HVAC modes"
                   },
-                  "climate-presets": {
+                  "climate-preset-modes": {
-                    "label": "Climate Presets"
+                    "label": "Climate preset modes",
+                    "style": "Style",
+                    "style_list": {
+                      "dropdown": "Dropdown",
+                      "icons": "Icons"
+                    },
+                    "preset_modes": "Preset modes"
                   },
                   "target-temperature": {
                     "label": "Target temperature"
@@ -5142,7 +5148,8 @@
             "types": {
               "header": "Header editor",
               "footer": "Footer editor",
-              "row": "Entity row editor"
+              "row": "Entity row editor",
+              "tile-feature": "Tile feature editor"
             }
           }
         },