@syncfusion/ej2-dropdowns 23.2.7 → 24.1.41-566987

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

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__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;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__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;
+};
 import { Component, EventHandler, addClass, append, Property, Event, L10n, compile } from '@syncfusion/ej2-base';
 import { setStyleAttribute, extend, removeClass, prepend, isNullOrUndefined, detach, getValue } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, rippleEffect, ChildProperty, Complex } from '@syncfusion/ej2-base';
@@ -96,6 +96,9 @@ var DropDownBase = /** @class */ (function (_super) {
         _this.virtualizedItemsCount = 0;
         _this.totalItemCount = 0;
         _this.dataCount = 0;
+        _this.isRemoteDataUpdated = false;
+        _this.isIncrementalRequest = false;
+        _this.itemCount = 10;
         return _this;
     }
     DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {
@@ -492,7 +495,7 @@ var DropDownBase = /** @class */ (function (_super) {
                 if (!eventArgs.cancel) {
                     _this.isRequesting = true;
                     _this.showSpinner();
-                    if (dataSource instanceof DataManager) {
+                    if (dataSource instanceof DataManager && !_this.virtualGroupDataSource) {
                         _this.isRequested = true;
                         if (_this.isDataFetched) {
                             _this.emptyDataRequest(fields);
@@ -501,8 +504,39 @@ var DropDownBase = /** @class */ (function (_super) {
                         eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {
                             _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
                             _this.trigger('actionComplete', e, function (e) {
+                                if (!_this.virtualGroupDataSource && _this.isVirtualizationEnabled) {
+                                    _this.isRemoteDataUpdated = true;
+                                    if ((_this.getModuleName() === 'combobox' && _this.isAllowFiltering && _this.isVirtualizationEnabled && e.result)) {
+                                        e.result = e.result.result;
+                                    }
+                                    if (e.result.length > 0) {
+                                        var dataSource_2 = e.result;
+                                        if (_this.isVirtualizationEnabled && _this.fields.groupBy) {
+                                            var data = new DataManager(dataSource_2).executeLocal(new Query().group(_this.fields.groupBy));
+                                            _this.virtualGroupDataSource = data.records;
+                                        }
+                                        else {
+                                            _this.virtualGroupDataSource = dataSource_2;
+                                            _this.hideSpinner();
+                                            _this.isRequested = false;
+                                            _this.isRequesting = false;
+                                            _this.setListData(dataSource_2, fields, query, event);
+                                            return;
+                                        }
+                                    }
+                                    _this.hideSpinner();
+                                    _this.isRequested = false;
+                                    _this.isRequesting = false;
+                                    _this.updatePopupState();
+                                    return;
+                                }
                                 if (!e.cancel) {
+                                    _this.isRequesting = false;
                                     var listItems = e.result;
+                                    if (_this.isIncrementalRequest) {
+                                        ulElement = _this.renderItems(listItems, fields);
+                                        return;
+                                    }
                                     if (listItems.length === 0) {
                                         _this.isDataFetched = true;
                                     }
@@ -516,7 +550,6 @@ var DropDownBase = /** @class */ (function (_super) {
                                     _this.isRequested = false;
                                     _this.bindChildItems(listItems, ulElement, fields, e);
                                 }
-                                _this.isRequesting = false;
                             });
                         }).catch(function (e) {
                             _this.isRequested = false;
@@ -527,8 +560,25 @@ var DropDownBase = /** @class */ (function (_super) {
                     }
                     else {
                         _this.isRequesting = false;
-                        var dataManager = new DataManager(eventArgs.data);
-                        var listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        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);
+                        listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        if (_this.isVirtualizationEnabled && _this.getModuleName() === 'autocomplete' && (listItems.count != 0 && listItems.count < (_this.itemCount * 2))) {
+                            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;
+                                        listItems = (newQuery).executeLocal(dataManager);
+                                        break;
+                                    }
+                                }
+                            }
+                        }
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         _this.dataCount = listItems.count;
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -538,6 +588,10 @@ var DropDownBase = /** @class */ (function (_super) {
                         var localDataArgs = { cancel: false, result: listItems };
                         _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
                         _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {
+                            if (_this.isIncrementalRequest) {
+                                ulElement = _this.renderItems(localDataArgs.result, fields);
+                                return;
+                            }
                             if (!localDataArgs.cancel) {
                                 ulElement = _this.renderItems(localDataArgs.result, fields);
                                 _this.onActionComplete(ulElement, localDataArgs.result, event);
@@ -557,6 +611,12 @@ var DropDownBase = /** @class */ (function (_super) {
             });
         }
     };
+    DropDownBase.prototype.updatePopupState = function () {
+        // Used this method in component side.
+    };
+    DropDownBase.prototype.updateRemoteData = function () {
+        this.setListData(this.dataSource, this.fields, this.query);
+    };
     DropDownBase.prototype.bindChildItems = function (listItems, ulElement, fields, e) {
         var _this = this;
         if (listItems.length >= 100 && this.getModuleName() === 'autocomplete') {
@@ -612,6 +672,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 () {
@@ -644,7 +705,9 @@ var DropDownBase = /** @class */ (function (_super) {
         if (this.isReact) {
             this.clearTemplate(['itemTemplate', 'groupTemplate', 'actionFailureTemplate', 'noRecordsTemplate']);
         }
-        this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;
+        if (!this.isVirtualizationEnabled) {
+            this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;
+        }
         if (this.getModuleName() === 'multiselect' && this.properties.allowCustomValue && this.fields.groupBy) {
             for (var i = 0; i < ulElement.childElementCount; i++) {
                 if (ulElement.children[i].classList.contains('e-list-group-item')) {
@@ -785,25 +848,67 @@ var DropDownBase = /** @class */ (function (_super) {
             this.scrollStop(e);
         }
     };
-    DropDownBase.prototype.scrollStop = function (e) {
+    DropDownBase.prototype.scrollStop = function (e, isDownkey) {
         var target = !isNullOrUndefined(e) ? e.target : this.list;
         var liHeight = parseInt(getComputedStyle(this.getValidLi(), null).getPropertyValue('height'), 10);
         var topIndex = Math.round(target.scrollTop / liHeight);
         var liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');
+        var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+        var count = 0;
+        var isCount = false;
         for (var i = topIndex; i > -1; i--) {
-            if (!isNullOrUndefined(liCollections[i]) && liCollections[i].classList.contains(dropDownBaseClasses.group)) {
-                var currentLi = liCollections[i];
-                this.fixedHeaderElement.innerHTML = currentLi.innerHTML;
-                this.fixedHeaderElement.style.top = target.scrollTop + 'px';
-                this.fixedHeaderElement.style.display = 'block';
-                break;
+            var index = this.isVirtualizationEnabled ? i + virtualListCount : i;
+            if (this.isVirtualizationEnabled) {
+                var groupListLength = this.list.querySelectorAll('.e-list-group-item').length;
+                var loadedGroupList = 0;
+                if (isCount) {
+                    count++;
+                }
+                if (this.updateGroupHeader(index, liCollections, target)) {
+                    loadedGroupList++;
+                    if (count >= this.getPageCount()) {
+                        break;
+                    }
+                    if (groupListLength <= loadedGroupList) {
+                        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')) {
+                        count++;
+                        isCount = true;
+                    }
+                }
             }
             else {
-                this.fixedHeaderElement.style.display = 'none';
-                this.fixedHeaderElement.style.top = 'none';
+                if (this.updateGroupHeader(index, liCollections, target)) {
+                    break;
+                }
             }
         }
     };
+    DropDownBase.prototype.getPageCount = function (returnExactCount) {
+        var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
+            getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
+        var pageCount = Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
+        return returnExactCount ? pageCount : Math.round(pageCount);
+    };
+    DropDownBase.prototype.updateGroupHeader = function (index, liCollections, target) {
+        if (!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.group)) {
+            this.updateGroupFixedHeader(liCollections[index], target);
+            return true;
+        }
+        else {
+            this.fixedHeaderElement.style.display = 'none';
+            this.fixedHeaderElement.style.top = 'none';
+            return false;
+        }
+    };
+    DropDownBase.prototype.updateGroupFixedHeader = function (element, target) {
+        this.fixedHeaderElement.innerHTML = element.innerHTML;
+        this.fixedHeaderElement.style.top = target.scrollTop + 'px';
+        this.fixedHeaderElement.style.display = 'block';
+    };
     DropDownBase.prototype.getValidLi = function () {
         return this.liCollections[0];
     };
@@ -837,45 +942,54 @@ 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);
-                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                    this.ulElement = this.list.querySelector('ul');
-                    this.listData = listData;
-                    this.postRender(this.list, listData, this.bindEvent);
+                    this.updateListElements(listData);
                 }
                 else if ((!virtualUlElement)) {
                     this.list.innerHTML = '';
-                    this.list.appendChild(ulElement);
-                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                    this.ulElement = this.list.querySelector('ul');
-                    this.listData = listData;
-                    this.postRender(this.list, listData, this.bindEvent);
+                    this.createVirtualContent();
+                    this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
+                    this.updateListElements(listData);
                 }
             }
         }
         else {
             ulElement = this.createListItems(listData, fields);
+            if (this.isIncrementalRequest) {
+                this.incrementalLiCollections = ulElement.querySelectorAll('.' + dropDownBaseClasses.li);
+                this.incrementalUlElement = ulElement;
+                this.incrementalListData = listData;
+                return ulElement;
+            }
             if (this.isVirtualizationEnabled) {
                 var oldUlElement = this.list.querySelector('.e-list-parent');
                 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);
-                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                    this.ulElement = this.list.querySelector('ul');
-                    this.listData = listData;
-                    this.postRender(this.list, listData, this.bindEvent);
+                    this.updateListElements(listData);
                 }
                 else if ((!virtualUlElement)) {
                     this.list.innerHTML = '';
-                    this.list.appendChild(ulElement);
-                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                    this.ulElement = this.list.querySelector('ul');
-                    this.listData = listData;
-                    this.postRender(this.list, listData, this.bindEvent);
+                    this.createVirtualContent();
+                    this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
+                    this.updateListElements(listData);
                 }
             }
         }
         return ulElement;
     };
+    DropDownBase.prototype.createVirtualContent = function () {
+        if (!this.list.querySelector('.e-virtual-ddl-content')) {
+            this.list.appendChild(this.createElement('div', {
+                className: 'e-virtual-ddl-content',
+            }));
+        }
+    };
+    DropDownBase.prototype.updateListElements = function (listData) {
+        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+        this.ulElement = this.list.querySelector('ul');
+        this.listData = listData;
+        this.postRender(this.list, listData, this.bindEvent);
+    };
     DropDownBase.prototype.templateListItem = function (dataSource, fields) {
         var option = this.listOption(dataSource, fields);
         option.templateID = this.itemTemplateId;
@@ -947,11 +1061,11 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param {string | number | boolean} value - Specifies given value.
      * @returns {number} Returns the index of the item.
      */
-    DropDownBase.prototype.getIndexByValueFilter = function (value) {
+    DropDownBase.prototype.getIndexByValue = function (value) {
         var index;
-        var listItems = this.renderItems(this.selectData, this.fields);
-        for (var i = 0; i < listItems.children.length; i++) {
-            if (!isNullOrUndefined(value) && listItems.children[i].getAttribute('data-value') === value.toString()) {
+        var listItems = this.getItems();
+        for (var i = 0; i < listItems.length; i++) {
+            if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {
                 index = i;
                 break;
             }
@@ -964,11 +1078,11 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param {string | number | boolean} value - Specifies given value.
      * @returns {number} Returns the index of the item.
      */
-    DropDownBase.prototype.getIndexByValue = function (value) {
+    DropDownBase.prototype.getIndexByValueFilter = function (value) {
         var index;
-        var listItems = this.getItems();
-        for (var i = 0; i < listItems.length; i++) {
-            if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {
+        var listItems = this.renderItems(this.selectData, this.fields);
+        for (var i = 0; i < listItems.children.length; i++) {
+            if (!isNullOrUndefined(value) && listItems.children[i].getAttribute('data-value') === value.toString()) {
                 index = i;
                 break;
             }
@@ -1177,7 +1291,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
      * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
      * @returns {void}
-
+     * @deprecated
      */
     DropDownBase.prototype.addItem = function (items, itemIndex) {
         if (!this.list || (this.list.textContent === this.noRecordsTemplate && this.getModuleName() !== 'listbox')) {