Add selectors for text and arbitrary objects (#8152)

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;
+  }
+}

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;
+  }
+}

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 {

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: {};
+}