@syncfusion/ej2-dropdowns 30.1.39 → 30.1.41

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

@@ -1564,10 +1564,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 +1675,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 +1702,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 +1850,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 +1959,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 +2096,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 +2317,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 +2875,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 +5235,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);
             }
@@ -13517,7 +13600,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;
@@ -13802,6 +13885,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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) {
@@ -13980,7 +14064,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')) {
@@ -15162,6 +15248,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         else {
             this.setFloatLabelType();
+            if (this.element.querySelector('.e-multiselect .e-float-text-content') === null) {
+                Input.createSpanElement(this.overAllWrapper, this.createElement);
+            }
         }
         this.expandTextbox();
     }
@@ -16003,7 +16092,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');
@@ -16157,7 +16248,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;
@@ -16313,7 +16404,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;
@@ -16639,7 +16730,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) &&
@@ -17872,7 +17963,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)) {
@@ -17977,7 +18068,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] &&
@@ -18566,7 +18659,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')) {
@@ -20056,6 +20151,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             this.tBListBox = getComponent(document.getElementById(scope), this.getModuleName());
             this.tBListBox.updateToolBarState();
         }
+        else if (this.refreshing) {
+            this.updateToolBarState();
+        }
     }
     createButtons(toolElem) {
         let btn;
@@ -21062,7 +21160,6 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             }
             this.inputString = this.filterInput.value;
             this.filterWireEvents();
-            this.ulElement.style.setProperty('height', 'calc(100% - ' + (this.filterParent.offsetHeight) + 'px)', 'important');
             return filterInputObj;
         }
     }