@syncfusion/ej2-dropdowns 23.2.7-52849 → 24.1.41

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 (256) hide show
  1. package/.eslintrc.json +260 -0
  2. package/CHANGELOG.md +2038 -2152
  3. package/{ReadMe.md → README.md} +217 -217
  4. package/dist/ej2-dropdowns.min.js +10 -0
  5. package/dist/ej2-dropdowns.umd.min.js +10 -1
  6. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es2015.js +709 -172
  8. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  9. package/dist/es6/ej2-dropdowns.es5.js +870 -332
  10. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  11. package/dist/global/ej2-dropdowns.min.js +11 -0
  12. package/dist/global/ej2-dropdowns.min.js.map +1 -0
  13. package/dist/global/index.d.ts +14 -0
  14. package/helpers/e2e/autocomplete.js +13 -13
  15. package/helpers/e2e/combobox.js +13 -13
  16. package/helpers/e2e/dropdownlist.js +13 -13
  17. package/helpers/e2e/index.js +3 -3
  18. package/helpers/e2e/listboxHelper.js +13 -13
  19. package/helpers/e2e/multiselect.js +13 -13
  20. package/license +2 -2
  21. package/package.json +80 -80
  22. package/src/auto-complete/auto-complete-model.d.ts +188 -188
  23. package/src/auto-complete/auto-complete.d.ts +12 -12
  24. package/src/auto-complete/auto-complete.js +30 -25
  25. package/src/combo-box/combo-box-model.d.ts +224 -224
  26. package/src/combo-box/combo-box.d.ts +27 -27
  27. package/src/combo-box/combo-box.js +103 -31
  28. package/src/common/incremental-search.d.ts +1 -1
  29. package/src/common/incremental-search.js +50 -7
  30. package/src/common/interface.d.ts +2 -0
  31. package/src/common/virtual-scroll.js +68 -47
  32. package/src/drop-down-base/drop-down-base-model.d.ts +200 -200
  33. package/src/drop-down-base/drop-down-base.d.ts +38 -18
  34. package/src/drop-down-base/drop-down-base.js +173 -60
  35. package/src/drop-down-list/drop-down-list-model.d.ts +202 -202
  36. package/src/drop-down-list/drop-down-list.d.ts +14 -7
  37. package/src/drop-down-list/drop-down-list.js +325 -61
  38. package/src/drop-down-tree/drop-down-tree-model.d.ts +468 -468
  39. package/src/drop-down-tree/drop-down-tree.js +43 -39
  40. package/src/list-box/list-box-model.d.ts +193 -193
  41. package/src/list-box/list-box.d.ts +2 -2
  42. package/src/list-box/list-box.js +27 -20
  43. package/src/mention/mention-model.d.ts +261 -261
  44. package/src/mention/mention.js +24 -20
  45. package/src/multi-select/checkbox-selection.js +4 -1
  46. package/src/multi-select/multi-select-model.d.ts +512 -512
  47. package/src/multi-select/multi-select.js +23 -21
  48. package/styles/auto-complete/_all.scss +1 -1
  49. package/styles/auto-complete/_bootstrap-dark-definition.scss +3 -3
  50. package/styles/auto-complete/_bootstrap-definition.scss +2 -2
  51. package/styles/auto-complete/_bootstrap4-definition.scss +11 -11
  52. package/styles/auto-complete/_bootstrap5-definition.scss +2 -2
  53. package/styles/auto-complete/_fabric-dark-definition.scss +2 -2
  54. package/styles/auto-complete/_fabric-definition.scss +2 -2
  55. package/styles/auto-complete/_fluent-definition.scss +2 -2
  56. package/styles/auto-complete/_fusionnew-definition.scss +2 -2
  57. package/styles/auto-complete/_highcontrast-definition.scss +2 -2
  58. package/styles/auto-complete/_highcontrast-light-definition.scss +2 -2
  59. package/styles/auto-complete/_material-dark-definition.scss +2 -2
  60. package/styles/auto-complete/_material-definition.scss +2 -2
  61. package/styles/auto-complete/_material3-definition.scss +2 -2
  62. package/styles/auto-complete/_tailwind-definition.scss +2 -2
  63. package/styles/auto-complete/material3-dark.scss +1 -1
  64. package/styles/auto-complete/material3.scss +1 -1
  65. package/styles/combo-box/_all.scss +1 -1
  66. package/styles/combo-box/_bootstrap-dark-definition.scss +2 -2
  67. package/styles/combo-box/_bootstrap-definition.scss +2 -2
  68. package/styles/combo-box/_bootstrap4-definition.scss +11 -11
  69. package/styles/combo-box/_bootstrap5-definition.scss +2 -2
  70. package/styles/combo-box/_fabric-dark-definition.scss +2 -2
  71. package/styles/combo-box/_fabric-definition.scss +2 -2
  72. package/styles/combo-box/_fluent-definition.scss +2 -2
  73. package/styles/combo-box/_fusionnew-definition.scss +2 -2
  74. package/styles/combo-box/_highcontrast-definition.scss +2 -2
  75. package/styles/combo-box/_highcontrast-light-definition.scss +3 -3
  76. package/styles/combo-box/_material-dark-definition.scss +2 -2
  77. package/styles/combo-box/_material-definition.scss +2 -2
  78. package/styles/combo-box/_material3-definition.scss +2 -2
  79. package/styles/combo-box/_tailwind-definition.scss +2 -2
  80. package/styles/combo-box/material3-dark.scss +1 -1
  81. package/styles/combo-box/material3.scss +1 -1
  82. package/styles/drop-down-base/_all.scss +2 -2
  83. package/styles/drop-down-base/_bootstrap-dark-definition.scss +83 -83
  84. package/styles/drop-down-base/_bootstrap-definition.scss +83 -83
  85. package/styles/drop-down-base/_bootstrap4-definition.scss +90 -90
  86. package/styles/drop-down-base/_bootstrap5-definition.scss +117 -117
  87. package/styles/drop-down-base/_definition.scss +23 -23
  88. package/styles/drop-down-base/_fabric-dark-definition.scss +86 -86
  89. package/styles/drop-down-base/_fabric-definition.scss +84 -84
  90. package/styles/drop-down-base/_fluent-definition.scss +121 -121
  91. package/styles/drop-down-base/_fusionnew-definition.scss +117 -117
  92. package/styles/drop-down-base/_highcontrast-definition.scss +105 -105
  93. package/styles/drop-down-base/_highcontrast-light-definition.scss +105 -105
  94. package/styles/drop-down-base/_layout.scss +195 -195
  95. package/styles/drop-down-base/_material-dark-definition.scss +86 -86
  96. package/styles/drop-down-base/_material-definition.scss +85 -85
  97. package/styles/drop-down-base/_material3-definition.scss +87 -87
  98. package/styles/drop-down-base/_tailwind-definition.scss +129 -129
  99. package/styles/drop-down-base/_theme.scss +391 -391
  100. package/styles/drop-down-base/material3-dark.scss +1 -1
  101. package/styles/drop-down-base/material3.scss +1 -1
  102. package/styles/drop-down-list/_all.scss +3 -3
  103. package/styles/drop-down-list/_bootstrap-dark-definition.scss +157 -157
  104. package/styles/drop-down-list/_bootstrap-definition.scss +156 -156
  105. package/styles/drop-down-list/_bootstrap4-definition.scss +202 -202
  106. package/styles/drop-down-list/_bootstrap5-definition.scss +201 -201
  107. package/styles/drop-down-list/_fabric-dark-definition.scss +128 -128
  108. package/styles/drop-down-list/_fabric-definition.scss +124 -124
  109. package/styles/drop-down-list/_fluent-definition.scss +185 -185
  110. package/styles/drop-down-list/_fusionnew-definition.scss +201 -201
  111. package/styles/drop-down-list/_highcontrast-definition.scss +142 -142
  112. package/styles/drop-down-list/_highcontrast-light-definition.scss +144 -144
  113. package/styles/drop-down-list/_layout.scss +310 -310
  114. package/styles/drop-down-list/_material-dark-definition.scss +143 -143
  115. package/styles/drop-down-list/_material-definition.scss +167 -167
  116. package/styles/drop-down-list/_material3-definition.scss +180 -180
  117. package/styles/drop-down-list/_tailwind-definition.scss +134 -134
  118. package/styles/drop-down-list/_theme.scss +10 -10
  119. package/styles/drop-down-list/icons/_bootstrap-dark.scss +14 -14
  120. package/styles/drop-down-list/icons/_bootstrap.scss +14 -14
  121. package/styles/drop-down-list/icons/_bootstrap4.scss +14 -14
  122. package/styles/drop-down-list/icons/_bootstrap5.scss +14 -14
  123. package/styles/drop-down-list/icons/_fabric-dark.scss +14 -14
  124. package/styles/drop-down-list/icons/_fabric.scss +14 -14
  125. package/styles/drop-down-list/icons/_fluent.scss +14 -14
  126. package/styles/drop-down-list/icons/_fusionnew.scss +14 -14
  127. package/styles/drop-down-list/icons/_highcontrast-light.scss +14 -14
  128. package/styles/drop-down-list/icons/_highcontrast.scss +14 -14
  129. package/styles/drop-down-list/icons/_material-dark.scss +14 -14
  130. package/styles/drop-down-list/icons/_material.scss +14 -14
  131. package/styles/drop-down-list/icons/_material3.scss +14 -14
  132. package/styles/drop-down-list/icons/_tailwind.scss +14 -14
  133. package/styles/drop-down-list/material3-dark.scss +1 -1
  134. package/styles/drop-down-list/material3.scss +1 -1
  135. package/styles/drop-down-tree/_all.scss +2 -2
  136. package/styles/drop-down-tree/_bootstrap-dark-definition.scss +71 -71
  137. package/styles/drop-down-tree/_bootstrap-definition.scss +70 -70
  138. package/styles/drop-down-tree/_bootstrap4-definition.scss +71 -71
  139. package/styles/drop-down-tree/_bootstrap5-definition.scss +59 -59
  140. package/styles/drop-down-tree/_fabric-dark-definition.scss +71 -71
  141. package/styles/drop-down-tree/_fabric-definition.scss +71 -71
  142. package/styles/drop-down-tree/_fluent-definition.scss +65 -65
  143. package/styles/drop-down-tree/_fusionnew-definition.scss +59 -59
  144. package/styles/drop-down-tree/_highcontrast-definition.scss +71 -71
  145. package/styles/drop-down-tree/_highcontrast-light-definition.scss +71 -71
  146. package/styles/drop-down-tree/_layout.scss +1418 -1418
  147. package/styles/drop-down-tree/_material-dark-definition.scss +72 -72
  148. package/styles/drop-down-tree/_material-definition.scss +72 -72
  149. package/styles/drop-down-tree/_material3-definition.scss +76 -76
  150. package/styles/drop-down-tree/_tailwind-definition.scss +61 -61
  151. package/styles/drop-down-tree/_theme.scss +132 -132
  152. package/styles/drop-down-tree/icons/_bootstrap-dark.scss +11 -11
  153. package/styles/drop-down-tree/icons/_bootstrap.scss +11 -11
  154. package/styles/drop-down-tree/icons/_bootstrap4.scss +11 -11
  155. package/styles/drop-down-tree/icons/_bootstrap5.scss +11 -11
  156. package/styles/drop-down-tree/icons/_fabric-dark.scss +11 -11
  157. package/styles/drop-down-tree/icons/_fabric.scss +11 -11
  158. package/styles/drop-down-tree/icons/_fluent.scss +11 -11
  159. package/styles/drop-down-tree/icons/_fusionnew.scss +11 -11
  160. package/styles/drop-down-tree/icons/_highcontrast-light.scss +11 -11
  161. package/styles/drop-down-tree/icons/_highcontrast.scss +11 -11
  162. package/styles/drop-down-tree/icons/_material-dark.scss +11 -11
  163. package/styles/drop-down-tree/icons/_material.scss +11 -11
  164. package/styles/drop-down-tree/icons/_material3.scss +11 -11
  165. package/styles/drop-down-tree/icons/_tailwind-dark.scss +11 -11
  166. package/styles/drop-down-tree/icons/_tailwind.scss +11 -11
  167. package/styles/drop-down-tree/material3-dark.scss +1 -1
  168. package/styles/drop-down-tree/material3.scss +1 -1
  169. package/styles/list-box/_all.scss +2 -2
  170. package/styles/list-box/_bootstrap-dark-definition.scss +126 -126
  171. package/styles/list-box/_bootstrap-definition.scss +119 -119
  172. package/styles/list-box/_bootstrap4-definition.scss +124 -124
  173. package/styles/list-box/_bootstrap5-definition.scss +120 -120
  174. package/styles/list-box/_fabric-dark-definition.scss +126 -126
  175. package/styles/list-box/_fabric-definition.scss +119 -119
  176. package/styles/list-box/_fluent-definition.scss +120 -120
  177. package/styles/list-box/_fusionnew-definition.scss +111 -111
  178. package/styles/list-box/_highcontrast-definition.scss +119 -119
  179. package/styles/list-box/_highcontrast-light-definition.scss +126 -126
  180. package/styles/list-box/_layout.scss +542 -542
  181. package/styles/list-box/_material-dark-definition.scss +126 -126
  182. package/styles/list-box/_material-definition.scss +119 -119
  183. package/styles/list-box/_material3-definition.scss +119 -119
  184. package/styles/list-box/_tailwind-definition.scss +119 -119
  185. package/styles/list-box/_theme.scss +382 -382
  186. package/styles/list-box/icons/_bootstrap-dark.scss +25 -25
  187. package/styles/list-box/icons/_bootstrap.scss +25 -25
  188. package/styles/list-box/icons/_bootstrap4.scss +25 -25
  189. package/styles/list-box/icons/_bootstrap5.scss +25 -25
  190. package/styles/list-box/icons/_fabric-dark.scss +25 -25
  191. package/styles/list-box/icons/_fabric.scss +25 -25
  192. package/styles/list-box/icons/_fluent.scss +25 -25
  193. package/styles/list-box/icons/_fusionnew.scss +25 -25
  194. package/styles/list-box/icons/_highcontrast-light.scss +25 -25
  195. package/styles/list-box/icons/_highcontrast.scss +25 -25
  196. package/styles/list-box/icons/_material-dark.scss +25 -25
  197. package/styles/list-box/icons/_material.scss +25 -25
  198. package/styles/list-box/icons/_material3.scss +25 -25
  199. package/styles/list-box/icons/_tailwind-dark.scss +25 -25
  200. package/styles/list-box/icons/_tailwind.scss +25 -25
  201. package/styles/list-box/material3-dark.scss +1 -1
  202. package/styles/list-box/material3.scss +1 -1
  203. package/styles/material3-dark.scss +1 -1
  204. package/styles/material3.scss +1 -1
  205. package/styles/mention/_all.scss +1 -1
  206. package/styles/mention/_bootstrap-dark-definition.scss +3 -3
  207. package/styles/mention/_bootstrap-definition.scss +3 -3
  208. package/styles/mention/_bootstrap4-definition.scss +3 -3
  209. package/styles/mention/_bootstrap5-definition.scss +1 -1
  210. package/styles/mention/_fabric-dark-definition.scss +2 -2
  211. package/styles/mention/_fabric-definition.scss +3 -3
  212. package/styles/mention/_fluent-definition.scss +1 -1
  213. package/styles/mention/_fusionnew-definition.scss +1 -1
  214. package/styles/mention/_highcontrast-definition.scss +3 -3
  215. package/styles/mention/_highcontrast-light-definition.scss +3 -3
  216. package/styles/mention/_layout.scss +6 -6
  217. package/styles/mention/_material-dark-definition.scss +3 -3
  218. package/styles/mention/_material-definition.scss +3 -3
  219. package/styles/mention/_material3-definition.scss +1 -1
  220. package/styles/mention/_tailwind-definition.scss +1 -1
  221. package/styles/mention/material3-dark.scss +1 -1
  222. package/styles/mention/material3.scss +1 -1
  223. package/styles/multi-select/_all.scss +2 -2
  224. package/styles/multi-select/_bootstrap-dark-definition.scss +203 -203
  225. package/styles/multi-select/_bootstrap-definition.scss +192 -192
  226. package/styles/multi-select/_bootstrap4-definition.scss +278 -278
  227. package/styles/multi-select/_bootstrap5-definition.scss +230 -230
  228. package/styles/multi-select/_fabric-dark-definition.scss +192 -192
  229. package/styles/multi-select/_fabric-definition.scss +183 -183
  230. package/styles/multi-select/_fluent-definition.scss +241 -241
  231. package/styles/multi-select/_fusionnew-definition.scss +227 -227
  232. package/styles/multi-select/_highcontrast-definition.scss +303 -303
  233. package/styles/multi-select/_highcontrast-light-definition.scss +297 -297
  234. package/styles/multi-select/_layout.scss +2199 -2199
  235. package/styles/multi-select/_material-dark-definition.scss +230 -230
  236. package/styles/multi-select/_material-definition.scss +223 -223
  237. package/styles/multi-select/_material3-definition.scss +246 -246
  238. package/styles/multi-select/_tailwind-definition.scss +235 -235
  239. package/styles/multi-select/_theme.scss +586 -586
  240. package/styles/multi-select/icons/_bootstrap-dark.scss +26 -26
  241. package/styles/multi-select/icons/_bootstrap.scss +26 -26
  242. package/styles/multi-select/icons/_bootstrap4.scss +37 -37
  243. package/styles/multi-select/icons/_bootstrap5.scss +26 -26
  244. package/styles/multi-select/icons/_fabric-dark.scss +26 -26
  245. package/styles/multi-select/icons/_fabric.scss +26 -26
  246. package/styles/multi-select/icons/_fluent.scss +55 -55
  247. package/styles/multi-select/icons/_fusionnew.scss +26 -26
  248. package/styles/multi-select/icons/_highcontrast-light.scss +26 -26
  249. package/styles/multi-select/icons/_highcontrast.scss +26 -26
  250. package/styles/multi-select/icons/_material-dark.scss +693 -693
  251. package/styles/multi-select/icons/_material.scss +693 -693
  252. package/styles/multi-select/icons/_material3.scss +692 -692
  253. package/styles/multi-select/icons/_tailwind.scss +26 -26
  254. package/styles/multi-select/material3-dark.scss +1 -1
  255. package/styles/multi-select/material3.scss +1 -1
  256. package/tslint.json +111 -0
