Add option to clear child cards

Note: does not apply to children of child-cards
Alia5 · Sep 30, 2024 · 9be454a · 9be454a
1 parent b215486
commit 9be454a
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -45,6 +45,7 @@ Yaml:
 | type                      | string   | **Required**  | `custom:expander-card` | Type of the card.                                              |
 | title                     | string   | _Expander_    | *                      | Title (Not displayed if using Title-Card)                      |
 | clear                     | boolean  | _false_       | true\|false            | Remove Background                                              |
+| clear-children            | boolean  | _false_       | true\|false            | Remove Backgrounds/Borders of child cards                      |
 | expanded                  | boolean  | _false_       | true\|false            | Start expanded                                                 |
 | expand-id                 | string   | **optional**  | string                 | Unique ID to use for JS LocalStorage. Will save expanded state |
 | button-background         | string   | _transparent_ | css-color              | Background color of expand button                              |

diff --git a/src/Card.svelte b/src/Card.svelte
@@ -24,8 +24,9 @@ limitations under the License.
     const {
         type = 'div',
         config,
-        hass
-    }: { type: string; config: LovelaceCardConfig; hass: HomeAssistant } = $props();
+        hass,
+        clearChild = false
+    }: { type: string; config: LovelaceCardConfig; hass: HomeAssistant; clearChild: boolean } = $props();
 
     let container = $state<LovelaceCard>();
     let loading = $state(true);
@@ -47,6 +48,16 @@ limitations under the License.
         }
         container.replaceWith(el);
         container = el;
+        if (clearChild) {
+            const shadowStyle = document.createElement('style');
+            shadowStyle.innerHTML = `
+                ha-card {
+                    background-color: transparent !important;
+                    border-style: none !important;
+                }
+            `;
+            el.shadowRoot?.appendChild(shadowStyle);
+        }
         loading = false;
     });
 </script>

diff --git a/src/ExpanderCard.svelte b/src/ExpanderCard.svelte
@@ -7,6 +7,7 @@
         'gap': '0.6em',
         'padding': '1em',
         'clear': false,
+        'clear-children': false,
         'title': 'Expander',
         'overlay-margin': '2em',
         'child-padding': '0.5em',
@@ -91,7 +92,11 @@
     {#if config['title-card']}
         <div class={`title-card-header${config['title-card-button-overlay'] ? '-overlay' : ''}`}>
             <div class="title-card-container" style="--title-padding:{config['title-card-padding']}">
-                <Card hass={hass} config={config['title-card']} type={config['title-card'].type} />
+                <Card
+                    hass={hass}
+                    config={config['title-card']}
+                    type={config['title-card'].type}
+                    clearChild={config['clear-children'] || false} />
             </div>
             <button
             aria-label="Toggle"
@@ -141,7 +146,11 @@
                 class="children-container"
             >
                 {#each config.cards as card (card)}
-                        <Card hass={hass} config={card} type={card.type} />
+                        <Card
+                            hass={hass}
+                            config={card}
+                            type={card.type}
+                            clearChild={config['clear-children'] || false} />
                 {/each}
             </div>
         </div>
@@ -177,6 +186,18 @@
         background-color: transparent;
         border-style: none;
     }
+    .clear-children {
+        & :global(::slotted(ha-card)) {
+            background-color: transparent !important;
+            border-style: none !important;
+        }
+    }
+
+    :global(::slotted(ha-card)) {
+        background-color: transparent !important;
+        border-style: none !important;
+    }
+
     .title-card-header {
         display: flex;
         align-items: center;

diff --git a/src/ExpanderCardEditor.svelte b/src/ExpanderCardEditor.svelte
@@ -64,6 +64,9 @@ limitations under the License.
         'clear': ['boolean', {
             label: 'Remove background'
         }],
+        'clear-children': ['boolean', {
+            label: 'Remove child card background/borders'
+        }],
         'expanded': ['boolean', {
             label: 'Start expanded (Always expanded in editor)'
         }],

diff --git a/src/configtype.ts b/src/configtype.ts
@@ -14,6 +14,7 @@ import type { LovelaceCardConfig } from 'custom-card-helpers';
 
 export interface ExpanderConfig {
     clear?: boolean;
+    'clear-children'?: boolean;
     cards?: { type: string }[];
     gap: string;
     padding: string;