@nova-design-system/nova-webcomponents 3.0.0-beta.30 → 3.0.0-beta.31

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 (475) hide show
  1. package/dist/blazor-docs.json +944 -1609
  2. package/dist/cjs/{app-globals-d8cbb987.js → app-globals-69764290.js} +2 -2
  3. package/dist/cjs/{app-globals-d8cbb987.js.map → app-globals-69764290.js.map} +1 -1
  4. package/dist/cjs/{index-c50face0.js → index-72b8a9ad.js} +856 -497
  5. package/dist/cjs/index-72b8a9ad.js.map +1 -0
  6. package/dist/cjs/loader.cjs.js +3 -3
  7. package/dist/cjs/native.cjs.js +4 -4
  8. package/dist/cjs/native.cjs.js.map +1 -1
  9. package/dist/cjs/nv-alert.cjs.entry.js +22 -9
  10. package/dist/cjs/nv-alert.cjs.entry.js.map +1 -1
  11. package/dist/cjs/nv-avatar.cjs.entry.js +8 -11
  12. package/dist/cjs/nv-avatar.cjs.entry.js.map +1 -1
  13. package/dist/cjs/nv-badge.cjs.entry.js +145 -0
  14. package/dist/cjs/nv-badge.cjs.entry.js.map +1 -0
  15. package/dist/cjs/nv-base.cjs.entry.js +1 -1
  16. package/dist/cjs/nv-button.cjs.entry.js +40 -8
  17. package/dist/cjs/nv-button.cjs.entry.js.map +1 -1
  18. package/dist/cjs/nv-col.cjs.entry.js +1 -2
  19. package/dist/cjs/nv-col.cjs.entry.js.map +1 -1
  20. package/dist/cjs/nv-datagrid.cjs.entry.js +31 -5
  21. package/dist/cjs/nv-datagrid.cjs.entry.js.map +1 -1
  22. package/dist/cjs/nv-datagridbody.cjs.entry.js +1 -1
  23. package/dist/cjs/nv-datagridcolumn.cjs.entry.js +1 -3
  24. package/dist/cjs/nv-datagridcolumn.cjs.entry.js.map +1 -1
  25. package/dist/cjs/nv-datagriddatacell.cjs.entry.js +1 -2
  26. package/dist/cjs/nv-datagriddatacell.cjs.entry.js.map +1 -1
  27. package/dist/cjs/nv-datagridhead.cjs.entry.js +1 -1
  28. package/dist/cjs/nv-datagridrow.cjs.entry.js +1 -1
  29. package/dist/cjs/nv-fieldcheckbox.cjs.entry.js +40 -9
  30. package/dist/cjs/nv-fieldcheckbox.cjs.entry.js.map +1 -1
  31. package/dist/cjs/nv-fielddropdown.cjs.entry.js +59 -20
  32. package/dist/cjs/nv-fielddropdown.cjs.entry.js.map +1 -1
  33. package/dist/cjs/nv-fielddropdownitem.cjs.entry.js +13 -7
  34. package/dist/cjs/nv-fielddropdownitem.cjs.entry.js.map +1 -1
  35. package/dist/cjs/nv-fieldnumber.cjs.entry.js +48 -22
  36. package/dist/cjs/nv-fieldnumber.cjs.entry.js.map +1 -1
  37. package/dist/cjs/nv-fieldpassword.cjs.entry.js +65 -24
  38. package/dist/cjs/nv-fieldpassword.cjs.entry.js.map +1 -1
  39. package/dist/cjs/nv-fieldradio.cjs.entry.js +29 -11
  40. package/dist/cjs/nv-fieldradio.cjs.entry.js.map +1 -1
  41. package/dist/cjs/nv-fieldselect.cjs.entry.js +65 -24
  42. package/dist/cjs/nv-fieldselect.cjs.entry.js.map +1 -1
  43. package/dist/cjs/nv-fieldtext.cjs.entry.js +55 -25
  44. package/dist/cjs/nv-fieldtext.cjs.entry.js.map +1 -1
  45. package/dist/cjs/nv-fieldtextarea.cjs.entry.js +61 -23
  46. package/dist/cjs/nv-fieldtextarea.cjs.entry.js.map +1 -1
  47. package/dist/cjs/nv-fieldtoggle.cjs.entry.js +21 -8
  48. package/dist/cjs/nv-fieldtoggle.cjs.entry.js.map +1 -1
  49. package/dist/cjs/nv-icon.cjs.entry.js +5 -10
  50. package/dist/cjs/nv-icon.cjs.entry.js.map +1 -1
  51. package/dist/cjs/{nv-iconbutton_2.cjs.entry.js → nv-iconbutton.cjs.entry.js} +44 -31
  52. package/dist/cjs/nv-iconbutton.cjs.entry.js.map +1 -0
  53. package/dist/cjs/nv-loader.cjs.entry.js +35 -0
  54. package/dist/cjs/nv-loader.cjs.entry.js.map +1 -0
  55. package/dist/cjs/nv-menu.cjs.entry.js +21 -2
  56. package/dist/cjs/nv-menu.cjs.entry.js.map +1 -1
  57. package/dist/cjs/nv-menuitem.cjs.entry.js +7 -3
  58. package/dist/cjs/nv-menuitem.cjs.entry.js.map +1 -1
  59. package/dist/cjs/nv-popover.cjs.entry.js +49 -13
  60. package/dist/cjs/nv-popover.cjs.entry.js.map +1 -1
  61. package/dist/cjs/nv-row.cjs.entry.js +2 -2
  62. package/dist/cjs/nv-stack.cjs.entry.js +8 -6
  63. package/dist/cjs/nv-stack.cjs.entry.js.map +1 -1
  64. package/dist/cjs/nv-table.cjs.entry.js +28 -7
  65. package/dist/cjs/nv-table.cjs.entry.js.map +1 -1
  66. package/dist/cjs/nv-tablebody.cjs.entry.js +2 -2
  67. package/dist/cjs/nv-tablecolumn.cjs.entry.js +16 -5
  68. package/dist/cjs/nv-tablecolumn.cjs.entry.js.map +1 -1
  69. package/dist/cjs/nv-tabledatacell.cjs.entry.js +18 -3
  70. package/dist/cjs/nv-tabledatacell.cjs.entry.js.map +1 -1
  71. package/dist/cjs/nv-tablehead.cjs.entry.js +2 -2
  72. package/dist/cjs/nv-tablerow.cjs.entry.js +2 -2
  73. package/dist/cjs/nv-tooltip.cjs.entry.js +12 -3
  74. package/dist/cjs/nv-tooltip.cjs.entry.js.map +1 -1
  75. package/dist/collection/collection-manifest.json +1 -3
  76. package/dist/collection/components/nv-alert/nv-alert.js +37 -8
  77. package/dist/collection/components/nv-alert/nv-alert.js.map +1 -1
  78. package/dist/collection/components/nv-avatar/nv-avatar.js +31 -10
  79. package/dist/collection/components/nv-avatar/nv-avatar.js.map +1 -1
  80. package/dist/collection/components/nv-badge/nv-badge.css +20 -20
  81. package/dist/collection/components/nv-badge/nv-badge.js +54 -10
  82. package/dist/collection/components/nv-badge/nv-badge.js.map +1 -1
  83. package/dist/collection/components/nv-button/nv-button.js +53 -7
  84. package/dist/collection/components/nv-button/nv-button.js.map +1 -1
  85. package/dist/collection/components/nv-col/nv-col.js +2 -3
  86. package/dist/collection/components/nv-col/nv-col.js.map +1 -1
  87. package/dist/collection/components/nv-datagrid/nv-datagrid.js +42 -4
  88. package/dist/collection/components/nv-datagrid/nv-datagrid.js.map +1 -1
  89. package/dist/collection/components/nv-datagridcolumn/nv-datagridcolumn.js +4 -4
  90. package/dist/collection/components/nv-datagridcolumn/nv-datagridcolumn.js.map +1 -1
  91. package/dist/collection/components/nv-datagriddatacell/nv-datagriddatacell.js +2 -3
  92. package/dist/collection/components/nv-datagriddatacell/nv-datagriddatacell.js.map +1 -1
  93. package/dist/collection/components/nv-fieldcheckbox/nv-fieldcheckbox.js +73 -8
  94. package/dist/collection/components/nv-fieldcheckbox/nv-fieldcheckbox.js.map +1 -1
  95. package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.css +17 -6
  96. package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js +87 -18
  97. package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js.map +1 -1
  98. package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.css +9 -17
  99. package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.js +19 -5
  100. package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.js.map +1 -1
  101. package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.css +1 -1
  102. package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.js +80 -20
  103. package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.js.map +1 -1
  104. package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.js +102 -23
  105. package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.js.map +1 -1
  106. package/dist/collection/components/nv-fieldradio/nv-fieldradio.js +52 -10
  107. package/dist/collection/components/nv-fieldradio/nv-fieldradio.js.map +1 -1
  108. package/dist/collection/components/nv-fieldselect/nv-fieldselect.css +1 -1
  109. package/dist/collection/components/nv-fieldselect/nv-fieldselect.js +93 -22
  110. package/dist/collection/components/nv-fieldselect/nv-fieldselect.js.map +1 -1
  111. package/dist/collection/components/nv-fieldtext/nv-fieldtext.js +96 -24
  112. package/dist/collection/components/nv-fieldtext/nv-fieldtext.js.map +1 -1
  113. package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js +101 -25
  114. package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js.map +1 -1
  115. package/dist/collection/components/nv-fieldtoggle/nv-fieldtoggle.js +40 -7
  116. package/dist/collection/components/nv-fieldtoggle/nv-fieldtoggle.js.map +1 -1
  117. package/dist/collection/components/nv-icon/nv-icon.js +20 -9
  118. package/dist/collection/components/nv-icon/nv-icon.js.map +1 -1
  119. package/dist/collection/components/nv-iconbutton/nv-iconbutton.js +58 -9
  120. package/dist/collection/components/nv-iconbutton/nv-iconbutton.js.map +1 -1
  121. package/dist/collection/components/nv-loader/nv-loader.js +12 -2
  122. package/dist/collection/components/nv-loader/nv-loader.js.map +1 -1
  123. package/dist/collection/components/nv-menu/nv-menu.js +28 -1
  124. package/dist/collection/components/nv-menu/nv-menu.js.map +1 -1
  125. package/dist/collection/components/nv-menuitem/nv-menuitem.js +14 -2
  126. package/dist/collection/components/nv-menuitem/nv-menuitem.js.map +1 -1
  127. package/dist/collection/components/nv-popover/nv-popover.js +72 -14
  128. package/dist/collection/components/nv-popover/nv-popover.js.map +1 -1
  129. package/dist/collection/components/nv-row/nv-row.js +1 -1
  130. package/dist/collection/components/nv-stack/nv-stack.js +17 -5
  131. package/dist/collection/components/nv-stack/nv-stack.js.map +1 -1
  132. package/dist/collection/components/nv-table/nv-table.js +39 -6
  133. package/dist/collection/components/nv-table/nv-table.js.map +1 -1
  134. package/dist/collection/components/nv-tablebody/nv-tablebody.js +1 -1
  135. package/dist/collection/components/nv-tablecolumn/nv-tablecolumn.js +25 -4
  136. package/dist/collection/components/nv-tablecolumn/nv-tablecolumn.js.map +1 -1
  137. package/dist/collection/components/nv-tabledatacell/nv-tabledatacell.js +23 -2
  138. package/dist/collection/components/nv-tabledatacell/nv-tabledatacell.js.map +1 -1
  139. package/dist/collection/components/nv-tablehead/nv-tablehead.js +1 -1
  140. package/dist/collection/components/nv-tablerow/nv-tablerow.js +1 -1
  141. package/dist/collection/components/nv-tooltip/nv-tooltip.js +17 -2
  142. package/dist/collection/components/nv-tooltip/nv-tooltip.js.map +1 -1
  143. package/dist/components/index.js +3 -3
  144. package/dist/components/nv-alert.js +23 -10
  145. package/dist/components/nv-alert.js.map +1 -1
  146. package/dist/components/nv-avatar.js +9 -12
  147. package/dist/components/nv-avatar.js.map +1 -1
  148. package/dist/components/nv-badge.js +173 -1
  149. package/dist/components/nv-badge.js.map +1 -1
  150. package/dist/components/nv-base.js +1 -1
  151. package/dist/components/nv-button.js +41 -9
  152. package/dist/components/nv-button.js.map +1 -1
  153. package/dist/components/nv-col.js +1 -2
  154. package/dist/components/nv-col.js.map +1 -1
  155. package/dist/components/nv-datagrid.js +31 -5
  156. package/dist/components/nv-datagrid.js.map +1 -1
  157. package/dist/components/nv-datagridbody.js +1 -1
  158. package/dist/components/nv-datagridcolumn.js +1 -3
  159. package/dist/components/nv-datagridcolumn.js.map +1 -1
  160. package/dist/components/nv-datagriddatacell.js +1 -2
  161. package/dist/components/nv-datagriddatacell.js.map +1 -1
  162. package/dist/components/nv-datagridhead.js +1 -1
  163. package/dist/components/nv-datagridrow.js +1 -1
  164. package/dist/components/nv-fieldcheckbox.js +152 -1
  165. package/dist/components/nv-fieldcheckbox.js.map +1 -1
  166. package/dist/components/nv-fielddropdown.js +64 -25
  167. package/dist/components/nv-fielddropdown.js.map +1 -1
  168. package/dist/components/nv-fielddropdownitem.js +1 -1
  169. package/dist/components/nv-fieldnumber.js +49 -23
  170. package/dist/components/nv-fieldnumber.js.map +1 -1
  171. package/dist/components/nv-fieldpassword.js +68 -27
  172. package/dist/components/nv-fieldpassword.js.map +1 -1
  173. package/dist/components/nv-fieldradio.js +29 -11
  174. package/dist/components/nv-fieldradio.js.map +1 -1
  175. package/dist/components/nv-fieldselect.js +66 -25
  176. package/dist/components/nv-fieldselect.js.map +1 -1
  177. package/dist/components/nv-fieldtext.js +56 -26
  178. package/dist/components/nv-fieldtext.js.map +1 -1
  179. package/dist/components/nv-fieldtextarea.js +62 -24
  180. package/dist/components/nv-fieldtextarea.js.map +1 -1
  181. package/dist/components/nv-fieldtoggle.js +21 -8
  182. package/dist/components/nv-fieldtoggle.js.map +1 -1
  183. package/dist/components/nv-icon.js +1 -1
  184. package/dist/components/nv-iconbutton.js +1 -1
  185. package/dist/components/nv-loader.js +1 -1
  186. package/dist/components/nv-menu.js +22 -3
  187. package/dist/components/nv-menu.js.map +1 -1
  188. package/dist/components/nv-menuitem.js +8 -4
  189. package/dist/components/nv-menuitem.js.map +1 -1
  190. package/dist/components/nv-popover.js +1 -1
  191. package/dist/components/nv-row.js +2 -2
  192. package/dist/components/nv-stack.js +8 -6
  193. package/dist/components/nv-stack.js.map +1 -1
  194. package/dist/components/nv-table.js +28 -7
  195. package/dist/components/nv-table.js.map +1 -1
  196. package/dist/components/nv-tablebody.js +2 -2
  197. package/dist/components/nv-tablecolumn.js +16 -5
  198. package/dist/components/nv-tablecolumn.js.map +1 -1
  199. package/dist/components/nv-tabledatacell.js +18 -3
  200. package/dist/components/nv-tabledatacell.js.map +1 -1
  201. package/dist/components/nv-tablehead.js +2 -2
  202. package/dist/components/nv-tablerow.js +2 -2
  203. package/dist/components/nv-tooltip.js +13 -4
  204. package/dist/components/nv-tooltip.js.map +1 -1
  205. package/dist/components/{p-d506ae63.js → p-0caa4741.js} +836 -491
  206. package/dist/components/p-0caa4741.js.map +1 -0
  207. package/dist/components/{p-d5dd3def.js → p-1fa35ae5.js} +51 -15
  208. package/dist/components/p-1fa35ae5.js.map +1 -0
  209. package/dist/components/{p-d70df149.js → p-39e93e5b.js} +6 -11
  210. package/dist/components/p-39e93e5b.js.map +1 -0
  211. package/dist/components/{p-a1aa8970.js → p-3ef4ded9.js} +10 -4
  212. package/dist/components/p-3ef4ded9.js.map +1 -0
  213. package/dist/components/{p-ae6a0d80.js → p-c08a278d.js} +207 -172
  214. package/dist/components/p-c08a278d.js.map +1 -0
  215. package/dist/components/{p-b12abc99.js → p-ca5c171f.js} +15 -9
  216. package/dist/components/p-ca5c171f.js.map +1 -0
  217. package/dist/components/{p-8bec002e.js → p-f0d5586a.js} +46 -13
  218. package/dist/components/p-f0d5586a.js.map +1 -0
  219. package/dist/docs.d.ts +8 -0
  220. package/dist/docs.json +941 -1590
  221. package/dist/esm/{app-globals-eea8674a.js → app-globals-c5484a00.js} +2 -2
  222. package/dist/esm/{app-globals-eea8674a.js.map → app-globals-c5484a00.js.map} +1 -1
  223. package/dist/esm/{index-e7b35c14.js → index-b6f70e4a.js} +856 -497
  224. package/dist/esm/index-b6f70e4a.js.map +1 -0
  225. package/dist/esm/loader.js +4 -4
  226. package/dist/esm/native.js +5 -5
  227. package/dist/esm/native.js.map +1 -1
  228. package/dist/esm/nv-alert.entry.js +22 -9
  229. package/dist/esm/nv-alert.entry.js.map +1 -1
  230. package/dist/esm/nv-avatar.entry.js +8 -11
  231. package/dist/esm/nv-avatar.entry.js.map +1 -1
  232. package/dist/esm/nv-badge.entry.js +141 -0
  233. package/dist/esm/nv-badge.entry.js.map +1 -0
  234. package/dist/esm/nv-base.entry.js +1 -1
  235. package/dist/esm/nv-button.entry.js +40 -8
  236. package/dist/esm/nv-button.entry.js.map +1 -1
  237. package/dist/esm/nv-col.entry.js +1 -2
  238. package/dist/esm/nv-col.entry.js.map +1 -1
  239. package/dist/esm/nv-datagrid.entry.js +31 -5
  240. package/dist/esm/nv-datagrid.entry.js.map +1 -1
  241. package/dist/esm/nv-datagridbody.entry.js +1 -1
  242. package/dist/esm/nv-datagridcolumn.entry.js +1 -3
  243. package/dist/esm/nv-datagridcolumn.entry.js.map +1 -1
  244. package/dist/esm/nv-datagriddatacell.entry.js +1 -2
  245. package/dist/esm/nv-datagriddatacell.entry.js.map +1 -1
  246. package/dist/esm/nv-datagridhead.entry.js +1 -1
  247. package/dist/esm/nv-datagridrow.entry.js +1 -1
  248. package/dist/esm/nv-fieldcheckbox.entry.js +40 -9
  249. package/dist/esm/nv-fieldcheckbox.entry.js.map +1 -1
  250. package/dist/esm/nv-fielddropdown.entry.js +59 -20
  251. package/dist/esm/nv-fielddropdown.entry.js.map +1 -1
  252. package/dist/esm/nv-fielddropdownitem.entry.js +13 -7
  253. package/dist/esm/nv-fielddropdownitem.entry.js.map +1 -1
  254. package/dist/esm/nv-fieldnumber.entry.js +48 -22
  255. package/dist/esm/nv-fieldnumber.entry.js.map +1 -1
  256. package/dist/esm/nv-fieldpassword.entry.js +65 -24
  257. package/dist/esm/nv-fieldpassword.entry.js.map +1 -1
  258. package/dist/esm/nv-fieldradio.entry.js +29 -11
  259. package/dist/esm/nv-fieldradio.entry.js.map +1 -1
  260. package/dist/esm/nv-fieldselect.entry.js +65 -24
  261. package/dist/esm/nv-fieldselect.entry.js.map +1 -1
  262. package/dist/esm/nv-fieldtext.entry.js +55 -25
  263. package/dist/esm/nv-fieldtext.entry.js.map +1 -1
  264. package/dist/esm/nv-fieldtextarea.entry.js +61 -23
  265. package/dist/esm/nv-fieldtextarea.entry.js.map +1 -1
  266. package/dist/esm/nv-fieldtoggle.entry.js +21 -8
  267. package/dist/esm/nv-fieldtoggle.entry.js.map +1 -1
  268. package/dist/esm/nv-icon.entry.js +5 -10
  269. package/dist/esm/nv-icon.entry.js.map +1 -1
  270. package/dist/esm/{nv-iconbutton_2.entry.js → nv-iconbutton.entry.js} +45 -31
  271. package/dist/esm/nv-iconbutton.entry.js.map +1 -0
  272. package/dist/esm/nv-loader.entry.js +31 -0
  273. package/dist/esm/nv-loader.entry.js.map +1 -0
  274. package/dist/esm/nv-menu.entry.js +21 -2
  275. package/dist/esm/nv-menu.entry.js.map +1 -1
  276. package/dist/esm/nv-menuitem.entry.js +7 -3
  277. package/dist/esm/nv-menuitem.entry.js.map +1 -1
  278. package/dist/esm/nv-popover.entry.js +49 -13
  279. package/dist/esm/nv-popover.entry.js.map +1 -1
  280. package/dist/esm/nv-row.entry.js +2 -2
  281. package/dist/esm/nv-stack.entry.js +8 -6
  282. package/dist/esm/nv-stack.entry.js.map +1 -1
  283. package/dist/esm/nv-table.entry.js +28 -7
  284. package/dist/esm/nv-table.entry.js.map +1 -1
  285. package/dist/esm/nv-tablebody.entry.js +2 -2
  286. package/dist/esm/nv-tablecolumn.entry.js +16 -5
  287. package/dist/esm/nv-tablecolumn.entry.js.map +1 -1
  288. package/dist/esm/nv-tabledatacell.entry.js +18 -3
  289. package/dist/esm/nv-tabledatacell.entry.js.map +1 -1
  290. package/dist/esm/nv-tablehead.entry.js +2 -2
  291. package/dist/esm/nv-tablerow.entry.js +2 -2
  292. package/dist/esm/nv-tooltip.entry.js +12 -3
  293. package/dist/esm/nv-tooltip.entry.js.map +1 -1
  294. package/dist/native/native.css +1 -1
  295. package/dist/native/native.esm.js +1 -1
  296. package/dist/native/native.esm.js.map +1 -1
  297. package/dist/native/p-01262eaf.entry.js +2 -0
  298. package/dist/native/p-01262eaf.entry.js.map +1 -0
  299. package/dist/native/p-0bf2007c.entry.js +2 -0
  300. package/dist/native/p-0bf2007c.entry.js.map +1 -0
  301. package/dist/native/{p-69ca8c88.entry.js → p-11faaf31.entry.js} +2 -2
  302. package/dist/native/p-11faaf31.entry.js.map +1 -0
  303. package/dist/native/p-17dba26d.entry.js +2 -0
  304. package/dist/native/{p-c8f36510.entry.js → p-2a6ca749.entry.js} +2 -2
  305. package/dist/native/p-2a6ca749.entry.js.map +1 -0
  306. package/dist/native/{p-91d30cd7.entry.js → p-31367928.entry.js} +2 -2
  307. package/dist/native/p-31367928.entry.js.map +1 -0
  308. package/dist/native/p-327fa1a0.entry.js +2 -0
  309. package/dist/native/{p-dbade286.entry.js → p-380bcc2b.entry.js} +2 -2
  310. package/dist/native/p-380bcc2b.entry.js.map +1 -0
  311. package/dist/native/p-47c78fe4.entry.js +2 -0
  312. package/dist/native/p-47c78fe4.entry.js.map +1 -0
  313. package/dist/native/{p-305951e4.entry.js → p-4a64f5b0.entry.js} +2 -2
  314. package/dist/native/p-4a64f5b0.entry.js.map +1 -0
  315. package/dist/native/{p-13070761.entry.js → p-50c31094.entry.js} +2 -2
  316. package/dist/native/p-50c31094.entry.js.map +1 -0
  317. package/dist/native/{p-a59ec107.entry.js → p-605f8b3d.entry.js} +2 -2
  318. package/dist/native/p-605f8b3d.entry.js.map +1 -0
  319. package/dist/native/p-64ae9a21.entry.js +2 -0
  320. package/dist/native/p-64ae9a21.entry.js.map +1 -0
  321. package/dist/native/{p-20c7fc4d.entry.js → p-6e8bcd5b.entry.js} +2 -2
  322. package/dist/native/p-6e8bcd5b.entry.js.map +1 -0
  323. package/dist/native/{p-92e3e334.entry.js → p-6eb50254.entry.js} +2 -2
  324. package/dist/native/p-6eb50254.entry.js.map +1 -0
  325. package/dist/native/p-6ef216c4.js +3 -0
  326. package/dist/native/p-6ef216c4.js.map +1 -0
  327. package/dist/native/{p-1aaee302.entry.js → p-7701e4cc.entry.js} +2 -2
  328. package/dist/native/p-7701e4cc.entry.js.map +1 -0
  329. package/dist/native/p-86947929.entry.js +2 -0
  330. package/dist/native/{p-982e474f.entry.js.map → p-86947929.entry.js.map} +1 -1
  331. package/dist/native/p-8f95f4fa.entry.js +2 -0
  332. package/dist/native/p-8f95f4fa.entry.js.map +1 -0
  333. package/dist/native/{p-12eaebd6.entry.js → p-919cf3ec.entry.js} +2 -2
  334. package/dist/native/p-919cf3ec.entry.js.map +1 -0
  335. package/dist/native/p-93eea6e1.entry.js +2 -0
  336. package/dist/native/{p-e842220b.entry.js.map → p-93eea6e1.entry.js.map} +1 -1
  337. package/dist/native/p-95714583.js +2 -0
  338. package/dist/native/p-9f89229b.entry.js +2 -0
  339. package/dist/native/{p-2fca31c0.entry.js.map → p-9f89229b.entry.js.map} +1 -1
  340. package/dist/native/p-9fe47948.entry.js +2 -0
  341. package/dist/native/p-9fe47948.entry.js.map +1 -0
  342. package/dist/native/{p-7b2d8b8c.entry.js → p-a89f5542.entry.js} +2 -2
  343. package/dist/native/p-a89f5542.entry.js.map +1 -0
  344. package/dist/native/p-afbc5259.entry.js +2 -0
  345. package/dist/native/p-afbc5259.entry.js.map +1 -0
  346. package/dist/native/p-b3ec71c9.entry.js +2 -0
  347. package/dist/native/p-bbe9a373.entry.js +2 -0
  348. package/dist/native/p-c2dfee1a.entry.js +2 -0
  349. package/dist/native/p-c5e3e234.entry.js +2 -0
  350. package/dist/native/p-c5e3e234.entry.js.map +1 -0
  351. package/dist/native/{p-36d5158c.entry.js → p-c85d031d.entry.js} +3 -3
  352. package/dist/native/p-c85d031d.entry.js.map +1 -0
  353. package/dist/native/{p-5b4bdbe2.entry.js → p-d4277c50.entry.js} +2 -2
  354. package/dist/native/p-d4277c50.entry.js.map +1 -0
  355. package/dist/native/p-dacd68ab.entry.js +2 -0
  356. package/dist/native/p-dacd68ab.entry.js.map +1 -0
  357. package/dist/native/p-de9d0b05.entry.js +2 -0
  358. package/dist/native/p-de9d0b05.entry.js.map +1 -0
  359. package/dist/native/{p-65ad60eb.entry.js → p-df6c9137.entry.js} +2 -2
  360. package/dist/native/p-df6c9137.entry.js.map +1 -0
  361. package/dist/native/p-e05b0c4a.entry.js +2 -0
  362. package/dist/native/p-e05b0c4a.entry.js.map +1 -0
  363. package/dist/native/{p-330c929d.entry.js → p-e71fc762.entry.js} +2 -2
  364. package/dist/native/p-ef7f605a.entry.js +2 -0
  365. package/dist/native/p-f2e31579.entry.js +2 -0
  366. package/dist/native/{p-671699bf.entry.js.map → p-f2e31579.entry.js.map} +1 -1
  367. package/dist/types/components/nv-fieldtextarea/nv-fieldtextarea.d.ts +2 -2
  368. package/dist/types/components.d.ts +8 -337
  369. package/dist/vscode-data.json +4 -328
  370. package/hydrate/index.js +1858 -2215
  371. package/hydrate/index.mjs +1858 -2215
  372. package/package.json +1 -1
  373. package/dist/cjs/index-c50face0.js.map +0 -1
  374. package/dist/cjs/nv-badge_2.cjs.entry.js +0 -159
  375. package/dist/cjs/nv-badge_2.cjs.entry.js.map +0 -1
  376. package/dist/cjs/nv-fieldmultiselect.cjs.entry.js +0 -1038
  377. package/dist/cjs/nv-fieldmultiselect.cjs.entry.js.map +0 -1
  378. package/dist/cjs/nv-iconbutton_2.cjs.entry.js.map +0 -1
  379. package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.css +0 -12
  380. package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.docs.js +0 -6
  381. package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.docs.js.map +0 -1
  382. package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js +0 -171
  383. package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js.map +0 -1
  384. package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.css +0 -201
  385. package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.js +0 -257
  386. package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.js.map +0 -1
  387. package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js +0 -1578
  388. package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js.map +0 -1
  389. package/dist/components/nv-fielddropdownitemcheck.d.ts +0 -11
  390. package/dist/components/nv-fielddropdownitemcheck.js +0 -8
  391. package/dist/components/nv-fielddropdownitemcheck.js.map +0 -1
  392. package/dist/components/nv-fieldmultiselect.d.ts +0 -11
  393. package/dist/components/nv-fieldmultiselect.js +0 -1129
  394. package/dist/components/nv-fieldmultiselect.js.map +0 -1
  395. package/dist/components/p-5ce661bd.js +0 -125
  396. package/dist/components/p-5ce661bd.js.map +0 -1
  397. package/dist/components/p-8bec002e.js.map +0 -1
  398. package/dist/components/p-a1aa8970.js.map +0 -1
  399. package/dist/components/p-a4802979.js +0 -151
  400. package/dist/components/p-a4802979.js.map +0 -1
  401. package/dist/components/p-ae6a0d80.js.map +0 -1
  402. package/dist/components/p-b12abc99.js.map +0 -1
  403. package/dist/components/p-d506ae63.js.map +0 -1
  404. package/dist/components/p-d5dd3def.js.map +0 -1
  405. package/dist/components/p-d70df149.js.map +0 -1
  406. package/dist/components/p-e4641c41.js +0 -72
  407. package/dist/components/p-e4641c41.js.map +0 -1
  408. package/dist/esm/index-e7b35c14.js.map +0 -1
  409. package/dist/esm/nv-badge_2.entry.js +0 -154
  410. package/dist/esm/nv-badge_2.entry.js.map +0 -1
  411. package/dist/esm/nv-fieldmultiselect.entry.js +0 -1034
  412. package/dist/esm/nv-fieldmultiselect.entry.js.map +0 -1
  413. package/dist/esm/nv-iconbutton_2.entry.js.map +0 -1
  414. package/dist/native/p-0fbb962b.entry.js +0 -2
  415. package/dist/native/p-0fbb962b.entry.js.map +0 -1
  416. package/dist/native/p-12eaebd6.entry.js.map +0 -1
  417. package/dist/native/p-13070761.entry.js.map +0 -1
  418. package/dist/native/p-1aaee302.entry.js.map +0 -1
  419. package/dist/native/p-1c689ec7.entry.js +0 -2
  420. package/dist/native/p-1c689ec7.entry.js.map +0 -1
  421. package/dist/native/p-20c7fc4d.entry.js.map +0 -1
  422. package/dist/native/p-2fca31c0.entry.js +0 -2
  423. package/dist/native/p-305951e4.entry.js.map +0 -1
  424. package/dist/native/p-306d1f04.entry.js +0 -2
  425. package/dist/native/p-306d1f04.entry.js.map +0 -1
  426. package/dist/native/p-36d5158c.entry.js.map +0 -1
  427. package/dist/native/p-39dbb15b.entry.js +0 -2
  428. package/dist/native/p-39dbb15b.entry.js.map +0 -1
  429. package/dist/native/p-3f912745.entry.js +0 -2
  430. package/dist/native/p-3f912745.entry.js.map +0 -1
  431. package/dist/native/p-4e351d8e.entry.js +0 -2
  432. package/dist/native/p-4e351d8e.entry.js.map +0 -1
  433. package/dist/native/p-589eb477.entry.js +0 -2
  434. package/dist/native/p-5b4bdbe2.entry.js.map +0 -1
  435. package/dist/native/p-65ad60eb.entry.js.map +0 -1
  436. package/dist/native/p-671699bf.entry.js +0 -2
  437. package/dist/native/p-69ca8c88.entry.js.map +0 -1
  438. package/dist/native/p-7a7b9b95.entry.js +0 -2
  439. package/dist/native/p-7b2d8b8c.entry.js.map +0 -1
  440. package/dist/native/p-7b3a4cbf.entry.js +0 -2
  441. package/dist/native/p-7b3a4cbf.entry.js.map +0 -1
  442. package/dist/native/p-91d30cd7.entry.js.map +0 -1
  443. package/dist/native/p-92e3e334.entry.js.map +0 -1
  444. package/dist/native/p-982e474f.entry.js +0 -2
  445. package/dist/native/p-a03df637.entry.js +0 -2
  446. package/dist/native/p-a03df637.entry.js.map +0 -1
  447. package/dist/native/p-a5582014.entry.js +0 -2
  448. package/dist/native/p-a5582014.entry.js.map +0 -1
  449. package/dist/native/p-a59ec107.entry.js.map +0 -1
  450. package/dist/native/p-a7a3c45f.entry.js +0 -2
  451. package/dist/native/p-a7be7540.entry.js +0 -2
  452. package/dist/native/p-a7be7540.entry.js.map +0 -1
  453. package/dist/native/p-a8c0fefa.entry.js +0 -2
  454. package/dist/native/p-a8c0fefa.entry.js.map +0 -1
  455. package/dist/native/p-b4aea326.js +0 -3
  456. package/dist/native/p-b4aea326.js.map +0 -1
  457. package/dist/native/p-c8f36510.entry.js.map +0 -1
  458. package/dist/native/p-d3d682a7.entry.js +0 -2
  459. package/dist/native/p-d4c0a1e0.entry.js +0 -2
  460. package/dist/native/p-dbade286.entry.js.map +0 -1
  461. package/dist/native/p-e842220b.entry.js +0 -2
  462. package/dist/native/p-eeb6a3dc.js +0 -2
  463. package/dist/native/p-f7b96c42.entry.js +0 -2
  464. package/dist/types/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.d.ts +0 -52
  465. package/dist/types/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.docs.d.ts +0 -4
  466. package/dist/types/components/nv-fieldmultiselect/nv-fieldmultiselect.d.ts +0 -405
  467. package/dist/types/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.d.ts +0 -4
  468. /package/dist/native/{p-a7a3c45f.entry.js.map → p-17dba26d.entry.js.map} +0 -0
  469. /package/dist/native/{p-d4c0a1e0.entry.js.map → p-327fa1a0.entry.js.map} +0 -0
  470. /package/dist/native/{p-eeb6a3dc.js.map → p-95714583.js.map} +0 -0
  471. /package/dist/native/{p-589eb477.entry.js.map → p-b3ec71c9.entry.js.map} +0 -0
  472. /package/dist/native/{p-7a7b9b95.entry.js.map → p-bbe9a373.entry.js.map} +0 -0
  473. /package/dist/native/{p-d3d682a7.entry.js.map → p-c2dfee1a.entry.js.map} +0 -0
  474. /package/dist/native/{p-330c929d.entry.js.map → p-e71fc762.entry.js.map} +0 -0
  475. /package/dist/native/{p-f7b96c42.entry.js.map → p-ef7f605a.entry.js.map} +0 -0
