@syncfusion/ej2-dropdowns 24.2.9 → 25.1.37

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

@@ -23,6 +23,7 @@ import { NotifyPropertyChanges, rippleEffect, ChildProperty, Complex } from '@sy
 import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';
 import { ListBase } from '@syncfusion/ej2-lists';
 import { select, selectAll } from '@syncfusion/ej2-base';
+import { Skeleton } from '@syncfusion/ej2-notifications';
 var FieldSettings = /** @class */ (function (_super) {
     __extends(FieldSettings, _super);
     function FieldSettings() {
@@ -58,7 +59,8 @@ export var dropDownBaseClasses = {
     li: 'e-list-item',
     group: 'e-list-group-item',
     disabled: 'e-disabled',
-    grouping: 'e-dd-group'
+    grouping: 'e-dd-group',
+    virtualList: 'e-list-item e-virtual-list',
 };
 var ITEMTEMPLATE_PROPERTY = 'ItemTemplate';
 var DISPLAYTEMPLATE_PROPERTY = 'DisplayTemplate';
@@ -92,13 +94,63 @@ var DropDownBase = /** @class */ (function (_super) {
         _this.isAddNewItemTemplate = false;
         _this.isRequesting = false;
         _this.isVirtualizationEnabled = false;
+        _this.isCustomDataUpdated = false;
         _this.isAllowFiltering = false;
         _this.virtualizedItemsCount = 0;
+        _this.isCheckBoxSelection = false;
         _this.totalItemCount = 0;
         _this.dataCount = 0;
         _this.isRemoteDataUpdated = false;
         _this.isIncrementalRequest = false;
         _this.itemCount = 10;
+        _this.virtualListHeight = 0;
+        _this.isVirtualScrolling = false;
+        _this.isPreventScrollAction = false;
+        _this.scrollPreStartIndex = 0;
+        _this.isScrollActionTriggered = false;
+        _this.previousStartIndex = 0;
+        _this.isMouseScrollAction = false;
+        _this.isKeyBoardAction = false;
+        _this.isScrollChanged = false;
+        _this.isUpwardScrolling = false;
+        _this.startIndex = 0;
+        _this.currentPageNumber = 0;
+        _this.pageCount = 0;
+        _this.isPreventKeyAction = false;
+        _this.generatedDataObject = {};
+        _this.skeletonCount = 32;
+        _this.isVirtualTrackHeight = false;
+        _this.virtualSelectAll = false;
+        _this.incrementalQueryString = '';
+        _this.incrementalEndIndex = 0;
+        _this.incrementalStartIndex = 0;
+        _this.incrementalPreQueryString = '';
+        _this.isObjectCustomValue = false;
+        _this.appendUncheckList = false;
+        _this.virtualListInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
+        _this.viewPortInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
+        _this.selectedValueInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
         return _this;
     }
     DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {
@@ -312,6 +364,124 @@ var DropDownBase = /** @class */ (function (_super) {
             }
         }
     };
+    DropDownBase.prototype.checkAndResetCache = function () {
+        if (this.isVirtualizationEnabled) {
+            this.generatedDataObject = {};
+            this.virtualItemStartIndex = this.virtualItemEndIndex = 0;
+            this.viewPortInfo = {
+                currentPageNumber: null,
+                direction: null,
+                sentinelInfo: {},
+                offsets: {},
+                startIndex: 0,
+                endIndex: this.itemCount,
+            };
+            this.selectedValueInfo = null;
+        }
+    };
+    DropDownBase.prototype.updateIncrementalInfo = function (startIndex, endIndex) {
+        this.viewPortInfo.startIndex = startIndex;
+        this.viewPortInfo.endIndex = endIndex;
+        this.updateVirtualItemIndex();
+        this.isIncrementalRequest = true;
+        this.resetList(this.dataSource, this.fields, this.query);
+        this.isIncrementalRequest = false;
+    };
+    DropDownBase.prototype.updateIncrementalView = function (startIndex, endIndex) {
+        this.viewPortInfo.startIndex = startIndex;
+        this.viewPortInfo.endIndex = endIndex;
+        this.updateVirtualItemIndex();
+        this.resetList(this.dataSource, this.fields, this.query);
+        this.UpdateSkeleton();
+        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+        this.ulElement = this.list.querySelector('ul');
+    };
+    DropDownBase.prototype.updateVirtualItemIndex = function () {
+        this.virtualItemStartIndex = this.viewPortInfo.startIndex;
+        this.virtualItemEndIndex = this.viewPortInfo.endIndex;
+        this.virtualListInfo = this.viewPortInfo;
+    };
+    DropDownBase.prototype.getFilteringSkeletonCount = function () {
+        var difference = this.dataCount - this.viewPortInfo.endIndex;
+        var currentSkeletonCount = this.skeletonCount;
+        this.getSkeletonCount(true);
+        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : difference > this.skeletonCount ? this.skeletonCount : difference > 0 ? difference : 0;
+        var skeletonUpdated = true;
+        if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && (this.totalItemCount < (this.itemCount * 2))) {
+            this.skeletonCount = 0;
+            skeletonUpdated = false;
+        }
+        if (!this.list.classList.contains(dropDownBaseClasses.noData)) {
+            var isSkeletonCountChange = currentSkeletonCount !== this.skeletonCount;
+            if (currentSkeletonCount !== this.skeletonCount && skeletonUpdated) {
+                this.UpdateSkeleton(true, Math.abs(currentSkeletonCount - this.skeletonCount));
+            }
+            else {
+                this.UpdateSkeleton();
+            }
+            this.liCollections = this.list.querySelectorAll('.e-list-item');
+            if ((this.list.getElementsByClassName('e-virtual-ddl').length > 0)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+            }
+            else if (!this.list.querySelector('.e-virtual-ddl') && this.skeletonCount > 0 && this.list.querySelector('.e-dropdownbase')) {
+                var virualElement = this.createElement('div', {
+                    id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                });
+                this.list.querySelector('.e-dropdownbase').appendChild(virualElement);
+            }
+            if (this.list.getElementsByClassName('e-virtual-ddl-content').length > 0) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+            }
+        }
+    };
+    DropDownBase.prototype.getSkeletonCount = function (retainSkeleton) {
+        this.virtualListHeight = this.listContainerHeight != null ? parseInt(this.listContainerHeight, 10) : this.virtualListHeight;
+        var actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
+        this.skeletonCount = actualCount * 2 < this.itemCount ? this.itemCount : actualCount * 2;
+        this.itemCount = retainSkeleton ? this.itemCount : this.skeletonCount;
+        this.skeletonCount = Math.floor(this.skeletonCount / 2) + 2;
+    };
+    DropDownBase.prototype.GetVirtualTrackHeight = function () {
+        var height = this.totalItemCount === this.viewPortInfo.endIndex ? this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
+        height = this.isVirtualTrackHeight ? 0 : height;
+        var heightDimension = "height: " + (height - this.itemCount * this.listItemHeight) + "px;";
+        if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && this.skeletonCount === 0) {
+            return "height: 0px;";
+        }
+        return heightDimension;
+    };
+    DropDownBase.prototype.getTransformValues = function () {
+        var 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;
+        var styleText = "transform: translate(0px, " + translateY + "px);";
+        return styleText;
+    };
+    DropDownBase.prototype.UpdateSkeleton = function (isSkeletonCountChange, skeletonCount) {
+        var isContainSkeleton = this.list.querySelector('.e-virtual-ddl-content');
+        var isContainVirtualList = this.list.querySelector('.e-virtual-list');
+        if (isContainSkeleton && (!isContainVirtualList || isSkeletonCountChange) && this.isVirtualizationEnabled) {
+            var totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
+            for (var i = 0; i < totalSkeletonCount; i++) {
+                var liElement = this.createElement('li', { className: dropDownBaseClasses.virtualList, styles: 'overflow: inherit' });
+                if (this.isVirtualizationEnabled && this.itemTemplate) {
+                    liElement.style.height = this.listItemHeight + 'px';
+                }
+                var skeleton = new Skeleton({
+                    shape: "Text",
+                    height: "10px",
+                    width: "95%",
+                    cssClass: "e-skeleton-text",
+                });
+                skeleton.appendTo(this.createElement('div'));
+                liElement.appendChild(skeleton.element);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                isContainSkeleton.firstChild && isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
+            }
+        }
+    };
     DropDownBase.prototype.getLocaleName = function () {
         return 'drop-down-base';
     };
@@ -560,31 +730,52 @@ var DropDownBase = /** @class */ (function (_super) {
                     }
                     else {
                         _this.isRequesting = false;
+                        var isReOrder = true;
                         var listItems = void 0;
                         if (_this.isVirtualizationEnabled && !_this.virtualGroupDataSource && _this.fields.groupBy) {
                             var data = new DataManager(_this.dataSource).executeLocal(new Query().group(_this.fields.groupBy));
                             _this.virtualGroupDataSource = data.records;
                         }
-                        var dataManager = _this.isVirtualizationEnabled && _this.virtualGroupDataSource ? new DataManager(_this.virtualGroupDataSource) : new DataManager(eventArgs.data);
+                        var dataManager = _this.isVirtualizationEnabled && _this.virtualGroupDataSource && !_this.isCustomDataUpdated ? new DataManager(_this.virtualGroupDataSource) : new DataManager(eventArgs.data);
                         listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
-                        if (_this.isVirtualizationEnabled && _this.getModuleName() === 'autocomplete' && (listItems.count != 0 && listItems.count < (_this.itemCount * 2))) {
+                        if (!_this.virtualSelectAll) {
                             var newQuery = _this.getQuery(eventArgs.query);
-                            if (newQuery) {
-                                for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
-                                    if (newQuery.queries[queryElements].fn === 'onTake') {
-                                        newQuery.queries[queryElements].e.nos = listItems.count;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            if (_this.isVirtualizationEnabled && (listItems.count != 0 && listItems.count < (_this.itemCount * 2))) {
+                                if (newQuery) {
+                                    for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                        if (newQuery.queries[queryElements].fn === 'onTake') {
+                                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                            newQuery.queries[queryElements].e.nos = listItems.count;
+                                            listItems = (newQuery).executeLocal(dataManager);
+                                        }
+                                        if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition == 'or' || newQuery.queries[queryElements].e.operator == 'equal')) {
+                                            isReOrder = false;
+                                        }
+                                    }
+                                    if (isReOrder) {
                                         listItems = (newQuery).executeLocal(dataManager);
-                                        break;
+                                        _this.isVirtualTrackHeight = true;
                                     }
                                 }
                             }
+                            else {
+                                _this.isVirtualTrackHeight = false;
+                                if (newQuery) {
+                                    for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                        if (_this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition == 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator == 'equal'))) {
+                                            isReOrder = false;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                        if (isReOrder) {
+                            // eslint-disable @typescript-eslint/no-explicit-any
+                            _this.dataCount = _this.totalItemCount = _this.virtualSelectAll ? listItems.length : listItems.count;
                         }
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        _this.dataCount = listItems.count;
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        _this.totalItemCount = listItems.count;
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        listItems = _this.isVirtualizationEnabled ? listItems.result : listItems;
+                        listItems = _this.isVirtualizationEnabled && !_this.virtualSelectAll ? listItems.result : listItems;
+                        // eslint-enable @typescript-eslint/no-explicit-any
                         var localDataArgs = { cancel: false, result: listItems };
                         _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
                         _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {
@@ -632,6 +823,13 @@ var DropDownBase = /** @class */ (function (_super) {
             this.raiseDataBound(listItems, e);
         }
     };
+    DropDownBase.prototype.isObjectInArray = function (objectToFind, array) {
+        return array.some(function (item) {
+            return Object.keys(objectToFind).every(function (key) {
+                return item.hasOwnProperty(key) && item[key] === objectToFind[key];
+            });
+        });
+    };
     DropDownBase.prototype.updateListValues = function () {
         // Used this method in component side.
     };
@@ -672,6 +870,7 @@ var DropDownBase = /** @class */ (function (_super) {
         var listItems = [];
         this.onActionComplete(this.renderItems(listItems, fields), listItems);
         this.isRequested = false;
+        this.isRequesting = false;
         this.hideSpinner();
     };
     DropDownBase.prototype.showSpinner = function () {
@@ -692,7 +891,7 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {
         /* eslint-enable @typescript-eslint/no-unused-vars */
         this.listData = list;
-        if (this.isVirtualizationEnabled) {
+        if (this.isVirtualizationEnabled && !this.isCustomDataUpdated) {
             this.notify("setGeneratedData", {
                 module: "VirtualScroll",
             });
@@ -751,10 +950,11 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.getQuery = function (query) {
         return query ? query : this.query ? this.query : new Query();
     };
-    DropDownBase.prototype.updateVirtualizationProperties = function (itemCount, filtering) {
+    DropDownBase.prototype.updateVirtualizationProperties = function (itemCount, filtering, isCheckbox) {
         this.isVirtualizationEnabled = true;
         this.virtualizedItemsCount = itemCount;
         this.isAllowFiltering = filtering;
+        this.isCheckBoxSelection = isCheckbox;
     };
     /**
      * To render the template content for group header element.
@@ -866,7 +1066,7 @@ var DropDownBase = /** @class */ (function (_super) {
                 if (isCount) {
                     count++;
                 }
-                if (this.updateGroupHeader(index, liCollections, target)) {
+                if (this.fixedHeaderElement && this.updateGroupHeader(index, liCollections, target)) {
                     loadedGroupList++;
                     if (count >= this.getPageCount()) {
                         break;
@@ -922,7 +1122,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
      * @returns {HTMLElement} Return the list items.
      */
-    DropDownBase.prototype.renderItems = function (listData, fields) {
+    DropDownBase.prototype.renderItems = function (listData, fields, isCheckBoxUpdate) {
         var ulElement;
         if (this.itemTemplate && listData) {
             var dataSource = listData;
@@ -945,6 +1145,10 @@ var DropDownBase = /** @class */ (function (_super) {
                 var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
                 if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && this.getModuleName() === 'autocomplete')) {
                     virtualUlElement.replaceChild(ulElement, oldUlElement);
+                    var reOrderList = this.list.querySelectorAll('.e-reorder');
+                    if (this.list.querySelector('.e-virtual-ddl-content') && reOrderList && reOrderList.length > 0 && !isCheckBoxUpdate) {
+                        this.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList[0]);
+                    }
                     this.updateListElements(listData);
                 }
                 else if ((!virtualUlElement)) {
@@ -956,6 +1160,10 @@ var DropDownBase = /** @class */ (function (_super) {
             }
         }
         else {
+            if (this.getModuleName() === 'multiselect' && this.virtualSelectAll) {
+                this.virtualSelectAllData = listData;
+                listData = listData.slice(this.virtualItemStartIndex, this.virtualItemEndIndex);
+            }
             ulElement = this.createListItems(listData, fields);
             if (this.isIncrementalRequest) {
                 this.incrementalLiCollections = ulElement.querySelectorAll('.' + dropDownBaseClasses.li);
@@ -964,10 +1172,19 @@ var DropDownBase = /** @class */ (function (_super) {
                 return ulElement;
             }
             if (this.isVirtualizationEnabled) {
-                var oldUlElement = this.list.querySelector('.e-list-parent');
+                var oldUlElement = this.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
                 var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
-                if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && this.getModuleName() === 'autocomplete')) {
-                    virtualUlElement.replaceChild(ulElement, oldUlElement);
+                var isRemovedUlelement = false;
+                if (!oldUlElement && this.list.querySelector('.e-list-parent' + '.e-reorder')) {
+                    oldUlElement = this.list.querySelector('.e-list-parent' + '.e-reorder');
+                }
+                if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect')) || isRemovedUlelement) {
+                    if (!this.appendUncheckList) {
+                        virtualUlElement.replaceChild(ulElement, oldUlElement);
+                    }
+                    else {
+                        virtualUlElement.appendChild(ulElement);
+                    }
                     this.updateListElements(listData);
                 }
                 else if ((!virtualUlElement)) {
@@ -1160,11 +1377,11 @@ var DropDownBase = /** @class */ (function (_super) {
         this.render();
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    DropDownBase.prototype.updateDataSource = function (props) {
+    DropDownBase.prototype.updateDataSource = function (props, oldProps) {
         this.resetList(this.dataSource);
         this.totalItemCount = this.dataSource instanceof DataManager ? this.dataSource.dataSource.json.length : 0;
     };
-    DropDownBase.prototype.setUpdateInitial = function (props, newProp) {
+    DropDownBase.prototype.setUpdateInitial = function (props, newProp, oldProp) {
         this.isDataFetched = false;
         var updateData = {};
         for (var j = 0; props.length > j; j++) {
@@ -1180,7 +1397,7 @@ var DropDownBase = /** @class */ (function (_super) {
             if (Object.keys(updateData).indexOf('dataSource') === -1) {
                 updateData.dataSource = this.dataSource;
             }
-            this.updateDataSource(updateData);
+            this.updateDataSource(updateData, oldProp);
         }
     };
     /**

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

@@ -163,6 +163,7 @@ export interface DropDownListModel extends DropDownBaseModel{
      * Gets or sets the display text of the selected item in the component.
      *
      * @default null
+     * @aspType string
      */
     text?: string | null;
 
@@ -172,7 +173,14 @@ export interface DropDownListModel extends DropDownBaseModel{
      * @default null
      * @isGenericType true
      */
-    value?: number | string | boolean | null;
+    value?: number | string | boolean | object | null;
+
+    /**
+    * Defines whether the object binding is allowed or not in the component.
+    *
+    * @default false
+    */
+    allowObjectBinding?: boolean; 
 
     /**
      * Gets or sets the index of the selected item in the component.
@@ -182,6 +190,7 @@ export interface DropDownListModel extends DropDownBaseModel{
      * {% codeBlock src="dropdownlist/index-api/index.html" %}{% endcodeBlock %}
      *
      * @default null
+     * @aspType double
      */
     index?: number | null;
 

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

@@ -6,14 +6,13 @@ import { DropDownBase, SelectEventArgs, FilteringEventArgs, PopupEventArgs } fro
 import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';
 import { DropDownListModel } from '../drop-down-list';
 import { DataManager, Query } from '@syncfusion/ej2-data';
-import { VirtualInfo } from '../common/virtual-scroll';
 export interface ChangeEventArgs extends SelectEventArgs {
     /**
      * Returns the selected value
      *
      * @isGenericType true
      */
-    value: number | string | boolean;
+    value: number | string | boolean | object;
     /**
      * Returns the previous selected list item
      */
@@ -59,9 +58,6 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected previousItemData: {
         [key: string]: Object;
     } | string | number | boolean;
-    private listHeight;
-    private listItemHeight;
-    protected skeletonCount: number;
     protected hiddenElement: HTMLSelectElement;
     protected isPopupOpen: boolean;
     private isDocumentClick;
@@ -71,11 +67,10 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected initial: boolean;
     private searchBoxHeight;
     private popupObj;
-    private popupContentElement;
     private backIconElement;
     private clearIconElement;
     private containerStyle;
-    protected previousValue: string | number | boolean;
+    protected previousValue: string | number | boolean | object;
     protected activeIndex: number;
     protected filterInput: HTMLInputElement;
     private searchKeyModule;
@@ -100,7 +95,6 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected isDropDownClick: boolean;
     protected preventAltUp: boolean;
     private searchKeyEvent;
-    private keyboardEvent;
     private filterInputObj;
     protected spinnerElement: HTMLElement;
     protected keyConfigure: {
@@ -112,36 +106,9 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected preventChange: boolean;
     protected isAngular: boolean;
     protected selectedElementID: string;
-    private virtualListHeight;
-    private virtualItemCount;
-    private isVirtualScrolling;
-    private observer;
-    protected isPreventScrollAction: boolean;
-    private scrollPreStartIndex;
-    private isScrollActionTriggered;
-    protected previousStartIndex: number;
-    private isMouseScrollAction;
-    private isKeyBoardAction;
-    private isUpwardScrolling;
-    private containerElementRect;
-    protected previousEndIndex: number;
-    private previousInfo;
-    protected startIndex: number;
-    private currentPageNumber;
-    private pageCount;
-    private isPreventKeyAction;
-    protected virtualItemStartIndex: number;
-    private virtualItemEndIndex;
-    private generatedDataObject;
     private preselectedIndex;
-    protected incrementalQueryString: string;
-    protected incrementalEndIndex: number;
-    protected incrementalStartIndex: number;
-    protected incrementalPreQueryString: string;
     private isTouched;
-    protected virtualListInfo: VirtualInfo;
-    protected viewPortInfo: VirtualInfo;
-    private selectedValueInfo;
+    private clearButton;
     /**
      * Sets CSS classes to the root element of the component that allows customization of appearance.
      *
@@ -284,6 +251,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * Gets or sets the display text of the selected item in the component.
      *
      * @default null
+     * @aspType string
      */
     text: string | null;
     /**
@@ -292,7 +260,13 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @default null
      * @isGenericType true
      */
-    value: number | string | boolean | null;
+    value: number | string | boolean | object | null;
+    /**
+    * Defines whether the object binding is allowed or not in the component.
+    *
+    * @default false
+    */
+    allowObjectBinding: boolean;
     /**
      * Gets or sets the index of the selected item in the component.
      *
@@ -301,6 +275,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * {% codeBlock src="dropdownlist/index-api/index.html" %}{% endcodeBlock %}
      *
      * @default null
+     * @aspType double
      */
     index: number | null;
     /**
@@ -414,7 +389,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected targetElement(): HTMLElement | HTMLInputElement;
     protected getNgDirective(): string;
     protected getElementByText(text: string): Element;
-    protected getElementByValue(value: string | number | boolean): Element;
+    protected getElementByValue(value: string | number | boolean | object): Element;
     private initValue;
     protected updateValues(): void;
     protected onBlurHandler(e: MouseEvent): void;
@@ -442,8 +417,6 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private onMouseLeave;
     protected removeHover(): void;
     protected isValidLI(li: Element | HTMLElement): boolean;
-    protected updateIncrementalInfo(startIndex: number, endIndex: number): void;
-    protected updateIncrementalView(startIndex: number, endIndex: number): void;
     protected updateIncrementalItemIndex(startIndex: number, endIndex: number): void;
     protected incrementalSearch(e: KeyboardEventArgs): void;
     /**
@@ -460,7 +433,6 @@ export declare class DropDownList extends DropDownBase implements IInput {
     showSpinner(): void;
     protected keyActionHandler(e: KeyboardEventArgs): void;
     private updateUpDownAction;
-    private updateVirtualItemIndex;
     private updateHomeEndAction;
     protected selectCurrentValueOnTab(e: KeyboardEventArgs): void;
     protected mobileKeyActionHandler(e: KeyboardEventArgs): void;
@@ -501,7 +473,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @param {MouseEvent | KeyboardEvent | TouchEvent} eve - Specifies the event arguments.
      * @returns {void}
      */
-    protected onChangeEvent(eve: MouseEvent | KeyboardEvent | TouchEvent): void;
+    protected onChangeEvent(eve: MouseEvent | KeyboardEvent | TouchEvent, isCustomValue?: boolean): void;
     private detachChanges;
     protected detachChangeEvent(eve: MouseEvent | KeyboardEvent | TouchEvent): void;
     protected setHiddenValue(): void;
@@ -512,8 +484,6 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @returns {void}
      */
     protected onFilterUp(e: KeyboardEventArgs): void;
-    protected getFilteringSkeletonCount(): void;
-    protected getSkeletonCount(retainSkeleton?: boolean): void;
     protected onFilterDown(e: KeyboardEventArgs): void;
     protected removeFillSelection(): void;
     protected getQuery(query: Query): Query;
@@ -538,7 +508,6 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected onInput(e: KeyboardEventArgs): void;
     protected pasteHandler(e: KeyboardEventArgs): void;
     protected onActionFailure(e: Object): void;
-    private UpdateSkeleton;
     protected getTakeValue(): number;
     protected onActionComplete(ulElement: HTMLElement, list: {
         [key: string]: Object;
@@ -554,10 +523,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private focusIndexItem;
     protected updateSelection(): void;
     private updateSelectionList;
-    protected checkAndResetCache(): void;
     protected removeFocus(): void;
-    protected getTransformValues(): string;
-    protected GetVirtualTrackHeight(): string;
     protected renderPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent | Object): void;
     private checkCollision;
     private getOffsetValue;
@@ -600,10 +566,10 @@ export declare class DropDownList extends DropDownBase implements IInput {
      */
     protected setEnabled(): void;
     protected setOldText(text: string): void;
-    protected setOldValue(value: string | number | boolean): void;
+    protected setOldValue(value: string | number | boolean | object): void;
     protected refreshPopup(): void;
     protected checkData(newProp?: DropDownListModel): void;
-    protected updateDataSource(props?: DropDownListModel): void;
+    protected updateDataSource(props?: DropDownListModel, oldProps?: DropDownListModel): void;
     protected checkCustomValue(): void;
     private updateInputFields;
     /**