From 61c8ba85993aa722f6a3a12937ebaddc396d6bd1 Mon Sep 17 00:00:00 2001
From: karwosts <karwosts@gmail.com>
Date: Wed, 8 Jan 2025 21:16:49 +0000
Subject: [PATCH 1/4] Add helper to multi-textfield

---
 src/components/ha-multi-textfield.ts           | 14 ++++++++++++--
 src/components/ha-selector/ha-selector-text.ts |  1 +
 src/translations/en.json                       |  3 +++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/ha-multi-textfield.ts b/src/components/ha-multi-textfield.ts
index 2e5e5e73d94a..2f1af481f233 100644
--- a/src/components/ha-multi-textfield.ts
+++ b/src/components/ha-multi-textfield.ts
@@ -1,6 +1,6 @@
 import { mdiDeleteOutline, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyle } from "../resources/styles";
@@ -8,6 +8,7 @@ import type { HomeAssistant } from "../types";
 import "./ha-button";
 import "./ha-icon-button";
 import "./ha-textfield";
+import "./ha-input-helper-text";
 import type { HaTextField } from "./ha-textfield";
 
 @customElement("ha-multi-textfield")
@@ -20,6 +21,8 @@ class HaMultiTextField extends LitElement {
 
   @property() public label?: string;
 
+  @property({ attribute: false }) public helper?: string;
+
   @property({ attribute: false }) public inputType?: string;
 
   @property({ attribute: false }) public inputSuffix?: string;
@@ -71,10 +74,17 @@ class HaMultiTextField extends LitElement {
       })}
       <div class="layout horizontal center-center">
         <ha-button @click=${this._addItem} .disabled=${this.disabled}>
-          ${this.addLabel ?? this.hass?.localize("ui.common.add") ?? "Add"}
+          ${this.addLabel ??
+          this.hass?.localize("ui.components.multi-textfield.add_item", {
+            item: this.label || "",
+          }) ??
+          "Add"}
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-button>
       </div>
+      ${this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        : nothing}
     `;
   }
 
diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts
index ada813f6ac52..57c07bd09cfc 100644
--- a/src/components/ha-selector/ha-selector-text.ts
+++ b/src/components/ha-selector/ha-selector-text.ts
@@ -51,6 +51,7 @@ export class HaTextSelector extends LitElement {
           .inputType=${this.selector.text?.type}
           .inputSuffix=${this.selector.text?.suffix}
           .inputPrefix=${this.selector.text?.prefix}
+          .helper=${this.helper}
           .autocomplete=${this.selector.text?.autocomplete}
           @value-changed=${this._handleChange}
         >
diff --git a/src/translations/en.json b/src/translations/en.json
index 08e32000fb82..071ab1394aeb 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1112,6 +1112,9 @@
         "last_updated": "Last updated",
         "remaining_time": "Remaining time",
         "install_status": "Install status"
+      },
+      "multi-textfield": {
+        "add_item": "Add {item}"
       }
     },
     "dialogs": {

From ab9d6edae6456c2bd27c8cd69f709ae57636b538 Mon Sep 17 00:00:00 2001
From: karwosts <karwosts@gmail.com>
Date: Wed, 8 Jan 2025 21:19:49 +0000
Subject: [PATCH 2/4] remove useless string

---
 src/components/ha-multi-textfield.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/ha-multi-textfield.ts b/src/components/ha-multi-textfield.ts
index 2f1af481f233..ec6dc3ad8c23 100644
--- a/src/components/ha-multi-textfield.ts
+++ b/src/components/ha-multi-textfield.ts
@@ -77,8 +77,7 @@ class HaMultiTextField extends LitElement {
           ${this.addLabel ??
           this.hass?.localize("ui.components.multi-textfield.add_item", {
             item: this.label || "",
-          }) ??
-          "Add"}
+          })}
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-button>
       </div>

From c00b476dfc3cda7ee96ffa0b86097886c5205abe Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Fri, 17 Jan 2025 04:59:40 -0800
Subject: [PATCH 3/4] Update src/components/ha-multi-textfield.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/components/ha-multi-textfield.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ha-multi-textfield.ts b/src/components/ha-multi-textfield.ts
index ec6dc3ad8c23..079e6c884651 100644
--- a/src/components/ha-multi-textfield.ts
+++ b/src/components/ha-multi-textfield.ts
@@ -75,9 +75,9 @@ class HaMultiTextField extends LitElement {
       <div class="layout horizontal center-center">
         <ha-button @click=${this._addItem} .disabled=${this.disabled}>
           ${this.addLabel ??
-          this.hass?.localize("ui.components.multi-textfield.add_item", {
-            item: this.label || "",
-          })}
+          (this.label ? this.hass?.localize("ui.components.multi-textfield.add_item", {
+            item: this.label,
+          }) : this.hass?.localize("ui.common.add")) ?? "Add"}
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-button>
       </div>

From 550b845a86af3c7d5e33b022c9be8a62f9e62e5b Mon Sep 17 00:00:00 2001
From: karwosts <karwosts@gmail.com>
Date: Fri, 17 Jan 2025 13:07:19 +0000
Subject: [PATCH 4/4] left align button

---
 src/components/ha-multi-textfield.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/ha-multi-textfield.ts b/src/components/ha-multi-textfield.ts
index 079e6c884651..dd1d46b8b2ee 100644
--- a/src/components/ha-multi-textfield.ts
+++ b/src/components/ha-multi-textfield.ts
@@ -72,12 +72,15 @@ class HaMultiTextField extends LitElement {
           </div>
         `;
       })}
-      <div class="layout horizontal center-center">
+      <div class="layout horizontal">
         <ha-button @click=${this._addItem} .disabled=${this.disabled}>
           ${this.addLabel ??
-          (this.label ? this.hass?.localize("ui.components.multi-textfield.add_item", {
-            item: this.label,
-          }) : this.hass?.localize("ui.common.add")) ?? "Add"}
+          (this.label
+            ? this.hass?.localize("ui.components.multi-textfield.add_item", {
+                item: this.label,
+              })
+            : this.hass?.localize("ui.common.add")) ??
+          "Add"}
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-button>
       </div>