@syncfusion/ej2-dropdowns 33.2.3 → 33.2.5

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

@@ -928,6 +928,7 @@ let DropDownBase = class DropDownBase extends Component {
         this.isVirtualTrackHeight = false;
         this.virtualSelectAll = false;
         this.isVirtualReorder = false;
+        this.isVirtualOrder = false;
         this.incrementalQueryString = '';
         this.incrementalEndIndex = 0;
         this.incrementalStartIndex = 0;
@@ -2376,6 +2377,9 @@ let DropDownBase = class DropDownBase extends Component {
             if (this.getModuleName() === 'multiselect' && (this.virtualSelectAll && !isClearAll)) {
                 this.virtualSelectAllData = listData;
                 listData = listData.slice(this.virtualItemStartIndex, this.virtualItemEndIndex);
+                if (this.virtualSelectAllData.length < (this.itemCount * 2) && this.isCheckBoxSelection && this.isVirtualOrder) {
+                    listData = this.virtualSelectAllData;
+                }
             }
             ulElement = this.createListItems(listData, fields);
             if (this.isIncrementalRequest) {
@@ -2399,6 +2403,12 @@ let DropDownBase = class DropDownBase extends Component {
                         else {
                             virtualUlElement.appendChild(ulElement);
                         }
+                        if (this.getModuleName() === 'multiselect' && this.isCheckBoxSelection && !this.appendUncheckList && this.isVirtualOrder) {
+                            const selectedUlElement = this.list.querySelector('.e-list-parent' + '.e-reorder');
+                            if (!isNullOrUndefined(selectedUlElement)) {
+                                virtualUlElement.removeChild(selectedUlElement);
+                            }
+                        }
                     }
                     this.updateListElements(listData);
                 }
@@ -9814,6 +9824,9 @@ let DropDownTree = class DropDownTree extends Component {
             removeClass([this.popupDiv], NODATA);
             this.hideCheckAll(false);
         }
+        else {
+            this.hideCheckAll(this.treeItems.length <= 1);
+        }
         if (!this.isFilteredData) {
             this.treeDataType = this.getTreeDataType(this.treeItems, this.fields);
         }
@@ -11220,6 +11233,9 @@ let DropDownTree = class DropDownTree extends Component {
                 EventHandler.remove(element, 'mouseup', this.removeChip);
             }
         }
+        if (this.keyboardModule) {
+            this.keyboardModule.destroy();
+        }
         this.chipWrapper = null;
         this.chipCollection = null;
         this.checkAllParent = null;
@@ -13811,7 +13827,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (isCheckbox) {
                 const startindex = this.viewPortInfo.startIndex;
                 const endindex = (((startindex + this.viewPortInfo.endIndex) <= (valuecheck.length)) &&
-                    valuecheck[(startindex + this.viewPortInfo.endIndex)]) ? (startindex + this.viewPortInfo.endIndex)
+                    valuecheck[(startindex + this.viewPortInfo.endIndex)]) &&
+                    (this.dataSource instanceof DataManager && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2))
+                    ? (startindex + this.viewPortInfo.endIndex)
                     : (valuecheck.length);
                 for (let i = startindex; i < endindex; i++) {
                     const value = this.allowObjectBinding ? getValue((this.fields.value) ?
@@ -15575,6 +15593,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (!isNullOrUndefined(this.value)) {
                 this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();
             }
+            const removedChipTitle = selectedElem.getAttribute('title');
             temp = selectedElem.nextElementSibling;
             if (temp !== null) {
                 this.removeChipSelection();
@@ -15586,6 +15605,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.removeValue(currentChip, e);
             this.updateDelimeter(this.delimiterChar, e);
             this.makeTextBoxEmpty();
+            if (removedChipTitle && this.chipAnnouncerLiveRegion) {
+                const remainingCount = this.value ? this.value.length : 0;
+                const announcement = `${removedChipTitle} removed from selection ${remainingCount} items selected`;
+                this.chipAnnouncerLiveRegion.textContent = announcement;
+            }
         }
         if (this.closePopupOnSelect) {
             this.hidePopup(e);
@@ -15777,6 +15801,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             const selectedChips = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP$1 + '.' + CHIP_SELECTED);
             if (selectedChips && selectedChips.length === 1) {
                 selectedChips[0].removeAttribute('id');
+                selectedChips[0].removeAttribute('aria-hidden');
                 if (!isNullOrUndefined(this.inputElement) && this.inputElement.hasAttribute('aria-activedescendant')) {
                     this.inputElement.removeAttribute('aria-activedescendant');
                     if (!this.inputElement.hasAttribute('aria-describedby') && this.chipCollectionWrapper.id) {
@@ -15791,16 +15816,18 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         addClass([element], CHIP_SELECTED);
         if (element) {
             element.setAttribute('id', this.element.id + '_chip_item');
+            element.setAttribute('aria-hidden', 'true');
+            const chipTitle = element.getAttribute('title');
+            if (chipTitle && this.chipAnnouncerLiveRegion) {
+                const announcement = `${chipTitle} focused. Press Backspace to remove`;
+                this.chipAnnouncerLiveRegion.textContent = announcement;
+            }
             if (!isNullOrUndefined(this.inputElement) && element.id) {
                 this.inputElement.setAttribute('aria-activedescendant', element.id);
                 if (this.inputElement.hasAttribute('aria-describedby')) {
                     this.inputElement.removeAttribute('aria-describedby');
                 }
             }
-            const chipClose = element.querySelector('span.' + CHIP_CLOSE$1.split(' ')[0]);
-            if (chipClose) {
-                chipClose.removeAttribute('aria-hidden');
-            }
         }
         this.trigger('chipSelection', e);
     }
@@ -16278,15 +16305,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         const closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE$1.split(' ')[0]);
         if (Browser.isDevice) {
             for (let index = 0; index < closeElements.length; index++) {
-                closeElements[index].setAttribute('aria-hidden', 'true');
                 closeElements[index].style.display = 'none';
             }
         }
-        else {
-            for (let index = 0; index < closeElements.length; index++) {
-                closeElements[index].setAttribute('aria-hidden', 'true');
-            }
-        }
     }
     onMobileChipInteraction(e) {
         const chipElem = closest(e.target, '.' + CHIP$1);
@@ -16326,7 +16347,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         });
         let compiledString;
         const chipContent = this.createElement('span', { className: CHIP_CONTENT$1 });
-        const chipClose = this.createElement('span', { className: CHIP_CLOSE$1, attrs: { 'aria-label': 'delete', 'aria-hidden': 'true', 'tabindex': '-1' } });
+        const chipClose = this.createElement('span', { className: CHIP_CLOSE$1, attrs: { 'aria-hidden': 'true' } });
         if (this.mainData) {
             itemData = this.getDataByValue(value);
         }
@@ -16593,6 +16614,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     }, targetExitViewport: () => {
                         if (!Browser.isDevice) {
                             this.hidePopup();
+                            let previousValue = this.tempValues;
+                            if (isNullOrUndefined(previousValue)) {
+                                previousValue = [];
+                            }
+                            this.updateValueState(this.scrollEvent, this.value, previousValue);
                         }
                     }
                 });
