Implement more attribute icons (home-assistant#19469)

Author: bramkragten

lint-staged.config.js

@@ -2,7 +2,7 @@ export default {
   "*.?(c|m){js,ts}": [
     "eslint --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --fix",
     "prettier --cache --write",
-    "lit-analyzer",
+    "lit-analyzer --quiet",
   ],
   "*.{json,css,md,markdown,html,y?aml}": "prettier --cache --write",
   "translations/*/*.json": (files) =>

src/common/entity/attribute_icon_path.ts

@@ -1,11 +1,13 @@
 /** Return an icon representing a attribute. */
+import { mdiCircleMedium, mdiCreation } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   computeFanModeIcon,
   computeHvacModeIcon,
   computePresetModeIcon,
   computeSwingModeIcon,
 } from "../../data/climate";
+import { computeHumidiferModeIcon } from "../../data/humidifier";
 import { computeDomain } from "./compute_domain";
 
 const iconGenerators: Record<string, Record<string, (value: any) => string>> = {
@@ -15,6 +17,15 @@ const iconGenerators: Record<string, Record<string, (value: any) => string>> = {
     preset_mode: computePresetModeIcon,
     swing_mode: computeSwingModeIcon,
   },
+  humidifier: {
+    mode: computeHumidiferModeIcon,
+  },
+  light: {
+    effect: () => mdiCreation,
+  },
+  fan: {
+    preset_mode: () => mdiCircleMedium,
+  },
 };
 
 export const attributeIconPath = (

src/components/ha-control-select.ts

@@ -5,6 +5,7 @@ import {
   LitElement,
   nothing,
   PropertyValues,
+  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -17,15 +18,15 @@ import "./ha-svg-icon";
 export type ControlSelectOption = {
   value: string;
   label?: string;
-  icon?: string;
+  icon?: TemplateResult;
   path?: string;
 };
 
 @customElement("ha-control-select")
 export class HaControlSelect extends LitElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  @property() public options?: ControlSelectOption[];
+  @property({ attribute: false }) public options?: ControlSelectOption[];
 
   @property() public value?: string;
 
@@ -183,9 +184,7 @@ export class HaControlSelect extends LitElement {
         <div class="content">
           ${option.path
             ? html`<ha-svg-icon .path=${option.path}></ha-svg-icon>`
-            : option.icon
-              ? html`<ha-icon .icon=${option.icon}></ha-icon> `
-              : nothing}
+            : option.icon || nothing}
           ${option.label && !this.hideLabel
             ? html`<span>${option.label}</span>`
             : nothing}

src/dialogs/more-info/controls/more-info-fan.ts

@@ -14,6 +14,7 @@ import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { stateActive } from "../../../common/entity/state_active";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-select-menu";
+import "../../../components/ha-attribute-icon";
 import "../../../components/ha-list-item";
 import "../../../components/ha-outlined-icon-button";
 import { UNAVAILABLE } from "../../../data/entity";
@@ -187,10 +188,30 @@ class MoreInfoFan extends LitElement {
                 @selected=${this._handlePresetMode}
                 @closed=${stopPropagation}
               >
-                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
+                ${this.stateObj.attributes.preset_mode
+                  ? html`<ha-attribute-icon
+                      slot="icon"
+                      .hass=${this.hass}
+                      .stateObj=${this.stateObj}
+                      attribute="preset_mode"
+                      .attributeValue=${this.stateObj.attributes.preset_mode}
+                    ></ha-attribute-icon>`
+                  : html`
+                      <ha-svg-icon
+                        slot="icon"
+                        .path=${mdiTuneVariant}
+                      ></ha-svg-icon>
+                    `}
                 ${this.stateObj.attributes.preset_modes?.map(
                   (mode) => html`
-                    <ha-list-item .value=${mode}>
+                    <ha-list-item .value=${mode} graphic="icon">
+                      <ha-attribute-icon
+                        slot="graphic"
+                        .hass=${this.hass}
+                        .stateObj=${this.stateObj}
+                        attribute="preset_mode"
+                        .attributeValue=${mode}
+                      ></ha-attribute-icon>
                       ${this.hass.formatEntityAttributeValue(
                         this.stateObj!,
                         "preset_mode",

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -12,11 +12,11 @@ import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-select-menu";
 import "../../../components/ha-list-item";
+import "../../../components/ha-attribute-icon";
 import { UNAVAILABLE } from "../../../data/entity";
 import {
   HumidifierEntity,
   HumidifierEntityFeature,
-  computeHumidiferModeIcon,
 } from "../../../data/humidifier";
 import "../../../state-control/humidifier/ha-state-control-humidifier-humidity";
 import { HomeAssistant } from "../../../types";
@@ -109,14 +109,28 @@ class MoreInfoHumidifier extends LitElement {
                 @selected=${this._handleModeChanged}
                 @closed=${stopPropagation}
               >
-                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
+                ${stateObj.attributes.mode
+                  ? html`<ha-attribute-icon
+                      slot="icon"
+                      .hass=${this.hass}
+                      .stateObj=${stateObj}
+                      attribute="mode"
+                      .attributeValue=${stateObj.attributes.mode}
+                    ></ha-attribute-icon>`
+                  : html`<ha-svg-icon
+                      slot="icon"
+                      .path=${mdiTuneVariant}
+                    ></ha-svg-icon>`}
                 ${stateObj.attributes.available_modes!.map(
                   (mode) => html`
                     <ha-list-item .value=${mode} graphic="icon">
-                      <ha-svg-icon
+                      <ha-attribute-icon
                         slot="graphic"
-                        .path=${computeHumidiferModeIcon(mode)}
-                      ></ha-svg-icon>
+                        .hass=${this.hass}
+                        .stateObj=${stateObj}
+                        attribute="mode"
+                        .attributeValue=${mode}
+                      ></ha-attribute-icon>
                       ${this.hass.formatEntityAttributeValue(
                         stateObj!,
                         "mode",

src/dialogs/more-info/controls/more-info-light.ts

@@ -19,6 +19,7 @@ import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
+import "../../../components/ha-attribute-icon";
 import "../../../components/ha-control-select-menu";
 import "../../../components/ha-icon-button-group";
 import "../../../components/ha-icon-button-toggle";
@@ -271,10 +272,28 @@ class MoreInfoLight extends LitElement {
                   @selected=${this._handleEffect}
                   @closed=${stopPropagation}
                 >
-                  <ha-svg-icon slot="icon" .path=${mdiCreation}></ha-svg-icon>
+                  ${this.stateObj.attributes.effect
+                    ? html`<ha-attribute-icon
+                        slot="icon"
+                        .hass=${this.hass}
+                        .stateObj=${this.stateObj}
+                        attribute="effect"
+                        .attributeValue=${this.stateObj.attributes.effect}
+                      ></ha-attribute-icon>`
+                    : html`<ha-svg-icon
+                        slot="icon"
+                        .path=${mdiCreation}
+                      ></ha-svg-icon>`}
                   ${this.stateObj.attributes.effect_list?.map(
                     (mode) => html`
-                      <ha-list-item .value=${mode}>
+                      <ha-list-item .value=${mode} graphic="icon">
+                        <ha-attribute-icon
+                          slot="graphic"
+                          .hass=${this.hass}
+                          .stateObj=${this.stateObj}
+                          attribute="effect"
+                          .attributeValue=${mode}
+                        ></ha-attribute-icon>
                         ${this.hass.formatEntityAttributeValue(
                           this.stateObj!,
                           "effect",

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

@@ -5,15 +5,12 @@ 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-attribute-icon";
 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,
-  computeFanModeIcon,
-} from "../../../data/climate";
+import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
@@ -136,7 +133,13 @@ class HuiClimateFanModesCardFeature
           "fan_mode",
           mode
         ),
-        path: computeFanModeIcon(mode),
+        icon: html`<ha-attribute-icon
+          slot="graphic"
+          .hass=${this.hass}
+          .stateObj=${stateObj}
+          attribute="fan_mode"
+          .attributeValue=${mode}
+        ></ha-attribute-icon>`,
       }));
 
     if (this._config.style === "icons") {
@@ -171,12 +174,19 @@ class HuiClimateFanModesCardFeature
           @selected=${this._valueChanged}
           @closed=${stopPropagation}
         >
-          <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>
+          ${this._currentFanMode
+            ? html`<ha-attribute-icon
+                slot="icon"
+                .hass=${this.hass}
+                .stateObj=${stateObj}
+                attribute="fan_mode"
+                .attributeValue=${this._currentFanMode}
+              ></ha-attribute-icon>`
+            : html` <ha-svg-icon slot="icon" .path=${mdiFan}></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}
+                ${option.icon}${option.label}
               </ha-list-item>
             `
           )}

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

@@ -6,14 +6,14 @@ 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-attribute-icon";
 import "../../../components/ha-control-select";
-import "../../../components/ha-control-select-menu";
 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,
   compareClimateHvacModes,
-  computeHvacModeIcon,
   HvacMode,
 } from "../../../data/climate";
 import { UNAVAILABLE } from "../../../data/entity";
@@ -130,7 +130,13 @@ class HuiClimateHvacModesCardFeature
       .map<ControlSelectOption>((mode) => ({
         value: mode,
         label: this.hass!.formatEntityState(this.stateObj!, mode),
-        path: computeHvacModeIcon(mode),
+        icon: html`<ha-attribute-icon
+          slot="graphic"
+          .hass=${this.hass}
+          .stateObj=${this.stateObj}
+          attribute="hvac_mode"
+          .attributeValue=${mode}
+        ></ha-attribute-icon>`,
       }));
 
     if (this._config.style === "dropdown") {
@@ -147,15 +153,22 @@ class HuiClimateHvacModesCardFeature
             @selected=${this._valueChanged}
             @closed=${stopPropagation}
           >
-            <ha-svg-icon slot="icon" .path=${mdiThermostat}></ha-svg-icon>
+            ${this._currentHvacMode
+              ? html`<ha-attribute-icon
+                  slot="icon"
+                  .hass=${this.hass}
+                  .stateObj=${this.stateObj}
+                  attribute="hvac_mode"
+                  .attributeValue=${this._currentHvacMode}
+                ></ha-attribute-icon>`
+              : html`<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}
+                  ${option.icon}${option.label}
                 </ha-list-item>
               `
             )}

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

@@ -5,15 +5,12 @@ 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-attribute-icon";
 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 { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
@@ -138,7 +135,13 @@ class HuiClimatePresetModesCardFeature
           "preset_mode",
           mode
         ),
-        path: computePresetModeIcon(mode),
+        icon: html`<ha-attribute-icon
+          slot="graphic"
+          .hass=${this.hass}
+          .stateObj=${stateObj}
+          attribute="preset_mode"
+          .attributeValue=${mode}
+        ></ha-attribute-icon>`,
       }));
 
     if (this._config.style === "icons") {
@@ -176,12 +179,21 @@ class HuiClimatePresetModesCardFeature
           @selected=${this._valueChanged}
           @closed=${stopPropagation}
         >
-          <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
+          ${this._currentPresetMode
+            ? html`<ha-attribute-icon
+                slot="icon"
+                .hass=${this.hass}
+                .stateObj=${stateObj}
+                attribute="preset_mode"
+                .attributeValue=${this._currentPresetMode}
+              ></ha-attribute-icon>`
+            : html`
+                <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}
+                ${option.icon}${option.label}
               </ha-list-item>
             `
           )}