@syncfusion/ej2-dropdowns 24.1.45-12082 → 24.1.46

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 (276) hide show
  1. package/.eslintrc.json +260 -0
  2. package/CHANGELOG.md +2107 -2101
  3. package/{ReadMe.md → README.md} +217 -217
  4. package/dist/ej2-dropdowns.min.js +10 -1
  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 +127 -61
  8. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  9. package/dist/es6/ej2-dropdowns.es5.js +274 -203
  10. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  11. package/dist/global/ej2-dropdowns.min.js +10 -1
  12. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  13. package/dist/global/index.d.ts +9 -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 +21 -21
  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 +29 -29
  28. package/src/common/virtual-scroll.js +46 -46
  29. package/src/drop-down-base/drop-down-base-model.d.ts +200 -200
  30. package/src/drop-down-base/drop-down-base.d.ts +16 -16
  31. package/src/drop-down-base/drop-down-base.js +20 -20
  32. package/src/drop-down-list/drop-down-list-model.d.ts +202 -202
  33. package/src/drop-down-list/drop-down-list.d.ts +4 -4
  34. package/src/drop-down-list/drop-down-list.js +20 -20
  35. package/src/drop-down-tree/drop-down-tree-model.d.ts +468 -468
  36. package/src/drop-down-tree/drop-down-tree.d.ts +3 -0
  37. package/src/drop-down-tree/drop-down-tree.js +95 -24
  38. package/src/list-box/list-box-model.d.ts +193 -193
  39. package/src/list-box/list-box.d.ts +2 -2
  40. package/src/list-box/list-box.js +19 -19
  41. package/src/mention/mention-model.d.ts +261 -261
  42. package/src/mention/mention.js +19 -19
  43. package/src/multi-select/multi-select-model.d.ts +512 -512
  44. package/src/multi-select/multi-select.js +19 -19
  45. package/styles/auto-complete/_all.scss +1 -1
  46. package/styles/auto-complete/_bootstrap-dark-definition.scss +3 -3
  47. package/styles/auto-complete/_bootstrap-definition.scss +2 -2
  48. package/styles/auto-complete/_bootstrap4-definition.scss +11 -11
  49. package/styles/auto-complete/_bootstrap5-definition.scss +2 -2
  50. package/styles/auto-complete/_fabric-dark-definition.scss +2 -2
  51. package/styles/auto-complete/_fabric-definition.scss +2 -2
  52. package/styles/auto-complete/_fluent-definition.scss +2 -2
  53. package/styles/auto-complete/_fusionnew-definition.scss +2 -2
  54. package/styles/auto-complete/_highcontrast-definition.scss +2 -2
  55. package/styles/auto-complete/_highcontrast-light-definition.scss +2 -2
  56. package/styles/auto-complete/_material-dark-definition.scss +2 -2
  57. package/styles/auto-complete/_material-definition.scss +2 -2
  58. package/styles/auto-complete/_material3-definition.scss +2 -2
  59. package/styles/auto-complete/_tailwind-definition.scss +2 -2
  60. package/styles/auto-complete/material3-dark.scss +1 -1
  61. package/styles/auto-complete/material3.scss +1 -1
  62. package/styles/combo-box/_all.scss +1 -1
  63. package/styles/combo-box/_bootstrap-dark-definition.scss +2 -2
  64. package/styles/combo-box/_bootstrap-definition.scss +2 -2
  65. package/styles/combo-box/_bootstrap4-definition.scss +11 -11
  66. package/styles/combo-box/_bootstrap5-definition.scss +2 -2
  67. package/styles/combo-box/_fabric-dark-definition.scss +2 -2
  68. package/styles/combo-box/_fabric-definition.scss +2 -2
  69. package/styles/combo-box/_fluent-definition.scss +2 -2
  70. package/styles/combo-box/_fusionnew-definition.scss +2 -2
  71. package/styles/combo-box/_highcontrast-definition.scss +2 -2
  72. package/styles/combo-box/_highcontrast-light-definition.scss +3 -3
  73. package/styles/combo-box/_material-dark-definition.scss +2 -2
  74. package/styles/combo-box/_material-definition.scss +2 -2
  75. package/styles/combo-box/_material3-definition.scss +2 -2
  76. package/styles/combo-box/_tailwind-definition.scss +2 -2
  77. package/styles/combo-box/material3-dark.scss +1 -1
  78. package/styles/combo-box/material3.scss +1 -1
  79. package/styles/drop-down-base/_all.scss +2 -2
  80. package/styles/drop-down-base/_bootstrap-dark-definition.scss +83 -83
  81. package/styles/drop-down-base/_bootstrap-definition.scss +83 -83
  82. package/styles/drop-down-base/_bootstrap4-definition.scss +90 -90
  83. package/styles/drop-down-base/_bootstrap5-definition.scss +117 -117
  84. package/styles/drop-down-base/_definition.scss +23 -23
  85. package/styles/drop-down-base/_fabric-dark-definition.scss +86 -86
  86. package/styles/drop-down-base/_fabric-definition.scss +84 -84
  87. package/styles/drop-down-base/_fluent-definition.scss +121 -121
  88. package/styles/drop-down-base/_fusionnew-definition.scss +117 -117
  89. package/styles/drop-down-base/_highcontrast-definition.scss +105 -105
  90. package/styles/drop-down-base/_highcontrast-light-definition.scss +105 -105
  91. package/styles/drop-down-base/_layout.scss +192 -192
  92. package/styles/drop-down-base/_material-dark-definition.scss +86 -86
  93. package/styles/drop-down-base/_material-definition.scss +85 -85
  94. package/styles/drop-down-base/_material3-definition.scss +87 -87
  95. package/styles/drop-down-base/_tailwind-definition.scss +129 -129
  96. package/styles/drop-down-base/_theme.scss +391 -391
  97. package/styles/drop-down-base/material3-dark.scss +1 -1
  98. package/styles/drop-down-base/material3.scss +1 -1
  99. package/styles/drop-down-list/_all.scss +3 -3
  100. package/styles/drop-down-list/_bootstrap-dark-definition.scss +157 -157
  101. package/styles/drop-down-list/_bootstrap-definition.scss +156 -156
  102. package/styles/drop-down-list/_bootstrap4-definition.scss +202 -202
  103. package/styles/drop-down-list/_bootstrap5-definition.scss +201 -201
  104. package/styles/drop-down-list/_fabric-dark-definition.scss +128 -128
  105. package/styles/drop-down-list/_fabric-definition.scss +124 -124
  106. package/styles/drop-down-list/_fluent-definition.scss +185 -185
  107. package/styles/drop-down-list/_fusionnew-definition.scss +201 -201
  108. package/styles/drop-down-list/_highcontrast-definition.scss +142 -142
  109. package/styles/drop-down-list/_highcontrast-light-definition.scss +144 -144
  110. package/styles/drop-down-list/_layout.scss +315 -315
  111. package/styles/drop-down-list/_material-dark-definition.scss +143 -143
  112. package/styles/drop-down-list/_material-definition.scss +167 -167
  113. package/styles/drop-down-list/_material3-definition.scss +180 -180
  114. package/styles/drop-down-list/_tailwind-definition.scss +134 -134
  115. package/styles/drop-down-list/_theme.scss +10 -10
  116. package/styles/drop-down-list/icons/_bootstrap-dark.scss +14 -14
  117. package/styles/drop-down-list/icons/_bootstrap.scss +14 -14
  118. package/styles/drop-down-list/icons/_bootstrap4.scss +14 -14
  119. package/styles/drop-down-list/icons/_bootstrap5.scss +14 -14
  120. package/styles/drop-down-list/icons/_fabric-dark.scss +14 -14
  121. package/styles/drop-down-list/icons/_fabric.scss +14 -14
  122. package/styles/drop-down-list/icons/_fluent.scss +14 -14
  123. package/styles/drop-down-list/icons/_fusionnew.scss +14 -14
  124. package/styles/drop-down-list/icons/_highcontrast-light.scss +14 -14
  125. package/styles/drop-down-list/icons/_highcontrast.scss +14 -14
  126. package/styles/drop-down-list/icons/_material-dark.scss +14 -14
  127. package/styles/drop-down-list/icons/_material.scss +14 -14
  128. package/styles/drop-down-list/icons/_material3.scss +14 -14
  129. package/styles/drop-down-list/icons/_tailwind.scss +14 -14
  130. package/styles/drop-down-list/material3-dark.scss +1 -1
  131. package/styles/drop-down-list/material3.scss +1 -1
  132. package/styles/drop-down-tree/_all.scss +2 -2
  133. package/styles/drop-down-tree/_bootstrap-dark-definition.scss +71 -71
  134. package/styles/drop-down-tree/_bootstrap-definition.scss +70 -70
  135. package/styles/drop-down-tree/_bootstrap4-definition.scss +71 -71
  136. package/styles/drop-down-tree/_bootstrap5-definition.scss +59 -59
  137. package/styles/drop-down-tree/_fabric-dark-definition.scss +71 -71
  138. package/styles/drop-down-tree/_fabric-definition.scss +71 -71
  139. package/styles/drop-down-tree/_fluent-definition.scss +65 -65
  140. package/styles/drop-down-tree/_fusionnew-definition.scss +59 -59
  141. package/styles/drop-down-tree/_highcontrast-definition.scss +71 -71
  142. package/styles/drop-down-tree/_highcontrast-light-definition.scss +71 -71
  143. package/styles/drop-down-tree/_layout.scss +1423 -1423
  144. package/styles/drop-down-tree/_material-dark-definition.scss +72 -72
  145. package/styles/drop-down-tree/_material-definition.scss +72 -72
  146. package/styles/drop-down-tree/_material3-definition.scss +76 -76
  147. package/styles/drop-down-tree/_tailwind-definition.scss +61 -61
  148. package/styles/drop-down-tree/_theme.scss +132 -132
  149. package/styles/drop-down-tree/icons/_bootstrap-dark.scss +11 -11
  150. package/styles/drop-down-tree/icons/_bootstrap.scss +11 -11
  151. package/styles/drop-down-tree/icons/_bootstrap4.scss +11 -11
  152. package/styles/drop-down-tree/icons/_bootstrap5.scss +11 -11
  153. package/styles/drop-down-tree/icons/_fabric-dark.scss +11 -11
  154. package/styles/drop-down-tree/icons/_fabric.scss +11 -11
  155. package/styles/drop-down-tree/icons/_fluent.scss +11 -11
  156. package/styles/drop-down-tree/icons/_fusionnew.scss +11 -11
  157. package/styles/drop-down-tree/icons/_highcontrast-light.scss +11 -11
  158. package/styles/drop-down-tree/icons/_highcontrast.scss +11 -11
  159. package/styles/drop-down-tree/icons/_material-dark.scss +11 -11
  160. package/styles/drop-down-tree/icons/_material.scss +11 -11
  161. package/styles/drop-down-tree/icons/_material3.scss +11 -11
  162. package/styles/drop-down-tree/icons/_tailwind-dark.scss +11 -11
  163. package/styles/drop-down-tree/icons/_tailwind.scss +11 -11
  164. package/styles/drop-down-tree/material3-dark.scss +1 -1
  165. package/styles/drop-down-tree/material3.scss +1 -1
  166. package/styles/list-box/_all.scss +2 -2
  167. package/styles/list-box/_bootstrap-dark-definition.scss +126 -126
  168. package/styles/list-box/_bootstrap-definition.scss +119 -119
  169. package/styles/list-box/_bootstrap4-definition.scss +124 -124
  170. package/styles/list-box/_bootstrap5-definition.scss +120 -120
  171. package/styles/list-box/_fabric-dark-definition.scss +126 -126
  172. package/styles/list-box/_fabric-definition.scss +119 -119
  173. package/styles/list-box/_fluent-definition.scss +120 -120
  174. package/styles/list-box/_fusionnew-definition.scss +111 -111
  175. package/styles/list-box/_highcontrast-definition.scss +119 -119
  176. package/styles/list-box/_highcontrast-light-definition.scss +126 -126
  177. package/styles/list-box/_layout.scss +542 -542
  178. package/styles/list-box/_material-dark-definition.scss +126 -126
  179. package/styles/list-box/_material-definition.scss +119 -119
  180. package/styles/list-box/_material3-definition.scss +119 -119
  181. package/styles/list-box/_tailwind-definition.scss +119 -119
  182. package/styles/list-box/_theme.scss +382 -382
  183. package/styles/list-box/icons/_bootstrap-dark.scss +25 -25
  184. package/styles/list-box/icons/_bootstrap.scss +25 -25
  185. package/styles/list-box/icons/_bootstrap4.scss +25 -25
  186. package/styles/list-box/icons/_bootstrap5.scss +25 -25
  187. package/styles/list-box/icons/_fabric-dark.scss +25 -25
  188. package/styles/list-box/icons/_fabric.scss +25 -25
  189. package/styles/list-box/icons/_fluent.scss +25 -25
  190. package/styles/list-box/icons/_fusionnew.scss +25 -25
  191. package/styles/list-box/icons/_highcontrast-light.scss +25 -25
  192. package/styles/list-box/icons/_highcontrast.scss +25 -25
  193. package/styles/list-box/icons/_material-dark.scss +25 -25
  194. package/styles/list-box/icons/_material.scss +25 -25
  195. package/styles/list-box/icons/_material3.scss +25 -25
  196. package/styles/list-box/icons/_tailwind-dark.scss +25 -25
  197. package/styles/list-box/icons/_tailwind.scss +25 -25
  198. package/styles/list-box/material3-dark.scss +1 -1
  199. package/styles/list-box/material3.scss +1 -1
  200. package/styles/material3-dark.scss +1 -1
  201. package/styles/material3.scss +1 -1
  202. package/styles/mention/_all.scss +1 -1
  203. package/styles/mention/_bootstrap-dark-definition.scss +3 -3
  204. package/styles/mention/_bootstrap-definition.scss +3 -3
  205. package/styles/mention/_bootstrap4-definition.scss +3 -3
  206. package/styles/mention/_bootstrap5-definition.scss +1 -1
  207. package/styles/mention/_fabric-dark-definition.scss +2 -2
  208. package/styles/mention/_fabric-definition.scss +3 -3
  209. package/styles/mention/_fluent-definition.scss +1 -1
  210. package/styles/mention/_fusionnew-definition.scss +1 -1
  211. package/styles/mention/_highcontrast-definition.scss +3 -3
  212. package/styles/mention/_highcontrast-light-definition.scss +3 -3
  213. package/styles/mention/_layout.scss +6 -6
  214. package/styles/mention/_material-dark-definition.scss +3 -3
  215. package/styles/mention/_material-definition.scss +3 -3
  216. package/styles/mention/_material3-definition.scss +1 -1
  217. package/styles/mention/_tailwind-definition.scss +1 -1
  218. package/styles/mention/material3-dark.scss +1 -1
  219. package/styles/mention/material3.scss +1 -1
  220. package/styles/multi-select/_all.scss +2 -2
  221. package/styles/multi-select/_bootstrap-dark-definition.scss +203 -203
  222. package/styles/multi-select/_bootstrap-definition.scss +192 -192
  223. package/styles/multi-select/_bootstrap4-definition.scss +278 -278
  224. package/styles/multi-select/_bootstrap5-definition.scss +230 -230
  225. package/styles/multi-select/_fabric-dark-definition.scss +192 -192
  226. package/styles/multi-select/_fabric-definition.scss +183 -183
  227. package/styles/multi-select/_fluent-definition.scss +241 -241
  228. package/styles/multi-select/_fusionnew-definition.scss +227 -227
  229. package/styles/multi-select/_highcontrast-definition.scss +303 -303
  230. package/styles/multi-select/_highcontrast-light-definition.scss +297 -297
  231. package/styles/multi-select/_layout.scss +2199 -2199
  232. package/styles/multi-select/_material-dark-definition.scss +230 -230
  233. package/styles/multi-select/_material-definition.scss +223 -223
  234. package/styles/multi-select/_material3-definition.scss +246 -246
  235. package/styles/multi-select/_tailwind-definition.scss +235 -235
  236. package/styles/multi-select/_theme.scss +586 -586
  237. package/styles/multi-select/icons/_bootstrap-dark.scss +26 -26
  238. package/styles/multi-select/icons/_bootstrap.scss +26 -26
  239. package/styles/multi-select/icons/_bootstrap4.scss +37 -37
  240. package/styles/multi-select/icons/_bootstrap5.scss +26 -26
  241. package/styles/multi-select/icons/_fabric-dark.scss +26 -26
  242. package/styles/multi-select/icons/_fabric.scss +26 -26
  243. package/styles/multi-select/icons/_fluent.scss +55 -55
  244. package/styles/multi-select/icons/_fusionnew.scss +26 -26
  245. package/styles/multi-select/icons/_highcontrast-light.scss +26 -26
  246. package/styles/multi-select/icons/_highcontrast.scss +26 -26
  247. package/styles/multi-select/icons/_material-dark.scss +693 -693
  248. package/styles/multi-select/icons/_material.scss +693 -693
  249. package/styles/multi-select/icons/_material3.scss +692 -692
  250. package/styles/multi-select/icons/_tailwind.scss +26 -26
  251. package/styles/multi-select/material3-dark.scss +1 -1
  252. package/styles/multi-select/material3.scss +1 -1
  253. package/tslint.json +111 -0
  254. package/dist/ts/auto-complete/auto-complete.ts +0 -623
  255. package/dist/ts/combo-box/combo-box.ts +0 -1099
  256. package/dist/ts/common/highlight-search.ts +0 -57
  257. package/dist/ts/common/incremental-search.ts +0 -172
  258. package/dist/ts/common/interface.ts +0 -74
  259. package/dist/ts/common/virtual-scroll.ts +0 -388
  260. package/dist/ts/drop-down-base/drop-down-base.ts +0 -1986
  261. package/dist/ts/drop-down-list/drop-down-list.ts +0 -4261
  262. package/dist/ts/drop-down-tree/drop-down-tree.ts +0 -3747
  263. package/dist/ts/list-box/list-box.ts +0 -2772
  264. package/dist/ts/mention/mention.ts +0 -1875
  265. package/dist/ts/multi-select/checkbox-selection.ts +0 -550
  266. package/dist/ts/multi-select/float-label.ts +0 -176
  267. package/dist/ts/multi-select/interface.ts +0 -70
  268. package/dist/ts/multi-select/multi-select.ts +0 -4882
  269. package/styles/auto-complete/_bds-definition.scss +0 -2
  270. package/styles/combo-box/_bds-definition.scss +0 -2
  271. package/styles/drop-down-base/_bds-definition.scss +0 -129
  272. package/styles/drop-down-list/_bds-definition.scss +0 -134
  273. package/styles/drop-down-tree/_bds-definition.scss +0 -61
  274. package/styles/list-box/_bds-definition.scss +0 -119
  275. package/styles/mention/_bds-definition.scss +0 -1
  276. package/styles/multi-select/_bds-definition.scss +0 -235
