custom-cards / decluttering-card

🧹 Declutter your lovelace configuration with the help of this card

Decluttering Card

📝 Reuse multiple times the same card configuration with variables to declutter your config.

This card is for Lovelace on Home Assistant.

We all use multiple times the same block of configuration across our lovelace configuration and we don't want to change the same things in a hundred places across our configuration each time we want to modify something.

decluttering-card to the rescue!! This card allows you to reuse multiple times the same configuration in your lovelace configuration to avoid repetition and supports variables and default values.

Configuration

Defining your templates

First, you need to define your templates.

The templates are defined in an object at the root of your lovelace configuration. This object needs to be named decluttering_templates.

This object needs to contains your templates declaration, each template has a name and can contain variables. A variable needs to be enclosed in double square brackets [[variable_name]]. It will later be replaced by a real value when you instanciate a card which uses this template. If a variable is alone on it's line, enclose it in single quotes: '[[variable_name]]'.

You can also define default values for your variables in the default object.

For a card:

decluttering_templates:
  <template_name>
    default:  # This is optional
      - <variable_name>: <variable_value>
      - <variable_name>: <variable_value>
      [...]
    card:  # This is where you put your card config (it can be a card embedding other cards)
      type: custom:my-super-card
      [...]

For a Picture-Element:

decluttering_templates:
  <template_name>
    default:  # This is optional
      - <variable_name>: <variable_value>
      - <variable_name>: <variable_value>
      [...]
    element:  # This is where you put your element config
      type: icon
      [...]

Example in your lovelace-ui.yaml:

resources:
  - url: /local/decluttering-card.js
    type: module

decluttering_templates:
  my_first_template:     # This is the name of a template
    default:
      - icon: fire
    card:
      type: custom:button-card
      name: '[[name]]'
      icon: 'mdi:[[icon]]'

  my_second_template:    # This is the name of another template
    card:
      type: custom:vertical-stack-in-card
      cards:
        - type: horizontal-stack
          cards:
            - type: custom:button-card
              entity: '[[entity_1]]'
            - type: custom:button-card
              entity: '[[entity_2]]'

Using the card

Name	Type	Requirement	Description
type	string	Required	custom:decluttering-card
template	object	Required	The template to use from decluttering_templates
variables	list	Optional	List of variables and their value to replace in the template

Example which references the previous templates:

- type: custom:decluttering-card
  template: my_first_template
  variables:
    - name: Test Button
    - icon: arrow-up

- type: custom:decluttering-card
  template: my_first_template
  variables: Default Icon Button

- type: custom:decluttering-card
  template: my_second_template
  variables:
    - entity_1: switch.my_switch
    - entity_2: light.my_light

Installation

Step 1

Save decluttering-card to <config directory>/www/decluttering-card.js on your Home Assistant instanse.

Example:

wget https://raw.githubusercontent.com/custom-cards/decluttering-card/master/dist/decluttering-card.js
mv decluttering-card.js /config/www/

Step 2

Link decluttering-card inside your ui-lovelace.yaml or Raw Editor in the UI Editor

resources:
  - url: /local/decluttering-card.js
    type: module

Step 3

Add a custom element in your ui-lovelace.yaml or in the UI Editor as a Manual Card

Troubleshooting

See this guide: Troubleshooting

Developers

Fork and then clone the repo to your local machine. From the cloned directory run

npm install && npm run build

decluttering-card's Issues

decluttering inside a core grid card behaves oddly, changes size of the grid tile

Checklist:

• [ X] I updated to the latest version available
• [X ] I cleared the cache of my browser

Release with the issue:
0.6.3 HACS

Home Assistant 2023.2.0b7
Supervisor 2023.01.1
Operating System 9.4
Frontend-versie: 20230130.0 - latest

Last working release (if known):

Browser and Operating System:
Any really tested Chrome, Safari, Firefox on Mac

Description of problem:

seems decluttering changes the way a grid card sees the final card, in this case a custom minimalistic area card.

first card is decluttered and only shows the top section of the grid 1st card
2nd card is a verbose card and shows full size

  - type: grid
    columns: 4
    cards:

        - type: custom:decluttering-card
          template: minimalistic_area
          variables:
            - title: ' '
            - main_id: light.laundry_ceiling
            - temp_id: sensor.laundry_sensor_temperature
            - humid_id: sensor.laundry_sensor_illuminance
            - motion_id: binary_sensor.laundry_sensor_motion
            - image: bijkeuken_klein.jpg
            - path: bijkeuken

        - type: custom:minimalistic-area-card
          card_mod:
            style: |
              ha-card {
                filter: {{'grayscale(0%)' if
                          (is_state('light.laundry_ceiling','on') or
                           is_state('binary_sensor.laundry_sensor_motion','on'))
                          else 'grayscale(100%)'}};
                border-top: {{'1rem solid red' if is_state('binary_sensor.laundry_sensor_motion','on')
                      else 'none'}};
              }
#           title: Laundry
          image: /local/images/areas/bijkeuken_klein.jpg
          shadow: false
          tap_action:
            action: navigate
            navigation_path: /ui-sub-views/bijkeuken
          hold_action:
            action: call-service
            service: light.toggle
            service_data:
              entity_id: light.laundry_ceiling
          entities:
            - entity: sensor.laundry_sensor_temperature

Javascript errors shown in the web inspector (if applicable):
No errors

Additional information:

decluttering template is a verbosely copied original card, albeit with variables:

card:
  type: custom:minimalistic-area-card
  card_mod:
    style: |
      ha-card {
        filter: {{'grayscale(0%)' if
                  (is_state('[[main_id]]','on') or
                   is_state('[[motion_id]]','on'))
                  else 'grayscale(100%)'}};
        border-top: {{'1rem solid red' if is_state('[[motion_id]]','on')
              else 'none'}};
      }
  title: '[[title]]'
  hide_unavailable: true
  area: '[[area]]'
  image: /local/images/areas/[[image]]
  shadow: false
  tap_action:
    action: navigate
    navigation_path: /ui-sub-views/[[path]]
  hold_action:
    action: call-service
    service: light.toggle
    service_data:
      entity_id: '[[main_id]]'
  entities:
    - entity: '[[temp_id]]'
    - entity: '[[humid_id]]'

all other functionality is alive and working perfectly, including the card_mod templates and actions

Nested Variables

This isn't a bug report, but a question.

Is it possible to nest variables, both in the caller and the default? I'm guessing it isn't, but I wanted to be sure before I try to find a workaround.

Example:

default:
row1:
- name
- image

With the idea being to call them with [[ row1.name ]]

I'm not expecting it to work, but I wanted to know if I was wrong before I try to figure out how to make it work :)

Dividers do not work as template in entities cards since HA 0.107

Since updating Home Assistant to 0.107, my template, which includes a divider for use in entities lists, no longer works.

I'm receiving this message:

Unknown type encountered: divider

I updated my decluttering card to version 0.4.1 and I have migrated my lovelace resources from ui-lovelace.yaml to the lovelace: section in my config.

If I specify the divider manually (don't use decluttering-card) the divider works fine.

My template is as follows:

large_divider:
  default:
    - opacity: 0.25
  card:
    type: divider
    style:
      background-color: var(--secondary-text-color)
      height: 1px
      margin: 15px auto
      opacity: '[[opacity]]'

I'm using the template as follows:

type: entities
show_header_toggle: false
entities:
  [ ... entities ... ]
  
  - type: custom:decluttering-card
    template: large_divider

  [ ... entities ... ]

Thanks!

Undefined Var errors with 2021.4

HA 2021.4 introduced a new feature: Warnings for undefined variables in Templates.

This jams up decluttering-card if you keep a browsers open during HA restart. Lovelace tries to render the card, and HA starts spewing the warnings because they allow things to start before everything's ready.

I reported it over here as an enhancement, but they feel this should be an issue for the decluttering-card. Not sure if you can hold off until started or not...

Release that introduces this issue:
2021.4

Description of problem:

During a HA restart, Lovelace reports not all entities will be available until HA Completes starting, but if any browser window is open, Lovelace starts rendering that decluttering_templates card.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Decluttering not possible with conditional row? reports missing card

Checklist:

• [X ] I updated to the latest version available
• [X ] I cleared the cache of my browser

Release with the issue:
latest
Last working release (if known):
don tknow
Browser and Operating System:
Any browser on Mac

Description of problem:

creating a decluttering for many repeating conditional rows:

      - type: conditional
        conditions:
          - entity: media_player.googlehome_library
            state_not: unavailable
        row:
          entity: input_boolean.googlehome_library
          state_color: true

with decl. template:

card:
  type: conditional
  conditions:
    - entity: media_player.googlehome_[[id]]
      state_not: unavailable
  row:
    entity: input_boolean.googlehome_[[id]]
    state_color: true

doesnt work and reports below error

Javascript errors shown in the web inspector (if applicable):

can clearly see the variables are replaced as they should:

Additional information:

Can we not use decluttering in a conditional row? Or am I missing another important config option.
Please have a look?
thanks

Card takes up space in a vertical stack card even when all content is hidden

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
0.6.3

Browser and Operating System:
N/A (issue replicates on Google TV in Kiosk browser, Google Chrome on Ubuntu, Google Chrome on Mac, etc)

Description of problem:
The decluttering card still takes up space even when all its contents are hidden. Since this is a wrapper card I can see how it would be difficult to know when all it's content is hidden, though.

It isn't completely the fault of this card as it seems like it does try to detect this and hide itself. However, some cards don't hide themselves properly and I think we could try to be more robust in how we hide ourselves.

Additional information:
The only idea I have here is in addition to how we check if child cards are hidden, we could also hide ourselves if the size they are taking up is 0? You can see here that the offending card (that should be applying display: none but doesnt) has no dimensions:

but the decluttering-card still does since we don't apply display: none:

Can you add HA cast support

Can you add Home Assistant Cast support.
A comment on the HA forum is:

**The best thing is to reach out to the dev of the card. There are issues with the lit element and maybe even the local files they might be pulling…

Copy to clipboard
var LitElement = LitElement || Object.getPrototypeOf(customElements.get("hui-view"));
if the corresponding bit at the end doesn’t say “hui-view” you can try editing it to say that… and make sure you change the version number in lovelace resources or it won’t load it.

That might make it work. I my case I also had to wrap a file URL to make it work as well.**

Can you do something with it?

Regards!

Default referencing variable

I'd like to be able to reference variables in defaults. For example:

decluttering_templates:
  room_card:
    default:
      light_entity: 'light.[[room]]'
  card:
    type: entity
    entity: '[[light_entity]]'

That template could then be used with either of the following:

- type: custom:decluttering-card
  template: room_card
  variables:
    - room: office

- type: custom:decluttering-card
  template: room_card
  variables:
    - room: office
    - light_entity: light.office_floor_lamp

Screenshots?

Can you please add sample screenshots of this card? I do not understand what it is and ignored installation

decluttering-card references appear broken with Core 2023.4.0

Release with the issue:
2023.4.0
Last working release (if known):
2023.3.6
Browser and Operating System:
Edge on Windows 11 also on Windows app and on Android App
Description of problem:
All previously working decluttering templates now display an error message like this:

Additional information:
decluttering card template:

# card with automated light control
  auto-light-thing:
    card:
      type: 'custom:button-card'
      entity: '[[thing_entity]]'
      name: '[[thing_name]]'
      template: standard-button
      triggers_update: all
      aspect_ratio: '[[aspect_ratio]]'
      styles:
        grid:
          - position: relative
        custom_fields:
          lt:
            - position: absolute
            - right: 0%
            - top: 0%
            - height: 20px
            - width: 20px
      custom_fields:
        lt: |
          [[[
            var icon = "mdi:alpha-a-circle-outline";
            var color = "darkGrey";
            var status = states['[[light_entity]]'].state;
            if (status == 'on') {
              icon = "mdi:alpha-a-circle";
              color = "darkGreen";
            }
            return `<ha-icon icon="${icon}"
            style="width 18px; height: 18px; color: ${color};"></ha-icon>`
          ]]]
      hold_action:
        action: call-service
        service: homeassistant.toggle
        service_data:
          entity_id: '[[light_entity]]'
      state:
        - value: 'on'
          id: value_on
          icon: '[[thing_icon_on]]'
        - value: 'off'
          id: value_off
          icon: '[[thing_icon_off]]'

decluttering card use in ui-lovelace.yaml:

                - type: 'custom:decluttering-card'
                  template: auto-light-thing
                  variables:
                    - thing_entity: switch.grow_light_outlet
                    - thing_name: 'Grow Lt'
                    - light_entity: input_boolean.grow_light_automated
                    - thing_icon_on: 'mdi:lightbulb-on'
                    - thing_icon_off: 'mdi:lightbulb-outline'
                    - aspect_ratio: 1/1.1

layout-card mediaquery doesn't work when contained in a decluttering-card

So I've got a simple grid from layout_card:

base_myhomekit_card_grid:

  # Detault vars ####
  default:
    - cards: ""

  card:
    type: custom:layout-card
    layout_type: grid
    layout_options:
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr
      grid-template-rows: auto
      grid-gap: 8px
      mediaquery:
      "(max-width: 650px)":
        grid-template-columns: 1fr 1fr 1fr
    cards: '[[cards]]'

However, the mediaquery doesn't work for some reason. If I use the layout-card on its own and not as a template for the decluttering-card everything works as it should.

What's going on here?

Reference for layout-card

allow offloading clutter to individual files

My decluttering templates are getting rather large and was wondering if I was able to map these to individual files?

Instead of this in my lovelace.yaml

decluttering_templates:
  my_first_template:     # This is the name of a template
    default:
      - icon: fire
    card:
      type: custom:button-card
      name: '[[name]]'
      icon: 'mdi:[[icon]]'

  my_second_template:    # This is the name of another template
    card:
      type: custom:vertical-stack-in-card
      cards:
        - type: horizontal-stack
          cards:
            - type: custom:button-card
              entity: '[[entity_1]]'
            - type: custom:button-card
              entity: '[[entity_2]]'

we could do something like the views

decluttering_templates:
  - !include lovelace/decluttering_templates/my_first_template.yaml
  - !include lovelace/decluttering_templates/my_second_template.yaml

is this already possible? I have tried and it doesn't error rendering but says it cant find the template.

Problem casting decluttering-card using Home Assistant Cast.

Problem with decluttering card and lovelace_gen together

Checklist:

• [x ] I updated to the latest version available
• [ x] I cleared the cache of my browser

Release with the issue:
latest

Last working release (if known):

Browser and Operating System:
Chrome
Winows 10

Description of problem:

I'm trying to use decluttering card and lovelace_gen together but ran in to a problem where variables from the decluttering card isn't parsed the way they're supposed to with lovelace_gen.

I have this declaration: decluttering_templates: !include test_template.yaml

test_template.yaml:

# lovelace_gen
test_template:
  card:
    {% set showIt = '[[showMe]]' %}
    {% if showIt == 'a' %}
    type: custom:mushroom-title-card
    title: '{{showIt}} - a'
    {% elif showIt == 'b' %}
    type: custom:mushroom-entity-card
    entity: sensor.my_sensor
    {% else %}
    type: custom:mushroom-title-card
    title: '{{showIt}} - failed'
    {% endif %}

and my decluttering-card:

- type: custom:decluttering-card
  template: test_template
  variables:
    - showMe: 'a'


- type: custom:decluttering-card
  template: test_template
  variables:
    - showMe: 'b'

the problem is that lovelace_gen seems to interpret [[showMe]] as 'showMe' instead of 'a' or 'b'.
The output becomes a - failed or b - failed.

Is there a way to solve this?

Using !Include to templates in .yaml

Hello,

My decluttering templates are taking too much code lines and im looking to split my code in different .yaml files.

For now im didnt find any solution on the old posts, so it is possible to use !include my_template.yaml???

I would appreciate some help!

Thanks

Feature request: Fallback support

I would like to have a fallback support for example for the icon so that if no icon got specified in the card it will fall back to the fallback icon.

decluttering_templates:
  my_first_template:     # This is the name of a template
    default:
      - icon: fire
    card:
      type: custom:button-card
      icon: [[icon]]
        fallback: mdi:alert
      name: '[[name]]'

It could look something like this.

--mdc-icon-size doesn't show the correct size when switches between vertical mode and horizontal mode with decluttering-card template.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
HA: 0.111.2
IOS 13.4
--mdc-icon-size: 90%

--mdc-icon-size doesn't show the correct size when switches between vertical mode and horizontal mode with decluttering-card template, it will show the mdi icon bigger than the background button when my phone / tablet is vertical , but the size is right if my phone / tablet is horizontal. If i just use --mdc-icon-size in lovelace , it will fine. showing the correct size only 90% of the background button both vertical mode and horizontal mode on my tablet and iphone.

in nomally lovelace
`

element:
  entity: light.test_light
  style:
    **'--mdc-icon-size': 90%**
    align-items: center
    background-color: 'rgba(255, 255, 255, 0.4)'
    border-radius: 40%
    display: flex
    height: 4vw
    justify-content: center
    left: 43%
    top: 93%
    width: 4vw
  tap_action:
    action: toggle
  type: state-icon`

in decluttering-card template
`

element:
  entity: '[[entity]]'
  style:
    **'--mdc-icon-size': 90%**
    align-items: center
    background-color: 'rgba(255, 255, 255, 0.4)'
    border-radius: 40%
    display: flex
    height: '[[height]]'
    justify-content: center
    left: '[[left]]'
    top: '[[top]]'
    width: '[[width]]'
    font-size: 40px
  tap_action:
    action: toggle
  type: state-icon `

Last working release (if known):

Browser and Operating System:

Javascript errors shown in the web inspector (if applicable):

Additional information:

The card uses non-unique ids for CSS elements inside a card

Checklist:

• [ x] I updated to the latest version available
• [ x] I cleared the cache of my browser

Release with the issue:
0.6.3

Last working release (if known):

Browser and Operating System:
Chrome, Win10x64

Description of problem:
The card uses a declutter-child value as an ID for css elements.
Here is an example for custom:mini-graph-card:

As a result - css elements do not have unique IDs in case of presence of several cards on the view.
This becomes a problem when using a card-mod in Safari - using pointers like rect#some_id affects on all similar cards on the view instead of only one particular card.
See a more detailed description: kalkih/mini-graph-card#839

Javascript errors shown in the web inspector (if applicable):
None

Additional information:

Help to pass input_select helper to decluttering template

Hi, I have decluttering templates working quite well, including nested ones. However, I've run into a block.
I have several rooms, each with a binary_sensor.[[roomname]]_window entity. I pass the roomname as text when I call the template entity, and it all works great.
However, I'd also like to have a separate page where the [[roomname]] is set by input_select.room_selector with the various room names listed.
So I have this:

decluttering_templates:
  test_decluttering_template:
    card:
      type: entities
      title: '[[title]]'
      entities:
        - type: custom:template-entity-row
          state: '[[roomname]]'
          name: roomname_variable
        - type: custom:template-entity-row
          state: '{{ states("binary_sensor.[[roomname]]_window") }}'
          name: Window state

And the cards:

    cards:
      - type: custom:decluttering-card
        template: test_decluttering_template
        variables:
          - title: Passing the value of the input_select
          - roomname: '{{ states.input_select.room_selector.state }}'
      - type: custom:decluttering-card
        template: test_decluttering_template
        variables:
          - title: passing_direct_string (\"kitchen\")
          - roomname: kitchen

I've tried all sorts of variations, using custom:template-entity-row or directly using - entity: 'binary_sensor.[[roomname]]_window' and so on. I've tried using the '{{states("input_select.room_selector")}}' function instead of states.input_select.room_selector.state and so on.

Nothing is working for me. Some fail with "Unknown" in the UI, others don't render the card with various types of error. Happy to supply those errors if anyone thinks it might help.

Has anyone every seen this before and have an idea on how to fix please?

s is undefined

I get this error when trying to define a simple template:

ui-lovelace.yaml:

decluttering_templates:
  test:
    card:
      - type: sensor
        entity: '[[sensor_temperature]]'
        name: test

the card:

type: 'custom:decluttering-card'
template: test
variables:
  - sensor_temperature: sensor.synology_dsm_cpu_load_total

the error:
s is undefined

{
  "type": "custom:decluttering-card",
  "template": "test",
  "variables": [
    {
      "sensor_temperature": "sensor.synology_dsm_cpu_load_total"
    }
  ]
}

the console log:

decluttering-card TypeError: "s is undefined"
    setConfig decluttering-card.js:209
    Ei create-card-element.ts:73
    xi create-card-element.ts:98
    createCardElement hui-view.ts:75
    _rebuildCard hui-view.ts:322
    createCardElement hui-view.ts:83
    r fire_event.ts:76
    xi create-card-element.ts:111
create-card-element.ts:76:12

Support the Entity card Toggle Header

Hello I have created a decluttering card to simplify my RGB lights:

light_rgb_template:
  card:
    type: custom:slider-entity-row
    entity: light.[[light_name]]
    style: |
      :host {
        color: {% if is_state('binary_sensor.[[light_name]]_autoon', 'on') %} green {% endif %};
      }
    toggle: true
    min: 1
    max: 100
    step: 1 

Also tried the variant

light_rgb_template:
  card:
    type: custom:slider-entity-row
    entity: '[[entity]]'
    style: |
      :host {
        color: {% if is_state('binary_sensor.[[light_name]]_autoon', 'on') %} green {% endif %};
      }
    toggle: true
    min: 1
    max: 100
    step: 1

It works ok, but the "entities" card toggle header does not detect the entity and keeps the header switch off when the entity in the "decluttering-card" is on:

Is this possible?

Thamk You

Use of this card with the config-template-card

I am trying to use this card to cleanup my code, but I am facing an issue with the "variables" configuration inside the config-template-card

This is my code:

---
temperature:
  card:
    type: custom:config-template-card
    entities:
      - [[entity]]
      - input_number.night_time
    variables:
      - states['sensor.[[entity]]'].state
    card:
      type: custom:mini-graph-card
      name: Temperature
      icon: "${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ? 'fas:thermometer-three-quarters' : vars[0] > 20 ? 'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' : 'fas:thermometer-empty' }"
      more_info: false
      height: 150
      line_width: 4
      hours_to_show: 168
      points_per_hour: 0.25
      aggregate_func: max
      group_by: hour
      group: false
      hour24: true
      animate: false
      decimals: 1
      font_size: 100
      font_size_header: 14
      align_header: default
      align_icon: right
      align_state: center
      lower_bound: -5
      upper_bound: 40
      show:
        name: true
        icon: true
        state: true
        graph: line
        fill: true
        points: false
        legend: false
        extrema: false
        labels: false
        labels_secondary: false
        name_adaptive_color: true
        icon_adaptive_color: true
      color_thresholds:
        - value: 5
          color: "#0055FF"
        - value: 15
          color: "#FF6600"
        - value: 20
          color: "#FFAA00"
        - value: 22.5
          color: "#FF7700"
        - value: 25
          color: "#FF3700"
      style: |
        ha-card {
          padding: 16px !important;
        }
      entities:
        - entity: '[[entity]]'
          name: Temperature
          color: '#FF5000'
          show_fill: false
        - entity: input_number.night_time
          color: '#B3B3B3'
          name: Night Time
          show_fill: true
          show_line: false
          show_points: false
          show_legend: false
          y_axis: secondary

The problem seems to be caused by this:

    variables:
      - states['sensor.[[entity]]'].state

The decluttering card doesn't seems to replace the [[entity]] because wrapped around other []

The error I receive in the console is:

VM577:1 Uncaught (in promise) TypeError: Cannot read property 'state' of undefined
    at eval (eval at _evaluateTemplate (config-template-card.js:3305), <anonymous>:1:29)
    at HTMLElement._evaluateTemplate (config-template-card.js:3305)
    at config-template-card.js:3276
    at Array.forEach (<anonymous>)
    at HTMLElement._evaluateConfig (config-template-card.js:3265)
    at HTMLElement.render (config-template-card.js:3256)
    at HTMLElement.update (config-template-card.js:2827)
    at HTMLElement.performUpdate (config-template-card.js:2285)
    at HTMLElement._enqueueUpdate (config-template-card.js:2237)

Please note, if I use actual entities values instead of [[entity]] (ex. sensor.living_room_temperature) it does work as expected.

Thanks

Passing a jinjia template causes an error

Checklist:

• [ x] I updated to the latest version available
• [ x] I cleared the cache of my browser

Release with the issue: 0.6.3

Last working release (if known):

Browser and Operating System: Chrome, Win10

Description of problem:

Consider this template:

  decl_test_var_template:
    default:
      - VALUE: xxx
    card:
      type: markdown
      content: '[[VALUE]]'

and a card:

type: vertical-stack
cards:
  - type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: '{{ states(''sun.sun'') }}'
  - type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: >-
          {{ states('sun.sun') }}
  - type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: >-
          {% if false -%}
          {{states('zone.home')}}
          {%- else -%}
          {{states('sun.sun')}}
          {%- endif %}
  - type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: >-
          {% if false -%}
            {{states('zone.home')}}
          {%- else -%}
            {{states('sun.sun')}}
          {%- endif %}

Here the indented template does NOT work:

      - VALUE: >-
          {% if false -%}
            {{states('zone.home')}}
          {%- else -%}
            {{states('sun.sun')}}
          {%- endif %}

Javascript errors shown in the web inspector (if applicable):

Additional information:

Failed Install through HACS

When I tried to upgrade I was getting an error from HACS:

GitHub returned 404 for https://api.github.com/repos/custom-cards/decluttering-card/contents/dist

So I tried uninstalling it and reinstalling it, and I'm getting the same error

decluttering-card that has another inside it stopped working in HA 110

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
HA 0.110.0+

Last working release (if known):
HA 0.109.6

Browser and Operating System:

Chrome
Windows 10

Description of problem:

A card with another custom:decluttering-card within it doesn't work anymore e.g.:

  AndroidTVControl_WithLGNetcastTV:
    card:
      card:
        cards:
          - content: >-
              {% set InitialImage = states.sensor.base_url.state +
              state_attr('media_player.' + '[[Entity_LGNetcastTV_NoDomain]]',
              'entity_picture') %} <img src='{{ InitialImage }}' width=100% 
              onload="setTimeout(() => this.src = '{{ InitialImage }}&' + (new
              Date()).getTime(), 2500)" onerror="this.src = '{{ InitialImage
              }}&' + (new Date()).getTime()">
            ignore_line_breaks: true
            type: 'custom:html-template-card'
          - template: AndroidTVControl
            type: 'custom:decluttering-card'
            variables:
              - Entity: '[[Entity_AndroidTV]]'
        type: 'custom:vertical-stack-in-card'
      conditions:
        - entity: 'media_player.[[Entity_LGNetcastTV_NoDomain]]'
          state_not: 'off'
      type: conditional
    default:
      - Entity_AndroidTV: ''
      - Entity_LGNetcastTV_NoDomain: ''

