Hide the card if no default and nothing matches

[RomRider]

Hi @thomasloven, would it be possible to merge this after review please? 😄

[thomasloven]

The class is never added if the page loads with no card displayed. Add a this.classList.add('no-match') in setConfig too, and it's ready to merge.

[poldim]

@thomasloven I thought initially I was having some issues with my auto-entities card so I created an issue on that project (https://github.com/thomasloven/lovelace-auto-entities/issues/119) but after further troubleshooting, it appears the problem of everything appearing in one column is solved by either removing the auto-entities resource OR removing my state switch card at the top on my lovelace config.

Further checking shows that as I uncomment each of my 3 state switch blocks, it impacts the layout.

As @RomRider comments here, I only want these cards to display when it matches the state, and if no match is made, I don't want anything shown. Is my config for the card correct?

views:
- title: Main
  path: main
  cards:
### WHEN PROJECTOR IS ON
    - type: custom:state-switch
      entity: switch.projector_power
      states:
        'on':
          type: vertical-stack
          cards:
            - type: custom:mini-media-player
              entity: media_player.rx_v675
              icon: mdi:television-classic
              hide:
                controls: true
                source: true
                power: true
              shortcuts:
                buttons:
                - name: Chromecast
                  icon: mdi:google-chrome
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.rx_v675
                    source: HDMI3
                - name: XBOX
                  icon: mdi:xbox
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.rx_v675
                    source: HDMI2
                - name: Mi Box 4
                  icon: mdi:android-head
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.rx_v675
                    source: HDMI5
                - name: Projector Off
                  icon: mdi:television-classic-off
                  type: service
                  id: switch.turn_off
                  data:
                    entity_id: switch.projector_screen
                columns: 3
            - type: custom:state-switch
              entity: template
              template: "{% if is_state_attr('media_player.rx_v675', 'source', 'ChromeCast') %} ChromeCast {%elif XBOX %} XBOX {%elif HDMI5 %} HDMI5 {%endif%}"
              states:
                "ChromeCast":
                  type: vertical-stack
                  cards:
                    - type: custom:mini-media-player
                      entity: media_player.ultra
                      icon: mdi:google-chrome
                      hide:
                        source: true
                        power: true
                "XBOX":
                  type: vertical-stack
                  cards:
                    - type: custom:mini-media-player
                      entity: media_player.xbox
                      icon: mdi:xbox
                      hide:
                        # controls: true
                        source: true
                        # power: true
                "HDMI5":
                  type: vertical-stack
                  cards:
                    - type: custom:mini-media-player
                      entity: media_player.mibox4
                      icon: mdi:android-head
                      hide:
                        source: true

    - type: custom:state-switch
      entity: media_player.living_room_max
      states:
        'playing':
          type: vertical-stack
          cards:
            - type: custom:mini-media-player
              entity: media_player.living_room_max
              hide:
                source: true

    - type: custom:state-switch
      entity: input_boolean.currently_bbqing
      states:
        'on':
          type: vertical-stack
          show_header_toggle: false
          cards:
          - type: 'custom:mini-graph-card'
            name: 'Currently Grilling: Grill Temp'
            entities:
              - entity: sensor.bbq_grill_temp
                name: Grill
                show_state: true