@syncfusion/ej2-dropdowns 34.2.4 → 34.2.6

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

@@ -3776,6 +3776,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.bindClearEvent();
     }
     windowResize() {
+        this.updateFloatLabelOverflowWidth();
         if (this.isPopupOpen) {
             this.popupObj.refreshPosition(this.inputWrapper.container);
         }
@@ -8147,6 +8148,7 @@ let DropDownTree = class DropDownTree extends Component {
         this.isNodeChecked = false;
         this.isFromFilterChange = false;
         this.fallbackValue = [];
+        this.uncheckedNodeId = null;
     }
     /**
      * Get the properties to be maintained in the persisted state.
@@ -9612,8 +9614,129 @@ let DropDownTree = class DropDownTree extends Component {
             checkOnClick: true
         });
         this.treeObj.root = this.root ? this.root : this;
+        this.treeObj.filterIndeterminateNodes = [];
+        this.treeObj.filterCheckedNodes = [];
         this.treeObj.appendTo(this.tree);
     }
+    updateIndeterminateNodes() {
+        if (!(this.allowFiltering && this.treeSettings.autoCheck) || (this.isRemoteData || this.treeSettings.loadOnDemand)) {
+            return;
+        }
+        const checkedNodes = Array.isArray(this.value) ? this.value.slice() : [];
+        const checkedSet = {};
+        for (let i = 0; i < checkedNodes.length; i++) {
+            checkedSet[checkedNodes[i]] = true;
+        }
+        const treeData = this.treeObj.element.classList.contains('e-filtering') ? this.treeData : this.treeItems;
+        const valueField = this.fields.value;
+        const parentValueField = this.fields.parentValue;
+        const hasChildrenField = this.fields.hasChildren;
+        const childField = this.fields.child;
+        const indeterminateNodes = [];
+        const childrenMap = {};
+        for (let i = 0; i < treeData.length; i++) {
+            const node = treeData[i];
+            const nodeId = getValue(valueField, node);
+            const nodePid = getValue(parentValueField, node);
+            if (isNullOrUndefined(node) || isNullOrUndefined(nodeId) || isNullOrUndefined(nodePid)) {
+                continue;
+            }
+            const parentId = nodePid.toString();
+            if (!childrenMap[parentId]) {
+                childrenMap[parentId] = [];
+            }
+            childrenMap[parentId].push(nodeId.toString());
+        }
+        const allNodes = treeData.slice();
+        if (!isNullOrUndefined(childField)) {
+            const collectNestedChildren = (nodes, fields) => {
+                if (!nodes) {
+                    return;
+                }
+                for (let i = 0; i < nodes.length; i++) {
+                    const node = nodes[i];
+                    if (isNullOrUndefined(node)) {
+                        continue;
+                    }
+                    const nodeId = getValue(fields.value, node);
+                    if (isNullOrUndefined(nodeId)) {
+                        continue;
+                    }
+                    allNodes.push(node);
+                    const childMapper = fields.child;
+                    let childrenArr;
+                    if (typeof childMapper === 'string') {
+                        childrenArr = node[childMapper];
+                    }
+                    else if (!isNullOrUndefined(childMapper)) {
+                        childrenArr = node[childMapper.value];
+                    }
+                    else {
+                        childrenArr = null;
+                    }
+                    if (!isNullOrUndefined(childrenArr) && Array.isArray(childrenArr) && childrenArr.length) {
+                        const parentId = nodeId.toString();
+                        if (!childrenMap[parentId]) {
+                            childrenMap[parentId] = [];
+                        }
+                        for (let k = 0; k < childrenArr.length; k++) {
+                            const childId = getValue(fields.value, childrenArr[k]);
+                            if (!isNullOrUndefined(childId) && childrenMap[parentId].indexOf(childId.toString()) === -1) {
+                                childrenMap[parentId].push(childId.toString());
+                            }
+                        }
+                        const nextFields = (typeof childMapper !== 'string' && !isNullOrUndefined(childMapper)) ?
+                            childMapper : fields;
+                        collectNestedChildren(childrenArr, nextFields);
+                    }
+                }
+            };
+            collectNestedChildren(treeData, this.fields);
+        }
+        for (let i = 0; i < allNodes.length; i++) {
+            const node = allNodes[i];
+            const nodeId = getValue(valueField, node);
+            if (isNullOrUndefined(node) || isNullOrUndefined(nodeId)) {
+                continue;
+            }
+            const nodeIdStr = nodeId.toString();
+            if (hasChildrenField && getValue(hasChildrenField, node) === false) {
+                continue;
+            }
+            if (checkedSet[nodeIdStr]) {
+                continue;
+            }
+            const descendants = [];
+            const queue = childrenMap[nodeIdStr] ? childrenMap[nodeIdStr].slice() : [];
+            let head = 0;
+            while (head < queue.length) {
+                const current = queue[head];
+                head++;
+                descendants.push(current);
+                const kids = childrenMap[current];
+                if (kids) {
+                    for (let j = 0; j < kids.length; j++) {
+                        queue.push(kids[j]);
+                    }
+                }
+            }
+            if (descendants.length === 0) {
+                continue;
+            }
+            let checkedDescendantCount = 0;
+            for (let j = 0; j < descendants.length; j++) {
+                if (checkedSet[descendants[j]]) {
+                    checkedDescendantCount++;
+                }
+            }
+            if (checkedDescendantCount > 0 && checkedDescendantCount < descendants.length &&
+                indeterminateNodes.indexOf(nodeIdStr) === -1) {
+                indeterminateNodes.push(nodeIdStr);
+            }
+        }
+        this.treeObj.filterCheckedNodes = checkedNodes;
+        this.treeObj.filterIndeterminateNodes = indeterminateNodes;
+    }
     /* To render the popup element */
     renderPopup() {
         if (this.isFilteredData) {
@@ -9910,6 +10033,7 @@ let DropDownTree = class DropDownTree extends Component {
                 this.isFilterRestore = false;
             }
         }
+        this.updateIndeterminateNodes();
     }
     restoreFilterSelection() {
         if (this.treeObj.checkedNodes) {
@@ -10160,6 +10284,8 @@ let DropDownTree = class DropDownTree extends Component {
         const eventArgs = this.getEventArgs(args);
         this.trigger('select', eventArgs);
         this.isNodeChecked = args.action === 'check';
+        this.uncheckedNodeId = args.action === 'uncheck' && !isNullOrUndefined(args.data[0]) ?
+            getValue('id', args.data[0]).toString() : null;
         if (this.isFilteredData && args.action === 'uncheck') {
             const id = getValue('id', args.data[0]).toString();
             this.removeSelectedData(id, true);
@@ -10192,17 +10318,8 @@ let DropDownTree = class DropDownTree extends Component {
             this.triggerChangeEvent(this.keyEventArgs);
             this.isValueChange = false;
         }
-        const treeData = this.treeObj.getTreeData();
-        if (this.showCheckBox && this.treeSettings.autoCheck && treeData.length > 0 && this.treeData && this.treeData.length > 0) {
-            for (let i = 0; i < treeData.length; i++) {
-                for (let j = 0; j < this.treeData.length; j++) {
-                    if (treeData[i].id === this.treeData[j].id) {
-                        this.treeData[j].selected = treeData[i].selected !== undefined ?
-                            treeData[i].selected : false;
-                    }
-                }
-            }
-        }
+        this.updateIndeterminateNodes();
+        this.uncheckedNodeId = null;
     }
     beforeCheck(args) {
         if (args.isInteracted) {
@@ -10494,14 +10611,12 @@ let DropDownTree = class DropDownTree extends Component {
             }
         }
     }
-    getFilteredTreeData() {
-        return this.treeData;
-    }
     getChildren(parentId, result) {
-        const treeData = this.getFilteredTreeData();
-        treeData.forEach((item) => {
-            if (!isNullOrUndefined(item) && !isNullOrUndefined(item.pid) && !isNullOrUndefined(item.id) && item.pid.toString() === parentId.toString()) {
-                const childId = item.id.toString();
+        this.treeData.forEach((item) => {
+            const itemId = !isNullOrUndefined(item) ? getValue(this.fields.value, item) : null;
+            const itemPid = !isNullOrUndefined(item) ? getValue(this.fields.parentValue, item) : null;
+            if (!isNullOrUndefined(itemId) && !isNullOrUndefined(itemPid) && itemPid.toString() === parentId.toString()) {
+                const childId = itemId.toString();
                 if (result.indexOf(childId) === -1) {
                     result.push(childId);
                     this.getChildren(childId, result);
@@ -10510,35 +10625,15 @@ let DropDownTree = class DropDownTree extends Component {
         });
     }
     getDirectChildren(parentId) {
-        return this.getFilteredTreeData()
-            .filter((childNode) => !isNullOrUndefined(childNode) && !isNullOrUndefined(childNode.pid) && !isNullOrUndefined(childNode.id) && childNode.pid.toString() === parentId)
-            .map((childNode) => childNode.id.toString());
-    }
-    restoreRootParentValues() {
-        const treeData = this.getFilteredTreeData();
-        treeData.forEach((node) => {
-            if (isNullOrUndefined(node) || isNullOrUndefined(node.id)) {
-                return;
-            }
-            if (isNullOrUndefined(node.pid)) {
-                const rootId = node.id.toString();
-                const currentValues = this.value.map((item) => item.toString());
-                if (currentValues.indexOf(rootId) === -1) {
-                    const childValues = [];
-                    this.getChildren(rootId, childValues);
-                    const hasSelectedChild = childValues.some((childId) => currentValues.indexOf(childId) !== -1);
-                    if (hasSelectedChild) {
-                        this.value.push(rootId);
-                    }
-                }
-            }
-        });
+        return this.treeData
+            .filter((childNode) => {
+            const childId = !isNullOrUndefined(childNode) ? getValue(this.fields.value, childNode) : null;
+            const childPid = !isNullOrUndefined(childNode) ? getValue(this.fields.parentValue, childNode) : null;
+            return !isNullOrUndefined(childId) && !isNullOrUndefined(childPid) && childPid.toString() === parentId;
+        })
+            .map((childNode) => getValue(this.fields.value, childNode).toString());
     }
     updateFilteredAutoCheckValues() {
-        const treeData = this.getFilteredTreeData();
-        if (!this.isNodeChecked && Array.isArray(this.value) && this.value.length > 0 && this.showCheckBox) {
-            this.restoreRootParentValues();
-        }
         let currentValues = Array.isArray(this.value) ? this.value.map((item) => item.toString()) : [];
         const removeParent = (parentId) => {
             this.value = this.value.filter((value) => value.toString() !== parentId);
@@ -10549,12 +10644,14 @@ let DropDownTree = class DropDownTree extends Component {
                     this.value.push(value);
                 }
             });
-            treeData.forEach((node) => {
-                if (isNullOrUndefined(node) || isNullOrUndefined(node.id)) {
+            this.treeData.forEach((node) => {
+                const nodeId = isNullOrUndefined(node) ? null : getValue(this.fields.value, node);
+                const nodeHasChild = !isNullOrUndefined(node) && !!this.fields.hasChildren && getValue(this.fields.hasChildren, node) === true;
+                if (isNullOrUndefined(nodeId)) {
                     return;
                 }
-                const parentId = node.id.toString();
-                if (node.haschild && this.value.indexOf(parentId) !== -1) {
+                const parentId = nodeId.toString();
+                if (nodeHasChild && this.value.indexOf(parentId) !== -1) {
                     const childValues = [];
                     this.getChildren(parentId, childValues);
                     if (this.value.indexOf(parentId) === -1) {
@@ -10568,14 +10665,16 @@ let DropDownTree = class DropDownTree extends Component {
                 }
                 currentValues = this.value.map((item) => item.toString());
             });
-            treeData.forEach((node) => {
-                if (isNullOrUndefined(node) || isNullOrUndefined(node.id)) {
+            this.treeData.forEach((node) => {
+                const nodeId = isNullOrUndefined(node) ? null : getValue(this.fields.value, node);
+                const nodeHasChild = !isNullOrUndefined(node) && !!this.fields.hasChildren && getValue(this.fields.hasChildren, node) === true;
+                if (isNullOrUndefined(nodeId)) {
                     return;
                 }
-                if (!node.haschild) {
+                if (!nodeHasChild) {
                     return;
                 }
-                const parentId = node.id.toString();
+                const parentId = nodeId.toString();
                 const directChildren = this.getDirectChildren(parentId);
                 if (!directChildren.length) {
                     return;
@@ -10607,14 +10706,19 @@ let DropDownTree = class DropDownTree extends Component {
             return;
         }
         const removeValues = [];
-        treeData.forEach((node) => {
-            if (isNullOrUndefined(node.id)) {
+        this.treeData.forEach((node) => {
+            const nodeId = isNullOrUndefined(node) ? null : getValue(this.fields.value, node);
+            const nodeHasChild = !isNullOrUndefined(node) && !!this.fields.hasChildren && getValue(this.fields.hasChildren, node) === true;
+            if (isNullOrUndefined(nodeId)) {
+                return;
+            }
+            if (!nodeHasChild) {
                 return;
             }
-            if (!node.haschild) {
+            const parentId = nodeId.toString();
+            if (parentId !== this.uncheckedNodeId) {
                 return;
             }
-            const parentId = node.id.toString();
             if (currentValues.indexOf(parentId) === -1) {
                 const childValues = [];
                 this.getChildren(parentId, childValues);
@@ -10630,18 +10734,20 @@ let DropDownTree = class DropDownTree extends Component {
         let stabilized = false;
         const valueBeforeReconciliation = [...this.value];
         let iterationCount = 0;
-        const maxIterations = treeData.length + 1;
+        const maxIterations = this.treeData.length + 1;
         while (!stabilized && iterationCount < maxIterations) {
             stabilized = true;
             iterationCount++;
-            treeData.forEach((node) => {
-                if (isNullOrUndefined(node) || isNullOrUndefined(node.id)) {
+            this.treeData.forEach((node) => {
+                const nodeId = isNullOrUndefined(node) ? null : getValue(this.fields.value, node);
+                const nodeHasChild = !isNullOrUndefined(node) && !!this.fields.hasChildren && getValue(this.fields.hasChildren, node) === true;
+                if (isNullOrUndefined(nodeId)) {
                     return;
                 }
-                if (!node.haschild) {
+                if (!nodeHasChild) {
                     return;
                 }
-                const parentId = node.id.toString();
+                const parentId = nodeId.toString();
                 const directChildren = this.getDirectChildren(parentId);
                 if (!directChildren.length) {
                     return;
@@ -10680,7 +10786,8 @@ let DropDownTree = class DropDownTree extends Component {
         if (!this.isFilteredData) {
             this.selectedData = [];
         }
-        if (this.treeSettings.autoCheck && this.isFilteredData && !isNullOrUndefined(this.value)) {
+        if (!this.isRemoteData && !this.treeSettings.loadOnDemand && this.treeSettings.autoCheck &&
+            this.isFilteredData && !isNullOrUndefined(this.value)) {
             this.updateFilteredAutoCheckValues();
         }
         if (!isNullOrUndefined(this.value)) {
@@ -10757,6 +10864,7 @@ let DropDownTree = class DropDownTree extends Component {
         else {
             this.inputWrapper.setAttribute('aria-label', this.getModuleName());
         }
+        this.updateIndeterminateNodes();
     }
     setChipValues(text, value) {
         if (!this.inputWrapper.contains(this.chipWrapper)) {
@@ -13789,6 +13897,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     onPopupShown(e) {
+        this.sanitizeData();
         if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const proxy = this;
@@ -15411,7 +15520,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
         this.UpdateSkeleton();
-        const scrollEle = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li
+        const hasOnlyVirtualItems = this.ulElement && this.ulElement.querySelector('li.e-virtual-list') &&
+            this.ulElement.querySelectorAll('li:not(.e-virtual-list)').length === 0;
+        const targetElement = hasOnlyVirtualItems ? this.list : this.ulElement;
+        const scrollEle = targetElement.querySelectorAll('li.' + dropDownBaseClasses.li
             + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         if (scrollEle.length > 0) {
             let element = scrollEle[(isHome) ? 0 : (scrollEle.length - 1)];
@@ -17288,6 +17400,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     windowResize() {
         this.refreshPopup();
+        this.calculateWidth();
+        this.updateFloatLabelOverflowWidth();
         if ((!this.inputFocus || this.mode === 'CheckBox') && this.viewWrapper && this.viewWrapper.parentElement) {
             this.updateDelimView();
         }
@@ -17515,6 +17629,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.preventSetCurrentData = false;
         this.initializeData();
+        this.sanitizeData();
         this.updateDataAttribute(this.htmlAttributes);
         super.preRender();
     }
@@ -17545,6 +17660,56 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             endIndex: this.itemCount
         };
     }
+    sanitizeData() {
+        if (this.enableVirtualization && this.mode === 'CheckBox') {
+            if (this.dataSource && Array.isArray(this.dataSource) && !(this.dataSource instanceof DataManager)) {
+                const cleanedDataSource = [];
+                for (let i = 0; i < this.dataSource.length; i++) {
+                    const item = this.dataSource[i];
+                    if (item !== null && item !== undefined && item !== '') {
+                        if (typeof item === 'object') {
+                            const itemValue = getValue((this.fields.value ? this.fields.value : 'value'), item);
+                            if (this.fields.value !== null) {
+                                if (itemValue !== null && itemValue !== undefined && itemValue !== '') {
+                                    cleanedDataSource.push(item);
+                                }
+                            }
+                            else {
+                                cleanedDataSource.push(item);
+                            }
+                        }
+                        else if (typeof item === 'string') {
+                            if (item !== null && item !== undefined && item.trim() !== '') {
+                                cleanedDataSource.push(item);
+                            }
+                        }
+                        else {
+                            cleanedDataSource.push(item);
+                        }
+                    }
+                }
+                if (cleanedDataSource.length !== this.dataSource.length) {
+                    this.setProperties({ dataSource: cleanedDataSource }, true);
+                }
+            }
+            if (this.value && Array.isArray(this.value) && this.value.length > 0) {
+                const cleanedValue = [];
+                for (let i = 0; i < this.value.length; i++) {
+                    const val = this.value[i];
+                    if (val !== null && val !== undefined && val !== '') {
+                        cleanedValue.push(val);
+                    }
+                }
+                if (cleanedValue.length !== this.value.length) {
+                    this.setProperties({ value: cleanedValue }, true);
+                }
+            }
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
     updateData(delimiterChar, e, isInitialVirtualData) {
         let data = '';
         const delim = this.mode === 'Delimiter' || this.mode === 'CheckBox';
@@ -17687,6 +17852,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             || this.list.querySelector('.e-ul') && this.list.querySelector('.e-ul').childElementCount === 0)) {
             isEmptyData = true;
         }
+        this.sanitizeData();
         super.render(null, isEmptyData);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
@@ -19417,6 +19583,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             switch (prop) {
                 case 'query':
                 case 'dataSource':
+                    this.sanitizeData();
                     if (this.mode === 'CheckBox' && this.showSelectAll) {
                         if (!isNullOrUndefined(this.popupObj)) {
                             this.popupObj.destroy();
@@ -19439,6 +19606,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.updateVal(this.value, this.value, 'text');
                     break;
                 case 'value':
+                    this.sanitizeData();
                     if (this.fields.disabled) {
                         this.removeDisabledItemsValue(this.value);
                     }
@@ -19870,6 +20038,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         const args = { cancel: false };
+        const oldValue = extend([], this.value, [], true);
+        const oldData = extend([], this.dataSource, [], true);
         this.trigger('beforeOpen', args, (args) => {
             if (!args.cancel) {
                 if (!this.ulElement) {
@@ -19881,6 +20051,50 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     if (this.inputElement && this.mode !== 'CheckBox') {
                         this.focusIn();
                     }
+                    if (this.enableVirtualization && this.mode === 'CheckBox') {
+                        if (JSON.stringify(oldData) !== JSON.stringify(this.dataSource) && this.sanitizeData() && this.showSelectAll) {
+                            this.renderPopup();
+                        }
+                        if (!isNullOrUndefined(oldValue) && !isNullOrUndefined(this.value) &&
+                            JSON.stringify(oldValue) !== JSON.stringify(this.value) && this.sanitizeData()) {
+                            if (this.fields.disabled) {
+                                this.removeDisabledItemsValue(this.value);
+                            }
+                            if (!this.validateValues(this.value, oldValue)) {
+                                return;
+                            }
+                            if (this.isVue && !this.changeOnBlur && !this.validateValues(this.value, oldValue)) {
+                                return;
+                            }
+                            this.updateVal(this.value, oldValue, 'value', this.enableVirtualization);
+                            this.addValidInputClass();
+                            if (this.showSelectAll) {
+                                this.renderPopup();
+                                const totalCount = this.dataSource instanceof DataManager ? 0 :
+                                    this.dataSource.length;
+                                const selectedCount = this.value ? this.value.length : 0;
+                                if (selectedCount === totalCount) {
+                                    let frame = null;
+                                    if (this.popupObj) {
+                                        frame = this.popupObj.element.querySelector('.e-selectall-parent .e-frame');
+                                    }
+                                    if (frame) {
+                                        frame.classList.add('e-check');
+                                        frame.classList.remove('e-uncheck');
+                                        frame.classList.remove('e-stop');
+                                    }
+                                }
+                            }
+                            if (!this.closePopupOnSelect && this.isPopupOpen()) {
+                                this.refreshPopup();
+                            }
+                            if (this.isPopupOpen() && this.list && this.list.querySelector('.e-active.e-disable')) {
+                                const activeItems = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + '.e-active' + '.e-disable');
+                                removeClass(activeItems, 'e-disable');
+                            }
+                            this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;
+                        }
+                    }
                     return;
                 }
                 if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering && this.isDeviceFullScreen) {
@@ -20035,6 +20249,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             // eslint-disable-next-line
             this.value = [...this.value];
         }
+        this.sanitizeData();
         this.setDynValue = this.initStatus = false;
         this.isSelectAll = false;
         this.selectAllEventEle = [];
@@ -24654,7 +24869,7 @@ let Mention = class Mention extends DropDownBase {
                 ? lastWordRange.substring(lastWordRange.lastIndexOf(this.mentionChar) + 1).trim()
                 : lastWordRange.replace(this.mentionChar, '');
         }
-        if (this.queryString !== '' && e.keyCode === 8 && lastWordRange.includes(this.mentionChar) && !this.isPopupOpen &&
+        if (this.queryString !== '' && e.keyCode === 8 && lastWordRange.includes(this.mentionChar) && !this.isPopupOpen && !isNullOrUndefined(this.displayTemplate) &&
             ((typeof this.displayTemplate === 'function' ? this.displayTemplate() : this.displayTemplate)).includes(this.mentionChar)) {
             this.queryString = '';
         }