Javascript errors shown in the web inspector (if applicable):

No JS errors

Additional information:

Thermostat card not showing the "set-temperature" until it change (from clean start)

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
Always had the issue.
Last working release (if known):
N/A
Browser and Operating System:
Chrome 89.0.4389.82 and Firefox 86.0 on Windows 10

Description of problem:
On every startup, and this is true up until the set-temperature change, the themrostat card doesn't show the set-temperature value. It does start to appear the moment that temperature change.
I've also noticed, that if you run multiple thermostat-card in the same view, only the first one is affected (for the same entities) while the other simply show the value

To show the set-temperature at all time.
Javascript errors shown in the web inspector (if applicable):

Additional information:
My config:
thermostat view

title: Thermostat
icon: mdi:home-thermometer
panel: true
path: thermostat
cards:
  - type: custom:layout-card
    layout: vertical
    cards:
      - type: custom:decluttering-card
        template: thermostat_card
        variables:
          - title: House
          - area: house
      - break
      - type: custom:decluttering-card
        template: thermostat_card
        variables:
          - title: House
          - area: house

Thermostat Card (technically is more complex, but this is the bare minimum to replicate the issue)

---
thermostat_card:
  card:
    type: custom:stack-in-card
    mode: vertical
    cards:
      - type: custom:decluttering-card
        template: title
        variables:
          - title: '[[title]]'
      - type: thermostat
        icon: mdi:thermometer-lines
        entity: climate.[[area]]
        name: " "

