lit templates in button card

[lisz8]

This is something I accidentally "discovered" and have been using for a while: the html tag function from lit is available in your template code. You can use it to create a field or embed another lit-template as part of your field.

---

I'll start with the latter, e.g. helpers.relativeTime returns a lit-template, and if you try to embed it in text, it won't work:

type: custom:button-card
name: |
  [[[
    const d = new Date(new Date().getFullYear(), 0, 1);
    return `Current year started ${helpers.relativeTime(d)}`;
  ]]]

The fix is super easy, just wrap the whole thing as a lit-template:

type: custom:button-card
name: |
  [[[
    const d = new Date(new Date().getFullYear(), 0, 1);
    return html`Current year started ${helpers.relativeTime(d)}`;
  ]]]

---

The html function allows the use of lit-expressions. The main benefit is the ability to use Home Assistant components, especially those that require initial configuration, such as passing a hass object. The following example demonstrates this. It uses the ha-entity-picker to enable the selection of a weather entity. This entity's attributes are then displayed through another part of the lit-template.

Details

type: custom:button-card
show_ripple: false
variables:
  weatherEntityAttributes: |
    [[[
      /* the id of the selected entity is saved in the card so that the selection survives switching between views */
      const id = this['weatherEntityId'];
      return states[id]?.attributes ?? {};
    ]]]
name: |
  [[[
    const data = variables.weatherEntityAttributes;
    return html`
      <ha-entity-picker
        .hass=${hass}
        .includeDomains=${['weather']}
        .value=${this['weatherEntityId']}
        placeholder="Select a weather entity"
        class="my-entity-picker"
        @value-changed=${e => {
          const selected = e.detail.value;
          this['weatherEntityId'] = selected;
          /* manual card update */
          this.update();
        }}
      >
      </ha-entity-picker>
      <div class="my-weather-grid">
        ${
          Object.entries(data).map(([k,v]) => html`
            <div 
              id=${k}
              class="my-weather-cell"
              .cellHeader=${k}
              @click=${e => {
                e.stopPropagation();
                const header = e.target.cellHeader;
                const details = data[header];
                helpers.toast({
                  message: `${header}: ${details}`,
                  duration: 2000,
                  dismissable: true,
                });
              }}
              @touchend=${e => e.target.click()}
            >
              <div class="my-weather-cell-header">
                ${k}
              </div>
              <div class="my-weather-cell-details">
                ${v}
              </div>
              <ha-ripple for=${k}></ha-ripple>
            </div> 
          `)
        }
      </div>
    `;
  ]]]
styles:
  card:
    - cursor: default
    - pointer-events: auto
  grid:
    - display: block
extra_styles: |
  .my-entity-picker {
    text-align: start;
    /* trailing space for placeholder text */
    --ha-space-4: 8px;
  }
  .my-weather-grid {
    margin-top: 24px;
    font-size: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
  }
  .my-weather-cell {
    /* ha-ripple requires this */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    border-radius: 12px;
    padding: 6px;
  }
  .my-weather-cell-header {
    pointer-events: none;
    padding-bottom: 2px;
    border-bottom: 1px solid;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .my-weather-cell-details {
    pointer-events: none;
    color: antiquewhite;
    text-wrap: wrap;
  }