@syncfusion/ej2-dropdowns 22.2.11 → 23.1.36

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 (253) hide show
  1. package/CHANGELOG.md +2 -201
  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 +1128 -73
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +1182 -69
  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 -12
  13. package/src/auto-complete/auto-complete.js +40 -2
  14. package/src/combo-box/combo-box.js +9 -3
  15. package/src/common/index.d.ts +2 -0
  16. package/src/common/index.js +1 -0
  17. package/src/common/interface.d.ts +76 -0
  18. package/src/common/interface.js +1 -0
  19. package/src/common/virtual-scroll.d.ts +61 -0
  20. package/src/common/virtual-scroll.js +376 -0
  21. package/src/drop-down-base/drop-down-base.d.ts +10 -4
  22. package/src/drop-down-base/drop-down-base.js +72 -8
  23. package/src/drop-down-list/drop-down-list-model.d.ts +8 -1
  24. package/src/drop-down-list/drop-down-list.d.ts +55 -1
  25. package/src/drop-down-list/drop-down-list.js +635 -37
  26. package/src/drop-down-list/index.d.ts +1 -0
  27. package/src/drop-down-list/index.js +1 -0
  28. package/src/drop-down-tree/drop-down-tree.d.ts +1 -1
  29. package/src/drop-down-tree/drop-down-tree.js +2 -4
  30. package/src/global.js +3 -0
  31. package/src/mention/mention.js +8 -1
  32. package/src/multi-select/checkbox-selection.js +1 -1
  33. package/src/multi-select/multi-select.d.ts +2 -0
  34. package/src/multi-select/multi-select.js +43 -12
  35. package/styles/auto-complete/bootstrap-dark.scss +1 -1
  36. package/styles/auto-complete/bootstrap.scss +1 -1
  37. package/styles/auto-complete/bootstrap4.scss +1 -1
  38. package/styles/auto-complete/bootstrap5-dark.scss +1 -1
  39. package/styles/auto-complete/bootstrap5.scss +1 -1
  40. package/styles/auto-complete/fabric-dark.scss +1 -1
  41. package/styles/auto-complete/fabric.scss +1 -1
  42. package/styles/auto-complete/fluent-dark.scss +1 -1
  43. package/styles/auto-complete/fluent.scss +1 -1
  44. package/styles/auto-complete/highcontrast-light.scss +1 -1
  45. package/styles/auto-complete/highcontrast.scss +1 -1
  46. package/styles/auto-complete/material-dark.css +0 -1
  47. package/styles/auto-complete/material-dark.scss +1 -1
  48. package/styles/auto-complete/material.css +0 -1
  49. package/styles/auto-complete/material.scss +1 -1
  50. package/styles/auto-complete/material3-dark.css +0 -1
  51. package/styles/auto-complete/material3-dark.scss +1 -1
  52. package/styles/auto-complete/material3.css +0 -1
  53. package/styles/auto-complete/material3.scss +1 -1
  54. package/styles/auto-complete/tailwind-dark.css +0 -1
  55. package/styles/auto-complete/tailwind-dark.scss +1 -1
  56. package/styles/auto-complete/tailwind.css +0 -1
  57. package/styles/auto-complete/tailwind.scss +1 -1
  58. package/styles/bootstrap-dark.css +0 -8
  59. package/styles/bootstrap.css +0 -8
  60. package/styles/bootstrap4.css +4 -12
  61. package/styles/bootstrap5-dark.css +0 -8
  62. package/styles/bootstrap5.css +0 -8
  63. package/styles/combo-box/bootstrap-dark.scss +1 -1
  64. package/styles/combo-box/bootstrap.scss +1 -1
  65. package/styles/combo-box/bootstrap4.scss +1 -1
  66. package/styles/combo-box/bootstrap5-dark.scss +1 -1
  67. package/styles/combo-box/bootstrap5.scss +1 -1
  68. package/styles/combo-box/fabric-dark.scss +1 -1
  69. package/styles/combo-box/fabric.scss +1 -1
  70. package/styles/combo-box/fluent-dark.scss +1 -1
  71. package/styles/combo-box/fluent.scss +1 -1
  72. package/styles/combo-box/highcontrast-light.scss +1 -1
  73. package/styles/combo-box/highcontrast.scss +1 -1
  74. package/styles/combo-box/material-dark.css +0 -1
  75. package/styles/combo-box/material-dark.scss +1 -1
  76. package/styles/combo-box/material.css +0 -1
  77. package/styles/combo-box/material.scss +1 -1
  78. package/styles/combo-box/material3-dark.css +0 -1
  79. package/styles/combo-box/material3-dark.scss +1 -1
  80. package/styles/combo-box/material3.css +0 -1
  81. package/styles/combo-box/material3.scss +1 -1
  82. package/styles/combo-box/tailwind-dark.css +0 -1
  83. package/styles/combo-box/tailwind-dark.scss +1 -1
  84. package/styles/combo-box/tailwind.css +0 -1
  85. package/styles/combo-box/tailwind.scss +1 -1
  86. package/styles/drop-down-base/bootstrap-dark.scss +1 -1
  87. package/styles/drop-down-base/bootstrap.scss +1 -1
  88. package/styles/drop-down-base/bootstrap4.scss +1 -1
  89. package/styles/drop-down-base/bootstrap5-dark.scss +1 -1
  90. package/styles/drop-down-base/bootstrap5.scss +1 -1
  91. package/styles/drop-down-base/fabric-dark.scss +1 -1
  92. package/styles/drop-down-base/fabric.scss +1 -1
  93. package/styles/drop-down-base/fluent-dark.scss +1 -1
  94. package/styles/drop-down-base/fluent.scss +1 -1
  95. package/styles/drop-down-base/highcontrast-light.scss +1 -1
  96. package/styles/drop-down-base/highcontrast.scss +1 -1
  97. package/styles/drop-down-base/material-dark.css +0 -1
  98. package/styles/drop-down-base/material-dark.scss +1 -1
  99. package/styles/drop-down-base/material.css +0 -1
  100. package/styles/drop-down-base/material.scss +1 -1
  101. package/styles/drop-down-base/material3-dark.css +0 -1
  102. package/styles/drop-down-base/material3-dark.scss +1 -1
  103. package/styles/drop-down-base/material3.css +0 -1
  104. package/styles/drop-down-base/material3.scss +1 -1
  105. package/styles/drop-down-base/tailwind-dark.css +0 -1
  106. package/styles/drop-down-base/tailwind-dark.scss +1 -1
  107. package/styles/drop-down-base/tailwind.css +0 -1
  108. package/styles/drop-down-base/tailwind.scss +1 -1
  109. package/styles/drop-down-list/bootstrap-dark.scss +2 -1
  110. package/styles/drop-down-list/bootstrap.scss +2 -1
  111. package/styles/drop-down-list/bootstrap4.scss +2 -1
  112. package/styles/drop-down-list/bootstrap5-dark.scss +2 -1
  113. package/styles/drop-down-list/bootstrap5.scss +2 -1
  114. package/styles/drop-down-list/fabric-dark.scss +2 -1
  115. package/styles/drop-down-list/fabric.scss +2 -1
  116. package/styles/drop-down-list/fluent-dark.scss +2 -1
  117. package/styles/drop-down-list/fluent.scss +2 -1
  118. package/styles/drop-down-list/highcontrast-light.scss +2 -1
  119. package/styles/drop-down-list/highcontrast.scss +2 -1
  120. package/styles/drop-down-list/material-dark.css +0 -1
  121. package/styles/drop-down-list/material-dark.scss +2 -1
  122. package/styles/drop-down-list/material.css +0 -1
  123. package/styles/drop-down-list/material.scss +2 -1
  124. package/styles/drop-down-list/material3-dark.css +0 -1
  125. package/styles/drop-down-list/material3-dark.scss +2 -1
  126. package/styles/drop-down-list/material3.css +0 -1
  127. package/styles/drop-down-list/material3.scss +2 -1
  128. package/styles/drop-down-list/tailwind-dark.css +0 -1
  129. package/styles/drop-down-list/tailwind-dark.scss +2 -1
  130. package/styles/drop-down-list/tailwind.css +0 -1
  131. package/styles/drop-down-list/tailwind.scss +2 -1
  132. package/styles/drop-down-tree/bootstrap-dark.scss +1 -1
  133. package/styles/drop-down-tree/bootstrap.scss +1 -1
  134. package/styles/drop-down-tree/bootstrap4.scss +1 -1
  135. package/styles/drop-down-tree/bootstrap5-dark.scss +1 -1
  136. package/styles/drop-down-tree/bootstrap5.scss +1 -1
  137. package/styles/drop-down-tree/fabric-dark.scss +1 -1
  138. package/styles/drop-down-tree/fabric.scss +1 -1
  139. package/styles/drop-down-tree/fluent-dark.scss +1 -1
  140. package/styles/drop-down-tree/fluent.scss +1 -1
  141. package/styles/drop-down-tree/highcontrast-light.scss +1 -1
  142. package/styles/drop-down-tree/highcontrast.scss +1 -1
  143. package/styles/drop-down-tree/material-dark.css +0 -1
  144. package/styles/drop-down-tree/material-dark.scss +1 -1
  145. package/styles/drop-down-tree/material.css +0 -1
  146. package/styles/drop-down-tree/material.scss +1 -1
  147. package/styles/drop-down-tree/material3-dark.css +0 -1
  148. package/styles/drop-down-tree/material3-dark.scss +1 -1
  149. package/styles/drop-down-tree/material3.css +0 -1
  150. package/styles/drop-down-tree/material3.scss +1 -1
  151. package/styles/drop-down-tree/tailwind-dark.css +0 -1
  152. package/styles/drop-down-tree/tailwind-dark.scss +1 -1
  153. package/styles/drop-down-tree/tailwind.css +0 -1
  154. package/styles/drop-down-tree/tailwind.scss +1 -1
  155. package/styles/fabric-dark.css +0 -8
  156. package/styles/fabric.css +0 -8
  157. package/styles/fluent-dark.css +4 -12
  158. package/styles/fluent.css +4 -12
  159. package/styles/highcontrast-light.css +0 -8
  160. package/styles/highcontrast.css +0 -8
  161. package/styles/list-box/_bootstrap4-definition.scss +4 -4
  162. package/styles/list-box/_fluent-definition.scss +4 -4
  163. package/styles/list-box/_layout.scss +0 -6
  164. package/styles/list-box/_material3-definition.scss +4 -4
  165. package/styles/list-box/_tailwind-definition.scss +3 -3
  166. package/styles/list-box/bootstrap-dark.css +0 -8
  167. package/styles/list-box/bootstrap-dark.scss +1 -1
  168. package/styles/list-box/bootstrap.css +0 -8
  169. package/styles/list-box/bootstrap.scss +1 -1
  170. package/styles/list-box/bootstrap4.css +4 -12
  171. package/styles/list-box/bootstrap4.scss +1 -1
  172. package/styles/list-box/bootstrap5-dark.css +0 -8
  173. package/styles/list-box/bootstrap5-dark.scss +1 -1
  174. package/styles/list-box/bootstrap5.css +0 -8
  175. package/styles/list-box/bootstrap5.scss +1 -1
  176. package/styles/list-box/fabric-dark.css +0 -8
  177. package/styles/list-box/fabric-dark.scss +1 -1
  178. package/styles/list-box/fabric.css +0 -8
  179. package/styles/list-box/fabric.scss +1 -1
  180. package/styles/list-box/fluent-dark.css +4 -12
  181. package/styles/list-box/fluent-dark.scss +1 -1
  182. package/styles/list-box/fluent.css +4 -12
  183. package/styles/list-box/fluent.scss +1 -1
  184. package/styles/list-box/highcontrast-light.css +0 -8
  185. package/styles/list-box/highcontrast-light.scss +1 -1
  186. package/styles/list-box/highcontrast.css +0 -8
  187. package/styles/list-box/highcontrast.scss +1 -1
  188. package/styles/list-box/material-dark.css +0 -9
  189. package/styles/list-box/material-dark.scss +1 -1
  190. package/styles/list-box/material.css +0 -9
  191. package/styles/list-box/material.scss +1 -1
  192. package/styles/list-box/material3-dark.css +4 -13
  193. package/styles/list-box/material3-dark.scss +1 -1
  194. package/styles/list-box/material3.css +4 -13
  195. package/styles/list-box/material3.scss +1 -1
  196. package/styles/list-box/tailwind-dark.css +3 -12
  197. package/styles/list-box/tailwind-dark.scss +1 -1
  198. package/styles/list-box/tailwind.css +3 -12
  199. package/styles/list-box/tailwind.scss +1 -1
  200. package/styles/material-dark.css +0 -9
  201. package/styles/material.css +0 -9
  202. package/styles/material3-dark.css +4 -13
  203. package/styles/material3-dark.scss +1 -1
  204. package/styles/material3.css +4 -13
  205. package/styles/material3.scss +1 -1
  206. package/styles/mention/bootstrap-dark.scss +1 -1
  207. package/styles/mention/bootstrap.scss +1 -1
  208. package/styles/mention/bootstrap4.scss +1 -1
  209. package/styles/mention/bootstrap5-dark.scss +1 -1
  210. package/styles/mention/bootstrap5.scss +1 -1
  211. package/styles/mention/fabric-dark.scss +1 -1
  212. package/styles/mention/fabric.scss +1 -1
  213. package/styles/mention/fluent-dark.scss +1 -1
  214. package/styles/mention/fluent.scss +1 -1
  215. package/styles/mention/highcontrast-light.scss +1 -1
  216. package/styles/mention/highcontrast.scss +1 -1
  217. package/styles/mention/material-dark.css +0 -1
  218. package/styles/mention/material-dark.scss +1 -1
  219. package/styles/mention/material.css +0 -1
  220. package/styles/mention/material.scss +1 -1
  221. package/styles/mention/material3-dark.css +0 -1
  222. package/styles/mention/material3-dark.scss +1 -1
  223. package/styles/mention/material3.css +0 -1
  224. package/styles/mention/material3.scss +1 -1
  225. package/styles/mention/tailwind-dark.css +0 -1
  226. package/styles/mention/tailwind-dark.scss +1 -1
  227. package/styles/mention/tailwind.css +0 -1
  228. package/styles/mention/tailwind.scss +1 -1
  229. package/styles/multi-select/bootstrap-dark.scss +1 -1
  230. package/styles/multi-select/bootstrap.scss +1 -1
  231. package/styles/multi-select/bootstrap4.scss +1 -1
  232. package/styles/multi-select/bootstrap5-dark.scss +1 -1
  233. package/styles/multi-select/bootstrap5.scss +1 -1
  234. package/styles/multi-select/fabric-dark.scss +1 -1
  235. package/styles/multi-select/fabric.scss +1 -1
  236. package/styles/multi-select/fluent-dark.scss +1 -1
  237. package/styles/multi-select/fluent.scss +1 -1
  238. package/styles/multi-select/highcontrast-light.scss +1 -1
  239. package/styles/multi-select/highcontrast.scss +1 -1
  240. package/styles/multi-select/material-dark.css +0 -1
  241. package/styles/multi-select/material-dark.scss +1 -1
  242. package/styles/multi-select/material.css +0 -1
  243. package/styles/multi-select/material.scss +1 -1
  244. package/styles/multi-select/material3-dark.css +0 -1
  245. package/styles/multi-select/material3-dark.scss +1 -1
  246. package/styles/multi-select/material3.css +0 -1
  247. package/styles/multi-select/material3.scss +1 -1
  248. package/styles/multi-select/tailwind-dark.css +0 -1
  249. package/styles/multi-select/tailwind-dark.scss +1 -1
  250. package/styles/multi-select/tailwind.css +0 -1
  251. package/styles/multi-select/tailwind.scss +1 -1
  252. package/styles/tailwind-dark.css +3 -19
  253. package/styles/tailwind.css +3 -19
