@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/MultiComboBox.js

@@ -8,7 +8,7 @@ var MultiComboBox_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -25,7 +25,6 @@ import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import { getAssociatedLabelForTexts, getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js";
-import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import MultiComboBoxItem, { isInstanceOfMultiComboBoxItem } from "./MultiComboBoxItem.js";
 import MultiComboBoxItemGroup, { isInstanceOfMultiComboBoxItemGroup } from "./MultiComboBoxItemGroup.js";
@@ -130,6 +129,23 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
          * @public
          */
         this.value = "";
+        /**
+         * Defines the values of the selected items.
+         *
+         * Use this property to programmatically select items by their `value` property.
+         * Each string in the array should match the `value` attribute of a `ui5-mcb-item`.
+         *
+         * **Note:** If an item doesn't have a `value` attribute set, it cannot be selected via this property.
+         *
+         * **Note:** The recommended approach is to set the `value` property on each `ui5-mcb-item`
+         * and use `selectedValues` for programmatic selection. The `selected` property on items is
+         * deprecated and should not be used together with `selectedValues`.
+         *
+         * @default []
+         * @public
+         * @since 2.20.0
+         */
+        this.selectedValues = [];
         /**
          * Defines whether the value will be autcompleted to match an item
          * @default false
@@ -173,6 +189,12 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
          * @since 1.0.0-rc.5
          */
         this.required = false;
+        /**
+         * Indicates whether a loading indicator should be shown in the picker.
+         * @default false
+         * @public
+         */
+        this.loading = false;
         /**
          * Defines the filter type of the component.
          * @default "StartsWithPerTerm"
@@ -245,7 +267,6 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._filteredItems = [];
         this.selectedItems = [];
         this._previouslySelectedItems = [];
-        this.selectedValues = [];
         this._itemsBeforeOpen = [];
         this._inputLastValue = "";
         this._deleting = false;
@@ -260,6 +281,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     onEnterDOM() {
         ResizeHandler.register(this, this._handleResizeBound);
         this._enableComposition();
+        this._effectiveValueState = this.valueState;
     }
     onExitDOM() {
         ResizeHandler.deregister(this, this._handleResizeBound);
@@ -281,6 +303,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         else {
             this._dialogInputValueState = this.valueState;
         }
+        if (this.filterSelected) {
+            this.filterSelected = false;
+        }
         this.value = value;
         this._shouldFilterItems = true;
         this.valueBeforeAutoComplete = value;
@@ -345,30 +370,29 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const input = e.target;
         const value = input.value;
         const filteredItems = this._filterItems(value);
-        const oldValueState = this.valueState;
         this._shouldFilterItems = true;
         if (this.filterSelected) {
             this.filterSelected = false;
         }
         if (this._validationTimeout) {
             if (this._filterItems(value).length) {
-                this.valueState = this._effectiveValueState;
+                this._updateValueState(this._effectiveValueState);
                 this._validationTimeout = null;
             }
             else {
-                input.value = this._inputLastValue;
                 return;
             }
         }
-        this._effectiveValueState = this.valueState;
+        // Save the original value state before setting validation error
+        if (this.valueState !== ValueState.Negative) {
+            this._effectiveValueState = this.valueState;
+        }
         if (!this._isComposing && !filteredItems.length && value && !this.noValidation) {
-            const newValue = this.valueBeforeAutoComplete || this._inputLastValue;
-            input.value = newValue;
-            this.value = newValue;
-            this.valueState = ValueState.Negative;
+            this._updateValueState(ValueState.Negative);
             this._shouldAutocomplete = false;
-            this._resetValueState(oldValueState);
-            return;
+        }
+        else if ((filteredItems.length || !value) && this.valueState === ValueState.Negative) {
+            this._updateValueState(this._effectiveValueState);
         }
         if (!this._isComposing) {
             this._inputLastValue = input.value;
@@ -385,6 +409,17 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         this.fireDecoratorEvent("input");
     }
+    _updateValueState(newValueState) {
+        const oldValueState = this.valueState;
+        if (oldValueState !== newValueState) {
+            const eventPrevented = !this.fireDecoratorEvent("value-state-change", {
+                valueState: newValueState,
+            });
+            if (!eventPrevented) {
+                this.valueState = newValueState;
+            }
+        }
+    }
     _tokenDelete(e) {
         this._previouslySelectedItems = this._getSelectedItems();
         const token = e.detail.tokens;
@@ -392,6 +427,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         deletingItems.forEach(item => {
             item.selected = false;
         });
+        if (this.selectedValues) {
+            const valuesToDelete = deletingItems.map(item => item.value);
+            this.selectedValues = this.selectedValues.filter(value => !valuesToDelete.includes(value));
+        }
         this._deleting = true;
         this._preventTokenizerToggle = true;
         this.focus();
@@ -521,23 +560,24 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             }
         });
     }
-    async _handlePaste(e) {
+    _handlePaste(e) {
         if (this.readonly) {
             return;
         }
         e.preventDefault();
-        const pastedText = await navigator.clipboard.readText();
-        document.execCommand("insertText", true, pastedText ?? "");
-        const inputEvent = new Event("input", {
-            bubbles: true,
-            cancelable: true,
-        });
-        // Dispatch it
-        this._innerInput.dispatchEvent(inputEvent);
-        if (!pastedText) {
-            return;
+        // Get pasted text from clipboardData - more reliable than navigator.clipboard
+        const pastedText = e.clipboardData?.getData("text/plain") || "";
+        if (pastedText) {
+            // Use deprecated but still functional document.execCommand for cursor handling
+            document.execCommand("insertText", true, pastedText);
+            // Dispatch input event to ensure the component updates
+            const inputEvent = new Event("input", {
+                bubbles: true,
+                cancelable: true,
+            });
+            this._innerInput.dispatchEvent(inputEvent);
+            this._handleTokenCreationUponPaste(pastedText, e);
         }
-        this._handleTokenCreationUponPaste(pastedText, e);
     }
     _handleTokenCreationUponPaste(pastedText, e) {
         const separatedText = pastedText.split(/\r\n|\r|\n|\t/g).filter(t => !!t);
@@ -551,19 +591,27 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (this.readonly || isFirefox()) {
             return;
         }
-        e.preventDefault();
-        const pastedText = await navigator.clipboard.readText();
-        document.execCommand("insertText", true, pastedText ?? "");
-        const inputEvent = new Event("input", {
-            bubbles: true,
-            cancelable: true,
-        });
-        // Dispatch it
-        this._innerInput.dispatchEvent(inputEvent);
-        if (!pastedText) {
-            return;
+        // For Shift+Insert, try to use navigator.clipboard API
+        // If it fails due to permissions, the browser's native paste will be blocked
+        try {
+            e.preventDefault();
+            const pastedText = await navigator.clipboard.readText();
+            if (pastedText) {
+                // Use deprecated but still functional document.execCommand for cursor handling
+                document.execCommand("insertText", true, pastedText);
+                // Dispatch input event to ensure the component updates
+                const inputEvent = new Event("input", {
+                    bubbles: true,
+                    cancelable: true,
+                });
+                this._innerInput.dispatchEvent(inputEvent);
+                this._handleTokenCreationUponPaste(pastedText, e);
+            }
+        }
+        catch (err) {
+            // If clipboard API fails, silently ignore
+            // Native paste won't work since we already prevented default
         }
-        this._handleTokenCreationUponPaste(pastedText, e);
     }
     _handleShow(e) {
         const items = this._getItems();
@@ -880,7 +928,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 if (this._validationTimeout) {
                     return;
                 }
-                this.valueState = ValueState.Negative;
+                this._updateValueState(ValueState.Negative);
                 this._performingSelectionTwice = true;
                 this._resetValueState(oldValueState, () => {
                     this._performingSelectionTwice = false;
@@ -888,29 +936,44 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             }
             else {
                 this._previouslySelectedItems = this._getSelectedItems();
+                const previousSelectedValues = [...this.selectedValues];
                 matchingItem.selected = true;
                 this.value = "";
                 // during composition prevent _inputLiveChange for proper input clearing
                 if (this._isComposing) {
                     this._suppressNextLiveChange = true;
                 }
+                if (this.selectedValues && matchingItem.value) {
+                    this.selectedValues = [...this.selectedValues, matchingItem.value];
+                }
                 const changePrevented = this.fireSelectionChange();
                 if (changePrevented) {
+                    this.selectedValues = previousSelectedValues;
                     this._revertSelection();
                 }
             }
             innerInput.setSelectionRange(matchingItem.text.length, matchingItem.text.length);
             this.open = false;
         }
-        else if (this._internals?.form) {
-            submitForm(this);
+        else {
+            // If dropdown is open with a focused item, just close it instead of submitting
+            if (this.open && this._getList()._itemNavigation._currentIndex >= 0) {
+                this.open = false;
+                return;
+            }
+            if (this._lastValue !== this.value) {
+                this._inputChange();
+            }
+            if (this._internals?.form) {
+                submitForm(this);
+            }
         }
     }
     _resetValueState(valueState, callback) {
         this._validationTimeout = setTimeout(() => {
             this._effectiveValueState = this.valueState;
             this._dialogInputValueState = valueState;
-            this.valueState = valueState;
+            this._updateValueState(valueState);
             this._validationTimeout = null;
             this._innerInput.focus();
             callback && callback();
@@ -1004,8 +1067,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _getSelectedItems() {
         // Angular 2 way data binding
-        this.selectedValues = this._getItems().filter(item => item.selected);
-        return this.selectedValues;
+        return this._getItems().filter(item => item.selected);
     }
     _listSelectionChange(e) {
         let changePrevented;
@@ -1018,6 +1080,13 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         // don't call selection change right after selection as user can cancel it on phone
         if (!isPhone()) {
+            if (this.selectedValues) {
+                // Get values from all selected items (not just filtered ones)
+                this.selectedValues = this._getItems()
+                    .filter((i) => isInstanceOfMultiComboBoxItem(i) && i.selected)
+                    .map(i => i.value)
+                    .filter((v) => !!v);
+            }
             changePrevented = this.fireSelectionChange();
             if (changePrevented) {
                 e.preventDefault();
@@ -1029,6 +1098,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (!e.detail.selectedItems.length && this.filterSelected) {
             this.filterSelected = false;
         }
+        if (this.valueState === ValueState.Negative) {
+            this._updateValueState(this._effectiveValueState);
+        }
         if (!e.detail.selectionComponentPressed && !isSpace(castedEvent) && !isSpaceCtrl(castedEvent)) {
             this.open = false;
             this.value = "";
@@ -1169,6 +1241,14 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             item.selected = this._previouslySelectedItems.includes(item);
         });
     }
+    _syncSelection() {
+        // set selected property of the items based on the selection value
+        this._getItems().forEach(item => {
+            if (isInstanceOfMultiComboBoxItem(item) && item.value) {
+                item.selected = this.selectedValues.includes(item.value);
+            }
+        });
+    }
     onBeforeRendering() {
         const input = this._innerInput;
         const autoCompletedChars = input && (input.selectionEnd || 0) - (input.selectionStart || 0);
@@ -1183,8 +1263,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this.valueBeforeAutoComplete = "";
             this._filteredItems = this._getItems();
         }
+        if (this.selectedValues) {
+            this._syncSelection();
+        }
         this.tokenizerAvailable = this._getSelectedItems().length > 0;
-        this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
+        this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
         if (!input || !value) {
             this._getItems().forEach(item => {
                 if (isInstanceOfMultiComboBoxItem(item)) {
@@ -1206,7 +1289,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             }
         }
         if (this._shouldFilterItems) {
-            this._filteredItems = this._filterItems(this._shouldAutocomplete || !!autoCompletedChars ? this.valueBeforeAutoComplete : value);
+            this._filteredItems = this._filterItems(autoCompletedChars ? this.valueBeforeAutoComplete : value);
         }
         else {
             this._filteredItems = this._getItems();
@@ -1248,7 +1331,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._clearingValue = true;
     }
     storeResponsivePopoverWidth() {
-        if (this.open && !this._listWidth) {
+        if (this.open && !this._listWidth && this.list) {
             this._listWidth = this.list.offsetWidth;
         }
     }
@@ -1326,14 +1409,17 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         if ((!this.shadowRoot.contains(e.relatedTarget) || focusIsGoingInPopover) && !this._deleting && !this._clearingValue) {
             this.focused = false;
+            if (!this.noValidation && this.value) {
+                this.value = "";
+                this._lastValue = "";
+                if (this.valueState === ValueState.Negative && this._effectiveValueState !== ValueState.Negative) {
+                    this._updateValueState(this._effectiveValueState);
+                }
+            }
             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.noValidation && !focusIsGoingInPopover) {
-                this.value = "";
-            }
         }
     }
     /**
@@ -1471,7 +1557,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (!this._tokenizer) {
             return;
         }
-        return getTokensCountText(this.selectedValues.length);
+        return getTokensCountText(this._getSelectedItems().length);
     }
     get _tokensCountTextId() {
         return "ui5-multi-combobox-hiddenText-nMore";
@@ -1513,7 +1599,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return this._inputDom;
     }
     get _headerTitleText() {
-        return MultiComboBox_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+        return getAssociatedLabelForTexts(this) || MultiComboBox_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
     }
     get _iconAccessibleNameText() {
         return MultiComboBox_1.i18nBundle.getText(SELECT_OPTIONS);
@@ -1538,9 +1624,6 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const shouldBeExpanded = this.focused || this.open || isCurrentlyExpanded;
         return shouldBeExpanded;
     }
-    get _valueStatePopoverHorizontalAlign() {
-        return this.effectiveDir !== "rtl" ? "Start" : "End";
-    }
     get iconsCount() {
         const slottedIconsCount = this.icon?.length || 0;
         const clearIconCount = Number(this._effectiveShowClearIcon) ?? 0;
@@ -1605,6 +1688,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
 __decorate([
     property()
 ], MultiComboBox.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], MultiComboBox.prototype, "selectedValues", void 0);
 __decorate([
     property()
 ], MultiComboBox.prototype, "name", void 0);
@@ -1629,6 +1715,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], MultiComboBox.prototype, "loading", void 0);
 __decorate([
     property()
 ], MultiComboBox.prototype, "filter", void 0);
@@ -1660,10 +1749,10 @@ __decorate([
     property()
 ], MultiComboBox.prototype, "_valueBeforeOpen", void 0);
 __decorate([
-    property({ type: Array })
+    property({ type: Array, noAttribute: true })
 ], MultiComboBox.prototype, "_filteredItems", void 0);
 __decorate([
-    property({ type: Array })
+    property({ type: Array, noAttribute: true })
 ], MultiComboBox.prototype, "_previouslySelectedItems", void 0);
 __decorate([
     property({ type: Boolean })
@@ -1702,7 +1791,7 @@ __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "_handleLinkNavigation", void 0);
 __decorate([
-    property({ type: Array })
+    property({ type: Array, noAttribute: true })
 ], MultiComboBox.prototype, "_linksListenersArray", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
@@ -1796,6 +1885,19 @@ MultiComboBox = MultiComboBox_1 = __decorate([
         bubbles: true,
         cancelable: true,
     })
+    /**
+     * Fired before the value state of the component is updated internally.
+     * The event is preventable, meaning that if it's default action is
+     * prevented, the component will not update the value state.
+     * @public
+     * @since 2.19.0
+     * @param {string} valueState The new `valueState` that will be set.
+     */
+    ,
+    event("value-state-change", {
+        bubbles: true,
+        cancelable: true,
+    })
 ], MultiComboBox);
 MultiComboBox.define();
 export default MultiComboBox;