feat(state_display): Support for `state_display` in `state`

Fixes #426

.devcontainer/ui-lovelace.yaml

@@ -2725,3 +2725,12 @@ views:
             - color: '#DADADB'
           label:
             - font-size: 6em
+
+      - type: custom:button-card
+        entity: switch.skylight
+        state_display: Default state_display
+        show_state: true
+        state:
+          - value: 'on'
+            state_display: state[].state_display
+          - value: 'off'

README.md

@@ -212,6 +212,7 @@ styles:
 | `spin`           | boolean       | `false`                                     | `true` \| `false`                                                                 | Should the icon spin for this state?                                                                                                                                                                      |
 | `entity_picture` | string        | optional                                    | Can be any of `/local/*` file or a URL                                            | Will override the icon/the default entity_picture with your own image for this state. Best is to use a square image. Supports templates, see [templates](#javascript-templates)                           |
 | `label`          | string        | optional                                    | Any string that you want                                                          | Display a label below the card. See [Layouts](#layout) for more information. Supports templates, see [templates](#javascript-templates)                                                                   |
+| `state_display`  | string        | optional                                    | `On`                                                                              | If defined, override the way the state is displayed. Supports templates, see [templates](#javascript-templates)                                                                                           |
 
 ### Available operators
 
@@ -750,7 +751,7 @@ Examples are better than a long text, so here you go:
 
 #### General
 
-- Define your config template in the main lovelace configuration and then use it in your button-card. This will avoid a lot of repetitions! It's basically YAML anchors, but without using YAML anchors and is very useful if you split your config in multiple files 😄  
+- Define your config template in the main lovelace configuration and then use it in your button-card. This will avoid a lot of repetitions! It's basically YAML anchors, but without using YAML anchors and is very useful if you split your config in multiple files 😄
 - You can overload any parameter with a new one
 - You can merge states together **by `id`** when using templates. The states you want to merge have to have the same `id`. This `id` parameter is new and can be anything (string, number, ...). States without `id` will be appended to the state array. Styles embedded in a state are merged together as usual. See [here](#merging-state-by-id) for an example.
 - You can also inherit another template from within a template.
@@ -766,11 +767,12 @@ Examples are better than a long text, so here you go:
   The button templates will be applied in the order they are defined: `template2` will be merged with `template1` and then the local config will be merged with the result. You can still chain templates together (ie. define template in a button-card template. It will follow the path recursively).
 
 Make sure which type of lovelace dashboard you are using before changing the main lovelace configuration:
-  * **`managed`** changes are managed by lovelace ui - add the template configuration to configuration in raw editor
-      * go to your dashboard
-      * click three dots and `Edit dashboard` button 
-      * click three dots again and click `Raw configuration editor` button
-  * **`yaml`** - add template configuration to your `ui-lovelace.yaml`
+
+- **`managed`** changes are managed by lovelace ui - add the template configuration to configuration in raw editor
+  - go to your dashboard
+  - click three dots and `Edit dashboard` button
+  - click three dots again and click `Raw configuration editor` button
+- **`yaml`** - add template configuration to your `ui-lovelace.yaml`
 
 ```yaml
 button_card_templates:

src/button-card.ts

@@ -799,10 +799,9 @@ class ButtonCard extends LitElement {
     color: string,
   ): TemplateResult {
     const name = this._buildName(state, configState);
+    const stateDisplayActual = configState?.state_display || this._config!.state_display || undefined;
     const stateDisplay =
-      this._config!.show_state && this._config!.state_display
-        ? this._getTemplateOrValue(state, this._config!.state_display)
-        : undefined;
+      this._config!.show_state && stateDisplayActual ? this._getTemplateOrValue(state, stateDisplayActual) : undefined;
     const stateString = stateDisplay ? stateDisplay : this._buildStateString(state);
     const nameStateString = buildNameStateConcat(name, stateString);
 

src/types.ts

@@ -120,6 +120,7 @@ export interface StateConfig {
   spin?: boolean;
   label?: string;
   custom_fields?: CustomFields;
+  state_display?: string;
 }
 
 export interface StylesConfig {