Add template card and template chip

.hass_dev/lovelace-mushroom-showcase.yaml

@@ -6,5 +6,6 @@ views:
   - !include views/person-view.yaml
   - !include views/alarm-control-panel-view.yaml
   - !include views/fan-view.yaml
-  - !include views/chips-view.yaml
-  - !include views/sensor-view.yaml
+  - !include views/template-view.yaml
+  - !include views/sensor-view.yaml
+  - !include views/chips-view.yaml

.hass_dev/views/chips-view.yaml

@@ -90,4 +90,31 @@ cards:
             icon: mdi:github
             tap_action: 
               action: url
-              url_path: https://github.com/piitaya/mushroom-cards
+              url_path: https://github.com/piitaya/mushroom-cards
+  - type: vertical-stack
+    title: Template chip
+    cards:
+      - type: custom:mushroom-chips-card
+        chips:
+          - type: template
+            content: |
+              {% if is_state('light.bed_light', 'on') %}
+                The bedroom light is on !
+              {% else %}
+                The bedroom light is not on !
+              {% endif %}
+            icon: |
+              {% if is_state('light.bed_light', 'on') %}
+                mdi:ceiling-light
+              {% else %}
+                mdi:ceiling-light-outline
+              {% endif %}
+            tap_action:
+              action: call-service
+              service: light.toggle
+              target:
+                entity_id: light.bed_light
+          - type: template
+            content: |
+              {{ states | count }} entities
+            icon: mdi:format-list-bulleted

.hass_dev/views/template-view.yaml

@@ -0,0 +1,35 @@
+
+
+title: Switch
+icon: mdi:card-text
+cards:
+  - type: grid
+    title: Simple
+    cards:
+      - type: custom:mushroom-template-card
+        name: Hello, {{user}}
+        state: How are you?
+        icon: mdi:home
+      - type: custom:mushroom-template-card
+        name: Number of entities
+        state: |
+          {{ states | count }} entities
+        icon: mdi:format-list-bulleted
+    columns: 2
+    square: false
+  - type: grid
+    title: Vertical
+    cards:
+      - type: custom:mushroom-template-card
+        name: Hello, {{user}}
+        state: How are you?
+        icon: mdi:home
+        vertical: true
+      - type: custom:mushroom-template-card
+        name: Number of entities
+        state: |
+          {{ states | count }} entities
+        icon: mdi:format-list-bulleted
+        vertical: true
+    columns: 2
+    square: false

src/cards/chips-card/chips-card-chips-editor.ts