@@ -1,11 +1,12 @@
1
1
  /// <reference path="../drop-down-base/drop-down-base-model.d.ts" />
2
- import { EmitType } from '@syncfusion/ej2-base';
2
+ import { EmitType, ModuleDeclaration } from '@syncfusion/ej2-base';
3
3
  import { KeyboardEventArgs } from '@syncfusion/ej2-base';
4
4
  import { IInput, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';
5
5
  import { DropDownBase, SelectEventArgs, FilteringEventArgs, PopupEventArgs } from '../drop-down-base/drop-down-base';
6
6
  import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';
7
7
  import { DropDownListModel } from '../drop-down-list';
8
8
  import { DataManager, Query } from '@syncfusion/ej2-data';
9
+ import { VirtualInfo } from '../common/virtual-scroll';
9
10
  export interface ChangeEventArgs extends SelectEventArgs {
10
11
  /**
11
12
  * Returns the selected value
@@ -31,6 +32,9 @@ export interface ChangeEventArgs extends SelectEventArgs {
31
32
  */
32
33
  event: MouseEvent | KeyboardEvent | TouchEvent;
33
34
  }
35
+ export interface GeneratedData {
36
+ [key: string]: Object;
37
+ }
34
38
  export declare const dropDownListClasses: DropDownListClassList;
35
39
  /**
36
40
  * The DropDownList component contains a list of predefined values from which you can
@@ -56,6 +60,8 @@ export declare class DropDownList extends DropDownBase implements IInput {
56
60
  [key: string]: Object;
57
61
  } | string | number | boolean;
58
62
  private listHeight;
63
+ private listItemHeight;
64
+ private skeletonCount;
59
65
  protected hiddenElement: HTMLSelectElement;
60
66
  protected isPopupOpen: boolean;
61
67
  private isDocumentClick;
@@ -66,6 +72,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
66
72
  private initRemoteRender;
67
73
  private searchBoxHeight;
68
74
  private popupObj;
75
+ private popupContentElement;
69
76
  private backIconElement;
70
77
  private clearIconElement;
71
78
  private containerStyle;
@@ -94,6 +101,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
94
101
  protected isDropDownClick: boolean;
95
102
  protected preventAltUp: boolean;
96
103
  private searchKeyEvent;
104
+ private keyboardEvent;
97
105
  private filterInputObj;
98
106
  protected spinnerElement: HTMLElement;
99
107
  protected keyConfigure: {
@@ -105,6 +113,31 @@ export declare class DropDownList extends DropDownBase implements IInput {
105
113
  protected preventChange: boolean;
106
114
  protected isAngular: boolean;
107
115
  protected selectedElementID: string;
116
+ protected itemCount: number;
117
+ private virtualListHeight;
118
+ private virtualItemCount;
119
+ private isVirtualScrolling;
120
+ private observer;
121
+ protected isPreventScrollAction: boolean;
122
+ private scrollPreStartIndex;
123
+ private isScrollActionTriggered;
124
+ protected previousStartIndex: number;
125
+ private isMouseScrollAction;
126
+ private isKeyBoardAction;
127
+ private isUpwardScrolling;
128
+ private containerElementRect;
129
+ protected previousEndIndex: number;
130
+ private previousInfo;
131
+ protected startIndex: number;
132
+ private currentPageNumber;
133
+ private pageCount;
134
+ private isPreventKeyAction;
135
+ protected virtualItemStartIndex: number;
136
+ private virtualItemEndIndex;
137
+ private generatedDataObject;
138
+ protected virtualListInfo: VirtualInfo;
139
+ protected viewPortInfo: VirtualInfo;
140
+ private selectedValueInfo;
108
141
  /**
109
142
  * Sets CSS classes to the root element of the component that allows customization of appearance.
110
143
  *
@@ -237,6 +270,12 @@ export declare class DropDownList extends DropDownBase implements IInput {
237
270
  * @default false
238
271
  */
239
272
  readonly: boolean;
273
+ /**
274
+ * Defines whether to enable virtual scrolling in the component.
275
+ *
276
+ * @default false
277
+ */
278
+ enableVirtualization: boolean;
240
279
  /**
241
280
  * Gets or sets the display text of the selected item in the component.
242
281
  *
@@ -347,6 +386,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
347
386
  protected preRender(): void;
348
387
  private initializeData;
349
388
  protected setZIndex(): void;
389
+ requiredModules(): ModuleDeclaration[];
350
390
  protected renderList(e?: MouseEvent | KeyboardEventArgs | TouchEvent, isEmptyData?: boolean): void;
351
391
  private floatLabelChange;
352
392
  protected resetHandler(e: MouseEvent): void;
@@ -416,6 +456,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
416
456
  private updateHomeEndAction;
417
457
  protected selectCurrentValueOnTab(e: KeyboardEventArgs): void;
418
458
  protected mobileKeyActionHandler(e: KeyboardEventArgs): void;
459
+ private handleVirtualKeyboardActions;
419
460
  protected selectCurrentItem(e: KeyboardEventArgs): void;
420
461
  protected isSelectFocusItem(element: Element): boolean;
421
462
  private getPageCount;
@@ -463,6 +504,8 @@ export declare class DropDownList extends DropDownBase implements IInput {
463
504
  * @returns {void}
464
505
  */
465
506
  protected onFilterUp(e: KeyboardEventArgs): void;
507
+ protected getFilteringSkeletonCount(): void;
508
+ protected getSkeletonCount(retainSkeleton?: boolean): void;
466
509
  protected onFilterDown(e: KeyboardEventArgs): void;
467
510
  protected removeFillSelection(): void;
468
511
  protected getQuery(query: Query): Query;
@@ -487,6 +530,8 @@ export declare class DropDownList extends DropDownBase implements IInput {
487
530
  protected onInput(e: KeyboardEventArgs): void;
488
531
  protected pasteHandler(e: KeyboardEventArgs): void;
489
532
  protected onActionFailure(e: Object): void;
533
+ private UpdateSkeleton;
534
+ protected getTakeValue(): number;
490
535
  protected onActionComplete(ulElement: HTMLElement, list: {
491
536
  [key: string]: Object;
492
537
  }[], e?: Object, isUpdated?: boolean): void;
@@ -499,7 +544,11 @@ export declare class DropDownList extends DropDownBase implements IInput {
499
544
  private actionCompleteDataUpdate;
500
545
  private focusIndexItem;
501
546
  protected updateSelection(): void;
547
+ private updateSelectionList;
548
+ protected checkAndResetCache(): void;
502
549
  protected removeFocus(): void;
550
+ protected getTransformValues(): string;
551
+ protected GetVirtualTrackHeight(): string;
503
552
  protected renderPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent | Object): void;
504
553
  private checkCollision;
505
554
  private getOffsetValue;
@@ -513,6 +562,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
513
562
  private setWidth;
514
563
  private scrollBottom;
515
564
  private scrollTop;
565
+ private IsScrollerAtEnd;
516
566
  protected isEditTextBox(): boolean;
517
567
  protected isFiltering(): boolean;
518
568
  protected isPopupButton(): boolean;
@@ -520,6 +570,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
520
570
  private clearText;
521
571
  private setEleWidth;
522
572
  private closePopup;
573
+ private updateInitialData;
523
574
  private destroyPopup;
524
575
  private clickOnBackIcon;
525
576
  /**
@@ -529,6 +580,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
529
580
  * @returns {void}
530
581
  */
531
582
  render(): void;
583
+ private getListHeight;
532
584
  private setFooterTemplate;
533
585
  private setHeaderTemplate;
534
586
  /**
@@ -647,4 +699,6 @@ export interface DropDownListClassList {
647
699
  popupFullScreen: string;
648
700
  disableIcon: string;
649
701
  hiddenElement: string;
702
+ content: string;
703
+ virtualList: string;
650
704
  }