@syncfusion/ej2-dropdowns 21.1.39 → 21.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.1.39
+*  version : 21.2.3
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@21.1.38",
+  "_id": "@syncfusion/ej2-dropdowns@21.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-bgFJ9w349eBLXYNpagCVatm/G/3fXwSngP9B0w6ilE8P0s1/sIkUnC1f0V7tLEdtuckbli7kvqKN0AOzasJdww==",
+  "_integrity": "sha512-fGCFMQTf1sX1JtwnvrMUCA/0OmBSP524aR5DSIiLe3bbyJKx3xIbd2z8o9swzK+Kq5bzvg25UN817Mo5CqDLHA==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -19,7 +19,6 @@
   "_requiredBy": [
     "/",
     "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-dropdowns",
     "/@syncfusion/ej2-documenteditor",
     "/@syncfusion/ej2-gantt",
     "/@syncfusion/ej2-grids",
@@ -28,14 +27,12 @@
     "/@syncfusion/ej2-pdfviewer",
     "/@syncfusion/ej2-pivotview",
     "/@syncfusion/ej2-querybuilder",
-    "/@syncfusion/ej2-react-dropdowns",
     "/@syncfusion/ej2-ribbon",
     "/@syncfusion/ej2-schedule",
-    "/@syncfusion/ej2-spreadsheet",
-    "/@syncfusion/ej2-vue-dropdowns"
+    "/@syncfusion/ej2-spreadsheet"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-21.1.38.tgz",
-  "_shasum": "88d99e1b3f49f61a702e9c0b149160d3ef053e11",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-21.1.41.tgz",
+  "_shasum": "d1072405526b8a4c689fd8809d57a6717e641739",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -43,12 +40,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.1.39",
-    "@syncfusion/ej2-data": "~21.1.38",
-    "@syncfusion/ej2-inputs": "~21.1.39",
-    "@syncfusion/ej2-lists": "~21.1.39",
-    "@syncfusion/ej2-navigations": "~21.1.39",
-    "@syncfusion/ej2-popups": "~21.1.37"
+    "@syncfusion/ej2-base": "~21.2.3",
+    "@syncfusion/ej2-data": "~21.2.3",
+    "@syncfusion/ej2-inputs": "~21.2.3",
+    "@syncfusion/ej2-lists": "~21.2.3",
+    "@syncfusion/ej2-navigations": "~21.2.3",
+    "@syncfusion/ej2-popups": "~21.2.3"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -73,7 +70,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "21.1.39",
+  "version": "21.2.3",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/drop-down-base/drop-down-base.js

@@ -248,6 +248,9 @@ var DropDownBase = /** @class */ (function (_super) {
             var noDataCompTemp = compiledString({}, this, templateName, templateId, this.isStringTemplate, null, ele);
             if (noDataCompTemp && noDataCompTemp.length > 0) {
                 for (var i = 0; i < noDataCompTemp.length; i++) {
+                    if (this.getModuleName() === 'listbox' && templateName === 'noRecordsTemplate') {
+                        noDataCompTemp[i].classList.add('e-list-nr-template');
+                    }
                     ele.appendChild(noDataCompTemp[i]);
                 }
             }
@@ -288,7 +291,13 @@ var DropDownBase = /** @class */ (function (_super) {
     };
     DropDownBase.prototype.getFormattedValue = function (value) {
         if (this.listData && this.listData.length) {
-            var item = this.typeOfData(this.listData);
+            var item = void 0;
+            if (this.properties.allowCustomValue && this.properties.value && this.properties.value instanceof Array && this.properties.value.length > 0) {
+                item = this.typeOfData(this.properties.value);
+            }
+            else {
+                item = this.typeOfData(this.listData);
+            }
             if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number'
                 || item.typeof === 'number') {
                 return parseFloat(value);

package/src/drop-down-tree/drop-down-tree.d.ts

@@ -345,6 +345,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private clearIconWidth;
     private isClicked;
     private isCheckAllCalled;
+    private isFromFilterChange;
     /**
      * Specifies the template that renders to the popup list content of the
      * Dropdown Tree component when the data fetch request from the remote server fails.

package/src/drop-down-tree/drop-down-tree.js

@@ -170,6 +170,7 @@ var DropDownTree = /** @class */ (function (_super) {
         _this.isClicked = false;
         // Specifies if the checkAll method has been called
         _this.isCheckAllCalled = false;
+        _this.isFromFilterChange = false;
         return _this;
     }
     /**
@@ -383,6 +384,7 @@ var DropDownTree = /** @class */ (function (_super) {
     };
     DropDownTree.prototype.filterHandler = function (value, event) {
         var _this = this;
+        this.isFromFilterChange = true;
         if (!this.isFilteredData) {
             this.treeData = this.treeObj.getTreeData();
         }
@@ -860,7 +862,7 @@ var DropDownTree = /** @class */ (function (_super) {
                     case 'moveDown':
                         var focusedElement = _this.treeObj.element.querySelector('li');
                         focusedElement.focus();
-                        addClass([focusedElement], ['e-hover', 'e-node-focus']);
+                        addClass([focusedElement], ['e-node-focus']);
                 }
             }
         });
@@ -1539,7 +1541,7 @@ var DropDownTree = /** @class */ (function (_super) {
                     && _this.treeItems.length > 0)) {
                     var focusedElement = _this.treeObj.element.querySelector('li');
                     focusedElement.focus();
-                    addClass([focusedElement], ['e-hover', 'e-node-focus']);
+                    addClass([focusedElement], ['e-node-focus']);
                 }
                 if (_this.checkSelectAll && _this.checkBoxElement) {
                     var wrap = closest(_this.checkBoxElement, '.' + CHECKBOXWRAP);
@@ -1659,7 +1661,7 @@ var DropDownTree = /** @class */ (function (_super) {
             this.isDocumentClick = false;
             e.preventDefault();
         }
-        else if (this.inputWrapper != null && !this.inputWrapper.contains(target) && this.inputFocus && !isFilter) {
+        else if (!isNOU(this.inputWrapper) && !this.inputWrapper.contains(target) && this.inputFocus && !isFilter) {
             this.focusOut(e);
         }
     };
@@ -2078,7 +2080,8 @@ var DropDownTree = /** @class */ (function (_super) {
     };
     DropDownTree.prototype.setMultiSelectValue = function (newValues) {
         if (!this.isFilteredData) {
-            this.setProperties({ value: newValues }, true);
+            this.setProperties({ value: this.isFromFilterChange && newValues && newValues.length == 0 ? this.value : newValues }, true);
+            this.isFromFilterChange = false;
             if (newValues && newValues.length !== 0 && !this.showCheckBox) {
                 this.treeObj.selectedNodes = this.value.slice();
                 this.treeObj.dataBind();

package/src/list-box/list-box.js

@@ -427,17 +427,26 @@ var ListBox = /** @class */ (function (_super) {
         var scrollMoved = 36;
         var scrollHeight = 10;
         if (this.itemTemplate && args.target) {
-            scrollHeight = args.target.scrollHeight;
+            if (args.target && args.target.closest('.e-list-item')) {
+                scrollHeight = args.target.closest('.e-list-item').scrollHeight;
+            }
+            else {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var listItem = args.element.querySelector('.e-list-item');
+                if (listItem) {
+                    scrollHeight = listItem.scrollHeight;
+                }
+            }
         }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var event = args.event;
         var wrapper;
         if (args.target && (args.target.classList.contains('e-listbox-wrapper') || args.target.classList.contains('e-list-item')
-            || (args.target.parentElement && args.target.parentElement.classList.contains('e-list-item'))
-            || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group'))) {
+            || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group')
+            || args.target.closest('.e-list-item'))) {
             if (args.target.classList.contains('e-list-item') || args.target.classList.contains('e-filter-parent')
-                || (args.target.parentElement && args.target.parentElement.classList.contains('e-list-item'))
-                || args.target.classList.contains('e-input-group')) {
+                || args.target.classList.contains('e-input-group')
+                || args.target.closest('.e-list-item')) {
                 wrapper = args.target.closest('.e-listbox-wrapper');
             }
             else {
@@ -726,6 +735,13 @@ var ListBox = /** @class */ (function (_super) {
      */
     ListBox.prototype.selectItems = function (items, state, isValue) {
         if (state === void 0) { state = true; }
+        if (state && !this.selectionSettings.showCheckbox && this.selectionSettings.mode === 'Single') {
+            this.getSelectedItems().forEach(function (li) {
+                li.classList.remove('e-active');
+                li.removeAttribute('aria-selected');
+                removeClass([li], cssClass.selected);
+            });
+        }
         this.setSelection(items, state, !isValue);
         this.updateSelectedOptions();
     };

package/src/multi-select/multi-select.js

@@ -245,7 +245,9 @@ var MultiSelect = /** @class */ (function (_super) {
         this.trigger('open', eventArgs, function (eventArgs) {
             if (!eventArgs.cancel) {
                 _this.focusAtFirstListItem();
-                document.body.appendChild(_this.popupObj.element);
+                if (_this.popupObj) {
+                    document.body.appendChild(_this.popupObj.element);
+                }
                 if (_this.mode === 'CheckBox' && _this.enableGroupCheckBox && !isNullOrUndefined(_this.fields.groupBy)) {
                     _this.updateListItems(_this.list.querySelectorAll('li.e-list-item'), _this.mainList.querySelectorAll('li.e-list-item'));
                 }
@@ -254,7 +256,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
                 _this.refreshPopup();
                 _this.renderReactTemplates();
-                _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
+                if (_this.popupObj) {
+                    _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
+                }
                 attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options' });
                 _this.updateAriaActiveDescendant();
                 if (_this.isFirstClick) {
@@ -1428,6 +1432,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.refreshSelection();
             }
         }
+        else if (!isNullOrUndefined(this.fields.groupBy) && this.value && this.value.length) {
+            this.refreshSelection();
+        }
     };
     MultiSelect.prototype.removeSelectedChip = function (e) {
         var selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);
@@ -3044,7 +3051,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     overAllContainer = this.componentWrapper.offsetWidth -
                         parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -
                         parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);
-                    if ((wrapperleng + downIconWidth + this.clearIconWidth) >= overAllContainer) {
+                    if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
                         if (tempData !== undefined && tempData !== '') {
                             temp = tempData;
                             index = tempIndex + 1;
@@ -3053,7 +3060,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         remaining = this.value.length - index;
                         wrapperleng = this.viewWrapper.offsetWidth +
                             parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);
-                        while (((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) >= overAllContainer) && wrapperleng !== 0
+                        while (((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) > overAllContainer) && wrapperleng !== 0
                             && this.viewWrapper.innerHTML !== '') {
                             var textArr = [];
                             this.viewWrapper.innerHTML = textArr.join(this.delimiterChar);
@@ -3063,7 +3070,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         }
                         break;
                     }
-                    else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) < overAllContainer) {
+                    else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {
                         tempData = data;
                         tempIndex = index;
                     }

package/styles/material-dark.css

@@ -1553,7 +1553,7 @@ ejs-dropdownlist {
   margin-top: -38px;
   right: 18px;
   top: 100%;
-  width: 16px;
+  width: 32px;
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker {
@@ -1561,16 +1561,16 @@ ejs-dropdownlist {
   margin-top: -35px;
   right: 18px;
   top: 100%;
-  width: 16px;
+  width: 32px;
 }
 
 .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
 .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
-  right: 52px;
+  right: 30px;
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
-  right: 52px;
+  right: 30px;
 }
 
 .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,

package/styles/material.css

@@ -1608,7 +1608,7 @@ ejs-dropdownlist {
   margin-top: -38px;
   right: 18px;
   top: 100%;
-  width: 16px;
+  width: 32px;
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker {
@@ -1616,16 +1616,16 @@ ejs-dropdownlist {
   margin-top: -35px;
   right: 18px;
   top: 100%;
-  width: 16px;
+  width: 32px;
 }
 
 .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
 .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
-  right: 52px;
+  right: 30px;
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
-  right: 52px;
+  right: 30px;
 }
 
 .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,

package/styles/multi-select/icons/_material-dark.scss

@@ -30,7 +30,7 @@
       margin-top: -38px;
       right: 18px;
       top: 100%;
-      width: 16px;
+      width: 32px;
     }
   }
 
@@ -40,20 +40,20 @@
       margin-top: -35px;
       right: 18px;
       top: 100%;
-      width: 16px;
+      width: 32px;
     }
   }
 
   .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
   .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
     @if $ddl-multiselect-skin-name == 'material' {
-      right: 52px;
+      right: 30px;
     }
   }
 
   .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
     @if $ddl-multiselect-skin-name == 'material' {
-      right: 52px;
+      right: 30px;
     }
   }
 

package/styles/multi-select/icons/_material.scss

@@ -30,7 +30,7 @@
       margin-top: -38px;
       right: 18px;
       top: 100%;
-      width: 16px;
+      width: 32px;
     }
   }
 
@@ -40,20 +40,20 @@
       margin-top: -35px;
       right: 18px;
       top: 100%;
-      width: 16px;
+      width: 32px;
     }
   }
 
   .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
   .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
     @if $ddl-multiselect-skin-name == 'material' {
-      right: 52px;
+      right: 30px;
     }
   }
 
   .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
     @if $ddl-multiselect-skin-name == 'material' {
-      right: 52px;
+      right: 30px;
     }
   }
 

package/styles/multi-select/material-dark.css

@@ -65,7 +65,7 @@
   margin-top: -38px;
   right: 18px;
   top: 100%;
-  width: 16px;
+  width: 32px;
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker {
@@ -73,16 +73,16 @@
   margin-top: -35px;
   right: 18px;
   top: 100%;
-  width: 16px;
+  width: 32px;
 }
 
 .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
 .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
-  right: 52px;
+  right: 30px;
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
-  right: 52px;
+  right: 30px;
 }
 
 .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,

package/styles/multi-select/material.css

@@ -73,7 +73,7 @@
   margin-top: -38px;
   right: 18px;
   top: 100%;
-  width: 16px;
+  width: 32px;
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker {
@@ -81,16 +81,16 @@
   margin-top: -35px;
   right: 18px;
   top: 100%;
-  width: 16px;
+  width: 32px;
 }
 
 .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
 .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
-  right: 52px;
+  right: 30px;
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
-  right: 52px;
+  right: 30px;
 }
 
 .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,