@@ -1,22 +1,22 @@
1
- var __extends = (this && this.__extends) || (function () {
2
- var extendStatics = function (d, b) {
3
- extendStatics = Object.setPrototypeOf ||
4
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
6
- return extendStatics(d, b);
7
- };
8
- return function (d, b) {
9
- extendStatics(d, b);
10
- function __() { this.constructor = d; }
11
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
12
- };
13
- })();
14
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
15
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
16
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
17
- 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;
18
- return c > 3 && r && Object.defineProperty(target, key, r), r;
19
- };
1
+ var __extends = (this && this.__extends) || (function () {
2
+ var extendStatics = function (d, b) {
3
+ extendStatics = Object.setPrototypeOf ||
4
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
6
+ return extendStatics(d, b);
7
+ };
8
+ return function (d, b) {
9
+ extendStatics(d, b);
10
+ function __() { this.constructor = d; }
11
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
12
+ };
13
+ })();
14
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
15
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
16
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
17
+ 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;
18
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
19
+ };
20
20
  // eslint-disable-next-line @typescript-eslint/triple-slash-reference
21
21
  /// <reference path='../drop-down-list/drop-down-list-model.d.ts'/>
22
22
  import { EventHandler, Property, Event, addClass, Browser, removeClass, detach } from '@syncfusion/ej2-base';
