Allow combining card and row styles

thomasloven · Feb 27, 2021 · a99db48 · a99db48
1 parent b1be78d
commit a99db48
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 10 deletions.
diff --git a/card-mod.js b/card-mod.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "card-mod",
   "private": true,
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "",
   "scripts": {
     "build": "rollup -c",

diff --git a/src/card-mod.ts b/src/card-mod.ts
@@ -71,7 +71,7 @@ export class CardMod extends LitElement {
           this._styleChildren.add(
             await applyToElement(
               el,
-              undefined,
+              `${this.type}-child`,
               value,
               this.variables,
               null,

diff --git a/src/helpers.ts b/src/helpers.ts
@@ -5,7 +5,7 @@ import { CardMod } from "./card-mod";
 interface ModdedElement extends HTMLElement {
   updateComplete?: Promise<void>;
   modElement?: ModdedElement;
-  _cardMod?: CardMod;
+  _cardMod?: CardMod[];
 }
 
 export type Styles = string | Record<string, any>;
@@ -28,8 +28,21 @@ export async function applyToElement(
     await customElements.whenDefined(el.localName);
   if (el.updateComplete) await el.updateComplete;
 
-  const cardMod = (el._cardMod =
-    el._cardMod || (document.createElement("card-mod") as CardMod));
+  if (el._cardMod === undefined) {
+    el._cardMod = [];
+  }
+  let cardMod: CardMod;
+  for (const cm of el._cardMod) {
+    if (cm.type === type) {
+      cardMod = cm;
+      break;
+    }
+  }
+  if (!cardMod) {
+    cardMod = document.createElement("card-mod") as CardMod;
+    cardMod.type = type;
+    el._cardMod.push(cardMod);
+  }
 
   const target = el.modElement
     ? el.modElement
@@ -38,9 +51,6 @@ export async function applyToElement(
     : el;
   target.appendChild(cardMod as Node);
 
-  if (el.updateComplete) await el.updateComplete;
-
-  cardMod.type = type;
   cardMod.variables = variables;
   cardMod.styles = styles;
 

diff --git a/test/views/5_dom_navigation.yaml b/test/views/5_dom_navigation.yaml
@@ -117,3 +117,39 @@ cards:
                 }
 
         entity: alarm_control_panel.alarm
+  - type: vertical-stack
+    cards:
+      - <<: *desc
+        content: |
+          ## Overriding DOM navigation
+          First two icons red
+          Third icon green
+      - type: entities
+        entities:
+          - entity: sun.sun
+          - entity: sun.sun
+          - entity: sun.sun
+            card_mod:
+              style:
+                hui-generic-entity-row:
+                  $:
+                    state-badge:
+                      $:
+                        ha-icon:
+                          $: |
+                            ha-svg-icon {
+                              color: green !important;
+                            }
+        card_mod:
+          style:
+            hui-text-entity-row:
+              $:
+                hui-generic-entity-row:
+                  $:
+                    state-badge:
+                      $:
+                        ha-icon:
+                          $: |
+                            ha-svg-icon {
+                              color: red;
+                            }