@syncfusion/ej2-dropdowns 20.2.50 → 20.3.47

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 (361) hide show
  1. package/CHANGELOG.md +14 -28
  2. package/dist/ej2-dropdowns.min.js +10 -0
  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 +1406 -49
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +1432 -53
  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/mention.d.ts +4 -0
  13. package/mention.js +4 -0
  14. package/package.json +12 -12
  15. package/src/auto-complete/auto-complete.js +2 -2
  16. package/src/combo-box/combo-box.js +0 -3
  17. package/src/drop-down-base/drop-down-base.d.ts +2 -0
  18. package/src/drop-down-base/drop-down-base.js +6 -1
  19. package/src/drop-down-list/drop-down-list.d.ts +1 -0
  20. package/src/drop-down-list/drop-down-list.js +23 -22
  21. package/src/index.d.ts +1 -0
  22. package/src/index.js +1 -0
  23. package/src/list-box/list-box.js +16 -11
  24. package/src/mention/index.d.ts +5 -0
  25. package/src/mention/index.js +4 -0
  26. package/src/mention/mention-model.d.ts +285 -0
  27. package/src/mention/mention.d.ts +451 -0
  28. package/src/mention/mention.js +1369 -0
  29. package/src/multi-select/checkbox-selection.js +1 -4
  30. package/src/multi-select/multi-select.d.ts +1 -0
  31. package/src/multi-select/multi-select.js +18 -10
  32. package/styles/auto-complete/_all.scss +1 -1
  33. package/styles/auto-complete/_bootstrap-dark-definition.scss +1 -1
  34. package/styles/auto-complete/_bootstrap-definition.scss +1 -1
  35. package/styles/auto-complete/_bootstrap4-definition.scss +2 -2
  36. package/styles/auto-complete/_bootstrap5-definition.scss +1 -1
  37. package/styles/auto-complete/_fabric-dark-definition.scss +1 -1
  38. package/styles/auto-complete/_fabric-definition.scss +1 -1
  39. package/styles/auto-complete/_fluent-definition.scss +1 -1
  40. package/styles/auto-complete/_fusionnew-definition.scss +1 -1
  41. package/styles/auto-complete/_highcontrast-definition.scss +1 -1
  42. package/styles/auto-complete/_highcontrast-light-definition.scss +1 -1
  43. package/styles/auto-complete/_material-dark-definition.scss +1 -1
  44. package/styles/auto-complete/_material-definition.scss +1 -1
  45. package/styles/auto-complete/_material3-definition.scss +1 -1
  46. package/styles/auto-complete/_tailwind-definition.scss +1 -1
  47. package/styles/auto-complete/bootstrap-dark.css +3 -1
  48. package/styles/auto-complete/bootstrap.css +3 -1
  49. package/styles/auto-complete/bootstrap4.css +3 -1
  50. package/styles/auto-complete/bootstrap5-dark.css +3 -1
  51. package/styles/auto-complete/bootstrap5.css +3 -1
  52. package/styles/auto-complete/fabric-dark.css +3 -1
  53. package/styles/auto-complete/fabric.css +3 -1
  54. package/styles/auto-complete/fluent-dark.css +3 -1
  55. package/styles/auto-complete/fluent.css +3 -1
  56. package/styles/auto-complete/highcontrast-light.css +3 -1
  57. package/styles/auto-complete/highcontrast.css +3 -1
  58. package/styles/auto-complete/material-dark.css +3 -1
  59. package/styles/auto-complete/material.css +3 -1
  60. package/styles/auto-complete/tailwind-dark.css +3 -1
  61. package/styles/auto-complete/tailwind.css +3 -1
  62. package/styles/bootstrap-dark.css +94 -42
  63. package/styles/bootstrap-dark.scss +1 -0
  64. package/styles/bootstrap.css +94 -42
  65. package/styles/bootstrap.scss +1 -0
  66. package/styles/bootstrap4.css +95 -42
  67. package/styles/bootstrap4.scss +1 -0
  68. package/styles/bootstrap5-dark.css +101 -44
  69. package/styles/bootstrap5-dark.scss +1 -0
  70. package/styles/bootstrap5.css +101 -44
  71. package/styles/bootstrap5.scss +1 -0
  72. package/styles/combo-box/_all.scss +1 -1
  73. package/styles/combo-box/_bootstrap-dark-definition.scss +1 -1
  74. package/styles/combo-box/_bootstrap-definition.scss +1 -1
  75. package/styles/combo-box/_bootstrap4-definition.scss +2 -2
  76. package/styles/combo-box/_bootstrap5-definition.scss +1 -1
  77. package/styles/combo-box/_fabric-dark-definition.scss +1 -1
  78. package/styles/combo-box/_fabric-definition.scss +1 -1
  79. package/styles/combo-box/_fluent-definition.scss +1 -1
  80. package/styles/combo-box/_fusionnew-definition.scss +1 -1
  81. package/styles/combo-box/_highcontrast-definition.scss +1 -1
  82. package/styles/combo-box/_highcontrast-light-definition.scss +1 -1
  83. package/styles/combo-box/_material-dark-definition.scss +1 -1
  84. package/styles/combo-box/_material-definition.scss +1 -1
  85. package/styles/combo-box/_material3-definition.scss +1 -1
  86. package/styles/combo-box/_tailwind-definition.scss +1 -1
  87. package/styles/combo-box/bootstrap-dark.css +3 -1
  88. package/styles/combo-box/bootstrap.css +3 -1
  89. package/styles/combo-box/bootstrap4.css +3 -1
  90. package/styles/combo-box/bootstrap5-dark.css +3 -1
  91. package/styles/combo-box/bootstrap5.css +3 -1
  92. package/styles/combo-box/fabric-dark.css +3 -1
  93. package/styles/combo-box/fabric.css +3 -1
  94. package/styles/combo-box/fluent-dark.css +3 -1
  95. package/styles/combo-box/fluent.css +3 -1
  96. package/styles/combo-box/highcontrast-light.css +3 -1
  97. package/styles/combo-box/highcontrast.css +3 -1
  98. package/styles/combo-box/material-dark.css +3 -1
  99. package/styles/combo-box/material.css +3 -1
  100. package/styles/combo-box/tailwind-dark.css +3 -1
  101. package/styles/combo-box/tailwind.css +3 -1
  102. package/styles/drop-down-base/_all.scss +1 -1
  103. package/styles/drop-down-base/_bootstrap-dark-definition.scss +8 -2
  104. package/styles/drop-down-base/_bootstrap-definition.scss +6 -1
  105. package/styles/drop-down-base/_bootstrap4-definition.scss +6 -1
  106. package/styles/drop-down-base/_bootstrap5-definition.scss +8 -3
  107. package/styles/drop-down-base/_fabric-dark-definition.scss +6 -1
  108. package/styles/drop-down-base/_fabric-definition.scss +6 -1
  109. package/styles/drop-down-base/_fluent-definition.scss +8 -2
  110. package/styles/drop-down-base/_fusionnew-definition.scss +8 -3
  111. package/styles/drop-down-base/_highcontrast-definition.scss +16 -6
  112. package/styles/drop-down-base/_highcontrast-light-definition.scss +18 -7
  113. package/styles/drop-down-base/_layout.scss +44 -3
  114. package/styles/drop-down-base/_material-dark-definition.scss +7 -1
  115. package/styles/drop-down-base/_material-definition.scss +6 -0
  116. package/styles/drop-down-base/_material3-definition.scss +8 -3
  117. package/styles/drop-down-base/_tailwind-definition.scss +8 -3
  118. package/styles/drop-down-base/_theme.scss +4 -4
  119. package/styles/drop-down-base/bootstrap-dark.css +42 -1
  120. package/styles/drop-down-base/bootstrap.css +42 -1
  121. package/styles/drop-down-base/bootstrap4.css +42 -1
  122. package/styles/drop-down-base/bootstrap5-dark.css +42 -1
  123. package/styles/drop-down-base/bootstrap5.css +42 -1
  124. package/styles/drop-down-base/fabric-dark.css +42 -1
  125. package/styles/drop-down-base/fabric.css +42 -1
  126. package/styles/drop-down-base/fluent-dark.css +42 -1
  127. package/styles/drop-down-base/fluent.css +42 -1
  128. package/styles/drop-down-base/highcontrast-light.css +42 -1
  129. package/styles/drop-down-base/highcontrast.css +42 -1
  130. package/styles/drop-down-base/material-dark.css +42 -1
  131. package/styles/drop-down-base/material.css +42 -1
  132. package/styles/drop-down-base/tailwind-dark.css +42 -1
  133. package/styles/drop-down-base/tailwind.css +42 -1
  134. package/styles/drop-down-list/_all.scss +2 -1
  135. package/styles/drop-down-list/_bootstrap-dark-definition.scss +2 -1
  136. package/styles/drop-down-list/_bootstrap-definition.scss +2 -1
  137. package/styles/drop-down-list/_bootstrap4-definition.scss +3 -1
  138. package/styles/drop-down-list/_bootstrap5-definition.scss +3 -3
  139. package/styles/drop-down-list/_fabric-dark-definition.scss +2 -1
  140. package/styles/drop-down-list/_fabric-definition.scss +2 -0
  141. package/styles/drop-down-list/_fluent-definition.scss +2 -1
  142. package/styles/drop-down-list/_fusionnew-definition.scss +3 -3
  143. package/styles/drop-down-list/_highcontrast-definition.scss +21 -10
  144. package/styles/drop-down-list/_highcontrast-light-definition.scss +22 -11
  145. package/styles/drop-down-list/_layout.scss +8 -9
  146. package/styles/drop-down-list/_material-dark-definition.scss +2 -2
  147. package/styles/drop-down-list/_material-definition.scss +1 -0
  148. package/styles/drop-down-list/_material3-definition.scss +3 -3
  149. package/styles/drop-down-list/_tailwind-definition.scss +1 -0
  150. package/styles/drop-down-list/_theme.scss +3 -3
  151. package/styles/drop-down-list/bootstrap-dark.css +5 -0
  152. package/styles/drop-down-list/bootstrap.css +5 -0
  153. package/styles/drop-down-list/bootstrap4.css +5 -0
  154. package/styles/drop-down-list/bootstrap5-dark.css +6 -0
  155. package/styles/drop-down-list/bootstrap5.css +6 -0
  156. package/styles/drop-down-list/fabric-dark.css +5 -0
  157. package/styles/drop-down-list/fabric.css +5 -0
  158. package/styles/drop-down-list/fluent-dark.css +6 -0
  159. package/styles/drop-down-list/fluent.css +6 -0
  160. package/styles/drop-down-list/highcontrast-light.css +5 -0
  161. package/styles/drop-down-list/highcontrast.css +5 -0
  162. package/styles/drop-down-list/icons/_bootstrap.scss +0 -1
  163. package/styles/drop-down-list/icons/_fabric.scss +0 -1
  164. package/styles/drop-down-list/icons/_material.scss +0 -1
  165. package/styles/drop-down-list/material-dark.css +5 -0
  166. package/styles/drop-down-list/material.css +5 -0
  167. package/styles/drop-down-list/tailwind-dark.css +6 -0
  168. package/styles/drop-down-list/tailwind.css +6 -0
  169. package/styles/drop-down-tree/_all.scss +1 -1
  170. package/styles/drop-down-tree/_bootstrap-dark-definition.scss +1 -1
  171. package/styles/drop-down-tree/_bootstrap-definition.scss +1 -1
  172. package/styles/drop-down-tree/_bootstrap4-definition.scss +1 -1
  173. package/styles/drop-down-tree/_bootstrap5-definition.scss +2 -2
  174. package/styles/drop-down-tree/_fabric-dark-definition.scss +1 -1
  175. package/styles/drop-down-tree/_fabric-definition.scss +2 -2
  176. package/styles/drop-down-tree/_fluent-definition.scss +2 -2
  177. package/styles/drop-down-tree/_fusionnew-definition.scss +2 -2
  178. package/styles/drop-down-tree/_highcontrast-definition.scss +1 -1
  179. package/styles/drop-down-tree/_highcontrast-light-definition.scss +1 -1
  180. package/styles/drop-down-tree/_layout.scss +1 -2
  181. package/styles/drop-down-tree/_material-dark-definition.scss +2 -2
  182. package/styles/drop-down-tree/_material-definition.scss +2 -2
  183. package/styles/drop-down-tree/_material3-definition.scss +2 -2
  184. package/styles/drop-down-tree/_tailwind-definition.scss +2 -2
  185. package/styles/drop-down-tree/bootstrap-dark.css +4 -0
  186. package/styles/drop-down-tree/bootstrap.css +4 -0
  187. package/styles/drop-down-tree/bootstrap4.css +4 -0
  188. package/styles/drop-down-tree/bootstrap5-dark.css +5 -0
  189. package/styles/drop-down-tree/bootstrap5.css +5 -0
  190. package/styles/drop-down-tree/fabric-dark.css +4 -0
  191. package/styles/drop-down-tree/fabric.css +4 -0
  192. package/styles/drop-down-tree/fluent-dark.css +5 -0
  193. package/styles/drop-down-tree/fluent.css +5 -0
  194. package/styles/drop-down-tree/highcontrast-light.css +4 -0
  195. package/styles/drop-down-tree/highcontrast.css +4 -0
  196. package/styles/drop-down-tree/icons/_bootstrap.scss +0 -1
  197. package/styles/drop-down-tree/icons/_bootstrap4.scss +0 -1
  198. package/styles/drop-down-tree/icons/_fabric.scss +0 -1
  199. package/styles/drop-down-tree/icons/_highcontrast-light.scss +0 -1
  200. package/styles/drop-down-tree/icons/_highcontrast.scss +0 -1
  201. package/styles/drop-down-tree/icons/_material-dark.scss +0 -1
  202. package/styles/drop-down-tree/icons/_material.scss +0 -1
  203. package/styles/drop-down-tree/material-dark.css +4 -0
  204. package/styles/drop-down-tree/material.css +4 -0
  205. package/styles/drop-down-tree/tailwind-dark.css +5 -0
  206. package/styles/drop-down-tree/tailwind.css +5 -0
  207. package/styles/fabric-dark.css +94 -42
  208. package/styles/fabric-dark.scss +1 -0
  209. package/styles/fabric.css +94 -42
  210. package/styles/fabric.scss +1 -0
  211. package/styles/fluent-dark.css +101 -44
  212. package/styles/fluent-dark.scss +1 -0
  213. package/styles/fluent.css +101 -44
  214. package/styles/fluent.scss +1 -0
  215. package/styles/highcontrast-light.css +97 -42
  216. package/styles/highcontrast-light.scss +1 -0
  217. package/styles/highcontrast.css +97 -42
  218. package/styles/highcontrast.scss +1 -0
  219. package/styles/list-box/_all.scss +1 -1
  220. package/styles/list-box/_bootstrap-dark-definition.scss +2 -0
  221. package/styles/list-box/_bootstrap-definition.scss +1 -0
  222. package/styles/list-box/_bootstrap4-definition.scss +1 -0
  223. package/styles/list-box/_bootstrap5-definition.scss +3 -0
  224. package/styles/list-box/_fabric-dark-definition.scss +3 -1
  225. package/styles/list-box/_fabric-definition.scss +1 -0
  226. package/styles/list-box/_fluent-definition.scss +3 -0
  227. package/styles/list-box/_fusionnew-definition.scss +1 -0
  228. package/styles/list-box/_highcontrast-definition.scss +1 -0
  229. package/styles/list-box/_highcontrast-light-definition.scss +3 -1
  230. package/styles/list-box/_layout.scss +8 -17
  231. package/styles/list-box/_material-dark-definition.scss +2 -0
  232. package/styles/list-box/_material-definition.scss +1 -0
  233. package/styles/list-box/_material3-definition.scss +1 -0
  234. package/styles/list-box/_tailwind-definition.scss +3 -0
  235. package/styles/list-box/_theme.scss +11 -25
  236. package/styles/list-box/bootstrap-dark.css +12 -33
  237. package/styles/list-box/bootstrap.css +14 -35
  238. package/styles/list-box/bootstrap4.css +14 -35
  239. package/styles/list-box/bootstrap5-dark.css +15 -36
  240. package/styles/list-box/bootstrap5.css +15 -36
  241. package/styles/list-box/fabric-dark.css +12 -33
  242. package/styles/list-box/fabric.css +14 -35
  243. package/styles/list-box/fluent-dark.css +15 -36
  244. package/styles/list-box/fluent.css +15 -36
  245. package/styles/list-box/highcontrast-light.css +12 -33
  246. package/styles/list-box/highcontrast.css +14 -35
  247. package/styles/list-box/icons/_bootstrap-dark.scss +2 -2
  248. package/styles/list-box/icons/_bootstrap.scss +1 -1
  249. package/styles/list-box/icons/_bootstrap4.scss +1 -1
  250. package/styles/list-box/icons/_bootstrap5.scss +1 -1
  251. package/styles/list-box/icons/_fabric-dark.scss +1 -1
  252. package/styles/list-box/icons/_fabric.scss +1 -1
  253. package/styles/list-box/icons/_fluent.scss +1 -1
  254. package/styles/list-box/icons/_fusionnew.scss +1 -1
  255. package/styles/list-box/icons/_highcontrast-light.scss +1 -1
  256. package/styles/list-box/icons/_highcontrast.scss +1 -1
  257. package/styles/list-box/icons/_material-dark.scss +1 -1
  258. package/styles/list-box/icons/_material.scss +2 -2
  259. package/styles/list-box/icons/_material3.scss +1 -1
  260. package/styles/list-box/icons/_tailwind-dark.scss +1 -1
  261. package/styles/list-box/icons/_tailwind.scss +1 -1
  262. package/styles/list-box/material-dark.css +12 -33
  263. package/styles/list-box/material.css +14 -35
  264. package/styles/list-box/tailwind-dark.css +15 -36
  265. package/styles/list-box/tailwind.css +15 -36
  266. package/styles/material-dark.css +94 -42
  267. package/styles/material-dark.scss +1 -0
  268. package/styles/material.css +94 -42
  269. package/styles/material.scss +1 -0
  270. package/styles/mention/_all.scss +1 -0
  271. package/styles/mention/_bootstrap-dark-definition.scss +3 -0
  272. package/styles/mention/_bootstrap-definition.scss +3 -0
  273. package/styles/mention/_bootstrap4-definition.scss +3 -0
  274. package/styles/mention/_bootstrap5-dark-definition.scss +1 -0
  275. package/styles/mention/_bootstrap5-definition.scss +1 -0
  276. package/styles/mention/_fabric-dark-definition.scss +2 -0
  277. package/styles/mention/_fabric-definition.scss +3 -0
  278. package/styles/mention/_fluent-dark-definition.scss +1 -0
  279. package/styles/mention/_fluent-definition.scss +1 -0
  280. package/styles/mention/_fusionnew-definition.scss +1 -0
  281. package/styles/mention/_highcontrast-definition.scss +3 -0
  282. package/styles/mention/_highcontrast-light-definition.scss +3 -0
  283. package/styles/mention/_layout.scss +6 -0
  284. package/styles/mention/_material-dark-definition.scss +3 -0
  285. package/styles/mention/_material-definition.scss +3 -0
  286. package/styles/mention/_material3-definition.scss +1 -0
  287. package/styles/mention/_tailwind-dark-definition.scss +1 -0
  288. package/styles/mention/_tailwind-definition.scss +1 -0
  289. package/styles/mention/bootstrap-dark.css +29 -0
  290. package/styles/mention/bootstrap-dark.scss +6 -0
  291. package/styles/mention/bootstrap.css +29 -0
  292. package/styles/mention/bootstrap.scss +6 -0
  293. package/styles/mention/bootstrap4.css +47 -0
  294. package/styles/mention/bootstrap4.scss +6 -0
  295. package/styles/mention/bootstrap5-dark.css +58 -0
  296. package/styles/mention/bootstrap5-dark.scss +6 -0
  297. package/styles/mention/bootstrap5.css +58 -0
  298. package/styles/mention/bootstrap5.scss +6 -0
  299. package/styles/mention/fabric-dark.css +29 -0
  300. package/styles/mention/fabric-dark.scss +6 -0
  301. package/styles/mention/fabric.css +29 -0
  302. package/styles/mention/fabric.scss +6 -0
  303. package/styles/mention/fluent-dark.css +58 -0
  304. package/styles/mention/fluent-dark.scss +6 -0
  305. package/styles/mention/fluent.css +58 -0
  306. package/styles/mention/fluent.scss +6 -0
  307. package/styles/mention/highcontrast-light.css +43 -0
  308. package/styles/mention/highcontrast-light.scss +6 -0
  309. package/styles/mention/highcontrast.css +43 -0
  310. package/styles/mention/highcontrast.scss +6 -0
  311. package/styles/mention/material-dark.css +29 -0
  312. package/styles/mention/material-dark.scss +6 -0
  313. package/styles/mention/material.css +29 -0
  314. package/styles/mention/material.scss +6 -0
  315. package/styles/mention/tailwind-dark.css +68 -0
  316. package/styles/mention/tailwind-dark.scss +6 -0
  317. package/styles/mention/tailwind.css +68 -0
  318. package/styles/mention/tailwind.scss +6 -0
  319. package/styles/multi-select/_all.scss +1 -1
  320. package/styles/multi-select/_bootstrap-dark-definition.scss +4 -1
  321. package/styles/multi-select/_bootstrap-definition.scss +2 -0
  322. package/styles/multi-select/_bootstrap4-definition.scss +5 -2
  323. package/styles/multi-select/_bootstrap5-definition.scss +2 -2
  324. package/styles/multi-select/_fabric-dark-definition.scss +5 -3
  325. package/styles/multi-select/_fabric-definition.scss +4 -2
  326. package/styles/multi-select/_fluent-definition.scss +2 -1
  327. package/styles/multi-select/_fusionnew-definition.scss +2 -2
  328. package/styles/multi-select/_highcontrast-definition.scss +47 -24
  329. package/styles/multi-select/_highcontrast-light-definition.scss +48 -25
  330. package/styles/multi-select/_layout.scss +59 -71
  331. package/styles/multi-select/_material-dark-definition.scss +3 -1
  332. package/styles/multi-select/_material-definition.scss +1 -0
  333. package/styles/multi-select/_material3-definition.scss +2 -2
  334. package/styles/multi-select/_tailwind-definition.scss +2 -3
  335. package/styles/multi-select/_theme.scss +16 -21
  336. package/styles/multi-select/bootstrap-dark.css +10 -6
  337. package/styles/multi-select/bootstrap.css +10 -6
  338. package/styles/multi-select/bootstrap4.css +10 -6
  339. package/styles/multi-select/bootstrap5-dark.css +11 -6
  340. package/styles/multi-select/bootstrap5.css +11 -6
  341. package/styles/multi-select/fabric-dark.css +10 -6
  342. package/styles/multi-select/fabric.css +10 -6
  343. package/styles/multi-select/fluent-dark.css +11 -6
  344. package/styles/multi-select/fluent.css +11 -6
  345. package/styles/multi-select/highcontrast-light.css +13 -6
  346. package/styles/multi-select/highcontrast.css +13 -6
  347. package/styles/multi-select/icons/_bootstrap5.scss +0 -1
  348. package/styles/multi-select/icons/_fluent.scss +0 -1
  349. package/styles/multi-select/icons/_fusionnew.scss +0 -1
  350. package/styles/multi-select/icons/_material-dark.scss +53 -54
  351. package/styles/multi-select/icons/_material.scss +53 -54
  352. package/styles/multi-select/icons/_material3.scss +0 -1
  353. package/styles/multi-select/icons/_tailwind.scss +0 -1
  354. package/styles/multi-select/material-dark.css +10 -6
  355. package/styles/multi-select/material.css +10 -6
  356. package/styles/multi-select/tailwind-dark.css +11 -6
  357. package/styles/multi-select/tailwind.css +11 -6
  358. package/styles/tailwind-dark.css +102 -44
  359. package/styles/tailwind-dark.scss +1 -0
  360. package/styles/tailwind.css +102 -44
  361. package/styles/tailwind.scss +1 -0
