@syncfusion/ej2-dropdowns 24.2.9 → 25.1.37

package/src/common/virtual-scroll.js

@@ -44,7 +44,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { EventHandler, Browser, select, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { EventHandler, Browser, select, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { debounce, Touch } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 var VirtualScroll = /** @class */ (function () {
@@ -142,7 +142,9 @@ var VirtualScroll = /** @class */ (function () {
         if (isQueryGenerated === void 0) { isQueryGenerated = false; }
         var dataSource = this.parent.dataSource;
         if (!isQueryGenerated) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (!isNullOrUndefined(this.parent.query)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var newQuery = this.removeSkipAndTakeEvents(this.parent.query.clone());
                 query = this.getPageQuery(newQuery, virtualItemStartIndex, virtualItemEndIndex);
             }
@@ -157,6 +159,7 @@ var VirtualScroll = /** @class */ (function () {
                 totalData = this.parent.dataSource.dataSource.json.length;
             }
             else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 totalData = this.parent.dataSource.length;
             }
             if (totalData > 0) {
@@ -173,22 +176,151 @@ var VirtualScroll = /** @class */ (function () {
         });
         return query;
     };
-    VirtualScroll.prototype.setCurrentViewDataAsync = function () {
+    VirtualScroll.prototype.setCurrentViewDataAsync = function (component) {
         // eslint-disable-next-line
         var currentData = [];
-        for (var i = this.parent.viewPortInfo.startIndex; i < this.parent.viewPortInfo.endIndex; i++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var alreadyAddedData = this.parent.generatedDataObject[i];
-            if (alreadyAddedData) {
-                currentData.push(alreadyAddedData[0]);
+        var isResetListCalled = false;
+        var isListUpdated = true;
+        if (isNullOrUndefined(this.component)) {
+            this.component = component.component;
+        }
+        var endIndex = this.parent.viewPortInfo.endIndex;
+        if (this.component === 'multiselect' && this.parent.mode === 'CheckBox' && this.parent.value && Array.isArray(this.parent.value) && this.parent.value.length > 0 && this.parent.enableSelectionOrder) {
+            if (this.parent.viewPortInfo.startIndex < this.parent.value.length) {
+                endIndex = this.parent.viewPortInfo.endIndex - this.parent.value.length;
+                if (this.parent.viewPortInfo.startIndex === 0) {
+                    this.parent.updateVirtualReOrderList(true);
+                    if (this.parent.value.length < this.parent.itemCount) {
+                        var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
+                        if (oldUlElement) {
+                            this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
+                        }
+                        var query = this.parent.getForQuery(this.parent.value).clone();
+                        query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
+                        this.parent.appendUncheckList = true;
+                        this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                        isListUpdated = false;
+                        this.parent.appendUncheckList = false;
+                        isListUpdated = false;
+                    }
+                    else {
+                        var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
+                        if (oldUlElement) {
+                            this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
+                        }
+                    }
+                    isListUpdated = false;
+                }
+                else if (this.parent.viewPortInfo.startIndex != 0) {
+                    this.parent.updateVirtualReOrderList(true);
+                    var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
+                    if (oldUlElement) {
+                        this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
+                    }
+                    isListUpdated = false;
+                }
+                if (this.parent.viewPortInfo.startIndex != 0 && this.parent.viewPortInfo.startIndex - this.parent.value.length != this.parent.itemCount && (this.parent.viewPortInfo.startIndex + this.parent.itemCount > this.parent.value.length)) {
+                    var query = this.parent.getForQuery(this.parent.value).clone();
+                    query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
+                    this.parent.appendUncheckList = true;
+                    this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                    isListUpdated = false;
+                    this.parent.appendUncheckList = false;
+                }
+            }
+            else {
+                var reOrderList = this.parent.list.querySelectorAll('.e-reorder')[0];
+                if (this.parent.list.querySelector('.e-virtual-ddl-content') && reOrderList) {
+                    this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList);
+                }
+                var query = this.parent.getForQuery(this.parent.value).clone();
+                if (!this.parent.allowFiltering) { //need to check with allowFiltering false
+                    var skipvalue = this.parent.viewPortInfo.startIndex - this.parent.value.length >= 0 ? this.parent.viewPortInfo.startIndex - this.parent.value.length : 0;
+                    query = query.skip(skipvalue);
+                }
+                this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                isListUpdated = false;
+            }
+            this.parent.totalItemsCount();
+        }
+        if (isListUpdated) {
+            for (var i = this.parent.viewPortInfo.startIndex; i < endIndex; i++) {
+                var index = i;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var alreadyAddedData = this.parent.generatedDataObject[index];
+                if (this.component === 'multiselect' && this.parent.hideSelectedItem) {
+                    if (alreadyAddedData) {
+                        var value = getValue(this.parent.fields.value, alreadyAddedData[0]);
+                        if (this.parent.value && value != null && Array.isArray(this.parent.value) && this.parent.value.length > 0 && this.parent.value.indexOf(value) < 0) {
+                            var query = this.parent.getForQuery(this.parent.value).clone();
+                            if (this.parent.viewPortInfo.endIndex == this.parent.totalItemCount + this.parent.value.length && this.parent.hideSelectedItem) {
+                                query = query.skip(this.parent.totalItemCount - this.parent.itemCount);
+                            }
+                            else {
+                                query = query.skip(this.parent.viewPortInfo.startIndex);
+                            }
+                            this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                            isResetListCalled = true;
+                            break;
+                        }
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        else if ((this.parent.value === null || (this.parent.value && this.parent.value.length === 0))) {
+                            currentData.push(alreadyAddedData[0]);
+                        }
+                    }
+                    if (index === endIndex - 1) {
+                        if (currentData.length != this.parent.itemCount) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            if (this.parent.hideSelectedItem) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                var query = this.parent.getForQuery(this.parent.value).clone();
+                                if (this.parent.viewPortInfo.endIndex == this.parent.totalItemCount + this.parent.value.length && this.parent.hideSelectedItem) {
+                                    query = query.skip(this.parent.totalItemCount - this.parent.itemCount);
+                                }
+                                else {
+                                    query = query.skip(this.parent.viewPortInfo.startIndex);
+                                }
+                                this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                                isResetListCalled = true;
+                            }
+                        }
+                    }
+                }
+                else {
+                    if (alreadyAddedData) {
+                        currentData.push(alreadyAddedData[0]);
+                    }
+                }
             }
         }
-        this.parent.renderItems(currentData, this.parent.fields);
+        if (!isResetListCalled && isListUpdated) {
+            if (this.component === 'multiselect' && this.parent.allowCustomValue && this.parent.viewPortInfo.startIndex == 0 && this.parent.virtualCustomData) {
+                currentData.splice(0, 0, this.parent.virtualCustomData);
+            }
+            var totalData = [];
+            if (this.component === 'multiselect' && this.parent.allowCustomValue && this.parent.viewPortInfo.endIndex == this.parent.totalItemCount) {
+                if (this.parent.virtualCustomSelectData && this.parent.virtualCustomSelectData.length > 0) {
+                    totalData = currentData.concat(this.parent.virtualCustomSelectData);
+                    currentData = totalData;
+                }
+            }
+            var ulElement = this.parent.renderItems(currentData, this.parent.fields, this.component === 'multiselect' && this.parent.mode === 'CheckBox');
+        }
+        if (this.component === 'multiselect') {
+            this.parent.updatevirtualizationList();
+        }
+        this.parent.getSkeletonCount();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var virtualTrackElement = this.parent.list.getElementsByClassName('e-virtual-ddl')[0];
         if (virtualTrackElement) {
             (virtualTrackElement).style = this.parent.GetVirtualTrackHeight();
         }
+        else if (!virtualTrackElement && this.parent.skeletonCount > 0 && this.parent.popupWrapper) {
+            var virualElement = this.parent.createElement('div', {
+                id: this.parent.element.id + '_popup', className: 'e-virtual-ddl', styles: this.parent.GetVirtualTrackHeight()
+            });
+            this.parent.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
+        }
         this.parent.UpdateSkeleton();
         this.parent.liCollections = this.parent.list.querySelectorAll('.e-list-item');
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -199,13 +331,17 @@ var VirtualScroll = /** @class */ (function () {
         if (this.parent.fields.groupBy) {
             this.parent.scrollStop();
         }
+        if (this.parent.keyCode == 40 && this.parent.isScrollChanged && this.parent.hideSelectedItem && !isNullOrUndefined(this.parent.currentFocuedListElement)) {
+            var currentSelectElem = this.parent.getElementByValue(this.parent.currentFocuedListElement.getAttribute('data-value'));
+            this.parent.addListFocus(currentSelectElem);
+            this.parent.isScrollChanged = false;
+        }
     };
     VirtualScroll.prototype.generateQueryAndSetQueryIndexAsync = function (query, isPopupOpen) {
         var isStartIndexInitialised = false;
         var queryStartIndex = 0;
         var queryEndIndex = 0;
-        var sortedDataStartIndex = 0;
-        var vEndIndex = this.parent && this.parent.viewPortInfo.endIndex !== 0 ? this.parent.viewPortInfo.endIndex : sortedDataStartIndex + this.parent.getItems().length;
+        var vEndIndex = this.parent.viewPortInfo.endIndex;
         if (!isPopupOpen && vEndIndex !== 0) {
             for (var i = this.parent.viewPortInfo.startIndex; i <= vEndIndex; i++) {
                 if (!(i in this.parent.generatedDataObject)) {
@@ -223,6 +359,13 @@ var VirtualScroll = /** @class */ (function () {
             this.parent.virtualItemStartIndex = queryStartIndex;
             this.parent.virtualItemEndIndex = queryEndIndex;
             this.generateAndExecuteQueryAsync(query, queryStartIndex, queryEndIndex);
+            if (this.component === 'multiselect' && this.parent.hideSelectedItem && this.parent.value && Array.isArray(this.parent.value) && this.parent.value.length > 0) {
+                this.parent.totalItemsCount();
+            }
+            if (this.component === 'multiselect' && this.parent.virtualItemStartIndex === this.parent.virtualItemEndIndex) {
+                this.parent.virtualItemStartIndex = this.parent.viewPortInfo.startIndex;
+                this.parent.virtualItemEndIndex = this.parent.viewPortInfo.endIndex;
+            }
         }
         this.setCurrentViewDataAsync();
     };
@@ -268,7 +411,8 @@ var VirtualScroll = /** @class */ (function () {
     };
     VirtualScroll.prototype.scrollListener = function (scrollArgs) {
         var _this = this;
-        if (!this.parent.isPreventScrollAction) {
+        if (!this.parent.isPreventScrollAction && !this.parent.isVirtualTrackHeight) {
+            this.parent.preventSetCurrentData = false;
             var info = scrollArgs.sentinel;
             var pStartIndex = this.parent.previousStartIndex;
             this.parent.viewPortInfo = this.getInfoFromView(scrollArgs.direction, info, scrollArgs.offset, false);
@@ -304,20 +448,6 @@ var VirtualScroll = /** @class */ (function () {
             this.parent.previousInfo = this.parent.viewPortInfo;
         }
     };
-    VirtualScroll.prototype.getPageCount = function (popupElement, returnExactCount) {
-        if (returnExactCount === void 0) { returnExactCount = false; }
-        var list = popupElement && popupElement.querySelector('.e-content');
-        if (list) {
-            var liHeight = list.classList.contains('e-nodata') ? null : getComputedStyle(list.querySelectorAll('.e-list-item')[0], null).getPropertyValue('height');
-            var pageCount = list.getBoundingClientRect().height / parseInt(liHeight, 10);
-            return returnExactCount ? pageCount : Math.round(pageCount);
-        }
-        return 0;
-    };
-    ;
-    VirtualScroll.prototype.getRowHeight = function () {
-        return (isNullOrUndefined(this.parent.liCollections) || this.parent.liCollections.length == 0) ? 0 : Math.ceil(this.parent.liCollections[0].getBoundingClientRect().height);
-    };
     VirtualScroll.prototype.getInfoFromView = function (direction, info, e, isscrollAction) {
         var infoType = {
             direction: direction, sentinelInfo: info, offsets: e,
@@ -353,7 +483,7 @@ var VirtualScroll = /** @class */ (function () {
                     var idxAddedToExactTop = (pageSizeBy4) > infoViewIndices ? pageSizeBy4 :
                         (infoViewIndices + infoViewIndices / 4);
                     var eIndex = Math.round(exactTopIndex + idxAddedToExactTop);
-                    infoType.endIndex = eIndex < totalItemCount ? eIndex : totalItemCount;
+                    infoType.endIndex = (eIndex < totalItemCount || this.component == "multiselect") ? eIndex : totalItemCount;
                     var sIndex = infoType.endIndex - this.parent.virtualItemCount;
                     infoType.startIndex = sIndex > 0 ? sIndex : 0;
                     infoType.endIndex = sIndex < 0 ? this.parent.virtualItemCount : infoType.endIndex;
@@ -388,7 +518,7 @@ var VirtualScroll = /** @class */ (function () {
                 top: top,
                 left: left
             };
-            if (_this.parent.list.querySelectorAll('.e-virtual-list').length > 0) {
+            if (_this.parent.list && _this.parent.list.querySelectorAll('.e-virtual-list').length > 0) {
                 var infoview = _this.getInfoFromView(direction, current, scrollOffsetargs, true);
                 if (_this.parent.scrollPreStartIndex != pstartIndex && !_this.parent.isPreventScrollAction) {
                     _this.parent.isScrollActionTriggered = true;

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

@@ -1,4 +1,4 @@
-import { Component, EventHandler, addClass, append, Property, Event, KeyboardEvents, EmitType, L10n, compile, KeyboardEventArgs } from '@syncfusion/ej2-base';import { setStyleAttribute, extend, removeClass, prepend, isNullOrUndefined, detach, getValue, AnimationModel } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, rippleEffect, RippleOptions, ChildProperty, Complex } from '@syncfusion/ej2-base';import { DataManager, Query, DataOptions, DataUtil } from '@syncfusion/ej2-data';import { ListBase, SortOrder } from '@syncfusion/ej2-lists';import { Popup } from '@syncfusion/ej2-popups';import { remove, select, selectAll } from '@syncfusion/ej2-base';
+import { Component, EventHandler, addClass, append, Property, Event, KeyboardEvents, EmitType, L10n, compile, KeyboardEventArgs } from '@syncfusion/ej2-base';import { setStyleAttribute, extend, removeClass, prepend, isNullOrUndefined, detach, getValue, AnimationModel } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, rippleEffect, RippleOptions, ChildProperty, Complex } from '@syncfusion/ej2-base';import { DataManager, Query, DataOptions, DataUtil } from '@syncfusion/ej2-data';import { ListBase, SortOrder } from '@syncfusion/ej2-lists';import { Popup } from '@syncfusion/ej2-popups';import { remove, select, selectAll } from '@syncfusion/ej2-base';import { VirtualInfo, VirtualScroll } from '../common/virtual-scroll';import { GeneratedData } from '../drop-down-list';import { Skeleton } from '@syncfusion/ej2-notifications';
 import {FilterType,SelectEventArgs} from "./drop-down-base";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

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

@@ -5,6 +5,8 @@ import { DataManager, Query } from '@syncfusion/ej2-data';
 import { SortOrder } from '@syncfusion/ej2-lists';
 import { DropDownBaseModel, FieldSettingsModel } from './drop-down-base-model';
 import { Popup } from '@syncfusion/ej2-popups';
+import { VirtualInfo, VirtualScroll } from '../common/virtual-scroll';
+import { GeneratedData } from '../drop-down-list';
 export declare type FilterType = 'StartsWith' | 'EndsWith' | 'Contains';
 export declare class FieldSettings extends ChildProperty<FieldSettings> {
     /**
@@ -53,6 +55,7 @@ export interface DropDownBaseClassList {
     disabled: string;
     group: string;
     grouping: string;
+    virtualList: string;
 }
 export interface SelectEventArgs {
     /**
@@ -224,8 +227,10 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected isAddNewItemTemplate: boolean;
     private isRequesting;
     private isVirtualizationEnabled;
+    protected isCustomDataUpdated: boolean;
     private isAllowFiltering;
     private virtualizedItemsCount;
+    private isCheckBoxSelection;
     protected totalItemCount: number;
     protected dataCount: number;
     protected isRemoteDataUpdated: boolean;
@@ -235,6 +240,48 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected isIncrementalRequest: boolean;
     protected itemCount: number;
     protected initialRemoteRender: boolean;
+    protected virtualListHeight: number;
+    protected virtualItemCount: number;
+    protected isVirtualScrolling: boolean;
+    protected observer: VirtualScroll;
+    protected isPreventScrollAction: boolean;
+    protected scrollPreStartIndex: number;
+    protected isScrollActionTriggered: boolean;
+    protected previousStartIndex: number;
+    protected isMouseScrollAction: boolean;
+    protected isKeyBoardAction: boolean;
+    protected isScrollChanged: boolean;
+    protected isUpwardScrolling: boolean;
+    protected containerElementRect: ClientRect;
+    protected previousEndIndex: number;
+    protected previousInfo: VirtualInfo;
+    protected startIndex: number;
+    protected currentPageNumber: number;
+    protected pageCount: number;
+    protected isPreventKeyAction: boolean;
+    protected virtualItemStartIndex: number;
+    protected virtualItemEndIndex: number;
+    protected generatedDataObject: GeneratedData;
+    protected listItemHeight: number;
+    protected skeletonCount: number;
+    protected popupContentElement: HTMLElement;
+    protected keyboardEvent: KeyboardEventArgs;
+    protected listContainerHeight: string;
+    protected isVirtualTrackHeight: boolean;
+    protected virtualSelectAll: boolean;
+    protected incrementalQueryString: string;
+    protected incrementalEndIndex: number;
+    protected incrementalStartIndex: number;
+    protected incrementalPreQueryString: string;
+    protected isObjectCustomValue: boolean;
+    protected appendUncheckList: boolean;
+    protected virtualSelectAllData: {
+        [key: string]: Object;
+    }[] | DataManager | string[] | number[] | boolean[];
+    protected firstItem: string | number | boolean | object;
+    protected virtualListInfo: VirtualInfo;
+    protected viewPortInfo: VirtualInfo;
+    protected selectedValueInfo: VirtualInfo;
     /**
 
     /**
@@ -455,6 +502,15 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     private getItemValue;
     private templateCompiler;
     protected l10nUpdate(actionFailure?: boolean): void;
+    protected checkAndResetCache(): void;
+    protected updateIncrementalInfo(startIndex: number, endIndex: number): void;
+    protected updateIncrementalView(startIndex: number, endIndex: number): void;
+    protected updateVirtualItemIndex(): void;
+    protected getFilteringSkeletonCount(): void;
+    protected getSkeletonCount(retainSkeleton?: boolean): void;
+    protected GetVirtualTrackHeight(): string;
+    protected getTransformValues(): string;
+    protected UpdateSkeleton(isSkeletonCountChange?: boolean, skeletonCount?: number): void;
     protected getLocaleName(): string;
     protected getTextByValue(value: string | number | boolean): string;
     protected getFormattedValue(value: string): string | number | boolean;
@@ -507,6 +563,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected updatePopupState(): void;
     protected updateRemoteData(): void;
     private bindChildItems;
+    protected isObjectInArray(objectToFind: any, array: any[]): boolean;
     protected updateListValues(): void;
     protected findListElement(list: HTMLElement, findNode: string, attribute: string, value: string | boolean | number): HTMLElement;
     private raiseDataBound;
@@ -528,7 +585,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @returns {Query} Returns the query to do the data query operation.
      */
     protected getQuery(query: Query): Query;
-    protected updateVirtualizationProperties(itemCount: number, filtering: boolean): void;
+    protected updateVirtualizationProperties(itemCount: number, filtering: boolean, isCheckbox?: boolean): void;
     /**
      * To render the template content for group header element.
      *
@@ -562,7 +619,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      */
     protected renderItems(listData: {
         [key: string]: Object;
-    }[], fields: FieldSettingsModel): HTMLElement;
+    }[], fields: FieldSettingsModel, isCheckBoxUpdate?: boolean): HTMLElement;
     private createVirtualContent;
     private updateListElements;
     protected templateListItem(dataSource: {
@@ -581,7 +638,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @param {string | number | boolean} value - Specifies given value.
      * @returns {number} Returns the index of the item.
      */
-    protected getIndexByValue(value: string | number | boolean): number;
+    protected getIndexByValue(value: string | number | boolean | object): number;
     /**
      * Return the index of item which matched with given value in data source
      *
@@ -617,9 +674,11 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected updateSelectElementData(isFiltering: boolean): void;
     protected updateSelection(): void;
     protected renderList(): void;
-    protected updateDataSource(props?: DropDownBaseModel): void;
+    protected updateDataSource(props?: DropDownBaseModel, oldProps?: DropDownBaseModel): void;
     protected setUpdateInitial(props: string[], newProp: {
         [key: string]: string;
+    }, oldProp?: {
+        [key: string]: string;
     }): void;
     /**
      * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.
@@ -679,7 +738,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @param { string | number } value - Specifies the value of the list item.
      * @returns {Object}
      */
-    getDataByValue(value: string | number | boolean): {
+    getDataByValue(value: string | number | boolean | object): {
         [key: string]: Object;
     } | string | number | boolean;
     /**