@syncfusion/ej2-dropdowns 24.2.8 → 25.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (110) hide show
  1. package/CHANGELOG.md +23 -150
  2. package/dist/ej2-dropdowns.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js +2 -2
  4. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-dropdowns.es2015.js +2049 -528
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +2072 -533
  8. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  9. package/dist/global/ej2-dropdowns.min.js +2 -2
  10. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +13 -13
  13. package/src/auto-complete/auto-complete-model.d.ts +3 -1
  14. package/src/auto-complete/auto-complete.d.ts +2 -0
  15. package/src/auto-complete/auto-complete.js +51 -6
  16. package/src/combo-box/combo-box-model.d.ts +11 -2
  17. package/src/combo-box/combo-box.d.ts +10 -2
  18. package/src/combo-box/combo-box.js +75 -16
  19. package/src/common/interface.d.ts +32 -0
  20. package/src/common/virtual-scroll.d.ts +1 -3
  21. package/src/common/virtual-scroll.js +157 -27
  22. package/src/drop-down-base/drop-down-base-model.d.ts +1 -1
  23. package/src/drop-down-base/drop-down-base.d.ts +65 -5
  24. package/src/drop-down-base/drop-down-base.js +242 -25
  25. package/src/drop-down-list/drop-down-list-model.d.ts +10 -1
  26. package/src/drop-down-list/drop-down-list.d.ts +16 -51
  27. package/src/drop-down-list/drop-down-list.js +180 -217
  28. package/src/drop-down-tree/drop-down-tree-model.d.ts +16 -12
  29. package/src/drop-down-tree/drop-down-tree.d.ts +13 -3
  30. package/src/drop-down-tree/drop-down-tree.js +55 -49
  31. package/src/global.js +1 -1
  32. package/src/list-box/list-box.js +9 -4
  33. package/src/mention/mention.d.ts +2 -0
  34. package/src/mention/mention.js +21 -9
  35. package/src/multi-select/checkbox-selection.js +8 -2
  36. package/src/multi-select/float-label.d.ts +5 -5
  37. package/src/multi-select/index.d.ts +1 -0
  38. package/src/multi-select/index.js +1 -0
  39. package/src/multi-select/interface.d.ts +1 -0
  40. package/src/multi-select/multi-select-model.d.ts +17 -2
  41. package/src/multi-select/multi-select.d.ts +34 -4
  42. package/src/multi-select/multi-select.js +1271 -173
  43. package/styles/auto-complete/_bds-definition.scss +2 -0
  44. package/styles/bootstrap-dark.css +8 -2
  45. package/styles/bootstrap.css +8 -2
  46. package/styles/bootstrap4.css +3 -2
  47. package/styles/bootstrap5-dark.css +3 -2
  48. package/styles/bootstrap5.css +3 -2
  49. package/styles/combo-box/_bds-definition.scss +2 -0
  50. package/styles/drop-down-base/_bds-definition.scss +134 -0
  51. package/styles/drop-down-list/_bds-definition.scss +134 -0
  52. package/styles/drop-down-list/_layout.scss +1 -1
  53. package/styles/drop-down-list/bootstrap-dark.css +1 -1
  54. package/styles/drop-down-list/bootstrap.css +1 -1
  55. package/styles/drop-down-list/bootstrap4.css +1 -1
  56. package/styles/drop-down-list/bootstrap5-dark.css +1 -1
  57. package/styles/drop-down-list/bootstrap5.css +1 -1
  58. package/styles/drop-down-list/fabric-dark.css +1 -1
  59. package/styles/drop-down-list/fabric.css +1 -1
  60. package/styles/drop-down-list/fluent-dark.css +1 -1
  61. package/styles/drop-down-list/fluent.css +1 -1
  62. package/styles/drop-down-list/highcontrast-light.css +1 -1
  63. package/styles/drop-down-list/highcontrast.css +1 -1
  64. package/styles/drop-down-list/icons/_bds.scss +14 -0
  65. package/styles/drop-down-list/material-dark.css +1 -1
  66. package/styles/drop-down-list/material.css +1 -1
  67. package/styles/drop-down-list/material3-dark.css +1 -1
  68. package/styles/drop-down-list/material3.css +1 -1
  69. package/styles/drop-down-list/tailwind-dark.css +1 -1
  70. package/styles/drop-down-list/tailwind.css +1 -1
  71. package/styles/drop-down-tree/_bds-definition.scss +61 -0
  72. package/styles/drop-down-tree/icons/_bds.scss +11 -0
  73. package/styles/fabric-dark.css +4 -2
  74. package/styles/fabric.css +4 -2
  75. package/styles/fluent-dark.css +8 -2
  76. package/styles/fluent.css +8 -2
  77. package/styles/highcontrast-light.css +4 -2
  78. package/styles/highcontrast.css +4 -2
  79. package/styles/list-box/_bds-definition.scss +136 -0
  80. package/styles/list-box/icons/_bds.scss +25 -0
  81. package/styles/material-dark.css +3 -2
  82. package/styles/material.css +3 -2
  83. package/styles/material3-dark.css +3 -2
  84. package/styles/material3.css +3 -2
  85. package/styles/mention/_bds-definition.scss +1 -0
  86. package/styles/multi-select/_bds-definition.scss +235 -0
  87. package/styles/multi-select/_bootstrap-dark-definition.scss +4 -0
  88. package/styles/multi-select/_bootstrap-definition.scss +4 -0
  89. package/styles/multi-select/_fluent-definition.scss +5 -0
  90. package/styles/multi-select/_layout.scss +8 -1
  91. package/styles/multi-select/bootstrap-dark.css +7 -1
  92. package/styles/multi-select/bootstrap.css +7 -1
  93. package/styles/multi-select/bootstrap4.css +2 -1
  94. package/styles/multi-select/bootstrap5-dark.css +2 -1
  95. package/styles/multi-select/bootstrap5.css +2 -1
  96. package/styles/multi-select/fabric-dark.css +3 -1
  97. package/styles/multi-select/fabric.css +3 -1
  98. package/styles/multi-select/fluent-dark.css +7 -1
  99. package/styles/multi-select/fluent.css +7 -1
  100. package/styles/multi-select/highcontrast-light.css +3 -1
  101. package/styles/multi-select/highcontrast.css +3 -1
  102. package/styles/multi-select/icons/_bds.scss +26 -0
  103. package/styles/multi-select/material-dark.css +2 -1
  104. package/styles/multi-select/material.css +2 -1
  105. package/styles/multi-select/material3-dark.css +2 -1
  106. package/styles/multi-select/material3.css +2 -1
  107. package/styles/multi-select/tailwind-dark.css +2 -1
  108. package/styles/multi-select/tailwind.css +2 -1
  109. package/styles/tailwind-dark.css +3 -2
  110. package/styles/tailwind.css +3 -2
