From 6fd4cda53488c570504f78a578ef3e7bd6baa6b8 Mon Sep 17 00:00:00 2001
From: Franck Nijhof <git@frenck.dev>
Date: Mon, 18 Apr 2022 18:17:44 +0200
Subject: [PATCH] Add Template selector (#12348)

---
 gallery/src/pages/components/ha-selector.ts   |  1 +
 .../ha-selector/ha-selector-template.ts       | 56 +++++++++++++++++++
 src/components/ha-selector/ha-selector.ts     |  1 +
 src/data/selector.ts                          |  6 ++
 4 files changed, 64 insertions(+)
 create mode 100644 src/components/ha-selector/ha-selector-template.ts

diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts
index 972c7d7f26..6ce04e0995 100644
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -170,6 +170,7 @@ const SCHEMAS: {
           select: { options: ["Option 1", "Option 2"], mode: "list" },
         },
       },
+      template: { name: "Template", selector: { template: {} } },
       select: {
         name: "Select",
         selector: {
diff --git a/src/components/ha-selector/ha-selector-template.ts b/src/components/ha-selector/ha-selector-template.ts
new file mode 100644
index 0000000000..1140ec83a7
--- /dev/null
+++ b/src/components/ha-selector/ha-selector-template.ts
@@ -0,0 +1,56 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import { HomeAssistant } from "../../types";
+import "../ha-code-editor";
+import "../ha-input-helper-text";
+
+@customElement("ha-selector-template")
+export class HaTemplateSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    return html`
+      ${this.label
+        ? html`<p>${this.label}${this.required ? " *" : ""}</p>`
+        : ""}
+      <ha-code-editor
+        mode="jinja2"
+        .hass=${this.hass}
+        .value=${this.value}
+        .readOnly=${this.disabled}
+        autofocus
+        autocomplete-entities
+        @value-changed=${this._handleChange}
+        dir="ltr"
+      ></ha-code-editor>
+      ${this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        : ""}
+    `;
+  }
+
+  private _handleChange(ev) {
+    const value = ev.target.value;
+    if (this.value === value) {
+      return;
+    }
+    fireEvent(this, "value-changed", { value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-template": HaTemplateSelector;
+  }
+}
diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts
index 09a234e55c..e2b3fdbf97 100644
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -18,6 +18,7 @@ import "./ha-selector-number";
 import "./ha-selector-object";
 import "./ha-selector-select";
 import "./ha-selector-target";
+import "./ha-selector-template";
 import "./ha-selector-text";
 import "./ha-selector-time";
 import "./ha-selector-icon";
diff --git a/src/data/selector.ts b/src/data/selector.ts
index 10cda864b7..d0f3b0e61c 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -19,6 +19,7 @@ export type Selector =
   | SelectSelector
   | StringSelector
   | TargetSelector
+  | TemplateSelector
   | ThemeSelector
   | TimeSelector;
 
@@ -213,6 +214,11 @@ export interface TargetSelector {
   };
 }
 
+export interface TemplateSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  template: {};
+}
+
 export interface ThemeSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   theme: {};