@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/Input.js

@@ -9,11 +9,10 @@ var Input_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 // @ts-expect-error
 import encodeXML from "@ui5/webcomponents-base/dist/sap/base/security/encodeXML.js";
 import { isPhone, isAndroid, isMac, } from "@ui5/webcomponents-base/dist/Device.js";
@@ -29,13 +28,14 @@ import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement
 import InputType from "./types/InputType.js";
 // Templates
 import InputTemplate from "./InputTemplate.js";
-import { StartsWith } from "./Filters.js";
-import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, VALUE_STATE_LINK, VALUE_STATE_LINKS, VALUE_STATE_LINK_MAC, VALUE_STATE_LINKS_MAC, INPUT_SUGGESTIONS, INPUT_SUGGESTIONS_TITLE, INPUT_SUGGESTIONS_ONE_HIT, INPUT_SUGGESTIONS_MORE_HITS, INPUT_SUGGESTIONS_NO_HIT, INPUT_CLEAR_ICON_ACC_NAME, INPUT_AVALIABLE_VALUES, INPUT_SUGGESTIONS_OK_BUTTON, INPUT_SUGGESTIONS_CANCEL_BUTTON, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
+import * as Filters from "./Filters.js";
+import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, VALUE_STATE_LINK, VALUE_STATE_LINKS, VALUE_STATE_LINK_MAC, VALUE_STATE_LINKS_MAC, INPUT_SUGGESTIONS, INPUT_SUGGESTIONS_TITLE, INPUT_SUGGESTIONS_ONE_HIT, INPUT_SUGGESTIONS_MORE_HITS, INPUT_SUGGESTIONS_NO_HIT, INPUT_CLEAR_ICON_ACC_NAME, INPUT_AVALIABLE_VALUES, INPUT_SUGGESTIONS_OK_BUTTON, INPUT_SUGGESTIONS_CANCEL_BUTTON, INPUT_SUGGESTIONS_EXPANDED, INPUT_SUGGESTIONS_COLLAPSED, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import inputStyles from "./generated/themes/Input.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 import SuggestionsCss from "./generated/themes/Suggestions.css.js";
+import InputSuggestionsFilter from "./types/InputSuggestionsFilter.js";
 // all sementic events
 var INPUT_EVENTS;
 (function (INPUT_EVENTS) {
@@ -55,8 +55,8 @@ var INPUT_ACTIONS;
  *
  * The `ui5-input` component allows the user to enter and edit text or numeric values in one line.
  *
- * Additionally, you can provide `suggestionItems`,
- * that are displayed in a popover right under the input.
+ * Additionally, you can provide `suggestionItems`
+ * that are displayed in a popover right under the input. Keep in mind that `ui5-input` with type `Number` does not support suggestions.
  *
  * The text field can be editable or read-only (`readonly` property),
  * and it can be enabled or disabled (`disabled` property).
@@ -90,13 +90,17 @@ var INPUT_ACTIONS;
  */
 let Input = Input_1 = class Input extends UI5Element {
     get formValidityMessage() {
-        return Input_1.i18nBundle.getText(FORM_TEXTFIELD_REQUIRED);
+        return this.nativeInput?.validationMessage;
     }
     get _effectiveShowSuggestions() {
         return !!(this.showSuggestions && this.Suggestions);
     }
     get formValidity() {
-        return { valueMissing: this.required && !this.value };
+        return {
+            valueMissing: this.nativeInput?.validity.valueMissing,
+            typeMismatch: this.required && this.nativeInput?.validity.typeMismatch,
+            patternMismatch: this.nativeInput?.validity.patternMismatch,
+        };
     }
     async formElementAnchor() {
         return this.getFocusDomRefAsync();
@@ -156,6 +160,7 @@ let Input = Input_1 = class Input extends UI5Element {
          * and the current language settings, especially for type `Number`.
          * - The property is mostly intended to be used with touch devices
          * that use different soft keyboard layouts depending on the given input type.
+         * - Type `Number` does not support suggestions.
          * @default "Text"
          * @public
          */
@@ -170,14 +175,6 @@ let Input = Input_1 = class Input extends UI5Element {
          * @public
          */
         this.value = "";
-        /**
-         * Defines the inner stored value of the component.
-         *
-         * **Note:** The property is updated upon typing. In some special cases the old value is kept (e.g. deleting the value after the dot in a float)
-         * @default ""
-         * @private
-         */
-        this._innerValue = "";
         /**
          * Defines the value state of the component.
          * @default "None"
@@ -207,6 +204,13 @@ let Input = Input_1 = class Input extends UI5Element {
          * @since 2.0.0
          */
         this.open = false;
+        /**
+         * Defines the filter type of the component.
+         * @default "None"
+         * @public
+         * @since 2.19.0
+         */
+        this.filter = InputSuggestionsFilter.None;
         /**
          * Defines whether the clear icon is visible.
          * @default false
@@ -265,7 +269,6 @@ let Input = Input_1 = class Input extends UI5Element {
         this._isChangeTriggeredBySuggestion = false;
         this._indexOfSelectedItem = -1;
         this._handleResizeBound = this._handleResize.bind(this);
-        this._keepInnerValue = false;
         this._focusedAfterClear = false;
         this._valueStateLinks = [];
     }
@@ -287,9 +290,6 @@ let Input = Input_1 = class Input extends UI5Element {
         return item.hasAttribute("ui5-suggestion-item-group");
     }
     onBeforeRendering() {
-        if (!this._keepInnerValue) {
-            this._innerValue = this.value === null ? "" : this.value;
-        }
         if (this.showSuggestions) {
             this.enableSuggestions();
             this._flattenItems.forEach(item => {
@@ -304,28 +304,32 @@ let Input = Input_1 = class Input extends UI5Element {
             });
         }
         this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
-        this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
+        this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
         const hasItems = !!this._flattenItems.length;
         const hasValue = !!this.value;
         const isFocused = this.shadowRoot.querySelector("input") === getActiveElement();
-        if (this.shouldDisplayOnlyValueStateMessage) {
-            this.openValueStatePopover();
-        }
-        else {
-            this.closeValueStatePopover();
-        }
         const preventOpenPicker = this.disabled || this.readonly;
+        const shouldOpenSuggestions = !preventOpenPicker && !this._isPhone && hasItems && (this.open || (hasValue && isFocused && this.isTyping));
         if (preventOpenPicker) {
             this.open = false;
         }
         else if (!this._isPhone) {
             this.open = hasItems && (this.open || (hasValue && isFocused && this.isTyping));
         }
+        if (this.shouldDisplayOnlyValueStateMessage && !shouldOpenSuggestions) {
+            this.openValueStatePopover();
+        }
+        else {
+            this.closeValueStatePopover();
+        }
         const value = this.value;
         const innerInput = this.getInputDOMRefSync();
         if (!innerInput || !value) {
             return;
         }
+        if (this.filter !== InputSuggestionsFilter.None) {
+            this._filterItems(this.typedInValue);
+        }
         const autoCompletedChars = innerInput.selectionEnd - innerInput.selectionStart;
         // Typehead causes issues on Android devices, so we disable it for now
         // If there is already a selection the autocomplete has already been performed
@@ -337,10 +341,12 @@ let Input = Input_1 = class Input extends UI5Element {
                 }
                 this._selectMatchingItem(item);
             }
+            else {
+                this._matchedSuggestionItem = undefined;
+            }
         }
     }
     onAfterRendering() {
-        const innerInput = this.getInputDOMRefSync();
         if (this.showSuggestions && this.Suggestions?._getPicker()) {
             this._listWidth = this.Suggestions._getListWidth();
             // disabled ItemNavigation from the list since we are not using it
@@ -349,11 +355,11 @@ let Input = Input_1 = class Input extends UI5Element {
         if (this._performTextSelection) {
             // this is required to syncronize lit-html input's value and user's input
             // lit-html does not sync its stored value for the value property when the user is typing
-            if (innerInput.value !== this._innerValue) {
-                innerInput.value = this._innerValue;
-            }
+            // if (innerInput.value !== this._innerValue) {
+            // 	innerInput.value = this._innerValue;
+            // }
             if (this.typedInValue.length && this.value.length) {
-                innerInput.setSelectionRange(this.typedInValue.length, this.value.length);
+                this._adjustSelectionRange();
             }
             this.fireDecoratorEvent("type-ahead");
         }
@@ -364,6 +370,25 @@ let Input = Input_1 = class Input extends UI5Element {
             this._valueStateLinks = this.linksInAriaValueStateHiddenText;
         }
     }
+    _adjustSelectionRange() {
+        const innerInput = this.getInputDOMRefSync();
+        const visibleItems = this.Suggestions?._getItems().filter(item => !item.hidden);
+        const currentItem = visibleItems?.find(item => { return item.selected || item.focused; });
+        const groupItems = this._flattenItems.filter(item => this._isGroupItem(item));
+        if (currentItem && !groupItems.includes(currentItem)) {
+            const doesItemStartWithTypedValue = currentItem?.text?.toLowerCase().startsWith(this.typedInValue.toLowerCase());
+            if (doesItemStartWithTypedValue) {
+                innerInput.setSelectionRange(this.typedInValue.length, this.value.length);
+            }
+            else {
+                innerInput.setSelectionRange(0, this.value.length);
+            }
+        }
+        else {
+            // No current item selected (e.g., during typing) - use default typeahead selection
+            innerInput.setSelectionRange(this.typedInValue.length, this.value.length);
+        }
+    }
     _onkeydown(e) {
         this._isKeyNavigation = true;
         this._shouldAutocomplete = !this.noTypeahead && !(isBackSpace(e) || isDelete(e) || isEscape(e));
@@ -381,10 +406,11 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         if (isEnter(e)) {
             const isValueUnchanged = this.previousValue === this.getInputDOMRefSync().value;
-            const shouldSubmit = this._internals.form && this._internals.form.querySelectorAll("[ui5-input]").length === 1;
             this._enterKeyDown = true;
-            if (isValueUnchanged && shouldSubmit) {
+            if (isValueUnchanged) {
+                this.fireDecoratorEvent("_request-submit");
                 submitForm(this);
+                return;
             }
             return this._handleEnter(e);
         }
@@ -421,8 +447,9 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     get currentItemIndex() {
         const allItems = this.Suggestions?._getItems();
-        const currentItem = allItems.find(item => { return item.selected || item.focused; });
-        const indexOfCurrentItem = currentItem ? allItems.indexOf(currentItem) : -1;
+        const visibleItems = allItems.filter(item => !item.hidden);
+        const currentItem = visibleItems.find(item => { return item.selected || item.focused; });
+        const indexOfCurrentItem = currentItem ? visibleItems.indexOf(currentItem) : -1;
         return indexOfCurrentItem;
     }
     _handleUp(e) {
@@ -500,9 +527,12 @@ let Input = Input_1 = class Input extends UI5Element {
         // if a group item is focused, this is false
         const suggestionItemPressed = !!(this.Suggestions?.onEnter(e));
         const innerInput = this.getInputDOMRefSync();
-        const matchingItem = this._selectableItems.find(item => {
-            return item.text === this.value;
-        });
+        let matchingItem = this._matchedSuggestionItem;
+        if (!matchingItem) {
+            matchingItem = this._selectableItems.find(item => {
+                return item.text?.toLowerCase() === this.value.toLowerCase();
+            });
+        }
         if (matchingItem) {
             const itemText = matchingItem.text || "";
             innerInput.setSelectionRange(itemText.length, itemText.length);
@@ -553,6 +583,7 @@ let Input = Input_1 = class Input extends UI5Element {
         const innerInput = this.getInputDOMRefSync();
         const isAutoCompleted = innerInput.selectionEnd - innerInput.selectionStart > 0;
         this.isTyping = false;
+        this._matchedSuggestionItem = undefined;
         if (this.value !== this.previousValue && this.value !== this.lastConfirmedValue && !this.open) {
             this.value = this.lastConfirmedValue ? this.lastConfirmedValue : this.previousValue;
             this.fireDecoratorEvent(INPUT_EVENTS.INPUT, { inputType: "" });
@@ -589,10 +620,9 @@ let Input = Input_1 = class Input extends UI5Element {
     innerFocusIn() { }
     _onfocusout(e) {
         const toBeFocused = e.relatedTarget;
-        if (this.Suggestions?._getPicker().contains(toBeFocused) || this.contains(toBeFocused) || this.getSlottedNodes("valueStateMessage").some(el => el.contains(toBeFocused))) {
+        if (this.Suggestions?._getPicker()?.contains(toBeFocused) || this.contains(toBeFocused) || this.getSlottedNodes("valueStateMessage").some(el => el.contains(toBeFocused))) {
             return;
         }
-        this._keepInnerValue = false;
         this.focused = false; // invalidating property
         this._isChangeTriggeredBySuggestion = false;
         if (this.showClearIcon && !this._effectiveShowClearIcon) {
@@ -625,7 +655,6 @@ let Input = Input_1 = class Input extends UI5Element {
         }
     }
     _handleChange() {
-        const shouldSubmit = this._internals.form && this._internals.form.querySelectorAll("[ui5-input]").length === 1;
         if (this._clearIconClicked) {
             this._clearIconClicked = false;
             return;
@@ -640,12 +669,13 @@ let Input = Input_1 = class Input extends UI5Element {
         };
         if (this.previousValue !== this.getInputDOMRefSync().value) {
             // if picker is open there might be a selected item, wait next tick to get the value applied
-            if (this.Suggestions?._getPicker().open && this._flattenItems.some(item => item.hasAttribute("ui5-suggestion-item") && item.selected)) {
+            if (this.Suggestions?._getPicker()?.open && this._flattenItems.some(item => item.hasAttribute("ui5-suggestion-item") && item.selected)) {
                 this._changeToBeFired = true;
             }
             else {
                 fireChange();
-                if (this._enterKeyDown && shouldSubmit) {
+                if (this._enterKeyDown) {
+                    this.fireDecoratorEvent("_request-submit");
                     submitForm(this);
                 }
             }
@@ -688,8 +718,6 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     _input(e, eventType) {
         const inputDomRef = this.getInputDOMRefSync();
-        const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef.value;
-        this._keepInnerValue = false;
         const allowedEventTypes = [
             "deleteWordBackward",
             "deleteWordForward",
@@ -706,35 +734,6 @@ let Input = Input_1 = class Input extends UI5Element {
             "historyUndo",
         ];
         this._shouldAutocomplete = !allowedEventTypes.includes(eventType) && !this.noTypeahead;
-        if (e instanceof InputEvent) {
-            // ---- Special cases of numeric Input ----
-            // ---------------- Start -----------------
-            // When the last character after the delimiter is removed.
-            // In such cases, we want to skip the re-rendering of the
-            // component as this leads to cursor repositioning and causes user experience issues.
-            // There are few scenarios:
-            // Example: type "123.4" and press BACKSPACE - the native input is firing event with the whole part as value (123).
-            // Pressing BACKSPACE again will remove the delimiter and the native input will fire event with the whole part as value again (123).
-            // Example: type "123.456", select/mark "456" and press BACKSPACE - the native input is firing event with the whole part as value (123).
-            // Example: type "123.456", select/mark "123.456" and press BACKSPACE - the native input is firing event with empty value.
-            const delimiterCase = this.isTypeNumber
-                && (e.inputType === "deleteContentForward" || e.inputType === "deleteContentBackward")
-                && !e.target.value.includes(".")
-                && this.value.includes(".");
-            // Handle special numeric notation with "e", example "12.5e12"
-            const eNotationCase = emptyValueFiredOnNumberInput && e.data === "e";
-            // Handle special numeric notation with "-", example "-3"
-            // When pressing BACKSPACE, the native input fires event with empty value
-            const minusRemovalCase = emptyValueFiredOnNumberInput
-                && this.value.startsWith("-")
-                && this.value.length === 2
-                && (e.inputType === "deleteContentForward" || e.inputType === "deleteContentBackward");
-            if (delimiterCase || eNotationCase || minusRemovalCase) {
-                this.value = e.target.value;
-                this._keepInnerValue = true;
-            }
-            // ----------------- End ------------------
-        }
         if (e.target === inputDomRef) {
             this.focused = true;
             // stop the native event, as the semantic "input" would be fired.
@@ -745,10 +744,13 @@ let Input = Input_1 = class Input extends UI5Element {
         if (this.Suggestions) {
             this.Suggestions.updateSelectedItemPosition(-1);
         }
+        if (this.filter && e.target.value === "") {
+            this.open = false;
+        }
         this.isTyping = true;
     }
     _startsWithMatchingItems(str) {
-        return StartsWith(str, this._selectableItems, "text");
+        return Filters.StartsWith(str, this._selectableItems, "text");
     }
     _getFirstMatchingItem(current) {
         if (!this._flattenItems.length) {
@@ -764,11 +766,57 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     _selectMatchingItem(item) {
         item.selected = true;
+        this._matchedSuggestionItem = item;
+    }
+    _filterItems(value) {
+        let matchingItems = [];
+        const groupItems = this._flattenItems.filter(item => this._isGroupItem(item));
+        this._resetItemVisibility();
+        if (groupItems.length) {
+            matchingItems = this._filterGroups(this.filter, groupItems);
+        }
+        else {
+            matchingItems = (Filters[this.filter])(value, this._selectableItems, "text");
+        }
+        this._selectableItems.forEach(item => {
+            item.hidden = !matchingItems.includes(item);
+        });
+        if (matchingItems.length === 0) {
+            this.open = false;
+        }
+    }
+    _filterGroups(filterType, groupItems) {
+        const filteredGroupItems = [];
+        groupItems.forEach(groupItem => {
+            const currentGroupItems = (Filters[filterType])(this.typedInValue, groupItem.items ?? [], "text");
+            filteredGroupItems.push(...currentGroupItems);
+            if (currentGroupItems.length === 0) {
+                groupItem.hidden = true;
+            }
+            else {
+                groupItem.hidden = false;
+            }
+        });
+        return filteredGroupItems;
+    }
+    _resetItemVisibility() {
+        this._flattenItems.forEach(item => {
+            if (this._isGroupItem(item)) {
+                item.items?.forEach(i => {
+                    i.hidden = false;
+                });
+                return;
+            }
+            item.hidden = false;
+        });
     }
     _handleTypeAhead(item) {
-        const value = item.text ? item.text : "";
-        this._innerValue = value;
-        this.value = value;
+        const suggestionText = item.text ? item.text : "";
+        const typedValue = this.typedInValue;
+        // Preserve the user's typed input case during typing
+        if (suggestionText.toLowerCase().startsWith(typedValue.toLowerCase())) {
+            this.value = typedValue + suggestionText.substring(typedValue.length);
+        }
         this._performTextSelection = true;
         this._shouldAutocomplete = false;
     }
@@ -801,7 +849,6 @@ let Input = Input_1 = class Input extends UI5Element {
         this._handlePickerAfterOpen();
     }
     _afterClosePicker() {
-        this.announceSelectedItem();
         // close device's keyboard and prevent further typing
         if (isPhone()) {
             this.blur();
@@ -820,6 +867,10 @@ let Input = Input_1 = class Input extends UI5Element {
         if (this.hasSuggestionItemSelected) {
             this.focus();
         }
+        const invisibleText = this.shadowRoot.querySelector(`#selectionText`);
+        if (invisibleText) {
+            invisibleText.textContent = "";
+        }
         this._handlePickerAfterClose();
     }
     _handlePickerAfterOpen() {
@@ -893,7 +944,16 @@ let Input = Input_1 = class Input extends UI5Element {
         if (this._isGroupItem(item)) {
             return;
         }
-        const itemText = item.text || "";
+        let originalItem = item;
+        if (this._matchedSuggestionItem) {
+            const matchedText = this._matchedSuggestionItem.text?.toLowerCase() || "";
+            const itemText = item.text?.toLowerCase() || "";
+            // Only use matched item if keyboard navigation or if it's the same item (case-insensitive)
+            if (keyboardUsed || matchedText === itemText) {
+                originalItem = this._matchedSuggestionItem;
+            }
+        }
+        const itemText = originalItem.text || "";
         const fireChange = keyboardUsed
             ? this.valueBeforeItemSelection !== itemText : this.previousValue !== itemText;
         this.hasSuggestionItemSelected = true;
@@ -909,6 +969,7 @@ let Input = Input_1 = class Input extends UI5Element {
             this.previousValue = this.value;
         }
         this.valueBeforeSelectionStart = "";
+        this._matchedSuggestionItem = undefined;
         this.isTyping = false;
         this.open = false;
     }
@@ -920,6 +981,10 @@ let Input = Input_1 = class Input extends UI5Element {
         const itemValue = this._isGroupItem(item) ? this.valueBeforeSelectionStart : item.text;
         this.value = itemValue || "";
         this._performTextSelection = true;
+        // Update the matched item when navigating with arrows to preserve correct case on Enter
+        if (!this._isGroupItem(item)) {
+            this._matchedSuggestionItem = item;
+        }
     }
     fireEventByAction(action, e) {
         const valueBeforeInput = this.value;
@@ -955,13 +1020,19 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     getInputDOMRef() {
         if (isPhone() && this.Suggestions) {
-            return this.Suggestions._getPicker().querySelector(".ui5-input-inner-phone");
+            const picker = this.Suggestions._getPicker();
+            if (picker) {
+                return picker.querySelector(".ui5-input-inner-phone");
+            }
         }
         return this.nativeInput;
     }
     getInputDOMRefSync() {
-        if (isPhone() && this.Suggestions?._getPicker()) {
-            return this.Suggestions._getPicker().querySelector(".ui5-input-inner-phone").shadowRoot.querySelector("input");
+        if (isPhone() && this.Suggestions) {
+            const picker = this.Suggestions._getPicker();
+            if (picker) {
+                return picker.querySelector(".ui5-input-inner-phone").shadowRoot.querySelector("input");
+            }
         }
         return this.nativeInput;
     }
@@ -1052,7 +1123,7 @@ let Input = Input_1 = class Input extends UI5Element {
         return this.readonly && !this.disabled;
     }
     get _headerTitleText() {
-        return Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+        return this._associatedLabelsTexts || Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
     }
     get _suggestionsOkButtonText() {
         return Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_OK_BUTTON);
@@ -1237,16 +1308,18 @@ let Input = Input_1 = class Input extends UI5Element {
     get availableSuggestionsCount() {
         if (this.showSuggestions && (this.value || this.Suggestions?.isOpened())) {
             const nonGroupItems = this._selectableItems;
+            const isOpened = this.Suggestions?.isOpened();
+            const stateText = isOpened ? Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_EXPANDED) : Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_COLLAPSED);
             switch (nonGroupItems.length) {
                 case 0:
-                    return Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_NO_HIT);
+                    return `${Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_NO_HIT)} ${stateText}`;
                 case 1:
-                    return Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_ONE_HIT);
+                    return `${Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_ONE_HIT)} ${stateText}`;
                 default:
-                    return Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_MORE_HITS, nonGroupItems.length);
+                    return `${Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_MORE_HITS, nonGroupItems.length)} ${stateText}`;
             }
         }
-        return undefined;
+        return this.showSuggestions ? Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_COLLAPSED) : undefined;
     }
     get step() {
         return this.isTypeNumber ? "any" : undefined;
@@ -1283,9 +1356,6 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         return "";
     }
-    get _valueStatePopoverHorizontalAlign() {
-        return this.effectiveDir !== "rtl" ? "Start" : "End";
-    }
     /**
      * This method is relevant for sap_horizon theme only
      */
@@ -1350,9 +1420,6 @@ __decorate([
 __decorate([
     property()
 ], Input.prototype, "value", void 0);
-__decorate([
-    property({ noAttribute: true })
-], Input.prototype, "_innerValue", void 0);
 __decorate([
     property()
 ], Input.prototype, "valueState", void 0);
@@ -1383,6 +1450,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Input.prototype, "open", void 0);
+__decorate([
+    property()
+], Input.prototype, "filter", void 0);
 __decorate([
     property({ type: Boolean })
 ], Input.prototype, "_effectiveShowClearIcon", void 0);
@@ -1423,7 +1493,7 @@ __decorate([
     property({ type: Object })
 ], Input.prototype, "Suggestions", void 0);
 __decorate([
-    property({ type: Array })
+    property({ type: Array, noAttribute: true })
 ], Input.prototype, "_linksListenersArray", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
@@ -1464,6 +1534,9 @@ Input = Input_1 = __decorate([
     ,
     event("change", {
         bubbles: true,
+    }),
+    event("_request-submit", {
+        bubbles: true,
     })
     /**
      * Fired when the value of the component changes at each keystroke,