Outcome:

As you can see, the first doesn't have the "18.0 Idle" text, while the second does (no changes ofc, they are literally the same code :) )

!include is not supported? Can it?

I tried to use the !include statement to have some sort of re-use within templates, but I get errors (mapping errors, expecting ':', etc.), so include doesn't seem to be supported or I am doing something wrong 😄.

What I would want for instance:

• Have a template part with generic defaults
• Add / override these in specific templates

So for template 'specific1':

default:
!include 'template-defaults.yaml' (defines defaults for valuex, valuey and valuez)
# Now override some values
  - valuex: 11
  - valuey: 22

And template 'specific2':

default:
!include 'template-defaults.yaml' (defines defaults for valuex, valuey and valuez)
# Now override some values
  - valuex: 11
  - valuez: 33

decluttering badges???

Is it possible to use this on the badges? I've tried creating a badge template but when i try to follow the guide on custom: they either vanish or nothing is applied many thanks for your help in advance

No Icons on Mobile devices

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
0.6.3
Last working release (if known):
NA
Browser and Operating System:
Mobile (IOS & Android)

Description of problem:

Hello,
When I use the decluttering templates for https://github.com/AmoebeLabs/flex-horseshoe-card, on mobile devices, the icons dont show on the screen. They work on Chrome/IE/Edge.
Without declatering-card, they work well on any platform.
PS: I am not using the icons as variables.

