[FR] User defined properties (user_data) to be used inside custom styles

[marcuscps]

I've been wondering if it is possible to use card configurations inside custom styles.

I've been using Bubble Card with Decluttering-Card quite a bit. One common use case is to create a reusable Timer Card with Round Progress Bar template based on the example #937, then instantiate it several times across the UI.

Sometimes I want to remove the Finish sub button, though. The only way to do it AFAIK is to create another template without such sub button, leaving the original untouched (to preserve its use cases).

It made me wonder if we could make Bubble Card even more flexible by introducing a user_data card property that would be made available as a template variable (and as a consequence when processing the custom styles).

This way one could do something like this (omitting most of the css from the example mentioned for conciseness):

decluttering_templates:
  round_timer_card:
    default:
      - hide_finish: false
    card:
      type: custom:bubble-card
      card_type: button
      button_type: state
      name: '[[name]]'
      entity: '[[timer_entity]]'
      icon: '[[icon]]'
      show_state: true
      show_name: true
      show_icon: true
      card_layout: large
      user_data:
        - hide_finish: '[[hide_finish]]'
      sub_button:
        - entity: '[[timer_entity]]'
          icon: mdi:play
          tap_action:
            action: call-service
            service: timer.start
            target:
              entity_id: '[[timer_entity]]'
        - entity: '[[timer_entity]]'
          icon: mdi:pause
          ...
        - entity: '[[timer_entity]]'
          icon: mdi:cancel
          ...
        - entity: '[[timer_entity]]'
          icon: mdi:clock-end
          ...
      styles: |
        ...
        ${(() => {
          if (user_data.hide_finish) {
            card.querySelector('.bubble-sub-button-4').classList.add("hidden");
          }
        })()}

It could be used like this:

type: vertical-stack
title: Heating timers
cards:
  - type: custom:decluttering-card
    template: round_timer_card
    variables:
      - name: Towel Rails
      - entity: timer.towel_racks_timer
      - icon: mdi:heating-coil
      - hide_finish: true 
  - type: custom:decluttering-card
    template: round_timer_card
    variables:
      - name: Electric Heater
      - entity: timer.electric_heater
      - icon: mdi:heating-coil

Where the first one would never show the Finish sub button, but the second would.

This creates a bridge for providing declarative configurations that can be used for component customisation in the imperative part of the component. This would make it incredibly flexible while promoting code reuse.

I'm not sure the user_data syntax would work this way, but I'm sure something similar can be achieved.

Opinions?