@@ -1,550 +0,0 @@
1
- import { createCheckBox } from '@syncfusion/ej2-buttons';
2
- import { IMulitSelect } from './interface';
3
- import { Input, InputObject } from '@syncfusion/ej2-inputs';
4
- import { EventHandler, select, removeClass, addClass, detach, compile, L10n } from '@syncfusion/ej2-base';
5
- import { Browser, attributes, isNullOrUndefined, KeyboardEventArgs, append, closest, prepend } from '@syncfusion/ej2-base';
6
- import { dropDownBaseClasses } from '../drop-down-base/drop-down-base';
7
- import { MultiSelectModel } from '../multi-select';
8
-
9
-
10
- const ICON: string = 'e-icons';
11
- const CHECKBOXFRAME: string = 'e-frame';
12
- const CHECK: string = 'e-check';
13
- const CHECKBOXWRAP: string = 'e-checkbox-wrapper';
14
- const INDETERMINATE: string = 'e-stop';
15
- const checkAllParent: string = 'e-selectall-parent';
16
- const searchBackIcon: string = 'e-input-group-icon e-back-icon e-icons';
17
- const filterBarClearIcon: string = 'e-input-group-icon e-clear-icon e-icons';
18
- const filterInput: string = 'e-input-filter';
19
- const filterParent: string = 'e-filter-parent';
20
- const mobileFilter: string = 'e-ddl-device-filter';
21
- const clearIcon: string = 'e-clear-icon';
22
- const popupFullScreen: string = 'e-popup-full-page';
23
- const device: string = 'e-ddl-device';
24
- const FOCUS: string = 'e-input-focus';
25
-
26
- /**
27
- * The Multiselect enable CheckBoxSelection call this inject module.
28
- */
29
-
30
- export class CheckBoxSelection {
31
- private parent: IMulitSelect;
32
- private checkAllParent: HTMLElement;
33
- private selectAllSpan: HTMLElement;
34
- public filterInput: HTMLInputElement;
35
- private filterInputObj: InputObject;
36
- private backIconElement: Element;
37
- private clearIconElement: Element;
38
- private checkWrapper: HTMLElement;
39
- public list: HTMLElement;
40
- private activeLi: HTMLElement[] = [];
41
- private activeEle: HTMLElement[] = [];
42
- public constructor(parent?: IMulitSelect) {
43
- this.parent = parent;
44
- this.removeEventListener();
45
- this.addEventListener();
46
- }
47
- public getModuleName(): string {
48
- return 'CheckBoxSelection';
49
- }
50
-
51
- public addEventListener(): void {
52
- if (this.parent.isDestroyed) {
53
- return;
54
- }
55
- this.parent.on('updatelist', this.listSelection, this);
56
- this.parent.on('listoption', this.listOption, this);
57
- this.parent.on('selectAll', this.setSelectAll, this);
58
- this.parent.on('checkSelectAll', this.checkSelectAll, this);
59
- this.parent.on('searchBox', this.setSearchBox, this);
60
- this.parent.on('blur', this.onBlurHandler, this);
61
- this.parent.on('targetElement', this.targetElement, this);
62
- this.parent.on('deviceSearchBox', this.setDeviceSearchBox, this);
63
- this.parent.on('inputFocus', this.getFocus, this);
64
- this.parent.on('reOrder', this.setReorder, this);
65
- this.parent.on('activeList', this.getActiveList, this);
66
- this.parent.on('selectAllText', this.setLocale, this);
67
- this.parent.on('filterBarPlaceholder', this.setPlaceholder, this);
68
- EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
69
- this.parent.on('addItem', this.checboxCreate, this);
70
- this.parent.on('popupFullScreen', this.setPopupFullScreen, this);
71
- }
72
- public removeEventListener(): void {
73
- if (this.parent.isDestroyed) {
74
- return;
75
- }
76
- this.parent.off('updatelist', this.listSelection);
77
- this.parent.off('listoption', this.listOption);
78
- this.parent.off('selectAll', this.setSelectAll);
79
- this.parent.off('checkSelectAll', this.checkSelectAll);
80
- this.parent.off('searchBox', this.setSearchBox);
81
- this.parent.off('blur', this.onBlurHandler);
82
- this.parent.off('targetElement', this.targetElement);
83
- this.parent.off('deviceSearchBox', this.setDeviceSearchBox);
84
- this.parent.off('inputFocus', this.getFocus);
85
- this.parent.off('reOrder', this.setReorder);
86
- this.parent.off('activeList', this.getActiveList);
87
- this.parent.off('selectAllText', this.setLocale);
88
- this.parent.off('filterBarPlaceholder', this.setPlaceholder);
89
- this.parent.off('addItem', this.checboxCreate);
90
- this.parent.off('popupFullScreen', this.setPopupFullScreen);
91
- }
92
-
93
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
94
- public listOption(args: { [key: string]: Object }): void {
95
- if (isNullOrUndefined(this.parent.listCurrentOptions.itemCreated)) {
96
- this.parent.listCurrentOptions.itemCreated = (e: { [key: string]: HTMLElement }) => {
97
- this.checboxCreate(e);
98
- };
99
- } else {
100
- const itemCreated: Function = <Function>this.parent.listCurrentOptions.itemCreated;
101
- this.parent.listCurrentOptions.itemCreated = (e: { [key: string]: HTMLElement }) => {
102
- this.checboxCreate(e);
103
- itemCreated.apply(this, [e]);
104
- };
105
- }
106
- }
107
- private setPlaceholder(props: MultiSelectModel): void {
108
- Input.setPlaceholder(props.filterBarPlaceholder, this.filterInput as HTMLInputElement);
109
- }
110
- private checboxCreate(e: { [key: string]: HTMLElement } | HTMLElement): { [key: string]: HTMLElement } | HTMLElement {
111
- let item: { [key: string]: HTMLElement } | HTMLElement;
112
- if (!isNullOrUndefined((e as { [key: string]: HTMLElement }).item)) {
113
- item = (e as { [key: string]: HTMLElement }).item;
114
- } else {
115
- item = e;
116
- }
117
- if (this.parent.enableGroupCheckBox || ((item as HTMLElement).className !== 'e-list-group-item '
118
- && (item as HTMLElement).className !== 'e-list-group-item')) {
119
- const checkboxEle: HTMLElement | Element | string = createCheckBox(this.parent.createElement, true);
120
- const icon: Element = select('div.' + ICON, (item as HTMLElement));
121
- (item as HTMLElement).insertBefore(checkboxEle, (item as HTMLElement).childNodes[isNullOrUndefined(icon) ? 0 : 1]);
122
- select('.' + CHECKBOXFRAME, checkboxEle);
123
- if (this.parent.enableGroupCheckBox ) {
124
- this.parent.popupWrapper.classList.add('e-multiselect-group');
125
- }
126
- return item;
127
- } else {
128
- return item;
129
- }
130
- }
131
-
132
- private setSelectAll(): void {
133
- if (this.parent.showSelectAll) {
134
- if (isNullOrUndefined(this.checkAllParent)) {
135
- this.checkAllParent = this.parent.createElement('div', {
136
- className: checkAllParent
137
- });
138
- this.selectAllSpan = this.parent.createElement('span', {
139
- className: 'e-all-text'
140
- });
141
- this.selectAllSpan.textContent = '';
142
- this.checkAllParent.appendChild(this.selectAllSpan);
143
- this.setLocale();
144
- this.checboxCreate(this.checkAllParent as { [key: string]: HTMLElement } | HTMLElement);
145
- if (this.parent.headerTemplate) {
146
- if (!isNullOrUndefined(this.parent.filterParent)) {
147
- append([this.checkAllParent], this.parent.filterParent);
148
- } else {
149
- append([this.checkAllParent], this.parent.popupWrapper);
150
- }
151
- }
152
- if (!this.parent.headerTemplate) {
153
- if (!isNullOrUndefined(this.parent.filterParent)) {
154
- this.parent.filterParent.parentNode.insertBefore(this.checkAllParent, this.parent.filterParent.nextSibling);
155
- } else {
156
- prepend([this.checkAllParent], this.parent.popupWrapper);
157
- }
158
- }
159
- EventHandler.add(this.checkAllParent, 'mousedown', this.clickHandler, this);
160
- }
161
- if (this.parent.list.classList.contains('e-nodata') || (this.parent.listData && this.parent.listData.length <= 1 &&
162
- !(this.parent.isDynamicDataChange)) || (this.parent.isDynamicDataChange &&
163
- this.parent.listData && this.parent.listData.length <= 1)) {
164
- this.checkAllParent.style.display = 'none';
165
- } else {
166
- this.checkAllParent.style.display = 'block';
167
- }
168
- this.parent.selectAllHeight = this.checkAllParent.getBoundingClientRect().height;
169
- } else if (!isNullOrUndefined(this.checkAllParent)) {
170
- this.checkAllParent.parentElement.removeChild(this.checkAllParent);
171
- this.checkAllParent = null;
172
- }
173
- }
174
-
175
- public destroy(): void {
176
- this.removeEventListener();
177
- EventHandler.remove(document, 'mousedown', this.onDocumentClick);
178
- this.checkAllParent = null;
179
- this.clearIconElement = null;
180
- this.filterInput = null;
181
- this.filterInputObj = null;
182
- this.checkWrapper = null;
183
- this.selectAllSpan = null;
184
- }
185
- public listSelection(args: IUpdateListArgs): void {
186
- let target: EventTarget;
187
- if (!isNullOrUndefined(args.e)) {
188
- const frameElm: Element = args.li.querySelector('.e-checkbox-wrapper .e-frame');
189
- target = !isNullOrUndefined(args.e.target) ?
190
- ((args.e.target as HTMLElement).classList.contains('e-frame')
191
- && (!this.parent.showSelectAll
192
- || ( this.checkAllParent && !this.checkAllParent.contains(args.e.target as Element)))) ?
193
- args.e.target : args.li.querySelector('.e-checkbox-wrapper').childNodes[1]
194
- : args.li.querySelector('.e-checkbox-wrapper').childNodes[1];
195
- } else {
196
- const checkboxWrapper: Element = args.li.querySelector('.e-checkbox-wrapper');
197
- target = checkboxWrapper ? checkboxWrapper.childNodes[1] : args.li.lastElementChild.childNodes[1];
198
- }
199
- if (this.parent.itemTemplate || this.parent.enableGroupCheckBox ) {
200
- target = args.li.firstElementChild.childNodes[1];
201
- }
202
- if (!isNullOrUndefined(target)) {
203
- this.checkWrapper = closest((target as HTMLElement), '.' + CHECKBOXWRAP) as HTMLElement;
204
- }
205
- if (!isNullOrUndefined(this.checkWrapper)) {
206
- const checkElement: Element = select('.' + CHECKBOXFRAME, this.checkWrapper);
207
- const selectAll: boolean = false;
208
- this.validateCheckNode(this.checkWrapper, checkElement.classList.contains(CHECK), args.li, args.e, selectAll);
209
- }
210
- }
211
- private validateCheckNode(
212
- checkWrap: HTMLElement | Element,
213
- isCheck: boolean, li?: HTMLElement | Element,
214
- e?: KeyboardEventArgs | MouseEvent, selectAll?: boolean): void {
215
- this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true, selectAll);
216
- }
217
- private clickHandler(e: MouseEvent): void {
218
- let target: EventTarget;
219
- if ((e.currentTarget as HTMLElement).classList.contains(this.checkAllParent.className) || ((e.currentTarget as HTMLElement).classList.value === this.checkAllParent.className)) {
220
- target = (e.currentTarget as HTMLElement).firstElementChild.lastElementChild;
221
- } else {
222
- target = <Element>e.currentTarget;
223
- }
224
- this.checkWrapper = closest((target as HTMLElement), '.' + CHECKBOXWRAP) as HTMLElement;
225
- const selectAll: boolean = true;
226
- if (!isNullOrUndefined(this.checkWrapper)) {
227
- const checkElement: Element = select('.' + CHECKBOXFRAME, this.checkWrapper);
228
- this.validateCheckNode(this.checkWrapper, checkElement.classList.contains(CHECK), null, e, selectAll);
229
- }
230
- e.preventDefault();
231
- }
232
- private changeState(
233
- wrapper: HTMLElement | Element, state: string, e?: MouseEvent | KeyboardEventArgs, isPrevent?: boolean, selectAll?: boolean): void {
234
- let ariaState: string;
235
- const frameSpan: Element = wrapper.getElementsByClassName(CHECKBOXFRAME)[0];
236
- if (state === 'check' && !frameSpan.classList.contains(CHECK)) {
237
- frameSpan.classList.remove(INDETERMINATE);
238
- frameSpan.classList.add(CHECK);
239
- ariaState = 'true';
240
- if (selectAll) {
241
- this.parent.selectAllItems(true, e as MouseEvent);
242
- this.setLocale(true);
243
- }
244
- } else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK) || frameSpan.classList.contains(INDETERMINATE))) {
245
- removeClass([frameSpan], [CHECK, INDETERMINATE]);
246
- ariaState = 'false';
247
- if (selectAll) {
248
- this.parent.selectAllItems(false, e as MouseEvent);
249
- this.setLocale();
250
- }
251
- } else if (state === 'indeterminate' && !(frameSpan.classList.contains(INDETERMINATE))) {
252
- removeClass([frameSpan], [CHECK]);
253
- frameSpan.classList.add(INDETERMINATE);
254
- ariaState = 'false';
255
- if (selectAll) {
256
- this.parent.selectAllItems(false, e as MouseEvent);
257
- this.setLocale();
258
- }
259
- }
260
- }
261
- protected setSearchBox(args: IUpdateListArgs): InputObject | void {
262
- if (isNullOrUndefined(this.parent.filterParent)) {
263
- this.parent.filterParent = this.parent.createElement('span', {
264
- className: filterParent
265
- });
266
- this.filterInput = <HTMLInputElement>this.parent.createElement('input', {
267
- attrs: { type: 'text' },
268
- className: filterInput
269
- });
270
- this.parent.element.parentNode.insertBefore(this.filterInput, this.parent.element);
271
- let backIcon: boolean = false;
272
- if (Browser.isDevice) {
273
- backIcon = true;
274
- this.parent.mobFilter = false;
275
- }
276
- this.filterInputObj = Input.createInput(
277
- {
278
- element: this.filterInput,
279
- buttons: backIcon ? [searchBackIcon, filterBarClearIcon] : [filterBarClearIcon],
280
- properties: { placeholder: this.parent.filterBarPlaceholder }
281
- },
282
- this.parent.createElement
283
- );
284
- if (!isNullOrUndefined(this.parent.cssClass)) {
285
- if (this.parent.cssClass.split(' ').indexOf('e-outline') !== -1) {
286
- addClass([this.filterInputObj.container], 'e-outline');
287
- } else if (this.parent.cssClass.split(' ').indexOf('e-filled') !== -1) {
288
- addClass([this.filterInputObj.container], 'e-filled');
289
- }
290
- }
291
- append([this.filterInputObj.container], this.parent.filterParent);
292
- prepend([this.parent.filterParent], args.popupElement);
293
- attributes(this.filterInput, {
294
- 'aria-disabled': 'false',
295
- 'role': 'combobox',
296
- 'autocomplete': 'off',
297
- 'autocapitalize': 'off',
298
- 'spellcheck': 'false',
299
- 'aria-label': 'multiselect',
300
- 'aria-expanded': 'true',
301
- 'aria-controls': args.popupElement.id
302
- });
303
- this.clearIconElement = this.filterInput.parentElement.querySelector('.' + clearIcon);
304
- if (!Browser.isDevice && this.clearIconElement) {
305
- EventHandler.add(this.clearIconElement, 'mousedown', this.clearText, this);
306
- (this.clearIconElement as HTMLElement).style.visibility = 'hidden';
307
- }
308
- EventHandler.add(this.filterInput, 'input', this.parent.onInput, this.parent);
309
- EventHandler.add(this.filterInput, 'keyup', this.parent.keyUp, this.parent);
310
- EventHandler.add(this.filterInput, 'keydown', this.parent.onKeyDown, this.parent);
311
- EventHandler.add(this.filterInput, 'blur', this.onBlurHandler, this);
312
- EventHandler.add(this.filterInput, 'paste', this.parent.pasteHandler, this.parent);
313
- this.parent.searchBoxHeight = (this.filterInputObj.container.parentElement).getBoundingClientRect().height;
314
- return this.filterInputObj;
315
- }
316
- }
317
-
318
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
319
- private clickOnBackIcon(e: EventHandler): void {
320
- this.parent.hidePopup();
321
- removeClass([document.body, this.parent.popupObj.element], popupFullScreen);
322
- this.parent.inputElement.focus();
323
- }
324
- private clearText(e: MouseEvent): void {
325
- (this.parent.targetInputElement as HTMLInputElement).value = '';
326
- if (this.parent.allowFiltering && (this.parent.targetInputElement as HTMLInputElement).value === '') {
327
- this.parent.search(null);
328
- }
329
- this.parent.refreshPopup();
330
- this.parent.refreshListItems(null);
331
- (this.clearIconElement as HTMLElement).style.visibility = 'hidden';
332
- this.filterInput.focus();
333
- this.setReorder(e);
334
- e.preventDefault();
335
- }
336
-
337
- private setDeviceSearchBox(): void {
338
- this.parent.popupObj.element.classList.add(device);
339
- this.parent.popupObj.element.classList.add(mobileFilter);
340
- this.parent.popupObj.position = { X: 0, Y: 0 };
341
- this.parent.popupObj.dataBind();
342
- this.setSearchBoxPosition();
343
- this.backIconElement = this.filterInputObj.container.querySelector('.e-back-icon');
344
- this.clearIconElement = this.filterInputObj.container.querySelector('.' + clearIcon);
345
- (this.clearIconElement as HTMLElement).style.visibility = 'hidden';
346
- EventHandler.add(this.backIconElement, 'click', this.clickOnBackIcon, this);
347
- EventHandler.add(this.clearIconElement, 'click', this.clearText, this);
348
- }
349
-
350
- private setSearchBoxPosition(): void {
351
- const searchBoxHeight: number = this.filterInput.parentElement.getBoundingClientRect().height;
352
- let selectAllHeight: number = 0;
353
- if (this.checkAllParent) {
354
- selectAllHeight = this.checkAllParent.getBoundingClientRect().height;
355
- }
356
- this.parent.popupObj.element.style.maxHeight = '100%';
357
- this.parent.popupObj.element.style.width = '100%';
358
- this.parent.list.style.maxHeight = (window.innerHeight - searchBoxHeight - selectAllHeight) + 'px';
359
- this.parent.list.style.height = (window.innerHeight - searchBoxHeight - selectAllHeight) + 'px';
360
- const clearElement: Element = this.filterInput.parentElement.querySelector('.' + clearIcon);
361
- detach(this.filterInput);
362
- clearElement.parentElement.insertBefore(this.filterInput, clearElement);
363
- }
364
-
365
- protected setPopupFullScreen(): void {
366
- if (this.parent && this.parent.popupObj) {
367
- attributes(this.parent.popupObj.element, { style: 'left:0px;right:0px;top:0px;bottom:0px;' });
368
- addClass([document.body, this.parent.popupObj.element], popupFullScreen);
369
- this.parent.popupObj.element.style.maxHeight = '100%';
370
- this.parent.popupObj.element.style.width = '100%';
371
- }
372
- }
373
-
374
- protected targetElement(): string {
375
- if (!isNullOrUndefined(this.clearIconElement)) {
376
- this.parent.targetInputElement = this.filterInput;
377
- (this.clearIconElement as HTMLElement).style.visibility = this.parent.targetInputElement.value === '' ? 'hidden' : 'visible';
378
- }
379
- return (this.parent.targetInputElement as HTMLInputElement).value;
380
- }
381
-
382
- private onBlurHandler(e: MouseEvent): void {
383
- if (!this.parent.element.classList.contains('e-listbox')) {
384
- let target: HTMLElement;
385
- if (this.parent.keyAction) {
386
- return;
387
- }
388
- if (Browser.isIE) {
389
- target = !isNullOrUndefined(e) && <HTMLElement>e.target;
390
- }
391
- if (!Browser.isIE) {
392
- target = !isNullOrUndefined(e) && <HTMLElement>e.relatedTarget;
393
- }
394
- // eslint-disable-next-line max-len
395
- if (this.parent.popupObj && document.body.contains(this.parent.popupObj.element) && this.parent.popupObj.element.contains(target)
396
- && !Browser.isIE && this.filterInput) {
397
- this.filterInput.focus();
398
- return;
399
- }
400
- if (this.parent.scrollFocusStatus && this.filterInput) {
401
- e.preventDefault();
402
- this.filterInput.focus();
403
- this.parent.scrollFocusStatus = false;
404
- return;
405
- }
406
- if (this.parent.popupObj && document.body.contains(this.parent.popupObj.element)
407
- && !this.parent.popupObj.element.classList.contains('e-popup-close')) {
408
- this.parent.inputFocus = false;
409
- this.parent.updateValueState(e, this.parent.value, this.parent.tempValues);
410
- this.parent.dispatchEvent(this.parent.hiddenElement as HTMLElement, 'change');
411
- }
412
- if (this.parent.popupObj && document.body.contains(this.parent.popupObj.element) &&
413
- !this.parent.popupObj.element.classList.contains('e-popup-close')) {
414
- this.parent.inputFocus = false;
415
- this.parent.overAllWrapper.classList.remove(FOCUS);
416
- this.parent.trigger('blur');
417
- this.parent.focused = true;
418
- }
419
- if (this.parent.popupObj && document.body.contains(this.parent.popupObj.element) &&
420
- !this.parent.popupObj.element.classList.contains('e-popup-close') && !Browser.isDevice) {
421
- this.parent.hidePopup();
422
- }
423
- }
424
- }
425
- protected onDocumentClick(e: MouseEvent): void {
426
- if (this.parent.getLocaleName() !== 'listbox') {
427
- const target: HTMLElement = <HTMLElement>e.target;
428
- if (!isNullOrUndefined(this.parent.popupObj) && closest(target, '[id="' + this.parent.popupObj.element.id + '"]')) {
429
- if (!(this.filterInput && this.filterInput.value !== '')) {
430
- e.preventDefault();
431
- }
432
- }
433
- if (!(!isNullOrUndefined(this.parent.popupObj) && closest(target, '[id="' + this.parent.popupObj.element.id + '"]'))
434
- && !isNullOrUndefined(this.parent.overAllWrapper) && !this.parent.overAllWrapper.contains(e.target as Node)) {
435
- if (this.parent.overAllWrapper.classList.contains(dropDownBaseClasses.focus) || this.parent.isPopupOpen()) {
436
- this.parent.inputFocus = false;
437
- this.parent.scrollFocusStatus = false;
438
- this.parent.hidePopup();
439
- this.parent.onBlurHandler(e, true);
440
- this.parent.focused = true;
441
- }
442
- } else {
443
- this.parent.scrollFocusStatus = (Browser.isIE || Browser.info.name === 'edge') &&
444
- (document.activeElement === this.filterInput);
445
- }
446
- if (!isNullOrUndefined(this.parent.overAllWrapper) && !this.parent.overAllWrapper.contains(e.target as Node) && this.parent.overAllWrapper.classList.contains('e-input-focus') &&
447
- !this.parent.isPopupOpen()) {
448
- if (Browser.isIE) {
449
- this.parent.onBlurHandler();
450
- } else {
451
- this.parent.onBlurHandler(e);
452
- }
453
- }
454
- if (this.filterInput === target) {
455
- this.filterInput.focus();
456
- }
457
- }
458
- }
459
- private getFocus(e: IUpdateListArgs): void {
460
- this.parent.overAllWrapper.classList.remove(FOCUS);
461
- if (this.parent.keyAction && e.value !== 'clear' && e.value !== 'focus') {
462
- this.parent.keyAction = false;
463
- return;
464
- }
465
- if (e.value === 'focus') {
466
- this.filterInput.focus();
467
- this.parent.removeFocus();
468
- EventHandler.remove(this.parent.list, 'keydown', this.parent.onKeyDown);
469
- }
470
- if (e.value === 'clear') {
471
- this.filterInput.value = '';
472
- (this.clearIconElement as HTMLElement).style.visibility = 'hidden';
473
- }
474
- }
475
- private checkSelectAll(e: IUpdateListArgs): void {
476
- if (e.value === 'check') {
477
- this.changeState(this.checkAllParent, e.value, null, null, false);
478
- this.setLocale(true);
479
- }
480
- if (e.value === 'uncheck') {
481
- this.changeState(this.checkAllParent, e.value, null, null, false);
482
- this.setLocale();
483
- }
484
- if (e.value === 'indeterminate') {
485
- this.changeState(this.checkAllParent, e.value, null, null, false);
486
- this.setLocale();
487
- }
488
- }
489
- private setLocale(unSelect?: boolean): void {
490
- if (this.parent.selectAllText !== 'Select All' || this.parent.unSelectAllText !== 'Unselect All') {
491
- const template: string = unSelect ? this.parent.unSelectAllText : this.parent.selectAllText;
492
- this.selectAllSpan.textContent = '';
493
- const compiledString: Function = compile(template);
494
- const templateName: string = unSelect ? 'unSelectAllText' : 'selectAllText';
495
- for (const item of compiledString({}, this.parent, templateName, null, !this.parent.isStringTemplate)) {
496
- this.selectAllSpan.textContent = item.textContent;
497
- }
498
- } else {
499
- const l10nLocale: Object = { selectAllText: 'Select All', unSelectAllText: 'Unselect All' };
500
- let l10n: L10n = new L10n(this.parent.getLocaleName(), {}, this.parent.locale);
501
- if (l10n.getConstant('selectAllText') === '') {
502
- l10n = new L10n('dropdowns', l10nLocale, this.parent.locale);
503
- }
504
- this.selectAllSpan.textContent = unSelect ? l10n.getConstant('unSelectAllText') : l10n.getConstant('selectAllText');
505
- }
506
- }
507
- private getActiveList(args: IUpdateListArgs): void {
508
- if (args.li.classList.contains('e-active')) {
509
- this.activeLi.push(args.li.cloneNode(true) as HTMLElement);
510
- } else {
511
- this.activeLi.splice(args.index, 1);
512
- }
513
- }
514
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
515
- private setReorder(args: IUpdateListArgs | MouseEvent): void {
516
- if (this.parent.enableSelectionOrder && !isNullOrUndefined(this.parent.value)) {
517
- const activeLiCount: number = this.parent.ulElement.querySelectorAll('li.e-active').length;
518
- let remLi: NodeListOf<Element>;
519
- const ulEle: HTMLElement = this.parent.createElement('ul', {
520
- className: 'e-list-parent e-ul e-reorder'
521
- });
522
- if (activeLiCount > 0) {
523
- const activeListItems = this.parent.ulElement.querySelectorAll('li.e-active');
524
- activeListItems.forEach(item => {
525
- ulEle.appendChild(item);
526
- });
527
- remLi = this.parent.ulElement.querySelectorAll('li.e-active');
528
- addClass(remLi, 'e-reorder-hide');
529
- prepend([ulEle], this.parent.list);
530
- }
531
- this.parent.focusAtFirstListItem();
532
- }
533
- }
534
- }
535
-
536
- export interface ItemCreatedArgs {
537
- curData: { [key: string]: Object }
538
- item: HTMLElement
539
- text: string
540
- }
541
-
542
- export interface IUpdateListArgs {
543
- module: string
544
- enable: boolean
545
- li: HTMLElement
546
- e: MouseEvent | KeyboardEventArgs
547
- popupElement: HTMLElement
548
- value: string
549
- index: number
550
- }