Javascript errors shown in the web inspector (if applicable):

Additional information:

Bug with booleans

see here for background https://community.home-assistant.io/t/lovelace-decluttering-card/118625/74

The specific case referenced there is a custom button card based on a de-clutterring template. The template includes a default defined boolean for lock of false which is ignored if it is not passed anything. The lock still appears.

First the view itself,

cards:
  - type: vertical-stack
    cards:

      - type: horizontal-stack
        cards:

          - type: custom:decluttering-card
            template: simple_header
            variables:
              - label: -- Hall --

          - type: custom:button-card
            color_type: blank-card
            styles:
              card:
                - width: 2px

          - type: custom:decluttering-card
            template: simple_header_options_button

          - type: custom:button-card
            color_type: blank-card
            styles:
              card:
                - width: 2px

then the de-cluttering templates,

  #==================
  #=== Simple Header
  #==================
  simple_header:
    card:
      type: custom:button-card
      label: '[[label]]'
      show_label: true
      aspect_ratio: 9/1
#      color_type: label-card
      styles:
        card:
          - height: 50px
          - background: linear-gradient(to right, var(--paper-card-background-color) 0%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0) 90%)
          - --ha-card-box-shadow: 'none'
#          - background-color: var(--paper-card-background-color)
        label:
          - justify-self: start
          - padding-left: 20px
          - font-size: 24px


  #=================================
  #=== Simple Header Options Button
  #=================================
  simple_header_options_button:
    default:
      icon: mdi:settings
      lock: false
      lock_color: var(--primary-text-color)
      tap_action: more-info
    card:
      type: custom:button-card
      icon: '[[icon]]'
      show_name: false
      tap_action: 
        action: '[[tap_action]]'
      lock: '[[lock]]'
      styles:
        card:
          - border-radius: 50%
          - height: 50px
          - width: 50px
          - background: rgba(255,255,255,0.45)
        lock:
          - color: '[[lock_color]]'
        icon:
          - color: gray
          - width: 35px

Where is decluttering-card.js?

This does not work:
wget https://raw.githubusercontent.com/custom-cards/decluttering-card/master/dist/decluttering-card.js
because the folder master does not exist. Where can I get a copy of decluttering-card.js?

