add hooks for entity and button card (#133)

so custom-ui also attaches to those cards.

thank you @elchininet

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() {