diff --git a/src/panels/lovelace/editor/heading-badge-editor/hui-entity-heading-badge-editor.ts b/src/panels/lovelace/editor/heading-badge-editor/hui-entity-heading-badge-editor.ts index b1446d4a1254..eebf4ba7987a 100644 --- a/src/panels/lovelace/editor/heading-badge-editor/hui-entity-heading-badge-editor.ts +++ b/src/panels/lovelace/editor/heading-badge-editor/hui-entity-heading-badge-editor.ts @@ -37,6 +37,7 @@ export const DEFAULT_CONFIG: Partial = { const entityConfigStruct = object({ type: optional(string()), entity: string(), + name: optional(string()), icon: optional(string()), state_content: optional(union([string(), array(string())])), show_state: optional(boolean()), @@ -86,6 +87,12 @@ export class HuiHeadingEntityEditor name: "", type: "grid", schema: [ + { + name: "name", + selector: { + text: {}, + }, + }, { name: "icon", selector: { icon: {} }, @@ -128,7 +135,7 @@ export class HuiHeadingEntityEditor }, { name: "state_content", - selector: { ui_state_content: {} }, + selector: { ui_state_content: { allow_name: true } }, context: { filter_entity: "entity" }, }, ], @@ -269,6 +276,10 @@ export class HuiHeadingEntityEditor return this.hass!.localize( `ui.panel.lovelace.editor.card.heading.entity_config.${schema.name}_helper` ); + case "name": + return this.hass!.localize( + `ui.panel.lovelace.editor.card.heading.entity_config.name_helper` + ); default: return undefined; } diff --git a/src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts b/src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts index b6084a846dc8..4109e0852883 100644 --- a/src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts +++ b/src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts @@ -125,12 +125,15 @@ export class HuiEntityHeadingBadge "--icon-color": color, }; + const name = config.name || stateObj.attributes.friendly_name; + return html` ${config.show_icon ? html` @@ -148,6 +151,7 @@ export class HuiEntityHeadingBadge .hass=${this.hass} .stateObj=${stateObj} .content=${config.state_content} + .name=${config.name} > ` : nothing} diff --git a/src/panels/lovelace/heading-badges/types.ts b/src/panels/lovelace/heading-badges/types.ts index ac9a4a10cd62..e87ccb1d64f4 100644 --- a/src/panels/lovelace/heading-badges/types.ts +++ b/src/panels/lovelace/heading-badges/types.ts @@ -16,6 +16,7 @@ export interface ErrorBadgeConfig extends LovelaceHeadingBadgeConfig { export interface EntityHeadingBadgeConfig extends LovelaceHeadingBadgeConfig { type?: "entity"; entity: string; + name?: string; state_content?: string | string[]; icon?: string; show_state?: boolean; diff --git a/src/translations/en.json b/src/translations/en.json index 005c8ef5526b..f3a2a622b764 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -6026,6 +6026,8 @@ "entity_config": { "color": "[%key:ui::panel::lovelace::editor::card::tile::color%]", "color_helper": "[%key:ui::panel::lovelace::editor::card::tile::color_helper%]", + "name": "[%key:ui::panel::lovelace::editor::card::generic::name%]", + "name_helper": "Visible if selected in state content", "visibility": "Visibility", "visibility_explanation": "The entity will be shown when ALL conditions below are fulfilled. If no conditions are set, the entity will always be shown.", "appearance": "Appearance",