✨ add attribute row (#4723)

* ✨ add attribute row

* accidental import

* Capitalize

* cleanup after rebase

* Update create-row-element.ts

* address comments

* address comments

* Update en.json

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/lovelace/create-element/create-row-element.ts

@@ -4,6 +4,7 @@ import "../entity-rows/hui-script-entity-row";
 import "../entity-rows/hui-sensor-entity-row";
 import "../entity-rows/hui-text-entity-row";
 import "../entity-rows/hui-toggle-entity-row";
+import "../special-rows/hui-attribute-row";
 import "../special-rows/hui-call-service-row";
 import { EntityConfig } from "../entity-rows/types";
 import { createLovelaceElement } from "./create-element-base";
@@ -37,6 +38,7 @@ const LAZY_LOAD_TYPES = {
   weblink: () => import("../special-rows/hui-weblink-row"),
   cast: () => import("../special-rows/hui-cast-row"),
   buttons: () => import("../special-rows/hui-buttons-row"),
+  attribute: () => import("../special-rows/hui-attribute-row"),
 };
 const DOMAIN_TO_ELEMENT_TYPE = {
   _domain_not_found: "text",

src/panels/lovelace/entity-rows/types.ts

@@ -55,7 +55,8 @@ export type LovelaceRowConfig =
   | CallServiceConfig
   | CastConfig
   | ButtonsRowConfig
-  | ConditionalRowConfig;
+  | ConditionalRowConfig
+  | AttributeRowConfig;
 
 export interface LovelaceRow extends HTMLElement {
   hass?: HomeAssistant;
@@ -66,3 +67,8 @@ export interface ConditionalRowConfig extends EntityConfig {
   row: EntityConfig;
   conditions: Condition[];
 }
+export interface AttributeRowConfig extends EntityConfig {
+  attribute: string;
+  prefix?: string;
+  suffix?: string;
+}

src/panels/lovelace/special-rows/hui-attribute-row.ts

@@ -0,0 +1,83 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  CSSResult,
+  css,
+  customElement,
+  PropertyValues,
+} from "lit-element";
+
+import "../components/hui-generic-entity-row";
+import "../components/hui-warning";
+
+import { HomeAssistant } from "../../../types";
+import { LovelaceRow, AttributeRowConfig } from "../entity-rows/types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
+
+@customElement("hui-attribute-row")
+class HuiAttributeRow extends LitElement implements LovelaceRow {
+  @property() public hass?: HomeAssistant;
+  @property() private _config?: AttributeRowConfig;
+
+  public setConfig(config: AttributeRowConfig): void {
+    if (!config) {
+      throw new Error("Configuration error");
+    }
+    if (!config.entity) {
+      throw new Error("Entity not defined");
+    }
+    if (!config.attribute) {
+      throw new Error("Attribute not defined");
+    }
+    this._config = config;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this.hass) {
+      return html``;
+    }
+
+    const stateObj = this.hass.states[this._config.entity];
+    const attribute = stateObj.attributes[this._config.attribute];
+
+    if (!stateObj) {
+      return html`
+        <hui-warning
+          >${this.hass.localize(
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
+      `;
+    }
+
+    return html`
+      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
+        <div>
+          ${this._config.prefix} ${attribute || "-"} ${this._config.suffix}
+        </div>
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      div {
+        text-align: right;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-attribute-row": HuiAttributeRow;
+  }
+}