box-shadow on the wrong div when using the card?

I am having a weird problem where using the decluttering card with vertical-stack-in-card would not show the standard box-shadow that comes with every card on the UI.

Example below:

  - type: 'custom:vertical-stack-in-card'
    cards:
      - type: horizontal-stack
        cards:
          - type: 'custom:button-card'
            entity: light.home_theatre
            icon: 'mdi:movie-roll'
            name: Pot lights
            layout: icon_name
            styles:
              card:
                - height: 88px
                - width: 180px
              name:
                - font-size: 15px
                - font-weight: bold
                - text-transform: uppercase
          - type: entities
            entities:
              - type: 'custom:slider-entity-row'
                entity: light.home_theatre
                icon: 'mdi:lamp'
                full_row: true
                hide_state: true
  - type: 'custom:decluttering-card'
    template: dimmer_button_slider
    variables:
      - entity: light.home_theatre
      - icon: movie-roll
      - name: Pot lights

The decluttering_card_template:

decluttering_templates:
  dimmer_button_slider:
    type: 'custom:vertical-stack-in-card'
    cards:
      - type: horizontal-stack
        cards:
          - type: 'custom:button-card'
            entity: '[[entity]]'
            icon: 'mdi:[[icon]]'
            name: '[[name]]'
            layout: icon_name
            styles:
              card:
                - height: 88px
                - width: 180px
              name:
                - font-size: 15px
                - font-weight: bold
                - text-transform: uppercase
          - type: entities
            entities:
              - type: 'custom:slider-entity-row'
                entity: '[[entity]]'
                icon: 'mdi:[[icon]]'
                full_row: true
                hide_state: true

Tested it with button-card and works fine.
When I did a dev inspect, it seems the box-shadow is set on a lower div.. that is as much I can check..

Just tested on 0.2.0 as well.

Need to restart HA to see decluttering_template changes in dashboard

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
HA core 2022.5.5, running on RPi 4B with DietPi 8.4.2 (Debian 11 'Bullseye')
Decluttering card: 0.6.3
HACS: 1.25.5 (rolled back to 1.24.5 and issue persisted)

Last working release (if known):
not known, but was working last week and so I suspect HA core 2022.5.4

Browser and Operating System:
Mac app 2022.358 (MacOS 12.4)
Safari 15.5 (MacOS 12.4)
Firefox 100.0.2 (MacOS 12.4)
iOS app (iOS 15.5)

Description of problem:
I need to restart HA in order to see any changes made in my declutter.yaml file reflected in my dashboard. Previously, I simply needed to refresh (clear cache).

Javascript errors shown in the web inspector (if applicable):
no error.

Additional information:
I am sure this was working for me last week.
The only change I can think of is updating HA itself from 2022.5.4 to 2022.5.5
I did update HACS, but I rolled that back to 1.24.5 and the problem persisted.

Use templates across Dashboards

Have decluttering cards set up and working across single dashboards, but using it on different dashboards results in an error:

"undefined is not an object (evaluating 't.config.decluttering_templates[e.template]’)”

The use case is tablets with different dashboards in different rooms, so I would want to use, for example, my 'House Status’ card across each room.

Is this possible? I’m using the Lovelace GUI and pasting the template YAML in the default dashboard’s Raw Configuration editor.

Convert this card to a strategy

In Home Assistant 2021.5 we're going to introduce strategies. A strategy is a JavaScript block that is executed on the loaded configuration before the dashboard as a whole or a specific view is being rendered.

It is the right spot to pre-process configurations and replace templates etc. The exact thing that decluttering-card does.

In the case of decluttering-card:

• In generate dashboard add the decluttering strategy to each view.
• In generate view apply all the templates.

An example of a strategy is here: https://gist.github.com/balloob/bf2715efba46420d6ba1a01586946308 . Note, this example is purely generating a configuration, but as you can see, the original configuration is passed in as info.config.

You will be able to play with a preview of this in the April 24 nightly.

Misleading error reported due to control flow in config check

Checklist:

• [*] I updated to the latest version available
• [*] I cleared the cache of my browser

Release with the issue:
Version 0.6.3
Last working release (if known):

Browser and Operating System:

Windows Chrome

Description of problem:

I'm seeing this in the front-end but it took me a while to track it down as the error is a bit misleading.

The cause of the issue is in fact that I forgot to add the object decluttering_templates to my main lovelace config

The error occurs when the code is checking that decluttering exists in the config (js object)

These line numbers are not going to help but I'm sure you can find the code

The exception on line 1717 never gets thrown because of the way the the pre-check is being done

I think you need...
if (!t.config || ('decluttering_templates' in !t.config))

When I run this in the console it behaves as expected

Javascript errors shown in the web inspector (if applicable):

Additional information:

Allow variables to have default values

Enhancement Request.

I have 30+ button cards in my HA instance and I am now using the decluttering-card to provide a consistent behavior and style for all the buttons on all the views. This has worked great in that it allows me to update this one card to change the behavior (ie. tap_action) or style (ie. label color) across the entire site!

I have found that there are occasions where I need a few cards to be slightly different than what was defined in the decluttering-card. I don't want to create another variable and have the color specified in the variable section of every instance of the card, as it defeats the purpose of making a single change to update the style for all the cards. I could also duplicate the decluttering-card and specify the one item that's different, but again, it defeats the purpose of decluttering-card.

It would be nice if I could specify a variable in the decluttering-card, but have a default value if I don't specify it when using the card. For instance, I may want the labels on all my cards to be blue, but I need a few of them to be red for whatever reason. I would like to specify the blue style color in the decluttering-card, but allow the variable to be overridden with the color red for the specific button instantiation.

A decluttering-card configuration may look like this:

decluttering_templates:
  my_first_template:     # This is the name of a template
    type: custom:button-card
    name: '[[name]]'
    icon: 'mdi:[[icon]]'
    styles:
      label:
        - color:  '[[label_color]]'' | blue

Polymer will be deprecated in HA 2023.5

Checklist:

• [X ] I updated to the latest version available
• [X ] I cleared the cache of my browser

Release with the issue:
2023.4
Last working release (if known):

Browser and Operating System:

Description of problem:

Please see: https://developers.home-assistant.io/blog/2023/04/04/deprecating_polymer/ on the matter.

Javascript errors shown in the web inspector (if applicable):

Additional information:

Would be very much appreciated if you could update the card accordingly. There currently hardly is an alternative, so it would be a 'big deal' if we could no longer use our heavily decluttered Dashboards...

thanks for considering

