@syncfusion/ej2-dropdowns 30.1.40 → 30.1.42

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

@@ -367,7 +367,7 @@ class VirtualScroll {
         if (this.component === 'combobox') {
             let totalData = 0;
             if (this.parent.dataSource instanceof DataManager) {
-                totalData = this.parent.dataSource.dataSource.json.length;
+                totalData = this.parent.remoteDataCount;
             }
             else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -687,6 +687,7 @@ class VirtualScroll {
                 this.parent.isVirtualScrolling = true;
                 setTimeout(() => {
                     this.parent.pageCount = this.parent.getPageCount();
+                    this.parent.isRequesting = false;
                     this.virtualScrollRefreshAsync().then(() => {
                         if (this.parent.popupObj) {
                             this.parent.list = this.parent.popupObj.element.querySelector('.' + 'e-content') || select('.' + 'e-content');
@@ -1505,11 +1506,12 @@ let DropDownBase = class DropDownBase extends Component {
                             this.emptyDataRequest(fields);
                             return;
                         }
-                        eventArgs.data.executeQuery(this.getQuery(eventArgs.query)).then((e) => {
+                        const query = this.getQuery(eventArgs.query);
+                        eventArgs.data.executeQuery(query).then((e) => {
                             this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
                             let isReOrder = true;
                             if (!this.virtualSelectAll) {
-                                const newQuery = this.getQuery(eventArgs.query);
+                                const newQuery = query.clone();
                                 for (let queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
                                     if (newQuery.queries[queryElements].fn === 'onWhere') {
                                         isWhereExist = true;
@@ -1564,10 +1566,15 @@ let DropDownBase = class DropDownBase extends Component {
                                     this.totalItemCount = !this.virtualSelectAll ? e.count : this.totalItemCount;
                                     ulElement = this.renderItems(listItems, fields);
                                     this.appendUncheckList = false;
+                                    this.isUpdateGroupTemplate = false;
                                     this.onActionComplete(ulElement, listItems, e);
                                     if (this.groupTemplate) {
+                                        if (this.isAngular && this.getModuleName() === 'multiselect') {
+                                            this.updateGroupHeaderItems(ulElement);
+                                        }
                                         this.renderGroupTemplate(ulElement);
                                     }
+                                    this.isUpdateGroupTemplate = true;
                                     this.isRequested = false;
                                     this.bindChildItems(listItems, ulElement, fields, e);
                                     if (this.getInitialData) {
@@ -1670,10 +1677,15 @@ let DropDownBase = class DropDownBase extends Component {
                             }
                             if (!localDataArgs.cancel) {
                                 ulElement = this.renderItems(localDataArgs.result, fields);
+                                this.isUpdateGroupTemplate = false;
                                 this.onActionComplete(ulElement, localDataArgs.result, event);
                                 if (this.groupTemplate) {
+                                    if (this.isAngular && this.getModuleName() === 'multiselect') {
+                                        this.updateGroupHeaderItems(ulElement);
+                                    }
                                     this.renderGroupTemplate(ulElement);
                                 }
+                                this.isUpdateGroupTemplate = true;
                                 this.bindChildItems(localDataArgs.result, ulElement, fields);
                                 if (this.getInitialData) {
                                     this.getInitialData = false;
@@ -1692,6 +1704,20 @@ let DropDownBase = class DropDownBase extends Component {
             });
         }
     }
+    updateGroupHeaderItems(ulElement) {
+        const headerElements = ulElement.querySelectorAll('.' + dropDownBaseClasses.group);
+        const clonedHeaders = [];
+        for (let i = 0; i < headerElements.length; i++) {
+            clonedHeaders.push(headerElements[i].cloneNode ? headerElements[i].cloneNode(true) :
+                headerElements[i]);
+        }
+        if (!this.isFilterAction) {
+            this.groupHeaderItems = clonedHeaders;
+        }
+        else {
+            this.fiteredGroupHeaderItems = clonedHeaders;
+        }
+    }
     handleVirtualKeyboardActions(e, pageCount) {
         // Used this method in component side.
     }
@@ -1826,6 +1852,21 @@ let DropDownBase = class DropDownBase extends Component {
         if (!isNullOrUndefined(this.list)) {
             if (!this.isVirtualizationEnabled) {
                 this.list.innerHTML = '';
+                if (this.isUpdateGroupTemplate && this.isAngular && this.groupTemplate && this.getModuleName() === 'multiselect') {
+                    const headerItems = ulElement.querySelectorAll('.' + dropDownBaseClasses.group);
+                    if (headerItems.length > 0 && this.groupHeaderItems.length > 0) {
+                        const groupHeaderMap = {};
+                        for (let i = 0; i < this.groupHeaderItems.length; i++) {
+                            groupHeaderMap[this.groupHeaderItems[i].id] = this.groupHeaderItems[i].innerHTML;
+                        }
+                        for (let i = 0; i < headerItems.length; i++) {
+                            if (Object.prototype.hasOwnProperty.call(groupHeaderMap, headerItems[i].id)) {
+                                headerItems[i].innerHTML = groupHeaderMap[headerItems[i].id];
+                            }
+                        }
+                    }
+                    this.renderGroupTemplate(ulElement);
+                }
                 this.list.appendChild(ulElement);
                 this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
                 this.ulElement = this.list.querySelector('ul');
@@ -1920,7 +1961,9 @@ let DropDownBase = class DropDownBase extends Component {
         if (this.fields.groupBy !== null && this.dataSource || this.element.querySelector('.' + dropDownBaseClasses.group)) {
             const dataSource = this.dataSource;
             const option = { groupTemplateID: this.groupTemplateId, isStringTemplate: this.isStringTemplate };
-            const headerItems = listEle.querySelectorAll('.' + dropDownBaseClasses.group);
+            const headerItems = this.isAngular && this.getModuleName() === 'multiselect' && !isNullOrUndefined(listEle) &&
+                listEle.classList.contains(dropDownBaseClasses.fixedHead) ? [listEle] :
+                listEle.querySelectorAll('.' + dropDownBaseClasses.group);
             const groupcheck = this.templateCompiler(this.groupTemplate);
             if (typeof this.groupTemplate !== 'function' && groupcheck) {
                 const groupValue = select(this.groupTemplate, document).innerHTML.trim();
@@ -2055,10 +2098,38 @@ let DropDownBase = class DropDownBase extends Component {
             return false;
         }
     }
+    updateFixedGroupTemplateHader(element) {
+        const groupData = element.cloneNode ? element.cloneNode(true) : element;
+        let isGroupDataUpdated = false;
+        if (this.groupHeaderItems && this.groupHeaderItems.length > 0) {
+            for (let i = 0; i < this.groupHeaderItems.length; i++) {
+                if (groupData.id === this.groupHeaderItems[i].id) {
+                    groupData.innerHTML = this.groupHeaderItems[i].innerHTML;
+                    isGroupDataUpdated = true;
+                    break;
+                }
+            }
+        }
+        if (!isGroupDataUpdated && this.fiteredGroupHeaderItems && this.fiteredGroupHeaderItems.length > 0) {
+            for (let i = 0; i < this.fiteredGroupHeaderItems.length; i++) {
+                if (groupData.id === this.fiteredGroupHeaderItems[i].id) {
+                    groupData.innerHTML = this.fiteredGroupHeaderItems[i].innerHTML;
+                    break;
+                }
+            }
+        }
+        this.fixedHeaderElement.innerHTML = groupData.innerHTML;
+        this.renderGroupTemplate(this.fixedHeaderElement);
+    }
     updateGroupFixedHeader(element, target) {
         if (this.fixedHeaderElement) {
             if (!isNullOrUndefined(element.innerHTML)) {
-                this.fixedHeaderElement.innerHTML = element.innerHTML;
+                if (this.groupTemplate && this.isAngular && this.getModuleName() === 'multiselect') {
+                    this.updateFixedGroupTemplateHader(element);
+                }
+                else {
+                    this.fixedHeaderElement.innerHTML = element.innerHTML;
+                }
             }
             this.fixedHeaderElement.style.position = 'fixed';
             this.fixedHeaderElement.style.top = (this.list.parentElement.offsetTop + this.list.offsetTop) - window.scrollY + 'px';
@@ -2248,7 +2319,12 @@ let DropDownBase = class DropDownBase extends Component {
         setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });
         const firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group + ':not(.e-hide-listitem)');
         if (!isNullOrUndefined(firstLi)) {
-            this.fixedHeaderElement.innerHTML = firstLi.innerHTML;
+            if (this.groupTemplate && this.isAngular && this.getModuleName() === 'multiselect') {
+                this.updateFixedGroupTemplateHader(firstLi);
+            }
+            else {
+                this.fixedHeaderElement.innerHTML = firstLi.innerHTML;
+            }
         }
     }
     getSortedDataSource(dataSource) {
@@ -2801,6 +2877,8 @@ let DropDownBase = class DropDownBase extends Component {
         this.ulElement = null;
         this.list = null;
         this.enableRtlElements = null;
+        this.groupHeaderItems = null;
+        this.fiteredGroupHeaderItems = null;
         this.rippleFun = null;
         super.destroy();
     }
@@ -5159,7 +5237,14 @@ let DropDownList = class DropDownList extends DropDownBase {
             return;
         }
         if (this.getInitialData) {
-            this.updateActionCompleteDataValues(ulElement, list);
+            if (this.itemTemplate && this.element.tagName === 'EJS-COMBOBOX' && this.allowFiltering) {
+                setTimeout(() => {
+                    this.updateActionCompleteDataValues(ulElement, list);
+                }, 0);
+            }
+            else {
+                this.updateActionCompleteDataValues(ulElement, list);
+            }
             if (this.enableVirtualization) {
                 this.updateSelectElementData(this.allowFiltering);
             }
@@ -8045,7 +8130,7 @@ let DropDownTree = class DropDownTree extends Component {
         if (this.isPopupOpen) {
             this.hidePopup();
         }
-        else if (!(e instanceof TouchEvent) && e.button !== 2) {
+        else if (e.type === 'touchstart' || ('button' in e && e.button !== 2)) {
             this.focusIn(e);
             this.renderPopup();
         }
@@ -11072,8 +11157,8 @@ let ComboBox = class ComboBox extends DropDownList {
                             const dataItem = this.getItemData();
                             const value = this.allowObjectBinding ?
                                 this.getDataByValue(dataItem.value) : dataItem.value;
-                            if ((this.value === dataItem.value && this.text !== dataItem.text) ||
-                                (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            if ((this.value === dataItem.value && this.text !== dataItem.text.toString()) ||
+                                (this.value !== dataItem.value && this.text === dataItem.text.toString())) {
                                 this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });
                             }
                         }
@@ -13517,7 +13602,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 return filterQuery;
             }
         }
-        if (this.filterAction) {
+        if (this.isFilterAction) {
             if ((this.targetElement() !== null && !this.enableVirtualization) || (this.enableVirtualization &&
                 this.targetElement() !== null && this.targetElement().trim() !== '')) {
                 const dataType = this.typeOfData(this.dataSource).typeof;
@@ -13981,7 +14066,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.ulElement = this.mainList;
         }
         this.checkPlaceholderSize();
-        Input.createSpanElement(this.overAllWrapper, this.createElement);
+        if (this.element.querySelector('.e-multiselect .e-float-text-content') === null) {
+            Input.createSpanElement(this.overAllWrapper, this.createElement);
+        }
         this.calculateWidth();
         if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
@@ -15163,7 +15250,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         else {
             this.setFloatLabelType();
-            Input.createSpanElement(this.overAllWrapper, this.createElement);
+            if (this.element.querySelector('.e-multiselect .e-float-text-content') === null) {
+                Input.createSpanElement(this.overAllWrapper, this.createElement);
+            }
         }
         this.expandTextbox();
     }
@@ -16005,7 +16094,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.clearAllCallback(e);
             }
             this.checkAndResetCache();
-            Input.createSpanElement(this.overAllWrapper, this.createElement);
+            if (this.element.querySelector('.e-multiselect .e-float-text-content') === null) {
+                Input.createSpanElement(this.overAllWrapper, this.createElement);
+            }
             this.calculateWidth();
             if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
                 this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
@@ -16159,7 +16250,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.isFilterPrevented = eventArgs.cancel;
             if (!eventArgs.cancel) {
                 if (!this.isFiltered && !eventArgs.preventDefaultAction) {
-                    this.filterAction = true;
+                    this.isFilterAction = true;
                     this.isFilteringAction = true;
                     if (this.dataSource instanceof DataManager && this.allowCustomValue) {
                         this.isCustomRendered = false;
@@ -16315,7 +16406,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     initializeData() {
         this.mainListCollection = [];
         this.beforePopupOpen = false;
-        this.filterAction = false;
+        this.isFilterAction = false;
         this.remoteFilterAction = false;
         this.isFirstClick = false;
         this.mobFilter = true;
@@ -16641,7 +16732,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     updateDataList() {
-        if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction || this.targetElement().trim())) {
+        if (this.mainList && this.ulElement && !(this.isFiltered || this.isFilterAction || this.targetElement().trim())) {
             const isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
             const isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 &&
                 this.ulElement.children[0].childElementCount > 0) &&
@@ -16731,6 +16822,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             removeClass(selectedItems, className);
             while (temp > 0) {
                 selectedItems[temp - 1].setAttribute('aria-selected', 'false');
+                if (this.mode === 'CheckBox') {
+                    if (selectedItems && (selectedItems.length > (temp - 1))) {
+                        removeClass([selectedItems[temp - 1].firstElementChild.lastElementChild], 'e-check');
+                    }
+                }
                 temp--;
             }
         }
@@ -17874,7 +17970,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.isDynamicDataChange = true;
         }
         if (this.getModuleName() === 'multiselect') {
-            this.filterAction = false;
+            this.isFilterAction = false;
             this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);
         }
         for (const prop of Object.keys(newProp)) {
@@ -17979,7 +18075,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 case 'floatLabelType':
                     this.setFloatLabelType();
                     this.addValidInputClass();
-                    Input.createSpanElement(this.overAllWrapper, this.createElement);
+                    if (this.element.querySelector('.e-multiselect .e-float-text-content') === null) {
+                        Input.createSpanElement(this.overAllWrapper, this.createElement);
+                    }
                     this.calculateWidth();
                     if (!isNullOrUndefined(this.overAllWrapper) &&
                         !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&
@@ -18568,7 +18666,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
-        Input.createSpanElement(this.overAllWrapper, this.createElement);
+        if (this.element.querySelector('.e-multiselect .e-float-text-content') === null) {
+            Input.createSpanElement(this.overAllWrapper, this.createElement);
+        }
         this.calculateWidth();
         if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
@@ -19989,9 +20089,6 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             this.unSelectAllText = l10nSelect.getConstant('unSelectAllText');
             this.popupWrapper = this.list;
             this.checkBoxSelectionModule.checkAllParent = null;
-            if (this.filterParent) {
-                this.filterParent = null;
-            }
             this.notify('selectAll', {});
         }
     }