@syncfusion/ej2-dropdowns 34.2.8 → 35.1.37

package/src/multi-select/multi-select.js

@@ -69,6 +69,7 @@ var FILTERPARENT = 'e-filter-parent';
 var CUSTOM_WIDTH = 'e-search-custom-width';
 var FILTERINPUT = 'e-input-filter';
 var RESIZE_ICON = 'e-resizer-right e-icons';
+var SUMMARY_TAG_VIEW = 'e-delim-summary';
 /**
  * The Multiselect allows the user to pick a more than one value from list of predefined values.
  * ```html
@@ -98,6 +99,7 @@ var MultiSelect = /** @class */ (function (_super) {
      */
     function MultiSelect(option, element) {
         var _this = _super.call(this, option, element) || this;
+        _this.wasSelectAllActive = false;
         _this.clearIconWidth = 0;
         _this.previousFilterText = '';
         _this.storedSelectAllHeight = 0;
@@ -107,6 +109,7 @@ var MultiSelect = /** @class */ (function (_super) {
         _this.isFilterPrevented = false;
         _this.isFilteringAction = false;
         _this.isPropertyChanged = false;
+        _this.uncheckedValues = [];
         _this.isValidKey = false;
         _this.selectAllEventData = [];
         _this.selectAllEventEle = [];
@@ -554,6 +557,9 @@ var MultiSelect = /** @class */ (function (_super) {
                         (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
                     var predicateBatches = [];
                     for (var batchStart = startindex; batchStart < endindex; batchStart += BATCH_SIZE) {
@@ -905,6 +911,56 @@ var MultiSelect = /** @class */ (function (_super) {
         this.checkSelectAll();
         this.checkMaxSelection();
     };
+    MultiSelect.prototype.extendSelectionToNewItems = function () {
+        if (!this.list) {
+            return;
+        }
+        var 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 = [];
+        }
+        var currentValues = this.value;
+        var seen = {};
+        for (var i = 0; i < currentValues.length; i++) {
+            seen[String(currentValues[i])] = true;
+        }
+        var newValues = currentValues.slice();
+        var changed = false;
+        for (var i = 0; i < unselected.length; i++) {
+            var li = unselected[i];
+            var rawValue = li.getAttribute('data-value');
+            if (rawValue === null || seen[rawValue]) {
+                continue;
+            }
+            var 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'
+        });
+    };
     MultiSelect.prototype.hideGroupItem = function (value) {
         var element;
         var element1;
@@ -2437,7 +2493,8 @@ var MultiSelect = /** @class */ (function (_super) {
             else {
                 var listUl = this.list && this.list.querySelector('ul');
                 var 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);
@@ -2831,6 +2888,10 @@ var MultiSelect = /** @class */ (function (_super) {
             });
         }
     };
+    MultiSelect.prototype.isDimColumnWithCustomStyle = function () {
+        return this.overAllWrapper.classList.contains('b-dbrd-dim-column-ms') &&
+            this.overAllWrapper.classList.contains('e-dbrd-cstyle');
+    };
     MultiSelect.prototype.removeValue = function (value, eve, length, isClearAll) {
         var _this = this;
         var index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) :
@@ -2865,6 +2926,38 @@ var MultiSelect = /** @class */ (function (_super) {
                     _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())) {
+                        var valueField_1 = _this.fields && _this.fields.value ? _this.fields.value : 'value';
+                        var dataSourceArray = _this.dataSource;
+                        var fullItem = void 0;
+                        var dataSourceIndex = -1;
+                        for (var i = 0; i < dataSourceArray.length; i++) {
+                            var item = dataSourceArray[i];
+                            if (getValue(valueField_1, item) === _this.currentRemoveValue) {
+                                fullItem = item;
+                                dataSourceIndex = i;
+                                break;
+                            }
+                        }
+                        if (fullItem && dataSourceIndex !== -1) {
+                            var unchecked = _this.uncheckedValues;
+                            _this.uncheckedValues = unchecked.concat([fullItem]);
+                            var indexMap_1 = {};
+                            for (var j = 0; j < dataSourceArray.length; j++) {
+                                var mapItem = dataSourceArray[j];
+                                indexMap_1[getValue(valueField_1, mapItem)] = j;
+                            }
+                            _this.uncheckedValues.sort(function (a, b) {
+                                var aIdx = indexMap_1[getValue(valueField_1, a)];
+                                var bIdx = indexMap_1[getValue(valueField_1, b)];
+                                if (aIdx === bIdx) {
+                                    return 0;
+                                }
+                                return aIdx - bIdx;
+                            });
+                        }
+                    }
                     var removeVal = _this.value.slice(0);
                     removeVal.splice(index, 1);
                     if (_this.enableVirtualization && _this.selectedListData) {
@@ -4329,7 +4422,8 @@ var MultiSelect = /** @class */ (function (_super) {
                         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;
                         }
@@ -5005,6 +5099,53 @@ var MultiSelect = /** @class */ (function (_super) {
             wrapperType.innerText = wrapperData;
         }
     };
+    MultiSelect.prototype.getSummaryTagThreshold = function () {
+        return this.summaryTagCount && this.summaryTagCount > 0 ? this.summaryTagCount : 1000;
+    };
+    MultiSelect.prototype.getSummaryTagText = function () {
+        var selectedCount = this.value ? this.value.length : 0;
+        var totalCount = this.totalItemCount ? this.totalItemCount : 0;
+        if (this.summaryTagTemplate && typeof this.summaryTagTemplate === 'string') {
+            var 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());
+        }
+        var l10nLocale = { summaryTagTemplate: '${selectedCount} items selected' };
+        var summaryTagTemplate = this.l10n ? this.l10n.getConstant('summaryTagTemplate') :
+            new L10n(this.getLocaleName(), l10nLocale, this.locale).getConstant('summaryTagTemplate');
+        return summaryTagTemplate.replace(/\$\{selectedCount\}/g, selectedCount.toString());
+    };
+    MultiSelect.prototype.applySummaryTagWidth = function () {
+        if (!this.viewWrapper || !this.componentWrapper) {
+            return;
+        }
+        var componentStyle = window.getComputedStyle(this.componentWrapper);
+        var componentWidth = this.componentWrapper.clientWidth;
+        var horizontalPadding = (parseFloat(componentStyle.paddingLeft) || 0) +
+            (parseFloat(componentStyle.paddingRight) || 0);
+        var available = componentWidth - horizontalPadding;
+        var rightIcons = 0;
+        if (this.showClearButton && this.overAllClear) {
+            var display = this.overAllClear.style.display;
+            this.overAllClear.style.display = 'block';
+            rightIcons += this.overAllClear.offsetWidth;
+            this.overAllClear.style.display = display;
+        }
+        if (this.showDropDownIcon && this.dropIcon) {
+            var dropStyle = window.getComputedStyle(this.dropIcon);
+            rightIcons += this.dropIcon.offsetWidth + (parseFloat(dropStyle.marginRight) || 0);
+        }
+        var maxWidth = Math.max(0, available - rightIcons - 8);
+        this.viewWrapper.style.width = maxWidth + 'px';
+    };
     MultiSelect.prototype.updateDelimView = function () {
         if (this.delimiterWrapper) {
             this.hideDelimWrapper();
@@ -5018,6 +5159,17 @@ var MultiSelect = /** @class */ (function (_super) {
             this.viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER);
         }
         if (this.value && this.value.length) {
+            if (this.mode === 'CheckBox' && this.value.length > this.getSummaryTagThreshold()) {
+                var 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);
+            }
             var data = '';
             var temp = void 0;
             var tempData = void 0;
@@ -5506,102 +5658,227 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         else {
             if (this.virtualSelectAllData && this.virtualSelectAllData.length > 0) {
-                var dataArray_1 = this.virtualSelectAllData;
-                var batchSize_1 = 500;
-                var currentIndex_1 = 0;
-                this.isProcessingVirtualSelectAll = true;
-                createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
-                showSpinner(this.filterParent);
-                this.preventKeyboardInteraction = true;
-                var contentEl_2 = null;
-                var selectAllEl_2 = null;
-                var inputEl_2 = null;
-                if (this.popupObj && this.popupObj.element && this.filterParent) {
-                    contentEl_2 = this.popupObj.element.querySelector('.e-content');
-                    selectAllEl_2 = this.popupObj.element.querySelector('.e-selectall-parent');
-                    inputEl_2 = this.filterParent.querySelector('.e-input');
-                    [contentEl_2, selectAllEl_2, this.filterParent].forEach(function (el) {
-                        if (el) {
-                            el.style.opacity = '0.5';
-                        }
-                    });
-                    if (inputEl_2) {
-                        inputEl_2.setAttribute('readonly', 'true');
-                    }
-                    this.filterParent.style.cursor = 'progress';
-                    [contentEl_2, selectAllEl_2].forEach(function (el) {
-                        if (!el) {
-                            return;
-                        }
-                        el.style.pointerEvents = 'none';
-                        el.style.userSelect = 'none';
-                        el.style.touchAction = 'none';
-                        if (el === contentEl_2) {
-                            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;
+                    var contentEl_2 = null;
+                    var selectAllEl_2 = null;
+                    var inputEl_2 = null;
+                    if (this.popupObj && this.popupObj.element && this.filterParent) {
+                        contentEl_2 = this.popupObj.element.querySelector('.e-content');
+                        selectAllEl_2 = this.popupObj.element.querySelector('.e-selectall-parent');
+                        inputEl_2 = this.filterParent.querySelector('.e-input');
+                        [contentEl_2, selectAllEl_2, this.filterParent].forEach(function (el) {
+                            if (el) {
+                                el.style.opacity = '0.5';
+                            }
+                        });
+                        if (inputEl_2) {
+                            inputEl_2.setAttribute('readonly', 'true');
                         }
-                    });
-                }
-                var processBatch_1 = function () {
-                    var endIndex = Math.min(currentIndex_1 + batchSize_1, dataArray_1.length);
-                    var batch = dataArray_1.slice(currentIndex_1, endIndex);
-                    // Use map on the batch
-                    batch.map(function (obj) {
-                        _this.virtualSelectAll = true;
-                        // eslint-disable-next-line security/detect-object-injection
-                        _this.removeValue(_this.value[index], event, _this.value.length - index);
-                    });
-                    currentIndex_1 = endIndex;
-                    if (currentIndex_1 < dataArray_1.length) {
-                        requestAnimationFrame(processBatch_1);
+                        this.filterParent.style.cursor = 'progress';
+                        [contentEl_2, selectAllEl_2].forEach(function (el) {
+                            if (!el) {
+                                return;
+                            }
+                            el.style.pointerEvents = 'none';
+                            el.style.userSelect = 'none';
+                            el.style.touchAction = 'none';
+                            if (el === contentEl_2) {
+                                el.style.overflow = 'hidden';
+                            }
+                        });
                     }
-                    else {
-                        // All batches completed
-                        _this.isProcessingVirtualSelectAll = false;
-                        _this.preventKeyboardInteraction = false;
-                        hideSpinner(_this.filterParent);
-                        if (_this.popupObj && _this.filterParent) {
-                            [contentEl_2, selectAllEl_2, _this.filterParent].forEach(function (el) {
-                                if (el) {
-                                    el.style.opacity = '';
-                                }
+                    setTimeout(function () {
+                        requestAnimationFrame(function () {
+                            _this.virtualSelectAll = false;
+                            _this.selectedListData = [];
+                            if (_this.chipCollectionWrapper) {
+                                _this.chipCollectionWrapper.innerHTML = '';
+                            }
+                            if (_this.list) {
+                                var selectedItems = _this.list.querySelectorAll('li.' + dropDownBaseClasses.li + '.e-active');
+                                removeClass(selectedItems, 'e-active');
+                                var checkedItems = _this.list.querySelectorAll('li.' + dropDownBaseClasses.li + '[aria-selected="true"]');
+                                checkedItems.forEach(function (el) { return el.setAttribute('aria-selected', 'false'); });
+                            }
+                            if (_this.mainList) {
+                                var mainSelected = _this.mainList.querySelectorAll('li.' + dropDownBaseClasses.li + '.e-active');
+                                removeClass(mainSelected, 'e-active');
+                                var mainChecked = _this.mainList.querySelectorAll('li.' + dropDownBaseClasses.li + '[aria-selected="true"]');
+                                mainChecked.forEach(function (el) { return el.setAttribute('aria-selected', 'false'); });
+                            }
+                            if (_this.list) {
+                                var disabledItems = _this.list.querySelectorAll('li.' + dropDownBaseClasses.li + '.e-disable');
+                                removeClass(disabledItems, 'e-disable');
+                            }
+                            if (_this.mainList) {
+                                var 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_2) {
-                                contentEl_2.style.pointerEvents = 'auto';
-                                contentEl_2.style.userSelect = 'auto';
-                                contentEl_2.style.touchAction = 'auto';
-                                contentEl_2.style.overflow = 'auto';
+                            var 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_2) {
-                                selectAllEl_2.style.pointerEvents = 'auto';
-                                selectAllEl_2.style.userSelect = 'auto';
-                                selectAllEl_2.style.touchAction = 'auto';
+                            else {
+                                _this.updateValueState(event, _this.value, _this.tempValues);
+                                _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
                             }
-                            if (inputEl_2) {
-                                inputEl_2.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_2, selectAllEl_2, _this.filterParent].forEach(function (el) {
+                                    if (el) {
+                                        el.style.opacity = '';
+                                    }
+                                });
+                                if (contentEl_2) {
+                                    contentEl_2.style.pointerEvents = 'auto';
+                                    contentEl_2.style.userSelect = 'auto';
+                                    contentEl_2.style.touchAction = 'auto';
+                                    contentEl_2.style.overflow = 'auto';
+                                }
+                                if (selectAllEl_2) {
+                                    selectAllEl_2.style.pointerEvents = 'auto';
+                                    selectAllEl_2.style.userSelect = 'auto';
+                                    selectAllEl_2.style.touchAction = 'auto';
+                                }
+                                if (inputEl_2) {
+                                    inputEl_2.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 {
+                    var dataArray_1 = this.virtualSelectAllData;
+                    var batchSize_1 = 500;
+                    var currentIndex_1 = 0;
+                    this.isProcessingVirtualSelectAll = true;
+                    createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
+                    showSpinner(this.filterParent);
+                    this.preventKeyboardInteraction = true;
+                    var contentEl_3 = null;
+                    var selectAllEl_3 = null;
+                    var inputEl_3 = null;
+                    if (this.popupObj && this.popupObj.element && this.filterParent) {
+                        contentEl_3 = this.popupObj.element.querySelector('.e-content');
+                        selectAllEl_3 = this.popupObj.element.querySelector('.e-selectall-parent');
+                        inputEl_3 = this.filterParent.querySelector('.e-input');
+                        [contentEl_3, selectAllEl_3, this.filterParent].forEach(function (el) {
+                            if (el) {
+                                el.style.opacity = '0.5';
+                            }
+                        });
+                        if (inputEl_3) {
+                            inputEl_3.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_3, selectAllEl_3].forEach(function (el) {
+                            if (!el) {
+                                return;
+                            }
+                            el.style.pointerEvents = 'none';
+                            el.style.userSelect = 'none';
+                            el.style.touchAction = 'none';
+                            if (el === contentEl_3) {
+                                el.style.overflow = 'hidden';
+                            }
+                        });
+                    }
+                    var processBatch_1 = function () {
+                        var endIndex = Math.min(currentIndex_1 + batchSize_1, dataArray_1.length);
+                        var batch = dataArray_1.slice(currentIndex_1, endIndex);
+                        // Use map on the batch
+                        batch.map(function (obj) {
+                            _this.virtualSelectAll = true;
+                            // eslint-disable-next-line security/detect-object-injection
+                            _this.removeValue(_this.value[index], event, _this.value.length - index);
+                        });
+                        currentIndex_1 = endIndex;
+                        if (currentIndex_1 < dataArray_1.length) {
+                            requestAnimationFrame(processBatch_1);
                         }
-                        _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_3, selectAllEl_3, _this.filterParent].forEach(function (el) {
+                                    if (el) {
+                                        el.style.opacity = '';
+                                    }
+                                });
+                                if (contentEl_3) {
+                                    contentEl_3.style.pointerEvents = 'auto';
+                                    contentEl_3.style.userSelect = 'auto';
+                                    contentEl_3.style.touchAction = 'auto';
+                                    contentEl_3.style.overflow = 'auto';
+                                }
+                                if (selectAllEl_3) {
+                                    selectAllEl_3.style.pointerEvents = 'auto';
+                                    selectAllEl_3.style.userSelect = 'auto';
+                                    selectAllEl_3.style.touchAction = 'auto';
+                                }
+                                if (inputEl_3) {
+                                    inputEl_3.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_1();
+                    };
+                    processBatch_1();
+                }
             }
         }
         this.checkSelectAll();
@@ -5669,30 +5946,30 @@ var MultiSelect = /** @class */ (function (_super) {
                         createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
                         showSpinner(this.filterParent);
                         this.preventKeyboardInteraction = true;
-                        var contentEl_3 = null;
-                        var selectAllEl_3 = null;
-                        var inputEl_3 = null;
+                        var contentEl_4 = null;
+                        var selectAllEl_4 = null;
+                        var inputEl_4 = null;
                         if (this.popupObj && this.popupObj.element && this.filterParent) {
-                            contentEl_3 = this.popupObj.element.querySelector('.e-content');
-                            selectAllEl_3 = this.popupObj.element.querySelector('.e-selectall-parent');
-                            inputEl_3 = this.filterParent.querySelector('.e-input');
-                            [contentEl_3, selectAllEl_3, this.filterParent].forEach(function (el) {
+                            contentEl_4 = this.popupObj.element.querySelector('.e-content');
+                            selectAllEl_4 = this.popupObj.element.querySelector('.e-selectall-parent');
+                            inputEl_4 = this.filterParent.querySelector('.e-input');
+                            [contentEl_4, selectAllEl_4, this.filterParent].forEach(function (el) {
                                 if (el) {
                                     el.style.opacity = '0.5';
                                 }
                             });
-                            if (inputEl_3) {
-                                inputEl_3.setAttribute('readonly', 'true');
+                            if (inputEl_4) {
+                                inputEl_4.setAttribute('readonly', 'true');
                             }
                             this.filterParent.style.cursor = 'progress';
-                            [contentEl_3, selectAllEl_3].forEach(function (el) {
+                            [contentEl_4, selectAllEl_4].forEach(function (el) {
                                 if (!el) {
                                     return;
                                 }
                                 el.style.pointerEvents = 'none';
                                 el.style.userSelect = 'none';
                                 el.style.touchAction = 'none';
-                                if (el === contentEl_3) {
+                                if (el === contentEl_4) {
                                     el.style.overflow = 'hidden';
                                 }
                             });
@@ -5724,24 +6001,24 @@ var MultiSelect = /** @class */ (function (_super) {
                                     hideSpinner(this.filterParent);
                                     this.preventKeyboardInteraction = false;
                                     if (this.popupObj && this.filterParent) {
-                                        [contentEl_3, selectAllEl_3, this.filterParent].forEach(function (el) {
+                                        [contentEl_4, selectAllEl_4, this.filterParent].forEach(function (el) {
                                             if (el) {
                                                 el.style.opacity = '';
                                             }
                                         });
-                                        if (contentEl_3) {
-                                            contentEl_3.style.pointerEvents = 'auto';
-                                            contentEl_3.style.userSelect = 'auto';
-                                            contentEl_3.style.touchAction = 'auto';
-                                            contentEl_3.style.overflow = 'auto';
+                                        if (contentEl_4) {
+                                            contentEl_4.style.pointerEvents = 'auto';
+                                            contentEl_4.style.userSelect = 'auto';
+                                            contentEl_4.style.touchAction = 'auto';
+                                            contentEl_4.style.overflow = 'auto';
                                         }
-                                        if (selectAllEl_3) {
-                                            selectAllEl_3.style.pointerEvents = 'auto';
-                                            selectAllEl_3.style.userSelect = 'auto';
-                                            selectAllEl_3.style.touchAction = 'auto';
+                                        if (selectAllEl_4) {
+                                            selectAllEl_4.style.pointerEvents = 'auto';
+                                            selectAllEl_4.style.userSelect = 'auto';
+                                            selectAllEl_4.style.touchAction = 'auto';
                                         }
-                                        if (inputEl_3) {
-                                            inputEl_3.removeAttribute('readonly');
+                                        if (inputEl_4) {
+                                            inputEl_4.removeAttribute('readonly');
                                         }
                                         this.filterParent.style.cursor = '';
                                     }
@@ -5819,8 +6096,15 @@ var MultiSelect = /** @class */ (function (_super) {
                 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();
+            var 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();
+                }
             }
         }
     };
@@ -5906,6 +6190,7 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.selectAllItems = function (state, event) {
         var _this = this;
         this.isSelectAllClicked = state;
+        this.wasSelectAllActive = state;
         if (isNullOrUndefined(this.list)) {
             this.selectAllAction = function () {
                 if (_this.mode === 'CheckBox' && _this.showSelectAll) {
@@ -5973,11 +6258,21 @@ var MultiSelect = /** @class */ (function (_super) {
                 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':
@@ -6091,6 +6386,12 @@ var MultiSelect = /** @class */ (function (_super) {
                     break;
                 case 'enableSelectionOrder':
                     break;
+                case 'summaryTagCount':
+                case 'summaryTagTemplate':
+                    if (this.mode === 'CheckBox') {
+                        this.updateDelimView();
+                    }
+                    break;
                 case 'selectAllText':
                     this.notify('selectAllText', false);
                     break;
@@ -6496,9 +6797,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 var mainLiLength = _this.ulElement.querySelectorAll('li.' + 'e-list-item').length;
                 var liLength = _this.ulElement.querySelectorAll('li.'
                     + dropDownBaseClasses.li + '.' + HIDE_LIST).length;
-                var isFilterText = _this.allowFiltering && !isNullOrUndefined(_this.inputElement) &&
-                    _this.inputElement.value.trim() !== '';
                 var isRemoteData = _this.dataSource instanceof DataManager;
+                var 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;
@@ -7013,6 +7313,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.value && this.value.length) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var listItems_3;
+            var skipExpensiveQuery = this.mode === 'CheckBox' && this.enableVirtualization && this.value.length > this.getSummaryTagThreshold();
             if (this.enableVirtualization) {
                 var fields = !this.isPrimitiveData ? this.fields.value : '';
                 var predicate = void 0;
@@ -7048,16 +7349,57 @@ var MultiSelect = /** @class */ (function (_super) {
                     });
                 }
                 else {
-                    listItems_3 = this.executeLocalForLargeSelection(this.dataSource, this.value, {
-                        fields: this.fields,
-                        allowObjectBinding: this.allowObjectBinding,
-                        isPrimitiveData: this.isPrimitiveData
-                    });
+                    if (!skipExpensiveQuery) {
+                        listItems_3 = this.executeLocalForLargeSelection(this.dataSource, this.value, {
+                            fields: this.fields,
+                            allowObjectBinding: this.allowObjectBinding,
+                            isPrimitiveData: this.isPrimitiveData
+                        });
+                    }
                 }
             }
             if (!(this.dataSource instanceof DataManager)) {
-                this.initialValueUpdate(listItems_3, true, isInitialRender);
-                this.initialUpdate();
+                if (skipExpensiveQuery && !listItems_3) {
+                    var ds = this.dataSource;
+                    var textMap = {};
+                    if (!this.isPrimitiveData) {
+                        var vf = (this.fields && this.fields.value) || 'value';
+                        var tf = (this.fields && this.fields.text) || 'text';
+                        for (var k = 0; k < ds.length; k++) {
+                            var it_1 = ds[k];
+                            if (it_1) {
+                                var vk = getValue(vf, it_1);
+                                if (vk !== undefined && vk !== null) {
+                                    var tv = getValue(tf, it_1);
+                                    textMap[String(vk)] = tv == null ? String(vk) : String(tv);
+                                }
+                            }
+                        }
+                    }
+                    var parts = new Array(this.value.length);
+                    if (this.isPrimitiveData) {
+                        for (var i2 = 0; i2 < this.value.length; i2++) {
+                            parts[i2] = String(this.value[i2]);
+                        }
+                    }
+                    else {
+                        var fName = (this.fields && this.fields.value) || 'value';
+                        for (var i2 = 0; i2 < this.value.length; i2++) {
+                            var raw = this.allowObjectBinding
+                                ? getValue(fName, this.value[i2])
+                                : this.value[i2];
+                            var 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_3, true, isInitialRender);
+                    this.initialUpdate();
+                }
             }
             else {
                 this.setInitialValue = function () {
@@ -7547,6 +7889,12 @@ var MultiSelect = /** @class */ (function (_super) {
     __decorate([
         Property('Default')
     ], MultiSelect.prototype, "mode", void 0);
+    __decorate([
+        Property(0)
+    ], MultiSelect.prototype, "summaryTagCount", void 0);
+    __decorate([
+        Property('${selectedCount} items selected')
+    ], MultiSelect.prototype, "summaryTagTemplate", void 0);
     __decorate([
         Property(',')
     ], MultiSelect.prototype, "delimiterChar", void 0);