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