@openui5/sap.ui.webc.main 1.119.1 → 1.120.1

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

@@ -35,6 +35,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var List_1;
+
+  // Template
+
+  // Styles
+
+  // Texts
+
   const INFINITE_SCROLL_DEBOUNCE_RATE = 250; // ms
   const PAGE_UP_DOWN_SIZE = 10;
   /**
@@ -511,9 +518,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     }
     // This is applicable to NotificationListItem
     onItemClose(e) {
-      this.fireEvent("item-close", {
-        item: e.detail.item
-      });
+      const target = e.target;
+      const shouldFireItemClose = target?.hasAttribute("ui5-li-notification") || target?.hasAttribute("ui5-li-notification-group");
+      if (shouldFireItemClose) {
+        this.fireEvent("item-close", {
+          item: e.detail?.item
+        });
+      }
     }
     onItemToggle(e) {
       this.fireEvent("item-toggle", {

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

@@ -27,6 +27,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var ListItem_1;
+
+  // Styles
+
+  // Icons
+
   /**
    * @class
    * A class to serve as a base
@@ -251,7 +256,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
         ariaLabel: ListItem_1.i18nBundle.getText(_i18nDefaults.ARIA_LABEL_LIST_ITEM_CHECKBOX),
         ariaLabelRadioButton: ListItem_1.i18nBundle.getText(_i18nDefaults.ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
         ariaSelectedText: this.ariaSelectedText,
-        ariaHaspopup: this.ariaHaspopup || undefined
+        ariaHaspopup: this.ariaHaspopup || undefined,
+        setsize: this.accessibilityAttributes.ariaSetsize,
+        posinset: this.accessibilityAttributes.ariaPosinset
       };
     }
     get hasConfigurableMode() {
@@ -265,6 +272,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     type: _ListItemType.default,
     defaultValue: _ListItemType.default.Active
   })], ListItem.prototype, "type", void 0);
+  __decorate([(0, _property.default)({
+    type: Object
+  })], ListItem.prototype, "accessibilityAttributes", void 0);
   __decorate([(0, _property.default)({
     type: Boolean
   })], ListItem.prototype, "navigated", void 0);

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

@@ -20,6 +20,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     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;
   };
+
+  // Styles
+
   /**
    * @class
    * A class to serve as a foundation

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

@@ -30,6 +30,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var Menu_1;
+
+  // Styles
+
+  const MENU_OPEN_DELAY = 300;
+  const MENU_CLOSE_DELAY = 400;
   /**
    * @class
    *
@@ -114,7 +119,8 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         const menuItem = item.item;
         if (subMenu && subMenu.busy) {
           subMenu.innerHTML = "";
-          this._cloneItems(menuItem, subMenu);
+          const fragment = this._clonedItemsFragment(menuItem);
+          subMenu.appendChild(fragment);
         }
         if (subMenu) {
           subMenu.busy = item.item.busy;
@@ -207,15 +213,18 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       subMenu._parentMenuItem = item;
       subMenu.busy = item.busy;
       subMenu.busyDelay = item.busyDelay;
-      this._cloneItems(item, subMenu);
+      const fragment = this._clonedItemsFragment(item);
+      subMenu.appendChild(fragment);
       this.staticAreaItem.shadowRoot.querySelector(".ui5-menu-submenus").appendChild(subMenu);
       item._subMenu = subMenu;
     }
-    _cloneItems(item, menu) {
+    _clonedItemsFragment(item) {
+      const fragment = document.createDocumentFragment();
       for (let i = 0; i < item.items.length; ++i) {
         const clonedItem = item.items[i].cloneNode(true);
-        menu.appendChild(clonedItem);
+        fragment.appendChild(clonedItem);
       }
+      return fragment;
     }
     _openItemSubMenu(item, opener, actionId) {
       const mainMenu = this._findMainMenu(item);
@@ -268,6 +277,27 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this._parentMenuItem = item;
       this._parentItemsStack.push(item);
     }
+    _startOpenTimeout(item, opener, hoverId) {
+      // If theres already a timeout, clears it
+      this._clearTimeout();
+      // Sets the new timeout
+      this._timeout = setTimeout(() => {
+        this._prepareSubMenuDesktopTablet(item, opener, hoverId);
+      }, MENU_OPEN_DELAY);
+    }
+    _startCloseTimeout(item) {
+      // If theres already a timeout, clears it
+      this._clearTimeout();
+      // Sets the new timeout
+      this._timeout = setTimeout(() => {
+        this._closeItemSubMenu(item);
+      }, MENU_CLOSE_DELAY);
+    }
+    _clearTimeout() {
+      if (this._timeout) {
+        clearTimeout(this._timeout);
+      }
+    }
     _itemMouseOver(e) {
       if ((0, _Device.isDesktop)()) {
         // respect mouseover only on desktop
@@ -275,7 +305,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         const item = opener.associatedItem;
         const hoverId = opener.getAttribute("id");
         opener.focus();
-        this._prepareSubMenuDesktopTablet(item, opener, hoverId);
+        // If there is a pending close operation, cancel it
+        this._clearTimeout();
+        // Opens submenu with 300ms delay
+        this._startOpenTimeout(item, opener, hoverId);
       }
     }
     _busyMouseOver() {
@@ -285,13 +318,15 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     }
     _itemMouseOut(e) {
       if ((0, _Device.isDesktop)()) {
-        // respect mouseover only on desktop
         const opener = e.target;
         const item = opener.associatedItem;
+        // If there is a pending open operation, cancel it
+        this._clearTimeout();
+        // Close submenu with 400ms delay
         if (item && item.hasSubmenu && item._subMenu) {
           // try to close the sub-menu
           item._preventSubMenuClose = false;
-          this._closeItemSubMenu(item);
+          this._startCloseTimeout(item);
         }
       }
     }
@@ -322,15 +357,30 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
             this._parentMenuItem = undefined;
           }
           // fire event if the click is on top-level menu item
-          this.fireEvent("item-click", {
+          const prevented = !this.fireEvent("item-click", {
             "item": item,
             "text": item.text
-          });
-          this._popover.close();
+          }, true, false);
+          if (!prevented) {
+            this._popover.close();
+          }
         } else {
-          // find top-level menu and redirect event to it
           const mainMenu = this._findMainMenu(item);
-          mainMenu._itemClick(e);
+          const prevented = !mainMenu.fireEvent("item-click", {
+            "item": item,
+            "text": item.text
+          }, true, false);
+          if (!prevented) {
+            let openerMenuItem = item;
+            let parentMenu = openerMenuItem.parentElement;
+            do {
+              openerMenuItem._preventSubMenuClose = false;
+              this._closeItemSubMenu(openerMenuItem);
+              parentMenu = openerMenuItem.parentElement;
+              openerMenuItem = parentMenu._parentMenuItem;
+            } while (parentMenu._parentMenuItem);
+            mainMenu._popover.close();
+          }
         }
       } else if ((0, _Device.isPhone)()) {
         // prepares and opens sub-menu on phone
@@ -343,8 +393,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _findMainMenu(item) {
       let parentMenu = item.parentElement;
       while (parentMenu._parentMenuItem) {
-        parentMenu._parentMenuItem._preventSubMenuClose = false;
-        this._closeItemSubMenu(parentMenu._parentMenuItem);
         parentMenu = parentMenu._parentMenuItem.parentElement;
       }
       return parentMenu;
@@ -433,8 +481,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   })
   /**
    * Fired when an item is being clicked.
+   * <b>Note:</b> Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.
    *
    * @event sap.ui.webc.main.Menu#item-click
+   * @allowPreventDefault
    * @param { HTMLElement } item The currently clicked menu item.
    * @param { string } text The text of the currently clicked menu item.
    * @public

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

@@ -25,6 +25,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var MessageStrip_1;
+
+  // Styles
+
   var DesignClassesMapping;
   (function (DesignClassesMapping) {
     DesignClassesMapping["Information"] = "ui5-message-strip-root--info";

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

@@ -26,6 +26,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var MonthPicker_1;
+
+  // Template
+
+  // Styles
+
   const PAGE_SIZE = 12; // total months on a single page
   const ROW_SIZE = 3; // months per row (4 rows of 3 months each)
   /**
@@ -165,11 +170,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
      * Modifies timestamp by a given amount of months and,
      * if necessary, loads the prev/next page.
      * @param { number } amount
+     * @param { boolean } preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
      * @private
      */