@@ -220,7 +220,7 @@ var ComboBox = /** @class */ (function (_super) {
220
220
  if (this.isSelectCustom) {
221
221
  this.removeSelection();
222
222
  }
223
- if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped) {
223
+ if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped && !this.enableVirtualization) {
224
224
  setTimeout(function () {
225
225
  _this.inlineSearch();
226
226
  });
@@ -229,7 +229,7 @@ var ComboBox = /** @class */ (function (_super) {
229
229
  ComboBox.prototype.getFocusElement = function () {
230
230
  var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
231
231
  var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : this.list;
232
- var isSelected = dataItem.text === this.inputElement.value && !isNullOrUndefined(selected);
232
+ var isSelected = dataItem.text && dataItem.text.toString() === this.inputElement.value && !isNullOrUndefined(selected);
233
233
  if (isSelected) {
234
234
  return selected;
235
235
  }
@@ -239,6 +239,70 @@ var ComboBox = /** @class */ (function (_super) {
239
239
  var dataSource = this.sortedData;
240
240
  var type = this.typeOfData(dataSource).typeof;
241
241
  var activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
242
+ if (this.enableVirtualization && inputValue !== '' && this.getModuleName() !== 'autocomplete' && this.isTyped && !this.allowFiltering) {
243
+ var updatingincrementalindex = false;
244
+ if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) || this.incrementalEndIndex == 0) {
245
+ updatingincrementalindex = true;
246
+ this.incrementalStartIndex = this.incrementalEndIndex;
247
+ if (this.incrementalEndIndex == 0) {
248
+ this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
249
+ }
250
+ else {
251
+ this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
252
+ }
253
+ this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
254
+ updatingincrementalindex = true;
255
+ }
256
+ if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
257
+ this.updateIncrementalView(0, this.itemCount);
258
+ }
259
+ activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
260
+ while (isNullOrUndefined(activeItem) && this.incrementalEndIndex < this.totalItemCount) {
261
+ this.incrementalStartIndex = this.incrementalEndIndex;
262
+ this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
263
+ this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
264
+ updatingincrementalindex = true;
265
+ if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
266
+ this.updateIncrementalView(0, this.itemCount);
267
+ }
268
+ activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
269
+ if (!isNullOrUndefined(activeItem)) {
270
+ break;
271
+ }
272
+ if (isNullOrUndefined(activeItem) && this.incrementalEndIndex >= this.totalItemCount) {
273
+ this.incrementalStartIndex = 0;
274
+ this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
275
+ break;
276
+ }
277
+ }
278
+ if (activeItem.index) {
279
+ if ((!(this.viewPortInfo.startIndex >= activeItem.index)) || (!(activeItem.index >= this.viewPortInfo.endIndex))) {
280
+ var startIndex = activeItem.index - ((this.itemCount / 2) - 2) > 0 ? activeItem.index - ((this.itemCount / 2) - 2) : 0;
281
+ var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
282
+ if (startIndex != this.viewPortInfo.startIndex) {
283
+ this.updateIncrementalView(startIndex, endIndex);
284
+ }
285
+ }
286
+ }
287
+ if (!isNullOrUndefined(activeItem.item)) {
288
+ var index_1 = this.getIndexByValue(activeItem.item.getAttribute('data-value')) - this.skeletonCount;
289
+ if (index_1 > this.itemCount / 2) {
290
+ var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;
291
+ var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
292
+ this.updateIncrementalView(startIndex, endIndex);
293
+ }
294
+ activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));
295
+ }
296
+ else {
297
+ this.updateIncrementalView(0, this.itemCount);
298
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
299
+ this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
300
+ this.list.scrollTop = 0;
301
+ }
302
+ if (activeItem && activeItem.item) {
303
+ activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));
304
+ }
305
+ }
242
306
  var activeElement = activeItem.item;
