Hide when child is hidden (conditional-card)

Author: RomRider

.devcontainer/ui-lovelace.yaml

@@ -10,8 +10,8 @@ decluttering_templates:
       - icon: fire
     card:
       type: button
-      name: "[[name]]"
-      icon: "mdi:[[icon]]"
+      name: '[[name]]'
+      icon: 'mdi:[[icon]]'
   large_divider:
     default:
       - opacity: 0.25
@@ -21,20 +21,30 @@ decluttering_templates:
         background-color: var(--secondary-text-color)
         height: 1px
         margin: 15px auto
-        opacity: "[[opacity]]"
+        opacity: '[[opacity]]'
   demo_icon:
     element:
       type: icon
       icon: mdi:alert-circle
       title: Problem detected!
-      entity: "[[entity]]"
+      entity: '[[entity]]'
       tap_action:
         action: more-info
       style:
         right: 50%
         top: 50%
         color: var(--google-red-500)
         filter: drop-shadow(black 0 0 1px)
+  test_hidden:
+    card:
+      type: conditional
+      conditions:
+        - entity: light.bed_light
+          state: 'on'
+      card:
+        type: entities
+        entities:
+          - sun.sun
 
 views:
   - cards:
@@ -44,7 +54,7 @@ views:
           - name: This is a test
       - type: entities
         entities:
-          - sun.sun
+          - light.bed_light
           - type: custom:decluttering-card
             template: large_divider
           - sun.sun
@@ -55,3 +65,11 @@ views:
             template: demo_icon
             variables:
               - entity: sun.sun
+      - type: horizontal-stack
+        cards:
+          - type: custom:decluttering-card
+            template: my_first_template
+            variables:
+              - name: Full width when light Off
+          - type: custom:decluttering-card
+            template: test_hidden

src/decluttering-card.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, customElement, property, TemplateResult } from 'lit-element';
+import { LitElement, html, customElement, property, TemplateResult, css, CSSResult } from 'lit-element';
 import { HomeAssistant, getLovelace, createThing, LovelaceCardConfig, LovelaceCard } from 'custom-card-helpers';
 import { DeclutteringCardConfig, TemplateConfig } from './types';
 import deepReplace from './deep-replace';
@@ -30,6 +30,24 @@ class DeclutteringCard extends LitElement {
     }
   }
 
+  static get styles(): CSSResult {
+    return css`
+      :host(.child-card-hidden) {
+        display: none;
+      }
+    `;
+  }
+
+  protected updated(): void {
+    this.updateComplete.then(() => {
+      if (this._card?.style.display === 'none') {
+        this.className = 'child-card-hidden';
+      } else if (this.className === 'child-card-hidden') {
+        this.className = '';
+      }
+    });
+  }
+
   public setConfig(config: DeclutteringCardConfig): void {
     if (!config.template) {
       throw new Error('Missing template object in your config');
@@ -91,6 +109,7 @@ class DeclutteringCard extends LitElement {
       },
       { once: true },
     );
+    element.id = 'declutter-child';
     return element;
   }
 
@@ -101,6 +120,7 @@ class DeclutteringCard extends LitElement {
   ): Promise<void> {
     const newCard = await this._createCard(config, type);
     element.replaceWith(newCard);
+    this._card = newCard;
     return;
   }