From 6eb38ec5eb8bc2eeae81b610a5163077f99a6335 Mon Sep 17 00:00:00 2001
From: Marius <33354141+Mariusthvdb@users.noreply.github.com>
Date: Fri, 12 Jan 2024 07:30:22 +0100
Subject: [PATCH] add hooks for entity and button card (#133)

so custom-ui also attaches to those cards.

thank you @elchininet
---
 custom-ui.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/custom-ui.js b/custom-ui.js
index ffccd6e..c894031 100644
--- a/custom-ui.js
+++ b/custom-ui.js
@@ -1,5 +1,5 @@
 const Name = "Custom-ui";
-const Version = "20230908";
+const Version = "20240111";
 const Description = "add templates and icon_color to UI";
 const Url = "https://github.com/Mariusthvdb/custom-ui";
 console.info(
@@ -152,6 +152,55 @@ window.customUI = {
       };
     });
   },
+  
+  // Install a hook to update the entity card with custom styling
+  installEntityCardStylingHook() {
+    customElements.whenDefined("hui-entity-card").then(() => {
+      const entityCard = customElements.get("hui-entity-card");
+      if (!entityCard) return;
+      if (entityCard.prototype?.updated) {
+        const originalUpdated = entityCard.prototype.updated;
+        entityCard.prototype.updated = function customUpdated(changedProps) {
+          if (
+            !changedProps.has('_config') ||
+            !changedProps.has('hass')
+          ) {
+            return;
+          }
+          const { _config, hass } = this;
+          const entityId = _config?.entity;
+          const states = hass?.states;
+          const iconColor = states?.[entityId]?.attributes?.icon_color;
+          if (iconColor) {
+            this.style?.setProperty('--paper-item-icon-color', iconColor);
+          }
+          originalUpdated.call(this, changedProps);
+        }
+      }
+    });
+  },
+
+// Install a hook to update the button card with custom styling
+  installButtonCardStylingHook() {
+    customElements.whenDefined("hui-button-card").then(() => {
+        const buttonCard = customElements.get("hui-button-card");
+        if (!buttonCard) return;
+        if (buttonCard.prototype?.updated) {
+            const originalUpdated = buttonCard.prototype.updated;
+            buttonCard.prototype.updated = function customUpdated(changedProps) {
+                if (!changedProps.has('_stateObj')) {
+                    return;
+                }
+                const { _stateObj } = this;
+                if (_stateObj.attributes?.icon_color) {
+                    this.style?.setProperty('--icon-primary-color', _stateObj.attributes.icon_color);
+                }
+                originalUpdated.call(this, changedProps);
+            }
+        }
+    });
+  },
+  
   installStateBadge() {
     customElements.whenDefined("state-badge").then(() => {
       const stateBadge = customElements.get("state-badge");
@@ -180,6 +229,8 @@ window.customUI = {
     if (window.customUI.classInitDone) return;
     window.customUI.classInitDone = true;
     window.customUI.installStatesHook();
+    window.customUI.installEntityCardStylingHook();
+    window.customUI.installButtonCardStylingHook();
     window.customUI.installStateBadge();
   },
   init() {