-    _modifyTimestampBy(amount) {
+    _modifyTimestampBy(amount, preserveDate) {
       // Modify the current timestamp
-      this._safelyModifyTimestampBy(amount, "month");
+      this._safelyModifyTimestampBy(amount, "month", preserveDate);
       // Notify the calendar to update its timestamp
       this.fireEvent("navigate", {
         timestamp: this.timestamp
@@ -218,7 +224,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
      * @protected
      */
     _showPreviousPage() {
-      this._modifyTimestampBy(-PAGE_SIZE);
+      this._modifyTimestampBy(-PAGE_SIZE, true);
     }
     /**
      * Called by Calendar.js
@@ -226,7 +232,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
      * @protected
      */
     _showNextPage() {
-      this._modifyTimestampBy(PAGE_SIZE);
+      this._modifyTimestampBy(PAGE_SIZE, true);
     }
     _isOutOfSelectableRange(date, minDate, maxDate) {
       const month = date.getMonth();

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

@@ -1,4 +1,4 @@
-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/slot", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/types/ValueState", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/icons/slim-arrow-down", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/icons/decline", "sap/ui/webc/common/thirdparty/icons/multiselect-all", "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/FeaturesRegistry", "sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper", "./MultiComboBoxItem", "./MultiComboBoxGroupItem", "./GroupHeaderListItem", "./Tokenizer", "./Token", "./Icon", "./Popover", "./ResponsivePopover", "./List", "./StandardListItem", "./ToggleButton", "./Filters", "./Button", "./generated/i18n/i18n-defaults", "./generated/templates/MultiComboBoxTemplate.lit", "./generated/templates/MultiComboBoxPopoverTemplate.lit", "./generated/themes/MultiComboBox.css", "./generated/themes/ResponsivePopoverCommon.css", "./generated/themes/ValueStateMessage.css", "./generated/themes/Suggestions.css", "./generated/themes/MultiComboBoxPopover.css", "./types/ComboBoxFilter"], function (_exports, _UI5Element, _customElement, _property, _slot, _event, _LitRenderer, _ResizeHandler, _ValueState, _Keys, _Integer, _slimArrowDown, _Device, _i18nBundle, _decline, _multiselectAll, _notEditable, _error, _alert, _sysEnter, _information, _FeaturesRegistry, _AriaLabelHelper, _MultiComboBoxItem, _MultiComboBoxGroupItem, _GroupHeaderListItem, _Tokenizer, _Token, _Icon, _Popover, _ResponsivePopover, _List, _StandardListItem, _ToggleButton, Filters, _Button, _i18nDefaults, _MultiComboBoxTemplate, _MultiComboBoxPopoverTemplate, _MultiComboBox, _ResponsivePopoverCommon, _ValueStateMessage, _Suggestions, _MultiComboBoxPopover, _ComboBoxFilter) {
+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/slot", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/types/ValueState", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/icons/slim-arrow-down", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/icons/decline", "sap/ui/webc/common/thirdparty/icons/multiselect-all", "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/FeaturesRegistry", "sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper", "sap/ui/webc/common/thirdparty/base/CustomElementsScope", "./MultiComboBoxItem", "./MultiComboBoxGroupItem", "./GroupHeaderListItem", "./Tokenizer", "./Token", "./Icon", "./Popover", "./ResponsivePopover", "./List", "./StandardListItem", "./ToggleButton", "./Filters", "./Button", "./generated/i18n/i18n-defaults", "./generated/templates/MultiComboBoxTemplate.lit", "./generated/templates/MultiComboBoxPopoverTemplate.lit", "./generated/themes/MultiComboBox.css", "./generated/themes/ResponsivePopoverCommon.css", "./generated/themes/ValueStateMessage.css", "./generated/themes/Suggestions.css", "./generated/themes/MultiComboBoxPopover.css", "./types/ComboBoxFilter"], function (_exports, _UI5Element, _customElement, _property, _slot, _event, _LitRenderer, _ResizeHandler, _ValueState, _Keys, _Integer, _slimArrowDown, _Device, _i18nBundle, _decline, _multiselectAll, _notEditable, _error, _alert, _sysEnter, _information, _FeaturesRegistry, _AriaLabelHelper, _CustomElementsScope, _MultiComboBoxItem, _MultiComboBoxGroupItem, _GroupHeaderListItem, _Tokenizer, _Token, _Icon, _Popover, _ResponsivePopover, _List, _StandardListItem, _ToggleButton, Filters, _Button, _i18nDefaults, _MultiComboBoxTemplate, _MultiComboBoxPopoverTemplate, _MultiComboBox, _ResponsivePopoverCommon, _ValueStateMessage, _Suggestions, _MultiComboBoxPopover, _ComboBoxFilter) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -46,6 +46,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var MultiComboBox_1;
+
+  // Templates
+
+  // Styles
+
   /**
    * @class
    *
@@ -108,6 +113,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     constructor() {
       super();
       this._filteredItems = [];
+      this._previouslySelectedItems = [];
       this.selectedValues = [];
       this._itemsBeforeOpen = [];
       this._inputLastValue = "";
@@ -133,11 +139,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this.fireEvent("change");
     }
     togglePopover() {
+      this._tokenizer.closeMorePopover();
       this.allItemsPopover?.toggle(this);
     }
     togglePopoverByDropdownIcon() {
       this._shouldFilterItems = false;
       this.allItemsPopover?.toggle(this);
+      this._tokenizer.closeMorePopover();
     }
     _showFilteredItems() {
       this.filterSelected = true;
@@ -188,12 +196,17 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       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) {
@@ -216,7 +229,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       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;
         });
@@ -237,6 +253,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     }
     _onkeydown(e) {
       const isArrowDownCtrl = (0, _Keys.isDownCtrl)(e);
+      const isCtrl = e.metaKey || e.ctrlKey;
       if ((0, _Keys.isShow)(e) && !this.disabled) {
         this._handleShow(e);
         return;
@@ -258,10 +275,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         this._handleArrowCtrl(e);
         return;
       }
-      if ((0, _Keys.isCtrlV)(e) || (0, _Keys.isInsertShift)(e)) {
-        this._handlePaste();
+      if ((0, _Keys.isInsertShift)(e)) {
+        this._handleInsertPaste();
         return;
       }
+      if (isCtrl && e.key.toLowerCase() === "i" && this._tokenizer.tokens.length > 0) {
+        e.preventDefault();
+        this.togglePopover();
+      }
       if ((0, _Keys.isSpaceShift)(e)) {
         e.preventDefault();
       }
@@ -270,21 +291,39 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       this._shouldAutocomplete = !this.noTypeahead && !((0, _Keys.isBackSpace)(e) || (0, _Keys.isDelete)(e) || (0, _Keys.isEscape)(e) || (0, _Keys.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 || (0, _Device.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 {
         this.value = pastedText;
@@ -363,10 +402,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _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) {
       const isArrowDown = (0, _Keys.isDown)(e);
@@ -478,9 +521,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _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 ((0, _Keys.isDownShift)(e) && items[nextItemIdx]) {
         items[nextItemIdx].selected = items[currentItemIdx].selected;
         items[nextItemIdx].focus();
@@ -489,7 +533,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         items[prevItemIdx].selected = items[currentItemIdx].selected;
         items[prevItemIdx].focus();
       }
-      this.fireSelectionChange();
+      const changePrevented = this.fireSelectionChange();
+      if (changePrevented) {
+        this._revertSelection();
+      }
     }
     _navigateToNextItem() {
       const items = this.items;
@@ -560,9 +607,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
             this._performingSelectionTwice = false;
           });
         } 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();
@@ -599,8 +650,8 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         }
         return this._tokenizer._fillClipboard(_Tokenizer.ClipboardDataOperation.copy, selectedTokens);
       }
-      if ((0, _Keys.isCtrlV)(e) || (0, _Keys.isInsertShift)(e)) {
-        this._handlePaste();
+      if ((0, _Keys.isInsertShift)(e)) {
+        this._handleInsertPaste();
       }
       if ((0, _Keys.isHome)(e)) {
         this._handleHome(e);
@@ -612,6 +663,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         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);
@@ -643,6 +698,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       } else {
         this.allItemsPopover?.focus();
       }
+      this._previouslySelectedItems = this._getSelectedItems();
       this._isOpenedByKeyboard = false;
     }
     _toggle() {
@@ -655,11 +711,19 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return this.selectedValues;
     }
     _listSelectionChange(e) {
+      let changePrevented;
+      if (!(0, _Device.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 (!(0, _Device.isPhone)()) {
-        this.fireSelectionChange();
+        changePrevented = this.fireSelectionChange();
+        if (changePrevented) {
+          e.preventDefault();
+          this._revertSelection();
+        }
       }
       // casted to KeyboardEvent since isSpace and isSpaceCtrl accepts KeyboardEvent only
       const castedEvent = {
@@ -670,7 +734,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         this.value = "";
         // if the item (not checkbox) is clicked, call the selection change
         if ((0, _Device.isPhone)()) {
-          this.fireSelectionChange();
+          changePrevented = this.fireSelectionChange();
+          if (changePrevented) {
+            e.preventDefault();
+            this._revertSelection();
+          }
         }
         this.fireEvent("input");
       }
@@ -686,11 +754,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       });
     }
     fireSelectionChange() {
-      this.fireEvent("selection-change", {
+      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();
@@ -707,6 +776,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       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 ((0, _Device.isPhone)()) {
@@ -754,6 +831,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _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);
@@ -768,7 +850,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         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((0, _CustomElementsScope.getScopedVarName)("--_ui5-input-icons-count"), `${this.iconsCount}`);
       if (!input || !value) {
         return;
       }
@@ -824,7 +906,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     }
     handleOK() {
       if ((0, _Device.isPhone)()) {
-        this.fireSelectionChange();
+        const changePrevented = this.fireSelectionChange();
+        if (changePrevented) {
+          this._revertSelection();
+        }
+      }
+      if (!this.allowCustomValues) {
+        this.value = "";
       }
       this.togglePopover();
     }
@@ -834,6 +922,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _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();
     }
@@ -862,6 +957,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       if (!(0, _Device.isPhone)() && (e.relatedTarget?.tagName !== "UI5-STATIC-AREA-ITEM" || !e.relatedTarget)) {
         this._innerInput.setSelectionRange(0, this.value.length);
       }
+      this._tokenizer.tokens.forEach(token => {
+        token.selected = false;
+      });
       this._lastValue = this.value;
       this.valueBeforeAutoComplete = "";
     }
@@ -1083,6 +1181,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     noAttribute: true,
     multiple: true
   })], MultiComboBox.prototype, "_filteredItems", void 0);
+  __decorate([(0, _property.default)({
+    type: Object,
+    noAttribute: true,
+    multiple: true
+  })], MultiComboBox.prototype, "_previouslySelectedItems", void 0);
   __decorate([(0, _property.default)({
     type: Boolean
   })], MultiComboBox.prototype, "filterSelected", void 0);