@syncfusion/ej2-dropdowns 33.2.4 → 33.2.6

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);
                 }
@@ -5577,7 +5587,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
             else if (this.enableVirtualization && this.getModuleName() !== 'autocomplete' && !this.isFiltering()) {
                 const value = this.getItemData().value;
-                this.activeIndex = this.getIndexByValue(value);
+                this.activeIndex = !isNullOrUndefined(value) ? this.getIndexByValue(value) : this.activeIndex;
                 let element = this.findListElement(this.list, 'li', 'data-value', value);
                 this.selectedLI = element;
                 element = null;
@@ -6797,14 +6807,16 @@ let DropDownList = class DropDownList extends DropDownBase {
             if (this.enableVirtualization) {
                 this.listItemHeight = this.getListHeight();
                 this.getSkeletonCount();
+                this.skeletonCount = this.totalItemCount < (this.itemCount * 2) && ((!(this.dataSource instanceof DataManager)) ||
+                    ((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount))) ? 0 : this.skeletonCount;
                 this.updateVirtualizationProperties(this.itemCount, this.allowFiltering);
-                if (this.index !== null) {
-                    this.activeIndex = this.index + this.skeletonCount;
-                }
             }
             this.initValue();
             this.selectedValueInfo = this.viewPortInfo;
             if (this.enableVirtualization) {
+                if (this.index !== null) {
+                    this.activeIndex = this.index + this.skeletonCount;
+                }
                 this.activeIndex = this.activeIndex + this.skeletonCount;
             }
         }
@@ -13817,7 +13829,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) ?
@@ -15581,6 +15595,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();
@@ -15592,6 +15607,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);
@@ -15783,6 +15803,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) {
@@ -15797,16 +15818,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);
     }
@@ -16284,15 +16307,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);
@@ -16332,7 +16349,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);
         }
@@ -16599,6 +16616,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);
                         }
                     }
                 });
@@ -16879,6 +16901,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) {
@@ -16893,6 +16917,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.search(e);
         }
     }
+    onWheelScroll(e) {
+        this.scrollEvent = e;
+    }
     pasteHandler(event) {
         setTimeout(() => {
             this.expandTextbox();
@@ -17378,7 +17405,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)) {
@@ -18195,6 +18222,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
@@ -18506,12 +18535,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) {
@@ -18807,7 +18842,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     if (this.fields.disabled) {
                         this.removeDisabledItemsValue(this.value);
                     }
-                    this.updateVal(this.value, oldProp.value, 'value');
+                    if (this.enableVirtualization && !isNullOrUndefined(oldProp.value) && !isNullOrUndefined(newProp.value)
+                        && !this.validateValues(newProp.value, oldProp.value)) {
+                        return;
+                    }
+                    this.updateVal(this.value, oldProp.value, 'value', this.enableVirtualization);
                     this.addValidInputClass();
                     if (!this.closePopupOnSelect && this.isPopupOpen()) {
                         this.refreshPopup();
@@ -19002,8 +19041,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);
@@ -19523,6 +19562,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() {
@@ -20141,6 +20188,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.mainListCollection = null;
         this.footer = null;
         this.selectAllEventEle = null;
+        this.chipAnnouncerLiveRegion = null;
         super.destroy();
     }
 };
@@ -21014,7 +21062,6 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         this.list.classList.add('e-wrapper');
         this.list.classList.add('e-lib');
         if (this.element.tagName === 'EJS-LISTBOX') {
-            this.element.setAttribute('tabindex', '0');
             if (this.initLoad) {
                 this.element.appendChild(this.list);
             }