Quick patch to make things work again

thomasloven · Mar 27, 2023 · 35a4b4a · 35a4b4a
1 parent e3da7ba
commit 35a4b4a
Show file tree

Hide file tree

Showing 7 changed files with 872 additions and 463 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,8 @@
 {
   "name": "template-entity-row",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.3.1",
+  "type": "module",
   "description": "",
   "scripts": {
     "build": "rollup -c",
@@ -16,18 +17,18 @@
   "author": "Thomas Lovén",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.13.1",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.0",
-    "rollup": "^2.39.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "typescript": "^4.1.5"
+    "@babel/core": "^7.21.3",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.4.0",
+    "rollup": "^3.20.2",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "tslib": "^2.5.0",
+    "typescript": "^5.0.2"
   },
   "dependencies": {
     "card-tools": "github:thomasloven/lovelace-card-tools",
-    "lit": "^2.0.0-rc.2",
-    "tslib": "^2.1.0"
+    "lit": "^2.7.0"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,7 +1,7 @@
 import nodeResolve from "@rollup/plugin-node-resolve";
 import json from "@rollup/plugin-json";
 import typescript from "rollup-plugin-typescript2";
-import { terser } from "rollup-plugin-terser";
+import terser from "@rollup/plugin-terser";
 import babel from "@rollup/plugin-babel";
 
 const dev = process.env.ROLLUP_WATCH;

diff --git a/src/main.ts b/src/main.ts
@@ -28,6 +28,13 @@ const OPTIONS = [
 
 const LOCALIZE_PATTERN = /_\([^)]*\)/g;
 
+const translate = (hass, text) => {
+  return text.replace(
+    LOCALIZE_PATTERN,
+    (key) => hass.localize(key.substring(2, key.length - 1)) || key
+  );
+};
+
 class TemplateEntityRow extends LitElement {
   @property() _config;
   @property() hass;
@@ -42,22 +49,20 @@ class TemplateEntityRow extends LitElement {
     if (!entity_ids && this._config.entity && !hasTemplate(this._config.entity))
       entity_ids = [this._config.entity];
     for (const k of OPTIONS) {
-      if (this._config[k] && hasTemplate(this._config[k])) {
+      if (!this._config[k]) continue;
+      if (hasTemplate(this._config[k])) {
         bind_template(
           (res) => {
             const state = { ...this.config };
-            if (typeof res === "string")
-              res = res.replace(
-                LOCALIZE_PATTERN,
-                (key) =>
-                  hass().localize(key.substring(2, key.length - 1)) || key
-              );
+            if (typeof res === "string") res = translate(hass(), res);
             state[k] = res;
             this.config = state;
           },
           this._config[k],
           { config }
         );
+      } else if (typeof this._config[k] === "string") {
+        this.config[k] = translate(hass(), this._config[k]);
       }
     }
   }
@@ -86,6 +91,7 @@ class TemplateEntityRow extends LitElement {
     const entity = (base && JSON.parse(JSON.stringify(base))) || {
       entity_id: "light.",
       attributes: { icon: "no:icon" },
+      state: "off",
     };
 
     const icon =
@@ -100,33 +106,32 @@ class TemplateEntityRow extends LitElement {
     const secondary = this.config.secondary;
     const state =
       this.config.state !== undefined ? this.config.state : entity?.state;
-    const active = this.config.active;
-    if (active !== undefined) {
+    const active = this.config.active ?? false;
+    if (active) {
       entity.attributes.brightness = 255;
+      entity.state = "on";
     }
 
     const thisStyles = window.getComputedStyle(this);
     const color =
-      this.config.color !== undefined || active !== undefined
+      this.config.color !== undefined || active
         ? this.config.color ??
-          (active !== undefined && active
-            ? thisStyles.getPropertyValue("--paper-item-icon-active-color")
+          (active
+            ? thisStyles.getPropertyValue("--state-active-color")
             : thisStyles.getPropertyValue("--paper-item-icon-color"))
         : undefined;
+
+    const hidden =
+      this.config.condition !== undefined &&
+      String(this.config.condition).toLowerCase() !== "true";
     return html`
-      <div
-        id="wrapper"
-        class="${this.config.condition !== undefined &&
-        String(this.config.condition).toLowerCase() !== "true"
-          ? "hidden"
-          : ""}"
-      >
+      <div id="wrapper" class="${hidden ? "hidden" : ""}">
         <state-badge
           .hass=${this.hass}
           .stateObj=${entity}
           @action=${this._actionHandler}
           style="${color
-            ? `--paper-item-icon-color: ${color}; --paper-item-icon-active-color: ${color};`
+            ? `--paper-item-icon-color: ${color}; --state-active-color: ${color}; --state-light-active-color: ${color}`
             : ``}"
           .overrideIcon=${icon}
           .overrideImage=${image}
@@ -154,7 +159,7 @@ class TemplateEntityRow extends LitElement {
 
   static get styles() {
     return [
-      customElements.get("hui-generic-entity-row").styles,
+      (customElements.get("hui-generic-entity-row") as any)?.styles,
       css`
         :host {
           display: inline;

diff --git a/template-entity-row.js b/template-entity-row.js
diff --git a/test/lovelace.yaml b/test/lovelace.yaml
@@ -150,8 +150,8 @@ views:
         title: Localize
         entities:
           - type: custom:template-entity-row
-            name: "State is: _(component.binary_sensor.state.motion.on)"
-            state: '{{ "_(component.binary_sensor.state.motion.on)" }}'
+            name: "State is: _(ui.card.update.installing)"
+            state: '{{ "_(ui.card.update.installing)" }}'
 
       - type: entities
         title: Demo
@@ -195,3 +195,16 @@ views:
               }
             double_tap_action:
               action: toggle
+            hold_action:
+              action: url
+              url_path: >
+                {{state_attr(config.entity,'latest_release_url')}}
+
+      - type: entities
+        entities:
+          - entity: light.bed_light
+            type: custom:template-entity-row
+          - entity: light.ceiling_lights
+            type: custom:template-entity-row
+          - entity: light.kitchen_lights
+            type: custom:template-entity-row
diff --git a/tsconfig.json b/tsconfig.json
@@ -4,7 +4,9 @@
       "moduleResolution": "node",
       "resolveJsonModule": true,
       "allowSyntheticDefaultImports": true,
-      "experimentalDecorators": true
+      "experimentalDecorators": true,
+      "paths": {
+        "tslib": ["./node_modules/tslib/tslib.d.ts"]
+      }
     }
   }
-