Add dropdown style to hvac_modes feature (#18963)

src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts

@@ -1,11 +1,15 @@
+import { mdiThermostat } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stateColorCss } from "../../../common/entity/state_color";
 import "../../../components/ha-control-select";
+import "../../../components/ha-control-select-menu";
 import type { ControlSelectOption } from "../../../components/ha-control-select";
+import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu";
 import {
   ClimateEntity,
   compareClimateHvacModes,
@@ -35,6 +39,9 @@ class HuiClimateHvacModesCardFeature
 
   @state() _currentHvacMode?: HvacMode;
 
+  @query("ha-control-select-menu", true)
+  private _haSelect?: HaControlSelectMenu;
+
   static getStubConfig(
     _,
     stateObj?: HassEntity
@@ -66,8 +73,23 @@ class HuiClimateHvacModesCardFeature
     }
   }
 
+  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 mode = (ev.detail as any).value as HvacMode;
+    const mode =
+      (ev.detail as any).value ?? ((ev.target as any).value as HvacMode);
 
     if (mode === this.stateObj!.state) return;
 
@@ -111,6 +133,37 @@ class HuiClimateHvacModesCardFeature
         path: computeHvacModeIcon(mode),
       }));
 
+    if (this._config.style === "dropdown") {
+      return html`
+        <div class="container">
+          <ha-control-select-menu
+            show-arrow
+            hide-label
+            .label=${this.hass.localize("ui.card.climate.mode")}
+            .value=${this._currentHvacMode}
+            .disabled=${this.stateObj.state === UNAVAILABLE}
+            fixedMenuPosition
+            naturalMenuWidth
+            @selected=${this._valueChanged}
+            @closed=${stopPropagation}
+          >
+            <ha-svg-icon slot="icon" .path=${mdiThermostat}></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>
+      `;
+    }
+
     return html`
       <div class="container">
         <ha-control-select
@@ -131,6 +184,14 @@ class HuiClimateHvacModesCardFeature
 
   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-padding: 0;
         --control-select-thickness: 40px;

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

@@ -37,6 +37,7 @@ export interface AlarmModesCardFeatureConfig {
 
 export interface ClimateHvacModesCardFeatureConfig {
   type: "climate-hvac-modes";
+  style?: "dropdown" | "icons";
   hvac_modes?: HvacMode[];
 }
 

src/panels/lovelace/editor/config-elements/hui-climate-hvac-modes-card-feature-editor.ts

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { FormatEntityStateFunc } from "../../../../common/translations/entity-state";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import { HVAC_MODES } from "../../../../data/climate";
@@ -30,8 +31,27 @@ export class HuiClimateHvacModesCardFeatureEditor
   }
 
   private _schema = memoizeOne(
-    (formatEntityState: FormatEntityStateFunc, stateObj?: HassEntity) =>
+    (
+      localize: LocalizeFunc,
+      formatEntityState: FormatEntityStateFunc,
+      stateObj?: HassEntity
+    ) =>
       [
+        {
+          name: "style",
+          selector: {
+            select: {
+              multiple: false,
+              mode: "list",
+              options: ["dropdown", "icons"].map((mode) => ({
+                value: mode,
+                label: localize(
+                  `ui.panel.lovelace.editor.features.types.climate-preset-modes.style_list.${mode}`
+                ),
+              })),
+            },
+          },
+        },
         {
           name: "hvac_modes",
           selector: {
@@ -59,12 +79,22 @@ export class HuiClimateHvacModesCardFeatureEditor
       ? this.hass.states[this.context?.entity_id]
       : undefined;
 
-    const schema = this._schema(this.hass.formatEntityState, stateObj);
+    const data: ClimateHvacModesCardFeatureConfig = {
+      style: "icons",
+      hvac_modes: [],
+      ...this._config,
+    };
+
+    const schema = this._schema(
+      this.hass.localize,
+      this.hass.formatEntityState,
+      stateObj
+    );
 
     return html`
       <ha-form
         .hass=${this.hass}
-        .data=${this._config}
+        .data=${data}
         .schema=${schema}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
@@ -81,13 +111,12 @@ export class HuiClimateHvacModesCardFeatureEditor
   ) => {
     switch (schema.name) {
       case "hvac_modes":
+      case "style":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.features.types.climate-hvac-modes.${schema.name}`
         );
       default:
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.generic.${schema.name}`
-        );
+        return "";
     }
   };
 }

src/translations/en.json

@@ -5280,7 +5280,12 @@
               },
               "climate-hvac-modes": {
                 "label": "Climate HVAC modes",
-                "hvac_modes": "HVAC modes"
+                "hvac_modes": "HVAC modes",
+                "style": "[%key:ui::panel::lovelace::editor::features::types::climate-preset-modes::style%]",
+                "style_list": {
+                  "dropdown": "[%key:ui::panel::lovelace::editor::features::types::climate-preset-modes::style_list::dropdown%]",
+                  "icons": "[%key:ui::panel::lovelace::editor::features::types::climate-preset-modes::style_list::icons%]"
+                }
               },
               "climate-preset-modes": {
                 "label": "Climate preset modes",