Support multiple CSS classes (#262)

thomasloven · Nov 22, 2023 · 1c802ed · 1c802ed
1 parent 685a1d2
commit 1c802ed
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 5 deletions.
diff --git a/src/patch/ha-card.ts b/src/patch/ha-card.ts
@@ -11,7 +11,12 @@ customElements.whenDefined("ha-card").then(() => {
 
     const config = findConfig(this);
 
-    if (config?.card_mod?.class) this.classList.add(config.card_mod.class);
+    if (config?.card_mod?.class)
+      this.classList.add(
+        ...(Array.isArray(config.card_mod.class)
+          ? config.card_mod.class
+          : config.card_mod.class.split(" "))
+      );
     if (config?.type)
       this.classList.add(`type-${config.type.replace(":", "-")}`);
 

diff --git a/src/patch/hui-entities-card.ts b/src/patch/hui-entities-card.ts
@@ -14,7 +14,12 @@ customElements.whenDefined("hui-entities-card").then(() => {
     if (!row) return retval;
     if (config?.type === "custom:mod-card") return retval;
 
-    if (config?.card_mod?.class) row.classList.add(config.card_mod.class);
+    if (config?.card_mod?.class)
+      row.classList.add(
+        ...(Array.isArray(config.card_mod.class)
+          ? config.card_mod.class
+          : config.card_mod.class.split(" "))
+      );
     if (config?.type)
       row.classList.add(`type-${config.type.replace(":", "-")}`);
 

diff --git a/src/patch/hui-glance-card.ts b/src/patch/hui-glance-card.ts
@@ -38,7 +38,12 @@ customElements.whenDefined("hui-glance-card").then(() => {
       }
 
       const config = e.config || e.entityConf;
-      if (config?.card_mod?.class) e.classList.add(config.card_mod.class);
+      if (config?.card_mod?.class)
+        e.classList.add(
+          ...(Array.isArray(config.card_mod.class)
+            ? config.card_mod.class
+            : config.card_mod.class.split(" "))
+        );
 
       applyToElement(
         e,

diff --git a/src/patch/hui-picture-elements-card.ts b/src/patch/hui-picture-elements-card.ts
@@ -13,7 +13,12 @@ customElements.whenDefined("hui-picture-elements-card").then(() => {
 
     for (const [i, el] of this._elements.entries()) {
       const config = this._config.elements[i];
-      if (config?.card_mod?.class) el.classList.add(config.card_mod.class);
+      if (config?.card_mod?.class)
+        el.classList.add(
+          ...(Array.isArray(config.card_mod.class)
+            ? config.card_mod.class
+            : config.card_mod.class.split(" "))
+        );
       if (config?.type)
         el.classList.add(`type-${config.type.replace(":", "-")}`);
       applyToElement(el, "element", config?.card_mod?.style, { config });

diff --git a/src/patch/hui-state-label-badge.ts b/src/patch/hui-state-label-badge.ts
@@ -11,7 +11,12 @@ customElements.whenDefined("hui-state-label-badge").then(() => {
 
     const config = this._config;
 
-    if (config?.card_mod?.class) this.classList.add(config.card_mod.class);
+    if (config?.card_mod?.class)
+      this.classList.add(
+        ...(Array.isArray(config.card_mod.class)
+          ? config.card_mod.class
+          : config.card_mod.class.split(" "))
+      );
 
     applyToElement(
       this,