Custom element doesn't exist: decluttering-card + JS console uncaught exception

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:

0.6.3

Last working release (if known):

Browser and Operating System:

Chrome 84, HA on official docker image

Description of problem:

I tried to install the card, but it fails with

The configuration is

  - url: /hacsfiles/decluttering-card/decluttering-card.js
    type: module

It is then used as

decluttering_templates:
  michael:
    card:
      entities:
        - switch.michael_lampe_haute
        - light.michael_mur
        - light.michael_bureau_gauche
        - light.michael_bureau_droite
      title: Michael
      type: entities
      state_color: true

title: Maison
views:
  - badges:
      - device_tracker.oppo_reno
      - device_tracker.galaxy_s9
      - device_tracker.mi9_mi9
      - device_tracker.mi9tpro_t_l_phonem
    cards:
      - type: custom:decluttering-card
        template: michael
(...)

Javascript errors shown in the web inspector (if applicable):

chunk.c136a66895309b59c3fe.js:1 Uncaught (in promise) https://hass.swtk.eu/hacsfile/decluttering-card.js
o.onerror @ chunk.c136a66895309b59c3fe.js:1
error (async)
(anonymous) @ chunk.c136a66895309b59c3fe.js:1
r @ chunk.c136a66895309b59c3fe.js:1
s @ chunk.c136a66895309b59c3fe.js:1
(anonymous) @ chunk.c136a66895309b59c3fe.js:21843
s @ chunk.c136a66895309b59c3fe.js:21843
(anonymous) @ chunk.c136a66895309b59c3fe.js:25455
Promise.then (async)
value @ chunk.c136a66895309b59c3fe.js:25455
value @ chunk.c136a66895309b59c3fe.js:25455
performUpdate @ app.664a8247.js:1
_enqueueUpdate @ app.664a8247.js:1
async function (async)
_enqueueUpdate @ app.664a8247.js:1
_requestUpdate @ app.664a8247.js:1
initialize @ app.664a8247.js:1
initialize @ app.664a8247.js:1
w @ app.664a8247.js:1
A @ app.664a8247.js:1
r @ chunk.c136a66895309b59c3fe.js:25230
value @ app.664a8247.js:44798
value @ app.664a8247.js:44798
_currentLoadProm.c.then._currentLoadProm @ app.664a8247.js:44798
Promise.then (async)
value @ app.664a8247.js:44798
performUpdate @ app.664a8247.js:1
_enqueueUpdate @ app.664a8247.js:1
async function (async)
_enqueueUpdate @ app.664a8247.js:1
_requestUpdate @ app.664a8247.js:1
set @ app.664a8247.js:1
value @ app.664a8247.js:44798
value @ app.664a8247.js:48086
value @ app.664a8247.js:48086
performUpdate @ app.664a8247.js:1
_enqueueUpdate @ app.664a8247.js:1
async function (async)
_enqueueUpdate @ app.664a8247.js:1
_requestUpdate @ app.664a8247.js:1
initialize @ app.664a8247.js:1
w @ app.664a8247.js:1
r @ app.664a8247.js:44798
r @ app.664a8247.js:48086
_clone @ app.664a8247.js:1
__commitTemplateResult @ app.664a8247.js:1
commit @ app.664a8247.js:1
a @ app.664a8247.js:1
A.render @ app.664a8247.js:1
update @ app.664a8247.js:1
performUpdate @ app.664a8247.js:1
_enqueueUpdate @ app.664a8247.js:1
async function (async)
_enqueueUpdate @ app.664a8247.js:1
_requestUpdate @ app.664a8247.js:1
initialize @ app.664a8247.js:1
initialize @ app.664a8247.js:1
w @ app.664a8247.js:1
A @ app.664a8247.js:1
n @ app.664a8247.js:48086
_clone @ app.664a8247.js:1
__commitTemplateResult @ app.664a8247.js:1
commit @ app.664a8247.js:1
update @ app.664a8247.js:1
__commitTemplateResult @ app.664a8247.js:1
commit @ app.664a8247.js:1
a @ app.664a8247.js:1
A.render @ app.664a8247.js:1
update @ app.664a8247.js:1
performUpdate @ app.664a8247.js:1
_enqueueUpdate @ app.664a8247.js:1
async function (async)
_enqueueUpdate @ app.664a8247.js:1
_requestUpdate @ app.664a8247.js:1
set @ app.664a8247.js:1
value @ app.664a8247.js:40600
(anonymous) @ app.664a8247.js:40600
n @ core.abb95f18.js:1
(anonymous) @ core.abb95f18.js:1
Promise.then (async)
a @ core.abb95f18.js:1
u @ core.abb95f18.js:1
subscribe @ core.abb95f18.js:1
u @ core.abb95f18.js:1
(anonymous) @ core.abb95f18.js:1
Promise.then (async)
194 @ core.abb95f18.js:1
r @ core.abb95f18.js:1
(anonymous) @ core.abb95f18.js:1
(anonymous) @ core.abb95f18.js:1

Additional information:

Cannot read properties issue since 2023.4.x

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
v1.0.0
Last working release (if known):

Browser and Operating System:
Chrome on Win10, HA App on iOS

Description of problem:
Unable to use standard HACS ressource reference, have to manually enter it.
Problem occurs since 2023.4.x (went from 2023.3.6 to 2023.4.4 and got the issue). Tested on 2 different HA systems and same thing happens.

Error message on each declut card: Cannot read properties of null (reading'config')

Into resource.yaml:
Normal reference:

  - url: /hacsfiles/decluttering-card/decluttering-card.js
    type: module

Modified reference:

  - url: /local/community/decluttering-card/decluttering-card.js
    type: module

Decluttering card does not handle text values with new line characters properly.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
Home Assistant: 2022.2.3
decluttering card: 0.6.3
Probably a long time issue. It can be easily reproduced in v0.5 at least.

Last working release (if known):
?

Browser and Operating System:
Firefox 96.0.3 (windows 10)
Google Chrome 99.0 (windows 10)
HA mobile app 2022.1.1 (Android 11)

Description of problem:

Decluttering card does not handle text values with new line characters properly.

Error card with "Unexpected token in JSON at positon xxx" is shown in Lovelace.
"Unexpected token" error is thrown from JSON.parse() method is shown in browser console.

Javascript errors shown in the web inspector (if applicable):

