@syncfusion/ej2-dropdowns 30.1.39 → 30.1.41

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

@@ -1648,10 +1648,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 +1759,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 +1786,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 +1936,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 +2046,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 +2183,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 +2404,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 +2965,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 +5351,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);
             }
@@ -13772,7 +13855,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;
@@ -14057,6 +14140,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 tempData[0] = (typeof customData === 'boolean') ?
                     (tempData[0] === 'true' ? true : (tempData[0] === 'false' ? false : tempData[0])) : tempData[0];
                 this.resetList(tempData, field);
+                this.focusAtLastListItem(value);
             }
         }
         else if (this.listData && this.mainData && !dataChecks && this.allowCustomValue) {
@@ -14235,7 +14319,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')) {
@@ -15425,6 +15511,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             this.setFloatLabelType();
+            if (this.element.querySelector('.e-multiselect .e-float-text-content') === null) {
+                Input.createSpanElement(this.overAllWrapper, this.createElement);
+            }
         }
         this.expandTextbox();
     };
@@ -16275,7 +16364,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');
@@ -16431,7 +16522,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;
@@ -16587,7 +16678,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;
@@ -16921,7 +17012,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) &&
@@ -18160,7 +18251,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++) {
@@ -18266,7 +18357,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] &&
@@ -18861,7 +18954,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')) {
@@ -20383,6 +20478,9 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             this.tBListBox = getComponent(document.getElementById(scope), this.getModuleName());
             this.tBListBox.updateToolBarState();
         }
+        else if (this.refreshing) {
+            this.updateToolBarState();
+        }
     };
     ListBox.prototype.createButtons = function (toolElem) {
         var _this = this;
@@ -21408,7 +21506,6 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             }
             this.inputString = this.filterInput.value;
             this.filterWireEvents();
-            this.ulElement.style.setProperty('height', 'calc(100% - ' + (this.filterParent.offsetHeight) + 'px)', 'important');
             return filterInputObj;
         }
     };