support state value templates

[thatkookooguy]

support state value templates

[thatkookooguy]

this worked to make the addition to the card persistent:

type: custom:mod-card
card:
  type: custom:vacuum-card
  entity: vacuum.roborock_s8_pro_ultra
  show_name: true
  show_status: true
  show_toolbar: true
  compact_view: false
  stats:
    default:
      - entity_id: sensor.roborock_s8_pro_ultra_filter_time_left
        unit: hours
        subtitle: Filter
        value_template: '{{ (value | float(0) / 3600) | round(1) }}'
      - unit: hours
        entity_id: sensor.roborock_s8_pro_ultra_side_brush_time_left
        subtitle: Side brush
        value_template: '{{ (value | float(0) / 3600) | round(1) }}'
      - entity_id: sensor.roborock_s8_pro_ultra_main_brush_time_left
        value_template: '{{ (value | float(0) / 3600) | round(1) }}'
        unit: hours
        subtitle: Main brush
      - entity_id: sensor.roborock_s8_pro_ultra_sensor_time_left
        value_template: '{{ (value | float(0) / 3600) | round(1) }}'
        unit: hours
        subtitle: Sensors
    cleaning:
      - entity_id: sensor.roborock_s8_pro_ultra_cleaning_time
        value_template: '{{ (value | float(0) / 3600) | round(1) }}'
        unit: minutes
        subtitle: Cleaning time
      - entity_id: sensor.roborock_s8_pro_ultra_main_brush_time_left
        value_template: '{{ (value | float(0) / 3600) | round(1) }}'
        subtitle: Main brush
        unit: hours
  shortcuts:
    - name: Clean living room
      service: script.clean_living_room
      icon: mdi:sofa
    - name: Clean bedroom
      service: script.clean_bedroom
      icon: mdi:bed-empty
    - name: Clean kitchen
      service: script.clean_kitchen
      icon: mdi:silverware-fork-knife
card_mod:
  style:
    vacuum-card $: |
      .metadata .status {
        flex-wrap: wrap;
      }

      .metadata .status::after {
        content: '{{ states('sensor.roborock_s8_pro_ultra_status') | replace('_', ' ') }}';
        display: block;
        text-transform: capitalize;
        color: var(--vc-secondary-text-color);
        width: 100%;
        opacity: 0.6;
      }

      .metadata .status .status-text {
        margin-left: 28px;
      }

        .metadata .status .status-text {
          margin-left: 28px;
        }

It's the same code just inside a custom:mod-card and using $ to penetrate the shadow dom isolation