@ui5/webcomponents 0.0.0-dcd8e5389 → 0.0.0-ddc5fe31b

package/dist/MultiComboBox.js

@@ -13,10 +13,11 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isShow, isDown, isUp, isSpace, isSpaceCtrl, isSpaceShift, isRight, isHome, isEnd, isTabNext, isTabPrevious, isUpShift, isDownShift, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isHomeCtrl, isEndCtrl, isCtrlA, isCtrlV, isDeleteShift, isInsertShift, isInsertCtrl, isBackSpace, isDelete, isEscape, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isShow, isDown, isUp, isSpace, isSpaceCtrl, isSpaceShift, isRight, isHome, isEnd, isTabNext, isTabPrevious, isUpShift, isDownShift, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isHomeCtrl, isEndCtrl, isCtrlA, isDeleteShift, isInsertShift, isInsertCtrl, isBackSpace, isDelete, isEscape, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
-import { isPhone, isAndroid, } from "@ui5/webcomponents-base/dist/Device.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import { isPhone, isAndroid, isFirefox, } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/multiselect-all.js";
@@ -27,6 +28,7 @@ import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import MultiComboBoxItem from "./MultiComboBoxItem.js";
 import MultiComboBoxGroupItem from "./MultiComboBoxGroupItem.js";
 import GroupHeaderListItem from "./GroupHeaderListItem.js";
@@ -40,7 +42,7 @@ import StandardListItem from "./StandardListItem.js";
 import ToggleButton from "./ToggleButton.js";
 import * as Filters from "./Filters.js";
 import Button from "./Button.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, MULTICOMBOBOX_DIALOG_OK_BUTTON, VALUE_STATE_ERROR_ALREADY_SELECTED, } 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, SHOW_SELECTED_BUTTON, MULTICOMBOBOX_DIALOG_OK_BUTTON, VALUE_STATE_ERROR_ALREADY_SELECTED, MCB_SELECTED_ITEMS, INPUT_CLEAR_ICON_ACC_NAME, } from "./generated/i18n/i18n-defaults.js";
 // Templates
 import MultiComboBoxTemplate from "./generated/templates/MultiComboBoxTemplate.lit.js";
 import MultiComboBoxPopoverTemplate from "./generated/templates/MultiComboBoxPopoverTemplate.lit.js";
@@ -51,6 +53,8 @@ import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 import MultiComboBoxPopover from "./generated/themes/MultiComboBoxPopover.css.js";
 import ComboBoxFilter from "./types/ComboBoxFilter.js";
+import CheckBox from "./CheckBox.js";
+import "./Input.js";
 /**
  * @class
  *
@@ -86,42 +90,30 @@ import ComboBoxFilter from "./types/ComboBoxFilter.js";
  * <li> Backspace -  deletes the token and focus the next token. </li>
  * </ul>
  *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-multi-combobox</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>token-{index} - Used to style each token(where <code>token-0</code> corresponds to the first item)</li>
- * </ul>
- *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/MultiComboBox";</code>
  *
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.MultiComboBox
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-multi-combobox
+ * @extends UI5Element
  * @public
- * @appenddocs sap.ui.webc.main.MultiComboBoxItem sap.ui.webc.main.MultiComboBoxGroupItem
  * @since 0.11.0
+ * @csspart token-{index} - Used to style each token(where <code>token-0</code> corresponds to the first item)
  */
 let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     constructor() {
         super();
         this._filteredItems = [];
+        this._previouslySelectedItems = [];
         this.selectedValues = [];
         this._itemsBeforeOpen = [];
         this._inputLastValue = "";
-        this._valueBeforeOpen = "";
         this._deleting = false;
         this._validationTimeout = null;
         this._handleResizeBound = this._handleResize.bind(this);
         this.valueBeforeAutoComplete = "";
-        this._lastValue = "";
+        this._lastValue = this.getAttribute("value") || "";
         this.currentItemIdx = -1;
         this.FormSupport = undefined;
     }
@@ -134,15 +126,49 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _handleResize() {
         this._inputWidth = this.offsetWidth;
     }
