Fix #63

thomasloven · Feb 28, 2022 · 3ba1ae4 · 3ba1ae4
1 parent 5acd90b
commit 3ba1ae4
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/main.ts b/src/main.ts
@@ -81,6 +81,7 @@ class StateSwitch extends LitElement {
     }
     this.cardsInitialized = true;
     this.update_state();
+    this._updateVisibility();
   }
 
   update_state() {
@@ -129,6 +130,18 @@ class StateSwitch extends LitElement {
     for (const k in this.cards) this.cards[k].hass = hass;
   }
 
+  _updateVisibility() {
+    if (this.cards[this.state]) {
+      this.classList.remove("no-match");
+      this.style.setProperty("display", "");
+      this.removeAttribute("hidden");
+    } else {
+      this.classList.add("no-match");
+      this.style.setProperty("display", "none");
+      this.setAttribute("hidden", "");
+    }
+  }
+
   updated(changedProperties) {
     if (!changedProperties.has("state")) {
       this.update_state();
@@ -145,12 +158,8 @@ class StateSwitch extends LitElement {
       }
       if (this.cards[this.state]) {
         this.cards[this.state].classList.add("visible");
-        this.classList.remove("no-match");
-        this.style.setProperty("display", "");
-      } else {
-        this.classList.add("no-match");
-        this.style.setProperty("display", "none");
       }
+      this._updateVisibility();
     }
   }
 

diff --git a/test/lovelace.yaml b/test/lovelace.yaml
@@ -2,6 +2,7 @@ title: state-switch
 views:
   - !include views/1-standard.yaml
   - !include views/2-transitions.yaml
+  - !include views/3-layouts.yaml
   - title: test
     cards:
       - type: entities

diff --git a/test/views/3-layouts.yaml b/test/views/3-layouts.yaml
@@ -0,0 +1,33 @@
+title: Layouts
+cards:
+  - type: entities
+    entities:
+      - light.bed_light
+  - type: grid
+    cards:
+      - type: markdown
+        content: Left
+      - type: custom:state-switch
+        entity: light.bed_light
+        states:
+          "on":
+            type: markdown
+            content: Middle
+      - type: markdown
+        content: right
+  - type: custom:layout-card
+    layout_type: custom:horizontal-layout
+    layout:
+      width: 100
+      reflows: true
+    cards:
+      - type: markdown
+        content: Left
+      - type: custom:state-switch
+        entity: light.bed_light
+        states:
+          "on":
+            type: markdown
+            content: Middle
+      - type: markdown
+        content: Right