Add multiple option to text selector (#18785)

* Add multiple option to text selector

* Make multiple optional

* Update src/components/ha-selector/ha-selector-text.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/ha-aliases-editor.ts

@@ -1,12 +1,8 @@
-import "@material/mwc-button/mwc-button";
+import { LitElement, html, nothing } from "lit";
-import { mdiDeleteOutline, mdiPlus } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { haStyle } from "../resources/styles";
-import { HomeAssistant } from "../types";
-import "./ha-textfield";
-import type { HaTextField } from "./ha-textfield";
 import { fireEvent } from "../common/dom/fire_event";
+import { HomeAssistant } from "../types";
+import "./ha-multi-textfield";
 
 @customElement("ha-aliases-editor")
 class AliasesEditor extends LitElement {
@@ -22,107 +18,23 @@ class AliasesEditor extends LitElement {
     }
 
     return html`
-      ${this.aliases.map(
+      <ha-multi-textfield
-        (alias, index) => html`
+        .hass=${this.hass}
-          <div class="layout horizontal center-center row">
+        .value=${this.aliases}
-            <ha-textfield
         .disabled=${this.disabled}
-              dialogInitialFocus=${index}
+        .label=${this.hass!.localize("ui.dialogs.aliases.label")}
-              .index=${index}
+        .removeLabel=${this.hass!.localize("ui.dialogs.aliases.remove")}
-              class="flex-auto"
+        .addLabel=${this.hass!.localize("ui.dialogs.aliases.add")}
-              .label=${this.hass!.localize("ui.dialogs.aliases.input_label", {
+        item-index
-                number: index + 1,
+        @value-changed=${this._aliasesChanged}
-              })}
+      >
-              .value=${alias}
+      </ha-multi-textfield>
-              ?data-last=${index === this.aliases.length - 1}
-              @input=${this._editAlias}
-              @keydown=${this._keyDownAlias}
-            ></ha-textfield>
-            <ha-icon-button
-              .disabled=${this.disabled}
-              .index=${index}
-              slot="navigationIcon"
-              label=${this.hass!.localize("ui.dialogs.aliases.remove_alias", {
-                number: index + 1,
-              })}
-              @click=${this._removeAlias}
-              .path=${mdiDeleteOutline}
-            ></ha-icon-button>
-          </div>
-        `
-      )}
-      <div class="layout horizontal center-center">
-        <mwc-button @click=${this._addAlias} .disabled=${this.disabled}>
-          ${this.hass!.localize("ui.dialogs.aliases.add_alias")}
-          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-        </mwc-button>
-      </div>
     `;
   }
 
-  private async _addAlias() {
+  private _aliasesChanged(value) {
-    this.aliases = [...this.aliases, ""];
-    this._fireChanged(this.aliases);
-    await this.updateComplete;
-    const field = this.shadowRoot?.querySelector(`ha-textfield[data-last]`) as
-      | HaTextField
-      | undefined;
-    field?.focus();
-  }
-
-  private async _editAlias(ev: Event) {
-    const index = (ev.target as any).index;
-    const aliases = [...this.aliases];
-    aliases[index] = (ev.target as any).value;
-    this._fireChanged(aliases);
-  }
-
-  private async _keyDownAlias(ev: KeyboardEvent) {
-    if (ev.key === "Enter") {
-      ev.stopPropagation();
-      this._addAlias();
-    }
-  }
-
-  private async _removeAlias(ev: Event) {
-    const index = (ev.target as any).index;
-    const aliases = [...this.aliases];
-    aliases.splice(index, 1);
-    this._fireChanged(aliases);
-  }
-
-  private _fireChanged(value) {
     fireEvent(this, "value-changed", { value });
   }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        .row {
-          margin-bottom: 8px;
-        }
-        ha-textfield {
-          display: block;
-        }
-        ha-icon-button {
-          display: block;
-        }
-        mwc-button {
-          margin-left: 8px;
-        }
-        #alias_input {
-          margin-top: 8px;
-        }
-        .alias {
-          border: 1px solid var(--divider-color);
-          border-radius: 4px;
-          margin-top: 4px;
-          --mdc-icon-button-size: 24px;
-        }
-      `,
-    ];
-  }
 }
 
 declare global {

src/components/ha-multi-textfield.ts

@@ -0,0 +1,144 @@
+import { mdiDeleteOutline, mdiPlus } from "@mdi/js";
+import { CSSResultGroup, LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { haStyle } from "../resources/styles";
+import type { HomeAssistant } from "../types";
+import "./ha-button";
+import "./ha-textfield";
+import type { HaTextField } from "./ha-textfield";
+
+@customElement("ha-multi-textfield")
+class HaMultiTextField extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public value?: string[];
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() public label?: string;
+
+  @property() public inputType?: string;
+
+  @property() public inputSuffix?: string;
+
+  @property() public inputPrefix?: string;
+
+  @property() public autocomplete?: string;
+
+  @property() public addLabel?: string;
+
+  @property() public removeLabel?: string;
+
+  @property({ attribute: "item-index", type: Boolean })
+  public itemIndex?: boolean;
+
+  protected render() {
+    return html`
+      ${this._items.map((item, index) => {
+        const indexSuffix = `${this.itemIndex ? ` ${index + 1}` : ""}`;
+        return html`
+          <div class="layout horizontal center-center row">
+            <ha-textfield
+              .suffix=${this.inputSuffix}
+              .prefix=${this.inputPrefix}
+              .type=${this.inputType}
+              .autocomplete=${this.autocomplete}
+              .disabled=${this.disabled}
+              dialogInitialFocus=${index}
+              .index=${index}
+              class="flex-auto"
+              .label=${`${this.label ? `${this.label}${indexSuffix}` : ""}`}
+              .value=${item}
+              ?data-last=${index === this._items.length - 1}
+              @input=${this._editItem}
+              @keydown=${this._keyDown}
+            ></ha-textfield>
+            <ha-icon-button
+              .disabled=${this.disabled}
+              .index=${index}
+              slot="navigationIcon"
+              .label=${this.removeLabel ??
+              this.hass?.localize("ui.common.remove") ??
+              "Remove"}
+              @click=${this._removeItem}
+              .path=${mdiDeleteOutline}
+            ></ha-icon-button>
+          </div>
+        `;
+      })}
+      <div class="layout horizontal center-center">
+        <ha-button @click=${this._addItem} .disabled=${this.disabled}>
+          ${this.addLabel ?? this.hass?.localize("ui.common.add") ?? "Add"}
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+        </ha-button>
+      </div>
+    `;
+  }
+
+  private get _items() {
+    return this.value ?? [];
+  }
+
+  private async _addItem() {
+    const items = [...this._items, ""];
+    this._fireChanged(items);
+    await this.updateComplete;
+    const field = this.shadowRoot?.querySelector(`ha-textfield[data-last]`) as
+      | HaTextField
+      | undefined;
+    field?.focus();
+  }
+
+  private async _editItem(ev: Event) {
+    const index = (ev.target as any).index;
+    const items = [...this._items];
+    items[index] = (ev.target as any).value;
+    this._fireChanged(items);
+  }
+
+  private async _keyDown(ev: KeyboardEvent) {
+    if (ev.key === "Enter") {
+      ev.stopPropagation();
+      this._addItem();
+    }
+  }
+
+  private async _removeItem(ev: Event) {
+    const index = (ev.target as any).index;
+    const items = [...this._items];
+    items.splice(index, 1);
+    this._fireChanged(items);
+  }
+
+  private _fireChanged(value) {
+    this.value = value;
+    fireEvent(this, "value-changed", { value });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .row {
+          margin-bottom: 8px;
+        }
+        ha-textfield {
+          display: block;
+        }
+        ha-icon-button {
+          display: block;
+        }
+        ha-button {
+          margin-left: 8px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-multi-textfield": HaMultiTextField;
+  }
+}

src/components/ha-selector/ha-selector-text.ts

@@ -1,10 +1,12 @@
 import { mdiEye, mdiEyeOff } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement } from "lit";
+import { CSSResultGroup, LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { StringSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../ha-icon-button";
+import "../ha-multi-textfield";
 import "../ha-textarea";
 import "../ha-textfield";
 
@@ -38,6 +40,22 @@ export class HaTextSelector extends LitElement {
   }
 
   protected render() {
+    if (this.selector.text?.multiple) {
+      return html`
+        <ha-multi-textfield
+          .hass=${this.hass}
+          .value=${ensureArray(this.value ?? [])}
+          .disabled=${this.disabled}
+          .label=${this.label}
+          .inputType=${this.selector.text?.type}
+          .inputSuffix=${this.selector.text?.suffix}
+          .inputPrefix=${this.selector.text?.prefix}
+          .autocomplete=${this.selector.text?.autocomplete}
+          @value-changed=${this._handleChange}
+        >
+        </ha-multi-textfield>
+      `;
+    }
     if (this.selector.text?.multiline) {
       return html`<ha-textarea
         .name=${this.name}
@@ -92,11 +110,14 @@ export class HaTextSelector extends LitElement {
   }
 
   private _handleChange(ev) {
-    let value = ev.target.value;
+    let value = ev.detail?.value ?? ev.target.value;
     if (this.value === value) {
       return;
     }
-    if (value === "" && !this.required) {
+    if (
+      (value === "" || (Array.isArray(value) && value.length === 0)) &&
+      !this.required
+    ) {
       value = undefined;
     }
 

src/data/selector.ts

@@ -347,6 +347,7 @@ export interface StringSelector {
     prefix?: string;
     suffix?: string;
     autocomplete?: string;
+    multiple?: true;
   } | null;
 }
 

src/translations/en.json

@@ -1240,10 +1240,10 @@
       },
       "aliases": {
         "heading": "{name} aliases",
-        "remove_alias": "Remove alias {number}",
+        "label": "Alias",
-        "input_label": "Alias {number}",
+        "remove": "Remove alias",
         "save": "Save",
-        "add_alias": "Add alias",
+        "add": "Add alias",
         "no_aliases": "No aliases have been added yet",
         "update": "Update",
         "unknown_error": "Unknown error"