diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts
index 0cae348c7701..419b5bdfc63d 100644
--- a/src/panels/lovelace/cards/hui-tile-card.ts
+++ b/src/panels/lovelace/cards/hui-tile-card.ts
@@ -195,36 +195,6 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
}
);
- private _defaultStateContent = memoizeOne(
- (domain: string, active: boolean): string | string[] => {
- if (domain === "light" && active) {
- return "brightness";
- }
- if (domain === "fan" && active) {
- return "percentage";
- }
- if (domain === "cover" && active) {
- return ["state", "current_position"];
- }
- if (domain === "valve" && active) {
- return ["state", "current_position"];
- }
- if (domain === "humidifier") {
- return ["state", "current_humidity"];
- }
- if (domain === "climate") {
- return ["state", "current_temperature"];
- }
- if (domain === "update") {
- return "install_status";
- }
- if (domain === "timer") {
- return "reamining_time";
- }
- return "state";
- }
- );
-
get hasCardAction() {
return (
!this._config?.tap_action ||
@@ -281,8 +251,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
`;
diff --git a/src/state-display/state-display.ts b/src/state-display/state-display.ts
index 1fc07d0dd36c..a1042681a8a2 100644
--- a/src/state-display/state-display.ts
+++ b/src/state-display/state-display.ts
@@ -17,12 +17,34 @@ export const STATE_DISPLAY_SPECIAL_CONTENT = [
"install_status",
] as const;
+// Special handling of state attributes per domain
export const STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS: Record<
- (typeof STATE_DISPLAY_SPECIAL_CONTENT)[number],
- string[]
+ string,
+ (typeof STATE_DISPLAY_SPECIAL_CONTENT)[number][]
> = {
- remaining_time: ["timer"],
- install_status: ["update"],
+ timer: ["remaining_time"],
+ update: ["install_status"],
+};
+
+// Attributes that should not be shown if their value is 0 */
+export const HIDDEN_ZERO_ATTRIBUTES_DOMAINS: Record = {
+ valve: ["current_position"],
+ cover: ["current_position"],
+ fan: ["percentage"],
+ light: ["brightness"],
+};
+
+type StateContent = string | string[];
+
+export const DEFAULT_STATE_CONTENT_DOMAINS: Record = {
+ climate: ["state", "current_temperature"],
+ cover: ["state", "current_position"],
+ fan: "percentage",
+ humidifier: ["state", "current_humidity"],
+ light: "brightness",
+ timer: "remaining_time",
+ update: "install_status",
+ valve: ["state", "current_position"],
};
@customElement("state-display")
@@ -31,12 +53,17 @@ class StateDisplay extends LitElement {
@property({ attribute: false }) public stateObj!: HassEntity;
- @property({ attribute: false }) public content: string | string[] = "state";
+ @property({ attribute: false }) public content?: StateContent;
protected createRenderRoot() {
return this;
}
+ private get _content(): StateContent {
+ const domain = computeStateDomain(this.stateObj);
+ return this.content ?? DEFAULT_STATE_CONTENT_DOMAINS[domain] ?? "state";
+ }
+
private _computeContent(
content: string
): TemplateResult<1> | string | undefined {
@@ -88,7 +115,10 @@ class StateDisplay extends LitElement {
`;
}
- if (STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[content]?.includes(domain)) {
+ const specialContent = (STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[domain] ??
+ []) as string[];
+
+ if (specialContent.includes(content)) {
if (content === "install_status") {
return html`
${computeUpdateStateDisplay(stateObj as UpdateEntity, this.hass!)}
@@ -105,7 +135,12 @@ class StateDisplay extends LitElement {
}
}
- if (stateObj.attributes[content] == null) {
+ const attribute = stateObj.attributes[content];
+
+ if (
+ attribute == null ||
+ (HIDDEN_ZERO_ATTRIBUTES_DOMAINS[domain]?.includes(content) && !attribute)
+ ) {
return undefined;
}
return this.hass!.formatEntityAttributeValue(stateObj, content);
@@ -113,7 +148,7 @@ class StateDisplay extends LitElement {
protected render() {
const stateObj = this.stateObj;
- const contents = ensureArray(this.content);
+ const contents = ensureArray(this._content);
const values = contents
.map((content) => this._computeContent(content))