@@ -232,6 +232,8 @@ var dropDownBaseClasses = {
232
232
  grouping: 'e-dd-group'
233
233
  };
234
234
  var ITEMTEMPLATE_PROPERTY = 'ItemTemplate';
235
+ var DISPLAYTEMPLATE_PROPERTY = 'DisplayTemplate';
236
+ var SPINNERTEMPLATE_PROPERTY = 'SpinnerTemplate';
235
237
  var VALUETEMPLATE_PROPERTY = 'ValueTemplate';
236
238
  var GROUPTEMPLATE_PROPERTY = 'GroupTemplate';
237
239
  var HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';
@@ -438,6 +440,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
438
440
  liElem.textContent = content;
439
441
  ele.appendChild(liElem);
440
442
  liElem.classList.add('e-list-nrt');
443
+ liElem.setAttribute('role', 'option');
441
444
  }
442
445
  else {
443
446
  ele.innerHTML = content;
@@ -531,7 +534,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
531
534
  * @returns {void}
532
535
  */
533
536
  DropDownBase.prototype.updateDataAttribute = function (value) {
534
- var invalidAttr = ['class', 'style', 'id', 'type'];
537
+ var invalidAttr = ['class', 'style', 'id', 'type', 'aria-expanded', 'aria-autocomplete', 'aria-readonly'];
535
538
  var attr = {};
536
539
  for (var a = 0; a < this.element.attributes.length; a++) {
537
540
  if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&
@@ -599,6 +602,8 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
599
602
  this.isRequested = false;
600
603
  this.isDataFetched = false;
601
604
  this.itemTemplateId = "" + this.element.id + ITEMTEMPLATE_PROPERTY;
605
+ this.displayTemplateId = "" + this.element.id + DISPLAYTEMPLATE_PROPERTY;
606
+ this.spinnerTemplateId = "" + this.element.id + SPINNERTEMPLATE_PROPERTY;
602
607
  this.valueTemplateId = "" + this.element.id + VALUETEMPLATE_PROPERTY;
603
608
  this.groupTemplateId = "" + this.element.id + GROUPTEMPLATE_PROPERTY;
604
609
  this.headerTemplateId = "" + this.element.id + HEADERTEMPLATE_PROPERTY;
@@ -1719,8 +1724,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
1719
1724
  this.inputWrapper.container.setAttribute('style', this.htmlAttributes[htmlAttr]);
1720
1725
  }
1721
1726
  else {
1722
- var defaultAttr = ['title', 'id', 'placeholder', 'aria-placeholder',
1723
- 'role', 'autocorrect', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
1727
+ var defaultAttr = ['title', 'id', 'placeholder',
1728
+ 'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];
1724
1729
  var validateAttr = ['name', 'required'];
1725
1730
  if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
1726
1731
  defaultAttr.push('tabindex');
@@ -1749,11 +1754,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
1749
1754
  DropDownList.prototype.getAriaAttributes = function () {
1750
1755
  return {
1751
1756
  'aria-disabled': 'false',
1752
- 'aria-owns': this.element.id + '_options',
1753
1757
  'role': 'combobox',
1754
- 'aria-haspopup': 'true',
1755
1758
  'aria-expanded': 'false',
1756
- 'aria-activedescendant': 'null',
1757
1759
  'aria-live': 'polite',
1758
1760
  'aria-labelledby': this.hiddenElement.id
1759
1761
  };
@@ -2475,10 +2477,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
2475
2477
  if (this.setValue(e)) {
2476
2478
  return;
2477
2479
  }
2478
- attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
2479
- if (this.isFilterLayout() && this.filterInput) {
2480
- attributes(this.filterInput, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
2481
- }
2482
2480
  if ((!this.isPopupOpen && !isNullOrUndefined(li)) || (this.isPopupOpen && !isNullOrUndefined(e) &&
2483
2481
  (e.type !== 'keydown' || e.type === 'keydown' && e.action === 'enter'))) {
2484
2482
  this.isSelectCustom = false;
@@ -2489,7 +2487,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
2489
2487
  }
2490
2488
  if (Browser.info.name !== 'mozilla') {
2491
2489
  attributes(this.inputElement, { 'aria-label': this.inputElement.value });
2492
- attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id });
2490
+ attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id != '' ? this.inputElement.id : this.element.id });
2493
2491
  this.targetElement().removeAttribute('aria-live');
2494
2492
  }
2495
2493
  };
@@ -2874,11 +2872,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
2874
2872
  prepend([parentElement], popupElement);
2875
2873
  attributes(this.filterInput, {
2876
2874
  'aria-disabled': 'false',
2877
- 'aria-owns': this.element.id + '_options',
2878
- 'role': 'listbox',
2879
- 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null,
2875
+ 'role': 'combobox',
2880
2876
  'autocomplete': 'off',
2881
- 'autocorrect': 'off',
2882
2877
  'autocapitalize': 'off',
2883
2878
  'spellcheck': 'false'
2884
2879
  });
@@ -3179,7 +3174,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3179
3174
  _this.unWireListEvents();
3180
3175
  _this.wireListEvents();
3181
3176
  }
3182
- attributes(_this.targetElement(), { 'aria-expanded': 'true' });
3177
+ _this.selectedElementID = _this.selectedLI ? _this.selectedLI.id : null;
3178
+ attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options', 'aria-activedescendant': _this.selectedElementID });
3179
+ _this.inputElement.setAttribute('aria-expanded', 'true');
3180
+ if (_this.selectedElementID == null) {
3181
+ _this.targetElement().removeAttribute('aria-activedescendant');
3182
+ }
3183
3183
  var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;
3184
3184
  addClass([inputParent], [dropDownListClasses.inputFocus]);
3185
3185
  var animModel = { name: 'FadeIn', duration: 100 };
@@ -3455,6 +3455,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3455
3455
  this.filterInput = null;
3456
3456
  }
