@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/ComboBox.js

@@ -6,13 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var ComboBox_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 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";
@@ -26,13 +27,12 @@ import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.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, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Templates
 import ComboBoxTemplate from "./generated/templates/ComboBoxTemplate.lit.js";
-import ComboBoxPopoverTemplate from "./generated/templates/ComboBoxPopoverTemplate.lit.js";
 // Styles
 import ComboBoxCss from "./generated/themes/ComboBox.css.js";
 import ComboBoxPopoverCss from "./generated/themes/ComboBoxPopover.css.js";
@@ -48,68 +48,70 @@ import BusyIndicator from "./BusyIndicator.js";
 import Button from "./Button.js";
 import StandardListItem from "./StandardListItem.js";
 import ComboBoxGroupItem from "./ComboBoxGroupItem.js";
-import GroupHeaderListItem from "./GroupHeaderListItem.js";
+import ListItemGroupHeader from "./ListItemGroupHeader.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) {
-    ValueStateIconMapping["Error"] = "error";
-    ValueStateIconMapping["Warning"] = "alert";
-    ValueStateIconMapping["Success"] = "sys-enter-2";
+    ValueStateIconMapping["Negative"] = "error";
+    ValueStateIconMapping["Critical"] = "alert";
+    ValueStateIconMapping["Positive"] = "sys-enter-2";
     ValueStateIconMapping["Information"] = "information";
 })(ValueStateIconMapping || (ValueStateIconMapping = {}));
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-combobox</code> component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.
+ * The `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.
  *
  * It is commonly used to enable users to select an option from a predefined list.
  *
- * <h3>Structure</h3>
- * The <code>ui5-combobox</code> consists of the following elements:
+ * ### Structure
+ * The `ui5-combobox` consists of the following elements:
  *
- * <ul>
- * <li> Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.</li>
- * <li> Drop-down arrow - expands\collapses the option list.</li>
- * <li> Option list - the list of available options.</li>
- * </ul>
+ * -  Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.
+ * -  Drop-down arrow - expands\collapses the option list.
+ * -  Option list - the list of available options.
  *
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * The <code>ui5-combobox</code> provides advanced keyboard handling.
- * <br>
+ * The `ui5-combobox` provides advanced keyboard handling.
  *
- * <ul>
- * <li>[F4], [ALT]+[UP], or [ALT]+[DOWN] - Toggles the picker.</li>
- * <li>[ESC] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.</li>
- * <li>[ENTER] or [RETURN] - If picker is open, takes over the currently selected item and closes it.</li>
- * <li>[DOWN] - Selects the next matching item in the picker.</li>
- * <li>[UP] - Selects the previous matching item in the picker.</li>
- * <li>[PAGEDOWN] - Moves selection down by page size (10 items by default).</li>
- * <li>[PAGEUP] - Moves selection up by page size (10 items by default). </li>
- * <li>[HOME] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.</li>
- * <li>[END] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.</li>
- * </ul>
- *
- *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/ComboBox";</code>
+ * - [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.
+ * - [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.
+ * - [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.
+ * - [Down] - Selects the next matching item in the picker.
+ * - [Up] - Selects the previous matching item in the picker.
+ * - [Page Down] - Moves selection down by page size (10 items by default).
+ * - [Page Up] - Moves selection up by page size (10 items by default).
+ * - [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.
+ * - [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.
  *
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/ComboBox.js";`
  * @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
  */
 let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
+    get formValidityMessage() {
+        return ComboBox_1.i18nBundle.getText(FORM_TEXTFIELD_REQUIRED);
+    }
+    get formValidity() {
+        return { valueMissing: this.required && !this.value };
+    }
+    async formElementAnchor() {
+        return this.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        return this.value;
+    }
     constructor() {
         super();
         this._filteredItems = [];
@@ -117,73 +119,85 @@ 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 = "";
     }
-    onBeforeRendering() {
+    async 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);
+            const items = this._filterItems(this.filterValue);
+            this._filteredItems = items.length ? items : this.items;
         }
