[FR] Ability to translate attributes and states

[robinjhector]

Is your feature request related to a problem? Please describe.

Not sure

Describe the solution you'd like

Some easy way of interpolating the translated strings.

Describe alternatives you've considered

N/A

Additional context

Given I have sensor, that has a state:
sensor.ehm6g88s_status -> awaiting_start.

This is translated in the custom component, so how do i get the translated string in my card?
If I were to use a regular Entity card or similar, it would be translated properly. How do I achieve the same-ish behaviour with the config-template-card?

Here's an example:

- type: custom:config-template-card
  entities:
    - sensor.ehm6g88s_status
  card:
    type: button
    show_name: true
    show_icon: true
    state_color: false
    tap_action:
      action: toggle
    entity: switch.ehm6g88s_smart_charging
    icon: mdi:power
    show_state: false
    name: ${states['sensor.ehm6g88s_status'].state}

[ildar170975]

Inside config-template-card you can use JS to access to HA objects.
I guess (may be wrong) that translations ("above_horizon -> Above horizon", "on -> Connected") are not part of these objects...

[ildar170975]

Currently translations are not a part of states object.
They cannot be read in jinja templates - and in JS templates as well.
This may probably be made as a local "helper function" (like it is made for custom:button-card).

Converted to FR.

[ildar170975]

Here is a way to translate a state:

type: custom:config-template-card
entities:
  - sun.sun
variables:
  localizedState: |
    (entity) => {
        const hass = document.querySelector('home-assistant').hass;
        const value = states[entity].state;
        const domain = entity.split('.')[0];
        const key = 'component.' + domain + '.entity_component._.state.' + value;
        return hass.resources[hass.language][key];
      }
card:
  type: entity
  entity: sun.sun
  name: ${localizedState('sun.sun')}