@@ -16873,6 +16899,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         EventHandler.add(this.componentWrapper, 'mouseout', this.mouseOut, this);
         EventHandler.add(this.overAllClear, 'mousedown', this.clearAll, this);
         EventHandler.add(this.inputElement, 'paste', this.pasteHandler, this);
+        EventHandler.add(document, 'wheel', this.onWheelScroll, this);
+        EventHandler.add(document, 'scroll', this.onWheelScroll, this);
     }
     onInput(e) {
         if (this.keyDownStatus) {
@@ -16887,6 +16915,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.search(e);
         }
     }
+    onWheelScroll(e) {
+        this.scrollEvent = e;
+    }
     pasteHandler(event) {
         setTimeout(() => {
             this.expandTextbox();
@@ -17372,7 +17403,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             else {
                 this.updateDelimeter(this.delimiterChar, null, isInitialVirtualData);
             }
-            if (this.mode === 'CheckBox' && this.showSelectAll && (isNullOrUndefined(this.value) || !this.value.length)) {
+            if (this.mode === 'CheckBox' && this.showSelectAll && (isNullOrUndefined(this.value) || !this.value.length || (this.value.length !== this.listData.length))) {
                 this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });
             }
             if (this.mode === 'Box' || (this.mode === 'Default' && this.inputFocus)) {
@@ -18189,6 +18220,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!isNullOrUndefined(this.inputElement)) {
             EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);
         }
+        EventHandler.remove(document, 'wheel', this.onWheelScroll);
+        EventHandler.remove(document, 'scroll', this.onWheelScroll);
     }
     resizingWireEvent() {
         // Mouse events
@@ -18500,12 +18533,18 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.virtualSelectAllState = state;
                     this.virtualSelectAll = true;
                     this.CurrentEvent = event;
+                    if (this.mode === 'CheckBox' && this.value && Array.isArray(this.value) && this.value.length > 0 && this.enableSelectionOrder && this.targetElement().trim() === '' && this.viewPortInfo.startIndex < this.value.length) {
+                        this.isVirtualOrder = true;
+                    }
                     if (!this.virtualSelectAllData) {
                         this.resetList(this.dataSource, this.fields, new Query());
                     }
                     if (this.virtualSelectAllData) {
                         this.virtualSelectionAll(state, li, event);
                     }
+                    if (this.mode === 'CheckBox' && this.value && Array.isArray(this.value) && this.value.length > 0 && this.enableSelectionOrder && this.targetElement().trim() === '' && this.viewPortInfo.startIndex < this.value.length) {
+                        this.isVirtualOrder = false;
+                    }
                 }
                 else {
                     while (index < length && index <= 50 && index < count) {
@@ -18801,7 +18840,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     if (this.fields.disabled) {
                         this.removeDisabledItemsValue(this.value);
                     }
-                    this.updateVal(this.value, oldProp.value, 'value');
+                    this.updateVal(this.value, oldProp.value, 'value', this.enableVirtualization);
                     this.addValidInputClass();
                     if (!this.closePopupOnSelect && this.isPopupOpen()) {
                         this.refreshPopup();
@@ -18996,8 +19035,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.updateActionList(ulElement, list, event);
         });
     }
