From 0adee7d1890db0a93c7a9aace3ea49ad18d0a44e Mon Sep 17 00:00:00 2001 From: karwosts <32912880+karwosts@users.noreply.github.com> Date: Mon, 5 Aug 2024 08:05:31 -0700 Subject: [PATCH 1/6] Use getStubConfig for picture-elements (and more fixes) (#21579) --- .../create-styled-hui-element.ts | 2 +- .../create-element/create-picture-element.ts | 2 +- .../hui-conditional-element-editor.ts | 11 +++++++ .../hui-picture-elements-card-editor.ts | 11 +++++++ .../editor/get-element-stub-config.ts | 30 +++++++++++++++++++ .../hui-picture-elements-card-row-editor.ts | 23 +++++++------- .../lovelace/editor/hui-sub-element-editor.ts | 16 ++++++++-- .../lovelace/elements/hui-icon-element.ts | 4 +++ .../elements/hui-service-button-element.ts | 8 +++++ .../elements/hui-state-badge-element.ts | 24 +++++++++++++++ .../elements/hui-state-icon-element.ts | 24 +++++++++++++++ .../elements/hui-state-label-element.ts | 24 +++++++++++++++ src/panels/lovelace/elements/types.ts | 2 +- src/panels/lovelace/types.ts | 5 ++++ src/translations/en.json | 3 +- 15 files changed, 170 insertions(+), 19 deletions(-) create mode 100644 src/panels/lovelace/editor/get-element-stub-config.ts diff --git a/src/panels/lovelace/cards/picture-elements/create-styled-hui-element.ts b/src/panels/lovelace/cards/picture-elements/create-styled-hui-element.ts index 181412bc98..6371572cf0 100644 --- a/src/panels/lovelace/cards/picture-elements/create-styled-hui-element.ts +++ b/src/panels/lovelace/cards/picture-elements/create-styled-hui-element.ts @@ -12,7 +12,7 @@ export function createStyledHuiElement( if (elementConfig.style) { Object.keys(elementConfig.style).forEach((prop) => { - element.style.setProperty(prop, elementConfig.style[prop]); + element.style.setProperty(prop, elementConfig.style![prop]); }); } diff --git a/src/panels/lovelace/create-element/create-picture-element.ts b/src/panels/lovelace/create-element/create-picture-element.ts index ce848b3bd0..e1775a8497 100644 --- a/src/panels/lovelace/create-element/create-picture-element.ts +++ b/src/panels/lovelace/create-element/create-picture-element.ts @@ -35,7 +35,7 @@ export const createPictureElementElement = (config: LovelaceElementConfig) => export const getPictureElementClass = (type: string) => getLovelaceElementClass( - type, + type === "action-button" ? "service-button" : type, "element", ALWAYS_LOADED_TYPES, LAZY_LOAD_TYPES diff --git a/src/panels/lovelace/editor/config-elements/elements/hui-conditional-element-editor.ts b/src/panels/lovelace/editor/config-elements/elements/hui-conditional-element-editor.ts index 94809079c6..7b65ce4da8 100644 --- a/src/panels/lovelace/editor/config-elements/elements/hui-conditional-element-editor.ts +++ b/src/panels/lovelace/editor/config-elements/elements/hui-conditional-element-editor.ts @@ -106,12 +106,23 @@ export class HuiConditionalElementEditor private _elementsChanged(ev: CustomEvent): void { ev.stopPropagation(); + const oldLength = this._config?.elements?.length || 0; const config = { ...this._config, elements: ev.detail.elements as LovelaceElementConfig[], } as LovelaceCardConfig; fireEvent(this, "config-changed", { config }); + + const newLength = ev.detail.elements?.length || 0; + if (newLength === oldLength + 1) { + const index = newLength - 1; + this._subElementEditorConfig = { + index, + type: "element", + elementConfig: { ...ev.detail.elements[index] }, + }; + } } private _handleSubElementChanged(ev: CustomEvent): void { diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts index a2d16716ff..c0c8c72960 100644 --- a/src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts @@ -138,12 +138,23 @@ export class HuiPictureElementsCardEditor private _elementsChanged(ev: CustomEvent): void { ev.stopPropagation(); + const oldLength = this._config?.elements?.length || 0; const config = { ...this._config, elements: ev.detail.elements as LovelaceElementConfig[], } as LovelaceCardConfig; fireEvent(this, "config-changed", { config }); + + const newLength = ev.detail.elements?.length || 0; + if (newLength === oldLength + 1) { + const index = newLength - 1; + this._subElementEditorConfig = { + index, + type: "element", + elementConfig: { ...ev.detail.elements[index] }, + }; + } } private _handleSubElementChanged(ev: CustomEvent): void { diff --git a/src/panels/lovelace/editor/get-element-stub-config.ts b/src/panels/lovelace/editor/get-element-stub-config.ts new file mode 100644 index 0000000000..dbd48d023d --- /dev/null +++ b/src/panels/lovelace/editor/get-element-stub-config.ts @@ -0,0 +1,30 @@ +import { LovelaceElementConfig } from "../elements/types"; +import { HomeAssistant } from "../../../types"; +import { getPictureElementClass } from "../create-element/create-picture-element"; + +export const getElementStubConfig = async ( + hass: HomeAssistant, + type: string, + entities: string[], + entitiesFallback: string[] +): Promise => { + let elementConfig: LovelaceElementConfig = { type }; + + if (type !== "conditional") { + elementConfig.style = { left: "50%", top: "50%" }; + } + + const elClass = await getPictureElementClass(type); + + if (elClass && elClass.getStubConfig) { + const classStubConfig = await elClass.getStubConfig( + hass, + entities, + entitiesFallback + ); + + elementConfig = { ...elementConfig, ...classStubConfig }; + } + + return elementConfig; +}; diff --git a/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts b/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts index baebcbbc19..d013cb8f81 100644 --- a/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts +++ b/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts @@ -1,3 +1,4 @@ +import deepClone from "deep-clone-simple"; import { mdiClose, mdiPencil, mdiContentDuplicate } from "@mdi/js"; import { CSSResultGroup, LitElement, css, html, nothing } from "lit"; import { customElement, property, query } from "lit/decorators"; @@ -9,6 +10,7 @@ import { HomeAssistant } from "../../../types"; import "../../../components/ha-select"; import type { HaSelect } from "../../../components/ha-select"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; +import { getElementStubConfig } from "./get-element-stub-config"; import { ConditionalElementConfig, IconElementConfig, @@ -171,17 +173,14 @@ export class HuiPictureElementsCardRowEditor extends LitElement { if (value === "") { return; } - const newElements = this.elements!.concat({ - type: value! as string, - ...(value !== "conditional" - ? { - style: { - top: "50%", - left: "50%", - }, - } - : {}), - } as LovelaceElementConfig); + const newElements = this.elements!.concat( + await getElementStubConfig( + this.hass!, + value, + Object.keys(this.hass!.entities), + [] + ) + ); fireEvent(this, "elements-changed", { elements: newElements }); this._select.select(-1); } @@ -225,7 +224,7 @@ export class HuiPictureElementsCardRowEditor extends LitElement { private _duplicateRow(ev: CustomEvent): void { const index = (ev.currentTarget as any).index; - const newElements = [...this.elements!, this.elements![index]]; + const newElements = [...this.elements!, deepClone(this.elements![index])]; fireEvent(this, "elements-changed", { elements: newElements }); } diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts index df6ed4308d..1755144d88 100644 --- a/src/panels/lovelace/editor/hui-sub-element-editor.ts +++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts @@ -53,9 +53,19 @@ export class HuiSubElementEditor extends LitElement { @click=${this._goBack} > ${this.hass.localize( - `ui.panel.lovelace.editor.sub-element-editor.types.${this.config?.type}` - )}${this.config?.type === "element" + ? this.hass.localize( + `ui.panel.lovelace.editor.sub-element-editor.types.element_type`, + { + type: + this.hass.localize( + `ui.panel.lovelace.editor.card.picture-elements.element_types.${this.config?.elementConfig?.type}` + ) || this.config?.elementConfig?.type, + } + ) + : this.hass.localize( + `ui.panel.lovelace.editor.sub-element-editor.types.${this.config?.type}` + )} + !isUnavailableState(stateObj.state); + const foundEntities = findEntities( + hass, + maxEntities, + entities, + entitiesFallback, + includeDomains, + entityFilter + ); + + return { type: "state-badge", entity: foundEntities[0] || "" }; + } + @property({ attribute: false }) public hass?: HomeAssistant; @state() private _config?: StateBadgeElementConfig; diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts index 84e0a7add6..6175ba77fe 100644 --- a/src/panels/lovelace/elements/hui-state-icon-element.ts +++ b/src/panels/lovelace/elements/hui-state-icon-element.ts @@ -1,3 +1,4 @@ +import type { HassEntity } from "home-assistant-js-websocket"; import { css, CSSResultGroup, @@ -8,12 +9,14 @@ import { } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; +import { findEntities } from "../common/find-entities"; import "../../../components/entity/state-badge"; import { HomeAssistant } from "../../../types"; import { computeTooltip } from "../common/compute-tooltip"; import { actionHandler } from "../common/directives/action-handler-directive"; import { handleAction } from "../common/handle-action"; import { hasAction } from "../common/has-action"; +import { isUnavailableState } from "../../../data/entity"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import "../components/hui-warning-element"; @@ -30,6 +33,27 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement { return document.createElement("hui-state-icon-element-editor"); } + public static getStubConfig( + hass: HomeAssistant, + entities: string[], + entitiesFallback: string[] + ): StateIconElementConfig { + const includeDomains = ["light", "switch", "sensor"]; + const maxEntities = 1; + const entityFilter = (stateObj: HassEntity): boolean => + !isUnavailableState(stateObj.state); + const foundEntities = findEntities( + hass, + maxEntities, + entities, + entitiesFallback, + includeDomains, + entityFilter + ); + + return { type: "state-icon", entity: foundEntities[0] || "" }; + } + @property({ attribute: false }) public hass?: HomeAssistant; @state() private _config?: StateIconElementConfig; diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts index ef699bf6a6..bb85408e1e 100644 --- a/src/panels/lovelace/elements/hui-state-label-element.ts +++ b/src/panels/lovelace/elements/hui-state-label-element.ts @@ -1,3 +1,4 @@ +import type { HassEntity } from "home-assistant-js-websocket"; import { CSSResultGroup, LitElement, @@ -8,12 +9,14 @@ import { } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; +import { findEntities } from "../common/find-entities"; import { ActionHandlerEvent } from "../../../data/lovelace/action_handler"; import { HomeAssistant } from "../../../types"; import { computeTooltip } from "../common/compute-tooltip"; import { actionHandler } from "../common/directives/action-handler-directive"; import { handleAction } from "../common/handle-action"; import { hasAction } from "../common/has-action"; +import { isUnavailableState } from "../../../data/entity"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import "../components/hui-warning-element"; @@ -29,6 +32,27 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement { return document.createElement("hui-state-label-element-editor"); } + public static getStubConfig( + hass: HomeAssistant, + entities: string[], + entitiesFallback: string[] + ): StateLabelElementConfig { + const includeDomains = ["light", "switch", "sensor"]; + const maxEntities = 1; + const entityFilter = (stateObj: HassEntity): boolean => + !isUnavailableState(stateObj.state); + const foundEntities = findEntities( + hass, + maxEntities, + entities, + entitiesFallback, + includeDomains, + entityFilter + ); + + return { type: "state-label", entity: foundEntities[0] || "" }; + } + @property({ attribute: false }) public hass?: HomeAssistant; @state() private _config?: StateLabelElementConfig; diff --git a/src/panels/lovelace/elements/types.ts b/src/panels/lovelace/elements/types.ts index fcd9a44865..e968081ca2 100644 --- a/src/panels/lovelace/elements/types.ts +++ b/src/panels/lovelace/elements/types.ts @@ -6,7 +6,7 @@ import { HuiImage } from "../components/hui-image"; interface LovelaceElementConfigBase { type: string; - style: Record; + style?: Record; } export type LovelaceElementConfig = diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts index d99f52112f..92a2658e2e 100644 --- a/src/panels/lovelace/types.ts +++ b/src/panels/lovelace/types.ts @@ -109,6 +109,11 @@ export interface LovelaceRowConstructor extends Constructor { export interface LovelaceElementConstructor extends Constructor { getConfigElement?: () => LovelacePictureElementEditor; + getStubConfig?: ( + hass: HomeAssistant, + entities: string[], + entitiesFallback: string[] + ) => LovelaceElementConfig; } export interface LovelaceHeaderFooter extends HTMLElement { diff --git a/src/translations/en.json b/src/translations/en.json index 6e28e4e91c..7524fc65c3 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -6323,7 +6323,8 @@ "footer": "Footer editor", "row": "Entity row editor", "feature": "Feature editor", - "element": "Element editor" + "element": "Element editor", + "element_type": "{type} element editor" } } }, From 3ba572ee3712e8ca1f27089e2040fe6578af7afd Mon Sep 17 00:00:00 2001 From: karwosts <32912880+karwosts@users.noreply.github.com> Date: Mon, 5 Aug 2024 08:07:03 -0700 Subject: [PATCH 2/6] Fix pointer cursor issues (#21587) * Fix pointer cursor issues * one more --- src/panels/lovelace/cards/hui-gauge-card.ts | 14 +++++--------- src/panels/lovelace/cards/hui-glance-card.ts | 10 ++-------- src/panels/lovelace/common/has-action.ts | 10 ++++++++++ .../lovelace/components/hui-generic-entity-row.ts | 12 +++++++----- .../lovelace/entity-rows/hui-number-entity-row.ts | 1 - .../lovelace/entity-rows/hui-scene-entity-row.ts | 3 --- .../lovelace/entity-rows/hui-simple-entity-row.ts | 3 --- .../lovelace/entity-rows/hui-update-entity-row.ts | 3 --- .../lovelace/entity-rows/hui-weather-entity-row.ts | 12 +++++++----- 9 files changed, 31 insertions(+), 37 deletions(-) diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index d4e0c2aacc..4370516653 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -23,7 +23,7 @@ import type { HomeAssistant } from "../../../types"; import { actionHandler } from "../common/directives/action-handler-directive"; import { findEntities } from "../common/find-entities"; import { handleAction } from "../common/handle-action"; -import { hasAction } from "../common/has-action"; +import { hasAction, hasAnyAction } from "../common/has-action"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import type { LovelaceCard, LovelaceCardEditor } from "../types"; @@ -128,24 +128,20 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { const name = this._config.name ?? computeStateName(stateObj); - const hasAnyAction = - !this._config.tap_action || - hasAction(this._config.tap_action) || - hasAction(this._config.hold_action) || - hasAction(this._config.double_tap_action); - // Use `stateObj.state` as value to keep formatting (e.g trailing zeros) // for consistent value display across gauge, entity, entity-row, etc. return html` ${!this.hideName ? html`
${weatherStateIcon || html` From 5c30c1647cc08809fa225f5933e24d28fe597c20 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 5 Aug 2024 17:12:28 +0200 Subject: [PATCH 3/6] Show name for badges without config (#21588) * Show name for badges without config * also for state label type --- src/data/lovelace/config/badge.ts | 1 + src/panels/lovelace/badges/hui-badge.ts | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/data/lovelace/config/badge.ts b/src/data/lovelace/config/badge.ts index b6b5d7c207..e3f92b1ac4 100644 --- a/src/data/lovelace/config/badge.ts +++ b/src/data/lovelace/config/badge.ts @@ -13,6 +13,7 @@ export const ensureBadgeConfig = ( return { type: "entity", entity: config, + display_type: "complete", }; } if ("type" in config && config.type) { diff --git a/src/panels/lovelace/badges/hui-badge.ts b/src/panels/lovelace/badges/hui-badge.ts index a6eee87ec2..bbcd083c55 100644 --- a/src/panels/lovelace/badges/hui-badge.ts +++ b/src/panels/lovelace/badges/hui-badge.ts @@ -58,7 +58,7 @@ export class HuiBadge extends ReactiveElement { private _updateElement(config: LovelaceBadgeConfig) { if (config.type === "state-label") { - config = { ...config, type: "entity" }; + config = { display_type: "complete", ...config, type: "entity" }; } if (!this._element) { return; @@ -70,7 +70,7 @@ export class HuiBadge extends ReactiveElement { private _loadElement(config: LovelaceBadgeConfig) { if (config.type === "state-label") { - config = { ...config, type: "entity" }; + config = { display_type: "complete", ...config, type: "entity" }; } this._element = createBadgeElement(config); this._elementConfig = config; From 4719775926384776f98bf2672b418a5f23b1b790 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 5 Aug 2024 17:14:10 +0200 Subject: [PATCH 4/6] Allow name in state content for badges (#21576) --- .../entity/ha-entity-state-content-picker.ts | 91 +++++++++++-------- .../ha-selector-ui-state-content.ts | 1 + src/data/selector.ts | 1 + .../lovelace/badges/hui-entity-badge.ts | 1 + src/panels/lovelace/cards/hui-tile-card.ts | 1 + .../hui-entity-badge-editor.ts | 4 +- src/state-display/state-display.ts | 5 + src/translations/en.json | 1 + 8 files changed, 66 insertions(+), 39 deletions(-) diff --git a/src/components/entity/ha-entity-state-content-picker.ts b/src/components/entity/ha-entity-state-content-picker.ts index b4e1001932..bdc75c9c3a 100644 --- a/src/components/entity/ha-entity-state-content-picker.ts +++ b/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) => { - 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.last_changed" - ), - value: "last_changed", - }, - { - label: this.hass.localize( - "ui.components.state-content-picker.last_updated" - ), - value: "last_updated", - }, - ...(domain - ? STATE_DISPLAY_SPECIAL_CONTENT.filter((content) => - STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[domain]?.includes(content) - ).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 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" + ), + value: "last_changed", + }, + { + label: this.hass.localize( + "ui.components.state-content-picker.last_updated" + ), + value: "last_updated", + }, + ...(domain + ? STATE_DISPLAY_SPECIAL_CONTENT.filter((content) => + STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[domain]?.includes(content) + ).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) ); diff --git a/src/components/ha-selector/ha-selector-ui-state-content.ts b/src/components/ha-selector/ha-selector-ui-state-content.ts index c0d521b939..179671e84f 100644 --- a/src/components/ha-selector/ha-selector-ui-state-content.ts +++ b/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} > `; } diff --git a/src/data/selector.ts b/src/data/selector.ts index c4b385b136..13aa16647e 100644 --- a/src/data/selector.ts +++ b/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; } diff --git a/src/panels/lovelace/badges/hui-entity-badge.ts b/src/panels/lovelace/badges/hui-entity-badge.ts index 05a6839da0..e448646ab0 100644 --- a/src/panels/lovelace/badges/hui-entity-badge.ts +++ b/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} > `; diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts index 19ece5430b..c015c22f3c 100644 --- a/src/panels/lovelace/cards/hui-tile-card.ts +++ b/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} > `; diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-badge-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-badge-editor.ts index d1000fbb5d..64944fbe2f 100644 --- a/src/panels/lovelace/editor/config-elements/hui-entity-badge-editor.ts +++ b/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", diff --git a/src/state-display/state-display.ts b/src/state-display/state-display.ts index a1042681a8..aaf54014d2 100644 --- a/src/state-display/state-display.ts +++ b/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` diff --git a/src/translations/en.json b/src/translations/en.json index 7524fc65c3..f6e588e775 100644 --- a/src/translations/en.json +++ b/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", From 5b7c20af33aea107a1dc2f617344e9cdd29c276c Mon Sep 17 00:00:00 2001 From: karwosts <32912880+karwosts@users.noreply.github.com> Date: Mon, 5 Aug 2024 08:15:39 -0700 Subject: [PATCH 5/6] fix broken perform-action translation in gauge card editor (#21589) --- .../lovelace/editor/config-elements/hui-gauge-card-editor.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts index b1db02d715..b2e6bd3543 100644 --- a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts @@ -23,7 +23,7 @@ import { baseLovelaceCardConfig } from "../structs/base-card-struct"; import { DEFAULT_MIN, DEFAULT_MAX } from "../../cards/hui-gauge-card"; import { UiAction } from "../../components/hui-action-editor"; -const TAP_ACTIONS: UiAction[] = ["navigate", "url", "call-service", "none"]; +const TAP_ACTIONS: UiAction[] = ["navigate", "url", "perform-action", "none"]; const gaugeSegmentStruct = object({ from: number(), From 94c28ea53475f5090a943ec4cef3326f0d1bc5e4 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 5 Aug 2024 17:16:24 +0200 Subject: [PATCH 6/6] Bumped version to 20240805.1 --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index fde7ccb12f..495a03d0fa 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "home-assistant-frontend" -version = "20240805.0" +version = "20240805.1" license = {text = "Apache-2.0"} description = "The Home Assistant frontend" readme = "README.md"