@@ -44,7 +44,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
44
44
  if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
45
45
  }
46
46
  };
47
- import { EventHandler, Browser, select, isNullOrUndefined } from '@syncfusion/ej2-base';
47
+ import { EventHandler, Browser, select, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
48
48
  import { debounce, Touch } from '@syncfusion/ej2-base';
49
49
  import { DataManager, Query } from '@syncfusion/ej2-data';
50
50
  var VirtualScroll = /** @class */ (function () {
@@ -142,7 +142,9 @@ var VirtualScroll = /** @class */ (function () {
142
142
  if (isQueryGenerated === void 0) { isQueryGenerated = false; }
143
143
  var dataSource = this.parent.dataSource;
144
144
  if (!isQueryGenerated) {
145
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
145
146
  if (!isNullOrUndefined(this.parent.query)) {
147
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
146
148
  var newQuery = this.removeSkipAndTakeEvents(this.parent.query.clone());
147
149
  query = this.getPageQuery(newQuery, virtualItemStartIndex, virtualItemEndIndex);
148
150
  }
@@ -157,6 +159,7 @@ var VirtualScroll = /** @class */ (function () {
157
159
  totalData = this.parent.dataSource.dataSource.json.length;
158
160
  }
159
161
  else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
162
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
160
163
  totalData = this.parent.dataSource.length;
161
164
  }
162
165
  if (totalData > 0) {
@@ -173,22 +176,151 @@ var VirtualScroll = /** @class */ (function () {
173
176
  });
174
177
  return query;
175
178
  };
176
- VirtualScroll.prototype.setCurrentViewDataAsync = function () {
179
+ VirtualScroll.prototype.setCurrentViewDataAsync = function (component) {
177
180
  // eslint-disable-next-line
178
181
  var currentData = [];
179
- for (var i = this.parent.viewPortInfo.startIndex; i < this.parent.viewPortInfo.endIndex; i++) {
180
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
181
- var alreadyAddedData = this.parent.generatedDataObject[i];
182
- if (alreadyAddedData) {
183
- currentData.push(alreadyAddedData[0]);
182
+ var isResetListCalled = false;
183
+ var isListUpdated = true;
184
+ if (isNullOrUndefined(this.component)) {
185
+ this.component = component.component;
186
+ }
187
+ var endIndex = this.parent.viewPortInfo.endIndex;
188
+ if (this.component === 'multiselect' && this.parent.mode === 'CheckBox' && this.parent.value && Array.isArray(this.parent.value) && this.parent.value.length > 0 && this.parent.enableSelectionOrder) {
189
+ if (this.parent.viewPortInfo.startIndex < this.parent.value.length) {
190
+ endIndex = this.parent.viewPortInfo.endIndex - this.parent.value.length;
191
+ if (this.parent.viewPortInfo.startIndex === 0) {
192
+ this.parent.updateVirtualReOrderList(true);
193
+ if (this.parent.value.length < this.parent.itemCount) {
194
+ var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
195
+ if (oldUlElement) {
196
+ this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
197
+ }
198
+ var query = this.parent.getForQuery(this.parent.value).clone();
199
+ query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
200
+ this.parent.appendUncheckList = true;
201
+ this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
202
+ isListUpdated = false;
203
+ this.parent.appendUncheckList = false;
204
+ isListUpdated = false;
205
+ }
206
+ else {
207
+ var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
208
+ if (oldUlElement) {
209
+ this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
210
+ }
211
+ }
212
+ isListUpdated = false;
213
+ }
214
+ else if (this.parent.viewPortInfo.startIndex != 0) {
215
+ this.parent.updateVirtualReOrderList(true);
216
+ var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
217
+ if (oldUlElement) {
218
+ this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
219
+ }
220
+ isListUpdated = false;
221
+ }
222
+ 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)) {
223
+ var query = this.parent.getForQuery(this.parent.value).clone();
224
+ query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
225
+ this.parent.appendUncheckList = true;
226
+ this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
227
+ isListUpdated = false;
228
+ this.parent.appendUncheckList = false;
229
+ }
230
+ }
231
+ else {
232
+ var reOrderList = this.parent.list.querySelectorAll('.e-reorder')[0];
233
+ if (this.parent.list.querySelector('.e-virtual-ddl-content') && reOrderList) {
234
+ this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList);
235
+ }
236
+ var query = this.parent.getForQuery(this.parent.value).clone();
237
+ if (!this.parent.allowFiltering) { //need to check with allowFiltering false
238
+ var skipvalue = this.parent.viewPortInfo.startIndex - this.parent.value.length >= 0 ? this.parent.viewPortInfo.startIndex - this.parent.value.length : 0;
239
+ query = query.skip(skipvalue);
240
+ }
241
+ this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
242
+ isListUpdated = false;
243
+ }
244
+ this.parent.totalItemsCount();
245
+ }
246
+ if (isListUpdated) {
247
+ for (var i = this.parent.viewPortInfo.startIndex; i < endIndex; i++) {
248
+ var index = i;
249
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
250
+ var alreadyAddedData = this.parent.generatedDataObject[index];
251
+ if (this.component === 'multiselect' && this.parent.hideSelectedItem) {
252
+ if (alreadyAddedData) {
253
+ var value = getValue(this.parent.fields.value, alreadyAddedData[0]);
254
+ if (this.parent.value && value != null && Array.isArray(this.parent.value) && this.parent.value.length > 0 && this.parent.value.indexOf(value) < 0) {
255
+ var query = this.parent.getForQuery(this.parent.value).clone();
256
+ if (this.parent.viewPortInfo.endIndex == this.parent.totalItemCount + this.parent.value.length && this.parent.hideSelectedItem) {
257
+ query = query.skip(this.parent.totalItemCount - this.parent.itemCount);
258
+ }
259
+ else {
260
+ query = query.skip(this.parent.viewPortInfo.startIndex);
261
+ }
262
+ this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
263
+ isResetListCalled = true;
264
+ break;
265
+ }
266
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
267
+ else if ((this.parent.value === null || (this.parent.value && this.parent.value.length === 0))) {
268
+ currentData.push(alreadyAddedData[0]);
269
+ }
270
+ }
271
+ if (index === endIndex - 1) {
272
+ if (currentData.length != this.parent.itemCount) {
273
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
274
+ if (this.parent.hideSelectedItem) {
275
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
276
+ var query = this.parent.getForQuery(this.parent.value).clone();
277
+ if (this.parent.viewPortInfo.endIndex == this.parent.totalItemCount + this.parent.value.length && this.parent.hideSelectedItem) {
278
+ query = query.skip(this.parent.totalItemCount - this.parent.itemCount);
279
+ }
280
+ else {
281
+ query = query.skip(this.parent.viewPortInfo.startIndex);
282
+ }
283
+ this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
284
+ isResetListCalled = true;
285
+ }
286
+ }
287
+ }
288
+ }
289
+ else {
290
+ if (alreadyAddedData) {
291
+ currentData.push(alreadyAddedData[0]);
292
+ }
293
+ }
184
294
  }
185
295
  }
186
- this.parent.renderItems(currentData, this.parent.fields);
296
+ if (!isResetListCalled && isListUpdated) {
297
+ if (this.component === 'multiselect' && this.parent.allowCustomValue && this.parent.viewPortInfo.startIndex == 0 && this.parent.virtualCustomData) {
298
+ currentData.splice(0, 0, this.parent.virtualCustomData);
299
+ }
300
+ var totalData = [];
301
+ if (this.component === 'multiselect' && this.parent.allowCustomValue && this.parent.viewPortInfo.endIndex == this.parent.totalItemCount) {
302
+ if (this.parent.virtualCustomSelectData && this.parent.virtualCustomSelectData.length > 0) {
303
+ totalData = currentData.concat(this.parent.virtualCustomSelectData);
304
+ currentData = totalData;
305
+ }
306
+ }
307
+ var ulElement = this.parent.renderItems(currentData, this.parent.fields, this.component === 'multiselect' && this.parent.mode === 'CheckBox');
308
+ }
309
+ if (this.component === 'multiselect') {
310
+ this.parent.updatevirtualizationList();
311
+ }
312
+ this.parent.getSkeletonCount();
187
313
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
188
314
  var virtualTrackElement = this.parent.list.getElementsByClassName('e-virtual-ddl')[0];
189
315
  if (virtualTrackElement) {
190
316
  (virtualTrackElement).style = this.parent.GetVirtualTrackHeight();
191
317
  }
318
+ else if (!virtualTrackElement && this.parent.skeletonCount > 0 && this.parent.popupWrapper) {
319
+ var virualElement = this.parent.createElement('div', {
320
+ id: this.parent.element.id + '_popup', className: 'e-virtual-ddl', styles: this.parent.GetVirtualTrackHeight()
321
+ });
322
+ this.parent.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
323
+ }
192
324
  this.parent.UpdateSkeleton();
193
325
  this.parent.liCollections = this.parent.list.querySelectorAll('.e-list-item');
194
326
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -199,13 +331,17 @@ var VirtualScroll = /** @class */ (function () {
199
331
  if (this.parent.fields.groupBy) {
200
332
  this.parent.scrollStop();
201
333
  }
334
+ if (this.parent.keyCode == 40 && this.parent.isScrollChanged && this.parent.hideSelectedItem && !isNullOrUndefined(this.parent.currentFocuedListElement)) {
335
+ var currentSelectElem = this.parent.getElementByValue(this.parent.currentFocuedListElement.getAttribute('data-value'));
336
+ this.parent.addListFocus(currentSelectElem);
337
+ this.parent.isScrollChanged = false;
338
+ }
202
339
  };
203
340
  VirtualScroll.prototype.generateQueryAndSetQueryIndexAsync = function (query, isPopupOpen) {
204
341
  var isStartIndexInitialised = false;
205
342
  var queryStartIndex = 0;
206
343
  var queryEndIndex = 0;
207
- var sortedDataStartIndex = 0;
208
- var vEndIndex = this.parent && this.parent.viewPortInfo.endIndex !== 0 ? this.parent.viewPortInfo.endIndex : sortedDataStartIndex + this.parent.getItems().length;
344
+ var vEndIndex = this.parent.viewPortInfo.endIndex;
209
345
  if (!isPopupOpen && vEndIndex !== 0) {
210
346
  for (var i = this.parent.viewPortInfo.startIndex; i <= vEndIndex; i++) {
211
347
  if (!(i in this.parent.generatedDataObject)) {
@@ -223,6 +359,13 @@ var VirtualScroll = /** @class */ (function () {
223
359
  this.parent.virtualItemStartIndex = queryStartIndex;
224
360
  this.parent.virtualItemEndIndex = queryEndIndex;
225
361
  this.generateAndExecuteQueryAsync(query, queryStartIndex, queryEndIndex);
362
+ if (this.component === 'multiselect' && this.parent.hideSelectedItem && this.parent.value && Array.isArray(this.parent.value) && this.parent.value.length > 0) {
363
+ this.parent.totalItemsCount();
364
+ }
365
+ if (this.component === 'multiselect' && this.parent.virtualItemStartIndex === this.parent.virtualItemEndIndex) {
366
+ this.parent.virtualItemStartIndex = this.parent.viewPortInfo.startIndex;
367
+ this.parent.virtualItemEndIndex = this.parent.viewPortInfo.endIndex;
368
+ }
226
369
  }
227
370
  this.setCurrentViewDataAsync();
228
371
  };
@@ -268,7 +411,8 @@ var VirtualScroll = /** @class */ (function () {
268
411
  };
269
412
  VirtualScroll.prototype.scrollListener = function (scrollArgs) {
270
413
  var _this = this;
271
- if (!this.parent.isPreventScrollAction) {
414
+ if (!this.parent.isPreventScrollAction && !this.parent.isVirtualTrackHeight) {
415
+ this.parent.preventSetCurrentData = false;
272
416
  var info = scrollArgs.sentinel;
273
417
  var pStartIndex = this.parent.previousStartIndex;
274
418
  this.parent.viewPortInfo = this.getInfoFromView(scrollArgs.direction, info, scrollArgs.offset, false);
@@ -304,20 +448,6 @@ var VirtualScroll = /** @class */ (function () {
304
448
  this.parent.previousInfo = this.parent.viewPortInfo;
305
449
  }
306
450
  };
307
- VirtualScroll.prototype.getPageCount = function (popupElement, returnExactCount) {
308
- if (returnExactCount === void 0) { returnExactCount = false; }
309
- var list = popupElement && popupElement.querySelector('.e-content');
310
- if (list) {
311
- var liHeight = list.classList.contains('e-nodata') ? null : getComputedStyle(list.querySelectorAll('.e-list-item')[0], null).getPropertyValue('height');
312
- var pageCount = list.getBoundingClientRect().height / parseInt(liHeight, 10);
313
- return returnExactCount ? pageCount : Math.round(pageCount);
314
- }
315
- return 0;
316
- };
317
- ;
318
- VirtualScroll.prototype.getRowHeight = function () {
319
- return (isNullOrUndefined(this.parent.liCollections) || this.parent.liCollections.length == 0) ? 0 : Math.ceil(this.parent.liCollections[0].getBoundingClientRect().height);
320
- };
321
451
  VirtualScroll.prototype.getInfoFromView = function (direction, info, e, isscrollAction) {
322
452
  var infoType = {
323
453
  direction: direction, sentinelInfo: info, offsets: e,
@@ -353,7 +483,7 @@ var VirtualScroll = /** @class */ (function () {
353
483
  var idxAddedToExactTop = (pageSizeBy4) > infoViewIndices ? pageSizeBy4 :
354
484
  (infoViewIndices + infoViewIndices / 4);
355
485
  var eIndex = Math.round(exactTopIndex + idxAddedToExactTop);
356
- infoType.endIndex = eIndex < totalItemCount ? eIndex : totalItemCount;
486
+ infoType.endIndex = (eIndex < totalItemCount || this.component == "multiselect") ? eIndex : totalItemCount;
357
487
  var sIndex = infoType.endIndex - this.parent.virtualItemCount;
358
488
  infoType.startIndex = sIndex > 0 ? sIndex : 0;
359
489
  infoType.endIndex = sIndex < 0 ? this.parent.virtualItemCount : infoType.endIndex;
@@ -388,7 +518,7 @@ var VirtualScroll = /** @class */ (function () {
388
518
  top: top,
389
519
  left: left
390
520
  };
391
- if (_this.parent.list.querySelectorAll('.e-virtual-list').length > 0) {
521
+ if (_this.parent.list && _this.parent.list.querySelectorAll('.e-virtual-list').length > 0) {
392
522
  var infoview = _this.getInfoFromView(direction, current, scrollOffsetargs, true);
393
523
  if (_this.parent.scrollPreStartIndex != pstartIndex && !_this.parent.isPreventScrollAction) {
394
524
  _this.parent.isScrollActionTriggered = true;
@@ -1,4 +1,4 @@
1
- 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';
1
+ 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';
2
2
  import {FilterType,SelectEventArgs} from "./drop-down-base";
3
3
  import {ComponentModel} from '@syncfusion/ej2-base';
4
4
 
@@ -5,6 +5,8 @@ import { DataManager, Query } from '@syncfusion/ej2-data';
5
5
  import { SortOrder } from '@syncfusion/ej2-lists';
6
6
  import { DropDownBaseModel, FieldSettingsModel } from './drop-down-base-model';
7
7
  import { Popup } from '@syncfusion/ej2-popups';
8
+ import { VirtualInfo, VirtualScroll } from '../common/virtual-scroll';
9
+ import { GeneratedData } from '../drop-down-list';
8
10
  export declare type FilterType = 'StartsWith' | 'EndsWith' | 'Contains';
9
11
  export declare class FieldSettings extends ChildProperty<FieldSettings> {
10
12
  /**
@@ -53,6 +55,7 @@ export interface DropDownBaseClassList {
53
55
  disabled: string;
54
56
  group: string;
55
57
  grouping: string;
58
+ virtualList: string;
56
59
  }
57
60
  export interface SelectEventArgs {
58
61
  /**
@@ -224,8 +227,10 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
224
227
  protected isAddNewItemTemplate: boolean;
225
228
  private isRequesting;
226
229
  private isVirtualizationEnabled;
230
+ protected isCustomDataUpdated: boolean;
227
231
  private isAllowFiltering;
228
232
  private virtualizedItemsCount;
233
+ private isCheckBoxSelection;
229
234
  protected totalItemCount: number;
230
235
  protected dataCount: number;
231
236
  protected isRemoteDataUpdated: boolean;
@@ -234,6 +239,49 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
234
239
  }[] | DataManager | string[] | number[] | boolean[];
235
240
  protected isIncrementalRequest: boolean;
236
241
  protected itemCount: number;
242
+ protected initialRemoteRender: boolean;
243
+ protected virtualListHeight: number;
244
+ protected virtualItemCount: number;
245
+ protected isVirtualScrolling: boolean;
246
+ protected observer: VirtualScroll;
247
+ protected isPreventScrollAction: boolean;
248
+ protected scrollPreStartIndex: number;
249
+ protected isScrollActionTriggered: boolean;
250
+ protected previousStartIndex: number;
251
+ protected isMouseScrollAction: boolean;
252
+ protected isKeyBoardAction: boolean;
253
+ protected isScrollChanged: boolean;
254
+ protected isUpwardScrolling: boolean;
255
+ protected containerElementRect: ClientRect;
256
+ protected previousEndIndex: number;
257
+ protected previousInfo: VirtualInfo;
258
+ protected startIndex: number;
259
+ protected currentPageNumber: number;
260
+ protected pageCount: number;
261
+ protected isPreventKeyAction: boolean;
262
+ protected virtualItemStartIndex: number;
263
+ protected virtualItemEndIndex: number;
264
+ protected generatedDataObject: GeneratedData;
265
+ protected listItemHeight: number;
266
+ protected skeletonCount: number;
267
+ protected popupContentElement: HTMLElement;
268
+ protected keyboardEvent: KeyboardEventArgs;
269
+ protected listContainerHeight: string;
270
+ protected isVirtualTrackHeight: boolean;
271
+ protected virtualSelectAll: boolean;
272
+ protected incrementalQueryString: string;
273
+ protected incrementalEndIndex: number;
274
+ protected incrementalStartIndex: number;
275
+ protected incrementalPreQueryString: string;
276
+ protected isObjectCustomValue: boolean;
277
+ protected appendUncheckList: boolean;
278
+ protected virtualSelectAllData: {
279
+ [key: string]: Object;
280
+ }[] | DataManager | string[] | number[] | boolean[];
281
+ protected firstItem: string | number | boolean | object;
282
+ protected virtualListInfo: VirtualInfo;
283
+ protected viewPortInfo: VirtualInfo;
284
+ protected selectedValueInfo: VirtualInfo;
237
285
  /**
238
286
 
239
287
  /**
@@ -454,6 +502,15 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
454
502
  private getItemValue;
455
503
  private templateCompiler;
456
504
  protected l10nUpdate(actionFailure?: boolean): void;
505
+ protected checkAndResetCache(): void;
506
+ protected updateIncrementalInfo(startIndex: number, endIndex: number): void;
507
+ protected updateIncrementalView(startIndex: number, endIndex: number): void;
508
+ protected updateVirtualItemIndex(): void;
509
+ protected getFilteringSkeletonCount(): void;
510
+ protected getSkeletonCount(retainSkeleton?: boolean): void;
511
+ protected GetVirtualTrackHeight(): string;
512
+ protected getTransformValues(): string;
513
+ protected UpdateSkeleton(isSkeletonCountChange?: boolean, skeletonCount?: number): void;
457
514
  protected getLocaleName(): string;
458
515
  protected getTextByValue(value: string | number | boolean): string;
459
516
  protected getFormattedValue(value: string): string | number | boolean;
@@ -506,6 +563,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
506
563
  protected updatePopupState(): void;
507
564
  protected updateRemoteData(): void;
508
565
  private bindChildItems;
566
+ protected isObjectInArray(objectToFind: any, array: any[]): boolean;
509
567
  protected updateListValues(): void;
510
568
  protected findListElement(list: HTMLElement, findNode: string, attribute: string, value: string | boolean | number): HTMLElement;
511
569
  private raiseDataBound;
@@ -527,7 +585,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
527
585
  * @returns {Query} Returns the query to do the data query operation.
528
586
  */
529
587
  protected getQuery(query: Query): Query;
530
- protected updateVirtualizationProperties(itemCount: number, filtering: boolean): void;
588
+ protected updateVirtualizationProperties(itemCount: number, filtering: boolean, isCheckbox?: boolean): void;
531
589
  /**
532
590
  * To render the template content for group header element.
533
591
  *
@@ -561,7 +619,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
561
619
  */
562
620
  protected renderItems(listData: {
563
621
  [key: string]: Object;
564
- }[], fields: FieldSettingsModel): HTMLElement;
622
+ }[], fields: FieldSettingsModel, isCheckBoxUpdate?: boolean): HTMLElement;
565
623
  private createVirtualContent;
566
624
  private updateListElements;
567
625
  protected templateListItem(dataSource: {
@@ -580,7 +638,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
580
638
  * @param {string | number | boolean} value - Specifies given value.
581
639
  * @returns {number} Returns the index of the item.
582
640
  */
583
- protected getIndexByValue(value: string | number | boolean): number;
641
+ protected getIndexByValue(value: string | number | boolean | object): number;
584
642
  /**
585
643
  * Return the index of item which matched with given value in data source
586
644
  *
@@ -616,9 +674,11 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
616
674
  protected updateSelectElementData(isFiltering: boolean): void;
617
675
  protected updateSelection(): void;
618
676
  protected renderList(): void;
619
- protected updateDataSource(props?: DropDownBaseModel): void;
677
+ protected updateDataSource(props?: DropDownBaseModel, oldProps?: DropDownBaseModel): void;
620
678
  protected setUpdateInitial(props: string[], newProp: {
621
679
  [key: string]: string;
680
+ }, oldProp?: {
681
+ [key: string]: string;
622
682
  }): void;
623
683
  /**
624
684
  * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.
@@ -678,7 +738,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
678
738
  * @param { string | number } value - Specifies the value of the list item.
679
739
  * @returns {Object}
680
740
  */
681
- getDataByValue(value: string | number | boolean): {
741
+ getDataByValue(value: string | number | boolean | object): {
682
742
  [key: string]: Object;
683
743
  } | string | number | boolean;
684
744
  /**