From 5c0e151bc27852a2035c6326e63bef12e0fe9fe5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Wed, 27 Jan 2021 11:45:51 +0100
Subject: [PATCH] Add selectors for text and arbitrary objects (#8152)

---
 .../ha-selector/ha-selector-object.ts         | 37 ++++++++++++++
 .../ha-selector/ha-selector-text.ts           | 50 +++++++++++++++++++
 src/components/ha-selector/ha-selector.ts     |  2 +
 src/data/selector.ts                          | 15 +++++-
 4 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ha-selector/ha-selector-object.ts
 create mode 100644 src/components/ha-selector/ha-selector-text.ts

diff --git a/src/components/ha-selector/ha-selector-object.ts b/src/components/ha-selector/ha-selector-object.ts
new file mode 100644
index 0000000000..29159e3e8f
--- /dev/null
+++ b/src/components/ha-selector/ha-selector-object.ts
@@ -0,0 +1,37 @@
+import { customElement, html, LitElement, property } from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import { HomeAssistant } from "../../types";
+import "../ha-yaml-editor";
+
+@customElement("ha-selector-object")
+export class HaObjectSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  protected render() {
+    return html`<ha-yaml-editor
+      .defaultValue=${this.value}
+      @value-changed=${this._handleChange}
+    ></ha-yaml-editor>`;
+  }
+
+  private _handleChange(ev) {
+    const value = ev.target.value;
+    if (!ev.target.isValid) {
+      return;
+    }
+    if (this.value === value) {
+      return;
+    }
+    fireEvent(this, "value-changed", { value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-object": HaObjectSelector;
+  }
+}
diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts
new file mode 100644
index 0000000000..32fa638ff0
--- /dev/null
+++ b/src/components/ha-selector/ha-selector-text.ts
@@ -0,0 +1,50 @@
+import { customElement, html, LitElement, property } from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import { HomeAssistant } from "../../types";
+import "@polymer/paper-input/paper-textarea";
+import "@polymer/paper-input/paper-input";
+import { StringSelector } from "../../data/selector";
+
+@customElement("ha-selector-text")
+export class HaTextSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public selector!: StringSelector;
+
+  protected render() {
+    if (this.selector.text?.multiline) {
+      return html`<paper-textarea
+        .label=${this.label}
+        .value="${this.value}"
+        @value-changed="${this._handleChange}"
+        autocapitalize="none"
+        autocomplete="off"
+        spellcheck="false"
+      ></paper-textarea>`;
+    }
+    return html`<paper-input
+      required
+      .value=${this.value}
+      @value-changed=${this._handleChange}
+      .label=${this.label}
+    ></paper-input>`;
+  }
+
+  private _handleChange(ev) {
+    const value = ev.target.value;
+    if (this.value === value) {
+      return;
+    }
+    fireEvent(this, "value-changed", { value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-text": HaTextSelector;
+  }
+}
diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts
index 57e22a34f8..88d702c9d1 100644
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -10,6 +10,8 @@ import "./ha-selector-entity";
 import "./ha-selector-number";
 import "./ha-selector-target";
 import "./ha-selector-time";
+import "./ha-selector-object";
+import "./ha-selector-text";
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
diff --git a/src/data/selector.ts b/src/data/selector.ts
index 82749ae90c..e045ce8b88 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -6,7 +6,9 @@ export type Selector =
   | NumberSelector
   | BooleanSelector
   | TimeSelector
-  | ActionSelector;
+  | ActionSelector
+  | StringSelector
+  | ObjectSelector;
 
 export interface EntitySelector {
   entity: {
@@ -82,3 +84,14 @@ export interface ActionSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   action: {};
 }
+
+export interface StringSelector {
+  text: {
+    multiline: boolean;
+  };
+}
+
+export interface ObjectSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  object: {};
+}