@@ -130,6 +130,7 @@ export class ChipsCardEditorChips extends LitElement {
                     <paper-item data-type="entity">Entity</paper-item>
                     <paper-item data-type="weather">Weather</paper-item>
                     <paper-item data-type="action">Action</paper-item>
+                    <paper-item data-type="template">Template</paper-item>
                 </paper-listbox>
             </paper-dropdown-menu>
         `;

src/cards/chips-card/chips-card.ts

@@ -9,7 +9,13 @@ import { customElement, property, state } from "lit/decorators.js";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { CHIPS_CARD_EDITOR_NAME, CHIPS_CARD_NAME } from "./const";
 import "../../shared/chip";
-import { BackChip, createChipElement, EntityChip, WeatherChip } from "./chips";
+import {
+    BackChip,
+    createChipElement,
+    EntityChip,
+    LovelaceChip,
+    WeatherChip,
+} from "./chips";
 import "./chips";
 import "./chips-card-editor";
 import { LovelaceChipConfig } from "../../utils/lovelace/chip/types";
@@ -45,10 +51,19 @@ export class ChipsCard extends LitElement implements LovelaceCard {
         };
     }
 
-    @property({ attribute: false }) public hass!: HomeAssistant;
-
     @state() private _config?: ChipsCardConfig;
 
+    private _hass?: HomeAssistant;
+
+    set hass(hass: HomeAssistant) {
+        this._hass = hass;
+        this.shadowRoot
+            ?.querySelectorAll("div > *")
+            .forEach((element: unknown) => {
+                (element as LovelaceChip).hass = hass;
+            });
+    }
+
     getCardSize(): number | Promise<number> {
         return 1;
     }
@@ -58,7 +73,7 @@ export class ChipsCard extends LitElement implements LovelaceCard {
     }
 
     protected render(): TemplateResult {
-        if (!this._config || !this.hass) {
+        if (!this._config || !this._hass) {
             return html``;
         }
 
@@ -74,10 +89,10 @@ export class ChipsCard extends LitElement implements LovelaceCard {
         if (!element) {
             return html``;
         }
-        if (this.hass) {
-            element.hass = this.hass;
+        if (this._hass) {
+            element.hass = this._hass;
         }
-        return html`${element}`;
+        return html`<div>${element}</div>`;
     }
 
     static get styles(): CSSResultGroup {

src/cards/chips-card/chips/index.ts

@@ -29,3 +29,4 @@ export { WeatherChip } from "./weather-chip";
 export { BackChip } from "./back-chip";
 export { ActionChip } from "./action-chip";
 export { MenuChip } from "./menu-chip";
+export { TemplateChip } from "./template-chip";

src/cards/chips-card/chips/template-chip-editor.ts

@@ -0,0 +1,131 @@
+import { fireEvent, HomeAssistant } from "custom-card-helpers";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import setupCustomlocalize from "../../../localize";
+import { configElementStyle } from "../../../utils/editor-styles";
+import { TemplateChipConfig } from "../../../utils/lovelace/chip/types";
+import { EditorTarget } from "../../../utils/lovelace/editor/types";
+import { LovelaceChipEditor } from "../../../utils/lovelace/types";
+import { computeChipEditorComponentName } from "../utils";
+
+const actions = ["navigate", "url", "call-service", "none"];
+
+@customElement(computeChipEditorComponentName("template"))
+export class EntityChipEditor extends LitElement implements LovelaceChipEditor {
+    @property({ attribute: false }) public hass?: HomeAssistant;
+
+    @state() private _config?: TemplateChipConfig;
+
+    public setConfig(config: TemplateChipConfig): void {
+        this._config = config;
+    }
+
+    protected render(): TemplateResult {
+        if (!this.hass || !this._config) {
+            return html``;
+        }
+
+        const customlocalize = setupCustomlocalize(this.hass);
+
+        return html`
+            <div class="card-config">
+                <paper-textarea
+                    .label="${customlocalize(
+                        "editor.chip.template.content"
+                    )} (${this.hass.localize(
+                        "ui.panel.lovelace.editor.card.config.optional"
+                    )})"
+                    .value=${this._config.content}
+                    .configValue=${"content"}
+                    @keydown=${this._ignoreKeydown}
+                    @value-changed=${this._valueChanged}
+                    autocapitalize="none"
+                    autocomplete="off"
+                    spellcheck="false"
+                ></paper-textarea>
+                <paper-textarea
+                    .label="${this.hass.localize(
+                        "ui.panel.lovelace.editor.card.generic.icon"
+                    )} (${this.hass.localize(
+                        "ui.panel.lovelace.editor.card.config.optional"
+                    )})"
+                    .value=${this._config.icon}
+                    .configValue=${"icon"}
+                    @keydown=${this._ignoreKeydown}
+                    @value-changed=${this._valueChanged}
+                    autocapitalize="none"
+                    autocomplete="off"
+                    spellcheck="false"
+                ></paper-textarea>
+                <div class="side-by-side">
+                    <hui-action-editor
+                        .label="${this.hass.localize(
+                            "ui.panel.lovelace.editor.card.generic.tap_action"
+                        )} (${this.hass.localize(
+                            "ui.panel.lovelace.editor.card.config.optional"
+                        )})"
+                        .hass=${this.hass}
+                        .config=${this._config.tap_action}
+                        .actions=${actions}
+                        .configValue=${"tap_action"}
+                        .tooltipText=${this.hass.localize(
+                            "ui.panel.lovelace.editor.card.button.default_action_help"
+                        )}
+                        @value-changed=${this._valueChanged}
+                    ></hui-action-editor>
+                    <hui-action-editor
+                        .label="${this.hass.localize(
+                            "ui.panel.lovelace.editor.card.generic.hold_action"
+                        )} (${this.hass.localize(
+                            "ui.panel.lovelace.editor.card.config.optional"
+                        )})"
+                        .hass=${this.hass}
+                        .config=${this._config.hold_action}
+                        .actions=${actions}
+                        .configValue=${"hold_action"}
+                        .tooltipText=${this.hass.localize(
+                            "ui.panel.lovelace.editor.card.button.default_action_help"
+                        )}
+                        @value-changed=${this._valueChanged}
+                    ></hui-action-editor>
+                </div>
+            </div>
+        `;
+    }
+
+    private _ignoreKeydown(ev: KeyboardEvent) {
+        // Stop keyboard events from the paper-textarea from propagating to avoid accidentally closing the dialog when the user presses Enter.
+        ev.stopPropagation();
+    }
+
+    private _valueChanged(ev: CustomEvent): void {
+        if (!this._config || !this.hass) {
+            return;
+        }
+        const target = ev.target! as EditorTarget;
+        const value =
+            target.checked !== undefined ? target.checked : ev.detail.value;
+
+        if (this[`_${target.configValue}`] === value) {
+            return;
+        }
+
+        let newConfig;
+        if (target.configValue) {
+            if (!value) {
+                newConfig = { ...this._config };
+                delete newConfig[target.configValue!];
+            } else {
+                newConfig = {
+                    ...this._config,
+                    [target.configValue!]: value,
+                };
+            }
+        }
+        fireEvent(this, "config-changed", { config: newConfig });
+    }
+
+    static get styles(): CSSResultGroup {
+        return configElementStyle;
+    }
+}