-        if (!this._initialRendering && document.activeElement === this && !this._filteredItems.length) {
-            popover?.close();
+        if (!this._initialRendering && document.activeElement === this && !this._filteredItems.length && popover) {
+            popover.open = false;
         }
         this._selectMatchingItem();
         this._initialRendering = false;
-        const slottedIconsCount = this.icon.length || 0;
+        this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
+        const suggestionsPopover = await this._getPicker();
+        this.items.forEach(item => {
+            item._getRealDomRef = () => suggestionsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
+        });
+    }
+    get iconsCount() {
+        const slottedIconsCount = this.icon?.length || 0;
+        const clearIconCount = Number(this._effectiveShowClearIcon) ?? 0;
         const arrowDownIconsCount = this.readonly ? 0 : 1;
-        this.style.setProperty(getScopedVarName("--_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);
+            picker.preventFocusRestore = true;
+            picker.open = false;
             this._clearFocus();
             this._itemFocused = false;
         }
         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() {
         const popover = await this._getPicker();
-        return popover.opened && !this.focused && !this._itemFocused && !this._isValueStateFocused;
+        return popover.open && !this.focused && !this._itemFocused && !this._isValueStateFocused;
     }
     _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();
             return;
         }
-        if (!(this.shadowRoot.contains(toBeFocused)) && (this.staticAreaItem !== e.relatedTarget)) {
+        const popover = this.shadowRoot.querySelector("[ui5-responsive-popover]");
+        if (!(this.getDomRef().contains(toBeFocused)) && (popover !== e.relatedTarget)) {
             this.focused = false;
             !isPhone() && this._closeRespPopover(e);
         }
     }
     _afterOpenPopover() {
         this._iconPressed = true;
+        this.inner.focus();
     }
     _afterClosePopover() {
         this._iconPressed = false;
@@ -200,7 +214,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     async _toggleRespPopover() {
         const picker = await this._getPicker();
-        if (picker.opened) {
+        if (picker.open) {
             this._closeRespPopover();
         }
         else {
@@ -221,14 +235,21 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
     }
     async openValueStatePopover() {
-        (await this._getValueStatePopover())?.showAt(this);
+        const valueStatePopover = await this._getValueStatePopover();
+        if (valueStatePopover) {
+            valueStatePopover.opener = this;
+            valueStatePopover.open = true;
+        }
     }
     async closeValueStatePopover() {
-        (await this._getValueStatePopover())?.close();
+        const valueStatePopover = await this._getValueStatePopover();
+        if (valueStatePopover) {
+            valueStatePopover.open = false;
+        }
     }
     async _getValueStatePopover() {
-        const staticAreaItem = await this.getStaticAreaItemDomRef();
-        const popover = staticAreaItem.querySelector(".ui5-valuestatemessage-popover");
+        await renderFinished();
+        const popover = this.shadowRoot.querySelector(".ui5-valuestatemessage-popover");
         // backward compatibility
         // rework all methods to work with async getters
         this.valueStatePopover = popover;
@@ -248,6 +269,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);
@@ -371,7 +398,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             });
         }
         this.fireEvent("input");
-        this._fireChangeEvent();
     }
     _handleArrowDown(e, indexOfItem) {
         const isOpen = this.open;
@@ -458,12 +484,13 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
                 return item.focused;
             });
             this._fireChangeEvent();