6b28abc1.js:1 card custom:my-template-card SyntaxError: Unexpected token 
 in JSON at position 1130
    at JSON.parse (<anonymous>)
    at :8123/hacsfiles/decluttering-card/decluttering-card.js?hacstag=188686483063:870:16
    at MyTemplateCard.setConfig (:8123/hacsfiles/decluttering-card/decluttering-card.js?hacstag=188686483063:871:7)
    at MyTemplateCard.setConfig (:8123/local/my/templates-loader.js?ts=1640036327063&dashboard_url=lovelace-resources:76:20)
    at o (:8123/frontend_latest/6b28abc1.js:1:5675)
    at :8123/frontend_latest/6b28abc1.js:1:6389
    at c (:8123/frontend_latest/6b28abc1.js:1:6651)
    at s (:8123/frontend_latest/6b28abc1.js:1:6068)
    at y (:8123/frontend_latest/1f3f8c5c.js:150:3576)
    at i.value (:8123/frontend_latest/1f3f8c5c.js:222:9176)

Additional information:

Create markdown card in UI editor and make a simple template out of it.

'markdown-example':
  default:
    - content: >-
        The **Markdown** card allows you to write any text. You can style it **bold**,
        *italicized*, ~strikethrough~ etc. You can do images, links, and more.


        For more information see the [Markdown
        Cheatsheet](https://commonmark.org/help).
  card:
    type: markdown
    content: '[[content]]'

Any way to use this for UI managed dashboards?

I can't seem to figure out how/where to add the decluttering templates definitions when using UI managed lovelace dashboards. Could someone point me in the right direction?

What I tried was changing my lovelace config from this:

lovelace:
  mode: storage

to this

lovelace:
  mode: storage

  decluttering_templates:
    my_first_template:     # This is the name of a template
      default:
        - icon: fire
      card:
        type: custom:button-card
        name: '[[name]]'
        icon: 'mdi:[[icon]]'

But this is not valid for the lovelace configuration:

Invalid config for [lovelace]: [decluttering_templates] is an invalid option for [lovelace].

Support picture-elements

Hi. First of all, this card is amazing. It allowed me to shrink my UI config by a lot. It's way easier to maintain by a huge margin.

The only thing I haven't been able to do is declutter my picture-elements cards. I have a couple of them that contain similar elements, but the "frame itself" (the picture-elements card) is too different so I can't just go and move the whole card to a template.

Doing something like so would actually be amazing:

decluttering_templates:
  demo_icon:
    element:
    - type: icon
      icon: mdi:alert-circle
      title: Problem detected!
      entity: '[[entity]]'
      tap_action:
        action: more-info
      style:
        right: -1%
        top: 7%
        color: var(--google-red-500)
        filter: drop-shadow(black 0 0 1px)

views:
- title: Home
  path: home
  icon: mdi:home
  cards:
  - type: picture-elements
    image: /local/frontend/demo_bg.jpg
    elements:
    - type: custom:decluttering-card
      template: demo_icon
      variables:
      - entity: sensor.demo

Thanks again for the awesome work!

Broken in HomeAssistant beta (2023.4b0)

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:

Home Assistant2023.4b0

Last working release (if known):

Home Assistant 2023.3.6

Browser and Operating System:

any

Description of problem:

Card is no longer able to load templates located in lovelace config.

This is caused by changes in dom structure in HA frontend and getLovelace() (from "custom-card-helpers" dependency)
no longer returning lovelace config to Decluittering Card

Javascript errors shown in the web inspector (if applicable):

card custom:decluttering-card TypeError: can't access property "config", t is null

Additional information:

Feature request: support some templating

It will be nice to have an option for some templating.

Combination of button-card and decluttering-card causing additional empty space

Checklist:

• [ x] I updated to the latest version available
• [ x] I cleared the cache of my browser

Release with the issue:
0.6.3

Last working release (if known):
N/A

Browser and Operating System:

arch	x86_64
dev	false
docker	true
hassio	false
installation_type	Home Assistant Container
os_name	Linux
os_version	4.19.107-Unraid
python_version	3.7.7
timezone	America/Chicago
version	0.111.2
virtualenv	false

Description of problem:

When I use decluttering-card with button-card and it causes additional space after each button.

If I use only button-card then no issues.

              - type: custom:decluttering-card
                template: motion_sensors_battery_square
                variables:
                  - name: Bedroom
                  - entity: binary_sensor.wyzesense_777bfd2e
                  - entity2: sensor.tmpl_wyze_br_motion_sensor_battery

              - type: 'custom:button-card'
                template: blank_card_2px_width_style

              - type: custom:decluttering-card
                template: motion_sensors_battery_square
                variables:
                  - name: Laundry
                  - entity: binary_sensor.wyzesense_77a5f319
                  - entity2: sensor.tmpl_wyze_lr_motion_sensor_battery

Javascript errors shown in the web inspector (if applicable):

No errors

Additional information:

HACS 404 Error: 0.3.0 update

I'm getting a 404 (file not found) error message when trying to update via HACS. I tried uninstalling, then reinstalling the card, and I rebooted my server, but I still cannot update to 0.3.0. If I select 0.2.0 from the HACS menu I can get the previous version installed.

iframes in panel mode lose styling due to card-wrapping

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
0.5.0

Last working release (if known):
N/A

Browser and Operating System:
Chrome, OSX + Windows 10

Description of problem:
When decluttering-card is used to create a card of type: iframe which is subsequently used in a panel, the iframe only consumes 50% of the screen height. Simply using the iframe card directly causes the iframe to consume exactly the full viewport area. This is due to the way that decluttering-card wraps the iframe with its own card, but does not pass through the necessary CSS styles.

Javascript errors shown in the web inspector (if applicable):
N/A

Additional information:
N/A

Error using template

Hello, I have this template:

light_rgb_template:
  card:
    - type: custom:slider-entity-row
      entity: light.[[light_name]]
      style: |
        :host {
          color: {% if is_state('binary_sensor.[[light_name]]_autoon', 'on') %} green {% endif %};
        }
      toggle: true

And I use it like this:

            - type: custom:decluttering-card
              template: light_rgb_template
              variables:
                - light_name: hallway_tablelight

This is replacing my old config:

            - type: custom:slider-entity-row
              entity: light.hallway_tablelight
              style: |
                :host {
                  color: {% if is_state('binary_sensor.hallway_tablelight_autoon', 'on') %} green {% endif %};
                }
              toggle: true

In the Lovelace I get the error:

Cannot read property 'startsWith' of undefined
type: 'custom:decluttering-card'
template: light_rgb_template
variables:
  - light_name: hallway_tablelight

What I'm doing wrong? Or is this a bug?

Thank you