+    _handleMobileInput(e) {
+        const target = e.target;
+        const value = target.value;
+        if (!this.allowCustomValues && !this._filterItems(value).length) {
+            this._dialogInputValueState = ValueState.Error;
+        }
+        else {
+            this._dialogInputValueState = this.valueState;
+        }
+        this.value = value;
+        this._shouldFilterItems = true;
+        this.valueBeforeAutoComplete = value;
+        this.fireEvent("input");
+    }
     _inputChange() {
-        this.fireEvent("change");
+        if (!this._clearingValue && this._lastValue !== this.value) {
+            this._lastValue = this.value;
+            this.fireEvent("change");
+        }
+    }
+    async _mobileInputChange(e) {
+        this._inputChange.call(this);
+        const { value } = e.target;
+        const matchingItem = this.items.find(item => item.text === value);
+        if (!matchingItem) {
+            return;
+        }
+        const initiallySelected = matchingItem?.selected;
+        const changePrevented = this.fireSelectionChange();
+        if (!changePrevented) {
+            matchingItem.selected = !initiallySelected;
+            (await this._getResponsivePopover()).close();
+            this.value = "";
+        }
     }
     togglePopover() {
+        this._tokenizer.closeMorePopover();
         this.allItemsPopover?.toggle(this);
     }
     togglePopoverByDropdownIcon() {
         this._shouldFilterItems = false;
         this.allItemsPopover?.toggle(this);
+        this._tokenizer.closeMorePopover();
     }
     _showFilteredItems() {
         this.filterSelected = true;
@@ -154,6 +180,15 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const selectedItems = this._filteredItems.filter(item => item.selected);
         this.selectedItems = this.items.filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
     }
+    /**
+     * Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.
+     *
+     * @default false
+     * @public
+     */
+    get open() {
+        return this._open;
+    }
     get _showAllItemsButtonPressed() {
         return this.filterSelected;
     }
@@ -170,11 +205,20 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this.filterSelected = false;
         }
         if (this._validationTimeout) {
-            input.value = this._inputLastValue;
-            return;
+            if (this._filterItems(value).length) {
+                this.valueState = this._effectiveValueState;
+                this._validationTimeout = null;
+            }
+            else {
+                input.value = this._inputLastValue;
+                return;
+            }
         }