@@ -1,1129 +0,0 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d506ae63.js';
2
- import { d as defineCustomElement$8 } from './p-a4802979.js';
3
- import { d as defineCustomElement$7 } from './p-5ce661bd.js';
4
- import { d as defineCustomElement$6 } from './p-e4641c41.js';
5
- import { d as defineCustomElement$5 } from './p-d70df149.js';
6
- import { d as defineCustomElement$4 } from './p-8bec002e.js';
7
- import { d as defineCustomElement$3 } from './p-a1aa8970.js';
8
- import { d as defineCustomElement$2 } from './p-d5dd3def.js';
9
- import { v as v4 } from './p-f5ff676c.js';
10
-
11
- const nvFieldmultiselectCss = "nv-fieldmultiselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldmultiselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldmultiselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldmultiselect[required]:not([required=false])>label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldmultiselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;align-items:center;position:relative;width:100%;min-height:40px}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .input-container-multiselect:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;padding-right:2rem;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldmultiselect .input-container-multiselect .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fieldmultiselect .input-container-multiselect.focus-within,nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldmultiselect hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}.input-container-multiselect.focus-within,.input-container-multiselect:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}.no-results-message{text-align:center;padding:10px;color:var(--nv-field-error-text, #999)}";
12
- const NvFieldmultiselectStyle0 = nvFieldmultiselectCss;
13
-
14
- const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmultiselect extends H {
15
- constructor() {
16
- super();
17
- this.__registerHost();
18
- this.dropdownItemSelected = createEvent(this, "dropdownItemSelected", 7);
19
- this.valueChanged = createEvent(this, "valueChanged", 7);
20
- this.multiselectChange = createEvent(this, "multiselectChange", 7);
21
- /**
22
- * Flag to prevent concurrent reordering operations.
23
- * Private property preferred over @State as it:
24
- * - Manages internal component logic without affecting UI
25
- * - Avoids unnecessary re-renders
26
- * - Provides better performance for rapid state changes
27
- * - Only needs class-level scope
28
- */
29
- this.isReordering = false;
30
- /**
31
- * Handle badge close for options mode.
32
- */
33
- this.handleBadgeCloseOptions = () => {
34
- this.selectedValues = [];
35
- this.multiselectChange.emit(this.selectedValues);
36
- // Uncheck all elements
37
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
38
- items.forEach(item => {
39
- item.checked = false;
40
- item.style.display = '';
41
- });
42
- // Reorder options without the divider since there are no selected elements
43
- this.parsedOptions = this.parsedOptions.filter(option => !option.isDivider);
44
- // Reorder options without the divider since there are no selected elements
45
- this.reorderOptionsContent();
46
- };
47
- /**
48
- * Handle badge close for slots mode.
49
- */
50
- this.handleBadgeCloseSlots = () => {
51
- this.selectedValues = [];
52
- this.multiselectChange.emit(this.selectedValues);
53
- // Uncheck all elements
54
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
55
- items.forEach(item => {
56
- item.checked = false;
57
- item.style.display = '';
58
- });
59
- // Reorder slot content
60
- this.reorderSlotContent();
61
- };
62
- /**
63
- * Handle popover close
64
- */
65
- this.handlePopoverClose = () => {
66
- this.open = false;
67
- this.filterText = '';
68
- if (this.modeState === 'options') {
69
- this.reorderOptionsContent();
70
- }
71
- else {
72
- this.reorderSlotContent();
73
- }
74
- // Reset filter if needed
75
- if (this.filterable) {
76
- this.resetFilter();
77
- }
78
- };
79
- /**
80
- * Handle keyboard events for options mode.
81
- * @param {KeyboardEvent} event - The keyboard event.
82
- */
83
- this.handleKeyDownOptions = (event) => {
84
- if (!this.open) {
85
- if (event.key === 'ArrowDown') {
86
- this.open = true;
87
- this.popoverElement.show();
88
- if (!this.filterable) {
89
- this.focusFirstItem();
90
- }
91
- event.preventDefault();
92
- return;
93
- }
94
- return;
95
- }
96
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
97
- if (items.length === 0) {
98
- console.warn('No dropdown items found to navigate');
99
- return;
100
- }
101
- let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
102
- if (event.key === 'ArrowDown') {
103
- event.preventDefault();
104
- currentIndex = (currentIndex + 1) % items.length;
105
- this.updateHighlightedItem(items, currentIndex);
106
- }
107
- else if (event.key === 'ArrowUp') {
108
- event.preventDefault();
109
- currentIndex = (currentIndex - 1 + items.length) % items.length;
110
- this.updateHighlightedItem(items, currentIndex);
111
- }
112
- else if (event.key === 'Enter' && currentIndex >= 0) {
113
- event.preventDefault();
114
- items[currentIndex].click();
115
- }
116
- else if (event.key === 'Escape') {
117
- event.preventDefault();
118
- this.handlePopoverClose();
119
- if (this.inputElement) {
120
- this.inputElement.blur();
121
- }
122
- }
123
- };
124
- /**
125
- * Handle input blur for options mode.
126
- */
127
- this.handleInputBlurOptions = () => {
128
- setTimeout(() => {
129
- if (!this.el.contains(document.activeElement)) {
130
- this.handlePopoverClose();
131
- }
132
- }, 150);
133
- };
134
- /**
135
- * Handle click on the input container for options mode.
136
- * @param {MouseEvent} event - The click event.
137
- */
138
- this.handleInputContainerClickOptions = (event) => {
139
- if (this.disabled || this.readonly) {
140
- return;
141
- }
142
- const target = event.target;
143
- if (target.tagName === 'P' || target.tagName === 'SPAN') {
144
- this.open = true;
145
- this.popoverElement.show();
146
- const inputContainer = this.el.querySelector('.input-container');
147
- if (inputContainer) {
148
- inputContainer.classList.add('focus-within');
149
- const removeFocusWithin = () => {
150
- inputContainer.classList.remove('focus-within');
151
- };
152
- this.popoverElement.addEventListener('hide', removeFocusWithin);
153
- }
154
- }
155
- };
156
- /**
157
- * Handle click on the input container for slots mode.
158
- * @param {MouseEvent} event - The click event.
159
- */
160
- this.handleInputContainerClickSlots = (event) => {
161
- if (this.disabled || this.readonly) {
162
- return;
163
- }
164
- const target = event.target;
165
- if (target.tagName === 'P' || target.tagName === 'SPAN') {
166
- this.open = true;
167
- this.popoverElement.show();
168
- const inputContainer = this.el.querySelector('.input-container');
169
- if (inputContainer) {
170
- inputContainer.classList.add('focus-within');
171
- const removeFocusWithin = () => {
172
- inputContainer.classList.remove('focus-within');
173
- };
174
- this.popoverElement.addEventListener('hide', removeFocusWithin);
175
- }
176
- }
177
- };
178
- /**
179
- * Handle input change for options mode.
180
- * @param {Event} event - The input event.
181
- */
182
- this.handleInputOptions = (event) => {
183
- if (!this.filterable)
184
- return;
185
- if (this.disabled || this.readonly) {
186
- return;
187
- }
188
- const input = event.target;
189
- this.value = input.value;
190
- this.valueChanged.emit(this.value);
191
- // Clear any existing timer
192
- if (this.debounceTimer) {
193
- window.clearTimeout(this.debounceTimer);
194
- }
195
- // Set a new timer for filtering
196
- this.debounceTimer = window.setTimeout(() => {
197
- this.filterText = input.value.toLowerCase();
198
- this.filterOptionsItems();
199
- }, this.debounceDelay);
200
- };
201
- /**
202
- * Handle input change for slots mode
203
- * @param {Event} event - The input event.
204
- */
205
- this.handleInputSlots = (event) => {
206
- if (!this.filterable)
207
- return;
208
- if (this.disabled || this.readonly)
209
- return;
210
- const input = event.target;
211
- this.value = input.value;
212
- this.valueChanged.emit(this.value);
213
- // Clear any existing timer
214
- if (this.debounceTimer) {
215
- window.clearTimeout(this.debounceTimer);
216
- }
217
- // Set a new timer for filtering
218
- this.debounceTimer = window.setTimeout(() => {
219
- this.filterText = input.value.toLowerCase();
220
- this.filterSlotsItems();
221
- }, this.debounceDelay);
222
- };
223
- /**
224
- * Handle input focus for options mode.
225
- */
226
- this.handleInputFocusOptions = () => {
227
- if (this.disabled || this.readonly) {
228
- return;
229
- }
230
- this.open = true;
231
- };
232
- /**
233
- * Handle input focus for slots mode.
234
- */
235
- this.handleInputFocusSlots = () => {
236
- if (this.disabled || this.readonly) {
237
- return;
238
- }
239
- this.open = true;
240
- };
241
- /**
242
- * Handle input blur for slots mode.
243
- */
244
- this.handleInputBlurSlots = () => {
245
- setTimeout(() => {
246
- if (!this.el.contains(document.activeElement)) {
247
- this.handlePopoverClose();
248
- }
249
- }, 150);
250
- };
251
- /**
252
- * Toggle the multiselect popover for options mode.
253
- */
254
- this.togglePopoverOptions = () => {
255
- if (this.disabled || this.readonly) {
256
- return;
257
- }
258
- if (this.open) {
259
- this.handlePopoverClose();
260
- }
261
- else {
262
- this.open = true;
263
- this.popoverElement.show();
264
- if (!this.filterable) {
265
- this.focusFirstItem();
266
- }
267
- }
268
- };
269
- /**
270
- * Toggle the multiselect popover for slots mode.
271
- */
272
- this.togglePopoverSlots = () => {
273
- if (this.disabled || this.readonly) {
274
- return;
275
- }
276
- this.open = !this.open;
277
- if (this.open) {
278
- this.popoverElement.show();
279
- if (!this.filterable) {
280
- this.focusFirstItem();
281
- }
282
- }
283
- else {
284
- this.popoverElement.hide();
285
- }
286
- };
287
- /**
288
- * Handle keyboard events for slots mode.
289
- * @param {KeyboardEvent} event - The keyboard event.
290
- */
291
- this.handleKeyDownSlots = (event) => {
292
- if (!this.open) {
293
- if (event.key === 'ArrowDown') {
294
- this.open = true;
295
- this.popoverElement.show();
296
- if (!this.filterable) {
297
- this.focusFirstItem();
298
- }
299
- event.preventDefault();
300
- return;
301
- }
302
- return;
303
- }
304
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
305
- if (items.length === 0) {
306
- console.warn('No dropdown items found to navigate');
307
- return;
308
- }
309
- let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
310
- if (event.key === 'ArrowDown') {
311
- event.preventDefault();
312
- currentIndex = (currentIndex + 1) % items.length;
313
- this.updateHighlightedItem(items, currentIndex);
314
- }
315
- else if (event.key === 'ArrowUp') {
316
- event.preventDefault();
317
- currentIndex = (currentIndex - 1 + items.length) % items.length;
318
- this.updateHighlightedItem(items, currentIndex);
319
- }
320
- else if (event.key === 'Enter' && currentIndex >= 0) {
321
- event.preventDefault();
322
- items[currentIndex].click();
323
- }
324
- else if (event.key === 'Escape') {
325
- event.preventDefault();
326
- this.handlePopoverClose();
327
- if (this.inputElement) {
328
- this.inputElement.blur();
329
- }
330
- }
331
- };
332
- this.inputId = v4();
333
- this.name = undefined;
334
- this.label = undefined;
335
- this.description = undefined;
336
- this.placeholder = undefined;
337
- this.maxHeight = '200px';
338
- this.badgeLabel = '';
339
- this.emptyresult = 'No results found';
340
- this.required = false;
341
- this.error = false;
342
- this.errorDescription = undefined;
343
- this.readonly = false;
344
- this.disabled = false;
345
- this.autocomplete = 'off';
346
- this.filterable = false;
347
- this.value = undefined;
348
- this.open = false;
349
- this.mode = undefined;
350
- this.options = undefined;
351
- this.parsedOptions = [];
352
- this.selectedValues = [];
353
- this.sortedOptions = [];
354
- this.filterText = '';
355
- this.isFilterable = this.filterable;
356
- this.debounceDelay = 300;
357
- this.modeState = 'options';
358
- }
359
- //#endregion PROPERTIES
360
- /****************************************************************************/
361
- //#region EVENTS
362
- /**
363
- * Subscribe to click outside event.
364
- */
365
- connectedCallback() {
366
- this.modeState = this.mode;
367
- this.handleOptionsChange(this.options);
368
- document.addEventListener('click', this.handleClickOutside.bind(this));
369
- // If we don't have parsed options, initialize with slot elements
370
- if (!this.parsedOptions || this.parsedOptions.length === 0) {
371
- // Wait for the slot to be available
372
- requestAnimationFrame(() => {
373
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
374
- // Initialize selectedValues with checked elements
375
- this.selectedValues = items
376
- .filter(item => item.hasAttribute('checked'))
377
- .map(item => item.getAttribute('value') || '');
378
- });
379
- }
380
- // Initialize the sorted options array with the parsed options for initial rendering
381
- this.sortedOptions = [...this.parsedOptions];
382
- // Handle pre-selection during component initialization
383
- this.setInitialSelection();
384
- // Apply filtering if the multiselect is filterable and there is a value
385
- if (this.filterable && this.value) {
386
- this.filterText = this.value.toLowerCase();
387
- this.filterItems();
388
- }
389
- else {
390
- // Reset visibility state of all dropdown items
391
- this.resetFilter();
392
- }
393
- const slot = this.el.querySelector('slot[name="content"]');
394
- if (slot) {
395
- const observer = new MutationObserver(() => {
396
- this.reorderSlotContent();
397
- });
398
- observer.observe(slot, {
399
- childList: true,
400
- subtree: true,
401
- });
402
- this.reorderSlotContent();
403
- }
404
- }
405
- /**
406
- * Unsubscribe from click outside event.
407
- */
408
- disconnectedCallback() {
409
- document.removeEventListener('click', this.handleClickOutside.bind(this));
410
- }
411
- /**
412
- * Emitted when the input loses focus.
413
- * @param {CustomEvent<boolean>} event - The event object containing the focus state.
414
- */
415
- handleOpenChanged(event) {
416
- // Update the open state of popover
417
- this.open = event.detail;
418
- if (this.open) {
419
- if (this.filterText) {
420
- this.filterItems();
421
- }
422
- }
423
- else {
424
- this.reorderSlotContent();
425
- }
426
- }
427
- /**
428
- * Listen for the `itemChecked` event emitted by child items.
429
- * @param {CustomEvent<{ value: string; checked: boolean }>} event - The event object containing the selected value and its checked state.
430
- */
431
- handleItemChecked(event) {
432
- if (this.disabled || this.readonly)
433
- return;
434
- const { value, checked } = event.detail;
435
- if (value !== undefined && value !== null) {
436
- const newSelectedValues = [...this.selectedValues];
437
- if (checked && !newSelectedValues.includes(value)) {
438
- newSelectedValues.push(value);
439
- }
440
- else if (!checked) {
441
- const index = newSelectedValues.indexOf(value);
442
- if (index > -1) {
443
- newSelectedValues.splice(index, 1);
444
- }
445
- }
446
- this.selectedValues = newSelectedValues;
447
- this.multiselectChange.emit(this.selectedValues);
448
- }
449
- }
450
- /**
451
- * Emitted when the options change.
452
- * @param {string | Array<{label: string, value: string, isDivider?: boolean, disabled?: boolean, description?: string, checked?: boolean}>} newValue - The new value of the options.
453
- */
454
- handleOptionsChange(newValue) {
455
- if (typeof newValue === 'string') {
456
- try {
457
- const parsedOpts = JSON.parse(newValue);
458
- // Process options: initialize selections, reorder items, and add dividers where needed
459
- this.selectedValues = parsedOpts
460
- .filter(option => option.checked)
461
- .map(option => option.value);
462
- const checkedItems = parsedOpts.filter(option => this.selectedValues.includes(option.value));
463
- const uncheckedItems = parsedOpts.filter(option => !this.selectedValues.includes(option.value));
464
- this.parsedOptions = [
465
- ...checkedItems,
466
- ...(checkedItems.length > 0 && uncheckedItems.length > 0
467
- ? [{ isDivider: true, label: '', value: '' }]
468
- : []),
469
- ...uncheckedItems,
470
- ];
471
- }
472
- catch (error) {
473
- console.error('Error parsing options:', error);
474
- this.parsedOptions = [];
475
- }
476
- }
477
- else if (Array.isArray(newValue)) {
478
- this.selectedValues = newValue
479
- .filter(option => option.checked)
480
- .map(option => option.value);
481
- this.parsedOptions = [...newValue];
482
- }
483
- else {
484
- this.parsedOptions = [];
485
- }
486
- this.reorderSlotContent();
487
- }
488
- /**
489
- * Emitted when the value changes.
490
- */
491
- watchValueHandler() {
492
- // Handle value change and update the corresponding multiselect item if it exists
493
- this.setInitialSelection();
494
- }
495
- /**
496
- * Emitted when the filterable property changes.
497
- * @param {boolean} newValue - The new value of the filterable property.
498
- */
499
- watchFilterableHandler(newValue) {
500
- this.isFilterable = newValue;
501
- this.filterable = newValue;
502
- }
503
- // Add a watcher for the slot content
504
- handleSlotChange(event) {
505
- const slot = event.target;
506
- if (slot.name === 'content') {
507
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
508
- // Update selectedValues when slot content changes
509
- this.selectedValues = items
510
- .filter(item => item.hasAttribute('checked'))
511
- .map(item => item.getAttribute('value') || '');
512
- }
513
- }
514
- //#endregion EVENTS
515
- /****************************************************************************/
516
- //#region METHODS
517
- /**
518
- * Retrieves the current filter text entered by the user.
519
- * @returns {string} The filter text.
520
- */
521
- async getFilterText() {
522
- return this.filterText;
523
- }
524
- /**
525
- * Set the initial selection based on the current value and update the inputElement value.
526
- */
527
- setInitialSelection() {
528
- var _a;
529
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
530
- const selectedItem = items.find(item => {
531
- var _a;
532
- return item.getAttribute('label') === this.value ||
533
- item.getAttribute('value') === this.value ||
534
- ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === this.value;
535
- });
536
- // Remove 'selected' from all items first to reset the state
537
- items.forEach(item => {
538
- item.removeAttribute('selected');
539
- item.classList.remove('selected');
540
- });
541
- if (selectedItem) {
542
- // Add the `selected` attribute and `selected` class for visual styling
543
- selectedItem.setAttribute('selected', 'true');
544
- selectedItem.classList.add('selected');
545
- // Update the value and inputElement value to reflect the pre-selected item
546
- this.value =
547
- selectedItem.getAttribute('label') ||
548
- selectedItem.getAttribute('value') ||
549
- ((_a = selectedItem.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
550
- '';
551
- if (this.inputElement) {
552
- this.inputElement.value = this.value;
553
- }
554
- }
555
- }
556
- /**
557
- * Reset the filter and make all items visible.
558
- */
559
- async resetFilter() {
560
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
561
- // Reset visibility state of all dropdown items
562
- items.forEach(item => {
563
- item.style.display = '';
564
- });
565
- // Clean up filter-related UI elements
566
- const ul = this.el.querySelector('ul');
567
- if (ul) {
568
- const emptyMessage = ul.querySelector('[data-empty]');
569
- const divider = ul.querySelector('hr.dropdown-divider');
570
- if (emptyMessage)
571
- emptyMessage.remove();
572
- if (divider)
573
- divider.remove();
574
- }
575
- }
576
- /**
577
- * Returns the list of selected values.
578
- * @returns {string[]} The selected values.
579
- */
580
- async getSelectedValues() {
581
- return this.selectedValues;
582
- }
583
- /**
584
- * Reorder the content of the slot.
585
- */
586
- reorderSlotContent() {
587
- if (this.modeState === 'options')
588
- return;
589
- const ul = this.el.querySelector('ul');
590
- if (!ul)
591
- return;
592
- // First remove all existing dividers
593
- ul.querySelectorAll('hr.dropdown-divider').forEach(divider => divider.remove());
594
- // Get all visible items (not hidden)
595
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
596
- // Check if we have an empty message
597
- const hasEmptyMessage = ul.querySelector('[data-empty]');
598
- if (hasEmptyMessage) {
599
- // If we have an empty message, don't reorder
600
- return;
601
- }
602
- // Separate selected and unselected items
603
- const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
604
- const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
605
- // Empty the list
606
- while (ul.firstChild) {
607
- ul.removeChild(ul.firstChild);
608
- }
609
- // Reorder items
610
- selectedItems.forEach(item => ul.appendChild(item));
611
- // Add divider only if we have both selected AND unselected items
612
- // AND if visible items are different
613
- if (selectedItems.length > 0 &&
614
- unselectedItems.length > 0 &&
615
- items.length > 1) {
616
- const divider = document.createElement('hr');
617
- divider.className = 'dropdown-divider';
618
- ul.appendChild(divider);
619
- }
620
- // Add unselected items
621
- unselectedItems.forEach(item => ul.appendChild(item));
622
- }
623
- /**
624
- * Reorder the content for options mode with async handling
625
- */
626
- async reorderOptionsContent() {
627
- if (this.isReordering ||
628
- !this.parsedOptions ||
629
- this.parsedOptions.length === 0 ||
630
- this.modeState !== 'options') {
631
- return;
632
- }
633
- try {
634
- this.isReordering = true;
635
- // Update parsedOptions first
636
- const optionsWithoutDivider = this.parsedOptions.filter(opt => !opt.isDivider);
637
- const selectedOptions = optionsWithoutDivider.filter(opt => this.selectedValues.includes(opt.value));
638
- const unselectedOptions = optionsWithoutDivider.filter(opt => !this.selectedValues.includes(opt.value));
639
- // Update parsedOptions with new divider
640
- this.parsedOptions = [
641
- ...selectedOptions,
642
- ...(selectedOptions.length > 0 && unselectedOptions.length > 0
643
- ? [{ isDivider: true, label: '', value: '' }]
644
- : []),
645
- ...unselectedOptions,
646
- ];
647
- // Then update DOM
648
- await new Promise(resolve => requestAnimationFrame(resolve));
649
- const ul = this.el.querySelector('ul');
650
- if (!ul)
651
- return;
652
- // Get all items
653
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
654
- // Remove all existing dividers
655
- ul.querySelectorAll('hr.dropdown-divider').forEach(divider => divider.remove());
656
- // Separate selected and unselected items
657
- const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
658
- const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
659
- // Empty the list
660
- while (ul.firstChild) {
661
- ul.removeChild(ul.firstChild);
662
- }
663
- // Reorder items
664
- selectedItems.forEach(item => ul.appendChild(item));
665
- // Add divider only if there are both selected AND unselected items
666
- if (selectedItems.length > 0 && unselectedItems.length > 0) {
667
- const divider = document.createElement('hr');
668
- divider.className = 'dropdown-divider';
669
- ul.appendChild(divider);
670
- }
671
- // Add unselected items
672
- unselectedItems.forEach(item => ul.appendChild(item));
673
- }
674
- finally {
675
- this.isReordering = false;
676
- }
677
- }
678
- /**
679
- * Filter multiselect items based on the text entered by the user.
680
- */
681
- filterItems() {
682
- const ul = this.el.querySelector('ul');
683
- if (!ul)
684
- return;
685
- // Remove existing empty message if any
686
- const existingEmptyMessage = ul.querySelector('[data-empty]');
687
- if (existingEmptyMessage) {
688
- existingEmptyMessage.remove();
689
- }
690
- if (!this.filterText.trim()) {
691
- if (this.parsedOptions && this.parsedOptions.length > 0) {
692
- // Reset options display
693
- const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
694
- items.forEach(item => {
695
- item.style.display = '';
696
- });
697
- }
698
- else {
699
- // Reset slot items display
700
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
701
- items.forEach(item => {
702
- item.style.display = '';
703
- });
704
- }
705
- this.reorderSlotContent();
706
- return;
707
- }
708
- const normalizedFilter = this.normalizeText(this.filterText);
709
- let hasVisibleItems = false;
710
- if (this.parsedOptions && this.parsedOptions.length > 0) {
711
- // Filter options mode
712
- const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
713
- items.forEach(item => {
714
- const option = this.parsedOptions.find(opt => opt.value === item.getAttribute('value'));
715
- if (option && !option.isDivider) {
716
- const matchesFilter = this.normalizeText(option.label).includes(normalizedFilter) ||
717
- this.normalizeText(option.value).includes(normalizedFilter);
718
- item.style.display = matchesFilter ? '' : 'none';
719
- if (matchesFilter)
720
- hasVisibleItems = true;
721
- }
722
- });
723
- // Hide dividers if needed
724
- const dividers = ul.querySelectorAll('hr.dropdown-divider');
725
- dividers.forEach(divider => {
726
- divider.style.display = hasVisibleItems ? '' : 'none';
727
- });
728
- }
729
- else {
730
- // Filter slot items mode
731
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
732
- items.forEach(item => {
733
- const label = item.getAttribute('label') || '';
734
- const value = item.getAttribute('value') || '';
735
- const textContent = item.textContent || '';
736
- const matchesFilter = this.normalizeText(label).includes(normalizedFilter) ||
737
- this.normalizeText(value).includes(normalizedFilter) ||
738
- this.normalizeText(textContent).includes(normalizedFilter);
739
- item.style.display = matchesFilter ? '' : 'none';
740
- if (matchesFilter)
741
- hasVisibleItems = true;
742
- });
743
- }
744
- // Add empty message if no items match the filter
745
- if (!hasVisibleItems) {
746
- const emptyMessage = document.createElement('li');
747
- emptyMessage.setAttribute('data-empty', 'true');
748
- emptyMessage.textContent = this.emptyresult;
749
- emptyMessage.classList.add('no-results-message');
750
- ul.appendChild(emptyMessage);
751
- }
752
- this.reorderSlotContent();
753
- }
754
- /**
755
- * Filter multiselect items in options mode.
756
- */
757
- filterOptionsItems() {
758
- const ul = this.el.querySelector('ul');
759
- if (!ul)
760
- return;
761
- // Remove existing empty message if any
762
- const existingEmptyMessage = ul.querySelector('[data-empty]');
763
- if (existingEmptyMessage) {
764
- existingEmptyMessage.remove();
765
- }
766
- if (!this.filterText.trim()) {
767
- // Reset options display
768
- const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
769
- items.forEach(item => {
770
- item.style.display = '';
771
- });
772
- this.reorderOptionsContent();
773
- return;
774
- }
775
- const normalizedFilter = this.normalizeText(this.filterText);
776
- let hasVisibleItems = false;
777
- // Filter options mode
778
- const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
779
- items.forEach(item => {
780
- const option = this.parsedOptions.find(opt => opt.value === item.getAttribute('value'));
781
- if (option && !option.isDivider) {
782
- const matchesFilter = this.normalizeText(option.label).includes(normalizedFilter) ||
783
- this.normalizeText(option.value).includes(normalizedFilter);
784
- item.style.display = matchesFilter ? '' : 'none';
785
- if (matchesFilter)
786
- hasVisibleItems = true;
787
- }
788
- });
789
- // Get visible items after filtering
790
- const visibleItems = items.filter(item => item.style.display !== 'none');
791
- const visibleSelectedItems = visibleItems.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
792
- // Hide divider if all visible items are either all selected or all unselected
793
- const divider = ul.querySelector('hr.dropdown-divider');
794
- if (divider) {
795
- const shouldShowDivider = visibleSelectedItems.length > 0 &&
796
- visibleSelectedItems.length < visibleItems.length;
797
- divider.style.display = shouldShowDivider ? '' : 'none';
798
- }
799
- // Add empty message if no items match the filter
800
- if (!hasVisibleItems) {
801
- const emptyMessage = document.createElement('li');
802
- emptyMessage.setAttribute('data-empty', 'true');
803
- emptyMessage.textContent = this.emptyresult;
804
- emptyMessage.classList.add('no-results-message');
805
- ul.appendChild(emptyMessage);
806
- }
807
- }
808
- /**
809
- * Filter multiselect items in slots mode
810
- */
811
- filterSlotsItems() {
812
- if (this.modeState === 'options')
813
- return;
814
- const ul = this.el.querySelector('ul');
815
- if (!ul)
816
- return;
817
- // Remove existing empty message if any
818
- const existingEmptyMessage = ul.querySelector('[data-empty]');
819
- if (existingEmptyMessage) {
820
- existingEmptyMessage.remove();
821
- }
822
- // If filter text is empty, reset all items visibility
823
- if (!this.filterText.trim()) {
824
- this.resetFilter();
825
- return;
826
- }
827
- const normalizedFilter = this.normalizeText(this.filterText);
828
- let hasVisibleItems = false;
829
- // Get all items and preserve them in the DOM
830
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
831
- // Instead of removing/reordering, just hide/show items
832
- items.forEach(item => {
833
- var _a;
834
- const label = item.getAttribute('label') || '';
835
- const value = item.getAttribute('value') || '';
836
- const textContent = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
837
- const matchesFilter = this.normalizeText(label).includes(normalizedFilter) ||
838
- this.normalizeText(value).includes(normalizedFilter) ||
839
- this.normalizeText(textContent).includes(normalizedFilter);
840
- item.style.display = matchesFilter ? '' : 'none';
841
- if (matchesFilter)
842
- hasVisibleItems = true;
843
- });
844
- // Get visible items after filtering
845
- const visibleItems = items.filter(item => item.style.display !== 'none');
846
- const visibleSelectedItems = visibleItems.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
847
- // Hide divider if all visible items are either all selected or all unselected
848
- const divider = ul.querySelector('hr.dropdown-divider');
849
- if (divider) {
850
- const shouldShowDivider = visibleSelectedItems.length > 0 &&
851
- visibleSelectedItems.length < visibleItems.length;
852
- divider.style.display = shouldShowDivider ? '' : 'none';
853
- }
854
- // Add empty message if no items match the filter
855
- if (!hasVisibleItems) {
856
- const emptyMessage = document.createElement('li');
857
- emptyMessage.setAttribute('data-empty', 'true');
858
- emptyMessage.textContent = this.emptyresult;
859
- emptyMessage.classList.add('no-results-message');
860
- ul.appendChild(emptyMessage);
861
- }
862
- }
863
- /**
864
- * Normalizes text by removing accents and converting to lowercase
865
- * @param {string} text - The text to normalize
866
- * @returns {string} The normalized text
867
- *
868
- * @example
869
- * normalizeText("Café Latte") => "cafe latte"
870
- *
871
- * @description
872
- * This function performs text normalization in three steps:
873
- * 1. Decomposes characters into their base form and combining characters (NFD)
874
- * 2. Removes all diacritical marks (accents, umlauts, etc.)
875
- * 3. Converts to lowercase and trims whitespace
876
- *
877
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize} - MDN documentation on String.normalize()
878
- * @see {@link https://en.wikipedia.org/wiki/Unicode_equivalence#Normal_forms} - More info about Unicode normalization forms
879
- */
880
- normalizeText(text) {
881
- return text
882
- .normalize('NFD') // Decompose characters into base + combining characters (e.g., é => e + ´)
883
- .replace(/[\u0300-\u036f]/g, '') // Remove all diacritical marks (Unicode range for combining characters)
884
- .toLowerCase() // Convert to lowercase
885
- .trim(); // Remove leading and trailing whitespace
886
- }
887
- /**
888
- * Handle click outside the component.
889
- * @param {MouseEvent} event - The click event.
890
- */
891
- handleClickOutside(event) {
892
- if (this.el.contains(event.target) ||
893
- (this.inputElement && this.inputElement.contains(event.target))) {
894
- return;
895
- }
896
- // Force le même comportement que la fermeture par iconbutton
897
- if (this.modeState === 'options') {
898
- this.handlePopoverClose();
899
- }
900
- else {
901
- this.popoverElement.hide();
902
- }
903
- }
904
- /**
905
- * Handle keyboard events & arrow key navigation.
906
- * If the multiselect is not open, opens it and focuses on the first item if the list is not filterable.
907
- * If the multiselect is open, handles arrow key navigation and closes it if the focus is outside the component.
908
- * @param {KeyboardEvent} event - The keyboard event.
909
- */
910
- handleKeyDown(event) {
911
- if (!this.open) {
912
- if (event.key === 'ArrowDown') {
913
- this.open = true;
914
- this.popoverElement.show();
915
- // Focus on the first item if the list is not filterable
916
- if (!this.filterable) {
917
- this.focusFirstItem();
918
- }
919
- event.preventDefault();
920
- return;
921
- }
922
- return;
923
- }
924
- const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
925
- if (items.length === 0) {
926
- console.warn('No dropdown items found to navigate');
927
- return;
928
- }
929
- let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
930
- if (event.key === 'ArrowDown') {
931
- event.preventDefault();
932
- currentIndex = (currentIndex + 1) % items.length;
933
- this.updateHighlightedItem(items, currentIndex);
934
- }
935
- else if (event.key === 'ArrowUp') {
936
- event.preventDefault();
937
- currentIndex = (currentIndex - 1 + items.length) % items.length;
938
- this.updateHighlightedItem(items, currentIndex);
939
- }
940
- else if (event.key === 'Enter' && currentIndex >= 0) {
941
- event.preventDefault();
942
- items[currentIndex].click();
943
- }
944
- else if (event.key === 'Escape') {
945
- event.preventDefault();
946
- this.open = false;
947
- this.popoverElement.hide();
948
- if (this.inputElement) {
949
- this.inputElement.blur();
950
- }
951
- }
952
- }
953
- /**
954
- * Updates the highlighted item in the dropdown list.
955
- *
956
- * @param {(HTMLNvFielddropdownitemElement | HTMLNvFielddropdownitemcheckElement)[]} items - The items to update.
957
- * @param {number} index - The index of the item to highlight.
958
- */
959
- updateHighlightedItem(items, index) {
960
- items.forEach((item, i) => {
961
- if (i === index) {
962
- item.classList.add('highlighted');
963
- item.setAttribute('tabindex', '0');
964
- item.focus();
965
- }
966
- else {
967
- item.classList.remove('highlighted');
968
- item.setAttribute('tabindex', '-1');
969
- }
970
- });
971
- }
972
- /**
973
- * Focus on the first item in the dropdown list.
974
- */
975
- focusFirstItem() {
976
- const firstItem = this.el.querySelector('nv-fielddropdownitemcheck');
977
- if (firstItem) {
978
- firstItem.setAttribute('tabindex', '0');
979
- firstItem.classList.add('highlighted');
980
- firstItem.focus();
981
- }
982
- else {
983
- console.warn('No first item found to focus');
984
- }
985
- }
986
- /**
987
- * Watch for changes in the mode prop and update modeState accordingly
988
- * @param {string} newValue - The new mode value
989
- */
990
- handleModeChange(newValue) {
991
- this.modeState = newValue;
992
- }
993
- //#endregion METHODS
994
- /****************************************************************************/
995
- //#region RENDER
996
- /**
997
- * Renders the component in options mode
998
- * @returns {any} The JSX for options mode
999
- */
1000
- renderOptionsMode() {
1001
- return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), h("nv-badge", { slot: "leading-input", "prevent-auto-close": "true", color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDownOptions })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDownOptions, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, h("span", null, this.value || this.placeholder))), h("nv-iconbutton", { class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("ul", { role: "presentation" }, this.parsedOptions.map(option => option.isDivider ? (h("hr", { class: "dropdown-divider" })) : (h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled })))))), this.renderDescriptions()));
1002
- }
1003
- /**
1004
- * Renders the component in slots mode
1005
- * @returns {any} The JSX for slots mode
1006
- */
1007
- renderSlotsMode() {
1008
- return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }, h("p", null, "No leading input")), h("nv-badge", { slot: "leading-input", "prevent-auto-close": "true", color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDownSlots })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDownSlots, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open }, h("span", null, this.value || this.placeholder))), h("nv-iconbutton", { class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("slot", { name: "content" }))), this.renderDescriptions()));
1009
- }
1010
- /**
1011
- * Renders description and error description sections
1012
- * @returns {any} The JSX for descriptions
1013
- */
1014
- renderDescriptions() {
1015
- return [
1016
- (this.description || this.el.querySelector('[slot="description"]')) && (h("div", { class: "description" }, h("slot", { name: "description" }, this.description))),
1017
- (this.errorDescription ||
1018
- this.el.querySelector('[slot="error-description"]')) && (h("div", { hidden: !this.error, class: "error-description" }, h("slot", { name: "error-description" }, this.errorDescription))),
1019
- ];
1020
- }
1021
- /**
1022
- * Main render method that decides which mode to render
1023
- * @returns {any} The JSX for the component
1024
- */
1025
- render() {
1026
- return this.modeState === 'options'
1027
- ? this.renderOptionsMode()
1028
- : this.renderSlotsMode();
1029
- }
1030
- get el() { return this; }
1031
- static get watchers() { return {
1032
- "options": ["handleOptionsChange"],
1033
- "value": ["watchValueHandler"],
1034
- "filterable": ["watchFilterableHandler"],
1035
- "mode": ["handleModeChange"]
1036
- }; }
1037
- static get style() { return NvFieldmultiselectStyle0; }
1038
- }, [4, "nv-fieldmultiselect", {
1039
- "inputId": [513, "input-id"],
1040
- "name": [513],
1041
- "label": [513],
1042
- "description": [513],
1043
- "placeholder": [513],
1044
- "maxHeight": [513, "max-height"],
1045
- "badgeLabel": [513, "badge-label"],
1046
- "emptyresult": [513],
1047
- "required": [516],
1048
- "error": [516],
1049
- "errorDescription": [513, "error-description"],
1050
- "readonly": [516],
1051
- "disabled": [516],
1052
- "autocomplete": [513],
1053
- "filterable": [1540],
1054
- "value": [1537],
1055
- "open": [1540],
1056
- "mode": [513],
1057
- "options": [513],
1058
- "debounceDelay": [514, "debounce-delay"],
1059
- "parsedOptions": [32],
1060
- "selectedValues": [32],
1061
- "sortedOptions": [32],
1062
- "filterText": [32],
1063
- "isFilterable": [32],
1064
- "modeState": [32],
1065
- "getFilterText": [64],
1066
- "resetFilter": [64],
1067
- "getSelectedValues": [64]
1068
- }, [[0, "openChanged", "handleOpenChanged"], [0, "itemChecked", "handleItemChecked"], [0, "slotchange", "handleSlotChange"], [0, "keydown", "handleKeyDown"]], {
1069
- "options": ["handleOptionsChange"],
1070
- "value": ["watchValueHandler"],
1071
- "filterable": ["watchFilterableHandler"],
1072
- "mode": ["handleModeChange"]
1073
- }]);
1074
- function defineCustomElement$1() {
1075
- if (typeof customElements === "undefined") {
1076
- return;
1077
- }
1078
- const components = ["nv-fieldmultiselect", "nv-badge", "nv-fieldcheckbox", "nv-fielddropdownitemcheck", "nv-icon", "nv-iconbutton", "nv-loader", "nv-popover"];
1079
- components.forEach(tagName => { switch (tagName) {
1080
- case "nv-fieldmultiselect":
1081
- if (!customElements.get(tagName)) {
1082
- customElements.define(tagName, NvFieldmultiselect$1);
1083
- }
1084
- break;
1085
- case "nv-badge":
1086
- if (!customElements.get(tagName)) {
1087
- defineCustomElement$8();
1088
- }
1089
- break;
1090
- case "nv-fieldcheckbox":
1091
- if (!customElements.get(tagName)) {
1092
- defineCustomElement$7();
1093
- }
1094
- break;
1095
- case "nv-fielddropdownitemcheck":
1096
- if (!customElements.get(tagName)) {
1097
- defineCustomElement$6();
1098
- }
1099
- break;
1100
- case "nv-icon":
1101
- if (!customElements.get(tagName)) {
1102
- defineCustomElement$5();
1103
- }
1104
- break;
1105
- case "nv-iconbutton":
1106
- if (!customElements.get(tagName)) {
1107
- defineCustomElement$4();
1108
- }
1109
- break;
1110
- case "nv-loader":
1111
- if (!customElements.get(tagName)) {
1112
- defineCustomElement$3();
1113
- }
1114
- break;
1115
- case "nv-popover":
1116
- if (!customElements.get(tagName)) {
1117
- defineCustomElement$2();
1118
- }
1119
- break;
1120
- } });
1121
- }
1122
- defineCustomElement$1();
1123
-
1124
- const NvFieldmultiselect = NvFieldmultiselect$1;
1125
- const defineCustomElement = defineCustomElement$1;
1126
-
1127
- export { NvFieldmultiselect, defineCustomElement };
1128
-
1129
- //# sourceMappingURL=nv-fieldmultiselect.js.map