@openui5/sap.ui.webc.main 1.115.1 → 1.117.0

package/src/sap/ui/webc/main/thirdparty/ComboBox.js

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/types/ValueState", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper", "sap/ui/webc/common/thirdparty/base/util/InvisibleMessage", "sap/ui/webc/common/thirdparty/icons/slim-arrow-down", "sap/ui/webc/common/thirdparty/icons/decline", "sap/ui/webc/common/thirdparty/icons/not-editable", "sap/ui/webc/common/thirdparty/icons/error", "sap/ui/webc/common/thirdparty/icons/alert", "sap/ui/webc/common/thirdparty/icons/sys-enter-2", "sap/ui/webc/common/thirdparty/icons/information", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/FeaturesRegistry", "sap/ui/webc/common/thirdparty/base/Keys", "./Filters", "./generated/i18n/i18n-defaults", "./generated/templates/ComboBoxTemplate.lit", "./generated/templates/ComboBoxPopoverTemplate.lit", "./generated/themes/ComboBox.css", "./generated/themes/ComboBoxPopover.css", "./generated/themes/ResponsivePopoverCommon.css", "./generated/themes/ValueStateMessage.css", "./generated/themes/Suggestions.css", "./ComboBoxItem", "./Icon", "./Popover", "./ResponsivePopover", "./List", "./BusyIndicator", "./Button", "./StandardListItem", "./ComboBoxGroupItem", "./GroupHeaderListItem"], function (_exports, _UI5Element, _LitRenderer, _ValueState, _Device, _Integer, _AriaLabelHelper, _InvisibleMessage, _slimArrowDown, _decline, _notEditable, _error, _alert, _sysEnter, _information, _i18nBundle, _FeaturesRegistry, _Keys, Filters, _i18nDefaults, _ComboBoxTemplate, _ComboBoxPopoverTemplate, _ComboBox, _ComboBoxPopover, _ResponsivePopoverCommon, _ValueStateMessage, _Suggestions, _ComboBoxItem, _Icon, _Popover, _ResponsivePopover, _List, _BusyIndicator, _Button, _StandardListItem, _ComboBoxGroupItem, _GroupHeaderListItem) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/types/ValueState", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/types/InvisibleMessageMode", "sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper", "sap/ui/webc/common/thirdparty/base/util/InvisibleMessage", "sap/ui/webc/common/thirdparty/icons/slim-arrow-down", "sap/ui/webc/common/thirdparty/icons/decline", "sap/ui/webc/common/thirdparty/icons/not-editable", "sap/ui/webc/common/thirdparty/icons/error", "sap/ui/webc/common/thirdparty/icons/alert", "sap/ui/webc/common/thirdparty/icons/sys-enter-2", "sap/ui/webc/common/thirdparty/icons/information", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/FeaturesRegistry", "sap/ui/webc/common/thirdparty/base/Keys", "./Filters", "./generated/i18n/i18n-defaults", "./generated/templates/ComboBoxTemplate.lit", "./generated/templates/ComboBoxPopoverTemplate.lit", "./generated/themes/ComboBox.css", "./generated/themes/ComboBoxPopover.css", "./generated/themes/ResponsivePopoverCommon.css", "./generated/themes/ValueStateMessage.css", "./generated/themes/Suggestions.css", "./ComboBoxItem", "./Icon", "./Popover", "./ResponsivePopover", "./List", "./BusyIndicator", "./Button", "./StandardListItem", "./ComboBoxGroupItem", "./GroupHeaderListItem", "./types/ComboBoxFilter", "./types/PopoverHorizontalAlign"], function (_exports, _UI5Element, _customElement, _property, _event, _slot, _LitRenderer, _ValueState, _Device, _Integer, _InvisibleMessageMode, _AriaLabelHelper, _InvisibleMessage, _slimArrowDown, _decline, _notEditable, _error, _alert, _sysEnter, _information, _i18nBundle, _FeaturesRegistry, _Keys, Filters, _i18nDefaults, _ComboBoxTemplate, _ComboBoxPopoverTemplate, _ComboBox, _ComboBoxPopover, _ResponsivePopoverCommon, _ValueStateMessage, _Suggestions, _ComboBoxItem, _Icon, _Popover, _ResponsivePopover, _List, _BusyIndicator, _Button, _StandardListItem, _ComboBoxGroupItem, _GroupHeaderListItem, _ComboBoxFilter, _PopoverHorizontalAlign) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -6,9 +6,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   });
   _exports.default = void 0;
   _UI5Element = _interopRequireDefault(_UI5Element);
+  _customElement = _interopRequireDefault(_customElement);
+  _property = _interopRequireDefault(_property);
+  _event = _interopRequireDefault(_event);
+  _slot = _interopRequireDefault(_slot);
   _LitRenderer = _interopRequireDefault(_LitRenderer);
   _ValueState = _interopRequireDefault(_ValueState);
   _Integer = _interopRequireDefault(_Integer);
+  _InvisibleMessageMode = _interopRequireDefault(_InvisibleMessageMode);
   _InvisibleMessage = _interopRequireDefault(_InvisibleMessage);
   Filters = _interopRequireWildcard(Filters);
   _ComboBoxTemplate = _interopRequireDefault(_ComboBoxTemplate);
@@ -28,260 +33,27 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   _StandardListItem = _interopRequireDefault(_StandardListItem);
   _ComboBoxGroupItem = _interopRequireDefault(_ComboBoxGroupItem);
   _GroupHeaderListItem = _interopRequireDefault(_GroupHeaderListItem);
+  _ComboBoxFilter = _interopRequireDefault(_ComboBoxFilter);
+  _PopoverHorizontalAlign = _interopRequireDefault(_PopoverHorizontalAlign);
   function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
   function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  // Templates