3457
3457
  attributes(this.targetElement(), { 'aria-expanded': 'false' });
3458
+ this.inputElement.setAttribute('aria-expanded', 'false');
3459
+ this.targetElement().removeAttribute('aria-owns');
3460
+ this.targetElement().removeAttribute('aria-activedescendant');
3458
3461
  this.inputWrapper.container.classList.remove(dropDownListClasses.iconAnimation);
3459
3462
  if (this.isFiltering()) {
3460
3463
  this.actionCompleteData.isUpdated = false;
@@ -3512,6 +3515,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3512
3515
  if (isNullOrUndefined(this.inputElement.getAttribute('type'))) {
3513
3516
  this.inputElement.setAttribute('type', 'text');
3514
3517
  }
3518
+ this.inputElement.setAttribute('aria-expanded', 'false');
3515
3519
  }
3516
3520
  else {
3517
3521
  this.inputElement = this.createElement('input', { attrs: { role: 'combobox', type: 'text' } });
@@ -3554,8 +3558,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
3554
3558
  this.inputWrapper.container.style.width = formatUnit(this.width);
3555
3559
  this.inputWrapper.container.classList.add('e-ddl');
3556
3560
  Input.calculateWidth(this.inputElement, this.inputWrapper.container);
3557
- if (!isNullOrUndefined(this.inputWrapper) && !isNullOrUndefined(this.inputWrapper.buttons[0]) && this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0] && this.floatLabelType !== 'Never') {
3558
- this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
3561
+ if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never') {
3562
+ this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
3559
3563
  }
3560
3564
  this.wireEvent();
3561
3565
  this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
@@ -4041,7 +4045,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4041
4045
  if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {
4042
4046
  this.renderPopup(e);
4043
4047
  }
4044
- attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
4048
+ attributes(this.targetElement(), { 'aria-activedescendant': this.selectedElementID });
4049
+ if (this.selectedElementID == null) {
4050
+ this.targetElement().removeAttribute('aria-activedescendant');
4051
+ }
4045
4052
  };
4046
4053
  DropDownList.prototype.renderHightSearch = function () {
4047
4054
  // update high light search
@@ -4147,10 +4154,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4147
4154
  return;
4148
4155
  }
4149
4156
  if (this.inputElement) {
4150
- var attrArray = ['readonly', 'aria-disabled', 'aria-placeholder',
4151
- 'placeholder', 'aria-owns', 'aria-labelledby', 'aria-haspopup', 'aria-expanded',
4152
- 'aria-activedescendant', 'autocomplete', 'aria-readonly', 'autocorrect',
4153
- 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];
4157
+ var attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',
4158
+ 'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',
4159
+ 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];
4154
4160
  for (var i = 0; i < attrArray.length; i++) {
4155
4161
  this.inputElement.removeAttribute(attrArray[i]);
4156
4162
  }
@@ -7612,15 +7618,12 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
7612
7618
  };
7613
7619
  ComboBox.prototype.getAriaAttributes = function () {
7614
7620
  var ariaAttributes = {
7615
- 'aria-owns': this.element.id + '_options',
7616
7621
  'role': 'combobox',
7617
7622
  'aria-autocomplete': 'both',
7618
7623
  'aria-labelledby': this.hiddenElement.id,
7619
- 'aria-hasPopup': 'true',
7620
7624
  'aria-expanded': 'false',
7621
7625
  'aria-readonly': this.readonly.toString(),
7622
7626
  'autocomplete': 'off',
7623
- 'autocorrect': 'off',
7624
7627
  'autocapitalize': 'off',
7625
7628
  'spellcheck': 'false'
7626
7629
  };
@@ -8475,6 +8478,7 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
8475
8478
  };
8476
8479
  AutoComplete.prototype.setSelection = function (li, e) {
8477
8480
  if (!this.isValidLI(li)) {
8481
+ this.selectedLI = li;
8478
8482
  return;
8479
8483
  }
8480
8484
  if (!isNullOrUndefined(e) && e.type === 'keydown' && e.action !== 'enter'
@@ -8490,7 +8494,6 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
8490
8494
  e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown');
8491
8495
  _super.prototype.setAutoFill.call(this, li, isKeyNavigate);
8492
8496
  }
8493
- attributes(this.inputElement, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
8494
8497
  }
8495
8498
  else {
8496
8499
  _super.prototype.setSelection.call(this, li, e);
@@ -9119,7 +9122,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
9119
9122
  _this.refreshPopup();
9120
9123
  _this.renderReactTemplates();
9121
9124
  _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
9122
- attributes(_this.inputElement, { 'aria-expanded': 'true' });
9125
+ attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options' });
9126
+ if (_this.selectedElementID == null) {
9127
+ _this.inputElement.removeAttribute('aria-activedescendant');
9128
+ }
9129
+ else {
9130
+ attributes(_this.inputElement, { 'aria-activedescendant': _this.selectedElementID });
9131
+ }
9123
9132
  if (_this.isFirstClick) {
9124
9133
  _this.loadTemplate();
9125
9134
  }
@@ -9189,11 +9198,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
9189
9198
  MultiSelect.prototype.getAriaAttributes = function () {
9190
9199
  var ariaAttributes = {
9191
9200
  'aria-disabled': 'false',
9192
- 'aria-owns': this.element.id + '_options',
9193
- 'role': 'listbox',
9194
- 'aria-multiselectable': 'true',
9195
- 'aria-activedescendant': 'null',
9196
- 'aria-haspopup': 'true',
9201
+ 'role': 'combobox',
9197
9202
  'aria-expanded': 'false'
9198
9203
  };
9199
9204
  return ariaAttributes;
@@ -9203,7 +9208,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
9203
9208
  attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
9204
9209
  }
9205
9210
  var disableStatus = (this.inputElement.disabled) ? true : false;
9206
- attributes(this.inputElement, this.getAriaAttributes());
9211
+ if (!this.isPopupOpen()) {
9212
+ attributes(this.inputElement, this.getAriaAttributes());
9213
+ }
9207
9214
  if (disableStatus) {
9208
9215
  attributes(this.inputElement, { 'aria-disabled': 'true' });
9209
9216
  }
@@ -11005,6 +11012,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11005
11012
  this.removeValue(temp, e, null, true);
11006
11013
  }
11007
11014
  }
11015
+ this.selectedElementID = null;
11016
+ this.inputElement.removeAttribute('aria-activedescendant');
11008
11017
  }
11009
11018
  else {
11010
11019
  this.clearAllCallback(e);
@@ -11495,7 +11504,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
11495
11504
  if (this.chipCollectionWrapper) {
11496
11505
  this.removeChipSelection();
11497
11506
  }
11498
- attributes(this.inputElement, { 'aria-activedescendant': element.id });
11507
+ this.selectedElementID = element.id;
11499
11508
  }
11500
11509
  };
11501
11510
  MultiSelect.prototype.updateDelimeter = function (delimChar, e) {
@@ -12523,6 +12532,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12523
12532
  _this.overAllWrapper.classList.remove(iconAnimation);
12524
12533
  _this.popupObj.hide(new Animation(eventArgs.animation));
12525
12534
  attributes(_this.inputElement, { 'aria-expanded': 'false' });
12535
+ _this.inputElement.removeAttribute('aria-owns');
12536
+ _this.inputElement.removeAttribute('aria-activedescendant');
12526
12537
  if (_this.allowFiltering) {
12527
12538
  _this.notify('inputFocus', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'clear' });
12528
12539
  }
@@ -12711,7 +12722,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12711
12722
  this.element.setAttribute('data-val', 'false');
12712
12723
  }
12713
12724
  Input.createSpanElement(this.overAllWrapper, this.createElement);
12714
- Input.calculateWidth(this.inputElement, this.overAllWrapper);
12725
+ Input.calculateWidth(this.inputElement.parentElement.parentElement, this.overAllWrapper);
12715
12726
  if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
12716
12727
  this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
12717
12728
  }
@@ -12851,7 +12862,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
12851
12862
  this.ulElement = null;
12852
12863
  this.mainListCollection = null;
