chore(ui5-input): add private hint property (#11176)

Author: MapTo0

packages/main/src/Input.ts

@@ -88,6 +88,7 @@ import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 import type { ListItemClickEventDetail, ListSelectionChangeEventDetail } from "./List.js";
 import type ResponsivePopover from "./ResponsivePopover.js";
+import type InputKeyHint from "./types/InputKeyHint.js";
 
 /**
  * Interface for components that represent a suggestion item, usable in `ui5-input`
@@ -494,6 +495,15 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	@property({ type: Boolean })
 	focused = false;
 
+	/**
+	 * Used to define enterkeyhint of the inner input.
+	 * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint
+	 *
+	 * @private
+	 */
+	@property()
+	hint?: `${InputKeyHint}`;
+
 	@property({ type: Boolean })
 	valueStateOpen = false;
 
@@ -947,7 +957,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 
 		if (this.value !== this.previousValue && this.value !== this.lastConfirmedValue && !this.open) {
 			this.value = this.lastConfirmedValue ? this.lastConfirmedValue : this.previousValue;
-			this.fireDecoratorEvent(INPUT_EVENTS.INPUT);
+			this.fireDecoratorEvent(INPUT_EVENTS.INPUT, { inputType: "" });
 
 			return;
 		}

packages/main/src/InputTemplate.tsx

@@ -36,6 +36,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						placeholder={this._placeholder}
 						maxlength={this.maxlength}
 						role={this.accInfo.role}
+						enterkeyhint={this.hint}
 						aria-controls={this.accInfo.ariaControls}
 						aria-invalid={this.accInfo.ariaInvalid}
 						aria-haspopup={this.accInfo.ariaHasPopup}
@@ -63,6 +64,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						<div
 							tabindex={-1}
 							class="ui5-input-clear-icon-wrapper inputIcon"
+							part="clear-icon-wrapper"
 							onClick={this._clear}
 							onMouseDown={this._iconMouseDown}
 						>

packages/main/src/types/InputKeyHint.ts

@@ -0,0 +1,17 @@
+/**
+ * Different input key hints.
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint
+ *
+ * @private
+ */
+enum InputKeyHint {
+	"Search" = "search",
+	"Go" = "go",
+	"Next" = "next",
+	"Enter" = "enter",
+	"Done" = "done",
+	"Previous" = "previous",
+	"Send" = "send",
+}
+
+export default InputKeyHint;