@ui5/webcomponents 1.22.0-rc.0 → 1.22.0-rc.2

package/dist/MultiComboBox.js

@@ -16,6 +16,7 @@ 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, 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 { 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";
@@ -41,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";
@@ -52,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
  *
@@ -106,12 +109,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         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;
     }
@@ -124,8 +126,40 @@ 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();
@@ -430,20 +464,48 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             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) {
@@ -484,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) {
@@ -514,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();
@@ -526,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) {
@@ -751,6 +826,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         // 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 = "";
@@ -809,6 +887,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _afterClosePicker() {
         // close device's keyboard and prevent further typing
         if (isPhone()) {
+            this._dialogInputValueState = this.valueState;
             this.blur();
         }
         this._toggle();
@@ -824,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);
@@ -862,6 +944,14 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         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) {
@@ -906,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;
@@ -979,18 +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._tokenizer.tokens.forEach(token => {
             token.selected = false;
         });
-        this._lastValue = this.value;
         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)) {
@@ -1011,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) {
@@ -1030,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;
@@ -1051,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 {
@@ -1059,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) {
@@ -1101,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;
@@ -1112,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);
     }
@@ -1131,8 +1241,17 @@ 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 {
@@ -1145,10 +1264,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             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),
             },
         };
     }
@@ -1199,18 +1318,27 @@ __decorate([
 __decorate([
     property({ type: ComboBoxFilter, defaultValue: ComboBoxFilter.StartsWithPerTerm })
 ], MultiComboBox.prototype, "filter", void 0);
+__decorate([
+    property({ type: Boolean })
+], 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);
@@ -1238,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);
@@ -1272,6 +1409,7 @@ MultiComboBox = MultiComboBox_1 = __decorate([
             GroupHeaderListItem,
             ToggleButton,
             Button,
+            CheckBox,
         ],
     })
     /**
@@ -1282,7 +1420,7 @@ MultiComboBox = MultiComboBox_1 = __decorate([
     ,
     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.
      *
      * @public
      */
@@ -1297,11 +1435,11 @@ MultiComboBox = MultiComboBox_1 = __decorate([
     ,
     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.
      *
      * @param {IMultiComboBoxItem[]} items an array of the selected items.
      * @public
+     * @allowPreventDefault
      */
     ,
     event("selection-change", {