Allow state-label-element to show attributes (#4953)

* Allow state-label-element to show attributes

Add an additional (optional) parameter to the state-label element,
so that instead of showing the state, an attribute can be shown instead.

Can be used to e.g. add a climate entity to the floorplan,
but show the current temperature instead of the desired one.

* Improve style

Put the most frequent case as default in the ternary

* Remove unneeded variables

Use the _config.attribute directly instead of having a local temporary
Also remove superfluous checks for "!stateObj" (was already checked before)

src/panels/lovelace/elements/hui-state-label-element.ts

@@ -58,6 +58,23 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement {
       `;
     }
 
+    if (
+      this._config.attribute &&
+      !stateObj.attributes[this._config.attribute]
+    ) {
+      return html`
+        <hui-warning-element
+          label=${this.hass.localize(
+            "ui.panel.lovelace.warning.attribute_not_found",
+            "attribute",
+            this._config.attribute,
+            "entity",
+            this._config.entity
+          )}
+        ></hui-warning-element>
+      `;
+    }
+
     return html`
       <div
         .title="${computeTooltip(this.hass, this._config)}"
@@ -70,13 +87,13 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement {
           hasAction(this._config.tap_action) ? "0" : undefined
         )}
       >
-        ${this._config.prefix}${stateObj
+        ${this._config.prefix}${!this._config.attribute
           ? computeStateDisplay(
               this.hass.localize,
               stateObj,
               this.hass.language
             )
-          : "-"}${this._config.suffix}
+          : stateObj.attributes[this._config.attribute]}${this._config.suffix}
       </div>
     `;
   }

src/panels/lovelace/elements/types.ts

@@ -64,6 +64,7 @@ export interface StateIconElementConfig extends LovelaceElementConfig {
 
 export interface StateLabelElementConfig extends LovelaceElementConfig {
   entity: string;
+  attribute?: string;
   prefix?: string;
   suffix?: string;
   tap_action?: ActionConfig;

src/translations/en.json

@@ -2128,6 +2128,7 @@
           }
         },
         "warning": {
+          "attribute_not_found": "Attribute {attribute} not available in: {entity}",
           "entity_not_found": "Entity not available: {entity}",
           "entity_non_numeric": "Entity is non-numeric: {entity}"
         },