Add entities card tap_action

src/apply-style.js

@@ -0,0 +1,51 @@
+export const applyStyle = async function(root, style, params, debug) {
+
+  const debugPrint = function(str){
+    if(!debug) return;
+    if(typeof str === "string")
+      console.log(' '.repeat(2*(debug-1)) + str);
+    else
+      console.log(str);
+  }
+
+  if(!root || !style) return;
+
+  if(root.updateComplete)
+    await root.updateComplete;
+
+  if(typeof style === "string") {
+    const oldStyleEl = root.querySelector("card-mod");
+    if(oldStyleEl) {
+      oldStyleEl.update();
+      return;
+    }
+
+    // Add new style tag to the root element
+    const styleEl = document.createElement('card-mod');
+    styleEl.template = {
+      template: style,
+      variables: params.variables,
+      entity_ids: params.entity_ids,
+    };
+    root.appendChild(styleEl);
+    debugPrint("Applied styles to:");
+    debugPrint(root);
+  } else {
+    Object.keys(style).forEach((k) => {
+      if(k === ".") {
+        debugPrint(`Stepping into root of ${root.tagName}`)
+        return applyStyle(root, style[k], params, debug?debug+1:0);
+      } else if(k === "$") {
+        debugPrint(`Stepping into ShadowRoot of ${root.tagName}`)
+        return applyStyle(root.shadowRoot, style[k], params, debug?debug+1:0);
+      } else {
+        debugPrint(`Searching for: "${k}". ${root.querySelectorAll(k).length} matches.`);
+        root.querySelectorAll(`${k}`).forEach((el) => {
+          debugPrint(`Stepping into ${el.tagName}`)
+          applyStyle(el, style[k], params, debug?debug+1:0);
+        });
+        return;
+      }
+    });
+  }
+}