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,13 +98,24 @@ class HaEntityStatePicker extends LitElement {
     return !(!changedProps.has("_opened") && this._opened);
   }
 
-  private options = memoizeOne((entityId?: string, stateObj?: HassEntity) => {
+  private options = memoizeOne(
+    (entityId?: string, stateObj?: HassEntity, allowName?: boolean) => {
       const domain = entityId ? computeDomain(entityId) : undefined;
       return [
         {
           label: this.hass.localize("ui.components.state-content-picker.state"),
           value: "state",
         },
+        ...(allowName
+          ? [
+              {
+                label: this.hass.localize(
+                  "ui.components.state-content-picker.name"
+                ),
+                value: "name",
+              },
+            ]
+          : []),
         {
           label: this.hass.localize(
             "ui.components.state-content-picker.last_changed"
@@ -131,7 +145,8 @@ class HaEntityStatePicker extends LitElement {
             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",