@ui5/webcomponents 0.0.0-cb061e041 → 0.0.0-cddf8ba1c

package/dist/MultiComboBox.js

@@ -13,10 +13,10 @@ 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 { 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 +27,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";
@@ -113,6 +114,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     constructor() {
         super();
         this._filteredItems = [];
+        this._previouslySelectedItems = [];
         this.selectedValues = [];
         this._itemsBeforeOpen = [];
         this._inputLastValue = "";
@@ -138,11 +140,13 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         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;
@@ -154,6 +158,18 @@ 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.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.main.MultiComboBox.prototype.open
+     * @defaultvalue false
+     * @readonly
+     * @public
+     */
+    get open() {
+        return this._open;
+    }
     get _showAllItemsButtonPressed() {
         return this.filterSelected;
     }
@@ -170,11 +186,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 +219,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 +252,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 +276,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 +298,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 +324,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,10 +436,14 @@ 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) {
         const isArrowDown = isDown(e);
@@ -496,9 +556,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 +568,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 +643,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 +657,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 +687,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 +700,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 +737,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,11 +750,19 @@ 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 };
@@ -689,7 +771,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             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 +791,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,6 +813,14 @@ 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()) {
@@ -771,6 +868,11 @@ 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);
@@ -785,7 +887,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;
         }
@@ -834,14 +936,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 +961,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();
     }
@@ -880,6 +997,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (!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 = "";
     }
@@ -1034,7 +1154,8 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             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,
@@ -1093,18 +1214,24 @@ __decorate([
 __decorate([
     property({ type: ComboBoxFilter, defaultValue: ComboBoxFilter.StartsWithPerTerm })
 ], MultiComboBox.prototype, "filter", void 0);
-__decorate([
-    property({ type: Boolean })
-], MultiComboBox.prototype, "open", void 0);
 __decorate([
     property()
 ], MultiComboBox.prototype, "accessibleName", void 0);
 __decorate([
     property()
 ], MultiComboBox.prototype, "accessibleNameRef", 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({ 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);