@syncfusion/ej2-dropdowns 20.4.54 → 21.1.36

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.54
+*  version : 21.1.35
 *  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,58 +1,46 @@
 {
-  "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@20.4.53",
+  "_from": "@syncfusion/ej2-dropdowns@21.1.35",
+  "_id": "@syncfusion/ej2-dropdowns@21.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-zrM6fpFwUVuGno4MQ+g5XIY0Tmm8Cxw5PsgHRTHvxB4t/9f5Mprexb/51Fs7o+qY7eGD7nQk4X88fFJkrbsHYw==",
+  "_integrity": "sha512-0oTeG81gimWGE59USlquz5NWx3nJaCJhFvrnoXFlX9fccxT/LWg5wuIP/QG4GVOabU7jCZ3uHF4aiE5MpCjIpA==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
-    "type": "range",
+    "type": "version",
     "registry": true,
-    "raw": "@syncfusion/ej2-dropdowns@*",
+    "raw": "@syncfusion/ej2-dropdowns@21.1.35",
     "name": "@syncfusion/ej2-dropdowns",
     "escapedName": "@syncfusion%2fej2-dropdowns",
     "scope": "@syncfusion",
-    "rawSpec": "*",
+    "rawSpec": "21.1.35",
     "saveSpec": null,
-    "fetchSpec": "*"
+    "fetchSpec": "21.1.35"
   },
   "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-dropdowns",
-    "/@syncfusion/ej2-documenteditor",
-    "/@syncfusion/ej2-gantt",
-    "/@syncfusion/ej2-grids",
-    "/@syncfusion/ej2-inplace-editor",
-    "/@syncfusion/ej2-kanban",
-    "/@syncfusion/ej2-pdfviewer",
-    "/@syncfusion/ej2-pivotview",
-    "/@syncfusion/ej2-querybuilder",
-    "/@syncfusion/ej2-react-dropdowns",
-    "/@syncfusion/ej2-schedule",
-    "/@syncfusion/ej2-spreadsheet",
-    "/@syncfusion/ej2-vue-dropdowns"
+    "#USER",
+    "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.4.53.tgz",
-  "_shasum": "d3c7c00440672d7fa342acf06bda25a9b7c4faa8",
-  "_spec": "@syncfusion/ej2-dropdowns@*",
-  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
+  "_resolved": "https://registry.npmjs.org/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-21.1.35.tgz",
+  "_shasum": "97c74cc02cae28780979c60275a00d6ecb801a23",
+  "_spec": "@syncfusion/ej2-dropdowns@21.1.35",
+  "_where": "E:\\New folder (4)\\New folder",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.51",
-    "@syncfusion/ej2-data": "~20.4.48",
-    "@syncfusion/ej2-inputs": "~20.4.54",
-    "@syncfusion/ej2-lists": "~20.4.50",
-    "@syncfusion/ej2-navigations": "~20.4.53",
-    "@syncfusion/ej2-popups": "~20.4.53"
+    "@syncfusion/ej2-base": "~21.1.35",
+    "@syncfusion/ej2-data": "~21.1.35",
+    "@syncfusion/ej2-inputs": "~21.1.35",
+    "@syncfusion/ej2-lists": "~21.1.35",
+    "@syncfusion/ej2-navigations": "~21.1.35",
+    "@syncfusion/ej2-popups": "~21.1.35"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
   "devDependencies": {},
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
+  "homepage": "https://www.syncfusion.com/javascript-ui-controls",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -71,8 +59,7 @@
   "main": "./dist/ej2-dropdowns.umd.min.js",
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
-  "typings": "index.d.ts",
-  "version": "20.4.54",
   "sideEffects": false,
-  "homepage": "https://www.syncfusion.com/javascript-ui-controls"
-}
+  "typings": "index.d.ts",
+  "version": "21.1.36"
+}

package/src/combo-box/combo-box.js

