Icon entity context icon selector (#15306)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/ha-selector/ha-selector-icon.ts

@@ -1,6 +1,8 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { domainIcon } from "../../common/entity/domain_icon";
 import { IconSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../ha-icon-picker";
@@ -21,7 +23,22 @@ export class HaIconSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @property() public context?: {
+    icon_entity?: string;
+  };
+
   protected render() {
+    const iconEntity = this.context?.icon_entity;
+
+    const stateObj = iconEntity ? this.hass.states[iconEntity] : undefined;
+
+    const placeholder =
+      this.selector.icon?.placeholder || stateObj?.attributes.icon;
+    const fallbackPath =
+      !placeholder && stateObj
+        ? domainIcon(computeDomain(iconEntity!), stateObj)
+        : undefined;
+
     return html`
       <ha-icon-picker
         .hass=${this.hass}
@@ -30,8 +47,8 @@ export class HaIconSelector extends LitElement {
         .required=${this.required}
         .disabled=${this.disabled}
         .helper=${this.helper}
-        .fallbackPath=${this.selector.icon?.fallbackPath}
+        .fallbackPath=${this.selector.icon?.fallbackPath ?? fallbackPath}
-        .placeholder=${this.selector.icon?.placeholder}
+        .placeholder=${this.selector.icon?.placeholder ?? placeholder}
         @value-changed=${this._valueChanged}
       ></ha-icon-picker>
     `;

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

@@ -1,11 +1,7 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
 import { entityId } from "../../../../common/structs/is-entity-id";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
@@ -32,23 +28,7 @@ const cardConfigStruct = assign(
   })
 );
 
-@customElement("hui-button-card-editor")
+const SCHEMA = [
-export class HuiButtonCardEditor
-  extends LitElement
-  implements LovelaceCardEditor
-{
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @state() private _config?: ButtonCardConfig;
-
-  public setConfig(config: ButtonCardConfig): void {
-    assert(config, cardConfigStruct);
-    this._config = config;
-  }
-
-  private _schema = memoizeOne(
-    (entity?: string, icon?: string, entityState?: HassEntity) =>
-      [
   { name: "entity", selector: { entity: {} } },
   {
     name: "",
@@ -58,16 +38,10 @@ export class HuiButtonCardEditor
       {
         name: "icon",
         selector: {
-                icon: {
+          icon: {},
-                  placeholder: icon || entityState?.attributes.icon,
-                  fallbackPath:
-                    !icon &&
-                    !entityState?.attributes.icon &&
-                    entityState &&
-                    entity
-                      ? domainIcon(computeDomain(entity), entityState)
-                      : undefined,
         },
+        context: {
+          icon_entity: "entity",
         },
       },
     ],
@@ -98,24 +72,27 @@ export class HuiButtonCardEditor
     name: "hold_action",
     selector: { "ui-action": {} },
   },
-      ] as const
+] as const;
-  );
+
+@customElement("hui-button-card-editor")
+export class HuiButtonCardEditor
+  extends LitElement
+  implements LovelaceCardEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @state() private _config?: ButtonCardConfig;
+
+  public setConfig(config: ButtonCardConfig): void {
+    assert(config, cardConfigStruct);
+    this._config = config;
+  }
 
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const entityState = this._config.entity
-      ? this.hass.states[this._config.entity]
-      : undefined;
-
-    const schema = this._schema(
-      this._config.entity,
-      this._config.icon,
-      entityState
-    );
-
     const data = {
       show_name: true,
       show_icon: true,
@@ -130,7 +107,7 @@ export class HuiButtonCardEditor
       <ha-form
         .hass=${this.hass}
         .data=${data}
-        .schema=${schema}
+        .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
         .computeHelper=${this._computeHelperCallback}
         @value-changed=${this._valueChanged}
@@ -148,9 +125,7 @@ export class HuiButtonCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeHelperCallback = (
+  private _computeHelperCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
     switch (schema.name) {
       case "tap_action":
       case "hold_action":
@@ -162,9 +137,7 @@ export class HuiButtonCardEditor
     }
   };
 
-  private _computeLabelCallback = (
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
     switch (schema.name) {
       case "theme":
       case "tap_action":

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

@@ -1,11 +1,7 @@
-import type { HassEntity } from "home-assistant-js-websocket/dist/types";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
 import { entityId } from "../../../../common/structs/is-entity-id";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
@@ -29,6 +25,38 @@ const cardConfigStruct = assign(
   })
 );
 
+const SCHEMA = [
+  { name: "entity", required: true, selector: { entity: {} } },
+  {
+    type: "grid",
+    name: "",
+    schema: [
+      { name: "name", selector: { text: {} } },
+      {
+        name: "icon",
+        selector: {
+          icon: {},
+        },
+        context: {
+          icon_entity: "entity",
+        },
+      },
+      {
+        name: "attribute",
+        selector: {
+          attribute: {},
+        },
+        context: {
+          filter_entity: "entity",
+        },
+      },
+      { name: "unit", selector: { text: {} } },
+      { name: "theme", selector: { theme: {} } },
+      { name: "state_color", selector: { boolean: {} } },
+    ],
+  },
+] as const;
+
 @customElement("hui-entity-card-editor")
 export class HuiEntityCardEditor
   extends LitElement
@@ -43,58 +71,16 @@ export class HuiEntityCardEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (entity: string, icon: string, entityState: HassEntity) =>
-      [
-        { name: "entity", required: true, selector: { entity: {} } },
-        {
-          type: "grid",
-          name: "",
-          schema: [
-            { name: "name", selector: { text: {} } },
-            {
-              name: "icon",
-              selector: {
-                icon: {
-                  placeholder: icon || entityState?.attributes.icon,
-                  fallbackPath:
-                    !icon && !entityState?.attributes.icon && entityState
-                      ? domainIcon(computeDomain(entity), entityState)
-                      : undefined,
-                },
-              },
-            },
-
-            {
-              name: "attribute",
-              selector: { attribute: { entity_id: entity } },
-            },
-            { name: "unit", selector: { text: {} } },
-            { name: "theme", selector: { theme: {} } },
-            { name: "state_color", selector: { boolean: {} } },
-          ],
-        },
-      ] as const
-  );
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const entityState = this.hass.states[this._config.entity];
-
-    const schema = this._schema(
-      this._config.entity,
-      this._config.icon,
-      entityState
-    );
-
     return html`
       <ha-form
         .hass=${this.hass}
         .data=${this._config}
-        .schema=${schema}
+        .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
@@ -107,9 +93,7 @@ export class HuiEntityCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
     if (schema.name === "entity") {
       return this.hass!.localize(
         "ui.panel.lovelace.editor.card.generic.entity"

src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts

@@ -1,13 +1,11 @@
-import "../../../../components/ha-form/ha-form";
-import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
+import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import type { EntitiesCardEntityConfig } from "../../cards/types";
@@ -39,13 +37,7 @@ export class HuiGenericEntityRowEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
+  private _schema = memoizeOne((entity: string, localize: LocalizeFunc) => {
-    (
-      entity: string,
-      icon: string | undefined,
-      entityState: HassEntity,
-      localize: LocalizeFunc
-    ) => {
     const domain = computeDomain(entity);
 
     return [
@@ -58,13 +50,10 @@ export class HuiGenericEntityRowEditor
           {
             name: "icon",
             selector: {
-                icon: {
+              icon: {},
-                  placeholder: icon || entityState?.attributes.icon,
-                  fallbackPath:
-                    !icon && !entityState?.attributes.icon && entityState
-                      ? domainIcon(domain, entityState)
-                      : undefined,
             },
+            context: {
+              icon_entity: "entity",
             },
           },
         ],
@@ -90,22 +79,14 @@ export class HuiGenericEntityRowEditor
         },
       },
     ] as const;
-    }
+  });
-  );
 
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const entityState = this.hass.states[this._config.entity];
+    const schema = this._schema(this._config.entity, this.hass.localize);
-
-    const schema = this._schema(
-      this._config.entity,
-      this._config.icon,
-      entityState,
-      this.hass.localize
-    );
 
     return html`
       <ha-form

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

@@ -1,11 +1,7 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
 import { entityId } from "../../../../common/structs/is-entity-id";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
@@ -28,6 +24,39 @@ const cardConfigStruct = assign(
   })
 );
 
