Initial commit

src/main.js

@@ -0,0 +1,80 @@
+import {LitElement, html, css } from "card-tools/src/lit-element";
+import {subscribeRenderTemplate} from "card-tools/src/templates";
+
+class TemplateEntityRow extends LitElement {
+
+  static get properties() {
+    return {
+      hass: {},
+      _config: {},
+      state: {},
+    };
+  }
+
+  setConfig(config) {
+    this._config = config;
+    this.state = {
+      icon: "",
+      active: "",
+      name: "",
+      secondary: "",
+      state: "",
+      ...config,
+    };
+
+    for(const k of ["icon", "active", "name", "secondary", "state", "condition"]) {
+      if(config[k]
+        && (String(config[k]).includes("{%") || String(config[k]).includes("{{"))
+        ) {
+        subscribeRenderTemplate(null, (res) => {
+          this.state[k] = res;
+          this.requestUpdate();
+        }, {
+          template: config[k],
+          entity_ids: config.entity_ids,
+        });
+      }
+    }
+  }
+
+  render() {
+    if (this._config.condition && String(this.state.condition).toLowerCase() !== "true")
+      return html``;
+    const active = String(this.state.active).toLowerCase();
+    return html`
+      <div id="wrapper">
+        <ha-icon
+          .icon=${this.state.icon}
+          style="
+            color: ${active === "true"
+              ? "var(--paper-item-icon-active-color)"
+              : "var(--paper-item-icon-color)"
+              };
+            "
+        ></ha-icon>
+        <div class="flex">
+          <div
+            class="info"
+          >
+            ${this.state.name}
+            <div class="secondary">
+              ${this.state.secondary}
+            </div>
+          </div>
+          ${this.state.state}
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    const HuiGenericEntityRow = customElements.get('hui-generic-entity-row');
+    let style = HuiGenericEntityRow.styles;
+    style.cssText = style.cssText
+      .replace(":host", "#wrapper")
+      .replace("state-badge", "ha-icon");
+    return style;
+  }
+}
+
+customElements.define("template-entity-row", TemplateEntityRow);