@ui5/webcomponents 0.0.0-dcd8e5389 → 0.0.0-ddc5fe31b

package/dist/ComboBox.d.ts

@@ -8,26 +8,20 @@ import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { IIcon, IComboBoxItem } from "./Interfaces.js";
 import ComboBoxItem from "./ComboBoxItem.js";
-import Icon from "./Icon.js";
 import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
-import type { ClickEventDetail } from "./List.js";
+import type { ListItemClickEventDetail } from "./List.js";
 import ComboBoxFilter from "./types/ComboBoxFilter.js";
 import type FormSupportT from "./features/InputElementsFormSupport.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
+import { InputEventDetail } from "./Input.js";
 type ValueStateAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 type ValueStateTypeAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 type ComboBoxSelectionChangeEventDetail = {
     item: ComboBoxItem;
 };
-interface IComboBoxItem extends UI5Element {
-    text: string;
-    focused: boolean;
-    isGroupItem: boolean;
-    selected?: boolean;
-    additionalText?: string;
-}
 /**
  * @class
  *
@@ -70,11 +64,7 @@ interface IComboBoxItem extends UI5Element {
  *
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.ComboBox
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-combobox
- * @appenddocs sap.ui.webc.main.ComboBoxItem sap.ui.webc.main.ComboBoxGroupItem
+ * @extends UI5Element
  * @public
  * @since 1.0.0-rc.6
  */