-
-  // Styles
-
-  /**
-   * @public
-   */
-  const metadata = {
-    tag: "ui5-combobox",
-    languageAware: true,
-    properties: /** @lends sap.ui.webcomponents.main.ComboBox.prototype */{
-      /**
-       * Defines the value of the component.
-       *
-       * @type {string}
-       * @defaultvalue ""
-       * @public
-       */
-      value: {
-        type: String,
-        defaultValue: ""
-      },
-      /**
-       * Defines the "live" value of the component.
-       * <br><br>
-       * <b>Note:</b> If we have an item e.g. "Bulgaria", "B" is typed, "ulgaria" is typed ahead, value will be "Bulgaria", filterValue will be "B".
-       *
-       * <br><br>
-       * <b>Note:</b> Initially the filter value is synced with value.
-       *
-       * @type {string}
-       * @defaultvalue ""
-       * @private
-       */
-      filterValue: {
-        type: String,
-        defaultValue: ""
-      },
-      /**
-       * Defines a short hint intended to aid the user with data entry when the
-       * component has no value.
-       * @type {string}
-       * @defaultvalue ""
-       * @public
-       */
-      placeholder: {
-        type: String,
-        defaultValue: ""
-      },
-      /**
-       * Defines whether the component is in disabled state.
-       * <br><br>
-       * <b>Note:</b> A disabled component is completely noninteractive.
-       *
-       * @type {boolean}
-       * @defaultvalue false
-       * @public
-       */
-      disabled: {
-        type: 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 {ValueState}
-       * @defaultvalue "None"
-       * @public
-       */
-      valueState: {
-        type: _ValueState.default,
-        defaultValue: _ValueState.default.None
-      },
-      /**
-       * 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}
-       * @defaultvalue false
-       * @public
-       */
-      readonly: {
-        type: Boolean
-      },
-      /**
-       * Defines whether the component is required.
-       *
-       * @type {boolean}
-       * @defaultvalue false
-       * @public
-       */
-      required: {
-        type: Boolean
-      },
-      /**
-       * Indicates whether a loading indicator should be shown in the picker.
-       *
-       * @type {boolean}
-       * @defaultvalue false
-       * @public
-       */
-      loading: {
-        type: Boolean
-      },
-      /**
-       * Defines the filter type of the component.
-       * Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code> and <code>Contains</code>.
-       *
-       * @type {string}
-       * @defaultvalue "StartsWithPerTerm"
-       * @public
-       */
-      filter: {
-        type: String,
-        defaultValue: "StartsWithPerTerm"
-      },
-      /**
-       * Indicates whether the input is focssed
-       * @private
-       */
-      focused: {
-        type: Boolean
-      },
-      /**
-       * Indicates whether the visual focus is on the value state header
-       * @private
-       */
-      _isValueStateFocused: {
-        type: Boolean
-      },
-      /**
-       * Defines the accessible aria name of the component.
-       *
-       * @type {string}
-       * @defaultvalue: ""
-       * @public
-       * @since 1.0.0-rc.15
-       */
-      accessibleName: {
-        type: String,
-        defaultValue: undefined
-      },
-      /**
-       * Receives id(or many ids) of the elements that label the component
-       * @type {string}
-       * @defaultvalue ""
-       * @public
-       * @since 1.0.0-rc.15
-       */
-      accessibleNameRef: {
-        type: String,
-        defaultValue: ""
-      },
-      _iconPressed: {
-        type: Boolean,
-        noAttribute: true
-      },
-      _filteredItems: {
-        type: Object
-      },
-      _listWidth: {
-        type: _Integer.default,
-        defaultValue: 0,
-        noAttribute: true
-      }
-    },
-    managedSlots: true,
-    slots: /** @lends sap.ui.webcomponents.main.ComboBox.prototype */{
-      /**
-       * Defines the component items.
-       *
-       * @type {sap.ui.webcomponents.main.IComboBoxItem[]}
-       * @slot items
-       * @public
-       */
-      "default": {
-        propertyName: "items",
-        type: HTMLElement,
-        invalidateOnChildChange: true
-      },
-      /**
-       * Defines the value state message that will be displayed as pop up under the component.
-       * <br><br>
-       *
-       * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
-       * <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[]}
-       * @since 1.0.0-rc.9
-       * @slot
-       * @public
-       */
-      valueStateMessage: {
-        type: HTMLElement
-      },
-      /**
-       * Defines the icon to be displayed in the input field.
-       *
-       * @type {sap.ui.webcomponents.main.IIcon}
-       * @slot
-       * @public
-       * @since 1.0.0-rc.9
-       */
-      icon: {
-        type: HTMLElement
-      }
-    },
-    events: /** @lends sap.ui.webcomponents.main.ComboBox.prototype */{
-      /**
-       * Fired when the input operation has finished by pressing Enter, focusout or an item is selected.
-       *
-       * @event
-       * @public
-       */
-      change: {},
-      /**
-       * Fired when typing in input.
-       * <br><br>
-       * <b>Note:</b> filterValue property is updated, input is changed.
-       * @event
-       * @public
-       */
-      input: {},
-      /**
-       * Fired when selection is changed by user interaction
-       *
-       * @event sap.ui.webcomponents.main.ComboBox#selection-change
-       * @param {HTMLElement} item item to be selected.
-       * @public
-       */
-      "selection-change": {
-        detail: {
-          item: {
-            type: HTMLElement
-          }
-        }
-      }
-    }
+  var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
-
+  var ComboBox_1;
+  const SKIP_ITEMS_SIZE = 10;
+  var ValueStateIconMapping;
+  (function (ValueStateIconMapping) {
+    ValueStateIconMapping["Error"] = "error";
+    ValueStateIconMapping["Warning"] = "alert";
+    ValueStateIconMapping["Success"] = "sys-enter-2";
+    ValueStateIconMapping["Information"] = "information";
+  })(ValueStateIconMapping || (ValueStateIconMapping = {}));
   /**
    * @class
    *
@@ -293,8 +65,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    *
    * <h3>Structure</h3>
    * The <code>ui5-combobox</code> 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> 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>
@@ -324,90 +97,81 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    *
    * @constructor
    * @author SAP SE
-   * @alias sap.ui.webcomponents.main.ComboBox
-   * @extends UI5Element
+   * @alias sap.ui.webc.main.ComboBox
+   * @extends sap.ui.webc.base.UI5Element
    * @tagname ui5-combobox
-   * @appenddocs ComboBoxItem ComboBoxGroupItem
+   * @appenddocs sap.ui.webc.main.ComboBoxItem sap.ui.webc.main.ComboBoxGroupItem
    * @public
    * @since 1.0.0-rc.6
    */
-  class ComboBox extends _UI5Element.default {
-    static get metadata() {
-      return metadata;
-    }
-    static get render() {
-      return _LitRenderer.default;
-    }
-    static get styles() {
-      return _ComboBox.default;
-    }
-    static get staticAreaStyles() {
-      return [_ResponsivePopoverCommon.default, _ValueStateMessage.default, _ComboBoxPopover.default, _Suggestions.default];
-    }
-    static get template() {
-      return _ComboBoxTemplate.default;
-    }
-    static get staticAreaTemplate() {
-      return _ComboBoxPopoverTemplate.default;
-    }
-    constructor(props) {
-      super(props);
+  let ComboBox = ComboBox_1 = class ComboBox extends _UI5Element.default {
+    constructor() {
+      super();
       this._filteredItems = [];
       this._initialRendering = true;
       this._itemFocused = false;
-      this._selectionChanged = false;
-      this.FormSupport = undefined;
+      this._autocomplete = false;
+      this._isKeyNavigation = false;
+      this._lastValue = "";
+      this._selectionPerformed = false;
+      this._selectedItemText = "";
+      this._userTypedValue = "";
     }
     onBeforeRendering() {
+      const popover = this.valueStatePopover;
       this.FormSupport = (0, _FeaturesRegistry.getFeature)("FormSupport");
-      if (this._initialRendering) {
+      if (this._initialRendering || this.filter === "None") {
         this._filteredItems = this.items;
       }
-      if (!this._initialRendering && this.popover && document.activeElement === this && !this._filteredItems.length) {
-        this.popover.close();
+      if (!this._initialRendering && document.activeElement === this && !this._filteredItems.length) {
+        popover?.close();
       }
       this._selectMatchingItem();
       this._initialRendering = false;
+      const slottedIconsCount = this.icon.length || 0;
+      const arrowDownIconsCount = this.readonly ? 0 : 1;
+      this.style.setProperty("--_ui5-input-icons-count", `${slottedIconsCount + arrowDownIconsCount}`);
     }
     async onAfterRendering() {
-      await this._respPopover();
-      if ((0, _Device.isPhone)() && this.responsivePopover.opened) {
+      const picker = await this._getPicker();
+      if ((0, _Device.isPhone)() && picker.opened) {
         // Set initial focus to the native input
         this.inner.focus();
       }
-      if (this.shouldClosePopover() && !(0, _Device.isPhone)()) {
-        this.responsivePopover.close(false, false, true);
+      if ((await this.shouldClosePopover()) && !(0, _Device.isPhone)()) {
+        picker.close(false, false, true);
         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 ((0, _Device.isSafari)() && this._autocomplete && this.filterValue !== this.value) {
         this.inner.setSelectionRange(this._isKeyNavigation ? 0 : this.filterValue.length, this.value.length);
       }
     }
-    shouldClosePopover() {
-      return this.responsivePopover.opened && !this.focused && !this._itemFocused && !this._isValueStateFocused;
+    async shouldClosePopover() {
+      const popover = await this._getPicker();
+      return popover.opened && !this.focused && !this._itemFocused && !this._isValueStateFocused;
     }
-    _focusin(event) {
+    _focusin(e) {
       this.focused = true;
       this._lastValue = this.value;
       this._autocomplete = false;
-      !(0, _Device.isPhone)() && event.target.setSelectionRange(0, this.value.length);
+      !(0, _Device.isPhone)() && e.target.setSelectionRange(0, this.value.length);
     }
-    _focusout(event) {
-      const focusedOutToValueStateMessage = event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root");
+    _focusout(e) {
+      const toBeFocused = e.relatedTarget;
+      const focusedOutToValueStateMessage = toBeFocused?.shadowRoot?.querySelector(".ui5-valuestatemessage-root");
       this._fireChangeEvent();
       if (focusedOutToValueStateMessage) {
-        event.stopImmediatePropagation();
+        e.stopImmediatePropagation();
         return;
       }
-      if (!this.shadowRoot.contains(event.relatedTarget) && this.staticAreaItem !== event.relatedTarget) {
+      if (!this.shadowRoot.contains(toBeFocused) && this.staticAreaItem !== e.relatedTarget) {
         this.focused = false;
-        !(0, _Device.isPhone)() && this._closeRespPopover(event);
+        !(0, _Device.isPhone)() && this._closeRespPopover(e);
       }
     }
     _afterOpenPopover() {
@@ -416,7 +180,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _afterClosePopover() {
       this._iconPressed = false;
       this._filteredItems = this.items;
-
       // close device's keyboard and prevent further typing
       if ((0, _Device.isPhone)()) {
         this.blur();
@@ -426,16 +189,17 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         this._selectionPerformed = false;
       }
     }
-    _toggleRespPopover() {
-      if (this.responsivePopover.opened) {
+    async _toggleRespPopover() {
+      const picker = await this._getPicker();
+      if (picker.opened) {
         this._closeRespPopover();
       } else {
         this._openRespPopover();
       }
     }
-    storeResponsivePopoverWidth() {
+    async storeResponsivePopoverWidth() {
       if (this.open && !this._listWidth) {
-        this._listWidth = this.responsivePopover.offsetWidth;
+        this._listWidth = (await this._getPicker()).offsetWidth;
       }
     }
     toggleValueStatePopover(open) {
@@ -446,19 +210,21 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
     }
     async openValueStatePopover() {
-      this.popover = await this._getPopover();
-      this.popover && this.popover.showAt(this);
+      (await this._getValueStatePopover())?.showAt(this);
     }
     async closeValueStatePopover() {
-      this.popover = await this._getPopover();
-      this.popover && this.popover.close();
+      (await this._getValueStatePopover())?.close();
     }
-    async _getPopover() {
+    async _getValueStatePopover() {
       const staticAreaItem = await this.getStaticAreaItemDomRef();
-      return staticAreaItem.querySelector(".ui5-valuestatemessage-popover");
+      const popover = staticAreaItem.querySelector(".ui5-valuestatemessage-popover");
+      // backward compatibility
+      // rework all methods to work with async getters
+      this.valueStatePopover = popover;
+      return popover;
     }
     _resetFilter() {
-      this._userTypedValue = null;
+      this._userTypedValue = "";
       this.inner.setSelectionRange(0, this.value.length);
       this._filteredItems = this._filterItems("");
       this._selectMatchingItem();
@@ -466,15 +232,19 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _arrowClick() {
       this.inner.focus();
       this._resetFilter();
+      if ((0, _Device.isPhone)() && this.value && !this._lastValue) {
+        this._lastValue = this.value;
+      }
       this._toggleRespPopover();
     }
-    _input(event) {
+    _input(e) {
       const {
         value
-      } = event.target;
-      if (event.target === this.inner) {
+      } = e.target;
+      const shouldAutocomplete = this.shouldAutocomplete(e);
+      if (e.target === this.inner) {
         // stop the native event, as the semantic "input" would be fired.
-        event.stopImmediatePropagation();
+        e.stopImmediatePropagation();
         this.focused = true;
         this._isValueStateFocused = false;
       }
@@ -482,16 +252,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this.value = value;
       this.filterValue = value;
       this._clearFocus();
-
       // autocomplete
-      if (this._autocomplete && !(0, _Device.isAndroid)()) {
+      if (shouldAutocomplete && !(0, _Device.isAndroid)()) {
         const item = this._getFirstMatchingItem(value);
-        this._applyAtomicValueAndSelection(item, value, true);
-        if (value !== "" && !this._selectionChanged && item && !item.selected && !item.isGroupItem) {
+        item && this._applyAtomicValueAndSelection(item, value, true);
+        if (value !== "" && item && !item.selected && !item.isGroupItem) {
           this.fireEvent("selection-change", {
             item
           });
-          this._selectionChanged = false;
         }
       }
       this.fireEvent("input");
@@ -504,6 +272,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         this._openRespPopover();
       }
     }
+    shouldAutocomplete(e) {
+      const eventType = e.inputType;
+      const allowedEventTypes = ["deleteWordBackward", "deleteWordForward", "deleteSoftLineBackward", "deleteSoftLineForward", "deleteEntireSoftLine", "deleteHardLineBackward", "deleteHardLineForward", "deleteByDrag", "deleteByCut", "deleteContent", "deleteContentBackward", "deleteContentForward", "historyUndo"];
+      return !allowedEventTypes.includes(eventType);
+    }
     _startsWithMatchingItems(str) {
       return Filters.StartsWith(str, this._filteredItems, "text");
     }
@@ -513,26 +286,28 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         return item;
       });
     }
-    handleNavKeyPress(event) {
-      if (this.focused && ((0, _Keys.isHome)(event) || (0, _Keys.isEnd)(event)) && this.value) {
+    handleNavKeyPress(e) {
+      if (this.focused && ((0, _Keys.isHome)(e) || (0, _Keys.isEnd)(e)) && this.value) {
         return;
       }
       const isOpen = this.open;
       const currentItem = this._filteredItems.find(item => {
         return isOpen ? item.focused : item.selected;
       });
-      const indexOfItem = this._filteredItems.indexOf(currentItem);
-      event.preventDefault();
-      if (this.focused && isOpen && ((0, _Keys.isUp)(event) || (0, _Keys.isPageUp)(event) || (0, _Keys.isPageDown)(event))) {
+      const indexOfItem = currentItem ? this._filteredItems.indexOf(currentItem) : -1;
+      e.preventDefault();
+      if (this.focused && isOpen && ((0, _Keys.isUp)(e) || (0, _Keys.isPageUp)(e) || (0, _Keys.isPageDown)(e))) {
         return;
       }
-      if (this._filteredItems.length - 1 === indexOfItem && (0, _Keys.isDown)(event)) {
+      if (this._filteredItems.length - 1 === indexOfItem && (0, _Keys.isDown)(e)) {
         return;
       }
       this._isKeyNavigation = true;
-      this[`_handle${event.key}`](event, indexOfItem);
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "PageUp" || e.key === "PageDown" || e.key === "Home" || e.key === "End") {
+        this[`_handle${e.key}`](e, indexOfItem);
+      }
     }
-    _handleItemNavigation(event, indexOfItem, isForward) {
+    _handleItemNavigation(e, indexOfItem, isForward) {
       const isOpen = this.open;
       const currentItem = this._filteredItems[indexOfItem];
       const nextItem = isForward ? this._filteredItems[indexOfItem + 1] : this._filteredItems[indexOfItem - 1];
@@ -552,15 +327,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         currentItem.focused = false;
       }
       this._isValueStateFocused = false;
-      this._selectionChanged = true;
+      this._announceSelectedItem(indexOfItem);
       if (isGroupItem && isOpen) {
         return;
       }
-      this._announceSelectedItem(indexOfItem);
-
       // autocomplete
       const item = this._getFirstMatchingItem(this.value);
-      this._applyAtomicValueAndSelection(item, this.open ? this._userTypedValue : null, true);
+      item && this._applyAtomicValueAndSelection(item, this.open ? this._userTypedValue : "", true);
       if (item && !item.selected) {
         this.fireEvent("selection-change", {
           item
@@ -569,7 +342,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this.fireEvent("input");
       this._fireChangeEvent();
     }
-    _handleArrowDown(event, indexOfItem) {
+    _handleArrowDown(e, indexOfItem) {
       const isOpen = this.open;
       if (this.focused && indexOfItem === -1 && this.hasValueStateText && isOpen) {
         this._isValueStateFocused = true;
@@ -577,10 +350,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         return;
       }
       indexOfItem = !isOpen && this.hasValueState && indexOfItem === -1 ? 0 : indexOfItem;
-      this._handleItemNavigation(event, ++indexOfItem, true /* isForward */);
+      this._handleItemNavigation(e, ++indexOfItem, true /* isForward */);
     }
 
-    _handleArrowUp(event, indexOfItem) {
+    _handleArrowUp(e, indexOfItem) {
       const isOpen = this.open;
       if (indexOfItem === 0 && !this.hasValueStateText) {
         this._clearFocus();
@@ -601,12 +374,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         return;
       }
       indexOfItem = !isOpen && this.hasValueState && indexOfItem === -1 ? 0 : indexOfItem;
-      this._handleItemNavigation(event, --indexOfItem, false /* isForward */);
+      this._handleItemNavigation(e, --indexOfItem, false /* isForward */);
     }
 
-    _handlePageUp(event, indexOfItem) {
-      const isProposedIndexValid = indexOfItem - ComboBox.SKIP_ITEMS_SIZE > -1;
-      indexOfItem = isProposedIndexValid ? indexOfItem - ComboBox.SKIP_ITEMS_SIZE : 0;
+    _handlePageUp(e, indexOfItem) {
+      const isProposedIndexValid = indexOfItem - SKIP_ITEMS_SIZE > -1;
+      indexOfItem = isProposedIndexValid ? indexOfItem - SKIP_ITEMS_SIZE : 0;
       const shouldMoveForward = this._filteredItems[indexOfItem].isGroupItem && !this.open;
       if (!isProposedIndexValid && this.hasValueStateText && this.open) {
         this._clearFocus();
@@ -614,16 +387,16 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         this._isValueStateFocused = true;
         return;
       }
-      this._handleItemNavigation(event, indexOfItem, shouldMoveForward);
+      this._handleItemNavigation(e, indexOfItem, shouldMoveForward);
     }
-    _handlePageDown(event, indexOfItem) {
+    _handlePageDown(e, indexOfItem) {
       const itemsLength = this._filteredItems.length;
-      const isProposedIndexValid = indexOfItem + ComboBox.SKIP_ITEMS_SIZE < itemsLength;
-      indexOfItem = isProposedIndexValid ? indexOfItem + ComboBox.SKIP_ITEMS_SIZE : itemsLength - 1;
+      const isProposedIndexValid = indexOfItem + SKIP_ITEMS_SIZE < itemsLength;
+      indexOfItem = isProposedIndexValid ? indexOfItem + SKIP_ITEMS_SIZE : itemsLength - 1;
       const shouldMoveForward = this._filteredItems[indexOfItem].isGroupItem && !this.open;
-      this._handleItemNavigation(event, indexOfItem, shouldMoveForward);
+      this._handleItemNavigation(e, indexOfItem, shouldMoveForward);
     }
-    _handleHome(event, indexOfItem) {
+    _handleHome(e) {
       const shouldMoveForward = this._filteredItems[0].isGroupItem && !this.open;
       if (this.hasValueStateText && this.open) {
         this._clearFocus();
@@ -631,41 +404,42 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         this._isValueStateFocused = true;
         return;
       }
-      this._handleItemNavigation(event, indexOfItem = 0, shouldMoveForward);
+      this._handleItemNavigation(e, 0, shouldMoveForward);
     }
-    _handleEnd(event, indexOfItem) {
-      this._handleItemNavigation(event, indexOfItem = this._filteredItems.length - 1, true /* isForward */);
+    _handleEnd(e) {
+      this._handleItemNavigation(e, this._filteredItems.length - 1, true /* isForward */);
     }
 
-    _keyup(event) {
-      this._userTypedValue = this.value.substring(0, this.inner.selectionStart);
+    _keyup() {
+      this._userTypedValue = this.value.substring(0, this.inner.selectionStart || 0);
     }
-    _keydown(event) {
-      const isNavKey = (0, _Keys.isDown)(event) || (0, _Keys.isUp)(event) || (0, _Keys.isPageUp)(event) || (0, _Keys.isPageDown)(event) || (0, _Keys.isHome)(event) || (0, _Keys.isEnd)(event);
-      this._autocomplete = !((0, _Keys.isBackSpace)(event) || (0, _Keys.isDelete)(event));
+    _keydown(e) {
+      const isNavKey = (0, _Keys.isDown)(e) || (0, _Keys.isUp)(e) || (0, _Keys.isPageUp)(e) || (0, _Keys.isPageDown)(e) || (0, _Keys.isHome)(e) || (0, _Keys.isEnd)(e);
+      const picker = this.responsivePopover;
+      this._autocomplete = !((0, _Keys.isBackSpace)(e) || (0, _Keys.isDelete)(e));
       this._isKeyNavigation = false;
       if (isNavKey && !this.readonly && this._filteredItems.length) {
-        this.handleNavKeyPress(event);
+        this.handleNavKeyPress(e);
       }
-      if ((0, _Keys.isEnter)(event)) {
+      if ((0, _Keys.isEnter)(e)) {
         this._fireChangeEvent();
-        if (this.responsivePopover.opened) {
+        if (picker?.opened) {
           this._closeRespPopover();
           this.focused = true;
         } else if (this.FormSupport) {
           this.FormSupport.triggerFormSubmit(this);
         }
       }
-      if ((0, _Keys.isEscape)(event)) {
+      if ((0, _Keys.isEscape)(e)) {
         this.focused = true;
         this.value = !this.open ? this._lastValue : this.value;
         this._isValueStateFocused = false;
       }
-      if (((0, _Keys.isTabNext)(event) || (0, _Keys.isTabPrevious)(event)) && this.open) {
+      if (((0, _Keys.isTabNext)(e) || (0, _Keys.isTabPrevious)(e)) && this.open) {
         this._closeRespPopover();
       }
-      if ((0, _Keys.isShow)(event) && !this.readonly && !this.disabled) {
-        event.preventDefault();
+      if ((0, _Keys.isShow)(e) && !this.readonly && !this.disabled) {
+        e.preventDefault();
         this._resetFilter();
         this._toggleRespPopover();
         const selectedItem = this._filteredItems.find(item => {
@@ -677,37 +451,43 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
           this.focused = false;
         } else if (this.open && this._filteredItems.length) {
           // If no item is selected, select the first one on "Show" (F4, Alt+Up/Down)
-          this._handleItemNavigation(event, 0, true /* isForward */);
+          this._handleItemNavigation(e, 0, true /* isForward */);
         } else {
           this.focused = true;
         }
       }
     }
-    _click(event) {
+    _click() {
       if ((0, _Device.isPhone)() && !this.readonly) {
         this._openRespPopover();
       }
     }
-    _closeRespPopover(event) {
-      if ((0, _Device.isPhone)() && event && event.target.classList.contains("ui5-responsive-popover-close-btn") && this._selectedItemText) {
+    _closeRespPopover(e) {
+      const picker = this.responsivePopover;
+      if (e && e.target.classList.contains("ui5-responsive-popover-close-btn") && this._selectedItemText) {
         this.value = this._selectedItemText;
         this.filterValue = this._selectedItemText;
       }
+      if (e && e.target.classList.contains("ui5-responsive-popover-close-btn")) {
+        this.value = this._lastValue || "";
+        this.filterValue = this._lastValue || "";
+      }
+      if ((0, _Device.isPhone)()) {
+        this._fireChangeEvent();
+      }
       this._isValueStateFocused = false;
       this._clearFocus();
-      this.responsivePopover.close();
+      picker?.close();
     }
-    _openRespPopover() {
-      this.responsivePopover.showAt(this);
+    async _openRespPopover() {
+      (await this._getPicker()).showAt(this);
     }
     _filterItems(str) {
       const itemsToFilter = this.items.filter(item => !item.isGroupItem);
       const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter, "text");
-
       // Return the filtered items and their group items
-      return this.items.filter((item, idx, allItems) => ComboBox._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
+      return this.items.filter((item, idx, allItems) => ComboBox_1._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
     }
-
     /**
      * Returns true if the group header should be shown (if there is a filtered suggestion item for this group item)
      *
@@ -725,7 +505,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     }
     _getFirstMatchingItem(current) {
       const currentlyFocusedItem = this.items.find(item => item.focused === true);
-      if (currentlyFocusedItem && currentlyFocusedItem.isGroupItem) {
+      if (currentlyFocusedItem?.isGroupItem) {
         this.value = this.filterValue;
         return;
       }
@@ -735,13 +515,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
     }
     _applyAtomicValueAndSelection(item, filterValue, highlightValue) {
-      if (!item) {
-        return;
-      }
       const value = item && item.text || "";
       this.inner.value = value;
       if (highlightValue) {
-        filterValue = filterValue || "";
         this.inner.setSelectionRange(filterValue.length, value.length);
       }
       this.value = value;
@@ -760,14 +536,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         this._lastValue = this.value;
       }
     }
-    _inputChange(event) {
-      event.preventDefault();
+    _inputChange(e) {
+      e.preventDefault();
     }
-    _itemMousedown(event) {
-      event.preventDefault();
+    _itemMousedown(e) {
+      e.preventDefault();
     }
-    _selectItem(event) {
-      const listItem = event.detail.item;
+    _selectItem(e) {
+      const listItem = e.detail.item;
       this._selectedItemText = listItem.mappedItem.text;
       this._selectionPerformed = true;
       const sameItemSelected = this.value === this._selectedItemText;
@@ -781,7 +557,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         this.fireEvent("selection-change", {
           item: listItem.mappedItem
         });
-        this._selectionChanged = true;
       }
       this._filteredItems.map(item => {
         item.selected = item === listItem.mappedItem && !item.isGroupItem;
@@ -789,34 +564,40 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       });
       this._fireChangeEvent();
       this._closeRespPopover();
-
       // reset selection
       this.inner.setSelectionRange(this.value.length, this.value.length);
     }
-    _onItemFocus(event) {
+    _onItemFocus() {
       this._itemFocused = true;
     }
     _announceSelectedItem(indexOfItem) {
-      const itemPositionText = ComboBox.i18nBundle.getText(_i18nDefaults.LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length);
-      const itemSelectionText = ComboBox.i18nBundle.getText(_i18nDefaults.LIST_ITEM_SELECTED);
-      (0, _InvisibleMessage.default)(`${itemPositionText} ${itemSelectionText}`, "Polite");
+      const currentItem = this._filteredItems[indexOfItem];
+      const currentItemAdditionalText = currentItem.additionalText || "";
+      const isGroupItem = currentItem?.isGroupItem;
+      const itemPositionText = ComboBox_1.i18nBundle.getText(_i18nDefaults.LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length);
+      const groupHeaderText = ComboBox_1.i18nBundle.getText(_i18nDefaults.LIST_ITEM_GROUP_HEADER);
+      if (isGroupItem) {
+        (0, _InvisibleMessage.default)(`${groupHeaderText} ${currentItem.text} ${itemPositionText}`, _InvisibleMessageMode.default.Polite);
+      } else {
+        (0, _InvisibleMessage.default)(`${currentItemAdditionalText} ${itemPositionText}`.trim(), _InvisibleMessageMode.default.Polite);
+      }
     }
     get _headerTitleText() {
-      return ComboBox.i18nBundle.getText(_i18nDefaults.INPUT_SUGGESTIONS_TITLE);
+      return ComboBox_1.i18nBundle.getText(_i18nDefaults.INPUT_SUGGESTIONS_TITLE);
     }
     get _iconAccessibleNameText() {
-      return ComboBox.i18nBundle.getText(_i18nDefaults.SELECT_OPTIONS);
+      return ComboBox_1.i18nBundle.getText(_i18nDefaults.SELECT_OPTIONS);
     }
     get inner() {
       return (0, _Device.isPhone)() ? this.responsivePopover.querySelector(".ui5-input-inner-phone") : this.shadowRoot.querySelector("[inner-input]");
     }
-    async _respPopover() {
+    async _getPicker() {
       const staticAreaItem = await this.getStaticAreaItemDomRef();
-      this.responsivePopover = staticAreaItem.querySelector("[ui5-responsive-popover]");
-      return this.responsivePopover;
-    }
-    get editable() {
-      return !this.readonly;
+      const picker = staticAreaItem.querySelector("[ui5-responsive-popover]");
+      // backward compatibility
+      // rework all methods to work with async getters
+      this.responsivePopover = picker;
+      return picker;
     }
     get hasValueState() {
       return this.valueState !== _ValueState.default.None;
@@ -824,21 +605,42 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get hasValueStateText() {
       return this.hasValueState && this.valueState !== _ValueState.default.Success;
     }
-    get valueStateText() {
+    get ariaValueStateHiddenText() {
+      if (!this.hasValueState) {
+        return "";
+      }
+      let text = "";
+      if (this.valueState !== _ValueState.default.None) {
+        text = this.valueStateTypeMappings[this.valueState];
+      }
+      if (this.shouldDisplayDefaultValueStateMessage) {
+        return `${text} ${this.valueStateDefaultText || ""}`;
+      }
+      return `${text}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+    }
+    get valueStateDefaultText() {
+      if (this.valueState === _ValueState.default.None) {
+        return;
+      }
       return this.valueStateTextMappings[this.valueState];
     }
     get valueStateMessageText() {
       return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
     }
-    get valueStateTextId() {
-      return this.hasValueState ? `${this._id}-valueStateDesc` : undefined;
-    }
     get valueStateTextMappings() {
       return {
-        "Success": ComboBox.i18nBundle.getText(_i18nDefaults.VALUE_STATE_SUCCESS),
-        "Error": ComboBox.i18nBundle.getText(_i18nDefaults.VALUE_STATE_ERROR),
-        "Warning": ComboBox.i18nBundle.getText(_i18nDefaults.VALUE_STATE_WARNING),
-        "Information": ComboBox.i18nBundle.getText(_i18nDefaults.VALUE_STATE_INFORMATION)
+        [_ValueState.default.Success]: ComboBox_1.i18nBundle.getText(_i18nDefaults.VALUE_STATE_SUCCESS),
+        [_ValueState.default.Error]: ComboBox_1.i18nBundle.getText(_i18nDefaults.VALUE_STATE_ERROR),
+        [_ValueState.default.Warning]: ComboBox_1.i18nBundle.getText(_i18nDefaults.VALUE_STATE_WARNING),
+        [_ValueState.default.Information]: ComboBox_1.i18nBundle.getText(_i18nDefaults.VALUE_STATE_INFORMATION)
+      };
+    }
+    get valueStateTypeMappings() {
+      return {
+        [_ValueState.default.Success]: ComboBox_1.i18nBundle.getText(_i18nDefaults.VALUE_STATE_TYPE_SUCCESS),
+        [_ValueState.default.Information]: ComboBox_1.i18nBundle.getText(_i18nDefaults.VALUE_STATE_TYPE_INFORMATION),
+        [_ValueState.default.Error]: ComboBox_1.i18nBundle.getText(_i18nDefaults.VALUE_STATE_TYPE_ERROR),
+        [_ValueState.default.Warning]: ComboBox_1.i18nBundle.getText(_i18nDefaults.VALUE_STATE_TYPE_WARNING)
       };
     }
     get shouldOpenValueStateMessagePopover() {
@@ -848,23 +650,16 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return !this.valueStateMessage.length && this.hasValueStateText;
     }
     get _valueStatePopoverHorizontalAlign() {
-      return this.effectiveDir !== "rtl" ? "Left" : "Right";
+      return this.effectiveDir !== "rtl" ? _PopoverHorizontalAlign.default.Left : _PopoverHorizontalAlign.default.Right;
     }
-
     /**
      * This method is relevant for sap_horizon theme only
      */
     get _valueStateMessageIcon() {
-      const iconPerValueState = {
-        Error: "error",
-        Warning: "alert",
-        Success: "sys-enter-2",
-        Information: "information"
-      };
-      return this.valueState !== _ValueState.default.None ? iconPerValueState[this.valueState] : "";
+      return this.valueState !== _ValueState.default.None ? ValueStateIconMapping[this.valueState] : "";
     }
     get open() {
-      return this.responsivePopover ? this.responsivePopover.opened : false;
+      return this?.responsivePopover?.opened || false;
     }
     get _isPhone() {
       return (0, _Device.isPhone)();
@@ -875,11 +670,8 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get ariaLabelText() {
       return (0, _AriaLabelHelper.getEffectiveAriaLabelText)(this);
     }
-    static get dependencies() {
-      return [_ComboBoxItem.default, _Icon.default, _ResponsivePopover.default, _List.default, _BusyIndicator.default, _Button.default, _StandardListItem.default, _GroupHeaderListItem.default, _Popover.default, _ComboBoxGroupItem.default];
-    }
     static async onDefine() {
-      ComboBox.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
+      ComboBox_1.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
     }
     get styles() {
       const remSizeInPx = parseInt(getComputedStyle(document.documentElement).fontSize);
@@ -889,10 +681,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         },
         suggestionPopoverHeader: {
           "display": this._listWidth === 0 ? "none" : "inline-block",
-          "width": `${this._listWidth}px`
+          "width": `${this._listWidth || ""}px`
         },
         suggestionsPopover: {
-          "min-width": `${this.offsetWidth}px`,
+          "min-width": `${this.offsetWidth || 0}px`,
           "max-width": this.offsetWidth / remSizeInPx > 40 ? `${this.offsetWidth}px` : "40rem"
         }
       };
@@ -900,8 +692,8 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get classes() {
       return {
         popover: {
-          "ui5-suggestions-popover": !this.isPhone,
-          "ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.hasValueStateText
+          "ui5-suggestions-popover": !this._isPhone,
+          "ui5-suggestions-popover-with-value-state-header": !this._isPhone && this.hasValueStateText
         },
         popoverValueState: {
           "ui5-valuestatemessage-header": true,
@@ -913,8 +705,94 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         }
       };
     }
-  }
-  ComboBox.SKIP_ITEMS_SIZE = 10;
+  };
+  __decorate([(0, _property.default)()], ComboBox.prototype, "value", void 0);
+  __decorate([(0, _property.default)()], ComboBox.prototype, "filterValue", void 0);
+  __decorate([(0, _property.default)()], ComboBox.prototype, "placeholder", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ComboBox.prototype, "disabled", void 0);
+  __decorate([(0, _property.default)({
+    type: _ValueState.default,
+    defaultValue: _ValueState.default.None
+  })], ComboBox.prototype, "valueState", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ComboBox.prototype, "readonly", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ComboBox.prototype, "required", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ComboBox.prototype, "loading", void 0);
+  __decorate([(0, _property.default)({
+    type: _ComboBoxFilter.default,
+    defaultValue: _ComboBoxFilter.default.StartsWithPerTerm
+  })], ComboBox.prototype, "filter", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ComboBox.prototype, "focused", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ComboBox.prototype, "_isValueStateFocused", void 0);
+  __decorate([(0, _property.default)()], ComboBox.prototype, "accessibleName", void 0);
+  __decorate([(0, _property.default)()], ComboBox.prototype, "accessibleNameRef", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean,
+    noAttribute: true
+  })], ComboBox.prototype, "_iconPressed", void 0);
+  __decorate([(0, _property.default)({
+    type: Object,
+    noAttribute: true,
+    multiple: true
+  })], ComboBox.prototype, "_filteredItems", void 0);
+  __decorate([(0, _property.default)({
+    validator: _Integer.default,
+    noAttribute: true
+  })], ComboBox.prototype, "_listWidth", void 0);
+  __decorate([(0, _slot.default)({
+    type: HTMLElement,
+    "default": true,
+    invalidateOnChildChange: true
+  })], ComboBox.prototype, "items", void 0);
+  __decorate([(0, _slot.default)()], ComboBox.prototype, "valueStateMessage", void 0);
+  __decorate([(0, _slot.default)()], ComboBox.prototype, "icon", void 0);
+  ComboBox = ComboBox_1 = __decorate([(0, _customElement.default)({
+    tag: "ui5-combobox",
+    languageAware: true,
+    renderer: _LitRenderer.default,
+    styles: _ComboBox.default,
+    staticAreaStyles: [_ResponsivePopoverCommon.default, _ValueStateMessage.default, _ComboBoxPopover.default, _Suggestions.default],
+    template: _ComboBoxTemplate.default,
+    staticAreaTemplate: _ComboBoxPopoverTemplate.default,
+    dependencies: [_ComboBoxItem.default, _Icon.default, _ResponsivePopover.default, _List.default, _BusyIndicator.default, _Button.default, _StandardListItem.default, _GroupHeaderListItem.default, _Popover.default, _ComboBoxGroupItem.default]
+  })
+  /**
+   * Fired when the input operation has finished by pressing Enter, focusout or an item is selected.
+   *
+   * @event sap.ui.webc.main.ComboBox#change
+   * @public
+   */, (0, _event.default)("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
+   * @public
+   */, (0, _event.default)("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.
+   * @public
+   */, (0, _event.default)("selection-change", {
+    detail: {
+      item: {
+        type: HTMLElement
+      }
+    }
+  })], ComboBox);
   ComboBox.define();
   var _default = ComboBox;
   _exports.default = _default;