Allow name in state content for badges (#21576)

src/components/entity/ha-entity-state-content-picker.ts

@@ -81,6 +81,9 @@ class HaEntityStatePicker extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
+  @property({ type: Boolean, attribute: "allow-name" }) public allowName =
+    false;
+
   @property() public label?: string;
 
   @property() public value?: string[] | string;
@@ -95,43 +98,55 @@ class HaEntityStatePicker extends LitElement {
     return !(!changedProps.has("_opened") && this._opened);
   }
 
-  private options = memoizeOne((entityId?: string, stateObj?: HassEntity) => {
+  private options = memoizeOne(
-    const domain = entityId ? computeDomain(entityId) : undefined;
+    (entityId?: string, stateObj?: HassEntity, allowName?: boolean) => {
-    return [
+      const domain = entityId ? computeDomain(entityId) : undefined;
-      {
+      return [
-        label: this.hass.localize("ui.components.state-content-picker.state"),
+        {
-        value: "state",
+          label: this.hass.localize("ui.components.state-content-picker.state"),
-      },
+          value: "state",
-      {
+        },
-        label: this.hass.localize(
+        ...(allowName
-          "ui.components.state-content-picker.last_changed"
+          ? [
-        ),
+              {
-        value: "last_changed",
+                label: this.hass.localize(
-      },
+                  "ui.components.state-content-picker.name"
-      {
+                ),
-        label: this.hass.localize(
+                value: "name",
-          "ui.components.state-content-picker.last_updated"
+              },
-        ),
+            ]
-        value: "last_updated",
+          : []),
-      },
+        {
-      ...(domain
+          label: this.hass.localize(
-        ? STATE_DISPLAY_SPECIAL_CONTENT.filter((content) =>
+            "ui.components.state-content-picker.last_changed"
-            STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[domain]?.includes(content)
+          ),
-          ).map((content) => ({
+          value: "last_changed",
-            label: this.hass.localize(
+        },
-              `ui.components.state-content-picker.${content}`
+        {
-            ),
+          label: this.hass.localize(
-            value: content,
+            "ui.components.state-content-picker.last_updated"
-          }))
+          ),
-        : []),
+          value: "last_updated",
-      ...Object.keys(stateObj?.attributes ?? {})
+        },
-        .filter((a) => !HIDDEN_ATTRIBUTES.includes(a))
+        ...(domain
-        .map((attribute) => ({
+          ? STATE_DISPLAY_SPECIAL_CONTENT.filter((content) =>
-          value: attribute,
+              STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[domain]?.includes(content)
-          label: this.hass.formatEntityAttributeName(stateObj!, attribute),
+            ).map((content) => ({
-        })),
+              label: this.hass.localize(
-    ];
+                `ui.components.state-content-picker.${content}`
-  });
+              ),
+              value: content,
+            }))
+          : []),
+        ...Object.keys(stateObj?.attributes ?? {})
+          .filter((a) => !HIDDEN_ATTRIBUTES.includes(a))
+          .map((attribute) => ({
+            value: attribute,
+            label: this.hass.formatEntityAttributeName(stateObj!, attribute),
+          })),
+      ];
+    }
+  );
 
   private _filter = "";
 
@@ -146,7 +161,7 @@ class HaEntityStatePicker extends LitElement {
       ? this.hass.states[this.entityId]
       : undefined;
 
-    const options = this.options(this.entityId, stateObj);
+    const options = this.options(this.entityId, stateObj, this.allowName);
     const optionItems = options.filter(
       (option) => !this._value.includes(option.value)
     );

src/components/ha-selector/ha-selector-ui-state-content.ts

@@ -36,6 +36,7 @@ export class HaSelectorUiStateContent extends SubscribeMixin(LitElement) {
         .helper=${this.helper}
         .disabled=${this.disabled}
         .required=${this.required}
+        .allowName=${this.selector.ui_state_content?.allow_name}
       ></ha-entity-state-content-picker>
     `;
   }

src/data/selector.ts

@@ -461,6 +461,7 @@ export interface UiStateContentSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   ui_state_content: {
     entity_id?: string;
+    allow_name?: boolean;
   } | null;
 }
 

src/panels/lovelace/badges/hui-entity-badge.ts

@@ -144,6 +144,7 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
         .stateObj=${stateObj}
         .hass=${this.hass}
         .content=${this._config.state_content}
+        .name=${this._config.name}
       >
       </state-display>
     `;

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

@@ -251,6 +251,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
             .stateObj=${stateObj}
             .hass=${this.hass}
             .content=${this._config.state_content}
+            .name=${this._config.name}
           >
           </state-display>
         `;

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

@@ -122,7 +122,9 @@ export class HuiEntityBadgeEditor
             {
               name: "state_content",
               selector: {
-                ui_state_content: {},
+                ui_state_content: {
+                  allow_name: true,
+                },
               },
               context: {
                 filter_entity: "entity",

src/state-display/state-display.ts

@@ -55,6 +55,8 @@ class StateDisplay extends LitElement {
 
   @property({ attribute: false }) public content?: StateContent;
 
+  @property({ attribute: false }) public name?: string;
+
   protected createRenderRoot() {
     return this;
   }
@@ -88,6 +90,9 @@ class StateDisplay extends LitElement {
 
       return this.hass!.formatEntityState(stateObj);
     }
+    if (content === "name") {
+      return html`${this.name || stateObj.attributes.friendly_name}`;
+    }
     // Check last-changed for backwards compatibility
     if (content === "last_changed" || content === "last-changed") {
       return html`

src/translations/en.json

@@ -1026,6 +1026,7 @@
       },
       "state-content-picker": {
         "state": "State",
+        "name": "Name",
         "last_changed": "Last changed",
         "last_updated": "Last updated",
         "remaining_time": "Remaining time",