thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.08k stars 168 forks source link

"hui-element" inside "mod-card": using "config.entity" causes an error #223

Closed ildar170975 closed 1 year ago

ildar170975 commented 1 year ago

My Home Assistant version: 2022.9.4

My lovelace configuration method (GUI or yaml): yaml/storage

What I am doing: Placed hui-element card inside mod-card, then trying to use config-entity in card-mod.

Consider this example:

type: entities
entities:
  - type: custom:hui-element
    row_type: toggle-entity
    entity: input_boolean.test_boolean
    card_mod:
      style: |
        :host {
          {% if is_state(config.entity,'on') %}
          color: red;
          {% else %}
          color: orange;
          {% endif %}
        }

  - type: custom:mod-card
    card:
      type: custom:hui-element
      row_type: toggle-entity
      entity: input_boolean.test_boolean
    card_mod:
      style:
        hui-element:
          $: |
            hui-generic-entity-row {
              color: red;
            }

  - type: custom:mod-card
    card:
      type: custom:hui-element
      row_type: toggle-entity
      entity: input_boolean.test_boolean
    card_mod:
      style:
        hui-element:
          $: |
            hui-generic-entity-row {
              {% if is_state(config.entity,'on') %}
              color: red;
              {% else %}
              color: orange;
              {% endif %}
            }

image There are 3 cases: -- hui-element with card-mod using config.entity - works OK, style is applied; -- mod-card contains hui-element; card-mod is defined on the mod-card's level - works OK, style is applied; -- same as above; card-mod using config.entity - does NOT work, style is NOT applied, there is an error: image

Why placing hui-element inside mod-card? Assume I need a conventional toggle-row (or input_select, or slider) with some settings & card-mod in MANY places. Then I create a decluttering-card with hui-element containing a conventional row. Since I need to specify card-mod and decluttering-card does not contain a ha-card, I have to insert hui-element inside mod-card. Here is a principal scheme:

my_input_select_row:
  default:
    ...
  card:
    type: custom:mod-card
    card:
      type: custom:hui-element
      row_type: input-select-entity
      entity: ...
      name: ...
      icon: ...
    card_mod:
      style:
        hui-element:
          $: |
            ha-select {
              ...
            }

So, using config.entity causing an error & a whole card-mod breaks if hui-element is inside mod-card. I guess this change happened recently (starting from this year).

Error messages from the browser console: See above.


By putting an X in the boxes ([]) below, I indicate that I:

ildar170975 commented 1 year ago

Seems I was wrong. The config.entity var is not supposed to be used on the mod-card's level. Closing the issue, awfully sorry.