Allow merge operator for variables

[johannes-z]

Is your feature request related to a problem? Please describe.
I would like to define a map of properties to customize how a card is shown. In my example I use the layout card to customize layouting, but I want to be able to dynamically set which cards are rendered.

Apparently the <<: operator right now is processed before the variables are processed. So in my example below, yaml processes this:

- <<: "[[entity]]"

instead of this:

- <<:
    type: tile
    entity: cover.e05_blinds

Describe the solution you'd like
Add support for the <<: operator for variables. This way you can specify defaults for a card, and extend the defaults with an arbitrary object.

Describe alternatives you've considered
I would have to specify each and every attribute as a variable. As I want to be able to use any card type, I would have to go over all properties I want and specify them as variables.

Additional context

Template

default:
  - entity:
      type: card
card:
  type: custom:vertical-stack-in-card
  foo: &foo "[[entity]]"
  cards:
    - type: custom:layout-card
      layout_type: custom:grid-layout
      layout:
        margin: -4px -4px -8px
        padding: 0
        card_margin: 0
        grid-template-columns: "1fr 50px 50px 50px 12px"
        grid-template-rows: auto
        grid-template-areas: |
          "main e1 e2 e3 ."
      cards:
        - type: tile
          entity: light.e05_light
          view_layout:
            grid-area: main
        - "[[entity]]" # works
        - <<: "[[entity]]" # doesn't work
        - *foo # works
        - <<: *foo # doesn't work
          view_layout:
            grid-area: e3

Usage

type: custom:decluttering-card
template: entity-controls
variables:
  - entity:
      type: tile
      entity: light.e05_light

Edit: If the yaml processing cannot be deferred, maybe a special syntax for variables can be added, <<: [[entity]]. The deepReplace function can then spread the object onto the config.

[RomRider]

<< is processed by the yaml parser before it lands as a card configuration for the frontend to process. Nothing I can do about that.

[johannes-z]

I'm thinking of a custom syntax to do that, for example I've tried to add this:

- "<<:[[entity]]": null
  view_layout:
    grid-area: main

deep-replace then replaces this with the object value:

      const rxp3 = new RegExp(`"<<:\\[\\[${key}\\]\\]":null`, 'gm');
      jsonConfig = jsonConfig.replace(rxp3, valueString.slice(1, -1));

This basically works, just as a quick hack. Of course it would be nice expanding on this syntax. For example, I would also like to not add anything when the variable isn't defined.

What do you think about adding a special syntax for this? If you're interested I could create a PR for this.

[droans]

I would love this too. Here's my example.

Template:

  tv_remote_card:
    default:
      - repeat: 200
    card:
      type: custom:button-card
      icon: '[[icon]]'
      color: rgb(68, 115, 158)
      tap_action: '[[service]]'
      hold_action: 
        <<: '[[service]]' # Or however else we would do it...
        repeat: '[[repeat]]'

Card config:

type: custom:decluttering-card
template: tv_remote_card
variables:
  - icon: mdi:volume-plus
  - service: 
      action: call-service
      service: media_player.volume_up
      target:
        entity_id: media_player.living_room

[ildar170975]

@droans
In most cases there is no need to use decluttering-card for button-card since there is a button-card-templates feature.