@syncfusion/ej2-dropdowns 30.1.40 → 30.1.42

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

@@ -415,7 +415,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         if (this.component === 'combobox') {
             var 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
@@ -744,6 +744,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                 this.parent.isVirtualScrolling = true;
                 setTimeout(function () {
                     _this.parent.pageCount = _this.parent.getPageCount();
+                    _this.parent.isRequesting = false;
                     _this.virtualScrollRefreshAsync().then(function () {
                         if (_this.parent.popupObj) {
                             _this.parent.list = _this.parent.popupObj.element.querySelector('.' + 'e-content') || select('.' + 'e-content');
@@ -1589,11 +1590,12 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                             _this.emptyDataRequest(fields);
                             return;
                         }
-                        eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {
+                        var query_1 = _this.getQuery(eventArgs.query);
+                        eventArgs.data.executeQuery(query_1).then(function (e) {
                             _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
                             var isReOrder = true;
                             if (!_this.virtualSelectAll) {
-                                var newQuery = _this.getQuery(eventArgs.query);
+                                var newQuery = query_1.clone();
                                 for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
                                     if (newQuery.queries[queryElements].fn === 'onWhere') {
                                         isWhereExist_1 = true;
@@ -1648,10 +1650,15 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                                     _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) {
@@ -1754,10 +1761,15 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                             }
                             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;
@@ -1776,6 +1788,20 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             });
         }
     };
+    DropDownBase.prototype.updateGroupHeaderItems = function (ulElement) {
+        var headerElements = ulElement.querySelectorAll('.' + dropDownBaseClasses.group);
+        var clonedHeaders = [];
+        for (var 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;
+        }
+    };
     DropDownBase.prototype.handleVirtualKeyboardActions = function (e, pageCount) {
         // Used this method in component side.
     };
@@ -1912,6 +1938,21 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.list)) {
             if (!this.isVirtualizationEnabled) {
                 this.list.innerHTML = '';
+                if (this.isUpdateGroupTemplate && this.isAngular && this.groupTemplate && this.getModuleName() === 'multiselect') {
+                    var headerItems = ulElement.querySelectorAll('.' + dropDownBaseClasses.group);
+                    if (headerItems.length > 0 && this.groupHeaderItems.length > 0) {
+                        var groupHeaderMap = {};
+                        for (var i = 0; i < this.groupHeaderItems.length; i++) {
+                            groupHeaderMap[this.groupHeaderItems[i].id] = this.groupHeaderItems[i].innerHTML;
+                        }
+                        for (var 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');
@@ -2007,7 +2048,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         if (this.fields.groupBy !== null && this.dataSource || this.element.querySelector('.' + dropDownBaseClasses.group)) {
             var dataSource = this.dataSource;
             var option = { groupTemplateID: this.groupTemplateId, isStringTemplate: this.isStringTemplate };
-            var headerItems = listEle.querySelectorAll('.' + dropDownBaseClasses.group);
+            var headerItems = this.isAngular && this.getModuleName() === 'multiselect' && !isNullOrUndefined(listEle) &&
+                listEle.classList.contains(dropDownBaseClasses.fixedHead) ? [listEle] :
+                listEle.querySelectorAll('.' + dropDownBaseClasses.group);
             var groupcheck = this.templateCompiler(this.groupTemplate);
             if (typeof this.groupTemplate !== 'function' && groupcheck) {
                 var groupValue = select(this.groupTemplate, document).innerHTML.trim();
@@ -2142,10 +2185,38 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             return false;
         }
     };
+    DropDownBase.prototype.updateFixedGroupTemplateHader = function (element) {
+        var groupData = element.cloneNode ? element.cloneNode(true) : element;
+        var isGroupDataUpdated = false;
+        if (this.groupHeaderItems && this.groupHeaderItems.length > 0) {
+            for (var 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 (var 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);
+    };
     DropDownBase.prototype.updateGroupFixedHeader = function (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';
@@ -2335,7 +2406,12 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });
         var 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;
+            }
         }
     };
     DropDownBase.prototype.getSortedDataSource = function (dataSource) {
@@ -2891,6 +2967,8 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         this.ulElement = null;
         this.list = null;
         this.enableRtlElements = null;
+        this.groupHeaderItems = null;
+        this.fiteredGroupHeaderItems = null;
         this.rippleFun = null;
         _super.prototype.destroy.call(this);
     };
@@ -5275,7 +5353,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             return;
         }
         if (this.getInitialData) {
-            this.updateActionCompleteDataValues(ulElement, list);
+            if (this.itemTemplate && this.element.tagName === 'EJS-COMBOBOX' && this.allowFiltering) {
+                setTimeout(function () {
+                    _this.updateActionCompleteDataValues(ulElement, list);
+                }, 0);
+            }
+            else {
+                this.updateActionCompleteDataValues(ulElement, list);
+            }
             if (this.enableVirtualization) {
                 this.updateSelectElementData(this.allowFiltering);
             }
@@ -8219,7 +8304,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         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();
         }
@@ -11284,8 +11369,8 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
                             var dataItem = _this.getItemData();
                             var 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 });
                             }
                         }
@@ -13772,7 +13857,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 return filterQuery;
             }
         }
-        if (this.filterAction) {
+        if (this.isFilterAction) {
             if ((this.targetElement() !== null && !this.enableVirtualization) || (this.enableVirtualization &&
                 this.targetElement() !== null && this.targetElement().trim() !== '')) {
                 var dataType = this.typeOfData(this.dataSource).typeof;
@@ -14236,7 +14321,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             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')) {
@@ -15426,7 +15513,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         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();
     };
@@ -16277,7 +16366,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 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');
@@ -16433,7 +16524,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             _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;
@@ -16589,7 +16680,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     MultiSelect.prototype.initializeData = function () {
         this.mainListCollection = [];
         this.beforePopupOpen = false;
-        this.filterAction = false;
+        this.isFilterAction = false;
         this.remoteFilterAction = false;
         this.isFirstClick = false;
         this.mobFilter = true;
@@ -16923,7 +17014,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.updateDataList = function () {
-        if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction || this.targetElement().trim())) {
+        if (this.mainList && this.ulElement && !(this.isFiltered || this.isFilterAction || this.targetElement().trim())) {
             var isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
             var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 &&
                 this.ulElement.children[0].childElementCount > 0) &&
@@ -17014,6 +17105,11 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             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--;
             }
         }
@@ -18162,7 +18258,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.isDynamicDataChange = true;
         }
         if (this.getModuleName() === 'multiselect') {
-            this.filterAction = false;
+            this.isFilterAction = false;
             this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);
         }
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -18268,7 +18364,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 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] &&
@@ -18863,7 +18961,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         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')) {
@@ -20315,9 +20415,6 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             this.unSelectAllText = l10nSelect.getConstant('unSelectAllText');
             this.popupWrapper = this.list;
             this.checkBoxSelectionModule.checkAllParent = null;
-            if (this.filterParent) {
-                this.filterParent = null;
-            }
             this.notify('selectAll', {});
         }
     };