@@ -659,6 +659,7 @@ var ComboBox = /** @class */ (function (_super) {
     ComboBox.prototype.filter = function (dataSource, query, fields) {
         _super.prototype.filter.call(this, dataSource, query, fields);
     };
+    /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
      * Opens the popup that displays the list of items.
      *
@@ -666,6 +667,7 @@ var ComboBox = /** @class */ (function (_super) {
 
      */
     ComboBox.prototype.showPopup = function (e) {
+        /* eslint-enable valid-jsdoc, jsdoc/require-param */
         _super.prototype.showPopup.call(this, e);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-param */

package/src/common/highlight-search.js

@@ -1,4 +1,3 @@
-/* eslint-disable jsdoc/require-param, valid-jsdoc */
 /**
  * Function helps to find which highlightSearch is to call based on your data.
  *
@@ -18,6 +17,7 @@ export function highlightSearch(element, query, ignoreCase, type) {
         query = /^[a-zA-Z0-9- ]*$/.test(query) ? query : query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
         var replaceQuery = type === 'StartsWith' ? '^(' + query + ')' : type === 'EndsWith' ?
             '(' + query + ')$' : '(' + query + ')';
+        // eslint-disable-next-line security/detect-non-literal-regexp
         findTextNode(element, new RegExp(replaceQuery, ignoreRegex));
     }
 }

package/src/common/incremental-search.d.ts

@@ -1,3 +1,6 @@
+/**
+ * IncrementalSearch module file
+ */
 export declare type SearchType = 'StartsWith' | 'Equal' | 'EndsWith' | 'Contains';
 /**
  * Search and focus the list item based on key code matches with list text content

package/src/common/incremental-search.js

@@ -1,3 +1,6 @@
+/**
+ * IncrementalSearch module file
+ */
 var queryString = '';
 var prevString = '';
 var matches = [];
@@ -87,6 +90,7 @@ export function Search(inputVal, items, searchType, ignoreCase, dataSource, fiel
                 var fieldValue_1 = fields.text.split('.');
                 dataSource.filter(function (data) {
                     Array.prototype.slice.call(fieldValue_1).forEach(function (value) {
+                        /* eslint-disable security/detect-object-injection */
                         if (type === 'object' && checkField_1.textContent.toString().indexOf(data[value]) !== -1 && checkField_1.getAttribute('data-value') === data[fields.value].toString() || type === 'string' && checkField_1.textContent.toString().indexOf(data) !== -1) {
                             filterValue = type === 'object' ? data[value] : data;
                         }
@@ -94,6 +98,7 @@ export function Search(inputVal, items, searchType, ignoreCase, dataSource, fiel
                 });
             }
             text = dataSource && filterValue ? (ignoreCase ? filterValue.toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
+            /* eslint-disable security/detect-non-literal-regexp */
             if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, "g").test(text))) {
                 itemData.item = item;
                 itemData.index = i;
@@ -106,9 +111,11 @@ export function Search(inputVal, items, searchType, ignoreCase, dataSource, fiel
                 return state_1.value;
         }
         return itemData;
+        /* eslint-enable security/detect-non-literal-regexp */
     }
     return itemData;
 }
+/* eslint-enable security/detect-object-injection */
 export function escapeCharRegExp(value) {
     return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }

package/src/drop-down-list/drop-down-list-model.d.ts

@@ -32,13 +32,13 @@ export interface DropDownListModel extends DropDownBaseModel{
     enabled?: boolean;
 
     /**
-       * Enable or disable persisting component's state between page reloads.
-       * If enabled, following list of states will be persisted.
-       * 1. value
-       *
-       * @default false
+     * Enable or disable persisting component's state between page reloads.
+     * If enabled, following list of states will be persisted.
+     * 1. value
+     *
+     * @default false
 
-       */
+     */
     enablePersistence?: boolean;
 
     /**

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

@@ -209,7 +209,8 @@ var DropDownList = /** @class */ (function (_super) {
             }
             else {
                 if (this.allowFiltering && this.getModuleName() !== 'autocomplete'
-                    && !isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list) && this.actionCompleteData.list.length > 0) {
+                    && !isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list) &&
+                    this.actionCompleteData.list.length > 0) {
                     this.onActionComplete(this.actionCompleteData.ulElement.cloneNode(true), this.actionCompleteData.list);
                 }
                 this.resetFocusElement();
@@ -259,6 +260,14 @@ var DropDownList = /** @class */ (function (_super) {
                 else if (htmlAttr === 'style') {
                     this.inputWrapper.container.setAttribute('style', this.htmlAttributes["" + htmlAttr]);
                 }
+                else if (htmlAttr === 'aria-label') {
+                    if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
+                        this.inputElement.setAttribute('aria-label', this.htmlAttributes["" + htmlAttr]);
+                    }
+                    else {
+                        this.inputWrapper.container.setAttribute('aria-label', this.htmlAttributes["" + htmlAttr]);
+                    }
+                }
                 else {
                     var defaultAttr = ['title', 'id', 'placeholder',
                         'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
@@ -630,7 +639,6 @@ var DropDownList = /** @class */ (function (_super) {
         var preventHomeEnd = this.getModuleName() !== 'dropdownlist' && (e.action === 'home' || e.action === 'end');
         this.isEscapeKey = e.action === 'escape';
         this.isTabKey = !this.isPopupOpen && e.action === 'tab';
-        var isNavAction = e.action === 'down' || e.action === 'up' || e.action === 'home' || e.action === 'end';
         var isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'
             || e.action === 'home' || e.action === 'end');
         if ((this.isEditTextBox() || preventAction || preventHomeEnd) && !this.isPopupOpen) {
@@ -714,7 +722,8 @@ var DropDownList = /** @class */ (function (_super) {
                 startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;
                 index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;
             }
-            var nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];
+            var nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex]
+                : this.liCollections[index];
             if (!isNullOrUndefined(nextItem)) {
                 this.setSelection(nextItem, e);
             }
@@ -1032,8 +1041,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         if (Browser.info.name !== 'mozilla') {
             if (this.targetElement()) {
-                attributes(this.targetElement(), { 'aria-label': this.inputElement.value });
-                attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id != '' ? this.inputElement.id : this.element.id });
+                attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id !== '' ? this.inputElement.id : this.element.id });
                 this.targetElement().removeAttribute('aria-live');
             }
         }
@@ -1518,7 +1526,10 @@ var DropDownList = /** @class */ (function (_super) {
                 if (this.value && this.dataSource instanceof DataManager) {
                     var checkField_1 = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
                     var fieldValue_1 = this.fields.value.split('.');
-                    var checkVal = list.some(function (x) { return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ? _this.checkFieldValue(x, fieldValue_1) === _this.value : x[checkField_1] === _this.value; });
+                    var checkVal = list.some(function (x) {
+                        return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ?
+                            _this.checkFieldValue(x, fieldValue_1) === _this.value : x[checkField_1] === _this.value;
+                    });
                     if (!checkVal) {
                         this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', this.value)))
                             .then(function (e) {
@@ -1568,7 +1579,9 @@ var DropDownList = /** @class */ (function (_super) {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     DropDownList.prototype.checkFieldValue = function (list, fieldValue) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var checkField = list;
         fieldValue.forEach(function (value) {
             checkField = checkField[value];
@@ -1608,8 +1621,9 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     DropDownList.prototype.actionCompleteDataUpdate = function (li, item, index) {
-        if (index != null) {
-            this.actionCompleteData.ulElement.insertBefore(li.cloneNode(true), this.actionCompleteData.ulElement.childNodes[index]);
+        if (index !== null) {
+            this.actionCompleteData.ulElement.
+                insertBefore(li.cloneNode(true), this.actionCompleteData.ulElement.childNodes[index]);
         }
         else {
             this.actionCompleteData.ulElement.appendChild(li.cloneNode(true));
@@ -1653,7 +1667,7 @@ var DropDownList = /** @class */ (function (_super) {
         this.trigger('beforeOpen', args, function (args) {
             if (!args.cancel) {
                 var popupEle = _this.createElement('div', {
-                    id: _this.element.id + '_popup', className: 'e-ddl e-popup ' + (_this.cssClass != null ? _this.cssClass : '')
+                    id: _this.element.id + '_popup', className: 'e-ddl e-popup ' + (_this.cssClass !== null ? _this.cssClass : '')
                 });
                 var searchBox = _this.setSearchBox(popupEle);
                 _this.listHeight = formatUnit(_this.popupHeight);
@@ -1799,10 +1813,10 @@ var DropDownList = /** @class */ (function (_super) {
                 if (_this.isReact) {
                     _this.clearTemplate(['headerTemplate', 'footerTemplate']);
                 }
-                var isResetItem = (_this.getModuleName() === 'autocomplete') ? true : false;
                 _this.isNotSearchList = false;
                 _this.isDocumentClick = false;
                 _this.destroyPopup();
+                EventHandler.remove(document, 'mousedown', _this.onDocumentClick);
                 if (_this.isFiltering() && _this.actionCompleteData.list && _this.actionCompleteData.list[0]) {
                     _this.isActive = true;
                     _this.onActionComplete(_this.actionCompleteData.ulElement, _this.actionCompleteData.list, null, true);
@@ -2064,8 +2078,10 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.destroyPopup = function () {
         this.isPopupOpen = false;
         this.isFilterFocus = false;
-        this.popupObj.destroy();
-        detach(this.popupObj.element);
+        if (this.popupObj) {
+            this.popupObj.destroy();
+            detach(this.popupObj.element);
+        }
     };
     DropDownList.prototype.clickOnBackIcon = function () {
         this.hidePopup();
@@ -2100,7 +2116,7 @@ var DropDownList = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
             updatedCssClassValues = (this.cssClass.replace(/\s+/g, ' ')).trim();
         }
-        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+        if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
             this.enabled = false;
         }
         this.inputWrapper = Input.createInput({
@@ -2142,6 +2158,12 @@ var DropDownList = /** @class */ (function (_super) {
         this.element.id = id;
         this.hiddenElement.id = id + '_hidden';
         this.targetElement().setAttribute('tabindex', this.tabIndex);
+        if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
+            this.inputElement.setAttribute('aria-label', this.getModuleName());
+        }
+        else {
+            attributes(this.targetElement(), { 'aria-label': this.getModuleName() });
+        }
         attributes(this.targetElement(), this.getAriaAttributes());
         this.updateDataAttribute(this.htmlAttributes);
         this.setHTMLAttributes();
@@ -2487,14 +2509,16 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     break;
                 case 'valueTemplate':
-                    if (!isNullOrUndefined(this_1.itemData) && this_1.valueTemplate != null) {
+                    if (!isNullOrUndefined(this_1.itemData) && this_1.valueTemplate !== null) {
                         this_1.setValueTemplate();
                     }
                     break;
                 case 'allowFiltering':
                     if (this_1.allowFiltering) {
-                        this_1.actionCompleteData = { ulElement: this_1.ulElement,
-                            list: this_1.listData, isUpdated: true };
+                        this_1.actionCompleteData = {
+                            ulElement: this_1.ulElement,
+                            list: this_1.listData, isUpdated: true
+                        };
                         this_1.actionData = this_1.actionCompleteData;
                         this_1.updateSelectElementData(this_1.allowFiltering);
                     }
@@ -2564,6 +2588,7 @@ var DropDownList = /** @class */ (function (_super) {
             removeClass([this.inputWrapper.container], ['e-readonly']);
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     DropDownList.prototype.setInputValue = function (newProp, oldProp) {
     };
     DropDownList.prototype.setCssClass = function (newClass, oldClass) {
@@ -2587,16 +2612,18 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.getModuleName = function () {
         return 'dropdownlist';
     };
+    /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
      * Opens the popup that displays the list of items.
      *
      * @returns {void}
      */
     DropDownList.prototype.showPopup = function (e) {
+        /* eslint-enable valid-jsdoc, jsdoc/require-param */
         if (!this.enabled) {
             return;
         }
-        if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list != this.actionCompleteData.list) &&
+        if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list !== this.actionCompleteData.list) &&
             this.actionData.list && this.actionData.ulElement) {
             this.actionCompleteData = this.actionData;
             this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);
@@ -2625,7 +2652,8 @@ var DropDownList = /** @class */ (function (_super) {
             };
             history.pushState({}, '');
         }
-        if (!isNullOrUndefined(this.list) && (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData))) {
+        if (!isNullOrUndefined(this.list) && (!isNullOrUndefined(this.list.children[0]) ||
+            this.list.classList.contains(dropDownBaseClasses.noData))) {
             this.renderPopup(e);
         }
     };

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

@@ -154,8 +154,8 @@ export interface DropDownTreeModel extends ComponentModel{
 
     /**
      * Enables or disables the multi-selection of items. To select multiple items:
-     * * Select the items by holding down the **CTRL** key when clicking on the items.
-     * * Select consecutive items by clicking the first item to select and hold down the **SHIFT** key and click the last item to select.
+     * * Select the items by holding down the **Ctrl** key when clicking on the items.
+     * * Select consecutive items by clicking the first item to select and hold down the **Shift** key and click the last item to select.
      *
      * @default false
      */

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

@@ -5,7 +5,19 @@ import { KeyboardEventArgs } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { Popup } from '@syncfusion/ej2-popups';
 import { DropDownTreeModel, FieldsModel, TreeSettingsModel } from './drop-down-tree-model';
-export declare type TreeFilterType = 'StartsWith' | 'EndsWith' | 'Contains';
+export declare type TreeFilterType = 
+/**
+* Checks whether a value begins with the specified value.
+*/
+'StartsWith' | 
+/**
+* Checks whether a value ends with the specified value.
+*/
+'EndsWith' | 
+/**
+* Checks whether a value contains with specified value.
+*/
+'Contains';
 export declare class Fields extends ChildProperty<Fields> {
     /**
      * This field specifies the child items or mapping field for the nested child items that contains an array of JSON objects.
@@ -210,9 +222,53 @@ export interface DdtKeyPressEventArgs {
      */
     event: KeyboardEventArgs;
 }
-export declare type Mode = 'Default' | 'Delimiter' | 'Box' | 'Custom';
-export declare type SortOrder = 'None' | 'Ascending' | 'Descending';
-export declare type ExpandOn = 'Auto' | 'Click' | 'DblClick' | 'None';
+export declare type Mode = 
+/**
+* On blur component will act in the delimiter mode.
+*/
+'Default' | 
+/**
+* Selected items will be visualized in the text content.
+*/
+'Delimiter' | 
+/**
+* Selected items will be visualized in chip.
+*/
+'Box' | 
+/**
+* Selected items will be visualized with the given custom template value
+*/
+'Custom';
+export declare type SortOrder = 
+/**
+* Indicates that the nodes are not sorted.
+*/
+'None' | 
+/**
+* Indicates that the nodes are sorted in the ascending order.
+*/
+'Ascending' | 
+/**
+*  Indicates that the nodes are sorted in the descending order
+*/
+'Descending';
+export declare type ExpandOn = 
+/**
+* Determines automatically whether to trigger the single click or double-click event.
+*/
+'Auto' | 
+/**
+* Triggers the single click event when an item is double-clicekd.
+*/
+'Click' | 
+/**
+* Triggers the double-click event when an item is double-clicekd.
+*/
+'DblClick' | 
+/**
+* Does not trigger any event when the user double-clicks on an item.
+*/
+'None';
 /**
  * The Dropdown Tree control allows you to select single or multiple values from hierarchical data in a tree-like structure.
  * It has several out-of-the-box features, such as data binding, check boxes, templates, filter,
@@ -306,8 +362,8 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     allowFiltering: boolean;
     /**
      * Enables or disables the multi-selection of items. To select multiple items:
-     * * Select the items by holding down the **CTRL** key when clicking on the items.
-     * * Select consecutive items by clicking the first item to select and hold down the **SHIFT** key and click the last item to select.
+     * * Select the items by holding down the **Ctrl** key when clicking on the items.
+     * * Select consecutive items by clicking the first item to select and hold down the **Shift** key and click the last item to select.
      *
      * @default false
      */

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

@@ -1100,7 +1100,7 @@ var DropDownTree = /** @class */ (function (_super) {
             if (isValid && this.value !== null && (this.value && this.value.length !== 0)) {
                 addClass([this.inputEle], CHIP_INPUT);
             }
-            else if (this.value === null || (this.value && this.value.length === 0) || this.chipWrapper) {
+            else if (this.value === null || (this.value && this.value.length === 0) || this.checkWrapper) {
                 addClass([this.chipWrapper], HIDEICON);
             }
         }
@@ -1212,36 +1212,36 @@ var DropDownTree = /** @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var htmlAttr = _a[_i];
                 if (htmlAttr === 'class') {
-                    this.inputWrapper.classList.add(this.htmlAttributes[htmlAttr]);
+                    this.inputWrapper.classList.add(this.htmlAttributes["" + htmlAttr]);
                 }
-                else if (htmlAttr === 'disabled' && this.htmlAttributes[htmlAttr] === 'disabled') {
+                else if (htmlAttr === 'disabled' && this.htmlAttributes["" + htmlAttr] === 'disabled') {
                     this.setProperties({ enabled: false }, true);
                     this.setEnable();
                 }
-                else if (htmlAttr === 'readonly' && !isNOU(this.htmlAttributes[htmlAttr])) {
+                else if (htmlAttr === 'readonly' && !isNOU(this.htmlAttributes["" + htmlAttr])) {
                     this.setProperties({ readonly: true }, true);
                     this.dataBind();
                 }
                 else if (htmlAttr === 'style') {
-                    this.inputWrapper.setAttribute('style', this.htmlAttributes[htmlAttr]);
+                    this.inputWrapper.setAttribute('style', this.htmlAttributes["" + htmlAttr]);
                 }
                 else {
                     var defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',
                         'role', 'autocorrect', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
                     var validateAttr = ['name', 'required'];
                     if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {
-                        this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                        this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                     }
                     else if (defaultAttr.indexOf(htmlAttr) > -1) {
                         if (htmlAttr === 'placeholder') {
-                            Input.setPlaceholder(this.htmlAttributes[htmlAttr], this.inputEle);
+                            Input.setPlaceholder(this.htmlAttributes["" + htmlAttr], this.inputEle);
                         }
                         else {
-                            this.inputEle.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.inputEle.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                         }
                     }
                     else {
-                        this.inputWrapper.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                        this.inputWrapper.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                     }
                 }
             }
@@ -1659,7 +1659,7 @@ var DropDownTree = /** @class */ (function (_super) {
             this.isDocumentClick = false;
             e.preventDefault();
         }
-        else if (!this.inputWrapper.contains(target) && this.inputFocus && !isFilter) {
+        else if (this.inputWrapper != null && !this.inputWrapper.contains(target) && this.inputFocus && !isFilter) {
             this.focusOut(e);
         }
     };
@@ -2064,7 +2064,7 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.ensurePlaceHolder = function () {
-        if (this.value && this.value.length === 0) {
+        if (isNOU(this.value) || (this.value && this.value.length === 0)) {
             removeClass([this.inputEle], CHIP_INPUT);
             if (this.chipWrapper) {
                 addClass([this.chipWrapper], HIDEICON);

package/src/list-box/list-box.d.ts

@@ -6,15 +6,27 @@ import { ModuleDeclaration, EmitType } from '@syncfusion/ej2-base';
 import { SelectionSettingsModel, ListBoxModel, ToolbarSettingsModel } from './list-box-model';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 /**
- * Defines the selection mode of List Box.
+ * Defines the selection mode in ListBox component.
+ * ```props
+ * Multiple :- Specifies that the ListBox should allow multiple item selection.
+ * Single :- Specifies that the ListBox should allow single item selection.
+ * ```
  */
 export declare type SelectionMode = 'Multiple' | 'Single';
 /**
- * Defines the toolbar position of List Box.
+ * Defines the position of the toolbar in ListBox component.
+ * ```props
+ * Left :- Specifies that the toolbar should be positioned to the left of the ListBox.
+ * Right :- Specifies that the toolbar should be positioned to the right of the ListBox.
+ * ```
  */
 export declare type ToolBarPosition = 'Left' | 'Right';
 /**
- * Defines the checkbox position of List Box.
+ * Defines the position of the checkbox in ListBox component.
+ * ```props
+ * Left :- Specifies that the checkbox should be positioned to the left of the ListBox.
+ * Right :- Specifies that the checkbox should be positioned to the right of the ListBox.
+ * ```
  */
 export declare type CheckBoxPosition = 'Left' | 'Right';
 declare type obj = {

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

@@ -288,7 +288,7 @@ var ListBox = /** @class */ (function (_super) {
     ListBox.prototype.setCssClass = function () {
         var wrap = this.toolbarSettings.items.length ? this.list.parentElement : this.list;
         if (this.cssClass) {
-            addClass([wrap], this.cssClass.split(' '));
+            addClass([wrap], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
         if (this.enableRtl) {
             addClass([this.list], 'e-rtl');
@@ -1937,7 +1937,7 @@ var ListBox = /** @class */ (function (_super) {
                     text = value;
                 }
                 if (typeof (text) === 'string') {
-                    text = text.split("\\").join("\\\\");
+                    text = text.split('\\').join('\\\\');
                 }
                 li = _this.list.querySelector('[data-value="' + text + '"]');
                 if (li) {
@@ -2141,7 +2141,7 @@ var ListBox = /** @class */ (function (_super) {
                         removeClass([wrap], oldProp.cssClass.split(' '));
                     }
                     if (newProp.cssClass) {
-                        addClass([wrap], newProp.cssClass.split(' '));
+                        addClass([wrap], newProp.cssClass.replace(/\s+/g, ' ').trim().split(' '));
                     }
                     break;
                 case 'enableRtl':

package/src/mention/mention.d.ts

@@ -53,6 +53,9 @@ export declare class Mention extends DropDownBase {
     private spinnerTemplateElement;
     private lineBreak;
     private selectedElementID;
+    private isSelectCancel;
+    private isTyped;
+    private didPopupOpenByTypingInitialChar;
     /**
      * Defines class/multiple classes separated by a space for the mention component.
      *
@@ -343,6 +346,7 @@ export declare class Mention extends DropDownBase {
      */
     hideSpinner(): void;
     private hideWaitingSpinner;
+    private checkAndUpdateInternalComponent;
     /**
      * Shows the spinner loader.
      *