12853
12864
  _super.prototype.destroy.call(this);
12854
- var temp = ['readonly', 'aria-disabled', 'aria-placeholder', 'placeholder'];
12865
+ var temp = ['readonly', 'aria-disabled', 'placeholder'];
12855
12866
  var length = temp.length;
12856
12867
  while (length > 0) {
12857
12868
  this.inputElement.removeAttribute(temp[length - 1]);
@@ -13332,11 +13343,8 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
13332
13343
  prepend([this.parent.filterParent], args.popupElement);
13333
13344
  attributes(this.filterInput, {
13334
13345
  'aria-disabled': 'false',
13335
- 'aria-owns': this.parent.element.id + '_options',
13336
- 'role': 'listbox',
13337
- 'aria-activedescendant': null,
13346
+ 'role': 'combobox',
13338
13347
  'autocomplete': 'off',
13339
- 'autocorrect': 'off',
13340
13348
  'autocapitalize': 'off',
13341
13349
  'spellcheck': 'false'
13342
13350
  });
@@ -13725,7 +13733,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
13725
13733
  removeClass([this.list], [dropDownBaseClasses.content, dropDownBaseClasses.root]);
13726
13734
  this.validationAttribute(this.element, hiddenSelect);
13727
13735
  this.list.setAttribute('role', 'listbox');
13728
- attributes(this.list, { 'role': 'listbox', 'aria-multiselectable': this.selectionSettings.mode === 'Multiple' ? 'true' : 'false' });
13736
+ attributes(this.list, { 'role': 'listbox', 'aria-label': 'listbox', 'aria-multiselectable': this.selectionSettings.mode === 'Multiple' ? 'true' : 'false' });
13729
13737
  this.updateSelectionSettings();
13730
13738
  };
