@syncfusion/ej2-dropdowns 25.2.7 → 26.1.35

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

@@ -1,10 +1,10 @@
-import { Animation, Browser, ChildProperty, Complex, Component, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, append, attributes, classList, closest, compile, createElement, debounce, detach, extend, formatUnit, getComponent, getUniqueID, getValue, isNullOrUndefined, isUndefined, matches, prepend, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
-import { DataManager, DataUtil, JsonAdaptor, Predicate, Query } from '@syncfusion/ej2-data';
+import { EventHandler, Touch, isNullOrUndefined, getValue, select, Browser, debounce, ChildProperty, Property, Component, selectAll, compile, L10n, addClass, removeClass, extend, append, setStyleAttribute, prepend, rippleEffect, detach, Complex, Event, NotifyPropertyChanges, classList, closest, KeyboardEvents, attributes, isUndefined, formatUnit, Animation, getUniqueID, remove, SanitizeHtmlHelper, setValue, matches as matches$1, createElement, getComponent } from '@syncfusion/ej2-base';
+import { DataManager, Query, DataUtil, Predicate, JsonAdaptor } from '@syncfusion/ej2-data';
 import { ListBase, Sortable, cssClass, moveTo } from '@syncfusion/ej2-lists';
 import { Skeleton } from '@syncfusion/ej2-notifications';
-import { Popup, createSpinner, getZindexPartial, hideSpinner, isCollide, showSpinner } from '@syncfusion/ej2-popups';
+import { hideSpinner, createSpinner, showSpinner, isCollide, Popup, getZindexPartial } from '@syncfusion/ej2-popups';
 import { Input, TextBox } from '@syncfusion/ej2-inputs';
-import { Button, createCheckBox } from '@syncfusion/ej2-buttons';
+import { createCheckBox, Button } from '@syncfusion/ej2-buttons';
 import { TreeView } from '@syncfusion/ej2-navigations';
 
 /**
@@ -13,7 +13,7 @@ import { TreeView } from '@syncfusion/ej2-navigations';
 let queryString = '';
 let prevString = '';
 let tempQueryString = '';
-let matches$1 = [];
+let matches = [];
 const activeClass = 'e-active';
 let prevElementId = '';
 /**
@@ -56,21 +56,21 @@ function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId,
     let index;
     queryString = ignoreCase ? queryString.toLowerCase() : queryString;
     if (prevElementId === elementId && prevString === queryString && !refresh) {
-        for (let i = 0; i < matches$1.length; i++) {
-            if (matches$1[i].classList.contains(activeClass)) {
+        for (let i = 0; i < matches.length; i++) {
+            if (matches[i].classList.contains(activeClass)) {
                 index = i;
                 break;
             }
-            if (currentValue && matches$1[i].textContent.toLowerCase() === currentValue.toLowerCase()) {
+            if (currentValue && matches[i].textContent.toLowerCase() === currentValue.toLowerCase()) {
                 index = i;
                 break;
             }
         }
         index = index + 1;
         if (isVirtual) {
-            return matches$1[index] && matches$1.length - 1 != index ? matches$1[index] : matches$1[matches$1.length];
+            return matches[index] && matches.length - 1 != index ? matches[index] : matches[matches.length];
         }
-        return matches$1[index] ? matches$1[index] : matches$1[0];
+        return matches[index] ? matches[index] : matches[0];
     }
     else {
         const listItems = items;
@@ -79,7 +79,7 @@ function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId,
         let item;
         selectedIndex = selectedIndex ? selectedIndex + 1 : 0;
         let i = selectedIndex;
-        matches$1 = [];
+        matches = [];
         do {
             if (i === listItems.length) {
                 i = -1;
@@ -93,7 +93,7 @@ function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId,
             item = listItems[index];
             text = ignoreCase ? item.innerText.toLowerCase() : item.innerText;
             if (text.substr(0, strLength) === queryString) {
-                matches$1.push(listItems[index]);
+                matches.push(listItems[index]);
             }
             i++;
         } while (i !== selectedIndex);
@@ -101,8 +101,8 @@ function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId,
         prevElementId = elementId;
         if (isVirtual) {
             var indexUpdated = false;
-            for (let i = 0; i < matches$1.length; i++) {
-                if (currentValue && matches$1[i].textContent.toLowerCase() === currentValue.toLowerCase()) {
+            for (let i = 0; i < matches.length; i++) {
+                if (currentValue && matches[i].textContent.toLowerCase() === currentValue.toLowerCase()) {
                     index = i;
                     indexUpdated = true;
                     break;
@@ -111,9 +111,9 @@ function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId,
             if (currentValue && indexUpdated) {
                 index = index + 1;
             }
-            return matches$1[index] ? matches$1[index] : matches$1[0];
+            return matches[index] ? matches[index] : matches[0];
         }
-        return matches$1[0];
+        return matches[0];
     }
 }
 /**
@@ -171,7 +171,7 @@ function resetIncrementalSearchValues(elementId) {
         prevElementId = '';
         prevString = '';
         queryString = '';
-        matches$1 = [];
+        matches = [];
     }
 }
 
@@ -507,6 +507,7 @@ class VirtualScroll {
             this.parent.updatevirtualizationList();
         }
         this.parent.getSkeletonCount();
+        this.parent.skeletonCount = this.parent.totalItemCount != 0 && this.parent.totalItemCount < (this.parent.itemCount * 2) ? 0 : this.parent.skeletonCount;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const virtualTrackElement = this.parent.list.getElementsByClassName('e-virtual-ddl')[0];
         if (virtualTrackElement) {
@@ -731,10 +732,6 @@ class VirtualScroll {
     }
 }
 
-/**
- * Common source
- */
-
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -758,6 +755,9 @@ __decorate([
 __decorate([
     Property()
 ], FieldSettings.prototype, "htmlAttributes", void 0);
+__decorate([
+    Property()
+], FieldSettings.prototype, "disabled", void 0);
 const dropDownBaseClasses = {
     root: 'e-dropdownbase',
     rtl: 'e-rtl',
@@ -797,7 +797,6 @@ let DropDownBase = class DropDownBase extends Component {
     constructor(options, element) {
         super(options, element);
         this.preventChange = false;
-        this.isAngular = false;
         this.isPreventChange = false;
         this.isDynamicDataChange = false;
         this.addedNewItem = false;
@@ -1005,7 +1004,7 @@ let DropDownBase = class DropDownBase extends Component {
     }
     l10nUpdate(actionFailure) {
         const ele = this.getModuleName() === 'listbox' ? this.ulElement : this.list;
-        if (this.noRecordsTemplate !== 'No records found' || this.actionFailureTemplate !== 'Request failed') {
+        if ((!isNullOrUndefined(this.noRecordsTemplate) && this.noRecordsTemplate !== 'No records found') || this.actionFailureTemplate !== 'Request failed') {
             const template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;
             let compiledString;
             const templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;
@@ -1167,7 +1166,7 @@ let DropDownBase = class DropDownBase extends Component {
     getTransformValues() {
         let translateY = this.viewPortInfo.startIndex * this.listItemHeight;
         translateY = translateY - (this.skeletonCount * this.listItemHeight);
-        translateY = this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0 ? 0 : translateY;
+        translateY = ((this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0) || this.skeletonCount === 0) ? 0 : translateY;
         const styleText = `transform: translate(0px, ${translateY}px);`;
         return styleText;
     }
@@ -1312,17 +1311,18 @@ let DropDownBase = class DropDownBase extends Component {
             }
             element.querySelectorAll('select>option');
         }
-        this.updateFields(fields.text, fields.value, this.fields.groupBy, this.fields.htmlAttributes, this.fields.iconCss);
+        this.updateFields(fields.text, fields.value, this.fields.groupBy, this.fields.htmlAttributes, this.fields.iconCss, this.fields.disabled);
         this.resetList(jsonElement, fields);
     }
-    updateFields(text, value, groupBy, htmlAttributes, iconCss) {
+    updateFields(text, value, groupBy, htmlAttributes, iconCss, disabled) {
         const field = {
             'fields': {
                 text: text,
                 value: value,
                 groupBy: !isNullOrUndefined(groupBy) ? groupBy : this.fields && this.fields.groupBy,
                 htmlAttributes: !isNullOrUndefined(htmlAttributes) ? htmlAttributes : this.fields && this.fields.htmlAttributes,
-                iconCss: !isNullOrUndefined(iconCss) ? iconCss : this.fields && this.fields.iconCss
+                iconCss: !isNullOrUndefined(iconCss) ? iconCss : this.fields && this.fields.iconCss,
+                disabled: !isNullOrUndefined(disabled) ? disabled : this.fields && this.fields.disabled
             }
         };
         this.setProperties(field, true);
@@ -1690,8 +1690,16 @@ let DropDownBase = class DropDownBase extends Component {
     }
     /* eslint-disable @typescript-eslint/no-unused-vars */
     postRender(listElement, list, bindEvent) {
+        if (this.fields.disabled) {
+            const liCollections = listElement.querySelectorAll('.' + dropDownBaseClasses.li);
+            for (let index = 0; index < liCollections.length; index++) {
+                if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.disabled]) {
+                    this.disableListItem(liCollections[index]);
+                }
+            }
+        }
         /* eslint-enable @typescript-eslint/no-unused-vars */
-        const focusItem = listElement.querySelector('.' + dropDownBaseClasses.li);
+        const focusItem = this.fields.disabled ? listElement.querySelector('.' + dropDownBaseClasses.li + ':not(.e-disabled') : listElement.querySelector('.' + dropDownBaseClasses.li);
         const selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);
         if (focusItem && !selectedItem) {
             focusItem.classList.add(dropDownBaseClasses.focus);
@@ -1826,9 +1834,7 @@ let DropDownBase = class DropDownBase extends Component {
                     break;
                 }
                 if (isDownkey) {
-                    if ((!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.selected) && this.getModuleName() !== 'autocomplete') || (!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.focus) && this.getModuleName() === 'autocomplete')) {
-                        
-                    }
+                    if ((!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.selected) && this.getModuleName() !== 'autocomplete') || (!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.focus) && this.getModuleName() === 'autocomplete')) ;
                 }
             }
             else {
@@ -2039,7 +2045,13 @@ let DropDownBase = class DropDownBase extends Component {
      */
     getIndexByValue(value) {
         let index;
-        const listItems = this.getItems();
+        let listItems = [];
+        if (this.fields.disabled && this.getModuleName() === 'multiselect' && this.liCollections) {
+            listItems = this.liCollections;
+        }
+        else {
+            listItems = this.getItems();
+        }
         for (let i = 0; i < listItems.length; i++) {
             if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {
                 index = i;
@@ -2327,6 +2339,9 @@ let DropDownBase = class DropDownBase extends Component {
             this.notify('addItem', { module: 'CheckBoxSelection', item: li });
             liCollections.push(li);
             if (this.getModuleName() === 'listbox') {
+                if (item.disabled) {
+                    li.classList.add('e-disabled');
+                }
                 this.listData.splice(isListboxEmpty ? this.listData.length : index, 0, item);
                 if (this.listData.length !== this.sortedData.length) {
                     this.sortedData = this.listData;
@@ -2412,18 +2427,53 @@ let DropDownBase = class DropDownBase extends Component {
         }
         this.addedNewItem = true;
     }
+    /**
+     * Checks if the given HTML element is disabled.
+     *
+     * @param {HTMLElement} li - The HTML element to check.
+     * @returns {boolean} - Returns true if the element is disabled, otherwise false.
+     */
+    isDisabledElement(li) {
+        if (li && li.classList.contains('e-disabled')) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Checks whether the list item at the specified index is disabled.
+     *
+     * @param {number} index - The index of the list item to check.
+     * @returns {boolean} True if the list item is disabled, false otherwise.
+     */
+    isDisabledItemByIndex(index) {
+        if (this.fields.disabled && this.liCollections) {
+            return this.isDisabledElement(this.liCollections[index]);
+        }
+        return false;
+    }
+    /**
+     * Disables the given list item.
+     *
+     * @param { HTMLLIElement } li - The list item to disable.
+     * @returns {void}
+     */
+    disableListItem(li) {
+        li.classList.add('e-disabled');
+        li.setAttribute('aria-disabled', 'true');
+        li.setAttribute('aria-selected', 'false');
+    }
     validationAttribute(target, hidden) {
         const name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');
         hidden.setAttribute('name', name);
         target.removeAttribute('name');
-        const attributes$$1 = ['required', 'aria-required', 'form'];
-        for (let i = 0; i < attributes$$1.length; i++) {
-            if (!target.getAttribute(attributes$$1[i])) {
+        const attributes = ['required', 'aria-required', 'form'];
+        for (let i = 0; i < attributes.length; i++) {
+            if (!target.getAttribute(attributes[i])) {
                 continue;
             }
-            const attr = target.getAttribute(attributes$$1[i]);
-            hidden.setAttribute(attributes$$1[i], attr);
-            target.removeAttribute(attributes$$1[i]);
+            const attr = target.getAttribute(attributes[i]);
+            hidden.setAttribute(attributes[i], attr);
+            target.removeAttribute(attributes[i]);
         }
     }
     setZIndex() {
@@ -2494,7 +2544,7 @@ let DropDownBase = class DropDownBase extends Component {
     }
 };
 __decorate([
-    Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
+    Complex({ text: null, value: null, iconCss: null, groupBy: null, disabled: null }, FieldSettings)
 ], DropDownBase.prototype, "fields", void 0);
 __decorate([
     Property(null)
@@ -2557,18 +2607,12 @@ DropDownBase = __decorate([
     NotifyPropertyChanges
 ], DropDownBase);
 
-/**
- * export all modules from current location
- */
-
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 // don't use space in classnames
 const dropDownListClasses = {
     root: 'e-dropdownlist',
@@ -2627,17 +2671,10 @@ let DropDownList = class DropDownList extends DropDownBase {
         super(options, element);
         this.isListSearched = false;
         this.preventChange = false;
-        this.isAngular = false;
         this.isTouched = false;
         this.IsScrollerAtEnd = function () {
             return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
         };
-        this.removeAllChildren = function (element) {
-            while (element.children[0]) {
-                this.removeAllChildren(element.children[0]);
-                element.removeChild(element.children[0]);
-            }
-        };
     }
     /**
      * Initialize the event handler.
@@ -2757,7 +2794,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.removeFocus();
         this.list.scrollTop = 0;
         if (this.getModuleName() !== 'autocomplete' && !isNullOrUndefined(this.ulElement)) {
-            let li = this.ulElement.querySelector('.' + dropDownListClasses.li);
+            let li = this.fields.disabled ? this.ulElement.querySelector('.' + dropDownListClasses.li + ':not(.e-disabled)') : this.ulElement.querySelector('.' + dropDownListClasses.li);
             if (this.enableVirtualization) {
                 li = this.liCollections[this.skeletonCount];
             }
@@ -2960,7 +2997,32 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.updateValues();
         }
     }
+    /**
+     * Checks if the given value is disabled.
+     *
+     * @param { string | number | boolean | object } value - The value to check for disablement. Can be a string, number, boolean, or object.
+     * @returns { boolean } A boolean indicating whether the value is disabled.
+     */
+    isDisableItemValue(value) {
+        if (typeof (value) === 'object') {
+            const objectValue = JSON.parse(JSON.stringify(value))[this.fields.value];
+            return this.isDisabledItemByIndex(this.getIndexByValue(objectValue));
+        }
+        return this.isDisabledItemByIndex(this.getIndexByValue(value));
+    }
     updateValues() {
+        if (this.fields.disabled) {
+            if (this.value != null) {
+                this.value = !this.isDisableItemValue(this.value) ? this.value : null;
+            }
+            if (this.text != null) {
+                this.text = !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;
+            }
+            if (this.index != null) {
+                this.index = !this.isDisabledItemByIndex(this.index) ? this.index : null;
+                this.activeIndex = this.index;
+            }
+        }
         this.selectedValueInfo = this.viewPortInfo;
         if (!isNullOrUndefined(this.value)) {
             const value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue(((this.fields.value) ? this.fields.value : ''), this.value) : this.value;
@@ -3153,7 +3215,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         const target = e.target;
         this.keyboardEvent = null;
         const li = closest(target, '.' + dropDownBaseClasses.li);
-        if (!this.isValidLI(li)) {
+        if (!this.isValidLI(li) || this.isDisabledElement(li)) {
             return;
         }
         this.setSelection(li, e);
@@ -3297,7 +3359,14 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
             }
             else {
-                const li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);
+                let li;
+                if (this.fields.disabled) {
+                    const enableLiCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li + ':not(.e-disabled)');
+                    li = incrementalSearch(e.charCode, enableLiCollections, this.activeIndex, true, this.element.id);
+                }
+                else {
+                    li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);
+                }
                 if (!isNullOrUndefined(li)) {
                     this.setSelection(li, e);
                     this.setScrollPosition();
@@ -3427,6 +3496,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
     }
     updateUpDownAction(e, isVirtualKeyAction) {
+        if (this.fields.disabled && this.list && this.list.querySelectorAll('.e-list-item:not(.e-disabled)').length === 0) {
+            return;
+        }
         if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
             let value = this.getItemData().value;
             if (isNullOrUndefined(value)) {
@@ -3537,6 +3609,25 @@ let DropDownList = class DropDownList extends DropDownBase {
                 attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });
             }
         }
+        let itemIndex;
+        for (let index = 0; index < this.liCollections.length; index++) {
+            if (this.liCollections[index].classList.contains(dropDownListClasses.focus)
+                || this.liCollections[index].classList.contains(dropDownListClasses.selected)) {
+                itemIndex = index;
+                break;
+            }
+        }
+        if (itemIndex != null && this.isDisabledElement(this.liCollections[itemIndex])) {
+            if (this.getModuleName() !== 'autocomplete') {
+                if (this.liCollections.length - 1 === itemIndex && e.action === 'down') {
+                    e.action = 'up';
+                }
+                if (itemIndex === 0 && e.action === 'up') {
+                    e.action = 'down';
+                }
+            }
+            this.updateUpDownAction(e);
+        }
         e.preventDefault();
     }
     updateHomeEndAction(e, isVirtualKeyAction) {
@@ -3637,6 +3728,9 @@ let DropDownList = class DropDownList extends DropDownBase {
     selectCurrentItem(e) {
         if (this.isPopupOpen) {
             const li = this.list.querySelector('.' + dropDownListClasses.focus);
+            if (this.isDisabledElement(li)) {
+                return;
+            }
             if (li) {
                 this.setSelection(li, e);
                 this.isTyped = false;
@@ -4319,7 +4413,6 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                 }
             }
-            let skipExists = false;
             if (filterQuery && filterQuery.queries.length > 0) {
                 for (let queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
                     if (filterQuery.queries[queryElements].fn === 'onSkip') {
@@ -4335,7 +4428,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                 }
             }
-            if (!skipExists && (this.allowFiltering || !this.isPopupOpen || !alreadySkipAdded)) {
+            if ( (this.allowFiltering || !this.isPopupOpen || !alreadySkipAdded)) {
                 if (querySkipValue > 0) {
                     filterQuery.skip(querySkipValue);
                 }
@@ -5225,7 +5318,6 @@ let DropDownList = class DropDownList extends DropDownBase {
                     this.list.scrollTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.virtualListInfo.startIndex * this.listItemHeight : 0;
                 }
                 isScrollerCHanged = this.isKeyBoardAction;
-                
             }
             this.isKeyBoardAction = isScrollerCHanged;
             if (this.enableVirtualization && this.fields.groupBy && this.fixedHeaderElement && (keyAction == "down")) {
@@ -5874,6 +5966,10 @@ let DropDownList = class DropDownList extends DropDownBase {
                     this.setEnable();
                     break;
                 case 'text':
+                    if (this.fields.disabled) {
+                        newProp.text = newProp.text && !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(newProp.text)))
+                            ? newProp.text : null;
+                    }
                     if (newProp.text === null) {
                         this.clearAll();
                         break;
@@ -5925,6 +6021,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                     break;
                 case 'value':
+                    if (this.fields.disabled) {
+                        newProp.value = newProp.value != null && !this.isDisableItemValue(newProp.value) ? newProp.value : null;
+                    }
                     if (newProp.value === null) {
                         this.clearAll();
                         break;
@@ -5984,6 +6083,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                     break;
                 case 'index':
+                    if (this.fields.disabled) {
+                        newProp.index = newProp.index != null && !this.isDisabledItemByIndex(newProp.index) ? newProp.index : null;
+                    }
                     if (newProp.index === null) {
                         this.clearAll();
                         break;
@@ -6293,6 +6395,65 @@ let DropDownList = class DropDownList extends DropDownBase {
             Input.calculateWidth(this.inputElement, this.inputWrapper.container);
         }
     }
+    /**
+     * Method to disable specific item in the popup.
+     *
+     * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
+     * @returns {void}
+     * @deprecated
+     */
+    disableItem(item) {
+        if (this.fields.disabled) {
+            if (!this.list) {
+                this.renderList();
+            }
+            let itemIndex = -1;
+            if (this.liCollections && this.liCollections.length > 0 && this.listData && this.fields.disabled) {
+                if (typeof (item) === 'string') {
+                    itemIndex = this.getIndexByValue(item);
+                }
+                else if (typeof item === 'object') {
+                    if (item instanceof HTMLLIElement) {
+                        for (let index = 0; index < this.liCollections.length; index++) {
+                            if (this.liCollections[index] === item) {
+                                itemIndex = this.getIndexByValue(item.getAttribute('data-value'));
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        const value = JSON.parse(JSON.stringify(item))[this.fields.value];
+                        for (let index = 0; index < this.listData.length; index++) {
+                            if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.value] === value) {
+                                itemIndex = this.getIndexByValue(value);
+                                break;
+                            }
+                        }
+                    }
+                }
+                else {
+                    itemIndex = item;
+                }
+                const isValidIndex = itemIndex < this.liCollections.length && itemIndex > -1;
+                if (isValidIndex && !(JSON.parse(JSON.stringify(this.listData[itemIndex]))[this.fields.disabled])) {
+                    const li = this.liCollections[itemIndex];
+                    if (li) {
+                        this.disableListItem(li);
+                        const parsedData = JSON.parse(JSON.stringify(this.listData[itemIndex]));
+                        parsedData[this.fields.disabled] = true;
+                        this.listData[itemIndex] = parsedData;
+                        this.dataSource = this.listData;
+                        if (li.classList.contains(dropDownListClasses.focus)) {
+                            this.removeFocus();
+                        }
+                        if (li.classList.contains(dropDownListClasses.selected)) {
+                            this.clear();
+                        }
+                    }
+                }
+            }
+        }
+    }
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
      *
@@ -6342,9 +6503,6 @@ let DropDownList = class DropDownList extends DropDownBase {
         delete this.hiddenElement;
         this.filterInput = null;
         this.keyboardModule = null;
-        if (!isNullOrUndefined(this.ulElement)) {
-            this.removeAllChildren(this.ulElement);
-        }
         this.ulElement = null;
         this.list = null;
         this.clearIconElement = null;
@@ -6501,10 +6659,6 @@ DropDownList = __decorate$1([
     NotifyPropertyChanges
 ], DropDownList);
 
-/**
- * export all modules from current location
- */
-
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -6882,7 +7036,6 @@ let DropDownTree = class DropDownTree extends Component {
                 if (args.text === '') {
                     this.isFilteredData = false;
                     this.isFilterRestore = true;
-                    this.isFromFilterChange = false;
                     fields = this.cloneFields(this.fields);
                 }
                 else if (args.preventDefaultAction) {
@@ -6933,17 +7086,17 @@ let DropDownTree = class DropDownTree extends Component {
         });
     }
     remoteDataFilter(value, filteredFields) {
-        filteredFields.dataSource = this.treeData.map(item => this.remoteChildFilter(value, item)).filter(filteredChild => !isNullOrUndefined(filteredChild));
+        filteredFields.dataSource = this.treeData.map((item) => this.remoteChildFilter(value, item)).filter((filteredChild) => !isNullOrUndefined(filteredChild));
         return filteredFields;
     }
     remoteChildFilter(value, node, isChild, isChildFiltering) {
-        let children = this.isChildObject() ? node['child'] : node[this.fields.child];
+        const children = this.isChildObject() ? node['child'] : node[this.fields.child];
         if (isNullOrUndefined(children)) {
             return (this.isMatchedNode(value, node, isChild, isChildFiltering)) ? node : null;
         }
-        let matchedChildren = [];
+        const matchedChildren = [];
         for (let i = 0; i < children.length; i++) {
-            let filteredChild = this.remoteChildFilter(value, children[i], true, true);
+            const filteredChild = this.remoteChildFilter(value, children[i], true, true);
             if (!isNullOrUndefined(filteredChild)) {
                 matchedChildren.push(filteredChild);
             }
@@ -6962,8 +7115,7 @@ let DropDownTree = class DropDownTree extends Component {
     nestedFilter(value, filteredFields) {
         const matchedDataSource = [];
         for (let i = 0; i < this.treeData.length; i++) {
-            // eslint-disable-next-line
-            const filteredChild = this.nestedChildFilter(value, this.treeData[i]);
+            const filteredChild = this.nestedChildFilter(value, this.treeData[parseInt(i.toString(), 10)]);
             if (!isNullOrUndefined(filteredChild)) {
                 matchedDataSource.push(filteredChild);
             }
@@ -6979,13 +7131,12 @@ let DropDownTree = class DropDownTree extends Component {
         else {
             const matchedChildren = [];
             for (let i = 0; i < children.length; i++) {
-                // eslint-disable-next-line
-                const filteredChild = this.nestedChildFilter(value, children[i]);
+                const filteredChild = this.nestedChildFilter(value, children[parseInt(i.toString(), 10)]);
                 if (!isNullOrUndefined(filteredChild)) {
                     matchedChildren.push(filteredChild);
                 }
             }
-            let filteredItems = Object.assign({}, node);
+            const filteredItems = Object.assign({}, node);
             if (matchedChildren.length !== 0) {
                 filteredItems[this.fields.child] = matchedChildren;
                 return filteredItems;
@@ -7007,13 +7158,11 @@ let DropDownTree = class DropDownTree extends Component {
         for (let i = 0; i < matchedData.length; i++) {
             if (matchedDataSource.indexOf(matchedData[i]) === -1) {
                 matchedDataSource.push(matchedData[i]);
-                // eslint-disable-next-line
-                let parentId = matchedData[i][this.fields.parentValue];
+                let parentId = matchedData[parseInt(i.toString(), 10)][this.fields.parentValue];
                 while (!isNullOrUndefined(parentId)) {
                     let parent = null;
                     for (let j = 0; j < this.treeData.length; j++) {
-                        // eslint-disable-next-line
-                        const value = this.treeData[j][this.fields.value];
+                        const value = this.treeData[parseInt(j.toString(), 10)][this.fields.value];
                         if (!isNullOrUndefined(value) && (value === parentId)) {
                             parent = this.treeData[j];
                             break;
@@ -7034,7 +7183,7 @@ let DropDownTree = class DropDownTree extends Component {
     }
     isMatchedNode(value, node, isChild, isChildFiltering) {
         let checkValue;
-        let isObjectValue = isChild && isChildFiltering && this.isChildObject();
+        const isObjectValue = isChild && isChildFiltering && this.isChildObject();
         checkValue = isObjectValue ? node[this.fields.child.text] : node[this.fields.text];
         if (!checkValue) {
             let tempChild = this.fields.child;
@@ -7107,6 +7256,11 @@ let DropDownTree = class DropDownTree extends Component {
         if (formElement) {
             EventHandler.remove(formElement, 'reset', this.resetValueHandler);
         }
+        this.keyboardModule.destroy();
+        if (this.showSelectAll && this.checkAllParent) {
+            EventHandler.remove(this.checkAllParent, 'mouseup', this.clickHandler);
+        }
+        EventHandler.remove(document, 'mousedown', this.onDocumentClick);
     }
     /* Trigger when the dropdown is clicked */
     dropDownClick(e) {
@@ -7310,24 +7464,6 @@ let DropDownTree = class DropDownTree extends Component {
                             this.selectAll(true);
                         }
                         break;
-                    case 'moveRight':
-                    case 'moveLeft':
-                    case 'shiftDown':
-                    case 'moveDown':
-                    case 'ctrlDown':
-                    case 'csDown':
-                    case 'shiftUp':
-                    case 'moveUp':
-                    case 'ctrlUp':
-                    case 'csUp':
-                    case 'home':
-                    case 'shiftHome':
-                    case 'ctrlHome':
-                    case 'csHome':
-                    case 'end':
-                    case 'shiftEnd':
-                    case 'ctrlEnd':
-                    case 'csEnd':
                 }
             }
             else {
@@ -7378,6 +7514,7 @@ let DropDownTree = class DropDownTree extends Component {
             cancel: false,
             event: e
         };
+        let focusedElement;
         this.trigger('keyPress', eventArgs, (observedArgs) => {
             if (!observedArgs.cancel) {
                 switch (e.action) {
@@ -7385,9 +7522,10 @@ let DropDownTree = class DropDownTree extends Component {
                         this.clickHandler(e);
                         break;
                     case 'moveDown':
-                        const focusedElement = this.treeObj.element.querySelector('li');
+                        focusedElement = this.treeObj.element.querySelector('li');
                         focusedElement.focus();
                         addClass([focusedElement], ['e-node-focus']);
+                        break;
                 }
             }
         });
@@ -7546,8 +7684,7 @@ let DropDownTree = class DropDownTree extends Component {
         return remainElement;
     }
     getOverflowVal(index) {
-        // eslint-disable-next-line
-        const selectedData = this.getSelectedData(this.value[index]);
+        const selectedData = this.getSelectedData(this.value[parseInt(index.toString(), 10)]);
         return getValue(this.treeSettings.loadOnDemand ? this.fields.text : 'text', selectedData);
     }
     updateDelimMode() {
@@ -7593,12 +7730,12 @@ let DropDownTree = class DropDownTree extends Component {
         const name = this.inputEle.getAttribute('name') ? this.inputEle.getAttribute('name') : this.inputEle.getAttribute('id');
         this.hiddenElement.setAttribute('name', name);
         this.inputEle.removeAttribute('name');
-        const attributes$$1 = ['required', 'aria-required', 'form'];
-        for (let i = 0; i < attributes$$1.length; i++) {
-            const attr = this.inputEle.getAttribute(attributes$$1[i]);
+        const attributes = ['required', 'aria-required', 'form'];
+        for (let i = 0; i < attributes.length; i++) {
+            const attr = this.inputEle.getAttribute(attributes[i]);
             if (attr) {
-                this.hiddenElement.setAttribute(attributes$$1[i], attr);
-                this.inputEle.removeAttribute(attributes$$1[i]);
+                this.hiddenElement.setAttribute(attributes[i], attr);
+                this.inputEle.removeAttribute(attributes[i]);
             }
         }
     }
@@ -7916,8 +8053,7 @@ let DropDownTree = class DropDownTree extends Component {
         let data;
         if (this.treeDataType === 1) {
             for (let i = 0; i < this.treeItems.length; i++) {
-                // eslint-disable-next-line
-                const text = getValue(this.fields.text, this.treeItems[i]);
+                const text = getValue(this.fields.text, this.treeItems[parseInt(i.toString(), 10)]);
                 if (!isNullOrUndefined(this.treeItems[i]) && !isNullOrUndefined(text) && text === givenText) {
                     data = this.treeItems[i];
                     break;
@@ -7932,14 +8068,12 @@ let DropDownTree = class DropDownTree extends Component {
     getNestedItems(data, field, givenText) {
         let newData;
         for (let i = 0, objlen = data.length; i < objlen; i++) {
-            // eslint-disable-next-line
-            const dataId = getValue(this.fields.text, data[i]);
+            const dataId = getValue(this.fields.text, data[parseInt(i.toString(), 10)]);
             if (data[i] && dataId && dataId.toString() === givenText) {
                 return data[i];
             }
             else if (typeof field.child === 'string' && !isNullOrUndefined(getValue(field.child, data[i]))) {
-                // eslint-disable-next-line
-                const childData = getValue(field.child, data[i]);
+                const childData = getValue(field.child, data[parseInt(i.toString(), 10)]);
                 newData = this.getNestedItems(childData, this.getChildType(field), givenText);
                 if (newData !== undefined) {
                     break;
@@ -7947,8 +8081,7 @@ let DropDownTree = class DropDownTree extends Component {
             }
             else if (this.fields.dataSource instanceof DataManager && !isNullOrUndefined(getValue('child', data[i]))) {
                 const child = 'child';
-                // eslint-disable-next-line
-                newData = this.getNestedItems(getValue(child, data[i]), this.getChildType(field), givenText);
+                newData = this.getNestedItems(getValue(child, data[parseInt(i.toString(), 10)]), this.getChildType(field), givenText);
                 if (newData !== undefined) {
                     break;
                 }
@@ -8037,12 +8170,10 @@ let DropDownTree = class DropDownTree extends Component {
                     this.setFooterTemplate();
                 }
                 this.isFirstRender = false;
-                /* eslint-disable */
                 if (this.hasTemplate && this.portals) {
                     if (this.treeObj.portals) {
                         this.portals = this.portals.concat(this.treeObj.portals.filter((item) => !this.portals.includes(item)));
                     }
-                    /* eslint-enable */
                     if (this.isReact) {
                         this.renderReactTemplates(this.reactCallBack);
                     }
@@ -8063,9 +8194,9 @@ let DropDownTree = class DropDownTree extends Component {
                         focusedElement.setAttribute('tabindex', '0');
                     }
                     else {
-                        let oldFocussedNode = this.treeObj.element.querySelector('.e-node-focus');
+                        const oldFocussedNode = this.treeObj.element.querySelector('.e-node-focus');
                         focusedElement = this.treeObj.element.querySelector('li:not(.e-disable):not(.e-prevent)');
-                        if (oldFocussedNode && oldFocussedNode != focusedElement) {
+                        if (oldFocussedNode && oldFocussedNode !== focusedElement) {
                             oldFocussedNode.setAttribute('tabindex', '-1');
                             removeClass([oldFocussedNode], 'e-node-focus');
                         }
@@ -8190,8 +8321,9 @@ let DropDownTree = class DropDownTree extends Component {
         const isHeader = closest(target, '.' + HEADER);
         const isFooter = closest(target, '.' + FOOTER);
         const isScroller = target.classList.contains(DROPDOWN) ? true :
-            (matches(target, '.e-ddt .e-popup') || matches(target, '.e-ddt .e-treeview'));
-        if ((this.isPopupOpen && ((!isNullOrUndefined(this.inputWrapper) && this.inputWrapper.contains(target)) || isTree || isScroller || isHeader || isFooter)) ||
+            (matches$1(target, '.e-ddt .e-popup') || matches$1(target, '.e-ddt .e-treeview'));
+        if ((this.isPopupOpen && ((!isNullOrUndefined(this.inputWrapper) &&
+            this.inputWrapper.contains(target)) || isTree || isScroller || isHeader || isFooter)) ||
             ((this.allowMultiSelection || this.showCheckBox) && (this.isPopupOpen && target.classList.contains(CHIP_CLOSE) ||
                 (this.isPopupOpen && (target.classList.contains(CHECKALLPARENT) || target.classList.contains(ALLTEXT)
                     || target.classList.contains(CHECKBOXFRAME)))))) {
@@ -8218,7 +8350,9 @@ let DropDownTree = class DropDownTree extends Component {
             removeClass([this.popupDiv], NODATA);
             this.hideCheckAll(false);
         }
-        this.treeDataType = this.getTreeDataType(this.treeItems, this.fields);
+        if (!this.isFilteredData) {
+            this.treeDataType = this.getTreeDataType(this.treeItems, this.fields);
+        }
         if (this.isFirstRender && this.isRemoteData) {
             this.setTreeValue();
             this.setTreeText();
@@ -8314,7 +8448,8 @@ let DropDownTree = class DropDownTree extends Component {
                 dataSource: fields.dataSource, value: fields.value, text: fields.text, parentValue: fields.parentValue,
                 child: (fields.child ? this.cloneChildField(fields.child) : null), hasChildren: fields.hasChildren,
                 expanded: fields.expanded, iconCss: fields.iconCss, imageUrl: fields.imageUrl, htmlAttributes: fields.htmlAttributes,
-                query: fields.query, selected: fields.selected, selectable: fields.selectable, tableName: fields.tableName, tooltip: fields.tooltip
+                query: fields.query, selected: fields.selected, selectable: fields.selectable,
+                tableName: fields.tableName, tooltip: fields.tooltip
             };
             return clonedField;
         }
@@ -8368,7 +8503,8 @@ let DropDownTree = class DropDownTree extends Component {
             if ((typeof field.child === 'string') && !isNullOrUndefined(getValue(field.child, this.fields.dataSource[i]))) {
                 return 2;
             }
-            if (!isNullOrUndefined(getValue(field.parentValue, this.fields.dataSource[i])) || !isNullOrUndefined(getValue(field.hasChildren, this.fields.dataSource[i]))) {
+            if (!isNullOrUndefined(getValue(field.parentValue, this.fields.dataSource[i])) ||
+                !isNullOrUndefined(getValue(field.hasChildren, this.fields.dataSource[i]))) {
                 return 1;
             }
         }
@@ -8517,14 +8653,13 @@ let DropDownTree = class DropDownTree extends Component {
             this.oldValue = this.value ? this.value.slice() : this.value;
         }
     }
-    onNodeExpanded(args) {
+    onNodeExpanded() {
         if (this.hasTemplate && this.portals && this.treeObj.portals) {
             for (let i = 0; i < this.treeObj.portals.length; i++) {
                 if (this.portals.indexOf(this.treeObj.portals[i]) === -1) {
                     this.portals.push(this.treeObj.portals[i]);
                 }
             }
-            /* eslint-enable */
             this.renderReactTemplates();
         }
     }
@@ -8620,7 +8755,7 @@ let DropDownTree = class DropDownTree extends Component {
         if (!this.isFilteredData) {
             this.setProperties({ value: this.isFromFilterChange && newValues && newValues.length === 0 ? this.value : newValues }, true);
             this.isFromFilterChange = false;
-            if (newValues && newValues.length !== 0 && !this.showCheckBox) {
+            if (newValues && newValues.length !== 0 && !this.showCheckBox && !this.ddtCompareValues(this.treeObj.selectedNodes, this.value.slice())) {
                 this.treeObj.selectedNodes = this.value.slice();
                 this.treeObj.dataBind();
             }
@@ -8902,7 +9037,6 @@ let DropDownTree = class DropDownTree extends Component {
     }
     templateComplier(template) {
         if (template) {
-            // eslint-disable-next-line
             try {
                 if (typeof template !== 'function' && document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
@@ -8988,7 +9122,7 @@ let DropDownTree = class DropDownTree extends Component {
         this.ensurePlaceHolder();
     }
     resetValue(isDynamicChange) {
-        if (this.value === [] && this.text == null) {
+        if (Array.isArray(this.value) && this.value.length === 0 && this.text == null) {
             return;
         }
         Input.setValue(null, this.inputEle, this.floatLabelType);
@@ -9102,9 +9236,7 @@ let DropDownTree = class DropDownTree extends Component {
     updateTemplate() {
         if (this.popupObj) {
             this.clearTemplate();
-            /* eslint-disable */
             this.portals = [];
-            /* eslint-enable */
             this.popupObj.destroy();
             if (this.isPopupOpen) {
                 this.hidePopup();
@@ -9480,22 +9612,34 @@ let DropDownTree = class DropDownTree extends Component {
         detach(this.inputWrapper);
         detach(this.popupDiv);
         detach(this.hiddenElement);
+        Input.setRipple(false, [this.inputObj]);
         this.element.classList.remove('e-input');
         if (this.showCheckBox || this.allowMultiSelection) {
             this.element.classList.remove(CHIP_INPUT);
         }
+        detach(this.inputObj.container);
+        if (this.inputObj.buttons.length) {
+            detach(this.inputObj.buttons[0]);
+        }
         this.inputObj = null;
         while (this.hiddenElement.options.length > 0) {
             this.hiddenElement.remove(0);
         }
         this.hiddenElement.innerHTML = '';
         this.hiddenElement = null;
+        this.inputWrapper.innerHTML = '';
         this.inputWrapper = null;
         this.popupDiv = null;
         this.tree = null;
         this.popupObj = null;
         this.treeObj = null;
         this.overAllClear = null;
+        if (this.chipCollection) {
+            const chipsIcons = selectAll('.e-chips-close', this.chipCollection);
+            for (const element of chipsIcons) {
+                EventHandler.remove(element, 'mousedown', this.removeChip);
+            }
+        }
         this.chipWrapper = null;
         this.chipCollection = null;
         this.checkAllParent = null;
@@ -9554,7 +9698,11 @@ let DropDownTree = class DropDownTree extends Component {
      * @returns {void}
      */
     hidePopup() {
-        const eventArgs = { popup: this.popupObj };
+        const eventArgs = { popup: this.popupObj, cancel: false };
+        this.trigger('close', eventArgs);
+        if (eventArgs.cancel) {
+            return;
+        }
         this.inputWrapper.classList.remove(ICONANIMATION);
         if (this.popupEle) {
             addClass([this.popupEle], DDTHIDEICON);
@@ -9568,7 +9716,6 @@ let DropDownTree = class DropDownTree extends Component {
                     addClass([this.inputWrapper], [INPUTFOCUS]);
                 }
             }
-            this.trigger('close', eventArgs);
             if (this.destroyPopupOnHide) {
                 this.isFirstRender = true;
                 this.destroyPopup();
@@ -9767,18 +9914,12 @@ DropDownTree = __decorate$2([
     NotifyPropertyChanges
 ], DropDownTree);
 
-/**
- * export all modules from current location
- */
-
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path='../drop-down-list/drop-down-list-model.d.ts'/>
 const SPINNER_CLASS = 'e-atc-spinner-icon';
 dropDownListClasses.root = 'e-combobox';
 const inputObject$1 = {
@@ -9896,6 +10037,18 @@ let ComboBox = class ComboBox extends DropDownList {
         }
     }
     updateValues() {
+        if (this.fields.disabled) {
+            if (this.value != null) {
+                this.value = !this.isDisableItemValue(this.value) ? this.value : null;
+            }
+            if (this.text != null) {
+                this.text = !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;
+            }
+            if (this.index != null) {
+                this.index = !this.isDisabledItemByIndex(this.index) ? this.index : null;
+                this.activeIndex = this.index;
+            }
+        }
         if (!isNullOrUndefined(this.value)) {
             let currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
             const li = this.getElementByValue(currentValue);
@@ -10142,9 +10295,9 @@ let ComboBox = class ComboBox extends DropDownList {
         const value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
         this.itemData = this.getDataByValue(value);
         const dataItem = this.getItemData();
-        const setValue$$1 = this.allowObjectBinding ? this.itemData : dataItem.value;
+        const setValue = this.allowObjectBinding ? this.itemData : dataItem.value;
         if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {
-            this.setProperties({ 'value': setValue$$1 }, !this.allowCustom);
+            this.setProperties({ 'value': setValue }, !this.allowCustom);
         }
     }
     /**
@@ -10327,6 +10480,9 @@ let ComboBox = class ComboBox extends DropDownList {
             else {
                 li = this.list.querySelector('.' + dropDownListClasses.focus);
             }
+            if (this.isDisabledElement(li)) {
+                return;
+            }
             if (li) {
                 this.setSelection(li, e);
                 this.isTyped = false;
@@ -10742,18 +10898,12 @@ ComboBox = __decorate$3([
     NotifyPropertyChanges
 ], ComboBox);
 
-/**
- * export all modules from current location
- */
-
 var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path='../combo-box/combo-box-model.d.ts'/>
 dropDownListClasses.root = 'e-autocomplete';
 dropDownListClasses.icon = 'e-input-group-icon e-ddl-icon e-search-icon';
 /**
@@ -11207,7 +11357,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
     }
 };
 __decorate$4([
-    Complex({ value: null, iconCss: null, groupBy: null }, FieldSettings)
+    Complex({ value: null, iconCss: null, groupBy: null, disabled: null }, FieldSettings)
 ], AutoComplete.prototype, "fields", void 0);
 __decorate$4([
     Property(true)
@@ -11258,10 +11408,6 @@ AutoComplete = __decorate$4([
     NotifyPropertyChanges
 ], AutoComplete);
 
-/**
- * export all modules from current location
- */
-
 /**
  * FloatLable Moduel
  * Specifies whether to display the floating label above the input element.
@@ -11423,8 +11569,6 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 const FOCUS = 'e-input-focus';
 const DISABLED$1 = 'e-disabled';
 const OVER_ALL_WRAPPER = 'e-multiselect e-input-group e-control-wrapper';
@@ -11747,13 +11891,26 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
             else {
                 if (this.enableVirtualization) {
-                    element = this.ulElement.querySelector('li.'
-                        + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                    if (this.fields.disabled) {
+                        element = this.ulElement.querySelector('li.'
+                            + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)' + ':not(.' + DISABLED$1 + ')');
+                    }
+                    else {
+                        element = this.ulElement.querySelector('li.'
+                            + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                    }
                 }
                 else {
-                    element = this.ulElement.querySelector('li.'
-                        + dropDownBaseClasses.li + ':not(.'
-                        + HIDE_LIST + ')');
+                    if (this.fields.disabled) {
+                        element = this.ulElement.querySelector('li.'
+                            + dropDownBaseClasses.li + ':not(.'
+                            + HIDE_LIST + ')' + ':not(.' + DISABLED$1 + ')');
+                    }
+                    else {
+                        element = this.ulElement.querySelector('li.'
+                            + dropDownBaseClasses.li + ':not(.'
+                            + HIDE_LIST + ')');
+                    }
                 }
             }
             if (element !== null) {
@@ -12213,9 +12370,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (filterQuery.queries[queryElements].fn === 'onSkip') {
                 isSkip = false;
             }
-            if (filterQuery.queries[queryElements].fn === 'onTake') {
-                
-            }
+            if (filterQuery.queries[queryElements].fn === 'onTake') ;
         }
         let queryTakeValue = 0;
         if (filterQuery && filterQuery.queries.length > 0) {
@@ -13203,7 +13358,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.list.scrollTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.virtualListInfo.startIndex * this.listItemHeight : 0;
             }
             isScrollerCHanged = this.isKeyBoardAction;
-            
         }
         this.isKeyBoardAction = isScrollerCHanged;
     }
@@ -13480,6 +13634,21 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 }
             }
         }
+        const focusedLi = this.list ? this.list.querySelector('.e-item-focus') : null;
+        if (this.isDisabledElement(focusedLi)) {
+            if (this.list.querySelectorAll('.e-list-item:not(.e-hide-listitem):not(.e-disabled)').length === 0) {
+                this.removeFocus();
+                return;
+            }
+            const index = this.getIndexByValue(focusedLi.getAttribute('data-value'));
+            if (index === 0 && this.mode !== 'CheckBox') {
+                position = 1;
+            }
+            if (index === (this.list.querySelectorAll('.e-list-item:not(.e-hide-listitem)').length - 1)) {
+                position = -1;
+            }
+            this.moveByList(position);
+        }
     }
     getElementByValue(value) {
         let item;
@@ -13668,7 +13837,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     }
                     this.setProperties({ value: [].concat([], removeVal) }, true);
                     if (this.enableVirtualization) {
-                        let currentText = index == 0 ? this.text.replace(this.text.split(this.delimiterChar)[index] + this.delimiterChar, '') : this.text.replace(this.delimiterChar + this.text.split(this.delimiterChar)[index], '');
+                        let currentText = index == 0 && this.text.split(this.delimiterChar) && this.text.split(this.delimiterChar).length == 1 ? this.text.replace(this.text.split(this.delimiterChar)[index], '') : index == 0 ? this.text.replace(this.text.split(this.delimiterChar)[index] + this.delimiterChar, '') : this.text.replace(this.delimiterChar + this.text.split(this.delimiterChar)[index], '');
                         this.setProperties({ text: currentText.toString() }, true);
                     }
                     if (element !== null) {
@@ -15049,7 +15218,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     addListFocus(element) {
-        if (this.enabled && this.isValidLI(element)) {
+        if (this.enabled && (this.isValidLI(element) || (this.fields.disabled && this.isDisabledElement(element)))) {
             this.removeFocus();
             addClass([element], dropDownBaseClasses.focus);
             this.updateAriaActiveDescendant();
@@ -15639,14 +15808,14 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         let li;
         if (!isNullOrUndefined(this.list)) {
             li = this.list.querySelectorAll(state ?
-                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide):not(.e-virtual-list)' :
-                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide):not(.e-virtual-list)');
+                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)' :
+                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)');
         }
         if (this.value && this.value.length && event && event.target
             && closest(event.target, '.e-close-hooker') && this.allowFiltering) {
             li = this.mainList.querySelectorAll(state ?
-                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide):not(.e-virtual-list)' :
-                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide):not(.e-virtual-list)');
+                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)' :
+                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)');
         }
         if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
             let target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);
@@ -16089,9 +16258,16 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.updateClearButton(newProp.showClearButton);
                     break;
                 case 'text':
+                    if (this.fields.disabled) {
+                        this.text =
+                            this.text && !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;
+                    }
                     this.updateVal(this.value, this.value, 'text');
                     break;
                 case 'value':
+                    if (this.fields.disabled) {
+                        this.removeDisabledItemsValue(this.value);
+                    }
                     this.updateVal(this.value, oldProp.value, 'value');
                     this.addValidInputClass();
                     if (!this.closePopupOnSelect && this.isPopupOpen()) {
@@ -16338,7 +16514,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             const animModel = {
                 name: 'FadeOut',
                 duration: 100,
-                delay: delay ? delay : 0
+                delay:  delay 
             };
             this.customFilterQuery = null;
             const eventArgs = { popup: this.popupObj, cancel: false, animation: animModel, event: e || null };
@@ -16658,7 +16834,32 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         listParent.remove();
         return listItemHeight;
     }
+    /**
+     * Removes disabled values from the given array.
+     *
+     * @param { number[] | string[] | boolean[] | object[] } value - The array to check.
+     * @returns {void}
+     */
+    removeDisabledItemsValue(value) {
+        if (value) {
+            const data = [];
+            let dataIndex = 0;
+            for (let index = 0; index < value.length; index++) {
+                let indexValue = value[index];
+                if (typeof (indexValue) === 'object') {
+                    indexValue = JSON.parse(JSON.stringify(indexValue))[this.fields.value];
+                }
+                if ((indexValue != null) && !(this.isDisabledItemByIndex(this.getIndexByValue(indexValue)))) {
+                    data[dataIndex++] = value[index];
+                }
+            }
+            this.value = data.length > 0 ? data : null;
+        }
+    }
     checkInitialValue() {
+        if (this.fields.disabled) {
+            this.removeDisabledItemsValue(this.value);
+        }
         const isData = this.dataSource instanceof Array ? (this.dataSource.length > 0)
             : !isNullOrUndefined(this.dataSource);
         if (!(this.value && this.value.length) &&
@@ -16697,6 +16898,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 super.render();
             }
         }
+        if (this.fields.disabled) {
+            this.text = this.text && !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;
+        }
         if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {
             this.initialTextUpdate();
         }
@@ -16830,6 +17034,66 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.refreshInputHight();
         this.checkPlaceholderSize();
     }
+    /**
+     * Method to disable specific item in the popup.
+     *
+     * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
+     * @returns {void}
+     * @deprecated
+     */
+    disableItem(item) {
+        if (this.fields.disabled) {
+            if (!this.list) {
+                this.renderList();
+            }
+            let itemIndex = -1;
+            if (this.liCollections && this.liCollections.length > 0 && this.listData && this.fields.disabled) {
+                if (typeof (item) === 'string') {
+                    itemIndex = this.getIndexByValue(item);
+                }
+                else if (typeof item === 'object') {
+                    if (item instanceof HTMLLIElement) {
+                        for (let index = 0; index < this.liCollections.length; index++) {
+                            if (this.liCollections[index] === item) {
+                                itemIndex = this.getIndexByValue(item.getAttribute('data-value'));
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        const value = JSON.parse(JSON.stringify(item))[this.fields.value];
+                        for (let index = 0; index < this.listData.length; index++) {
+                            if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.value] === value) {
+                                itemIndex = this.getIndexByValue(value);
+                                break;
+                            }
+                        }
+                    }
+                }
+                else {
+                    itemIndex = item;
+                }
+                const isValidIndex = itemIndex < this.liCollections.length && itemIndex > -1;
+                if (isValidIndex && !(JSON.parse(JSON.stringify(this.listData[itemIndex]))[this.fields.disabled])) {
+                    const li = this.liCollections[itemIndex];
+                    if (li) {
+                        this.disableListItem(li);
+                        const parsedData = JSON.parse(JSON.stringify(this.listData[itemIndex]));
+                        parsedData[this.fields.disabled] = true;
+                        this.listData[itemIndex] = parsedData;
+                        if (li.classList.contains(dropDownBaseClasses.focus)) {
+                            this.removeFocus();
+                        }
+                        if (li.classList.contains(HIDE_LIST) || li.classList.contains(dropDownBaseClasses.selected)) {
+                            const oldValue = this.value;
+                            this.removeDisabledItemsValue(this.value);
+                            this.updateVal(this.value, oldValue, 'value');
+                        }
+                    }
+                }
+            }
+        }
+    }
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
      *
@@ -16898,7 +17162,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
 };
 __decorate$5([
-    Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
+    Complex({ text: null, value: null, iconCss: null, groupBy: null, disabled: null }, FieldSettings)
 ], MultiSelect.prototype, "fields", void 0);
 __decorate$5([
     Property(false)
@@ -17280,12 +17544,12 @@ class CheckBoxSelection {
         }
         if (!isNullOrUndefined(this.checkWrapper)) {
             const checkElement = select('.' + CHECKBOXFRAME$1, this.checkWrapper);
-            const selectAll$$1 = false;
-            this.validateCheckNode(this.checkWrapper, checkElement.classList.contains(CHECK$1), args.li, args.e, selectAll$$1);
+            const selectAll = false;
+            this.validateCheckNode(this.checkWrapper, checkElement.classList.contains(CHECK$1), args.li, args.e, selectAll);
         }
     }
-    validateCheckNode(checkWrap, isCheck, li, e, selectAll$$1) {
-        this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true, selectAll$$1);
+    validateCheckNode(checkWrap, isCheck, li, e, selectAll) {
+        this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true, selectAll);
     }
     clickHandler(e) {
         let target;
@@ -17296,26 +17560,26 @@ class CheckBoxSelection {
             target = e.currentTarget;
         }
         this.checkWrapper = closest(target, '.' + CHECKBOXWRAP$1);
-        const selectAll$$1 = true;
+        const selectAll = true;
         if (!isNullOrUndefined(this.checkWrapper)) {
             const checkElement = select('.' + CHECKBOXFRAME$1, this.checkWrapper);
-            this.validateCheckNode(this.checkWrapper, checkElement.classList.contains(CHECK$1), null, e, selectAll$$1);
+            this.validateCheckNode(this.checkWrapper, checkElement.classList.contains(CHECK$1), null, e, selectAll);
         }
         e.preventDefault();
     }
-    changeState(wrapper, state, e, isPrevent, selectAll$$1) {
+    changeState(wrapper, state, e, isPrevent, selectAll) {
         const frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME$1)[0];
         if (state === 'check' && !frameSpan.classList.contains(CHECK$1)) {
             frameSpan.classList.remove(INDETERMINATE);
             frameSpan.classList.add(CHECK$1);
-            if (selectAll$$1) {
+            if (selectAll) {
                 this.parent.selectAllItems(true, e);
                 this.setLocale(true);
             }
         }
         else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK$1) || frameSpan.classList.contains(INDETERMINATE))) {
             removeClass([frameSpan], [CHECK$1, INDETERMINATE]);
-            if (selectAll$$1) {
+            if (selectAll) {
                 this.parent.selectAllItems(false, e);
                 this.setLocale();
             }
@@ -17323,7 +17587,7 @@ class CheckBoxSelection {
         else if (state === 'indeterminate' && !(frameSpan.classList.contains(INDETERMINATE))) {
             removeClass([frameSpan], [CHECK$1]);
             frameSpan.classList.add(INDETERMINATE);
-            if (selectAll$$1) {
+            if (selectAll) {
                 this.parent.selectAllItems(false, e);
                 this.setLocale();
             }
@@ -17613,10 +17877,6 @@ class CheckBoxSelection {
     }
 }
 
-/**
- * export all modules from current location
- */
-
 var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -17624,8 +17884,6 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var ListBox_1;
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 /**
  * Defines the Selection settings of List Box.
  */
@@ -17726,6 +17984,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         const hiddenSelect = this.createElement('select', { className: 'e-hidden-select', attrs: { 'multiple': '' } });
         hiddenSelect.style.visibility = 'hidden';
         this.list.classList.add('e-listbox-wrapper');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.list.querySelector('.e-list-parent').setAttribute('role', 'presentation');
         const groupHdrs = this.list.querySelectorAll('.e-list-group-item');
         for (let i = 0; i < groupHdrs.length; i++) {
@@ -17744,7 +18003,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             }
         }
         else {
-            if (this.initLoad) {
+            if (this.initLoad && this.element.parentElement) {
                 this.element.parentElement.insertBefore(this.list, this.element);
             }
             this.list.insertBefore(this.element, this.list.firstChild);
@@ -17811,6 +18070,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     initToolbar() {
         const pos = this.toolbarSettings.position;
         const prevScope = this.element.getAttribute('data-value');
+        this.toolbarSettings.items = isNullOrUndefined(this.toolbarSettings.items) ? [] : this.toolbarSettings.items;
         if (this.toolbarSettings.items.length) {
             const toolElem = this.createElement('div', { className: 'e-listbox-tool', attrs: { 'role': 'toolbar' } });
             const wrapper = this.createElement('div', {
@@ -17904,7 +18164,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             this.spinner = this.createElement('div', { className: 'e-listbox-wrapper' });
         }
         this.spinner.style.height = formatUnit(this.height);
-        this.element.parentElement.insertBefore(this.spinner, this.element.nextSibling);
+        if (this.element.parentElement) {
+            this.element.parentElement.insertBefore(this.spinner, this.element.nextSibling);
+        }
         createSpinner({ target: this.spinner }, this.createElement);
         showSpinner(this.spinner);
     }
@@ -17964,7 +18226,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             this.list.insertBefore(searchEle, this.list.firstElementChild);
             this.filterParent = this.list.getElementsByClassName('e-filter-parent')[0];
             this.filterWireEvents(searchEle);
-            let inputSearch = searchEle.querySelector('.e-input-filter');
+            const inputSearch = searchEle.querySelector('.e-input-filter');
             if (inputSearch) {
                 inputSearch.addEventListener('focus', function () {
                     if (!searchEle.childNodes[0].classList.contains('e-input-focus')) {
@@ -18102,7 +18364,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     }
     beforeDragEnd(args) {
         this.stopTimer();
-        let items = [];
+        const items = [];
         this.dragValue = this.getFormattedValue(args.droppedElement.getAttribute('data-value'));
         if (this.value.indexOf(this.dragValue) > -1) {
             args.items = this.getDataByValues(this.value);
@@ -18207,7 +18469,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             }
             const fListData = [].slice.call(this.listData);
             const fSortData = [].slice.call(this.sortedData);
-            selectedOptions.forEach((value, index) => {
+            selectedOptions.forEach((value) => {
                 droppedData = this.getDataByValue(value);
                 const srcIdx = this.listData.indexOf(droppedData);
                 const jsonSrcIdx = this.jsonData.indexOf(droppedData);
@@ -18390,7 +18652,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
         this.setSelection(items, state, !isValue);
         this.updateSelectedOptions();
-        let selElems = [];
+        const selElems = [];
         for (let i = 0; i < items.length; i++) {
             const liColl = this.list.querySelectorAll('[aria-selected="true"]');
             for (let j = 0; j < liColl.length; j++) {
@@ -18745,6 +19007,10 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
     }
     clickHandler(e) {
+        const li = closest(e.target, '.' + 'e-list-item');
+        if (isNullOrUndefined(li)) {
+            return;
+        }
         this.selectHandler(e);
     }
     checkSelectAll() {
@@ -19232,6 +19498,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         }
         for (let i = 0; i < fListBox.ulElement.childElementCount; i++) {
             if (fListBox.ulElement.childNodes[i].classList.contains('e-disabled')) {
+                // eslint-disable-next-line @typescript-eslint/tslint/config
                 flistboxarray = flistboxarray.filter(function (item) { return item !== i; });
                 tempLiColl.push(fListBox.ulElement.childNodes[i]);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -19557,10 +19824,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
     }
     dataUpdater(dataSource, query, fields) {
         this.isDataFetched = false;
-        const backCommand = true;
         if (this.targetElement().trim() === '') {
             let list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
-            if (backCommand) {
+            {
                 this.remoteCustomValue = false;
                 if (this.isAngular && this.itemTemplate) {
                     list = this.renderItems(this.listData, fields);
@@ -19644,7 +19910,9 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
             });
         }
     }
-    setSelection(values = this.value, isSelect = true, isText = false, canFocus = true) {
+    setSelection(
+    // eslint-disable-next-line max-len
+    values = this.value, isSelect = true, isText = false, canFocus = true) {
         let li;
         let liselect;
         if (values) {
@@ -19664,21 +19932,21 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                     li = this.list.querySelector('[data-value="' + text + '"]');
                 }
                 if (li) {
-                    if (this.selectionSettings.showCheckbox) {
+                    if (this.selectionSettings.showCheckbox && !li.classList.contains('e-disabled')) {
                         liselect = li.getElementsByClassName('e-frame')[0].classList.contains('e-check');
                     }
                     else {
                         liselect = li.classList.contains('e-selected');
                     }
                     if (!isSelect && liselect || isSelect && !liselect && li) {
-                        if (this.selectionSettings.showCheckbox) {
+                        if (this.selectionSettings.showCheckbox && !li.classList.contains('e-disabled')) {
                             this.notify('updatelist', { li: li, module: 'listbox' });
                             if (canFocus) {
                                 li.focus();
                             }
                         }
                         else {
-                            if (isSelect) {
+                            if (isSelect && !li.classList.contains('e-disabled')) {
                                 li.classList.add(cssClass.selected);
                                 li.setAttribute('aria-selected', 'true');
                                 if (canFocus) {
@@ -19712,7 +19980,17 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         this.checkSelectAll();
     }
     checkDisabledState(inst) {
-        return inst.ulElement.querySelectorAll('.' + cssClass.li).length === 0;
+        if (isNullOrUndefined(inst.ulElement)) {
+            if (!isNullOrUndefined(this.dataSource) && isNullOrUndefined(this.dataSource.length)) {
+                return false;
+            }
+            else {
+                return true;
+            }
+        }
+        else {
+            return inst.ulElement.querySelectorAll('.' + cssClass.li).length === 0;
+        }
     }
     updateToolBarState() {
         if (this.toolbarSettings.items.length) {
@@ -19948,6 +20226,7 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                         }
                     }
                     if (newProp.toolbarSettings.items) {
+                        oldProp.toolbarSettings.items = isNullOrUndefined(oldProp.toolbarSettings.items) ? [] : oldProp.toolbarSettings.items;
                         if (oldProp.toolbarSettings && oldProp.toolbarSettings.items.length) {
                             ele = this.list.parentElement;
                             ele.parentElement.insertBefore(this.list, ele);
@@ -20082,10 +20361,6 @@ const listBoxClasses = {
     clearIcon: 'e-clear-icon'
 };
 
-/**
- * export all modules from current location
- */
-
 var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -20152,12 +20427,12 @@ let Mention = class Mention extends DropDownBase {
             this.setCssClass(newClass, [this.popupObj.element], oldClass);
         }
     }
-    setCssClass(cssClass$$1, elements, oldClass) {
+    setCssClass(cssClass, elements, oldClass) {
         if (!isNullOrUndefined(oldClass) && oldClass !== '') {
             removeClass(elements, oldClass.split(' '));
         }
-        if (!isNullOrUndefined(cssClass$$1) && cssClass$$1 !== '') {
-            addClass(elements, cssClass$$1.split(' '));
+        if (!isNullOrUndefined(cssClass) && cssClass !== '') {
+            addClass(elements, cssClass.split(' '));
         }
     }
     initializeData() {
@@ -20362,6 +20637,9 @@ let Mention = class Mention extends DropDownBase {
         }
     }
     updateUpDownAction(e) {
+        if (this.fields.disabled && this.list && this.list.querySelectorAll('.e-list-item:not(.e-disabled)').length === 0) {
+            return;
+        }
         const focusEle = this.list.querySelector('.' + dropDownBaseClasses.focus);
         if (this.isSelectFocusItem(focusEle)) {
             this.setSelection(focusEle, e);
@@ -20382,6 +20660,17 @@ let Mention = class Mention extends DropDownBase {
                 this.setSelection(nextItem, e);
             }
         }
+        let itemIndex;
+        for (let index = 0; index < this.liCollections.length; index++) {
+            if (this.liCollections[index].classList.contains(dropDownBaseClasses.focus)
+                || this.liCollections[index].classList.contains(dropDownBaseClasses.selected)) {
+                itemIndex = index;
+                break;
+            }
+        }
+        if (itemIndex != null && this.isDisabledElement(this.liCollections[itemIndex])) {
+            this.updateUpDownAction(e);
+        }
         if (this.isPopupOpen) {
             e.preventDefault();
         }
@@ -20556,7 +20845,7 @@ let Mention = class Mention extends DropDownBase {
             if (!isNullOrUndefined(ulElement)) {
                 attributes(ulElement, { 'id': this.inputElement.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
             }
-            let focusItem = ulElement.querySelector('.' + dropDownBaseClasses.li);
+            let focusItem = this.fields.disabled ? ulElement.querySelector('.' + dropDownBaseClasses.li + ':not(.e-disabled)') : ulElement.querySelector('.' + dropDownBaseClasses.li);
             if (focusItem) {
                 focusItem.classList.add(dropDownBaseClasses.selected);
                 this.selectedLI = focusItem;
@@ -20782,10 +21071,10 @@ let Mention = class Mention extends DropDownBase {
                     }
                 }
                 append([this.list], popupEle);
-                if (this.inputElement.parentElement && this.inputElement.parentElement.parentElement &&
-                    this.inputElement.parentElement.parentElement.classList.contains('e-richtexteditor')) {
-                    if (popupEle.firstElementChild && popupEle.firstElementChild.childElementCount > 0) {
-                        popupEle.firstElementChild.setAttribute('aria-owns', this.inputElement.parentElement.parentElement.id);
+                if (this.inputElement.parentElement) {
+                    const rteRootElement = this.inputElement.parentElement.closest('.e-richtexteditor');
+                    if (rteRootElement && popupEle.firstElementChild && popupEle.firstElementChild.childElementCount > 0) {
+                        popupEle.firstElementChild.setAttribute('aria-owns', rteRootElement.id);
                         addClass([popupEle], 'e-rte-elements');
                     }
                 }
@@ -21087,7 +21376,7 @@ let Mention = class Mention extends DropDownBase {
     onMouseClick(e) {
         const target = e.target;
         const li = closest(target, '.' + dropDownBaseClasses.li);
-        if (!this.isValidLI(li)) {
+        if (!this.isValidLI(li) || this.isDisabledElement(li)) {
             return;
         }
         this.isSelected = true;
@@ -21317,6 +21606,7 @@ let Mention = class Mention extends DropDownBase {
             }
             this.isTyped = false;
             range.deleteContents();
+            range.startContainer.parentElement.normalize();
             const element = this.createElement('div');
             element.innerHTML = value;
             const frag = document.createDocumentFragment();
@@ -21342,7 +21632,6 @@ let Mention = class Mention extends DropDownBase {
                 const event = new CustomEvent('content-changed', { detail: { click: true } });
                 this.inputElement.dispatchEvent(event);
             }
-            
             this.onChangeEvent(e);
         }
     }
@@ -21353,10 +21642,10 @@ let Mention = class Mention extends DropDownBase {
         }
         if (this.isContentEditable(this.inputElement)) {
             if (Browser.isAndroid) {
-                return '<span contenteditable="true" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
+                return '<span contenteditable="true" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : '');
             }
             else {
-                return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
+                return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : '');
             }
         }
         else {
@@ -21710,13 +21999,5 @@ Mention = __decorate$7([
     NotifyPropertyChanges
 ], Mention);
 
-/**
- * export all modules from current location
- */
-
-/**
- * export all modules from current location
- */
-
-export { incrementalSearch, Search, escapeCharRegExp, resetIncrementalSearchValues, highlightSearch, revertHighlightSearch, VirtualScroll, FieldSettings, dropDownBaseClasses, DropDownBase, dropDownListClasses, DropDownList, Fields, TreeSettings, DropDownTree, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, createFloatLabel, updateFloatLabelState, removeFloating, setPlaceHolder, floatLabelFocus, floatLabelBlur, encodePlaceholder, SelectionSettings, ToolbarSettings, ListBox, Mention };
+export { AutoComplete, CheckBoxSelection, ComboBox, DropDownBase, DropDownList, DropDownTree, FieldSettings, Fields, ListBox, Mention, MultiSelect, Search, SelectionSettings, ToolbarSettings, TreeSettings, VirtualScroll, createFloatLabel, dropDownBaseClasses, dropDownListClasses, encodePlaceholder, escapeCharRegExp, floatLabelBlur, floatLabelFocus, highlightSearch, incrementalSearch, removeFloating, resetIncrementalSearchValues, revertHighlightSearch, setPlaceHolder, updateFloatLabelState };
 //# sourceMappingURL=ej2-dropdowns.es2015.js.map