-    updateVal(newProp, oldProp, prop) {
-        if (!this.list) {
+    updateVal(newProp, oldProp, prop, isVirtual = false) {
+        if (!this.list || (isVirtual && prop === 'value' && ((isNullOrUndefined(oldProp) && !isNullOrUndefined(newProp)) || (!isNullOrUndefined(oldProp) && isNullOrUndefined(newProp)) || (this.validateValues(newProp, oldProp) && newProp.length > 0)))) {
             this.onLoadSelect();
             if (this.enableVirtualization) {
                 this.setProperties({ text: '' }, true);
@@ -19517,6 +19556,14 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
         }
+        if (!this.chipAnnouncerLiveRegion) {
+            this.chipAnnouncerLiveRegion = this.createElement('div', {
+                attrs: { 'aria-live': 'polite', 'aria-atomic': 'true', 'class': 'e-chip-announcer' }
+            });
+            this.chipAnnouncerLiveRegion.style.position = 'absolute';
+            this.chipAnnouncerLiveRegion.style.left = '-10000px';
+            this.componentWrapper.appendChild(this.chipAnnouncerLiveRegion);
+        }
         this.renderComplete();
     }
     setResize() {
@@ -19766,7 +19813,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     });
                 }
                 else {
-                    listItems = new DataManager(this.dataSource).executeLocal(new Query().where(predicate));
+                    listItems = this.executeLocalForLargeSelection(this.dataSource, this.value, {
+                        fields: this.fields,
+                        allowObjectBinding: this.allowObjectBinding,
+                        isPrimitiveData: this.isPrimitiveData
+                    });
                 }
             }
             if (!(this.dataSource instanceof DataManager)) {
@@ -19795,6 +19846,55 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.element.setAttribute('data-initial-value', this.text);
         }
     }
+    executeLocalForLargeSelection(dataSource, values, options) {
+        if (!dataSource || !dataSource.length || !values || !values.length) {
+            return [];
+        }
+        const { fields, allowObjectBinding, isPrimitiveData, predicateChunkSize = 100 } = options;
+        if (values.length === dataSource.length) {
+            return dataSource.slice();
+        }
+        const field = isPrimitiveData ? '' : fields.value;
+        const allResults = [];
+        let predicate = null;
+        let count = 0;
+        const flushPredicate = () => {
+            if (!predicate) {
+                return;
+            }
+            const query = new Query().where(predicate);
+            const result = new DataManager(dataSource).executeLocal(query);
+            allResults.push(...result);
+            predicate = null;
+            count = 0;
+        };
+        for (let i = 0; i < values.length; i++) {
+            const value = allowObjectBinding
+                ? getValue(fields.value || '', values[i])
+                : values[i];
+            predicate = predicate
+                ? predicate.or(field, 'equal', value)
+                : new Predicate(field, 'equal', value);
+            count++;
+            if (count === predicateChunkSize) {
+                flushPredicate();
+            }
+        }
+        flushPredicate();
+        const uniqueMap = {};
+        const resultArray = [];
+        for (let i = 0; i < allResults.length; i++) {
+            const item = allResults[i];
+            const key = isPrimitiveData
+                ? item.toString()
+                : getValue(fields.value, item);
+            if (!uniqueMap.hasOwnProperty(key)) {
+                uniqueMap[key] = item;
+                resultArray.push(item);
+            }
+        }
+        return resultArray;
+    }
     checkAutoFocus() {
         if (this.element.hasAttribute('autofocus')) {
             this.inputElement.focus();
@@ -20082,6 +20182,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.mainListCollection = null;
         this.footer = null;
         this.selectAllEventEle = null;
+        this.chipAnnouncerLiveRegion = null;
         super.destroy();
     }
 };
@@ -23968,7 +24069,7 @@ let Mention = class Mention extends DropDownBase {
         }
         else if (this.allowSpaces && this.queryString !== '' && currentRange && currentRange.trim() !== '' && currentRange.replace('\u00a0', ' ').lastIndexOf(' ') < currentRange.length - 1 &&
             e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 8 && (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) ||
-            (this.liCollections && this.liCollections.length > 0))) {
+            ((this.liCollections && this.liCollections.length > 0) || (this.isPopupOpen && this.list && this.list.classList.contains('e-nodata'))))) {
             this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
             this.searchLists(e);
         }