@syncfusion/ej2-dropdowns 34.2.8 → 35.1.37

package/dist/es6/ej2-dropdowns.es2015.js

@@ -459,7 +459,14 @@ class VirtualScroll {
                     if (oldUlElement) {
                         this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
                     }
-                    this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    if (this.component === 'multiselect' && this.parent.value.length >= this.parent.getSummaryTagThreshold() &&
+                        this.parent.mode === 'CheckBox' && this.parent.enableVirtualization) {
+                        this.parent.resetList(this.parent.dataSource, this.parent.fields, query, undefined, true);
+                    }
+                    else {
+                        this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                    }
                     isListUpdated = false;
                     this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ? this.parent.appendUncheckList : false;
                     oldUlElement = null;
@@ -1562,9 +1569,10 @@ let DropDownBase = class DropDownBase extends Component {
      * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @param {MouseEvent | KeyboardEventArgs | TouchEvent} event - Specifies the event which is the reason for the invocation of this method.
+     * @param {boolean} skipExecuteLocal - Specifies whether to skip executing the local query on the data source and use unchecked values instead.
      * @returns {void}
      */
-    setListData(dataSource, fields, query, event) {
+    setListData(dataSource, fields, query, event, skipExecuteLocal) {
         fields = fields ? fields : this.fields;
         let ulElement;
         this.isActive = true;
@@ -1724,7 +1732,13 @@ let DropDownBase = class DropDownBase extends Component {
                             this.virtualGroupDataSource
                             && !this.isCustomDataUpdated ? new DataManager(this.virtualGroupDataSource) :
                             new DataManager(eventArgs.data);
-                        listItems = (this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        if (!skipExecuteLocal) {
+                            listItems = (this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        }
+                        else {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            listItems = { count: this.uncheckedValues.length, result: this.uncheckedValues };
+                        }
                         if (!this.virtualSelectAll) {
                             const newQuery = this.getQuery(eventArgs.query);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2627,9 +2641,10 @@ let DropDownBase = class DropDownBase extends Component {
      * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - Specifies the event.
+     * @param {boolean} skipExecuteLocal - Specifies whether to skip executing the local query on the data source and use unchecked values instead.
      * @returns {void}
      */
-    resetList(dataSource, fields, query, e) {
+    resetList(dataSource, fields, query, e, skipExecuteLocal) {
         if (this.list) {
             if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)
                 || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {
@@ -2645,7 +2660,7 @@ let DropDownBase = class DropDownBase extends Component {
                 this.setCustomListData(dataSource, fields, query, e);
             }
             else {
-                this.setListData(dataSource, fields, query, e);
+                this.setListData(dataSource, fields, query, e, skipExecuteLocal);
             }
         }
     }
@@ -13738,6 +13753,7 @@ const FILTERPARENT = 'e-filter-parent';
 const CUSTOM_WIDTH = 'e-search-custom-width';
 const FILTERINPUT = 'e-input-filter';
 const RESIZE_ICON = 'e-resizer-right e-icons';
+const SUMMARY_TAG_VIEW = 'e-delim-summary';
 /**
  * The Multiselect allows the user to pick a more than one value from list of predefined values.
  * ```html
@@ -13766,6 +13782,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
      */
     constructor(option, element) {
         super(option, element);
+        this.wasSelectAllActive = false;
         this.clearIconWidth = 0;
         this.previousFilterText = '';
         this.storedSelectAllHeight = 0;
@@ -13775,6 +13792,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.isFilterPrevented = false;
         this.isFilteringAction = false;
         this.isPropertyChanged = false;
+        this.uncheckedValues = [];
         this.isValidKey = false;
         this.selectAllEventData = [];
         this.selectAllEventEle = [];
@@ -14214,11 +14232,14 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (this.enableVirtualization) {
                 if (isCheckbox) {
                     const startindex = this.viewPortInfo.startIndex;
-                    const endindex = (((startindex + this.viewPortInfo.endIndex) <= (valuecheck.length)) &&
+                    let endindex = (((startindex + this.viewPortInfo.endIndex) <= (valuecheck.length)) &&
                         valuecheck[(startindex + this.viewPortInfo.endIndex)]) &&
                         (this.dataSource instanceof DataManager && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2))
                         ? (startindex + this.viewPortInfo.endIndex)
                         : (valuecheck.length);
+                    if (this.value && this.value.length > this.getSummaryTagThreshold()) {
+                        endindex = this.viewPortInfo.endIndex;
+                    }
                     // Build predicates in batches to prevent stack overflow
                     const predicateBatches = [];
                     for (let batchStart = startindex; batchStart < endindex; batchStart += BATCH_SIZE) {
@@ -14569,6 +14590,56 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.checkSelectAll();
         this.checkMaxSelection();
     }
+    extendSelectionToNewItems() {
+        if (!this.list) {
+            return;
+        }
+        const unselected = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-active):not(.e-disabled):not(.e-reorder-hide)');
+        if (!unselected || unselected.length === 0) {
+            this.notify('checkSelectAll', {
+                module: 'CheckBoxSelection',
+                enable: this.mode === 'CheckBox',
+                value: 'check'
+            });
+            return;
+        }
+        if (!this.value) {
+            this.value = [];
+        }
+        const currentValues = this.value;
+        const seen = {};
+        for (let i = 0; i < currentValues.length; i++) {
+            seen[String(currentValues[i])] = true;
+        }
+        const newValues = currentValues.slice();
+        let changed = false;
+        for (let i = 0; i < unselected.length; i++) {
+            const li = unselected[i];
+            const rawValue = li.getAttribute('data-value');
+            if (rawValue === null || seen[rawValue]) {
+                continue;
+            }
+            const formatted = this.getFormattedValue(rawValue);
+            newValues.push(formatted);
+            seen[rawValue] = true;
+            changed = true;
+            this.addListSelection(li);
+        }
+        if (changed) {
+            this.setProperties({ value: newValues }, true);
+            this.updateHiddenElement();
+            if (this.chipCollectionWrapper) {
+                this.removeChipSelection();
+            }
+            this.updateDelimView();
+            this.checkPlaceholderSize();
+        }
+        this.notify('checkSelectAll', {
+            module: 'CheckBoxSelection',
+            enable: this.mode === 'CheckBox',
+            value: 'check'
+        });
+    }
     hideGroupItem(value) {
         let element;
         let element1;
@@ -16091,7 +16162,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             else {
                 const listUl = this.list && this.list.querySelector('ul');
                 const isFullList = this.isReact && this.itemTemplate && listUl != null &&
-                    listUl.querySelectorAll('.e-list-item').length === this.mainData.length && !this.groupTemplate && this.mode !== 'CheckBox';
+                    listUl.querySelectorAll('.e-list-item').length === this.mainData.length && !this.groupTemplate &&
+                    this.mode !== 'CheckBox';
                 this.onActionComplete(isFullList ? listUl : list, this.mainData);
             }
             this.focusAtLastListItem(data);
@@ -16481,6 +16553,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             });
         }
     }
+    isDimColumnWithCustomStyle() {
+        return this.overAllWrapper.classList.contains('b-dbrd-dim-column-ms') &&
+            this.overAllWrapper.classList.contains('e-dbrd-cstyle');
+    }
     removeValue(value, eve, length, isClearAll) {
         let index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) :
             this.value.indexOf(this.getFormattedValue(value));
@@ -16514,6 +16590,38 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.currentRemoveValue = this.allowObjectBinding ? getValue(((this.fields.value) ?
                         this.fields.value : ''), value) : value;
                     this.virtualSelectAll = false;
+                    if (this.mode === 'CheckBox' && this.enableVirtualization && this.value.length > this.getSummaryTagThreshold()
+                        && !isNullOrUndefined(this.dataSource) && (!this.isDimColumnWithCustomStyle())) {
+                        const valueField = this.fields && this.fields.value ? this.fields.value : 'value';
+                        const dataSourceArray = this.dataSource;
+                        let fullItem;
+                        let dataSourceIndex = -1;
+                        for (let i = 0; i < dataSourceArray.length; i++) {
+                            const item = dataSourceArray[i];
+                            if (getValue(valueField, item) === this.currentRemoveValue) {
+                                fullItem = item;
+                                dataSourceIndex = i;
+                                break;
+                            }
+                        }
+                        if (fullItem && dataSourceIndex !== -1) {
+                            const unchecked = this.uncheckedValues;
+                            this.uncheckedValues = unchecked.concat([fullItem]);
+                            const indexMap = {};
+                            for (let j = 0; j < dataSourceArray.length; j++) {
+                                const mapItem = dataSourceArray[j];
+                                indexMap[getValue(valueField, mapItem)] = j;
+                            }
+                            this.uncheckedValues.sort((a, b) => {
+                                const aIdx = indexMap[getValue(valueField, a)];
+                                const bIdx = indexMap[getValue(valueField, b)];
+                                if (aIdx === bIdx) {
+                                    return 0;
+                                }
+                                return aIdx - bIdx;
+                            });
+                        }
+                    }
                     const removeVal = this.value.slice(0);
                     removeVal.splice(index, 1);
                     if (this.enableVirtualization && this.selectedListData) {
@@ -17959,7 +18067,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         else if ((isNullOrUndefined(text) && !this.allowCustomValue) &&
                             ((!(this.dataSource instanceof DataManager)) ||
                                 (this.dataSource instanceof DataManager && isInitialVirtualData)) && (!this.isAngular || !isInitialRender ||
-                            (isNullOrUndefined(formElement) && listItems && listItems.length > 0))) {
+                            (isNullOrUndefined(formElement) && listItems && listItems.length > 0))
+                            && !(this.mode === 'CheckBox' && this.enableVirtualization && this.value.length > this.getSummaryTagThreshold())) {
                             this.value.splice(index, 1);
                             index -= 1;
                         }
@@ -18633,6 +18742,53 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             wrapperType.innerText = wrapperData;
         }
     }
+    getSummaryTagThreshold() {
+        return this.summaryTagCount && this.summaryTagCount > 0 ? this.summaryTagCount : 1000;
+    }
+    getSummaryTagText() {
+        const selectedCount = this.value ? this.value.length : 0;
+        const totalCount = this.totalItemCount ? this.totalItemCount : 0;
+        if (this.summaryTagTemplate && typeof this.summaryTagTemplate === 'string') {
+            let template = this.summaryTagTemplate;
+            if (this.mode === 'CheckBox') {
+                template = template.replace(/<[^>]+>/g, '');
+            }
+            if (this.viewWrapper) {
+                this.viewWrapper.classList.add(SUMMARY_TAG_VIEW);
+                this.applySummaryTagWidth();
+            }
+            return template
+                .replace(/\$\{selectedCount\}/g, selectedCount.toString())
+                .replace(/\$\{totalCount\}/g, totalCount.toString());
+        }
+        const l10nLocale = { summaryTagTemplate: '${selectedCount} items selected' };
+        const summaryTagTemplate = this.l10n ? this.l10n.getConstant('summaryTagTemplate') :
+            new L10n(this.getLocaleName(), l10nLocale, this.locale).getConstant('summaryTagTemplate');
+        return summaryTagTemplate.replace(/\$\{selectedCount\}/g, selectedCount.toString());
+    }
+    applySummaryTagWidth() {
+        if (!this.viewWrapper || !this.componentWrapper) {
+            return;
+        }
+        const componentStyle = window.getComputedStyle(this.componentWrapper);
+        const componentWidth = this.componentWrapper.clientWidth;
+        const horizontalPadding = (parseFloat(componentStyle.paddingLeft) || 0) +
+            (parseFloat(componentStyle.paddingRight) || 0);
+        const available = componentWidth - horizontalPadding;
+        let rightIcons = 0;
+        if (this.showClearButton && this.overAllClear) {
+            const display = this.overAllClear.style.display;
+            this.overAllClear.style.display = 'block';
+            rightIcons += this.overAllClear.offsetWidth;
+            this.overAllClear.style.display = display;
+        }
+        if (this.showDropDownIcon && this.dropIcon) {
+            const dropStyle = window.getComputedStyle(this.dropIcon);
+            rightIcons += this.dropIcon.offsetWidth + (parseFloat(dropStyle.marginRight) || 0);
+        }
+        const maxWidth = Math.max(0, available - rightIcons - 8);
+        this.viewWrapper.style.width = maxWidth + 'px';
+    }
     updateDelimView() {
         if (this.delimiterWrapper) {
             this.hideDelimWrapper();
@@ -18646,6 +18802,17 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER$1);
         }
         if (this.value && this.value.length) {
+            if (this.mode === 'CheckBox' && this.value.length > this.getSummaryTagThreshold()) {
+                const summaryText = this.getSummaryTagText();
+                this.updateWrapperText(this.viewWrapper, summaryText);
+                if (this.isSelectAllClicked) {
+                    this.showOverAllClear();
+                }
+                return;
+            }
+            else if (this.mode === 'CheckBox' && this.viewWrapper) {
+                this.viewWrapper.classList.remove(SUMMARY_TAG_VIEW);
+            }
             let data = '';
             let temp;
             let tempData;
@@ -19133,102 +19300,227 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         else {
             if (this.virtualSelectAllData && this.virtualSelectAllData.length > 0) {
-                const dataArray = this.virtualSelectAllData;
-                const batchSize = 500;
-                let currentIndex = 0;
-                this.isProcessingVirtualSelectAll = true;
-                createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
-                showSpinner(this.filterParent);
-                this.preventKeyboardInteraction = true;
-                let contentEl = null;
-                let selectAllEl = null;
-                let inputEl = null;
-                if (this.popupObj && this.popupObj.element && this.filterParent) {
-                    contentEl = this.popupObj.element.querySelector('.e-content');
-                    selectAllEl = this.popupObj.element.querySelector('.e-selectall-parent');
-                    inputEl = this.filterParent.querySelector('.e-input');
-                    [contentEl, selectAllEl, this.filterParent].forEach((el) => {
-                        if (el) {
-                            el.style.opacity = '0.5';
-                        }
-                    });
-                    if (inputEl) {
-                        inputEl.setAttribute('readonly', 'true');
-                    }
-                    this.filterParent.style.cursor = 'progress';
-                    [contentEl, selectAllEl].forEach((el) => {
-                        if (!el) {
-                            return;
-                        }
-                        el.style.pointerEvents = 'none';
-                        el.style.userSelect = 'none';
-                        el.style.touchAction = 'none';
-                        if (el === contentEl) {
-                            el.style.overflow = 'hidden';
+                if (this.mode === 'CheckBox' && this.enableVirtualization && this.virtualSelectAllData.length > this.getSummaryTagThreshold()) {
+                    this.isProcessingVirtualSelectAll = true;
+                    createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
+                    showSpinner(this.filterParent);
+                    this.preventKeyboardInteraction = true;
+                    let contentEl = null;
+                    let selectAllEl = null;
+                    let inputEl = null;
+                    if (this.popupObj && this.popupObj.element && this.filterParent) {
+                        contentEl = this.popupObj.element.querySelector('.e-content');
+                        selectAllEl = this.popupObj.element.querySelector('.e-selectall-parent');
+                        inputEl = this.filterParent.querySelector('.e-input');
+                        [contentEl, selectAllEl, this.filterParent].forEach((el) => {
+                            if (el) {
+                                el.style.opacity = '0.5';
+                            }
+                        });
+                        if (inputEl) {
+                            inputEl.setAttribute('readonly', 'true');
                         }
-                    });
-                }
-                const processBatch = () => {
-                    const endIndex = Math.min(currentIndex + batchSize, dataArray.length);
-                    const batch = dataArray.slice(currentIndex, endIndex);
-                    // Use map on the batch
-                    batch.map((obj) => {
-                        this.virtualSelectAll = true;
-                        // eslint-disable-next-line security/detect-object-injection
-                        this.removeValue(this.value[index], event, this.value.length - index);
-                    });
-                    currentIndex = endIndex;
-                    if (currentIndex < dataArray.length) {
-                        requestAnimationFrame(processBatch);
+                        this.filterParent.style.cursor = 'progress';
+                        [contentEl, selectAllEl].forEach((el) => {
+                            if (!el) {
+                                return;
+                            }
+                            el.style.pointerEvents = 'none';
+                            el.style.userSelect = 'none';
+                            el.style.touchAction = 'none';
+                            if (el === contentEl) {
+                                el.style.overflow = 'hidden';
+                            }
+                        });
                     }
-                    else {
-                        // All batches completed
-                        this.isProcessingVirtualSelectAll = false;
-                        this.preventKeyboardInteraction = false;
-                        hideSpinner(this.filterParent);
-                        if (this.popupObj && this.filterParent) {
-                            [contentEl, selectAllEl, this.filterParent].forEach((el) => {
-                                if (el) {
-                                    el.style.opacity = '';
-                                }
+                    setTimeout(() => {
+                        requestAnimationFrame(() => {
+                            this.virtualSelectAll = false;
+                            this.selectedListData = [];
+                            if (this.chipCollectionWrapper) {
+                                this.chipCollectionWrapper.innerHTML = '';
+                            }
+                            if (this.list) {
+                                const selectedItems = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + '.e-active');
+                                removeClass(selectedItems, 'e-active');
+                                const checkedItems = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + '[aria-selected="true"]');
+                                checkedItems.forEach((el) => el.setAttribute('aria-selected', 'false'));
+                            }
+                            if (this.mainList) {
+                                const mainSelected = this.mainList.querySelectorAll('li.' + dropDownBaseClasses.li + '.e-active');
+                                removeClass(mainSelected, 'e-active');
+                                const mainChecked = this.mainList.querySelectorAll('li.' + dropDownBaseClasses.li + '[aria-selected="true"]');
+                                mainChecked.forEach((el) => el.setAttribute('aria-selected', 'false'));
+                            }
+                            if (this.list) {
+                                const disabledItems = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + '.e-disable');
+                                removeClass(disabledItems, 'e-disable');
+                            }
+                            if (this.mainList) {
+                                const mainDisabled = this.mainList.querySelectorAll('li.' + dropDownBaseClasses.li + '.e-disable');
+                                removeClass(mainDisabled, 'e-disable');
+                            }
+                            this.setProperties({ value: [] }, true);
+                            this.setProperties({ text: '' }, true);
+                            this.tempValues = null;
+                            this.notify('checkSelectAll', {
+                                module: 'CheckBoxSelection',
+                                enable: this.mode === 'CheckBox',
+                                value: 'uncheck'
                             });
-                            if (contentEl) {
-                                contentEl.style.pointerEvents = 'auto';
-                                contentEl.style.userSelect = 'auto';
-                                contentEl.style.touchAction = 'auto';
-                                contentEl.style.overflow = 'auto';
+                            const selectedAllArgs = {
+                                event: event,
+                                items: [],
+                                itemData: [],
+                                isInteracted: event ? true : false,
+                                isChecked: false
+                            };
+                            this.trigger('selectedAll', selectedAllArgs);
+                            if (this.changeOnBlur) {
+                                this.updateValueState(event, this.value, this.tempValues);
+                                this.dispatchEvent(this.hiddenElement, 'change');
                             }
-                            if (selectAllEl) {
-                                selectAllEl.style.pointerEvents = 'auto';
-                                selectAllEl.style.userSelect = 'auto';
-                                selectAllEl.style.touchAction = 'auto';
+                            else {
+                                this.updateValueState(event, this.value, this.tempValues);
+                                this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
                             }
-                            if (inputEl) {
-                                inputEl.removeAttribute('readonly');
+                            this.updateHiddenElement();
+                            this.refreshInputHight();
+                            this.refreshPlaceHolder();
+                            this.updateDelimView();
+                            this.hideOverAllClear();
+                            this.isProcessingVirtualSelectAll = false;
+                            this.preventKeyboardInteraction = false;
+                            hideSpinner(this.filterParent);
+                            if (this.popupObj && this.filterParent) {
+                                [contentEl, selectAllEl, this.filterParent].forEach((el) => {
+                                    if (el) {
+                                        el.style.opacity = '';
+                                    }
+                                });
+                                if (contentEl) {
+                                    contentEl.style.pointerEvents = 'auto';
+                                    contentEl.style.userSelect = 'auto';
+                                    contentEl.style.touchAction = 'auto';
+                                    contentEl.style.overflow = 'auto';
+                                }
+                                if (selectAllEl) {
+                                    selectAllEl.style.pointerEvents = 'auto';
+                                    selectAllEl.style.userSelect = 'auto';
+                                    selectAllEl.style.touchAction = 'auto';
+                                }
+                                if (inputEl) {
+                                    inputEl.removeAttribute('readonly');
+                                }
+                                this.filterParent.style.cursor = '';
                             }
-                            this.filterParent.style.cursor = '';
-                        }
-                        if (!this.isSelectAllClicked) {
-                            this.showOverAllClear();
+                            if (!isNullOrUndefined(this.viewPortInfo.startIndex) && !isNullOrUndefined(this.viewPortInfo.endIndex)) {
+                                this.notify('setCurrentViewDataAsync', {
+                                    component: this.getModuleName(),
+                                    module: 'VirtualScroll'
+                                });
+                            }
+                        });
+                    }, this.virtualSelectAllData.length / 10);
+                }
+                else {
+                    const dataArray = this.virtualSelectAllData;
+                    const batchSize = 500;
+                    let currentIndex = 0;
+                    this.isProcessingVirtualSelectAll = true;
+                    createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
+                    showSpinner(this.filterParent);
+                    this.preventKeyboardInteraction = true;
+                    let contentEl = null;
+                    let selectAllEl = null;
+                    let inputEl = null;
+                    if (this.popupObj && this.popupObj.element && this.filterParent) {
+                        contentEl = this.popupObj.element.querySelector('.e-content');
+                        selectAllEl = this.popupObj.element.querySelector('.e-selectall-parent');
+                        inputEl = this.filterParent.querySelector('.e-input');
+                        [contentEl, selectAllEl, this.filterParent].forEach((el) => {
+                            if (el) {
+                                el.style.opacity = '0.5';
+                            }
+                        });
+                        if (inputEl) {
+                            inputEl.setAttribute('readonly', 'true');
                         }
-                        this.updatedataValueItems(event);
-                        if (!this.changeOnBlur) {
-                            this.updateValueState(event, this.value, this.tempValues);
-                            this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
+                        this.filterParent.style.cursor = 'progress';
+                        [contentEl, selectAllEl].forEach((el) => {
+                            if (!el) {
+                                return;
+                            }
+                            el.style.pointerEvents = 'none';
+                            el.style.userSelect = 'none';
+                            el.style.touchAction = 'none';
+                            if (el === contentEl) {
+                                el.style.overflow = 'hidden';
+                            }
+                        });
+                    }
+                    const processBatch = () => {
+                        const endIndex = Math.min(currentIndex + batchSize, dataArray.length);
+                        const batch = dataArray.slice(currentIndex, endIndex);
+                        // Use map on the batch
+                        batch.map((obj) => {
+                            this.virtualSelectAll = true;
+                            // eslint-disable-next-line security/detect-object-injection
+                            this.removeValue(this.value[index], event, this.value.length - index);
+                        });
+                        currentIndex = endIndex;
+                        if (currentIndex < dataArray.length) {
+                            requestAnimationFrame(processBatch);
                         }
-                        this.updateHiddenElement();
-                        this.setProperties({ value: [] }, true);
-                        this.selectedListData = [];
-                        this.virtualSelectAll = false;
-                        if (!isNullOrUndefined(this.viewPortInfo.startIndex) && !isNullOrUndefined(this.viewPortInfo.endIndex)) {
-                            this.notify('setCurrentViewDataAsync', {
-                                component: this.getModuleName(),
-                                module: 'VirtualScroll'
-                            });
+                        else {
+                            // All batches completed
+                            this.isProcessingVirtualSelectAll = false;
+                            this.preventKeyboardInteraction = false;
+                            hideSpinner(this.filterParent);
+                            if (this.popupObj && this.filterParent) {
+                                [contentEl, selectAllEl, this.filterParent].forEach((el) => {
+                                    if (el) {
+                                        el.style.opacity = '';
+                                    }
+                                });
+                                if (contentEl) {
+                                    contentEl.style.pointerEvents = 'auto';
+                                    contentEl.style.userSelect = 'auto';
+                                    contentEl.style.touchAction = 'auto';
+                                    contentEl.style.overflow = 'auto';
+                                }
+                                if (selectAllEl) {
+                                    selectAllEl.style.pointerEvents = 'auto';
+                                    selectAllEl.style.userSelect = 'auto';
+                                    selectAllEl.style.touchAction = 'auto';
+                                }
+                                if (inputEl) {
+                                    inputEl.removeAttribute('readonly');
+                                }
+                                this.filterParent.style.cursor = '';
+                            }
+                            if (!this.isSelectAllClicked) {
+                                this.showOverAllClear();
+                            }
+                            this.updatedataValueItems(event);
+                            if (!this.changeOnBlur) {
+                                this.updateValueState(event, this.value, this.tempValues);
+                                this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
+                            }
+                            this.updateHiddenElement();
+                            this.setProperties({ value: [] }, true);
+                            this.selectedListData = [];
+                            this.virtualSelectAll = false;
+                            if (!isNullOrUndefined(this.viewPortInfo.startIndex) && !isNullOrUndefined(this.viewPortInfo.endIndex)) {
+                                this.notify('setCurrentViewDataAsync', {
+                                    component: this.getModuleName(),
+                                    module: 'VirtualScroll'
+                                });
+                            }
                         }
-                    }
-                };
-                processBatch();
+                    };
+                    processBatch();
+                }
             }
         }
         this.checkSelectAll();
@@ -19445,8 +19737,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.updateValueState(event, this.value, this.tempValues);
                 this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
             }
-            if ((this.enableVirtualization && this.value && this.value.length > 0) || !this.enableVirtualization) {
-                this.updateHiddenElement();
+            const skipLegacyUpdateHidden = !state
+                && this.mode === 'CheckBox'
+                && this.enableVirtualization
+                && this.virtualSelectAllData
+                && this.virtualSelectAllData.length > this.getSummaryTagThreshold();
+            if (!skipLegacyUpdateHidden) {
+                if ((this.enableVirtualization && this.value && this.value.length > 0) || !this.enableVirtualization) {
+                    this.updateHiddenElement();
+                }
             }
         }
     }
@@ -19530,6 +19829,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     selectAllItems(state, event) {
         this.isSelectAllClicked = state;
+        this.wasSelectAllActive = state;
         if (isNullOrUndefined(this.list)) {
             this.selectAllAction = () => {
                 if (this.mode === 'CheckBox' && this.showSelectAll) {
@@ -19596,11 +19896,21 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 case 'dataSource':
                     this.sanitizeData();
                     if (this.mode === 'CheckBox' && this.showSelectAll) {
-                        if (!isNullOrUndefined(this.popupObj)) {
+                        if (!isNullOrUndefined(this.popupObj) && !this.isDimColumnWithCustomStyle()) {
                             this.popupObj.destroy();
                             this.popupObj = null;
                         }
                         this.renderPopup();
+                        if (this.isDimColumnWithCustomStyle() && this.isPopupOpen() && !isNullOrUndefined(this.popupObj) && this.list) {
+                            this.list.style.visibility = 'hidden';
+                            this.resetList(this.dataSource, this.fields, this.query);
+                            this.notify('selectAll', {});
+                            this.refreshSelection();
+                            if (this.wasSelectAllActive) {
+                                this.extendSelectionToNewItems();
+                            }
+                            this.list.style.visibility = '';
+                        }
                     }
                     break;
                 case 'htmlAttributes':
@@ -19714,6 +20024,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     break;
                 case 'enableSelectionOrder':
                     break;
+                case 'summaryTagCount':
+                case 'summaryTagTemplate':
+                    if (this.mode === 'CheckBox') {
+                        this.updateDelimView();
+                    }
+                    break;
                 case 'selectAllText':
                     this.notify('selectAllText', false);
                     break;
@@ -20114,9 +20430,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 const mainLiLength = this.ulElement.querySelectorAll('li.' + 'e-list-item').length;
                 const liLength = this.ulElement.querySelectorAll('li.'
                     + dropDownBaseClasses.li + '.' + HIDE_LIST).length;
-                const isFilterText = this.allowFiltering && !isNullOrUndefined(this.inputElement) &&
-                    this.inputElement.value.trim() !== '';
                 const isRemoteData = this.dataSource instanceof DataManager;
+                const isFilterText = this.allowFiltering && !isNullOrUndefined(this.inputElement) && this.inputElement.value.trim() !== '';
                 if (mainLiLength > 0 && (mainLiLength === liLength) && (liLength === this.mainData.length) &&
                     !(this.targetElement() !== '' && this.allowCustomValue) && (!isRemoteData || !isFilterText)) {
                     this.beforePopupOpen = false;
@@ -20627,6 +20942,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.value && this.value.length) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             let listItems;
+            const skipExpensiveQuery = this.mode === 'CheckBox' && this.enableVirtualization && this.value.length > this.getSummaryTagThreshold();
             if (this.enableVirtualization) {
                 const fields = !this.isPrimitiveData ? this.fields.value : '';
                 let predicate;
@@ -20662,16 +20978,57 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     });
                 }
                 else {
-                    listItems = this.executeLocalForLargeSelection(this.dataSource, this.value, {
-                        fields: this.fields,
-                        allowObjectBinding: this.allowObjectBinding,
-                        isPrimitiveData: this.isPrimitiveData
-                    });
+                    if (!skipExpensiveQuery) {
+                        listItems = this.executeLocalForLargeSelection(this.dataSource, this.value, {
+                            fields: this.fields,
+                            allowObjectBinding: this.allowObjectBinding,
+                            isPrimitiveData: this.isPrimitiveData
+                        });
+                    }
                 }
             }
             if (!(this.dataSource instanceof DataManager)) {
-                this.initialValueUpdate(listItems, true, isInitialRender);
-                this.initialUpdate();
+                if (skipExpensiveQuery && !listItems) {
+                    const ds = this.dataSource;
+                    const textMap = {};
+                    if (!this.isPrimitiveData) {
+                        const vf = (this.fields && this.fields.value) || 'value';
+                        const tf = (this.fields && this.fields.text) || 'text';
+                        for (let k = 0; k < ds.length; k++) {
+                            const it = ds[k];
+                            if (it) {
+                                const vk = getValue(vf, it);
+                                if (vk !== undefined && vk !== null) {
+                                    const tv = getValue(tf, it);
+                                    textMap[String(vk)] = tv == null ? String(vk) : String(tv);
+                                }
+                            }
+                        }
+                    }
+                    const parts = new Array(this.value.length);
+                    if (this.isPrimitiveData) {
+                        for (let i2 = 0; i2 < this.value.length; i2++) {
+                            parts[i2] = String(this.value[i2]);
+                        }
+                    }
+                    else {
+                        const fName = (this.fields && this.fields.value) || 'value';
+                        for (let i2 = 0; i2 < this.value.length; i2++) {
+                            const raw = this.allowObjectBinding
+                                ? getValue(fName, this.value[i2])
+                                : this.value[i2];
+                            const key = raw == null ? '' : String(raw);
+                            parts[i2] = textMap[key] != null ? textMap[key] : (key);
+                        }
+                    }
+                    this.setProperties({ text: parts.join(this.delimiterChar) }, true);
+                    this.updateDelimView();
+                    this.initialUpdate();
+                }
+                else {
+                    this.initialValueUpdate(listItems, true, isInitialRender);
+                    this.initialUpdate();
+                }
             }
             else {
                 this.setInitialValue = () => {
@@ -21161,6 +21518,12 @@ __decorate$5([
 __decorate$5([
     Property('Default')
 ], MultiSelect.prototype, "mode", void 0);
+__decorate$5([
+    Property(0)
+], MultiSelect.prototype, "summaryTagCount", void 0);
+__decorate$5([
+    Property('${selectedCount} items selected')
+], MultiSelect.prototype, "summaryTagTemplate", void 0);
 __decorate$5([
     Property(',')
 ], MultiSelect.prototype, "delimiterChar", void 0);
@@ -25469,8 +25832,12 @@ let Mention = class Mention extends DropDownBase {
             }
             this.isTyped = false;
             range.collapse(false);
-            rect = range.getBoundingClientRect().top === 0 ? range.startContainer.getClientRects()[0] :
-                range.getBoundingClientRect();
+            const node = range.startContainer;
+            const clientRects = node.nodeType === Node.TEXT_NODE ? node.parentElement.getClientRects()
+                : node.getClientRects();
+            rect = range.getBoundingClientRect().top === 0 ?
+                (clientRects && clientRects.length ? clientRects[0] : range.getBoundingClientRect())
+                : range.getBoundingClientRect();
         }
         let rectTop = rect.top;
         let rectLeft = rect.left;