13731
13739
  ListBox.prototype.updateSelectionSettings = function () {
@@ -14121,10 +14129,10 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
14121
14129
  sortedData.splice(destIdx, 0, droppedData);
14122
14130
  liColl.splice(destIdx, 0, fLiColl_1.splice(srcIdx, 1)[0]);
14123
14131
  if (!value) {
14124
- var liCollElem = _this.getItems();
14125
- for (var i = 0; i < liCollElem.length; i++) {
14126
- if (liCollElem[i].getAttribute('data-value') === null && liCollElem[i].classList.contains('e-list-item')) {
14127
- li_1 = liCollElem[i];
14132
+ var liCollElem_1 = _this.getItems();
14133
+ for (var i = 0; i < liCollElem_1.length; i++) {
14134
+ if (liCollElem_1[i].getAttribute('data-value') === null && liCollElem_1[i].classList.contains('e-list-item')) {
14135
+ li_1 = liCollElem_1[i];
14128
14136
  break;
14129
14137
  }
14130
14138
  }
@@ -14174,6 +14182,12 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
14174
14182
  dragArgs = extend(dragArgs, { destination: dragArgs1 });
14175
14183
  }
14176
14184
  this.trigger('drop', dragArgs);
14185
+ var liCollElem = dragArgs.elements;
14186
+ if (liCollElem.length) {
14187
+ for (var i = 0; i < liCollElem.length; i++) {
14188
+ liCollElem[i].classList.remove('e-grabbed');
14189
+ }
14190
+ }
14177
14191
  };
14178
14192
  ListBox.prototype.updateListItems = function (sourceElem, destElem) {
14179
14193
  var i = 0;
@@ -15173,15 +15187,14 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
15173
15187
  };
15174
15188
  ListBox.prototype.getGrabbedItems = function () {
15175
15189
  for (var i = 0; i < this.value.length; i++) {
15176
- if (this.value[i] === this.dragValue) {
15177
- var liColl = this.list.querySelectorAll('[aria-selected="true"]');
15178
- for (var i_1 = 0; i_1 < liColl.length; i_1++) {
15179
- liColl[i_1].classList.add('e-grabbed');
15190
+ var liColl = this.list.querySelectorAll('[aria-selected="true"]');
15191
+ for (var j = 0; j < liColl.length; j++) {
15192
+ if (this.value[i] === liColl[j].textContent) {
15193
+ liColl[j].classList.add('e-grabbed');
15180
15194
  }
15181
- break;
15182
15195
  }
15183
15196
  }
15184
- var elems = Array.prototype.slice.call(this.element.querySelectorAll('.e-grabbed'));
15197
+ var elems = Array.prototype.slice.call(this.element.nextElementSibling.querySelectorAll('.e-grabbed'));
15185
15198
  return elems;
15186
15199
  };
15187
15200
  ListBox.prototype.getDragArgs = function (args, isDragEnd) {
@@ -15868,6 +15881,1372 @@ var listBoxClasses = {
15868
15881
  clearIcon: 'e-clear-icon'
15869
15882
  };
15870
15883
 
15884
+ /**
15885
+ * export all modules from current location
15886
+ */
15887
+
15888
+ var __extends$7 = (undefined && undefined.__extends) || (function () {
15889
+ var extendStatics = function (d, b) {
15890
+ extendStatics = Object.setPrototypeOf ||
15891
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
15892
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
15893
+ return extendStatics(d, b);
15894
+ };
15895
+ return function (d, b) {
15896
+ extendStatics(d, b);
15897
+ function __() { this.constructor = d; }
15898
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
15899
+ };
15900
+ })();
15901
+ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
15902
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
15903
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
15904
+ 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;
15905
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
15906
+ };
15907
+ /**
15908
+ * The Mention component is used to list someone or something based on user input in textarea, input,
15909
+ * or any other editable element from which the user can select.
15910
+ */
15911
+ var Mention = /** @__PURE__ @class */ (function (_super) {
15912
+ __extends$7(Mention, _super);
15913
+ /**
15914
+ * * Constructor for creating the widget
15915
+ *
15916
+ * @param {MentionModel} options - Specifies the MentionComponent model.
15917
+ * @param {string | HTMLElement} element - Specifies the element to render as component.
15918
+ * @private
15919
+ */
15920
+ function Mention(options, element) {
15921
+ return _super.call(this, options, element) || this;
15922
+ }
15923
+ /**
15924
+ * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.
15925
+ *
15926
+ * @param {MentionModel} newProp - Returns the dynamic property value of the component.
15927
+ * @param {MentionModel} oldProp - Returns the previous property value of the component.
15928
+ * @private
15929
+ * @returns {void}
15930
+ */
15931
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
15932
+ Mention.prototype.onPropertyChanged = function (newProp, oldProp) {
15933
+ for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
15934
+ var prop = _a[_i];
15935
+ switch (prop) {
15936
+ case 'minLength':
15937
+ this.minLength = newProp.minLength;
15938
+ break;
15939
+ case 'suffixText':
15940
+ this.suffixText = newProp.suffixText;
15941
+ break;
15942
+ case 'allowSpaces':
15943
+ this.allowSpaces = newProp.allowSpaces;
15944
+ break;
15945
+ case 'mentionChar':
15946
+ this.mentionChar = newProp.mentionChar;
15947
+ break;
15948
+ case 'showMentionChar':
15949
+ this.showMentionChar = newProp.showMentionChar;
15950
+ break;
15951
+ case 'cssClass':
15952
+ this.updateCssClass(newProp.cssClass, oldProp.cssClass);
15953
+ break;
15954
+ }
15955
+ }
15956
+ };
15957
+ Mention.prototype.updateCssClass = function (newClass, oldClass) {
15958
+ if (!isNullOrUndefined(oldClass)) {
15959
+ oldClass = (oldClass.replace(/\s+/g, ' ')).trim();
15960
+ }
15961
+ if (!isNullOrUndefined(newClass)) {
15962
+ newClass = (newClass.replace(/\s+/g, ' ')).trim();
15963
+ }
15964
+ this.setCssClass(newClass, [this.inputElement], oldClass);
15965
+ if (this.popupObj) {
15966
+ this.setCssClass(newClass, [this.popupObj.element], oldClass);
15967
+ }
15968
+ };
15969
+ Mention.prototype.setCssClass = function (cssClass$$1, elements, oldClass) {
15970
+ if (!isNullOrUndefined(oldClass) && oldClass !== '') {
15971
+ removeClass(elements, oldClass.split(' '));
15972
+ }
15973
+ if (!isNullOrUndefined(cssClass$$1) && cssClass$$1 !== '') {
15974
+ addClass(elements, cssClass$$1.split(' '));
15975
+ }
15976
+ };
15977
+ Mention.prototype.initializeData = function () {
15978
+ this.isSelected = false;
15979
+ this.isFiltered = false;
15980
+ this.beforePopupOpen = false;
15981
+ this.initRemoteRender = false;
15982
+ this.isPopupOpen = false;
15983
+ this.isCollided = false;
15984
+ this.lineBreak = false;
15985
+ this.keyConfigure = {
15986
+ tab: 'tab',
15987
+ enter: '13',
15988
+ escape: '27',
15989
+ end: '35',
15990
+ home: '36',
15991
+ down: '40',
15992
+ up: '38',
15993
+ pageUp: '33',
15994
+ pageDown: '34',
15995
+ open: 'alt+40',
15996
+ close: 'shift+tab',
15997
+ hide: 'alt+38',
15998
+ space: '32'
15999
+ };
16000
+ };
16001
+ /**
16002
+ * Execute before render the list items
16003
+ *
16004
+ * @private
16005
+ * @returns {void}
16006
+ */
16007
+ Mention.prototype.preRender = function () {
16008
+ this.initializeData();
16009
+ _super.prototype.preRender.call(this);
16010
+ };
16011
+ /**
16012
+ * To Initialize the control rendering
16013
+ *
16014
+ * @private
16015
+ * @returns {void}
16016
+ */
16017
+ Mention.prototype.render = function () {
16018
+ this.inputElement = !isNullOrUndefined(this.target) ? ((typeof this.target) === 'string') ?
16019
+ document.querySelector(this.target) : this.target : this.element;
16020
+ if (this.isContentEditable(this.inputElement)) {
16021
+ this.inputElement.setAttribute('contenteditable', 'true');
16022
+ addClass([this.inputElement], ['e-mention']);
16023
+ if (isNullOrUndefined(this.target)) {
16024
+ addClass([this.inputElement], ['e-editable-element']);
16025
+ }
16026
+ }
16027
+ this.queryString = this.elementValue();
16028
+ this.wireEvent();
16029
+ };
16030
+ Mention.prototype.wireEvent = function () {
16031
+ EventHandler.add(this.inputElement, 'keyup', this.onKeyUp, this);
16032
+ this.bindCommonEvent();
16033
+ };
16034
+ Mention.prototype.unWireEvent = function () {
16035
+ EventHandler.remove(this.inputElement, 'keyup', this.onKeyUp);
16036
+ this.unBindCommonEvent();
16037
+ };
16038
+ Mention.prototype.bindCommonEvent = function () {
16039
+ if (!Browser.isDevice) {
16040
+ this.keyboardModule = new KeyboardEvents(this.inputElement, {
16041
+ keyAction: this.keyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'
16042
+ });
16043
+ }
16044
+ };
16045
+ /**
16046
+ * Hides the spinner loader.
16047
+ *
16048
+ * @returns {void}
16049
+ */
16050
+ Mention.prototype.hideSpinner = function () {
16051
+ this.hideWaitingSpinner();
16052
+ };
16053
+ Mention.prototype.hideWaitingSpinner = function () {
16054
+ if (!isNullOrUndefined(this.spinnerElement)) {
16055
+ hideSpinner(this.spinnerElement);
16056
+ }
16057
+ if (!isNullOrUndefined(this.spinnerTemplate)) {
16058
+ detach(this.spinnerTemplateElement);
16059
+ }
16060
+ };
16061
+ /**
16062
+ * Shows the spinner loader.
16063
+ *
16064
+ * @returns {void}
16065
+ */
16066
+ Mention.prototype.showWaitingSpinner = function () {
16067
+ if (!isNullOrUndefined(this.popupObj)) {
16068
+ if (isNullOrUndefined(this.spinnerTemplate) && isNullOrUndefined(this.spinnerElement)) {
16069
+ this.spinnerElement = this.popupObj.element;
16070
+ createSpinner({
16071
+ target: this.spinnerElement,
16072
+ width: Browser.isDevice ? '16px' : '14px'
16073
+ }, this.createElement);
16074
+ showSpinner(this.spinnerElement);
16075
+ }
16076
+ if (!isNullOrUndefined(this.spinnerTemplate)) {
16077
+ this.setSpinnerTemplate();
16078
+ this.popupObj.element.appendChild(this.spinnerTemplateElement);
16079
+ }
16080
+ }
16081
+ };
16082
+ Mention.prototype.keyActionHandler = function (e) {
16083
+ var isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'
16084
+ || e.action === 'home' || e.action === 'end');
16085
+ var isTabAction = e.action === 'tab' || e.action === 'close';
16086
+ if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {
16087
+ this.renderList();
16088
+ }
16089
+ if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
16090
+ isNavigation && this.liCollections.length === 0) || this.isRequested) {
16091
+ return;
16092
+ }
16093
+ if (e.action === 'escape') {
16094
+ e.preventDefault();
16095
+ }
16096
+ this.isSelected = e.action === 'escape' ? false : this.isSelected;
16097
+ switch (e.action) {
16098
+ case 'down':
16099
+ case 'up':
16100
+ this.updateUpDownAction(e);
16101
+ break;
16102
+ case 'tab':
16103
+ if (this.isPopupOpen) {
16104
+ var li = this.list.querySelector('.' + dropDownBaseClasses.selected);
16105
+ if (li) {
16106
+ this.setSelection(li, e);
16107
+ }
16108
+ if (this.isPopupOpen) {
16109
+ this.hidePopup(e);
16110
+ }
16111
+ }
16112
+ break;
16113
+ case 'enter':
16114
+ if (this.isPopupOpen) {
16115
+ e.preventDefault();
16116
+ if (this.popupObj && this.popupObj.element.contains(this.selectedLI)) {
16117
+ this.setValue(e);
16118
+ }
16119
+ }
16120
+ break;
16121
+ case 'escape':
16122
+ if (this.isPopupOpen) {
16123
+ this.hidePopup(e);
16124
+ }
16125
+ break;
16126
+ }
16127
+ };
16128
+ Mention.prototype.updateUpDownAction = function (e) {
16129
+ var focusEle = this.list.querySelector('.' + dropDownBaseClasses.focus);
16130
+ if (this.isSelectFocusItem(focusEle)) {
16131
+ this.setSelection(focusEle, e);
16132
+ }
16133
+ else if (!isNullOrUndefined(this.liCollections)) {
16134
+ var li = this.list.querySelector('.' + dropDownBaseClasses.selected);
16135
+ if (!isNullOrUndefined(li)) {
16136
+ var value = this.getFormattedValue(li.getAttribute('data-value'));
16137
+ this.activeIndex = this.getIndexByValue(value);
16138
+ }
16139
+ var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;
16140
+ var startIndex = 0;
16141
+ startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;
16142
+ index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;
16143
+ var nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];
16144
+ if (!isNullOrUndefined(nextItem)) {
16145
+ this.setSelection(nextItem, e);
16146
+ }
16147
+ }
16148
+ if (this.isPopupOpen) {
16149
+ e.preventDefault();
16150
+ }
16151
+ };
16152
+ Mention.prototype.isSelectFocusItem = function (element) {
16153
+ return !isNullOrUndefined(element);
16154
+ };
16155
+ Mention.prototype.unBindCommonEvent = function () {
16156
+ if (!Browser.isDevice) {
16157
+ this.keyboardModule.destroy();
16158
+ }
16159
+ };
16160
+ Mention.prototype.onKeyUp = function (e) {
16161
+ var rangetextContent;
16162
+ if (this.isContentEditable(this.inputElement)) {
16163
+ this.range = this.getCurrentRange();
16164
+ rangetextContent = this.range.startContainer.textContent.split('');
16165
+ }
16166
+ var currentRange = this.getTextRange();
16167
+ var lastWordRange = this.getLastLetter(currentRange);
16168
+ var Regex = new RegExp(this.mentionChar, 'g');
16169
+ var charRegex = new RegExp('[a-zA-Z]', 'g');
16170
+ if (e.key === 'Shift' || e.keyCode === 37 || e.keyCode === 39) {
16171
+ return;
16172
+ }
16173
+ if ((!currentRange || !lastWordRange) || e.code === 'Enter' || e.keyCode === 27 ||
16174
+ (lastWordRange.match(Regex) && lastWordRange.match(Regex).length > 1) ||
16175
+ (this.isContentEditable(this.inputElement) && this.range.startContainer &&
16176
+ this.range.startContainer.previousElementSibling && this.range.startContainer.textContent.split('').length > 0 &&
16177
+ (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
16178
+ this.range.startContainer.nodeType === 1))) {
16179
+ if (this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
16180
+ && !this.isMatchedText() && (currentRange.length > 1 && currentRange.replace(/\u00A0/g, ' ').charAt(currentRange.length - 2) !== ' ') &&
16181
+ (this.list && this.list.querySelectorAll('ul').length > 0)) {
16182
+ this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
16183
+ this.searchLists(e);
16184
+ }
16185
+ else if (this.isPopupOpen && (!this.allowSpaces || !lastWordRange)) {
16186
+ this.hidePopup();
16187
+ this.lineBreak = true;
16188
+ }
16189
+ return;
16190
+ }
16191
+ this.queryString = lastWordRange.replace(this.mentionChar, '');
16192
+ if (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) &&
16193
+ this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && !this.lineBreak) {
16194
+ this.searchLists(e);
16195
+ if (!this.isPopupOpen && this.queryString.length >= this.minLength) {
16196
+ if (!this.isContentEditable(this.inputElement)) {
16197
+ this.showPopup();
16198
+ }
16199
+ else if (this.isContentEditable(this.inputElement) && this.range && this.range.startContainer !== this.inputElement) {
16200
+ this.showPopup();
16201
+ }
16202
+ }
16203
+ }
16204
+ else if (lastWordRange.indexOf(this.mentionChar) === 0 && !this.isPopupOpen && e.keyCode !== 8 && (!this.popupObj ||
16205
+ (isNullOrUndefined(this.target) && !document.body.contains(this.popupObj.element) ||
16206
+ !isNullOrUndefined(this.target) && document.body.contains(this.popupObj.element)))) {
16207
+ if (this.initRemoteRender && this.list && this.list.classList.contains('e-nodata')) {
16208
+ this.searchLists(e);
16209
+ }
16210
+ this.resetList(this.dataSource, this.fields);
16211
+ if (isNullOrUndefined(this.list)) {
16212
+ this.initValue();
16213
+ }
16214
+ if (!this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40) {
16215
+ this.showPopup();
16216
+ if (this.initRemoteRender && this.list.querySelectorAll('li').length === 0) {
16217
+ this.showWaitingSpinner();
16218
+ }
16219
+ this.lineBreak = false;
16220
+ }
16221
+ }
16222
+ else if (this.allowSpaces && this.queryString !== '' && currentRange && currentRange.trim() !== '' && currentRange.replace('\u00a0', ' ').lastIndexOf(' ') < currentRange.length - 1 &&
16223
+ e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 8) {
16224
+ this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
16225
+ this.searchLists(e);
16226
+ }
16227
+ else if (this.queryString === '' && this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40) {
16228
+ this.resetList(this.dataSource, this.fields);
16229
+ }
16230
+ };
16231
+ Mention.prototype.isMatchedText = function () {
16232
+ var isMatched = false;
16233
+ for (var i = 0; i < (this.liCollections && this.liCollections.length); i++) {
16234
+ if (this.getTextRange() &&
16235
+ this.getTextRange().substring(this.getTextRange().lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ').trim() === this.liCollections[i].getAttribute('data-value').toLowerCase()) {
16236
+ isMatched = true;
16237
+ }
16238
+ }
16239
+ return isMatched;
16240
+ };
16241
+ Mention.prototype.getCurrentRange = function () {
16242
+ this.range = this.inputElement.ownerDocument.getSelection().getRangeAt(0);
16243
+ return this.range;
16244
+ };
16245
+ Mention.prototype.searchLists = function (e) {
16246
+ var _this = this;
16247
+ this.isDataFetched = false;
16248
+ if (isNullOrUndefined(this.list)) {
16249
+ _super.prototype.render.call(this);
16250
+ this.unWireListEvents();
16251
+ this.wireListEvents();
16252
+ }
16253
+ if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {
16254
+ this.queryString = this.queryString === '' ? null : this.queryString;
16255
+ this.beforePopupOpen = true;
16256
+ this.resetList(this.dataSource, this.fields);
16257
+ return;
16258
+ }
16259
+ this.isSelected = false;
16260
+ this.activeIndex = null;
16261
+ var eventArgs = {
16262
+ preventDefaultAction: false,
16263
+ text: this.elementValue(),
16264
+ updateData: function (dataSource, query, fields) {
16265
+ if (eventArgs.cancel) {
16266
+ return;
16267
+ }
16268
+ _this.isFiltered = true;
16269
+ _this.filterAction(dataSource, query, fields);
16270
+ },
16271
+ cancel: false
16272
+ };
16273
+ this.trigger('filtering', eventArgs, function (eventArgs) {
16274
+ if (!eventArgs.cancel && !_this.isFiltered && !eventArgs.preventDefaultAction) {
16275
+ _this.filterAction(_this.dataSource, null, _this.fields);
16276
+ }
16277
+ });
16278
+ };
16279
+ Mention.prototype.filterAction = function (dataSource, query, fields) {
16280
+ this.beforePopupOpen = true;
16281
+ if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {
16282
+ this.resetList(dataSource, fields, query);
16283
+ }
16284
+ else {
16285
+ if (this.isPopupOpen) {
16286
+ this.hidePopup();
16287
+ }
16288
+ this.beforePopupOpen = false;
16289
+ }
16290
+ this.setDataIndex();
16291
+ this.renderReactTemplates();
16292
+ };
16293
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
16294
+ Mention.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
16295
+ _super.prototype.onActionComplete.call(this, ulElement, list, e);
16296
+ if (this.isActive) {
16297
+ var focusItem = ulElement.querySelector('.' + dropDownBaseClasses.li);
16298
+ if (focusItem) {
16299
+ focusItem.classList.add(dropDownBaseClasses.selected);
16300
+ this.selectedLI = focusItem;
16301
+ var value = this.getFormattedValue(focusItem.getAttribute('data-value'));
16302
+ this.selectEventCallback(focusItem, this.getDataByValue(value), value, true);
16303
+ }
16304
+ }
16305
+ };
16306
+ Mention.prototype.setDataIndex = function () {
16307
+ for (var i = 0; this.liCollections && i < this.liCollections.length; i++) {
16308
+ this.liCollections[i].setAttribute('data-index', i.toString());
16309
+ }
16310
+ };
16311
+ Mention.prototype.listOption = function (dataSource, fieldsSettings) {
16312
+ var _this = this;
16313
+ var fields = _super.prototype.listOption.call(this, dataSource, fieldsSettings);
16314
+ if (isNullOrUndefined(fields.itemCreated)) {
16315
+ fields.itemCreated = function (e) {
16316
+ if (_this.highlight) {
16317
+ if (_this.inputElement.tagName === _this.getNgDirective() && _this.itemTemplate) {
16318
+ setTimeout(function () {
16319
+ highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);
16320
+ }, 0);
16321
+ }
16322
+ else {
16323
+ highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);
16324
+ }
16325
+ }
16326
+ };
16327
+ }
16328
+ else {
16329
+ var itemCreated_1 = fields.itemCreated;
16330
+ fields.itemCreated = function (e) {
16331
+ if (_this.highlight) {
16332
+ highlightSearch(e.item, _this.queryString, _this.ignoreCase, _this.filterType);
16333
+ }
16334
+ itemCreated_1.apply(_this, [e]);
16335
+ };
16336
+ }
16337
+ return fields;
16338
+ };
16339
+ Mention.prototype.elementValue = function () {
16340
+ if (!this.isContentEditable(this.inputElement)) {
16341
+ return this.inputElement.value.replace(this.mentionChar, '');
16342
+ }
16343
+ else {
16344
+ return this.inputElement.textContent.replace(this.mentionChar, '');
16345
+ }
16346
+ };
16347
+ Mention.prototype.getQuery = function (query) {
16348
+ var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
16349
+ var filterType = (this.queryString === '' && !isNullOrUndefined(this.elementValue())) ? 'equal' : this.filterType;
16350
+ var queryString = (this.queryString === '' && !isNullOrUndefined(this.elementValue())) ?
16351
+ this.elementValue() : this.queryString;
16352
+ if (this.isFiltered) {
16353
+ return filterQuery;
16354
+ }
16355
+ if (this.queryString !== null && this.queryString !== '') {
16356
+ var dataType = this.typeOfData(this.dataSource).typeof;
16357
+ if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
16358
+ filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);
16359
+ }
16360
+ else {
16361
+ var mapping = !isNullOrUndefined(this.fields.text) ? this.fields.text : '';
16362
+ filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);
16363
+ }
16364
+ }
16365
+ if (!isNullOrUndefined(this.suggestionCount)) {
16366
+ // Since defualt value of suggestioncount is 25, checked the condition
16367
+ if (this.suggestionCount !== 25) {
16368
+ for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
16369
+ if (filterQuery.queries[queryElements].fn === 'onTake') {
16370
+ filterQuery.queries.splice(queryElements, 1);
16371
+ }
16372
+ }
16373
+ }
16374
+ filterQuery.take(this.suggestionCount);
16375
+ }
16376
+ return filterQuery;
16377
+ };
16378
+ Mention.prototype.renderHightSearch = function () {
16379
+ if (this.highlight) {
16380
+ for (var i = 0; i < this.liCollections.length; i++) {
16381
+ var isHighlight = this.ulElement.querySelector('.e-active');
16382
+ if (!isHighlight) {
16383
+ revertHighlightSearch(this.liCollections[i]);
16384
+ highlightSearch(this.liCollections[i], this.queryString, this.ignoreCase, this.filterType);
16385
+ }
16386
+ }
16387
+ }
16388
+ };
16389
+ Mention.prototype.getTextRange = function () {
16390
+ var text;
16391
+ if (!this.isContentEditable(this.inputElement)) {
16392
+ var component = this.inputElement;
16393
+ if (!isNullOrUndefined(component)) {
16394
+ var startPos = component.selectionStart;
16395
+ if (component.value && startPos >= 0) {
16396
+ text = component.value.substring(0, startPos);
16397
+ }
16398
+ }
16399
+ }
16400
+ else {
16401
+ var selectedElem = this.range.startContainer;
16402
+ if (!isNullOrUndefined(selectedElem)) {
16403
+ var workingNodeContent = selectedElem.textContent;
16404
+ var selectStartOffset = this.range.startOffset;
16405
+ if (workingNodeContent && selectStartOffset >= 0) {
16406
+ text = workingNodeContent.substring(0, selectStartOffset);
16407
+ }
16408
+ }
16409
+ }
16410
+ return text;
16411
+ };
16412
+ Mention.prototype.getLastLetter = function (text) {
16413
+ if (isNullOrUndefined(text)) {
16414
+ return '';
16415
+ }
16416
+ var textValue = text.replace(/\u00A0/g, ' ');
16417
+ var words = textValue.split(/\s+/);
16418
+ var wordCnt = words.length - 1;
16419
+ return words[wordCnt].trim();
16420
+ };
16421
+ Mention.prototype.isContentEditable = function (element) {
16422
+ return element && element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA';
16423
+ };
16424
+ /**
16425
+ * Opens the popup that displays the list of items.
16426
+ *
16427
+ * @returns {void}
16428
+ */
16429
+ Mention.prototype.showPopup = function () {
16430
+ this.renderPopup();
16431
+ };
16432
+ /* eslint-disable valid-jsdoc, jsdoc/require-param */
16433
+ /**
16434
+ * Hides the popup if it is in an open state.
16435
+ *
16436
+ * @returns {void}
16437
+ */
16438
+ Mention.prototype.hidePopup = function (e) {
16439
+ this.removeSelection();
16440
+ this.closePopup(0, e);
16441
+ };
16442
+ Mention.prototype.closePopup = function (delay, e) {
16443
+ var _this = this;
16444
+ if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {
16445
+ return;
16446
+ }
16447
+ EventHandler.remove(document, 'mousedown', this.onDocumentClick);
16448
+ this.beforePopupOpen = false;
16449
+ var animModel = {
16450
+ name: 'FadeOut',
16451
+ duration: 100,
16452
+ delay: delay ? delay : 0
16453
+ };
16454
+ var popupInstance = this.popupObj;
16455
+ var eventArgs = { popup: popupInstance, cancel: false, animation: animModel, event: e || null };
16456
+ this.trigger('closed', eventArgs, function (eventArgs) {
16457
+ if (!eventArgs.cancel && _this.popupObj) {
16458
+ if (_this.isPopupOpen) {
16459
+ _this.popupObj.hide(new Animation(eventArgs.animation));
16460
+ }
16461
+ else {
16462
+ _this.destroyPopup();
16463
+ }
16464
+ }
16465
+ });
16466
+ };
16467
+ Mention.prototype.renderPopup = function () {
16468
+ var _this = this;
16469
+ var args = { cancel: false };
16470
+ this.trigger('beforeOpen', args, function (args) {
16471
+ if (!args.cancel) {
16472
+ var popupEle_1 = isNullOrUndefined(_this.target) ? _this.createElement('div', {
16473
+ id: _this.inputElement.id + '_popup', className: 'e-mention e-popup ' + (_this.cssClass != null ? _this.cssClass : '')
16474
+ }) : _this.element;
16475
+ if (!isNullOrUndefined(_this.target)) {
16476
+ popupEle_1.id = _this.inputElement.id + '_popup';
16477
+ addClass([popupEle_1], ['e-mention', 'e-popup', 'e-popup-close']);
16478
+ }
16479
+ _this.listHeight = formatUnit(_this.popupHeight);
16480
+ if (!isNullOrUndefined(_this.list.querySelector('li')) && !_this.initRemoteRender) {
16481
+ var li = _this.list.querySelector('.' + dropDownBaseClasses.focus);
16482
+ if (!isNullOrUndefined(li)) {
16483
+ _this.selectedLI = li;
16484
+ var value = _this.getFormattedValue(li.getAttribute('data-value'));
16485
+ _this.selectEventCallback(li, _this.getDataByValue(value), value, true);
16486
+ }
16487
+ }
16488
+ append([_this.list], popupEle_1);
16489
+ if ((!_this.popupObj || !document.body.contains(_this.popupObj.element)) || !document.contains(popupEle_1) && isNullOrUndefined(_this.target)) {
16490
+ document.body.appendChild(popupEle_1);
16491
+ }
16492
+ var coordinates_1;
16493
+ popupEle_1.style.visibility = 'hidden';
16494
+ if (_this.popupHeight !== 'auto') {
16495
+ _this.list.style.maxHeight = (parseInt(_this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
16496
+ popupEle_1.style.maxHeight = formatUnit(_this.popupHeight);
16497
+ }
16498
+ else {
16499
+ popupEle_1.style.height = 'auto';
16500
+ }
16501
+ var offsetValue = 0;
16502
+ var left = 0;
16503
+ _this.initializePopup(popupEle_1, offsetValue, left);
16504
+ _this.checkCollision(popupEle_1);
16505
+ popupEle_1.style.visibility = 'visible';
16506
+ if (!isNullOrUndefined(_this.list)) {
16507
+ _this.unWireListEvents();
16508
+ _this.wireListEvents();
16509
+ }
16510
+ var animModel = { name: 'FadeIn', duration: 100 };
16511
+ _this.beforePopupOpen = true;
16512
+ var popupInstance = _this.popupObj;
16513
+ var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };
16514
+ _this.trigger('opened', eventArgs, function (eventArgs) {
16515
+ if (!eventArgs.cancel) {
16516
+ _this.renderReactTemplates();
16517
+ _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.inputElement : null);
16518
+ coordinates_1 = _this.getCoordinates(_this.inputElement, _this.getTriggerCharPosition());
16519
+ if (!_this.isCollided) {
16520
+ popupEle_1.style.cssText = 'top: '.concat(coordinates_1.top.toString(), 'px;\n left: ').concat(coordinates_1.left.toString(), 'px;\nposition: absolute;\n display: block;');
16521
+ }
16522
+ else {
16523
+ popupEle_1.style.left = formatUnit(coordinates_1.left);
16524
+ _this.isCollided = false;
16525
+ }
16526
+ popupEle_1.style.width = _this.popupWidth !== '100%' && !isNullOrUndefined(_this.popupWidth) ? formatUnit(_this.popupWidth) : 'auto';
16527
+ }
16528
+ else {
16529
+ _this.beforePopupOpen = false;
16530
+ _this.destroyPopup();
16531
+ }
16532
+ });
16533
+ }
16534
+ else {
16535
+ _this.beforePopupOpen = false;
16536
+ }
16537
+ });
16538
+ };
16539
+ Mention.prototype.checkCollision = function (popupEle) {
16540
+ if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'mention'))) {
16541
+ var collision = isCollide(popupEle);
16542
+ if (collision.length > 0) {
16543
+ popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';
16544
+ this.isCollided = true;
16545
+ }
16546
+ this.popupObj.resolveCollision();
16547
+ }
16548
+ };
16549
+ Mention.prototype.getTriggerCharPosition = function () {
16550
+ var mostRecentTriggerCharPos;
16551
+ var currentRange = this.getTextRange();
16552
+ if (currentRange !== undefined && currentRange !== null) {
16553
+ mostRecentTriggerCharPos = 0;
16554
+ var idx = currentRange.lastIndexOf(this.mentionChar);
16555
+ if (idx >= mostRecentTriggerCharPos) {
16556
+ mostRecentTriggerCharPos = idx;
16557
+ }
16558
+ }
16559
+ return mostRecentTriggerCharPos;
16560
+ };
16561
+ Mention.prototype.initializePopup = function (element, offsetValue, left) {
16562
+ var _this = this;
16563
+ this.popupObj = new Popup(element, {
16564
+ width: this.setWidth(), targetType: 'relative',
16565
+ relateTo: this.inputElement, collision: { X: 'flip', Y: 'flip' }, offsetY: offsetValue,
16566
+ enableRtl: this.enableRtl, offsetX: left, position: { X: 'top', Y: 'left' }, actionOnScroll: 'hide',
16567
+ zIndex: this.zIndex,
16568
+ close: function () {
16569
+ _this.destroyPopup();
16570
+ },
16571
+ open: function () {
16572
+ EventHandler.add(document, 'mousedown', _this.onDocumentClick, _this);
16573
+ _this.isPopupOpen = true;
16574
+ _this.setDataIndex();
16575
+ }
16576
+ });
16577
+ };
16578
+ Mention.prototype.setWidth = function () {
16579
+ var width = formatUnit(this.popupWidth);
16580
+ if (width.indexOf('%') > -1) {
16581
+ var inputWidth = this.inputElement.offsetWidth * parseFloat(width) / 100;
16582
+ width = inputWidth.toString() + 'px';
16583
+ }
16584
+ return width;
16585
+ };
16586
+ Mention.prototype.destroyPopup = function () {
16587
+ this.isPopupOpen = false;
16588
+ this.popupObj.destroy();
16589
+ if (isNullOrUndefined(this.target)) {
16590
+ detach(this.popupObj.element);
16591
+ }
16592
+ else {
16593
+ this.popupObj.element.innerHTML = '';
16594
+ this.popupObj.element.removeAttribute('style');
16595
+ this.popupObj.element.removeAttribute('aria-disabled');
16596
+ }
16597
+ };
16598
+ Mention.prototype.onDocumentClick = function (e) {
16599
+ var target = e.target;
16600
+ if (!(!isNullOrUndefined(this.popupObj) && closest(target, '#' + this.popupObj.element.id))) {
16601
+ this.hidePopup(e);
16602
+ }
16603
+ };
16604
+ Mention.prototype.getCoordinates = function (element, position) {
16605
+ var properties = ['direction', 'boxSizing', 'width', 'height', 'overflowX', 'overflowY', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize', 'fontSizeAdjust', 'lineHeight', 'fontFamily', 'textAlign', 'textTransform', 'textIndent', 'textDecoration', 'letterSpacing', 'wordSpacing'];
16606
+ var div;
16607
+ var span;
16608
+ var range;
16609
+ var globalRange;
16610
+ var coordinates;
16611
+ var computed;
16612
+ var rect;
16613
+ if (!this.isContentEditable(this.inputElement)) {
16614
+ div = this.createElement('div', { className: 'e-form-mirror-div' });
16615
+ document.body.appendChild(div);
16616
+ computed = getComputedStyle(element);
16617
+ div.style.position = 'absolute';
16618
+ div.style.visibility = 'hidden';
16619
+ properties.forEach(function (prop) {
16620
+ div.style[prop] = computed[prop];
16621
+ });
16622
+ div.textContent = element.value.substring(0, position);
16623
+ if (this.inputElement.nodeName === 'INPUT') {
16624
+ div.textContent = div.textContent.replace(/\s/g, '\u00a0');
16625
+ }
16626
+ span = this.createElement('span');
16627
+ span.textContent = element.value.substring(position) || '.';
16628
+ div.appendChild(span);
16629
+ rect = element.getBoundingClientRect();
16630
+ }
16631
+ else {
16632
+ var selectedNodePosition = this.getTriggerCharPosition();
16633
+ globalRange = this.range;
16634
+ range = document.createRange();
16635
+ range.setStart(globalRange.startContainer, selectedNodePosition);
16636
+ range.setEnd(globalRange.startContainer, selectedNodePosition);
16637
+ range.collapse(false);
16638
+ rect = range.getBoundingClientRect();
16639
+ }
16640
+ var doc = document.documentElement;
16641
+ var windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
16642
+ var windowTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
16643
+ if (!this.isContentEditable(this.inputElement)) {
16644
+ coordinates = {
16645
+ top: rect.top + windowTop + span.offsetTop + parseInt(computed.borderTopWidth, 10) +
16646
+ parseInt(computed.fontSize, 10) + 3 - element.scrollTop,
16647
+ left: rect.left + windowLeft + span.offsetLeft + parseInt(computed.borderLeftWidth, 10)
16648
+ };
16649
+ document.body.removeChild(div);
16650
+ }
16651
+ else {
16652
+ coordinates = {
16653
+ top: rect.top + windowTop + parseInt(getComputedStyle(this.inputElement).fontSize),
16654
+ left: rect.left + windowLeft
16655
+ };
16656
+ }
16657
+ return coordinates;
16658
+ };
16659
+
16660
+ Mention.prototype.initValue = function () {
16661
+ this.renderList();
16662
+ if (this.dataSource instanceof DataManager) {
16663
+ this.initRemoteRender = true;
16664
+ }
16665
+ else {
16666
+ this.updateValues();
16667
+ }
16668
+ };
16669
+ Mention.prototype.updateValues = function () {
16670
+ var li = this.list.querySelector('.' + dropDownBaseClasses.focus);
16671
+ if (!isNullOrUndefined(li)) {
16672
+ this.setSelection(li, null);
16673
+ }
16674
+ };
16675
+ Mention.prototype.renderList = function () {
16676
+ _super.prototype.render.call(this);
16677
+ this.unWireListEvents();
16678
+ this.wireListEvents();
16679
+ };
16680
+ /**
16681
+ * Event binding for list
16682
+ *
16683
+ * @returns {void}
16684
+ */
16685
+ Mention.prototype.wireListEvents = function () {
16686
+ EventHandler.add(this.list, 'click', this.onMouseClick, this);
16687
+ EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
16688
+ EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
16689
+ };
16690
+ /**
16691
+ * Event un binding for list items.
16692
+ *
16693
+ * @returns {void}
16694
+ */
16695
+ Mention.prototype.unWireListEvents = function () {
16696
+ EventHandler.remove(this.list, 'click', this.onMouseClick);
16697
+ EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
16698
+ EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
16699
+ };
16700
+ Mention.prototype.onMouseClick = function (e) {
16701
+ var target = e.target;
16702
+ var li = closest(target, '.' + dropDownBaseClasses.li);
16703
+ if (!this.isValidLI(li)) {
16704
+ return;
16705
+ }
16706
+ this.setSelection(li, e);
16707
+ var delay = 100;
16708
+ this.closePopup(delay, e);
16709
+ this.inputElement.focus();
16710
+ };
16711
+ Mention.prototype.updateSelectedItem = function (li, e, preventSelect, isSelection) {
16712
+ var _this = this;
16713
+ this.removeSelection();
16714
+ li.classList.add(dropDownBaseClasses.selected);
16715
+ this.removeHover();
16716
+ var value = this.getFormattedValue(li.getAttribute('data-value'));
16717
+ var selectedData = this.getDataByValue(value);
16718
+ if (!preventSelect && !isNullOrUndefined(e)) {
16719
+ var items = this.detachChanges(selectedData);
16720
+ this.isSelected = true;
16721
+ var eventArgs = {
16722
+ e: e,
16723
+ item: li,
16724
+ itemData: items,
16725
+ isInteracted: e ? true : false,
16726
+ cancel: false
16727
+ };
16728
+ this.trigger('select', eventArgs, function (eventArgs) {
16729
+ if (eventArgs.cancel) {
16730
+ li.classList.remove(dropDownBaseClasses.selected);
16731
+ }
16732
+ else {
16733
+ _this.selectEventCallback(li, selectedData, value);
16734
+ if (isSelection) {
16735
+ _this.setSelectOptions(li, e);
16736
+ }
16737
+ }
16738
+ });
16739
+ }
16740
+ else {
16741
+ this.selectEventCallback(li, selectedData, value);
16742
+ if (isSelection) {
16743
+ this.setSelectOptions(li, e);
16744
+ }
16745
+ }
16746
+ };
16747
+ Mention.prototype.setSelection = function (li, e) {
16748
+ if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected
16749
+ && li.classList.contains(dropDownBaseClasses.selected)))) {
16750
+ this.updateSelectedItem(li, e, false, true);
16751
+ }
16752
+ else {
16753
+ this.setSelectOptions(li, e);
16754
+ }
16755
+ };
16756
+ Mention.prototype.setSelectOptions = function (li, e) {
16757
+ if (this.list) {
16758
+ this.removeHover();
16759
+ }
16760
+ this.previousSelectedLI = (!isNullOrUndefined(this.selectedLI)) ? this.selectedLI : null;
16761
+ this.selectedLI = li;
16762
+ if (this.isPopupOpen && !isNullOrUndefined(this.selectedLI)) {
16763
+ this.setScrollPosition(e);
16764
+ }
16765
+ if (e && (e.keyCode === 38 || e.keyCode === 40)) {
16766
+ return;
16767
+ }
16768
+ if (isNullOrUndefined(e) || this.setValue(e)) {
16769
+ return;
16770
+ }
16771
+ };
16772
+ Mention.prototype.setScrollPosition = function (e) {
16773
+ if (!isNullOrUndefined(e)) {
16774
+ switch (e.action) {
16775
+ case 'pageDown':
16776
+ case 'down':
16777
+ case 'end':
16778
+ this.scrollBottom();
16779
+ break;
16780
+ default:
16781
+ this.scrollTop();
16782
+ break;
16783
+ }
16784
+ }
16785
+ else {
16786
+ this.scrollBottom(true);
16787
+ }
16788
+ };
16789
+ Mention.prototype.scrollBottom = function (isInitial) {
16790
+ if (!isNullOrUndefined(this.selectedLI)) {
16791
+ var currentOffset = this.list.offsetHeight;
16792
+ var nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
16793
+ var nextOffset = this.list.scrollTop + nextBottom - currentOffset;
16794
+ nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset;
16795
+ var boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
16796
+ if (this.activeIndex === 0) {
16797
+ this.list.scrollTop = 0;
16798
+ }
16799
+ else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {
16800
+ this.list.scrollTop = nextOffset;
16801
+ }
16802
+ }
16803
+ };
16804
+ Mention.prototype.scrollTop = function () {
16805
+ if (!isNullOrUndefined(this.selectedLI)) {
16806
+ var nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;
16807
+ nextOffset = this.fields.groupBy && nextOffset;
16808
+ var boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);
16809
+ if (this.activeIndex === 0) {
16810
+ this.list.scrollTop = 0;
16811
+ }
16812
+ else if (nextOffset < 0) {
16813
+ this.list.scrollTop = this.list.scrollTop + nextOffset;
16814
+ }
16815
+ else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {
16816
+ this.list.scrollTop = this.selectedLI.offsetTop;
16817
+ }
16818
+ }
16819
+ };
16820
+ Mention.prototype.selectEventCallback = function (li, selectedData, value, selectLi) {
16821
+ this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
16822
+ this.item = li;
16823
+ this.itemData = selectedData;
16824
+ var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
16825
+ if (focusedItem) {
16826
+ removeClass([focusedItem], dropDownBaseClasses.focus);
16827
+ }
16828
+ if (selectLi) {
16829
+ addClass([li], dropDownBaseClasses.selected);
16830
+ }
16831
+ li.setAttribute('aria-selected', 'true');
16832
+ this.activeIndex = this.getIndexByValue(value);
16833
+ };
16834
+ Mention.prototype.detachChanges = function (value) {
16835
+ var items;
16836
+ if (typeof value === 'string' ||
16837
+ typeof value === 'boolean' ||
16838
+ typeof value === 'number') {
16839
+ items = Object.defineProperties({}, {
16840
+ value: {
16841
+ value: value,
16842
+ enumerable: true
16843
+ },
16844
+ text: {
16845
+ value: value,
16846
+ enumerable: true
16847
+ }
16848
+ });
16849
+ }
16850
+ else {
16851
+ items = value;
16852
+ }
16853
+ return items;
16854
+ };
16855
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
16856
+ Mention.prototype.setValue = function (e) {
16857
+ var dataItem = this.getItemData();
16858
+ var textSuffix;
16859
+ var value;
16860
+ var endPos;
16861
+ var range;
16862
+ var globalRange;
16863
+ var selection = this.inputElement.ownerDocument.getSelection();
16864
+ var startPos = this.getTriggerCharPosition();
16865
+ textSuffix = typeof this.suffixText === 'string' ? this.suffixText : '';
16866
+ if (dataItem.value !== null) {
16867
+ value = this.mentionVal(dataItem.text);
16868
+ }
16869
+ if (!this.isContentEditable(this.inputElement)) {
16870
+ var myField = this.inputElement;
16871
+ var currentTriggerSnippet = this.getTextRange().substring(startPos + this.mentionChar.length, this.getTextRange().length);
16872
+ value += textSuffix;
16873
+ endPos = startPos + this.mentionChar.length;
16874
+ endPos += currentTriggerSnippet.length;
16875
+ myField.value = myField.value.substring(0, startPos) + value + myField.value.substring(endPos, myField.value.length);
16876
+ myField.selectionStart = startPos + value.length;
16877
+ myField.selectionEnd = startPos + value.length;
16878
+ if (this.isPopupOpen) {
16879
+ this.hidePopup();
16880
+ }
16881
+ this.onChangeEvent(e);
16882
+ return true;
16883
+ }
16884
+ else {
16885
+ endPos = this.getTriggerCharPosition() + this.mentionChar.length;
16886
+ if (this.range && (this.range.startContainer.textContent.trim() !== this.mentionChar)) {
16887
+ endPos = this.range.endOffset;
16888
+ }
16889
+ globalRange = this.range;
16890
+ range = document.createRange();
16891
+ range.setStart(globalRange.startContainer, startPos);
16892
+ range.setEnd(globalRange.startContainer, endPos);
16893
+ range.deleteContents();
16894
+ var element = this.createElement('div');
16895
+ element.innerHTML = value;
16896
+ var frag = document.createDocumentFragment();
16897
+ var node = void 0;
16898
+ var lastNode = void 0;
16899
+ while (node = element.firstChild) {
16900
+ lastNode = frag.appendChild(node);
16901
+ }
16902
+ range.insertNode(frag);
16903
+ if (lastNode) {
16904
+ range = range.cloneRange();
16905
+ range.setStartAfter(lastNode);
16906
+ range.collapse(true);
16907
+ selection.removeAllRanges();
16908
+ selection.addRange(range);
16909
+ }
16910
+ if (this.isPopupOpen) {
16911
+ this.hidePopup();
16912
+ }
16913
+ this.onChangeEvent(e);
16914
+ return true;
16915
+ }
16916
+ };
16917
+ Mention.prototype.mentionVal = function (value) {
16918
+ var showChar = this.showMentionChar ? this.mentionChar : '';
16919
+ if (!isNullOrUndefined(this.displayTemplate)) {
16920
+ value = this.setDisplayTemplate();
16921
+ }
16922
+ if (this.isContentEditable(this.inputElement)) {
16923
+ return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
16924
+ }
16925
+ else {
16926
+ return showChar + value;
16927
+ }
16928
+ };
16929
+ Mention.prototype.setDisplayTemplate = function () {
16930
+ var compiledString;
16931
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
16932
+ if (this.isReact) {
16933
+ this.clearTemplate(['displayTemplate']);
16934
+ if (this.displayTempElement) {
16935
+ detach(this.displayTempElement);
16936
+ this.displayTempElement = null;
16937
+ }
16938
+ }
16939
+ if (!this.displayTempElement) {
16940
+ this.displayTempElement = this.createElement('div');
16941
+ }
16942
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
16943
+ if (!this.isReact) {
16944
+ this.displayTempElement.innerHTML = '';
16945
+ }
16946
+ compiledString = compile(this.displayTemplate);
16947
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
16948
+ var displayCompTemp = compiledString(this.itemData, this, 'displayTemplate', this.displayTemplateId, this.isStringTemplate, null, this.displayTempElement);
16949
+ if (displayCompTemp && displayCompTemp.length > 0) {
16950
+ for (var i = 0; i < displayCompTemp.length; i++) {
16951
+ this.displayTempElement.appendChild(displayCompTemp[i]);
16952
+ }
16953
+ }
16954
+ this.renderReactTemplates();
16955
+ return this.displayTempElement.innerHTML;
16956
+ };
16957
+ Mention.prototype.setSpinnerTemplate = function () {
16958
+ var compiledString;
16959
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
16960
+ if (this.isReact) {
16961
+ this.clearTemplate(['spinnerTemplate']);
16962
+ if (this.spinnerTemplateElement) {
16963
+ detach(this.spinnerTemplateElement);
16964
+ this.spinnerTemplateElement = null;
16965
+ }
16966
+ }
16967
+ if (!this.spinnerTemplateElement) {
16968
+ this.spinnerTemplateElement = this.createElement('div');
16969
+ }
16970
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
16971
+ if (!this.isReact) {
16972
+ this.spinnerTemplateElement.innerHTML = '';
16973
+ }
16974
+ compiledString = compile(this.spinnerTemplate);
16975
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
16976
+ var spinnerCompTemp = compiledString(null, this, 'spinnerTemplate', this.spinnerTemplateId, this.isStringTemplate, null, this.spinnerTemplateElement);
16977
+ if (spinnerCompTemp && spinnerCompTemp.length > 0) {
16978
+ for (var i = 0; i < spinnerCompTemp.length; i++) {
16979
+ this.spinnerTemplateElement.appendChild(spinnerCompTemp[i]);
16980
+ }
16981
+ }
16982
+ this.renderReactTemplates();
16983
+ };
16984
+ Mention.prototype.onChangeEvent = function (eve) {
16985
+ this.isSelected = false;
16986
+ var items = this.detachMentionChanges(this.itemData);
16987
+ var preItems;
16988
+ if (typeof this.previousItemData === 'string' ||
16989
+ typeof this.previousItemData === 'boolean' ||
16990
+ typeof this.previousItemData === 'number') {
16991
+ preItems = Object.defineProperties({}, {
16992
+ value: {
16993
+ value: this.previousItemData,
16994
+ enumerable: true
16995
+ },
16996
+ text: {
16997
+ value: this.previousItemData,
16998
+ enumerable: true
16999
+ }
17000
+ });
17001
+ }
17002
+ else {
17003
+ preItems = this.previousItemData;
17004
+ }
17005
+ var eventArgs = {
17006
+ e: eve,
17007
+ item: this.item,
17008
+ itemData: items,
17009
+ previousItem: this.previousSelectedLI,
17010
+ previousItemData: preItems,
17011
+ isInteracted: eve ? true : false,
17012
+ value: this.item.innerHTML,
17013
+ element: this.inputElement
17014
+ };
17015
+ this.trigger('change', eventArgs);
17016
+ };
17017
+ Mention.prototype.detachMentionChanges = function (value) {
17018
+ var items;
17019
+ if (typeof value === 'string' ||
17020
+ typeof value === 'boolean' ||
17021
+ typeof value === 'number') {
17022
+ items = Object.defineProperties({}, {
17023
+ value: {
17024
+ value: value,
17025
+ enumerable: true
17026
+ },
17027
+ text: {
17028
+ value: value,
17029
+ enumerable: true
17030
+ }
17031
+ });
17032
+ }
17033
+ else {
17034
+ items = value;
17035
+ }
17036
+ return items;
17037
+ };
17038
+ Mention.prototype.getItemData = function () {
17039
+ var fields = this.fields;
17040
+ var dataItem = null;
17041
+ dataItem = this.itemData;
17042
+ var dataValue;
17043
+ var dataText;
17044
+ if (!isNullOrUndefined(dataItem)) {
17045
+ dataValue = getValue(fields.value, dataItem);
17046
+ dataText = getValue(fields.text, dataItem);
17047
+ }
17048
+ var value = (!isNullOrUndefined(dataItem) &&
17049
+ !isUndefined(dataValue) ? dataValue : dataItem);
17050
+ var text = (!isNullOrUndefined(dataItem) &&
17051
+ !isUndefined(dataValue) ? dataText : dataItem);
17052
+ return { value: value, text: text };
17053
+ };
17054
+ Mention.prototype.removeSelection = function () {
17055
+ if (this.list) {
17056
+ var selectedItems = this.list.querySelectorAll('.' + dropDownBaseClasses.selected);
17057
+ if (selectedItems.length) {
17058
+ removeClass(selectedItems, dropDownBaseClasses.selected);
17059
+ selectedItems[0].removeAttribute('aria-selected');
17060
+ }
17061
+ }
17062
+ };
17063
+ Mention.prototype.onMouseOver = function (e) {
17064
+ var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);
17065
+ this.setHover(currentLi);
17066
+ };
17067
+ Mention.prototype.setHover = function (li) {
17068
+ if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {
17069
+ this.removeHover();
17070
+ addClass([li], dropDownBaseClasses.hover);
17071
+ }
17072
+ };
17073
+ Mention.prototype.removeHover = function () {
17074
+ if (this.list) {
17075
+ var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);
17076
+ if (hoveredItem && hoveredItem.length) {
17077
+ removeClass(hoveredItem, dropDownBaseClasses.hover);
17078
+ }
17079
+ }
17080
+ };
17081
+ Mention.prototype.isValidLI = function (li) {
17082
+ return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');
17083
+ };
17084
+ Mention.prototype.onMouseLeave = function () {
17085
+ this.removeHover();
17086
+ };
17087
+ /**
17088
+ * Search the entered text and show it in the suggestion list if available.
17089
+ *
17090
+ * @returns {void}
17091
+ */
17092
+ Mention.prototype.search = function (text, positionX, positionY) {
17093
+ if ((this.ignoreCase && (text === this.elementValue() || text === this.elementValue().toLowerCase()))
17094
+ || !this.ignoreCase && text === this.elementValue()) {
17095
+ this.resetList(this.dataSource, this.fields);
17096
+ }
17097
+ else {
17098
+ if (this.isPopupOpen) {
17099
+ this.hidePopup();
17100
+ }
17101
+ return;
17102
+ }
17103
+ if (isNullOrUndefined(this.list)) {
17104
+ this.renderList();
17105
+ this.renderPopup();
17106
+ }
17107
+ else {
17108
+ this.showPopup();
17109
+ }
17110
+ this.popupObj.element.style.left = formatUnit(positionX);
17111
+ this.popupObj.element.style.top = formatUnit(positionY);
17112
+ };
17113
+ /**
17114
+ * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
17115
+ *
17116
+ * @method destroy
17117
+ * @returns {void}
17118
+ */
17119
+ Mention.prototype.destroy = function () {
17120
+ this.hidePopup();
17121
+ this.unWireEvent();
17122
+ if (this.list) {
17123
+ this.unWireListEvents();
17124
+ }
17125
+ if (this.inputElement && !this.inputElement.classList.contains('e-' + this.getModuleName())) {
17126
+ return;
17127
+ }
17128
+ _super.prototype.destroy.call(this);
17129
+ };
17130
+ Mention.prototype.getLocaleName = function () {
17131
+ return 'mention';
17132
+ };
17133
+ Mention.prototype.getNgDirective = function () {
17134
+ return 'EJS-MENTION';
17135
+ };
17136
+ /**
17137
+ * Return the module name of this component.
17138
+ *
17139
+ * @private
17140
+ * @returns {string} Return the module name of this component.
17141
+ */
17142
+ Mention.prototype.getModuleName = function () {
17143
+ return 'mention';
17144
+ };
17145
+ __decorate$7([
17146
+ Property(null)
17147
+ ], Mention.prototype, "cssClass", void 0);
17148
+ __decorate$7([
17149
+ Property('@')
17150
+ ], Mention.prototype, "mentionChar", void 0);
17151
+ __decorate$7([
17152
+ Property(false)
17153
+ ], Mention.prototype, "showMentionChar", void 0);
17154
+ __decorate$7([
17155
+ Property(false)
17156
+ ], Mention.prototype, "allowSpaces", void 0);
17157
+ __decorate$7([
17158
+ Property(null)
17159
+ ], Mention.prototype, "suffixText", void 0);
17160
+ __decorate$7([
17161
+ Property(25)
17162
+ ], Mention.prototype, "suggestionCount", void 0);
17163
+ __decorate$7([
17164
+ Property(0)
17165
+ ], Mention.prototype, "minLength", void 0);
17166
+ __decorate$7([
17167
+ Property('None')
17168
+ ], Mention.prototype, "sortOrder", void 0);
17169
+ __decorate$7([
17170
+ Property(true)
17171
+ ], Mention.prototype, "ignoreCase", void 0);
17172
+ __decorate$7([
17173
+ Property(false)
17174
+ ], Mention.prototype, "highlight", void 0);
17175
+ __decorate$7([
17176
+ Property()
17177
+ ], Mention.prototype, "locale", void 0);
17178
+ __decorate$7([
17179
+ Property('auto')
17180
+ ], Mention.prototype, "popupWidth", void 0);
17181
+ __decorate$7([
17182
+ Property('300px')
17183
+ ], Mention.prototype, "popupHeight", void 0);
17184
+ __decorate$7([
17185
+ Property(null)
17186
+ ], Mention.prototype, "displayTemplate", void 0);
17187
+ __decorate$7([
17188
+ Property(null)
17189
+ ], Mention.prototype, "itemTemplate", void 0);
17190
+ __decorate$7([
17191
+ Property('No records found')
17192
+ ], Mention.prototype, "noRecordsTemplate", void 0);
17193
+ __decorate$7([
17194
+ Property(null)
17195
+ ], Mention.prototype, "spinnerTemplate", void 0);
17196
+ __decorate$7([
17197
+ Property()
17198
+ ], Mention.prototype, "target", void 0);
17199
+ __decorate$7([
17200
+ Property([])
17201
+ ], Mention.prototype, "dataSource", void 0);
17202
+ __decorate$7([
17203
+ Property(null)
17204
+ ], Mention.prototype, "query", void 0);
17205
+ __decorate$7([
17206
+ Property('Contains')
17207
+ ], Mention.prototype, "filterType", void 0);
17208
+ __decorate$7([
17209
+ Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
17210
+ ], Mention.prototype, "fields", void 0);
17211
+ __decorate$7([
17212
+ Event()
17213
+ ], Mention.prototype, "actionBegin", void 0);
17214
+ __decorate$7([
17215
+ Event()
17216
+ ], Mention.prototype, "actionComplete", void 0);
17217
+ __decorate$7([
17218
+ Event()
17219
+ ], Mention.prototype, "actionFailure", void 0);
17220
+ __decorate$7([
17221
+ Event()
17222
+ ], Mention.prototype, "change", void 0);
17223
+ __decorate$7([
17224
+ Event()
17225
+ ], Mention.prototype, "beforeOpen", void 0);
17226
+ __decorate$7([
17227
+ Event()
17228
+ ], Mention.prototype, "opened", void 0);
17229
+ __decorate$7([
17230
+ Event()
17231
+ ], Mention.prototype, "closed", void 0);
17232
+ __decorate$7([
17233
+ Event()
17234
+ ], Mention.prototype, "select", void 0);
17235
+ __decorate$7([
17236
+ Event()
17237
+ ], Mention.prototype, "filtering", void 0);
17238
+ __decorate$7([
17239
+ Event()
17240
+ ], Mention.prototype, "created", void 0);
17241
+ __decorate$7([
17242
+ Event()
17243
+ ], Mention.prototype, "destroyed", void 0);
17244
+ Mention = __decorate$7([
17245
+ NotifyPropertyChanges
17246
+ ], Mention);
17247
+ return Mention;
17248
+ }(DropDownBase));
17249
+
15871
17250
  /**
15872
17251
  * export all modules from current location
15873
17252
  */
@@ -15876,5 +17255,5 @@ var listBoxClasses = {
15876
17255
  * export all modules from current location
15877
17256
  */
15878
17257
 
15879
- export { incrementalSearch, Search, escapeCharRegExp, resetIncrementalSearchValues, highlightSearch, revertHighlightSearch, FieldSettings, dropDownBaseClasses, DropDownBase, dropDownListClasses, DropDownList, Fields, TreeSettings, DropDownTree, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, createFloatLabel, updateFloatLabelState, removeFloating, setPlaceHolder, floatLabelFocus, floatLabelBlur, encodePlaceholder, SelectionSettings, ToolbarSettings, ListBox };
17258
+ export { incrementalSearch, Search, escapeCharRegExp, resetIncrementalSearchValues, highlightSearch, revertHighlightSearch, FieldSettings, dropDownBaseClasses, DropDownBase, dropDownListClasses, DropDownList, Fields, TreeSettings, DropDownTree, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, createFloatLabel, updateFloatLabelState, removeFloating, setPlaceHolder, floatLabelFocus, floatLabelBlur, encodePlaceholder, SelectionSettings, ToolbarSettings, ListBox, Mention };
15880
17259
  //# sourceMappingURL=ej2-dropdowns.es5.js.map