+const SCHEMA = [
+  {
+    name: "entity",
+    required: true,
+    selector: { entity: { domain: "light" } },
+  },
+  {
+    type: "grid",
+    name: "",
+    schema: [
+      { name: "name", selector: { text: {} } },
+      {
+        name: "icon",
+        selector: {
+          icon: {},
+        },
+        context: {
+          icon_entity: "entity",
+        },
+      },
+    ],
+  },
+  { name: "theme", selector: { theme: {} } },
+  {
+    name: "hold_action",
+    selector: { "ui-action": {} },
+  },
+  {
+    name: "double_tap_action",
+    selector: { "ui-action": {} },
+  },
+] as const;
+
 @customElement("hui-light-card-editor")
 export class HuiLightCardEditor
   extends LitElement
@@ -42,62 +71,16 @@ export class HuiLightCardEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (entity: string, icon: string | undefined, entityState: HassEntity) =>
-      [
-        {
-          name: "entity",
-          required: true,
-          selector: { entity: { domain: "light" } },
-        },
-        {
-          type: "grid",
-          name: "",
-          schema: [
-            { name: "name", selector: { text: {} } },
-            {
-              name: "icon",
-              selector: {
-                icon: {
-                  placeholder: icon || entityState?.attributes.icon,
-                  fallbackPath:
-                    !icon && !entityState?.attributes.icon && entityState
-                      ? domainIcon(computeDomain(entity), entityState)
-                      : undefined,
-                },
-              },
-            },
-          ],
-        },
-        { name: "theme", selector: { theme: {} } },
-        {
-          name: "hold_action",
-          selector: { "ui-action": {} },
-        },
-        {
-          name: "double_tap_action",
-          selector: { "ui-action": {} },
-        },
-      ] as const
-  );
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const entityState = this.hass.states[this._config.entity];
-    const schema = this._schema(
-      this._config.entity,
-      this._config.icon,
-      entityState
-    );
-
     return html`
       <ha-form
         .hass=${this.hass}
         .data=${this._config}
-        .schema=${schema}
+        .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
@@ -108,9 +91,7 @@ export class HuiLightCardEditor
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
-  private _computeLabelCallback = (
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
     switch (schema.name) {
       case "theme":
       case "hold_action":

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

@@ -1,7 +1,5 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import {
   assert,
   assign,
@@ -13,8 +11,6 @@ import {
   union,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
 import { entityId } from "../../../../common/structs/is-entity-id";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
@@ -38,23 +34,7 @@ const cardConfigStruct = assign(
   })
 );
 
-@customElement("hui-sensor-card-editor")
+const SCHEMA = [
-export class HuiSensorCardEditor
-  extends LitElement
-  implements LovelaceCardEditor
-{
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @state() private _config?: SensorCardConfig;
-
-  public setConfig(config: SensorCardConfig): void {
-    assert(config, cardConfigStruct);
-    this._config = config;
-  }
-
-  private _schema = memoizeOne(
-    (entity: string, icon: string | undefined, entityState: HassEntity) =>
-      [
   {
     name: "entity",
     selector: {
@@ -69,13 +49,10 @@ export class HuiSensorCardEditor
       {
         name: "icon",
         selector: {
-                icon: {
+          icon: {},
-                  placeholder: icon || entityState?.attributes.icon,
-                  fallbackPath:
-                    !icon && !entityState?.attributes.icon && entityState
-                      ? domainIcon(computeDomain(entity), entityState)
-                      : undefined,
         },
+        context: {
+          icon_entity: "entity",
         },
       },
       {
@@ -104,22 +81,27 @@ export class HuiSensorCardEditor
       },
     ],
   },
-      ] as const
+] as const;
-  );
+
+@customElement("hui-sensor-card-editor")
+export class HuiSensorCardEditor
+  extends LitElement
+  implements LovelaceCardEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @state() private _config?: SensorCardConfig;
+
+  public setConfig(config: SensorCardConfig): void {
+    assert(config, cardConfigStruct);
+    this._config = config;
+  }
 
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const entityState = this.hass.states[this._config.entity];
-
-    const schema = this._schema(
-      this._config.entity,
-      this._config.icon,
-      entityState
-    );
-
     const data = {
       hours_to_show: 24,
       graph: "none",
@@ -131,7 +113,7 @@ export class HuiSensorCardEditor
       <ha-form
         .hass=${this.hass}
         .data=${data}
-        .schema=${schema}
+        .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
@@ -144,9 +126,7 @@ export class HuiSensorCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
     switch (schema.name) {
       case "theme":
         return `${this.hass!.localize(

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

@@ -1,11 +1,8 @@
-import type { HassEntity } from "home-assistant-js-websocket/dist/types";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { any, assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
 import { LocalizeFunc } from "../../../../common/translations/localize";
 import { deepEqual } from "../../../../common/util/deep-equal";
 import "../../../../components/ha-form/ha-form";
@@ -100,10 +97,7 @@ export class HuiStatisticCardEditor
 
   private _schema = memoizeOne(
     (
-      entity: string,
-      icon: string,
       selectedPeriodKey: string | undefined,
-      entityState: HassEntity,
       localize: LocalizeFunc,
       metadata?: StatisticsMetaData
     ) =>
@@ -155,13 +149,10 @@ export class HuiStatisticCardEditor
             {
               name: "icon",
               selector: {
-                icon: {
+                icon: {},
-                  placeholder: icon || entityState?.attributes.icon,
-                  fallbackPath:
-                    !icon && !entityState?.attributes.icon && entityState
-                      ? domainIcon(computeDomain(entity), entityState)
-                      : undefined,
               },
+              context: {
+                icon_entity: "entity",
               },
             },
             { name: "unit", selector: { text: {} } },
@@ -176,15 +167,10 @@ export class HuiStatisticCardEditor
       return html``;
     }
 
-    const entityState = this.hass.states[this._config.entity];
-
     const data = this._data(this._config);
 
     const schema = this._schema(
-      this._config.entity,
-      this._config.icon,
       typeof data.period === "string" ? data.period : undefined,
-      entityState,
       this.hass.localize,
       this._metadata
     );

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

@@ -14,9 +14,8 @@ import {
   string,
 } from "superstruct";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
 import { entityId } from "../../../../common/structs/is-entity-id";
+import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
@@ -65,16 +64,14 @@ export class HuiTileCardEditor
   }
 
   private _schema = memoizeOne(
-    (entity: string, icon?: string, stateObj?: HassEntity) =>
+    (localize: LocalizeFunc) =>
       [
         { name: "entity", selector: { entity: {} } },
         {
           name: "",
           type: "expandable",
           iconPath: mdiPalette,
-          title: this.hass!.localize(
+          title: localize(`ui.panel.lovelace.editor.card.tile.appearance`),
-            `ui.panel.lovelace.editor.card.tile.appearance`
-          ),
           schema: [
             {
               name: "",
@@ -84,14 +81,9 @@ export class HuiTileCardEditor
                 {
                   name: "icon",
                   selector: {
-                    icon: {
+                    icon: {},
-                      placeholder: icon || stateObj?.attributes.icon,
-                      fallbackPath:
-                        !icon && !stateObj?.attributes.icon && stateObj
-                          ? domainIcon(computeDomain(entity), stateObj)
-                          : undefined,
-                    },
                   },
+                  context: { icon_entity: "entity" },
                 },
                 {
                   name: "color",
@@ -118,9 +110,7 @@ export class HuiTileCardEditor
         {
           name: "",
           type: "expandable",
-          title: this.hass!.localize(
+          title: localize(`ui.panel.lovelace.editor.card.tile.actions`),
-            `ui.panel.lovelace.editor.card.tile.actions`
-          ),
           iconPath: mdiGestureTap,
           schema: [
             {
@@ -153,11 +143,7 @@ export class HuiTileCardEditor
       | HassEntity
       | undefined;
 
-    const schema = this._schema(
+    const schema = this._schema(this.hass!.localize);
-      this._config.entity,
-      this._config.icon,
-      stateObj
-    );
 
     if (this._subElementEditorConfig) {
       return html`