@@ -82,14 +72,20 @@ declare class ComboBox extends UI5Element {
     /**
      * Defines the value of the component.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.ComboBox.prototype.value
-     * @defaultvalue ""
+     * @default ""
      * @formEvents change input
      * @formProperty
      * @public
      */
     value: string;
+    /**
+     * Defines whether the value will be autocompleted to match an item
+     *
+     * @default false
+     * @public
+     * @since 1.19.0
+     */
+    noTypeahead: boolean;
     /**
      * Defines the "live" value of the component.
      * <br><br>
@@ -98,17 +94,15 @@ declare class ComboBox extends UI5Element {
      * <br><br>
      * <b>Note:</b> Initially the filter value is synced with value.
      *
-     * @type {string}
-     * @defaultvalue ""
+     * @default ""
      * @private
      */
     filterValue: string;
     /**
      * Defines a short hint intended to aid the user with data entry when the
      * component has no value.
-     * @type {string}
-     * @name sap.ui.webc.main.ComboBox.prototype.placeholder
-     * @defaultvalue ""
+     *
+     * @default ""
      * @public
      */
     placeholder: string;
@@ -117,70 +111,56 @@ declare class ComboBox extends UI5Element {
      * <br><br>
      * <b>Note:</b> A disabled component is completely noninteractive.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.ComboBox.prototype.disabled
-     * @defaultvalue false
+     * @default false
      * @public
      */
     disabled: boolean;
     /**
      * Defines the value state of the component.
-     * <br><br>
-     * Available options are:
-     * <ul>
-     * <li><code>None</code></li>
-     * <li><code>Error</code></li>
-     * <li><code>Warning</code></li>
-     * <li><code>Success</code></li>
-     * <li><code>Information</code></li>
-     * </ul>
      *
-     * @type {sap.ui.webc.base.types.ValueState}
-     * @name sap.ui.webc.main.ComboBox.prototype.valueState
-     * @defaultvalue "None"
+     * @default "None"
      * @public
      */
-    valueState: ValueState;
+    valueState: `${ValueState}`;
     /**
      * Defines whether the component is read-only.
      * <br><br>
      * <b>Note:</b> A read-only component is not editable,
      * but still provides visual feedback upon user interaction.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.ComboBox.prototype.readonly
-     * @defaultvalue false
+     * @default false
      * @public
      */
     readonly: boolean;
     /**
      * Defines whether the component is required.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.ComboBox.prototype.required
-     * @defaultvalue false
+     * @default false
      * @public
      */
     required: boolean;
     /**
      * Indicates whether a loading indicator should be shown in the picker.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.ComboBox.prototype.loading
-     * @defaultvalue false
+     * @default false
      * @public
      */
     loading: boolean;
     /**
      * Defines the filter type of the component.
-     * Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code>, <code>Contains</code> and <code>None</code>.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.ComboBox.prototype.filter
-     * @defaultvalue "StartsWithPerTerm"
+     * @default "StartsWithPerTerm"
+     * @public
+     */
+    filter: `${ComboBoxFilter}`;
+    /**
+     * Defines whether the clear icon of the combobox will be shown.
+     *
+     * @default false
      * @public
+     * @since 1.20.1
      */
-    filter: ComboBoxFilter;
+    showClearIcon: boolean;
     /**
      * Indicates whether the input is focssed
      * @private
@@ -194,18 +174,14 @@ declare class ComboBox extends UI5Element {
     /**
      * Defines the accessible ARIA name of the component.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.ComboBox.prototype.accessibleName
-     * @defaultvalue: ""
+     * @default ""
      * @public
      * @since 1.0.0-rc.15
      */
     accessibleName: string;
     /**
      * Receives id(or many ids) of the elements that label the component
-     * @type {string}
-     * @name sap.ui.webc.main.ComboBox.prototype.accessibleNameRef
-     * @defaultvalue ""
+     * @default ""
      * @public
      * @since 1.0.0-rc.15
      */
@@ -213,12 +189,10 @@ declare class ComboBox extends UI5Element {
     _iconPressed: boolean;
     _filteredItems: Array<IComboBoxItem>;
     _listWidth: number;
+    _effectiveShowClearIcon: boolean;
     /**
      * Defines the component items.
      *
-     * @type {sap.ui.webc.main.IComboBoxItem[]}
-     * @name sap.ui.webc.main.ComboBox.prototype.default
-     * @slot items
      * @public
      */
     items: Array<IComboBoxItem>;
@@ -230,23 +204,17 @@ declare class ComboBox extends UI5Element {
      * <br>
      * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
      * when the <code>ui5-combobox</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
-     * @type {HTMLElement[]}
-     * @name sap.ui.webc.main.ComboBox.prototype.valueStateMessage
      * @since 1.0.0-rc.9
-     * @slot
      * @public
      */
     valueStateMessage: Array<HTMLElement>;
     /**
      * Defines the icon to be displayed in the input field.
      *
-     * @type {sap.ui.webc.main.IIcon[]}
-     * @name sap.ui.webc.main.ComboBox.prototype.icon
-     * @slot
      * @public
      * @since 1.0.0-rc.9
      */
-    icon: Array<Icon>;
+    icon: Array<IIcon>;
     _initialRendering: boolean;
     _itemFocused: boolean;
     _autocomplete: boolean;
@@ -261,6 +229,7 @@ declare class ComboBox extends UI5Element {
     static i18nBundle: I18nBundle;
     constructor();
     onBeforeRendering(): void;
+    get iconsCount(): number;
     onAfterRendering(): Promise<void>;
     shouldClosePopover(): Promise<boolean>;
     _focusin(e: FocusEvent): void;
@@ -275,6 +244,7 @@ declare class ComboBox extends UI5Element {
     _getValueStatePopover(): Promise<Popover>;
     _resetFilter(): void;
     _arrowClick(): void;
+    _handleMobileInput(e: CustomEvent<InputEventDetail>): void;
     _input(e: InputEvent): void;
     shouldAutocomplete(e: InputEvent): boolean;
     _startsWithMatchingItems(str: string): Array<IComboBoxItem>;
@@ -305,9 +275,12 @@ declare class ComboBox extends UI5Element {
     _fireChangeEvent(): void;
     _inputChange(e: Event): void;
     _itemMousedown(e: MouseEvent): void;
-    _selectItem(e: CustomEvent<ClickEventDetail>): void;
+    _selectItem(e: CustomEvent<ListItemClickEventDetail>): void;
     _onItemFocus(): void;
     _announceSelectedItem(indexOfItem: number): void;
+    _clear(): void;
+    _scrollToItem(indexOfItem: number, forward: boolean): Promise<void>;
+    _announceValueStateText(): void;
     get _headerTitleText(): string;
     get _iconAccessibleNameText(): string;
     get inner(): HTMLInputElement;
@@ -321,7 +294,7 @@ declare class ComboBox extends UI5Element {
     get valueStateTypeMappings(): ValueStateTypeAnnouncement;
     get shouldOpenValueStateMessagePopover(): boolean;
     get shouldDisplayDefaultValueStateMessage(): boolean;
-    get _valueStatePopoverHorizontalAlign(): PopoverHorizontalAlign;
+    get _valueStatePopoverHorizontalAlign(): `${PopoverHorizontalAlign}`;
     /**
      * This method is relevant for sap_horizon theme only
      */
@@ -330,6 +303,7 @@ declare class ComboBox extends UI5Element {
     get _isPhone(): boolean;
     get itemTabIndex(): undefined;
     get ariaLabelText(): string | undefined;
+    get clearIconAccessibleName(): string;
     static onDefine(): Promise<void>;
     get styles(): {
         popoverHeader: {
@@ -347,7 +321,8 @@ declare class ComboBox extends UI5Element {
     get classes(): {
         popover: {
             "ui5-suggestions-popover": boolean;
-            "ui5-suggestions-popover-with-value-state-header": boolean;
+            "ui5-popover-with-value-state-header-phone": boolean;
+            "ui5-popover-with-value-state-header": boolean;
         };
         popoverValueState: {
             "ui5-valuestatemessage-header": boolean;

package/dist/ComboBox.js

@@ -12,11 +12,12 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isPhone, isAndroid, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone, isAndroid } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/not-editable.js";
@@ -28,7 +29,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { isBackSpace, isDelete, isShow, isUp, isDown, isEnter, isEscape, isTabNext, isTabPrevious, isPageUp, isPageDown, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
 import * as Filters from "./Filters.js";
-import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, SELECT_OPTIONS, LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, } from "./generated/i18n/i18n-defaults.js";
+import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, SELECT_OPTIONS, LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, INPUT_CLEAR_ICON_ACC_NAME, } from "./generated/i18n/i18n-defaults.js";
 // Templates
 import ComboBoxTemplate from "./generated/templates/ComboBoxTemplate.lit.js";
 import ComboBoxPopoverTemplate from "./generated/templates/ComboBoxPopoverTemplate.lit.js";
@@ -50,6 +51,8 @@ import ComboBoxGroupItem from "./ComboBoxGroupItem.js";
 import GroupHeaderListItem from "./GroupHeaderListItem.js";
 import ComboBoxFilter from "./types/ComboBoxFilter.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
+import Input from "./Input.js";
+import SuggestionItem from "./SuggestionItem.js";
 const SKIP_ITEMS_SIZE = 10;
 var ValueStateIconMapping;
 (function (ValueStateIconMapping) {
@@ -100,11 +103,7 @@ var ValueStateIconMapping;
  *
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.ComboBox
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-combobox
- * @appenddocs sap.ui.webc.main.ComboBoxItem sap.ui.webc.main.ComboBoxGroupItem
+ * @extends UI5Element
  * @public
  * @since 1.0.0-rc.6
  */
@@ -116,7 +115,8 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._itemFocused = false;
         this._autocomplete = false;
         this._isKeyNavigation = false;
-        this._lastValue = "";
+        // when an initial value is set it should be considered as a _lastValue
+        this._lastValue = this.getAttribute("value") || "";
         this._selectionPerformed = false;
         this._selectedItemText = "";
         this._userTypedValue = "";
@@ -124,24 +124,28 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     onBeforeRendering() {
         const popover = this.valueStatePopover;
         this.FormSupport = getFeature("FormSupport");
+        this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
         if (this._initialRendering || this.filter === "None") {
             this._filteredItems = this.items;
         }
+        if (this.open && !this._isKeyNavigation) {
+            this._filteredItems = this._filterItems(this.filterValue);
+        }
         if (!this._initialRendering && document.activeElement === this && !this._filteredItems.length) {
             popover?.close();
         }
         this._selectMatchingItem();
         this._initialRendering = false;
-        const slottedIconsCount = this.icon.length || 0;
+        this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
+    }
+    get iconsCount() {
+        const slottedIconsCount = this.icon?.length || 0;
+        const clearIconCount = Number(this._effectiveShowClearIcon) ?? 0;
         const arrowDownIconsCount = this.readonly ? 0 : 1;
-        this.style.setProperty("--_ui5-input-icons-count", `${slottedIconsCount + arrowDownIconsCount}`);
+        return slottedIconsCount + clearIconCount + arrowDownIconsCount;
     }
     async onAfterRendering() {
         const picker = await this._getPicker();
-        if (isPhone() && picker.opened) {
-            // Set initial focus to the native input
-            this.inner.focus();
-        }
         if ((await this.shouldClosePopover()) && !isPhone()) {
             picker.close(false, false, true);
             this._clearFocus();
@@ -149,10 +153,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
         this.toggleValueStatePopover(this.shouldOpenValueStateMessagePopover);
         this.storeResponsivePopoverWidth();
-        // Safari is quite slow and does not preserve text highlighting on control rerendering.
-        // That's why we need to restore it "manually".
-        if (isSafari() && this._autocomplete && this.filterValue !== this.value) {
-            this.inner.setSelectionRange((this._isKeyNavigation ? 0 : this.filterValue.length), this.value.length);
+        if (isPhone()) {
+            this.value = this.inner.value;
+            this._selectMatchingItem();
         }
     }
     async shouldClosePopover() {
@@ -161,13 +164,17 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     _focusin(e) {
         this.focused = true;
-        this._lastValue = this.value;
         this._autocomplete = false;
         !isPhone() && e.target.setSelectionRange(0, this.value.length);
     }
     _focusout(e) {
         const toBeFocused = e.relatedTarget;
         const focusedOutToValueStateMessage = toBeFocused?.shadowRoot?.querySelector(".ui5-valuestatemessage-root");
+        const clearIconWrapper = this.shadowRoot.querySelector(".ui5-input-clear-icon-wrapper");
+        const focusedOutToClearIcon = clearIconWrapper === toBeFocused || clearIconWrapper?.contains(toBeFocused);
+        if (this._effectiveShowClearIcon && focusedOutToClearIcon) {
+            return;
+        }
         this._fireChangeEvent();
         if (focusedOutToValueStateMessage) {
             e.stopImmediatePropagation();
@@ -180,10 +187,12 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     _afterOpenPopover() {
         this._iconPressed = true;
+        this.inner.focus();
     }
     _afterClosePopover() {
         this._iconPressed = false;
         this._filteredItems = this.items;
+        this.filterValue = "";
         // close device's keyboard and prevent further typing
         if (isPhone()) {
             this.blur();
@@ -243,6 +252,12 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
         this._toggleRespPopover();
     }
+    _handleMobileInput(e) {
+        const { target } = e;
+        this.filterValue = target.value;
+        this.value = target.value;
+        this.fireEvent("input");
+    }
     _input(e) {
         const { value } = e.target;
         const shouldAutocomplete = this.shouldAutocomplete(e);
@@ -294,7 +309,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             "deleteContentForward",
             "historyUndo",
         ];
-        return !allowedEventTypes.includes(eventType);
+        return !this.noTypeahead && !allowedEventTypes.includes(eventType);
     }
     _startsWithMatchingItems(str) {
         return Filters.StartsWith(str, this._filteredItems, "text");
@@ -353,6 +368,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
         this._isValueStateFocused = false;
         this._announceSelectedItem(indexOfItem);
+        this._scrollToItem(indexOfItem, isForward);
         if (isGroupItem && isOpen) {
             return;
         }
@@ -371,6 +387,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         const isOpen = this.open;
         if (this.focused && indexOfItem === -1 && this.hasValueStateText && isOpen) {
             this._isValueStateFocused = true;
+            this._announceValueStateText();
             this.focused = false;
             return;
         }
@@ -389,6 +406,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             this._clearFocus();
             this._itemFocused = false;
             this._isValueStateFocused = true;
+            this._announceValueStateText();
             this._filteredItems[0].selected = false;
             return;
         }
@@ -408,6 +426,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             this._clearFocus();
             this._itemFocused = false;
             this._isValueStateFocused = true;
+            this._announceValueStateText();
             return;
         }
         this._handleItemNavigation(e, indexOfItem, shouldMoveForward);
@@ -425,6 +444,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             this._clearFocus();
             this._itemFocused = false;
             this._isValueStateFocused = true;
+            this._announceValueStateText();
             return;
         }
         this._handleItemNavigation(e, 0, shouldMoveForward);
@@ -444,8 +464,11 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             this.handleNavKeyPress(e);
         }
         if (isEnter(e)) {
+            const focusedItem = this._filteredItems.find(item => {
+                return item.focused;
+            });
             this._fireChangeEvent();
-            if (picker?.opened) {
+            if (picker?.opened && !focusedItem?.isGroupItem) {
                 this._closeRespPopover();
                 this.focused = true;
             }
@@ -505,7 +528,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         picker?.close();
     }
     async _openRespPopover() {
-        (await this._getPicker()).showAt(this);
+        (await this._getPicker()).showAt(this, true);
     }
     _filterItems(str) {
         const itemsToFilter = this.items.filter(item => !item.isGroupItem);
@@ -550,8 +573,11 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     _selectMatchingItem() {
         const currentlyFocusedItem = this.items.find(item => item.focused);
         const shouldSelectionBeCleared = currentlyFocusedItem && currentlyFocusedItem.isGroupItem;
+        const itemToBeSelected = this._filteredItems.find(item => {
+            return !item.isGroupItem && (item.text === this.value) && !shouldSelectionBeCleared;
+        });
         this._filteredItems = this._filteredItems.map(item => {
-            item.selected = !item.isGroupItem && (item.text === this.value) && !shouldSelectionBeCleared;
+            item.selected = item === itemToBeSelected;
             return item;
         });
     }
@@ -597,17 +623,52 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     _announceSelectedItem(indexOfItem) {
         const currentItem = this._filteredItems[indexOfItem];
+        const nonGroupItems = this._filteredItems.filter(item => !item.isGroupItem);
         const currentItemAdditionalText = currentItem.additionalText || "";
         const isGroupItem = currentItem?.isGroupItem;
-        const itemPositionText = ComboBox_1.i18nBundle.getText(LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length);
+        const itemPositionText = ComboBox_1.i18nBundle.getText(LIST_ITEM_POSITION, nonGroupItems.indexOf(currentItem) + 1, nonGroupItems.length);
         const groupHeaderText = ComboBox_1.i18nBundle.getText(LIST_ITEM_GROUP_HEADER);
         if (isGroupItem) {
-            announce(`${groupHeaderText} ${currentItem.text} ${itemPositionText}`, InvisibleMessageMode.Polite);
+            announce(`${groupHeaderText} ${currentItem.text}`, InvisibleMessageMode.Polite);
         }
         else {
             announce(`${currentItemAdditionalText} ${itemPositionText}`.trim(), InvisibleMessageMode.Polite);
         }
     }
+    _clear() {
+        const selectedItem = this.items.find(item => item.selected);
+        if (selectedItem?.text === this.value) {
+            this.fireEvent("change");
+        }
+        this.value = "";
+        this.fireEvent("input");
+        if (this._isPhone) {
+            this._lastValue = "";
+            this.fireEvent("change");
+        }
+        else {
+            this.focus();
+        }
+    }
+    async _scrollToItem(indexOfItem, forward) {
+        const picker = await this._getPicker();
+        const list = picker.querySelector(".ui5-combobox-items-list");
+        const listItem = list?.items[indexOfItem];
+        if (listItem) {
+            const pickerRect = picker.getBoundingClientRect();
+            const listItemRect = listItem.getBoundingClientRect();
+            const isListItemInVisibleArea = listItemRect.top >= pickerRect.top && listItemRect.bottom <= pickerRect.bottom;
+            if (!isListItemInVisibleArea) {
+                listItem.scrollIntoView({ behavior: "instant", block: forward ? "end" : "start", inline: "nearest" });
+            }
+        }
+    }
+    _announceValueStateText() {
+        const valueStateText = this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : this.valueStateMessageText.map(el => el.textContent).join(" ");
+        if (valueStateText) {
+            announce(valueStateText, InvisibleMessageMode.Polite);
+        }
+    }
     get _headerTitleText() {
         return ComboBox_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
     }
@@ -615,7 +676,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         return ComboBox_1.i18nBundle.getText(SELECT_OPTIONS);
     }
     get inner() {
-        return isPhone() ? this.responsivePopover.querySelector(".ui5-input-inner-phone") : this.shadowRoot.querySelector("[inner-input]");
+        return isPhone() ? this.responsivePopover.querySelector("[ui5-input]").shadowRoot.querySelector("input") : this.shadowRoot.querySelector("[inner-input]");
     }
     async _getPicker() {
         const staticAreaItem = await this.getStaticAreaItemDomRef();
@@ -697,6 +758,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     get ariaLabelText() {
         return getEffectiveAriaLabelText(this);
     }
+    get clearIconAccessibleName() {
+        return ComboBox_1.i18nBundle.getText(INPUT_CLEAR_ICON_ACC_NAME);
+    }
     static async onDefine() {
         ComboBox_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
@@ -719,8 +783,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     get classes() {
         return {
             popover: {
-                "ui5-suggestions-popover": !this._isPhone,
-                "ui5-suggestions-popover-with-value-state-header": !this._isPhone && this.hasValueStateText,
+                "ui5-suggestions-popover": true,
+                "ui5-popover-with-value-state-header-phone": this._isPhone && this.hasValueStateText,
+                "ui5-popover-with-value-state-header": !this._isPhone && this.hasValueStateText,
             },
             popoverValueState: {
                 "ui5-valuestatemessage-header": true,
@@ -736,6 +801,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
 __decorate([
     property()
 ], ComboBox.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], ComboBox.prototype, "noTypeahead", void 0);
 __decorate([
     property()
 ], ComboBox.prototype, "filterValue", void 0);
@@ -760,6 +828,9 @@ __decorate([
 __decorate([
     property({ type: ComboBoxFilter, defaultValue: ComboBoxFilter.StartsWithPerTerm })
 ], ComboBox.prototype, "filter", void 0);
+__decorate([
+    property({ type: Boolean })
+], ComboBox.prototype, "showClearIcon", void 0);
 __decorate([
     property({ type: Boolean })
 ], ComboBox.prototype, "focused", void 0);
@@ -781,6 +852,9 @@ __decorate([
 __decorate([
     property({ validator: Integer, noAttribute: true })
 ], ComboBox.prototype, "_listWidth", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], ComboBox.prototype, "_effectiveShowClearIcon", void 0);
 __decorate([
     slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true })
 ], ComboBox.prototype, "items", void 0);
@@ -815,21 +889,21 @@ ComboBox = ComboBox_1 = __decorate([
             GroupHeaderListItem,
             Popover,
             ComboBoxGroupItem,
+            Input,
+            SuggestionItem,
         ],
     })
     /**
      * Fired when the input operation has finished by pressing Enter, focusout or an item is selected.
      *
-     * @event sap.ui.webc.main.ComboBox#change
      * @public
      */
     ,
     event("change")
     /**
-     * Fired when typing in input.
+     * Fired when typing in input or clear icon is pressed.
      * <br><br>
      * <b>Note:</b> filterValue property is updated, input is changed.
-     * @event sap.ui.webc.main.ComboBox#input
      * @public
      */
     ,
@@ -837,13 +911,15 @@ ComboBox = ComboBox_1 = __decorate([
     /**
      * Fired when selection is changed by user interaction
      *
-     * @event sap.ui.webc.main.ComboBox#selection-change
-     * @param {sap.ui.webc.main.IComboBoxItem} item item to be selected.
+     * @param {IComboBoxItem} item item to be selected.
      * @public
      */
     ,
     event("selection-change", {
         detail: {
+            /**
+            * @public
+            */
             item: { type: HTMLElement },
         },
     })