support state value templates

[thatkookooguy]

Is your feature request related to a problem? Please describe.
In the new roborock home assistant integration, you have a separate sensor.roborock_s8_pro_ultra_status to report a more specific status (like cleaning the mop or charging). I want to merge the normal status with this one, or show it somewhere in the card
Describe the solution you'd like
an option to set a different entity for the status report, or just use a template

Describe alternatives you've considered
adding it under the normal state with card mod
this is what I currently do to show both (but it doesn't work on the dashboard view. only the preview):

type: custom:vacuum-card
entity: vacuum.roborock_s8_pro_ultra
card_mod:
  style: |
    .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;
    }
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

[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