feat(ui5-input): show associated label as mobile dialog header title

The mobile full-screen dialog for Input and MultiInput now displays the
associated label text as the header title instead of the generic
"All Items". Falls back to "All Items" when no label exists.

Author: ivoplashkov

packages/main/cypress/specs/Input.mobile.cy.tsx

@@ -2,7 +2,8 @@ import Input from "../../src/Input.js";
 import "../../src/features/InputSuggestions.js";
 import type ResponsivePopover from "../../src/ResponsivePopover.js";
 import SuggestionItem from "../../src/SuggestionItem.js";
-import { INPUT_SUGGESTIONS_OK_BUTTON, INPUT_SUGGESTIONS_CANCEL_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
+import { INPUT_SUGGESTIONS_OK_BUTTON, INPUT_SUGGESTIONS_CANCEL_BUTTON, INPUT_SUGGESTIONS_TITLE } from "../../src/generated/i18n/i18n-defaults.js";
+import Label from "../../src/Label.js";
 
 describe("Input on mobile device", () => {
 	beforeEach(() => {
@@ -442,3 +443,54 @@ describe("Property open", () => {
 		.ui5ResponsivePopoverClosed();
 	});
 });
+
+describe("Dialog header title", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice("phone");
+	});
+
+	it("Should display label text as dialog header title when label for is used", () => {
+		cy.mount(
+			<>
+				<Label for="myInput">Country</Label>
+				<Input id="myInput" showSuggestions>
+					<SuggestionItem text="Item 1" />
+					<SuggestionItem text="Item 2" />
+				</Input>
+			</>
+		);
+
+		cy.get("#myInput").realClick();
+
+		cy.get("#myInput")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+
+		cy.get("#myInput")
+			.shadow()
+			.find("[ui5-responsive-popover] .ui5-responsive-popover-header-text")
+			.should("have.text", "Country");
+	});
+
+	it("Should fallback to 'All Items' when no label is associated", () => {
+		cy.mount(
+			<Input id="myInput" showSuggestions>
+				<SuggestionItem text="Item 1" />
+				<SuggestionItem text="Item 2" />
+			</Input>
+		);
+
+		cy.get("#myInput").realClick();
+
+		cy.get("#myInput")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+
+		cy.get("#myInput")
+			.shadow()
+			.find("[ui5-responsive-popover] .ui5-responsive-popover-header-text")
+			.should("have.text", INPUT_SUGGESTIONS_TITLE.defaultText);
+	});
+});

packages/main/cypress/specs/MultiInput.mobile.cy.tsx

@@ -4,6 +4,8 @@ import SuggestionItem from "../../src/SuggestionItem.js";
 import Button from "../../src/Button.js";
 import "../../src/features/InputSuggestions.js";
 import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import { INPUT_SUGGESTIONS_TITLE } from "../../src/generated/i18n/i18n-defaults.js";
+import Label from "../../src/Label.js";
 
 const createTokenFromText = (text: string): HTMLElement => {
 	const token = document.createElement("ui5-token");
@@ -213,3 +215,60 @@ describe("Multi Input on mobile device", () => {
 		});
 	});
 });
+
+describe("Dialog header title", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice("phone");
+	});
+
+	it("Should display label text as dialog header title when label for is used", () => {
+		cy.mount(
+			<>
+				<Label for="myMultiInput">Tags</Label>
+				<MultiInput id="myMultiInput" showSuggestions>
+					<SuggestionItem text="Item 1" />
+					<SuggestionItem text="Item 2" />
+				</MultiInput>
+			</>
+		);
+
+		cy.get("#myMultiInput")
+			.shadow()
+			.find(".ui5-input-inner")
+			.realClick();
+
+		cy.get("#myMultiInput")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+
+		cy.get("#myMultiInput")
+			.shadow()
+			.find("[ui5-responsive-popover] .ui5-responsive-popover-header-text")
+			.should("have.text", "Tags");
+	});
+
+	it("Should fallback to 'All Items' when no label is associated", () => {
+		cy.mount(
+			<MultiInput id="myMultiInput" showSuggestions>
+				<SuggestionItem text="Item 1" />
+				<SuggestionItem text="Item 2" />
+			</MultiInput>
+		);
+
+		cy.get("#myMultiInput")
+			.shadow()
+			.find(".ui5-input-inner")
+			.realClick();
+
+		cy.get("#myMultiInput")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+
+		cy.get("#myMultiInput")
+			.shadow()
+			.find("[ui5-responsive-popover] .ui5-responsive-popover-header-text")
+			.should("have.text", INPUT_SUGGESTIONS_TITLE.defaultText);
+	});
+});

packages/main/src/Input.ts

@@ -1760,7 +1760,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	}
 
 	get _headerTitleText() {
-		return Input.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return this._associatedLabelsTexts || Input.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get _suggestionsOkButtonText() {