Add entity row that displays static text (#5516)

* Add entity row that displays text

* Remove hass type

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

@@ -41,6 +41,7 @@ const LAZY_LOAD_TYPES = {
   cast: () => import("../special-rows/hui-cast-row"),
   buttons: () => import("../special-rows/hui-buttons-row"),
   attribute: () => import("../special-rows/hui-attribute-row"),
+  text: () => import("../special-rows/hui-text-row"),
 };
 const DOMAIN_TO_ELEMENT_TYPE = {
   _domain_not_found: "text",

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

@@ -29,6 +29,12 @@ export interface WeblinkConfig {
   icon?: string;
   url: string;
 }
+export interface TextConfig {
+  type: "text";
+  name: string;
+  icon?: string;
+  text: string;
+}
 export interface CallServiceConfig extends EntityConfig {
   type: "call-service";
   service: string;
@@ -65,7 +71,8 @@ export type LovelaceRowConfig =
   | ButtonRowConfig
   | ButtonsRowConfig
   | ConditionalRowConfig
-  | AttributeRowConfig;
+  | AttributeRowConfig
+  | TextConfig;
 
 export interface LovelaceRow extends HTMLElement {
   hass?: HomeAssistant;

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

@@ -0,0 +1,69 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
+} from "lit-element";
+
+import { LovelaceRow, TextConfig } from "../entity-rows/types";
+
+import "../../../components/ha-icon";
+
+@customElement("hui-text-row")
+class HuiTextRow extends LitElement implements LovelaceRow {
+  @property() private _config?: TextConfig;
+
+  public setConfig(config: TextConfig): void {
+    if (!config || !config.name || !config.text) {
+      throw new Error("Invalid Configuration: 'name' and 'text' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      <ha-icon .icon="${this._config.icon}"></ha-icon>
+      <div class="name">${this._config.name}</div>
+      <div class="text">${this._config.text}</div>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      ha-icon {
+        padding: 8px;
+        color: var(--paper-item-icon-color);
+      }
+      div {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .name {
+        margin-left: 16px;
+      }
+      .text {
+        text-align: right;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-text-row": HuiTextRow;
+  }
+}