+        this._effectiveValueState = this.valueState;
         if (!filteredItems.length && value && !this.allowCustomValues) {
-            input.value = this.valueBeforeAutoComplete || this._inputLastValue;
+            const newValue = this.valueBeforeAutoComplete || this._inputLastValue;
+            input.value = newValue;
+            this.value = newValue;
             this.valueState = ValueState.Error;
             this._shouldAutocomplete = false;
             this._resetValueState(oldValueState);
@@ -194,12 +238,17 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this.fireEvent("input");
     }
     _tokenDelete(e) {
+        this._previouslySelectedItems = this._getSelectedItems();
         const token = e.detail.ref;
         const deletingItem = this.items.find(item => item._id === token.getAttribute("data-ui5-id"));
         deletingItem.selected = false;
         this._deleting = true;
         this._preventTokenizerToggle = true;
-        this.fireSelectionChange();
+        this.focus();
+        const changePrevented = this.fireSelectionChange();
+        if (changePrevented) {
+            this._revertSelection();
+        }
     }
     get _getPlaceholder() {
         if (this._getSelectedItems().length) {
@@ -222,7 +271,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const lastTokenBeingDeleted = tokensCount - 1 === 0 && this._deleting;
         const allTokensAreBeingDeleted = selectedTokens === tokensCount && this._deleting;
         const relatedTarget = e.relatedTarget;
-        if (!relatedTarget || !relatedTarget.hasAttribute("ui5-token")) {
+        const isFocusingPopover = this.staticAreaItem === relatedTarget;
+        const isFocusingInput = this._inputDom === relatedTarget;
+        const isFocusingMorePopover = e.relatedTarget === this._tokenizer.staticAreaItem;
+        if (!relatedTarget?.hasAttribute("ui5-token") && !isFocusingPopover && !isFocusingInput && !isFocusingMorePopover) {
             this._tokenizer.tokens.forEach(token => {
                 token.selected = false;
             });
@@ -243,6 +295,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _onkeydown(e) {
         const isArrowDownCtrl = isDownCtrl(e);
+        const isCtrl = e.metaKey || e.ctrlKey;
         if (isShow(e) && !this.disabled) {
             this._handleShow(e);
             return;
@@ -264,10 +317,14 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._handleArrowCtrl(e);
             return;
         }
-        if (isCtrlV(e) || isInsertShift(e)) {
-            this._handlePaste();
+        if (isInsertShift(e)) {
+            this._handleInsertPaste();
             return;
         }
+        if (isCtrl && e.key.toLowerCase() === "i" && this._tokenizer.tokens.length > 0) {
+            e.preventDefault();
+            this.togglePopover();
+        }
         if (isSpaceShift(e)) {
             e.preventDefault();
         }
@@ -286,21 +343,39 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         this._shouldAutocomplete = !this.noTypeahead && !(isBackSpace(e) || isDelete(e) || isEscape(e) || isEnter(e));
     }
-    async _handlePaste() {
-        if (this.readonly) {
+    _handlePaste(e) {
+        e.preventDefault();
+        if (this.readonly || !e.clipboardData) {
+            return;
+        }
+        const pastedText = (e.clipboardData).getData("text/plain");
+        if (!pastedText) {
+            return;
+        }
+        this._createTokenFromText(pastedText);
+    }
+    async _handleInsertPaste() {
+        if (this.readonly || isFirefox()) {
             return;
         }
         const pastedText = await navigator.clipboard.readText();
         if (!pastedText) {
             return;
         }
-        const separatedText = pastedText.split(/\r\n|\r|\n/g);
+        this._createTokenFromText(pastedText);
+    }
+    _createTokenFromText(pastedText) {
+        const separatedText = pastedText.split(/\r\n|\r|\n|\t/g).filter(t => !!t);
         const matchingItems = this.items.filter(item => separatedText.indexOf(item.text) > -1 && !item.selected);
-        if (matchingItems.length) {
+        if (separatedText.length > 1) {
+            this._previouslySelectedItems = this._getSelectedItems();
             matchingItems.forEach(item => {
                 item.selected = true;
                 this.value = "";
-                this.fireSelectionChange();
+                const changePrevented = this.fireSelectionChange();
+                if (changePrevented) {
+                    this._revertSelection();
+                }
             });
         }
         else {
@@ -380,25 +455,57 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _handleSelectAll() {
         const filteredItems = this._filteredItems;
         const allItemsSelected = filteredItems.every(item => item.selected);
+        this._previouslySelectedItems = filteredItems.filter(item => item.selected).map(item => item);
         filteredItems.forEach(item => {
             item.selected = !allItemsSelected;
         });
-        this.fireSelectionChange();
+        const changePrevented = this.fireSelectionChange();
+        if (changePrevented) {
+            this._revertSelection();
+        }
     }
-    _onValueStateKeydown(e) {
+    async _onListHeaderKeydown(e) {
         const isArrowDown = isDown(e);
         const isArrowUp = isUp(e);
+        const isSelectAllFocused = e.target.classList.contains("ui5-mcb-select-all-checkbox");
         if (isTabNext(e) || isTabPrevious(e)) {
             this._onItemTab();
             return;
         }
         e.preventDefault();
         if (isArrowDown || isDownCtrl(e)) {
+            if (this.showSelectAll && !isSelectAllFocused) {
+                return (await this._getResponsivePopover()).querySelector(".ui5-mcb-select-all-checkbox").focus();
+            }
             this._handleArrowDown();
         }
         if (isArrowUp || isUpCtrl(e)) {
-            this._shouldAutocomplete = true;
-            this._inputDom.focus();
+            if (e.target === this.valueStateHeader || !this.valueStateHeader) {
+                this._shouldAutocomplete = true;
+                return this._inputDom.focus();
+            }
+            if (this.showSelectAll && isSelectAllFocused) {
+                this.valueStateHeader?.focus();
+            }
+        }
+    }
+    _handleSelectAllCheckboxClick(e) {
+        if (!this.filterSelected) {
+            this._handleSelectAll();
+            this.filterSelected = false;
+        }
+        else {
+            this._previouslySelectedItems = this._getSelectedItems();
+            this.selectedItems?.forEach(item => {
+                item.selected = e.target.checked;
+            });
+            if (!e.target.checked) {
+                this.filterSelected = false;
+            }
+            const changePrevented = this.fireSelectionChange();
+            if (changePrevented) {
+                this._revertSelection();
+            }
         }
     }
     async _onItemKeydown(e) {
@@ -439,12 +546,17 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._handleSelectAll();
             return;
         }
-        if (((isArrowUp && isFirstItem) || isHome(e)) && this.valueStateHeader) {
-            this.valueStateHeader.focus();
-        }
-        if (!this.valueStateHeader && isFirstItem && isArrowUp) {
-            this._inputDom.focus();
-            this._shouldAutocomplete = true;
+        if (isFirstItem && isArrowUp) {
+            if (this.showSelectAll) {
+                (await this._getResponsivePopover()).querySelector(".ui5-mcb-select-all-checkbox").focus();
+            }
+            else if (this.valueStateHeader) {
+                this.valueStateHeader.focus();
+            }
+            else {
+                this._inputDom.focus();
+                this._shouldAutocomplete = true;
+            }
         }
     }
     _handleArrowCtrl(e) {
@@ -469,10 +581,16 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (this.hasValueStateMessage && !this.valueStateHeader) {
             await this._setValueStateHeader();
         }
-        if (isArrowDown && isOpen && this.valueStateHeader) {
-            this.value = this.valueBeforeAutoComplete || this.value;
-            this.valueStateHeader.focus();
-            return;
+        if (isArrowDown && isOpen) {
+            if (this.valueStateHeader) {
+                this.value = this.valueBeforeAutoComplete || this.value;
+                this.valueStateHeader.focus();
+                return;
+            }
+            if (this.showSelectAll) {
+                (await this._getResponsivePopover()).querySelector(".ui5-mcb-select-all-checkbox").focus();
+                return;
+            }
         }
         if (isArrowDown && hasSuggestions) {
             this._handleArrowDown();
@@ -481,12 +599,14 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._navigateToPrevItem();
         }
     }
-    _handleArrowDown() {
+    async _handleArrowDown() {
         const isOpen = this.allItemsPopover?.opened;
         const firstListItem = this.list?.items[0];
         if (isOpen) {
             firstListItem && this.list?._itemNavigation.setCurrentItem(firstListItem);
             this.value = this.valueBeforeAutoComplete || this.value;
+            // wait item navigation to apply correct tabindex
+            await renderFinished();
             firstListItem?.focus();
         }
         else if (!this.readonly) {
@@ -496,9 +616,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _handleItemRangeSelection(e) {
         const items = this.items;
         const listItems = this.list?.items;
-        const currentItemIdx = listItems?.indexOf(e.target) || -1;
+        const currentItemIdx = Number(listItems?.indexOf(e.target));
         const nextItemIdx = currentItemIdx + 1;
         const prevItemIdx = currentItemIdx - 1;
+        this._previouslySelectedItems = this._getSelectedItems();
         if (isDownShift(e) && items[nextItemIdx]) {
             items[nextItemIdx].selected = items[currentItemIdx].selected;
             items[nextItemIdx].focus();
@@ -507,7 +628,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             items[prevItemIdx].selected = items[currentItemIdx].selected;
             items[prevItemIdx].focus();
         }
-        this.fireSelectionChange();
+        const changePrevented = this.fireSelectionChange();
+        if (changePrevented) {
+            this._revertSelection();
+        }
     }
     _navigateToNextItem() {
         const items = this.items;
@@ -579,9 +703,13 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 });
             }
             else {
+                this._previouslySelectedItems = this._getSelectedItems();
                 matchingItem.selected = true;
                 this.value = "";
-                this.fireSelectionChange();
+                const changePrevented = this.fireSelectionChange();
+                if (changePrevented) {
+                    this._revertSelection();
+                }
             }
             innerInput.setSelectionRange(matchingItem.text.length, matchingItem.text.length);
             this.allItemsPopover?.close();
@@ -589,6 +717,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _resetValueState(valueState, callback) {
         this._validationTimeout = setTimeout(() => {
+            this._effectiveValueState = this.valueState;
             this.valueState = valueState;
             this._validationTimeout = null;
             callback && callback();
@@ -618,8 +747,8 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             }
             return this._tokenizer._fillClipboard(ClipboardDataOperation.copy, selectedTokens);
         }
-        if (isCtrlV(e) || isInsertShift(e)) {
-            this._handlePaste();
+        if (isInsertShift(e)) {
+            this._handleInsertPaste();
         }
         if (isHome(e)) {
             this._handleHome(e);
@@ -631,6 +760,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._preventTokenizerToggle = true;
             this._handleShow(e);
         }
+        if (isCtrl && e.key.toLowerCase() === "i" && this._tokenizer.tokens.length > 0) {
+            e.preventDefault();
+            this.togglePopover();
+        }
     }
     _filterItems(str) {
         const itemsToFilter = this.items.filter(item => !item.isGroupItem);
@@ -664,10 +797,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         else {
             this.allItemsPopover?.focus();
         }
+        this._previouslySelectedItems = this._getSelectedItems();
         this._isOpenedByKeyboard = false;
     }
     _toggle() {
-        this.open = !this.open;
+        this._open = !this._open;
         this.fireEvent("open-change");
     }
     _getSelectedItems() {
@@ -676,20 +810,35 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return this.selectedValues;
     }
     _listSelectionChange(e) {
+        let changePrevented;
+        if (!isPhone()) {
+            this._previouslySelectedItems = this._getSelectedItems();
+        }
         // sync list items and cb items
         this.syncItems(e.target.items);
         // don't call selection change right after selection as user can cancel it on phone
         if (!isPhone()) {
-            this.fireSelectionChange();
+            changePrevented = this.fireSelectionChange();
+            if (changePrevented) {
+                e.preventDefault();
+                this._revertSelection();
+            }
         }
         // casted to KeyboardEvent since isSpace and isSpaceCtrl accepts KeyboardEvent only
         const castedEvent = { key: e.detail.key };
+        if (!e.detail.selectedItems.length && this.filterSelected) {
+            this.filterSelected = false;
+        }
         if (!e.detail.selectionComponentPressed && !isSpace(castedEvent) && !isSpaceCtrl(castedEvent)) {
             this.allItemsPopover?.close();
             this.value = "";
             // if the item (not checkbox) is clicked, call the selection change
             if (isPhone()) {
-                this.fireSelectionChange();
+                changePrevented = this.fireSelectionChange();
+                if (changePrevented) {
+                    e.preventDefault();
+                    this._revertSelection();
+                }
             }
             this.fireEvent("input");
         }
@@ -705,9 +854,12 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         });
     }
     fireSelectionChange() {
-        this.fireEvent("selection-change", { items: this._getSelectedItems() });
+        const changePrevented = !this.fireEvent("selection-change", {
+            items: this._getSelectedItems(),
+        }, true);
         // Angular 2 way data binding
         this.fireEvent("value-changed");
+        return changePrevented;
     }
     async _getRespPopover() {
         const staticAreaItem = await this.getStaticAreaItemDomRef();
@@ -724,9 +876,18 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         this._showMorePressed = false;
     }
+    async handleBeforeTokenizerPopoverOpen() {
+        const tokens = this._tokenizer.tokens;
+        const hasTruncatedToken = tokens.length === 1 && tokens[0].isTruncatable;
+        const popover = (await this._getResponsivePopover());
+        if (hasTruncatedToken) {
+            popover?.close(false, false, true);
+        }
+    }
     _afterClosePicker() {
         // close device's keyboard and prevent further typing
         if (isPhone()) {
+            this._dialogInputValueState = this.valueState;
             this.blur();
         }
         this._toggle();
@@ -742,6 +903,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             };
         });
         this._valueBeforeOpen = this.value;
+        this._dialogInputValueState = this.valueState;
+        // in order to use the autocomplete feature of the input we should not set value in state
+        this._innerInput.value = this.value;
         if (this.filterSelected) {
             const selectedItems = this._filteredItems.filter(item => item.selected);
             this.selectedItems = this.items.filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
@@ -771,10 +935,23 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _startsWithMatchingItems(str) {
         return Filters.StartsWith(str, this.items, "text");
     }
+    _revertSelection() {
+        this._filteredItems.forEach(item => {
+            item.selected = this._previouslySelectedItems.includes(item);
+        });
+    }
     onBeforeRendering() {
         const input = this._innerInput;
         const autoCompletedChars = input && (input.selectionEnd || 0) - (input.selectionStart || 0);
         const value = input && input.value;
+        if (this.open) {
+            this._getList().then(list => {
+                const selectedItemsCount = list?.querySelectorAll("[ui5-li][selected]")?.length;
+                const allItemsCount = list?.querySelectorAll("[ui5-li]")?.length;
+                this._allSelected = selectedItemsCount === allItemsCount;
+            });
+        }
+        this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
         this.FormSupport = getFeature("FormSupport");
         this._inputLastValue = value;
         if (input && !input.value) {
@@ -785,7 +962,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             item._getRealDomRef = () => this.allItemsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
         });
         this.tokenizerAvailable = this._getSelectedItems().length > 0;
-        this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
+        this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
         if (!input || !value) {
             return;
         }
@@ -819,6 +996,17 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _onIconMousedown() {
         this._iconPressed = true;
     }
+    _clear() {
+        this.value = "";
+        this._inputDom.value = "";
+        this.fireEvent("input");
+        if (!this._isPhone) {
+            this.focus();
+        }
+    }
+    _iconMouseDown() {
+        this._clearingValue = true;
+    }
     storeResponsivePopoverWidth() {
         if (this.open && !this._listWidth) {
             this._listWidth = this.list.offsetWidth;
@@ -834,14 +1022,22 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     handleCancel() {
         this._itemsBeforeOpen.forEach(item => {
-            item.ref.selected = item.selected;
+            if (item.ref instanceof MultiComboBoxItem) {
+                item.ref.selected = item.selected;
+            }
         });
         this.togglePopover();
         this.value = this._valueBeforeOpen;
     }
     handleOK() {
         if (isPhone()) {
-            this.fireSelectionChange();
+            const changePrevented = this.fireSelectionChange();
+            if (changePrevented) {
+                this._revertSelection();
+            }
+        }
+        if (!this.allowCustomValues) {
+            this.value = "";
         }
         this.togglePopover();
     }
@@ -851,6 +1047,13 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _forwardFocusToInner() {
         this._innerInput.focus();
     }
+    get morePopoverOpener() {
+        const tokens = this._tokenizer?.tokens;
+        if (tokens?.length === 1 && tokens[0].isTruncatable) {
+            return tokens[0];
+        }
+        return this;
+    }
     async closePopover() {
         (await this._getPopover())?.close();
     }
@@ -877,15 +1080,21 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         else {
             this._innerInput.blur();
         }
+        this._clearingValue = false;
         if (!isPhone() && ((e.relatedTarget?.tagName !== "UI5-STATIC-AREA-ITEM") || !e.relatedTarget)) {
             this._innerInput.setSelectionRange(0, this.value.length);
         }
-        this._lastValue = this.value;
+        this._tokenizer.tokens.forEach(token => {
+            token.selected = false;
+        });
         this.valueBeforeAutoComplete = "";
     }
     inputFocusOut(e) {
-        if (!this.shadowRoot.contains(e.relatedTarget) && !this._deleting) {
+        if (!this.shadowRoot.contains(e.relatedTarget) && !this._deleting && !this._clearingValue) {
             this.focused = false;
+            if (this._lastValue !== this.value) {
+                this._inputChange();
+            }
             this._tokenizer.expanded = this.open;
             // remove the value if user focus out the input and focus is not going in the popover
             if (!isPhone() && !this.allowCustomValues && (this.staticAreaItem !== e.relatedTarget)) {
@@ -906,10 +1115,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return this.readonly ? "Inactive" : "Active";
     }
     get hasValueState() {
-        return this.valueState !== ValueState.None;
+        return (this.valueState !== ValueState.None) || (this._dialogInputValueState !== ValueState.None);
     }
     get hasValueStateMessage() {
-        return this.hasValueState && this.valueState !== ValueState.Success;
+        const valueState = isPhone() ? this._dialogInputValueState : this.valueState;
+        return this.hasValueState && valueState !== ValueState.Success;
     }
     get ariaValueStateHiddenText() {
         if (!this.hasValueState) {
@@ -925,13 +1135,14 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return `${text}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
     }
     get valueStateDefaultText() {
-        if (this.valueState === ValueState.None) {
+        const valueState = isPhone() ? this._dialogInputValueState : this.valueState;
+        if (valueState === ValueState.None) {
             return "";
         }
         if (this._performingSelectionTwice) {
             return MultiComboBox_1.i18nBundle.getText(VALUE_STATE_ERROR_ALREADY_SELECTED);
         }
-        return this.valueStateTextMappings[this.valueState];
+        return this.valueStateTextMappings[valueState];
     }
     get valueStateTextId() {
         return this.hasValueState ? `ui5-multi-combobox-valueStateDesc` : undefined;
@@ -946,7 +1157,8 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
      * This method is relevant for sap_horizon theme only
      */
     get _valueStateMessageIcon() {
-        if (this.valueState === ValueState.None) {
+        const valueState = (isPhone() && this.open) ? this._dialogInputValueState : this.valueState;
+        if (valueState === ValueState.None) {
             return "";
         }
         return {
@@ -954,7 +1166,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             [ValueState.Warning]: "alert",
             [ValueState.Success]: "sys-enter-2",
             [ValueState.Information]: "information",
-        }[this.valueState];
+        }[valueState];
     }
     get _tokensCountText() {
         if (!this._tokenizer) {
@@ -996,7 +1208,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     get _innerInput() {
         if (isPhone()) {
             if (this.allItemsPopover?.opened) {
-                return this.allItemsPopover.querySelector("input");
+                return this.allItemsPopover.querySelector("ui5-input").shadowRoot.querySelector("input");
             }
         }
         return this._inputDom;
@@ -1007,6 +1219,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     get _iconAccessibleNameText() {
         return MultiComboBox_1.i18nBundle.getText(SELECT_OPTIONS);
     }
+    get _showSelectedButtonAccessibleNameText() {
+        return MultiComboBox_1.i18nBundle.getText(SHOW_SELECTED_BUTTON);
+    }
     get _dialogOkButton() {
         return MultiComboBox_1.i18nBundle.getText(MULTICOMBOBOX_DIALOG_OK_BUTTON);
     }
@@ -1026,23 +1241,33 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     get iconsCount() {
         const slottedIconsCount = this.icon?.length || 0;
+        const clearIconCount = Number(this._effectiveShowClearIcon) ?? 0;
         const arrowDownIconsCount = this.readonly ? 0 : 1;
-        return slottedIconsCount + arrowDownIconsCount;
+        return slottedIconsCount + clearIconCount + arrowDownIconsCount;
+    }
+    get clearIconAccessibleName() {
+        return MultiComboBox_1.i18nBundle.getText(INPUT_CLEAR_ICON_ACC_NAME);
+    }
+    get selectAllCheckboxLabel() {
+        const items = this.items.filter(item => !item.isGroupItem);
+        const selected = items.filter(item => item.selected);
+        return MultiComboBox_1.i18nBundle.getText(MCB_SELECTED_ITEMS, selected.length, items.length);
     }
     get classes() {
         return {
             popover: {
                 "ui5-multi-combobox-all-items-responsive-popover": true,
                 "ui5-suggestions-popover": true,
-                "ui5-suggestions-popover-with-value-state-header": this.hasValueStateMessage,
+                "ui5-popover-with-value-state-header-phone": this._isPhone && this.hasValueStateMessage,
+                "ui5-popover-with-value-state-header": !this._isPhone && this.hasValueStateMessage,
             },
             popoverValueState: {
                 "ui5-valuestatemessage-root": true,
                 "ui5-valuestatemessage-header": true,
-                "ui5-valuestatemessage--success": this.valueState === ValueState.Success,
-                "ui5-valuestatemessage--error": this.valueState === ValueState.Error,
-                "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
-                "ui5-valuestatemessage--information": this.valueState === ValueState.Information,
+                "ui5-valuestatemessage--success": (this.valueState === ValueState.Success) || (this._dialogInputValueState === ValueState.Success),
+                "ui5-valuestatemessage--error": (this.valueState === ValueState.Error) || (this._dialogInputValueState === ValueState.Error),
+                "ui5-valuestatemessage--warning": (this.valueState === ValueState.Warning) || (this._dialogInputValueState === ValueState.Warning),
+                "ui5-valuestatemessage--information": (this.valueState === ValueState.Information) || (this._dialogInputValueState === ValueState.Information),
             },
         };
     }
@@ -1095,16 +1320,31 @@ __decorate([
 ], MultiComboBox.prototype, "filter", void 0);
 __decorate([
     property({ type: Boolean })
-], MultiComboBox.prototype, "open", void 0);
+], MultiComboBox.prototype, "showClearIcon", void 0);
 __decorate([
     property()
 ], MultiComboBox.prototype, "accessibleName", void 0);
 __decorate([
     property()
 ], MultiComboBox.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property({ type: Boolean })
+], MultiComboBox.prototype, "showSelectAll", void 0);
+__decorate([
+    property({ type: ValueState, defaultValue: ValueState.None })
+], MultiComboBox.prototype, "_effectiveValueState", void 0);
+__decorate([
+    property({ type: Boolean })
+], MultiComboBox.prototype, "_open", void 0);
+__decorate([
+    property()
+], MultiComboBox.prototype, "_valueBeforeOpen", void 0);
 __decorate([
     property({ type: Object, noAttribute: true, multiple: true })
 ], MultiComboBox.prototype, "_filteredItems", void 0);
+__decorate([
+    property({ type: Object, noAttribute: true, multiple: true })
+], MultiComboBox.prototype, "_previouslySelectedItems", void 0);
 __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "filterSelected", void 0);
@@ -1126,6 +1366,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], MultiComboBox.prototype, "_performingSelectionTwice", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], MultiComboBox.prototype, "_allSelected", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], MultiComboBox.prototype, "_effectiveShowClearIcon", void 0);
+__decorate([
+    property({ type: ValueState, defaultValue: ValueState.None })
+], MultiComboBox.prototype, "_dialogInputValueState", void 0);
 __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "tokenizerAvailable", void 0);
@@ -1160,20 +1409,19 @@ MultiComboBox = MultiComboBox_1 = __decorate([
             GroupHeaderListItem,
             ToggleButton,
             Button,
+            CheckBox,
         ],
     })
     /**
      * Fired when the input operation has finished by pressing Enter or on focusout.
      *
-     * @event sap.ui.webc.main.MultiComboBox#change
      * @public
      */
     ,
     event("change")
     /**
-     * Fired when the value of the component changes at each keystroke.
+     * Fired when the value of the component changes at each keystroke or clear icon is pressed.
      *
-     * @event sap.ui.webc.main.MultiComboBox#input
      * @public
      */
     ,
@@ -1181,24 +1429,25 @@ MultiComboBox = MultiComboBox_1 = __decorate([
     /**
      * Fired when the dropdown is opened or closed.
      *
-     * @event sap.ui.webc.main.MultiComboBox#open-change
      * @since 1.0.0-rc.5
      * @public
      */
     ,
     event("open-change")
     /**
-     * Fired when selection is changed by user interaction
-     * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
+     * Fired when selection is changed by user interaction.
      *
-     * @event sap.ui.webc.main.MultiComboBox#selection-change
-     * @param {Array} items an array of the selected items.
+     * @param {IMultiComboBoxItem[]} items an array of the selected items.
      * @public
+     * @allowPreventDefault
      */
     ,
     event("selection-change", {
         detail: {
-            items: { type: Array },
+            /**
+             * @public
+             */
+            items: { type: (Array) },
         },
     })
 ], MultiComboBox);