-            if (picker?.opened && !focusedItem?.isGroupItem) {
+            if (picker?.open && !focusedItem?.isGroupItem) {
                 this._closeRespPopover();
                 this.focused = true;
+                this.inner.setSelectionRange(this.value.length, this.value.length);
             }
-            else if (this.FormSupport) {
-                this.FormSupport.triggerFormSubmit(this);
+            else if (this._internals?.form) {
+                submitForm(this);
             }
         }
         if (isEscape(e)) {
@@ -515,10 +542,15 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
         this._isValueStateFocused = false;
         this._clearFocus();
-        picker?.close();
+        if (picker) {
+            picker.preventFocusRestore = false;
+            picker.open = false;
+        }
     }
     async _openRespPopover() {
-        (await this._getPicker()).showAt(this);
+        const picker = await this._getPicker();
+        picker.opener = this;
+        picker.open = true;
     }
     _filterItems(str) {
         const itemsToFilter = this.items.filter(item => !item.isGroupItem);
@@ -528,7 +560,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     /**
      * Returns true if the group header should be shown (if there is a filtered suggestion item for this group item)
-     *
      * @private
      */
     static _groupItemFilter(item, idx, allItems, filteredItems) {
@@ -625,6 +656,21 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             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");
@@ -651,11 +697,11 @@ 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();
-        const picker = staticAreaItem.querySelector("[ui5-responsive-popover]");
+        await renderFinished();
+        const picker = this.shadowRoot.querySelector("[ui5-responsive-popover]");
         // backward compatibility
         // rework all methods to work with async getters
         this.responsivePopover = picker;
@@ -665,7 +711,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         return this.valueState !== ValueState.None;
     }
     get hasValueStateText() {
-        return this.hasValueState && this.valueState !== ValueState.Success;
+        return this.hasValueState && this.valueState !== ValueState.Positive;
     }
     get ariaValueStateHiddenText() {
         if (!this.hasValueState) {
@@ -691,18 +737,18 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     get valueStateTextMappings() {
         return {
-            [ValueState.Success]: ComboBox_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
-            [ValueState.Error]: ComboBox_1.i18nBundle.getText(VALUE_STATE_ERROR),
-            [ValueState.Warning]: ComboBox_1.i18nBundle.getText(VALUE_STATE_WARNING),
+            [ValueState.Positive]: ComboBox_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
+            [ValueState.Negative]: ComboBox_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            [ValueState.Critical]: ComboBox_1.i18nBundle.getText(VALUE_STATE_WARNING),
             [ValueState.Information]: ComboBox_1.i18nBundle.getText(VALUE_STATE_INFORMATION),
         };
     }
     get valueStateTypeMappings() {
         return {
-            [ValueState.Success]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+            [ValueState.Positive]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
             [ValueState.Information]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
-            [ValueState.Error]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
-            [ValueState.Warning]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+            [ValueState.Negative]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+            [ValueState.Critical]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
         };
     }
     get shouldOpenValueStateMessagePopover() {
@@ -713,7 +759,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         return !this.valueStateMessage.length && this.hasValueStateText;
     }
     get _valueStatePopoverHorizontalAlign() {
-        return this.effectiveDir !== "rtl" ? PopoverHorizontalAlign.Left : PopoverHorizontalAlign.Right;
+        return this.effectiveDir !== "rtl" ? PopoverHorizontalAlign.Start : PopoverHorizontalAlign.End;
     }
     /**
      * This method is relevant for sap_horizon theme only
@@ -722,7 +768,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         return this.valueState !== ValueState.None ? ValueStateIconMapping[this.valueState] : "";
     }
     get open() {
-        return this?.responsivePopover?.opened || false;
+        return this?.responsivePopover?.open || false;
     }
     get _isPhone() {
         return isPhone();
@@ -733,6 +779,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");
     }
@@ -750,6 +799,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
                 "min-width": `${this.offsetWidth || 0}px`,
                 "max-width": (this.offsetWidth / remSizeInPx) > 40 ? `${this.offsetWidth}px` : "40rem",
             },
+            popoverValueStateMessage: {},
         };
     }
     get classes() {
@@ -762,9 +812,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             popoverValueState: {
                 "ui5-valuestatemessage-header": true,
                 "ui5-valuestatemessage-root": true,
-                "ui5-valuestatemessage--success": this.valueState === ValueState.Success,
-                "ui5-valuestatemessage--error": this.valueState === ValueState.Error,
-                "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
+                "ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
+                "ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
+                "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
                 "ui5-valuestatemessage--information": this.valueState === ValueState.Information,
             },
         };
@@ -773,6 +823,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
 __decorate([
     property()
 ], ComboBox.prototype, "value", void 0);
+__decorate([
+    property()
+], ComboBox.prototype, "name", void 0);
 __decorate([
     property({ type: Boolean })
 ], ComboBox.prototype, "noTypeahead", void 0);
@@ -800,6 +853,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);
@@ -821,6 +877,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);
@@ -834,16 +893,16 @@ ComboBox = ComboBox_1 = __decorate([
     customElement({
         tag: "ui5-combobox",
         languageAware: true,
+        formAssociated: true,
         renderer: litRender,
-        styles: ComboBoxCss,
-        staticAreaStyles: [
+        styles: [
+            ComboBoxCss,
             ResponsivePopoverCommonCss,
             ValueStateMessageCss,
             ComboBoxPopoverCss,
             SuggestionsCss,
         ],
         template: ComboBoxTemplate,
-        staticAreaTemplate: ComboBoxPopoverTemplate,
         dependencies: [
             ComboBoxItem,
             Icon,
@@ -852,38 +911,38 @@ ComboBox = ComboBox_1 = __decorate([
             BusyIndicator,
             Button,
             StandardListItem,
-            GroupHeaderListItem,
+            ListItemGroupHeader,
             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.
-     * <br><br>
-     * <b>Note:</b> filterValue property is updated, input is changed.
-     * @event sap.ui.webc.main.ComboBox#input
+     * Fired when typing in input or clear icon is pressed.
+     *
+     * **Note:** filterValue property is updated, input is changed.
      * @public
      */
     ,
     event("input")
     /**
      * 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 },
         },
     })