243
307
  if (!isNullOrUndefined(activeElement)) {
244
308
  var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -249,6 +313,14 @@ var ComboBox = /** @class */ (function (_super) {
249
313
  if (!this.enableVirtualization) {
250
314
  this.list.scrollTop = count * height + fixedHead;
251
315
  }
316
+ else {
317
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
318
+ this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
319
+ if (this.enableVirtualization && !this.fields.groupBy) {
320
+ var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? activeElement.offsetTop + (this.virtualListInfo.startIndex * activeElement.offsetHeight) : activeElement.offsetTop;
321
+ this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * activeElement.offsetHeight);
322
+ }
323
+ }
252
324
  addClass([activeElement], dropDownListClasses.focus);
253
325
  }
254
326
  }
@@ -290,7 +362,7 @@ var ComboBox = /** @class */ (function (_super) {
290
362
  * Shows the spinner loader.
291
363
  *
292
364
  * @returns {void}
293
- * @deprecated
365
+
294
366
  */
295
367
  ComboBox.prototype.showSpinner = function () {
296
368
  if (isNullOrUndefined(this.spinnerElement)) {
@@ -310,7 +382,7 @@ var ComboBox = /** @class */ (function (_super) {
310
382
  * Hides the spinner loader.
311
383
  *
312
384
  * @returns {void}
313
- * @deprecated
385
+
314
386
  */
315
387
  ComboBox.prototype.hideSpinner = function () {
316
388
  if (!isNullOrUndefined(this.spinnerElement)) {
@@ -651,7 +723,7 @@ var ComboBox = /** @class */ (function (_super) {
651
723
  * @param { Object[] } items - Specifies an array of JSON data or a JSON data.
652
724
  * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
653
725
  * @returns {void}
654
- * @deprecated
726
+
655
727
  */
656
728
  ComboBox.prototype.addItem = function (items, itemIndex) {
657
729
  _super.prototype.addItem.call(this, items, itemIndex);
@@ -663,7 +735,7 @@ var ComboBox = /** @class */ (function (_super) {
663
735
  * @param {Query} query - Specify the query to filter the data.
664
736
  * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
665
737
  * @returns {void}
666
- * @deprecated
738
+
667
739
  */
668
740
  ComboBox.prototype.filter = function (dataSource, query, fields) {
669
741
  _super.prototype.filter.call(this, dataSource, query, fields);
@@ -673,7 +745,7 @@ var ComboBox = /** @class */ (function (_super) {
673
745
  * Opens the popup that displays the list of items.
674
746
  *
675
747
  * @returns {void}
676
- * @deprecated
748
+
677
749
  */
678
750
  ComboBox.prototype.showPopup = function (e) {
679
751
  /* eslint-enable valid-jsdoc, jsdoc/require-param */
@@ -684,7 +756,7 @@ var ComboBox = /** @class */ (function (_super) {
684
756
  * Hides the popup if it is in open state.
685
757
  *
686
758
  * @returns {void}
687
- * @deprecated
759
+
688
760
  */
689
761
  ComboBox.prototype.hidePopup = function (e) {
690
762
  /* eslint-enable valid-jsdoc, jsdoc/require-param */
@@ -753,7 +825,7 @@ var ComboBox = /** @class */ (function (_super) {
753
825
  * Allows you to clear the selected values from the component.
754
826
  *
755
827
  * @returns {void}
756
- * @deprecated
828
+
757
829
  */
758
830
  ComboBox.prototype.clear = function () {
759
831
  this.value = null;
@@ -763,7 +835,7 @@ var ComboBox = /** @class */ (function (_super) {
763
835
  * Moves the focus from the component if the component is already focused.
764
836
  *
765
837
  * @returns {void}
766
- * @deprecated
838
+
767
839
  */
768
840
  ComboBox.prototype.focusOut = function (e) {
769
841
  /* eslint-enable valid-jsdoc, jsdoc/require-param */
@@ -774,7 +846,7 @@ var ComboBox = /** @class */ (function (_super) {
774
846
  * Gets all the list items bound on this component.
775
847
  *
776
848
  * @returns {Element[]}
777
- * @deprecated
849
+
778
850
  */
779
851
  ComboBox.prototype.getItems = function () {
780
852
  return _super.prototype.getItems.call(this);
@@ -784,7 +856,7 @@ var ComboBox = /** @class */ (function (_super) {
784
856
  *
785
857
  * @param { string | number } value - Specifies the value of the list item.
786
858
  * @returns {Object}
787
- * @deprecated
859
+
788
860
  */
789
861
  ComboBox.prototype.getDataByValue = function (value) {
790
862
  return _super.prototype.getDataByValue.call(this, value);
@@ -13,7 +13,7 @@ export declare type SearchType = 'StartsWith' | 'Equal' | 'EndsWith' | 'Contains
13
13
  * @param {string} elementId - Specifies the list element ID.
14
14
  * @returns {Element} Returns list item based on key code matches with list text content.
15
15
  */
16
- export declare function incrementalSearch(keyCode: number, items: HTMLElement[], selectedIndex: number, ignoreCase: boolean, elementId: string): Element;
16
+ export declare function incrementalSearch(keyCode: number, items: HTMLElement[], selectedIndex: number, ignoreCase: boolean, elementId: string, queryStringUpdated?: boolean, currentValue?: string, isVirtual?: boolean, refresh?: boolean): Element;
17
17
  /**
18
18
  * Search the list item based on given input value matches with search type.
19
19
  *
@@ -3,6 +3,7 @@
3
3
  */
4
4
  var queryString = '';
5
5
  var prevString = '';
6
+ var tempQueryString = '';
6
7
  var matches = [];
7
8
  var activeClass = 'e-active';
8
9
  var prevElementId = '';
@@ -17,21 +18,49 @@ var prevElementId = '';
17
18
  * @param {string} elementId - Specifies the list element ID.
18
19
  * @returns {Element} Returns list item based on key code matches with list text content.
19
20
  */
20
- export function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId) {
21
- queryString += String.fromCharCode(keyCode);
22
- setTimeout(function () {
23
- queryString = '';
24
- }, 1000);
21
+ export function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId, queryStringUpdated, currentValue, isVirtual, refresh) {
22
+ if (!queryStringUpdated || queryString === '') {
23
+ if (tempQueryString != '') {
24
+ queryString = tempQueryString + String.fromCharCode(keyCode);
25
+ tempQueryString = '';
26
+ }
27
+ else {
28
+ queryString += String.fromCharCode(keyCode);
29
+ }
30
+ }
31
+ else if (queryString == prevString) {
32
+ tempQueryString = String.fromCharCode(keyCode);
33
+ }
34
+ if (isVirtual) {
35
+ setTimeout(function () {
36
+ tempQueryString = '';
37
+ }, 700);
38
+ setTimeout(function () {
39
+ queryString = '';
40
+ }, 3000);
41
+ }
42
+ else {
43
+ setTimeout(function () {
44
+ queryString = '';
45
+ }, 1000);
46
+ }
25
47
  var index;
26
48
  queryString = ignoreCase ? queryString.toLowerCase() : queryString;
27
- if (prevElementId === elementId && prevString === queryString) {
49
+ if (prevElementId === elementId && prevString === queryString && !refresh) {
28
50
  for (var i = 0; i < matches.length; i++) {
29
51
  if (matches[i].classList.contains(activeClass)) {
30
52
  index = i;
31
53
  break;
32
54
  }
55
+ if (currentValue && matches[i].textContent.toLowerCase() === currentValue.toLowerCase()) {
56
+ index = i;
57
+ break;
58
+ }
33
59
  }
34
60
  index = index + 1;
61
+ if (isVirtual) {
62
+ return matches[index] && matches.length - 1 != index ? matches[index] : matches[matches.length];
63
+ }
35
64
  return matches[index] ? matches[index] : matches[0];
36
65
  }
37
66
  else {
@@ -61,6 +90,20 @@ export function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, ele
61
90
  } while (i !== selectedIndex);
62
91
  prevString = queryString;
63
92
  prevElementId = elementId;
93
+ if (isVirtual) {
94
+ var indexUpdated = false;
95
+ for (var i_1 = 0; i_1 < matches.length; i_1++) {
96
+ if (currentValue && matches[i_1].textContent.toLowerCase() === currentValue.toLowerCase()) {
97
+ index = i_1;
98
+ indexUpdated = true;
99
+ break;
100
+ }
101
+ }
102
+ if (currentValue && indexUpdated) {
103
+ index = index + 1;
104
+ }
105
+ return matches[index] ? matches[index] : matches[0];
106
+ }
64
107
  return matches[0];
65
108
  }
66
109
  }
@@ -97,7 +140,7 @@ export function Search(inputVal, items, searchType, ignoreCase, dataSource, fiel
97
140
  });
98
141
  });
99
142
  }
100
- text = dataSource && filterValue ? (ignoreCase ? filterValue.toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
143
+ text = dataSource && filterValue ? (ignoreCase ? filterValue.toString().toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
101
144
  /* eslint-disable security/detect-non-literal-regexp */
102
145
  if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, "g").test(text))) {
103
146
  itemData.item = item;
@@ -57,6 +57,7 @@ export interface IDropdownlist extends Component<HTMLElement> {
57
57
  listData: {
58
58
  [key: string]: Object;
59
59
  }[] | string[] | boolean[] | number[];
60
+ skeletonCount: number;
60
61
  getSkeletonCount(retainSkeleton?: boolean): void;
61
62
  getItems(): HTMLElement[];
62
63
  getQuery(query: Query): Query;
@@ -73,4 +74,5 @@ export interface IDropdownlist extends Component<HTMLElement> {
73
74
  [key: string]: Object;
74
75
  }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query, e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
75
76
  findListElement(list: HTMLElement, findNode: string, attribute: string, value: string | boolean | number): HTMLElement;
77
+ scrollStop(e?: Event): void;
76
78
  }
@@ -1,52 +1,52 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
13
- return new (P || (P = Promise))(function (resolve, reject) {
14
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
15
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
16
- function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
17
- step((generator = generator.apply(thisArg, _arguments || [])).next());
18
- });
19
- };
20
- var __generator = (this && this.__generator) || function (thisArg, body) {
21
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
22
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
23
- function verb(n) { return function (v) { return step([n, v]); }; }
24
- function step(op) {
25
- if (f) throw new TypeError("Generator is already executing.");
26
- while (_) try {
27
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
28
- if (y = 0, t) op = [op[0] & 2, t.value];
29
- switch (op[0]) {
30
- case 0: case 1: t = op; break;
31
- case 4: _.label++; return { value: op[1], done: false };
32
- case 5: _.label++; y = op[1]; op = [0]; continue;
33
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
34
- default:
35
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
36
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
37
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
38
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
39
- if (t[2]) _.ops.pop();
40
- _.trys.pop(); continue;
41
- }
42
- op = body.call(thisArg, _);
43
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
44
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
45
- }
46
- };
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
13
+ return new (P || (P = Promise))(function (resolve, reject) {
14
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
15
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
16
+ function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
17
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
18
+ });
19
+ };
20
+ var __generator = (this && this.__generator) || function (thisArg, body) {
21
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
22
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
23
+ function verb(n) { return function (v) { return step([n, v]); }; }
24
+ function step(op) {
25
+ if (f) throw new TypeError("Generator is already executing.");
26
+ while (_) try {
27
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
28
+ if (y = 0, t) op = [op[0] & 2, t.value];
29
+ switch (op[0]) {
30
+ case 0: case 1: t = op; break;
31
+ case 4: _.label++; return { value: op[1], done: false };
32
+ case 5: _.label++; y = op[1]; op = [0]; continue;
33
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
34
+ default:
35
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
36
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
37
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
38
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
39
+ if (t[2]) _.ops.pop();
40
+ _.trys.pop(); continue;
41
+ }
42
+ op = body.call(thisArg, _);
43
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
44
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
45
+ }
46
+ };
47
47
  import { EventHandler, Browser, select, isNullOrUndefined } from '@syncfusion/ej2-base';
48
48
  import { debounce, Touch } from '@syncfusion/ej2-base';
49
- import { Query } from '@syncfusion/ej2-data';
49
+ import { DataManager, Query } from '@syncfusion/ej2-data';
50
50
  var VirtualScroll = /** @class */ (function () {
51
51
  function VirtualScroll(parent) {
52
52
  var _this = this;
@@ -150,9 +150,24 @@ var VirtualScroll = /** @class */ (function () {
150
150
  query = this.getPageQuery(query, virtualItemStartIndex, virtualItemEndIndex);
151
151
  }
152
152
  }
153
+ var tempCustomFilter = this.parent.isCustomFilter;
154
+ if (this.component === 'combobox') {
155
+ var totalData = 0;
156
+ if (this.parent.dataSource instanceof DataManager) {
157
+ totalData = this.parent.dataSource.dataSource.json.length;
158
+ }
159
+ else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
160
+ totalData = this.parent.dataSource.length;
161
+ }
162
+ if (totalData > 0) {
163
+ this.parent.isCustomFilter = (totalData == this.parent.totalItemCount && this.parent.queryString != this.parent.typedString) ? true : this.parent.isCustomFilter;
164
+ }
165
+ }
153
166
  this.parent.resetList(dataSource, this.parent.fields, query);
167
+ this.parent.isCustomFilter = tempCustomFilter;
154
168
  };
155
169
  VirtualScroll.prototype.removeSkipAndTakeEvents = function (query) {
170
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
156
171
  query.queries = query.queries.filter(function (event) {
157
172
  return event.fn !== 'onSkip' && event.fn !== 'onTake';
158
173
  });
@@ -181,6 +196,9 @@ var VirtualScroll = /** @class */ (function () {
181
196
  if (virtualContentElement) {
182
197
  (virtualContentElement).style = this.parent.getTransformValues();
183
198
  }
199
+ if (this.parent.fields.groupBy) {
200
+ this.parent.scrollStop();
201
+ }
184
202
  };
185
203
  VirtualScroll.prototype.generateQueryAndSetQueryIndexAsync = function (query, isPopupOpen) {
186
204
  var isStartIndexInitialised = false;
@@ -231,6 +249,9 @@ var VirtualScroll = /** @class */ (function () {
231
249
  }
232
250
  else {
233
251
  this.parent.getSkeletonCount(true);
252
+ if (this.component === 'combobox') {
253
+ this.parent.skeletonCount = this.parent.totalItemCount != 0 && this.parent.totalItemCount < (this.parent.itemCount * 2) ? 0 : this.parent.skeletonCount;
254
+ }
234
255
  }
235
256
  }
236
257
  return [4 /*yield*/, this.dataProcessAsync()];