@watermarkinsights/ripple 3.14.1 → 3.15.0-0

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 (309) hide show
  1. package/README.md +3 -3
  2. package/dist/cjs/{chartFunctions-0ea0888f.js → chartFunctions-34fdd3ce.js} +420 -420
  3. package/dist/cjs/{functions-8d3ceccd.js → functions-120449cf.js} +450 -1894
  4. package/dist/cjs/{global-12a09ffa.js → global-8298f15f.js} +62 -62
  5. package/dist/cjs/{http-service-9e8c4dd5.js → http-service-494d81de.js} +49 -49
  6. package/dist/cjs/{index-df6a3611.js → index-acad7ab3.js} +1 -4
  7. package/dist/cjs/{interfaces-30a74c1f.js → interfaces-a3338581.js} +29 -29
  8. package/dist/cjs/loader.cjs.js +4 -4
  9. package/dist/cjs/priv-chart-popover.cjs.entry.js +87 -87
  10. package/dist/cjs/priv-datepicker.cjs.entry.js +658 -658
  11. package/dist/cjs/priv-navigator-button.cjs.entry.js +19 -19
  12. package/dist/cjs/priv-navigator-item.cjs.entry.js +24 -24
  13. package/dist/cjs/ripple.cjs.js +4 -4
  14. package/dist/cjs/wm-action-menu_2.cjs.entry.js +330 -336
  15. package/dist/cjs/wm-button.cjs.entry.js +249 -242
  16. package/dist/cjs/wm-chart-slice.cjs.entry.js +14 -14
  17. package/dist/cjs/wm-chart.cjs.entry.js +111 -111
  18. package/dist/cjs/wm-datepicker.cjs.entry.js +266 -266
  19. package/dist/cjs/wm-input.cjs.entry.js +135 -135
  20. package/dist/cjs/wm-modal-footer.cjs.entry.js +34 -34
  21. package/dist/cjs/wm-modal-header.cjs.entry.js +37 -37
  22. package/dist/cjs/wm-modal.cjs.entry.js +164 -164
  23. package/dist/cjs/wm-navigation_3.cjs.entry.js +228 -228
  24. package/dist/cjs/wm-navigator.cjs.entry.js +269 -269
  25. package/dist/cjs/wm-network-uploader.cjs.entry.js +455 -455
  26. package/dist/cjs/wm-option_2.cjs.entry.js +721 -721
  27. package/dist/cjs/wm-pagination.cjs.entry.js +168 -168
  28. package/dist/cjs/wm-progress-indicator_3.cjs.entry.js +130 -130
  29. package/dist/cjs/wm-search.cjs.entry.js +233 -233
  30. package/dist/cjs/wm-snackbar.cjs.entry.js +171 -171
  31. package/dist/cjs/wm-tab-item_3.cjs.entry.js +297 -297
  32. package/dist/cjs/wm-tag-input.cjs.entry.js +580 -580
  33. package/dist/cjs/wm-timepicker.cjs.entry.js +384 -384
  34. package/dist/cjs/wm-toggletip.cjs.entry.js +125 -125
  35. package/dist/cjs/wm-uploader.cjs.entry.js +607 -630
  36. package/dist/cjs/wm-wrapper.cjs.entry.js +13 -13
  37. package/dist/collection/collection-manifest.json +1 -1
  38. package/dist/collection/components/charts/priv-chart-popover/priv-chart-popover.js +258 -258
  39. package/dist/collection/components/charts/wm-chart/wm-chart-slice.js +115 -115
  40. package/dist/collection/components/charts/wm-chart/wm-chart.js +328 -328
  41. package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.js +195 -195
  42. package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.js +88 -88
  43. package/dist/collection/components/charts/wm-progress-monitor/wm-progress-slice.js +111 -111
  44. package/dist/collection/components/wm-action-menu/wm-action-menu.js +442 -448
  45. package/dist/collection/components/wm-button/wm-button.js +545 -504
  46. package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.js +1024 -1024
  47. package/dist/collection/components/wm-datepicker/wm-datepicker.js +471 -471
  48. package/dist/collection/components/wm-input/wm-input.js +423 -423
  49. package/dist/collection/components/wm-menuitem/wm-menuitem.js +444 -444
  50. package/dist/collection/components/wm-modal/wm-modal-footer.js +136 -136
  51. package/dist/collection/components/wm-modal/wm-modal-header.js +87 -87
  52. package/dist/collection/components/wm-modal/wm-modal.js +461 -461
  53. package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js +162 -162
  54. package/dist/collection/components/wm-navigation/wm-navigation-item.js +121 -121
  55. package/dist/collection/components/wm-navigation/wm-navigation.js +218 -218
  56. package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js +97 -97
  57. package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js +114 -114
  58. package/dist/collection/components/wm-navigator/wm-navigator.js +468 -468
  59. package/dist/collection/components/wm-option/wm-option.js +428 -428
  60. package/dist/collection/components/wm-pagination/wm-pagination.js +368 -368
  61. package/dist/collection/components/wm-search/wm-search.js +480 -480
  62. package/dist/collection/components/wm-select/wm-select.js +1001 -1001
  63. package/dist/collection/components/wm-snackbar/wm-snackbar.js +297 -297
  64. package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js +216 -216
  65. package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js +330 -330
  66. package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js +104 -104
  67. package/dist/collection/components/wm-tag-input/wm-tag-input.js +810 -810
  68. package/dist/collection/components/wm-timepicker/wm-timepicker.js +583 -583
  69. package/dist/collection/components/wm-toggletip/wm-toggletip.js +241 -241
  70. package/dist/collection/components/wm-uploader/wm-network-uploader/wm-network-uploader.js +787 -787
  71. package/dist/collection/components/wm-uploader/wm-uploader.js +1050 -1072
  72. package/dist/collection/components/wm-wrapper/wm-wrapper.js +27 -27
  73. package/dist/collection/dev/scripts.js +20 -20
  74. package/dist/collection/global/__mocks__/functions.js +6 -6
  75. package/dist/collection/global/chartFunctions.js +421 -421
  76. package/dist/collection/global/functions.js +441 -441
  77. package/dist/collection/global/global.js +69 -69
  78. package/dist/collection/global/interfaces.js +49 -49
  79. package/dist/collection/global/services/__mocks__/http-service.js +130 -130
  80. package/dist/collection/global/services/http-service.js +50 -50
  81. package/dist/collection/lang/lang.js +5 -5
  82. package/dist/collection/lang/missing.js +43 -43
  83. package/dist/collection/lang/piglatin.js +93 -93
  84. package/dist/esm/{chartFunctions-6f90586d.js → chartFunctions-20f05eb5.js} +420 -420
  85. package/dist/esm/{functions-11c0c4e2.js → functions-036af8dc.js} +450 -1894
  86. package/dist/esm/{global-5abca73e.js → global-bde81db9.js} +62 -62
  87. package/dist/esm/{http-service-5d037e16.js → http-service-3dc3b3e7.js} +49 -49
  88. package/dist/esm/{index-17c79cc6.js → index-7603f98e.js} +1 -4
  89. package/dist/esm/{interfaces-61c6305b.js → interfaces-2b97fab2.js} +29 -29
  90. package/dist/esm/loader.js +4 -4
  91. package/dist/esm/polyfills/core-js.js +0 -0
  92. package/dist/esm/polyfills/css-shim.js +1 -1
  93. package/dist/esm/polyfills/dom.js +0 -0
  94. package/dist/esm/polyfills/es5-html-element.js +0 -0
  95. package/dist/esm/polyfills/index.js +0 -0
  96. package/dist/esm/polyfills/system.js +0 -0
  97. package/dist/esm/priv-chart-popover.entry.js +87 -87
  98. package/dist/esm/priv-datepicker.entry.js +658 -658
  99. package/dist/esm/priv-navigator-button.entry.js +19 -19
  100. package/dist/esm/priv-navigator-item.entry.js +24 -24
  101. package/dist/esm/ripple.js +4 -4
  102. package/dist/esm/wm-action-menu_2.entry.js +330 -336
  103. package/dist/esm/wm-button.entry.js +249 -242
  104. package/dist/esm/wm-chart-slice.entry.js +14 -14
  105. package/dist/esm/wm-chart.entry.js +111 -111
  106. package/dist/esm/wm-datepicker.entry.js +266 -266
  107. package/dist/esm/wm-input.entry.js +135 -135
  108. package/dist/esm/wm-modal-footer.entry.js +34 -34
  109. package/dist/esm/wm-modal-header.entry.js +37 -37
  110. package/dist/esm/wm-modal.entry.js +164 -164
  111. package/dist/esm/wm-navigation_3.entry.js +228 -228
  112. package/dist/esm/wm-navigator.entry.js +269 -269
  113. package/dist/esm/wm-network-uploader.entry.js +455 -455
  114. package/dist/esm/wm-option_2.entry.js +721 -721
  115. package/dist/esm/wm-pagination.entry.js +168 -168
  116. package/dist/esm/wm-progress-indicator_3.entry.js +130 -130
  117. package/dist/esm/wm-search.entry.js +233 -233
  118. package/dist/esm/wm-snackbar.entry.js +171 -171
  119. package/dist/esm/wm-tab-item_3.entry.js +297 -297
  120. package/dist/esm/wm-tag-input.entry.js +580 -580
  121. package/dist/esm/wm-timepicker.entry.js +384 -384
  122. package/dist/esm/wm-toggletip.entry.js +125 -125
  123. package/dist/esm/wm-uploader.entry.js +607 -630
  124. package/dist/esm/wm-wrapper.entry.js +13 -13
  125. package/dist/esm-es5/{chartFunctions-6f90586d.js → chartFunctions-20f05eb5.js} +1 -1
  126. package/dist/esm-es5/functions-036af8dc.js +15 -0
  127. package/dist/esm-es5/global-bde81db9.js +1 -0
  128. package/dist/esm-es5/{http-service-5d037e16.js → http-service-3dc3b3e7.js} +0 -0
  129. package/dist/esm-es5/{index-17c79cc6.js → index-7603f98e.js} +1 -1
  130. package/dist/esm-es5/{interfaces-61c6305b.js → interfaces-2b97fab2.js} +0 -0
  131. package/dist/esm-es5/loader.js +1 -1
  132. package/dist/esm-es5/priv-chart-popover.entry.js +1 -1
  133. package/dist/esm-es5/priv-datepicker.entry.js +1 -1
  134. package/dist/esm-es5/priv-navigator-button.entry.js +1 -1
  135. package/dist/esm-es5/priv-navigator-item.entry.js +1 -1
  136. package/dist/esm-es5/ripple.js +1 -1
  137. package/dist/esm-es5/wm-action-menu_2.entry.js +1 -1
  138. package/dist/esm-es5/wm-button.entry.js +1 -1
  139. package/dist/esm-es5/wm-chart-slice.entry.js +1 -1
  140. package/dist/esm-es5/wm-chart.entry.js +1 -1
  141. package/dist/esm-es5/wm-datepicker.entry.js +1 -1
  142. package/dist/esm-es5/wm-input.entry.js +1 -1
  143. package/dist/esm-es5/wm-modal-footer.entry.js +1 -1
  144. package/dist/esm-es5/wm-modal-header.entry.js +1 -1
  145. package/dist/esm-es5/wm-modal.entry.js +1 -1
  146. package/dist/esm-es5/wm-navigation_3.entry.js +1 -1
  147. package/dist/esm-es5/wm-navigator.entry.js +1 -1
  148. package/dist/esm-es5/wm-network-uploader.entry.js +1 -1
  149. package/dist/esm-es5/wm-option_2.entry.js +1 -1
  150. package/dist/esm-es5/wm-pagination.entry.js +1 -1
  151. package/dist/esm-es5/wm-progress-indicator_3.entry.js +1 -1
  152. package/dist/esm-es5/wm-search.entry.js +1 -1
  153. package/dist/esm-es5/wm-snackbar.entry.js +1 -1
  154. package/dist/esm-es5/wm-tab-item_3.entry.js +1 -1
  155. package/dist/esm-es5/wm-tag-input.entry.js +1 -1
  156. package/dist/esm-es5/wm-timepicker.entry.js +1 -1
  157. package/dist/esm-es5/wm-toggletip.entry.js +1 -1
  158. package/dist/esm-es5/wm-uploader.entry.js +1 -1
  159. package/dist/esm-es5/wm-wrapper.entry.js +1 -1
  160. package/dist/ripple/{p-b5b7c71f.system.js → p-04d8b674.system.js} +1 -1
  161. package/dist/ripple/{p-c49ef079.system.entry.js → p-04e44b30.system.entry.js} +1 -1
  162. package/dist/ripple/{p-2af0b657.system.entry.js → p-0556279c.system.entry.js} +1 -1
  163. package/dist/ripple/{p-07ebdcd4.system.entry.js → p-06adbeb9.system.entry.js} +1 -1
  164. package/dist/ripple/{p-fe4c1194.system.entry.js → p-0e9ccc6f.system.entry.js} +1 -1
  165. package/dist/ripple/p-17ceb8c1.entry.js +1 -0
  166. package/dist/ripple/p-1887286e.entry.js +1 -0
  167. package/dist/ripple/p-1a53c470.entry.js +1 -0
  168. package/dist/ripple/{p-06012eb7.system.entry.js → p-1ccd994d.system.entry.js} +1 -1
  169. package/dist/ripple/p-1d795f42.entry.js +1 -0
  170. package/dist/ripple/{p-59678b70.system.entry.js → p-1df2adee.system.entry.js} +1 -1
  171. package/dist/ripple/p-2f860b24.entry.js +1 -0
  172. package/dist/ripple/p-358bde27.entry.js +1 -0
  173. package/dist/ripple/p-3680b55d.entry.js +1 -0
  174. package/dist/ripple/p-3a1d6fc4.entry.js +1 -0
  175. package/dist/ripple/{p-f17076c4.system.entry.js → p-3b3e847c.system.entry.js} +1 -1
  176. package/dist/ripple/{p-b2a9b5d6.system.entry.js → p-416899da.system.entry.js} +1 -1
  177. package/dist/ripple/p-4284c8a4.entry.js +1 -0
  178. package/dist/ripple/{p-888bec42.js → p-43f1298b.js} +0 -0
  179. package/dist/ripple/{p-d927de70.system.entry.js → p-49fd7ede.system.entry.js} +1 -1
  180. package/dist/ripple/p-4d59fe86.entry.js +1 -0
  181. package/dist/ripple/{p-490dafa4.js → p-4ecd3430.js} +1 -1
  182. package/dist/ripple/{p-8b54c589.system.entry.js → p-62eac2d6.system.entry.js} +1 -1
  183. package/dist/ripple/p-6aa6a818.entry.js +1 -0
  184. package/dist/ripple/{p-08fc668c.system.entry.js → p-7173b0a7.system.entry.js} +1 -1
  185. package/dist/ripple/p-726c979a.system.js +15 -0
  186. package/dist/ripple/{p-4439bdd1.system.entry.js → p-752da0fb.system.entry.js} +1 -1
  187. package/dist/ripple/p-7ae1a630.entry.js +1 -0
  188. package/dist/ripple/p-7ecbf258.entry.js +1 -0
  189. package/dist/ripple/{p-910b6dd5.system.entry.js → p-7ef6a7cf.system.entry.js} +1 -1
  190. package/dist/ripple/p-7fae0cc2.entry.js +1 -0
  191. package/dist/ripple/{p-c4c21c82.system.entry.js → p-895f5ec5.system.entry.js} +1 -1
  192. package/dist/ripple/p-8de546e8.entry.js +1 -0
  193. package/dist/ripple/{p-27253ed2.system.entry.js → p-90ed3268.system.entry.js} +1 -1
  194. package/dist/ripple/p-93d9dbcb.system.js +1 -0
  195. package/dist/ripple/p-93dee724.entry.js +1 -0
  196. package/dist/ripple/p-97c2b06f.entry.js +1 -0
  197. package/dist/ripple/{p-84d0d2ff.system.entry.js → p-995ba16f.system.entry.js} +1 -1
  198. package/dist/ripple/{p-4650a83c.system.entry.js → p-9bad110c.system.entry.js} +1 -1
  199. package/dist/ripple/{p-313b6073.system.js → p-9d02957d.system.js} +0 -0
  200. package/dist/ripple/p-9e09d7a1.entry.js +1 -0
  201. package/dist/ripple/p-a04ba6c8.entry.js +1 -0
  202. package/dist/ripple/{p-726b9452.system.js → p-a0c3ef16.system.js} +1 -1
  203. package/dist/ripple/p-a53e06b0.js +1 -0
  204. package/dist/ripple/p-a9e0ce88.entry.js +1 -0
  205. package/dist/ripple/p-aa6b3c86.system.js +1 -0
  206. package/dist/ripple/{p-db44eb6f.system.entry.js → p-ae6cfbca.system.entry.js} +1 -1
  207. package/dist/ripple/{p-7cb0035a.system.entry.js → p-af3ce4fc.system.entry.js} +1 -1
  208. package/dist/ripple/p-b3c71506.js +1 -0
  209. package/dist/ripple/{p-6ffdab0d.system.entry.js → p-c1443a0e.system.entry.js} +1 -1
  210. package/dist/ripple/p-c26d0a1d.entry.js +1 -0
  211. package/dist/ripple/{p-ffc34819.system.entry.js → p-ca383a43.system.entry.js} +1 -1
  212. package/dist/ripple/{p-57a718f0.system.entry.js → p-cd3d74d1.system.entry.js} +1 -1
  213. package/dist/ripple/{p-b4837126.system.entry.js → p-d48c56c7.system.entry.js} +1 -1
  214. package/dist/ripple/p-de3367ee.js +16 -0
  215. package/dist/ripple/p-e083fca6.entry.js +1 -0
  216. package/dist/ripple/{p-f0d3ceb1.system.entry.js → p-e4439bc3.system.entry.js} +1 -1
  217. package/dist/ripple/p-e524d462.entry.js +1 -0
  218. package/dist/ripple/p-e8d39f68.entry.js +1 -0
  219. package/dist/ripple/{p-dc7e5609.system.entry.js → p-f23b3986.system.entry.js} +1 -1
  220. package/dist/ripple/{p-b793bc6f.system.entry.js → p-f3fc43ee.system.entry.js} +1 -1
  221. package/dist/ripple/p-f53ea7f2.entry.js +1 -0
  222. package/dist/ripple/{p-08b7ec08.system.js → p-f5df5903.system.js} +0 -0
  223. package/dist/ripple/p-fd5497f9.system.entry.js +1 -0
  224. package/dist/ripple/{p-a6d6eae7.js → p-fd8070fb.js} +0 -0
  225. package/dist/ripple/p-fda61e7e.entry.js +1 -0
  226. package/dist/ripple/p-fe952112.entry.js +1 -0
  227. package/dist/ripple/ripple.esm.js +1 -1
  228. package/dist/ripple/ripple.js +1 -1
  229. package/dist/types/components/charts/priv-chart-popover/priv-chart-popover.d.ts +27 -27
  230. package/dist/types/components/charts/wm-chart/wm-chart-slice.d.ts +11 -11
  231. package/dist/types/components/charts/wm-chart/wm-chart.d.ts +36 -36
  232. package/dist/types/components/charts/wm-progress-monitor/wm-progress-indicator.d.ts +27 -27
  233. package/dist/types/components/charts/wm-progress-monitor/wm-progress-monitor.d.ts +17 -17
  234. package/dist/types/components/charts/wm-progress-monitor/wm-progress-slice.d.ts +10 -10
  235. package/dist/types/components/wm-action-menu/wm-action-menu.d.ts +47 -47
  236. package/dist/types/components/wm-button/wm-button.d.ts +49 -43
  237. package/dist/types/components/wm-datepicker/priv-datepicker/priv-datepicker.d.ts +80 -80
  238. package/dist/types/components/wm-datepicker/wm-datepicker.d.ts +41 -41
  239. package/dist/types/components/wm-input/wm-input.d.ts +46 -46
  240. package/dist/types/components/wm-menuitem/wm-menuitem.d.ts +34 -34
  241. package/dist/types/components/wm-modal/wm-modal-footer.d.ts +14 -14
  242. package/dist/types/components/wm-modal/wm-modal-header.d.ts +11 -11
  243. package/dist/types/components/wm-modal/wm-modal.d.ts +41 -41
  244. package/dist/types/components/wm-navigation/wm-navigation-hamburger.d.ts +21 -21
  245. package/dist/types/components/wm-navigation/wm-navigation-item.d.ts +13 -13
  246. package/dist/types/components/wm-navigation/wm-navigation.d.ts +28 -28
  247. package/dist/types/components/wm-navigator/priv-navigator-button/priv-navigator-button.d.ts +10 -10
  248. package/dist/types/components/wm-navigator/priv-navigator-item/priv-navigator-item.d.ts +13 -13
  249. package/dist/types/components/wm-navigator/wm-navigator.d.ts +61 -61
  250. package/dist/types/components/wm-option/wm-option.d.ts +35 -35
  251. package/dist/types/components/wm-pagination/wm-pagination.d.ts +32 -32
  252. package/dist/types/components/wm-search/wm-search.d.ts +86 -86
  253. package/dist/types/components/wm-select/wm-select.d.ts +94 -94
  254. package/dist/types/components/wm-snackbar/wm-snackbar.d.ts +35 -35
  255. package/dist/types/components/wm-tabs/wm-tab-item/wm-tab-item.d.ts +38 -38
  256. package/dist/types/components/wm-tabs/wm-tab-list/wm-tab-list.d.ts +53 -53
  257. package/dist/types/components/wm-tabs/wm-tab-panel/wm-tab-panel.d.ts +20 -20
  258. package/dist/types/components/wm-tag-input/wm-tag-input.d.ts +92 -92
  259. package/dist/types/components/wm-timepicker/wm-timepicker.d.ts +61 -61
  260. package/dist/types/components/wm-toggletip/wm-toggletip.d.ts +27 -27
  261. package/dist/types/components/wm-uploader/wm-network-uploader/wm-network-uploader.d.ts +85 -85
  262. package/dist/types/components/wm-uploader/wm-uploader.d.ts +122 -118
  263. package/dist/types/components/wm-wrapper/wm-wrapper.d.ts +7 -7
  264. package/dist/types/components.d.ts +28 -24
  265. package/dist/types/global/__mocks__/functions.d.ts +6 -6
  266. package/dist/types/global/chartFunctions.d.ts +29 -29
  267. package/dist/types/global/functions.d.ts +42 -42
  268. package/dist/types/global/global.d.ts +1 -1
  269. package/dist/types/global/interfaces.d.ts +44 -44
  270. package/dist/types/global/services/__mocks__/http-service.d.ts +6 -6
  271. package/dist/types/global/services/http-service.d.ts +4 -4
  272. package/dist/types/lang/lang.d.ts +5 -5
  273. package/package.json +47 -47
  274. package/dist/esm-es5/functions-11c0c4e2.js +0 -1
  275. package/dist/esm-es5/global-5abca73e.js +0 -1
  276. package/dist/ripple/p-0e22a3a4.entry.js +0 -1
  277. package/dist/ripple/p-17438cd5.entry.js +0 -1
  278. package/dist/ripple/p-262c75ff.entry.js +0 -1
  279. package/dist/ripple/p-2e5cb321.entry.js +0 -1
  280. package/dist/ripple/p-37b0a23c.system.js +0 -1
  281. package/dist/ripple/p-3e875e87.system.entry.js +0 -1
  282. package/dist/ripple/p-4073ac6a.entry.js +0 -1
  283. package/dist/ripple/p-410687ea.entry.js +0 -1
  284. package/dist/ripple/p-42bf2cd4.system.js +0 -1
  285. package/dist/ripple/p-42dbd978.entry.js +0 -1
  286. package/dist/ripple/p-4afa52d4.entry.js +0 -1
  287. package/dist/ripple/p-4f3f7b2b.entry.js +0 -1
  288. package/dist/ripple/p-5018f8ae.entry.js +0 -1
  289. package/dist/ripple/p-57c94258.entry.js +0 -1
  290. package/dist/ripple/p-626d5017.entry.js +0 -1
  291. package/dist/ripple/p-70d0e993.js +0 -1
  292. package/dist/ripple/p-80a00759.entry.js +0 -1
  293. package/dist/ripple/p-80b62707.entry.js +0 -1
  294. package/dist/ripple/p-8a2cabf2.entry.js +0 -1
  295. package/dist/ripple/p-962f51ff.entry.js +0 -1
  296. package/dist/ripple/p-97683ddc.entry.js +0 -1
  297. package/dist/ripple/p-9c60325b.entry.js +0 -1
  298. package/dist/ripple/p-b0536ddb.entry.js +0 -1
  299. package/dist/ripple/p-c2abdcba.js +0 -1
  300. package/dist/ripple/p-c656fcf1.entry.js +0 -1
  301. package/dist/ripple/p-caef11cc.entry.js +0 -1
  302. package/dist/ripple/p-cb357a84.entry.js +0 -1
  303. package/dist/ripple/p-d2a11410.entry.js +0 -1
  304. package/dist/ripple/p-db899686.system.js +0 -1
  305. package/dist/ripple/p-dfa80ed1.entry.js +0 -1
  306. package/dist/ripple/p-e012273a.entry.js +0 -1
  307. package/dist/ripple/p-e2d5f8bd.js +0 -1
  308. package/dist/ripple/p-e4cb8aad.entry.js +0 -1
  309. package/dist/ripple/p-fa632547.entry.js +0 -1
@@ -2,734 +2,734 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-df6a3611.js');
6
- const functions = require('./functions-8d3ceccd.js');
5
+ const index = require('./index-acad7ab3.js');
6
+ const functions = require('./functions-120449cf.js');
7
7
 
8
8
  const wmOptionCss = ":host(:not(:last-child)),wm-option:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host,wm-option{display:block;cursor:pointer;position:relative;padding:1.25rem;background:#fff;font-family:inherit;list-style:none;color:#4a4a4a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host:focus,:host.focus,wm-option:focus,wm-option.focus{outline:none;background:#f4f4f4}:host.icon,wm-option.icon{color:#575195}:host .sr-only,wm-option .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.checkbox:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f131\";display:inline;margin-right:0.25rem;color:#575195}:host([aria-selected=true]),wm-option[aria-selected=true]{background:rgba(46, 27, 70, 0.05);font-weight:500}:host([aria-selected=true]) .checkbox:before,wm-option[aria-selected=true] .checkbox:before{content:\"\\f132\"}:host([aria-disabled=true]),wm-option[aria-disabled=true]{font-style:italic;color:#6b6b6b;cursor:default}:host([aria-disabled=true]) .checkbox:before,wm-option[aria-disabled=true] .checkbox:before{color:#6b6b6b}:host(.multi-option),wm-option.multi-option{background:unset}:host(.hidden),wm-option.hidden,:host(.filtered-out),wm-option.filtered-out{display:none}:host(.duplicate.last),wm-option.duplicate.last{border-bottom:12px solid rgba(46, 27, 70, 0.05)}:host(.hassubinfo),wm-option.hassubinfo{display:-ms-flexbox;display:flex}:host(.hassubinfo) .option-wrapper,wm-option.hassubinfo .option-wrapper{-ms-flex:1;flex:1}:host(.hassubinfo) .subinfo,wm-option.hassubinfo .subinfo{-ms-flex:none;flex:none}.subinfo{font-style:italic}.option-wrapper{display:inline-block}::slotted{font-family:inherit}::slotted(i){font-size:0.875rem}::slotted(i):before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;margin-right:0.625rem;pointer-events:none}:host(:focus),wm-option:focus{outline:none;background:#f4f4f4}:host(:hover){background:#f4f4f4;outline:none}";
9
9
 
10
- const Option = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- this.wmOptionSelected = index.createEvent(this, "wmOptionSelected", 7);
14
- this.wmKeyUpPressed = index.createEvent(this, "wmKeyUpPressed", 7);
15
- this.wmKeyDownPressed = index.createEvent(this, "wmKeyDownPressed", 7);
16
- this.wmEscKeyPressed = index.createEvent(this, "wmEscKeyPressed", 7);
17
- this.wmHomeKeyPressed = index.createEvent(this, "wmHomeKeyPressed", 7);
18
- this.wmEndKeyPressed = index.createEvent(this, "wmEndKeyPressed", 7);
19
- this.wmEnterKeyPressed = index.createEvent(this, "wmEnterKeyPressed", 7);
20
- this.wmLetterPressed = index.createEvent(this, "wmLetterPressed", 7);
21
- this.wmOptionBlurred = index.createEvent(this, "wmOptionBlurred", 7);
22
- this.subinfo = undefined;
23
- this.disabled = false;
24
- this.selected = false;
25
- this.focused = false;
26
- this.searchTerm = "";
27
- }
28
- get hostClasses() {
29
- let classes = [];
30
- if (this.subinfo) {
31
- classes.push("hassubinfo");
32
- }
33
- if (this.parentSelectEl.multiple) {
34
- classes.push("multi-option");
35
- }
36
- if (!this.el.textContent.toLowerCase().includes(this.searchTerm)) {
37
- classes.push("filtered-out");
38
- }
39
- return classes.join(" ");
40
- }
41
- get parentSelectEl() {
42
- var _a;
43
- return ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.nodeName) !== "WM-SELECT"
44
- ? this.el.getRootNode().host
45
- : this.el.parentElement;
46
- }
47
- handleKeydown(ev) {
48
- switch (ev.key) {
49
- case "ArrowUp":
50
- ev.preventDefault();
51
- this.wmKeyUpPressed.emit(this.el);
52
- break;
53
- case "ArrowDown":
54
- ev.preventDefault();
55
- this.wmKeyDownPressed.emit(this.el);
56
- break;
57
- case "Enter":
58
- ev.preventDefault();
59
- if (!this.disabled) {
60
- this.el.click();
61
- this.wmEnterKeyPressed.emit(this.el);
62
- }
63
- break;
64
- case " ":
65
- ev.preventDefault();
66
- this.el.click();
67
- break;
68
- case "Escape":
69
- ev.preventDefault();
70
- ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal
71
- this.wmEscKeyPressed.emit();
72
- break;
73
- case "Home":
74
- ev.preventDefault();
75
- this.wmHomeKeyPressed.emit();
76
- break;
77
- case "End":
78
- ev.preventDefault();
79
- this.wmEndKeyPressed.emit();
80
- break;
81
- default:
82
- this.wmLetterPressed.emit(ev.key);
83
- }
84
- }
85
- handleSelection() {
86
- if (!this.disabled) {
87
- // the parent wm-select is in charge of the actual selection
88
- // using ev.detail because ev.target returns the wm-select for duplicate options
89
- this.wmOptionSelected.emit(this.el);
90
- }
91
- }
92
- handleBlur(ev) {
93
- this.wmOptionBlurred.emit({ relatedTarget: ev.relatedTarget });
94
- }
95
- syncAriaSelected() {
96
- // this function only keeps the aria-selected attr in sync with the selected prop
97
- // all the logic for selecting / deselecting happens in the parent wm-select
98
- this.selected ? this.el.setAttribute("aria-selected", "true") : this.el.removeAttribute("aria-selected");
99
- }
100
- syncAriaDisabled() {
101
- this.disabled ? this.el.setAttribute("aria-disabled", "true") : this.el.removeAttribute("aria-disabled");
102
- }
103
- focusHandler(newValue) {
104
- if (newValue)
105
- this.el.focus();
106
- }
107
- updateDisabledOnClick() {
108
- if (this.disabled && this.el.onclick) {
109
- this.onClickFunc = this.el.onclick;
110
- this.el.onclick = null;
111
- }
112
- else if (!this.disabled && this.onClickFunc) {
113
- this.el.onclick = this.onClickFunc;
114
- }
115
- }
116
- handleSearch(ev) {
117
- // filter is case-insensitive, so
118
- this.searchTerm = ev.detail.searchTerm.toLowerCase();
119
- if (this.searchTerm) {
120
- const regexp = new RegExp(`${this.searchTerm}`, "gi");
121
- const boldedText = this.el.textContent.replace(regexp, (match) => `<strong>${match}</strong>`);
122
- // for voiceover, text splitting is read as separate phrases. i.e. hel<b>lo</b> will be read as "hel lo"
123
- // aria-hidden and sr-only is used to circumvent this
124
- this.textEl.innerHTML = boldedText;
125
- }
126
- else {
127
- this.textEl.innerHTML = this.el.textContent;
128
- }
129
- }
130
- componentWillLoad() {
131
- this.syncAriaSelected();
132
- this.syncAriaDisabled();
133
- this.updateDisabledOnClick();
134
- this.parentSelectEl.addEventListener("wmSelectSearchChanged", (ev) => this.handleSearch(ev));
135
- }
136
- render() {
137
- return (index.h(index.Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, index.h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, index.h("span", { "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), index.h("span", { class: "sr-only" }, this.el.textContent)), index.h("div", { class: "subinfo" }, this.subinfo)));
138
- }
139
- get el() { return index.getElement(this); }
140
- static get watchers() { return {
141
- "selected": ["syncAriaSelected"],
142
- "disabled": ["syncAriaDisabled", "updateDisabledOnClick"],
143
- "focused": ["focusHandler"]
144
- }; }
145
- };
10
+ let Option = class {
11
+ constructor(hostRef) {
12
+ index.registerInstance(this, hostRef);
13
+ this.wmOptionSelected = index.createEvent(this, "wmOptionSelected", 7);
14
+ this.wmKeyUpPressed = index.createEvent(this, "wmKeyUpPressed", 7);
15
+ this.wmKeyDownPressed = index.createEvent(this, "wmKeyDownPressed", 7);
16
+ this.wmEscKeyPressed = index.createEvent(this, "wmEscKeyPressed", 7);
17
+ this.wmHomeKeyPressed = index.createEvent(this, "wmHomeKeyPressed", 7);
18
+ this.wmEndKeyPressed = index.createEvent(this, "wmEndKeyPressed", 7);
19
+ this.wmEnterKeyPressed = index.createEvent(this, "wmEnterKeyPressed", 7);
20
+ this.wmLetterPressed = index.createEvent(this, "wmLetterPressed", 7);
21
+ this.wmOptionBlurred = index.createEvent(this, "wmOptionBlurred", 7);
22
+ this.subinfo = undefined;
23
+ this.disabled = false;
24
+ this.selected = false;
25
+ this.focused = false;
26
+ this.searchTerm = "";
27
+ }
28
+ get hostClasses() {
29
+ let classes = [];
30
+ if (this.subinfo) {
31
+ classes.push("hassubinfo");
32
+ }
33
+ if (this.parentSelectEl.multiple) {
34
+ classes.push("multi-option");
35
+ }
36
+ if (!this.el.textContent.toLowerCase().includes(this.searchTerm)) {
37
+ classes.push("filtered-out");
38
+ }
39
+ return classes.join(" ");
40
+ }
41
+ get parentSelectEl() {
42
+ var _a;
43
+ return ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.nodeName) !== "WM-SELECT"
44
+ ? this.el.getRootNode().host
45
+ : this.el.parentElement;
46
+ }
47
+ handleKeydown(ev) {
48
+ switch (ev.key) {
49
+ case "ArrowUp":
50
+ ev.preventDefault();
51
+ this.wmKeyUpPressed.emit(this.el);
52
+ break;
53
+ case "ArrowDown":
54
+ ev.preventDefault();
55
+ this.wmKeyDownPressed.emit(this.el);
56
+ break;
57
+ case "Enter":
58
+ ev.preventDefault();
59
+ if (!this.disabled) {
60
+ this.el.click();
61
+ this.wmEnterKeyPressed.emit(this.el);
62
+ }
63
+ break;
64
+ case " ":
65
+ ev.preventDefault();
66
+ this.el.click();
67
+ break;
68
+ case "Escape":
69
+ ev.preventDefault();
70
+ ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal
71
+ this.wmEscKeyPressed.emit();
72
+ break;
73
+ case "Home":
74
+ ev.preventDefault();
75
+ this.wmHomeKeyPressed.emit();
76
+ break;
77
+ case "End":
78
+ ev.preventDefault();
79
+ this.wmEndKeyPressed.emit();
80
+ break;
81
+ default:
82
+ this.wmLetterPressed.emit(ev.key);
83
+ }
84
+ }
85
+ handleSelection() {
86
+ if (!this.disabled) {
87
+ // the parent wm-select is in charge of the actual selection
88
+ // using ev.detail because ev.target returns the wm-select for duplicate options
89
+ this.wmOptionSelected.emit(this.el);
90
+ }
91
+ }
92
+ handleBlur(ev) {
93
+ this.wmOptionBlurred.emit({ relatedTarget: ev.relatedTarget });
94
+ }
95
+ syncAriaSelected() {
96
+ // this function only keeps the aria-selected attr in sync with the selected prop
97
+ // all the logic for selecting / deselecting happens in the parent wm-select
98
+ this.selected ? this.el.setAttribute("aria-selected", "true") : this.el.removeAttribute("aria-selected");
99
+ }
100
+ syncAriaDisabled() {
101
+ this.disabled ? this.el.setAttribute("aria-disabled", "true") : this.el.removeAttribute("aria-disabled");
102
+ }
103
+ focusHandler(newValue) {
104
+ if (newValue)
105
+ this.el.focus();
106
+ }
107
+ updateDisabledOnClick() {
108
+ if (this.disabled && this.el.onclick) {
109
+ this.onClickFunc = this.el.onclick;
110
+ this.el.onclick = null;
111
+ }
112
+ else if (!this.disabled && this.onClickFunc) {
113
+ this.el.onclick = this.onClickFunc;
114
+ }
115
+ }
116
+ handleSearch(ev) {
117
+ // filter is case-insensitive, so
118
+ this.searchTerm = ev.detail.searchTerm.toLowerCase();
119
+ if (this.searchTerm) {
120
+ const regexp = new RegExp(`${this.searchTerm}`, "gi");
121
+ const boldedText = this.el.textContent.replace(regexp, (match) => `<strong>${match}</strong>`);
122
+ // for voiceover, text splitting is read as separate phrases. i.e. hel<b>lo</b> will be read as "hel lo"
123
+ // aria-hidden and sr-only is used to circumvent this
124
+ this.textEl.innerHTML = boldedText;
125
+ }
126
+ else {
127
+ this.textEl.innerHTML = this.el.textContent;
128
+ }
129
+ }
130
+ componentWillLoad() {
131
+ this.syncAriaSelected();
132
+ this.syncAriaDisabled();
133
+ this.updateDisabledOnClick();
134
+ this.parentSelectEl.addEventListener("wmSelectSearchChanged", (ev) => this.handleSearch(ev));
135
+ }
136
+ render() {
137
+ return (index.h(index.Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, index.h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, index.h("span", { "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), index.h("span", { class: "sr-only" }, this.el.textContent)), index.h("div", { class: "subinfo" }, this.subinfo)));
138
+ }
139
+ get el() { return index.getElement(this); }
140
+ static get watchers() { return {
141
+ "selected": ["syncAriaSelected"],
142
+ "disabled": ["syncAriaDisabled", "updateDisabledOnClick"],
143
+ "focused": ["focusHandler"]
144
+ }; }
145
+ };
146
146
  Option.style = wmOptionCss;
147
147
 
148
148
  const wmSelectCss = ":host{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}.wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}.wrapper .label .required{color:#c0392b}.wrapper.label-left{-ms-flex-direction:row;flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}.wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.wrapper.invalid .label{color:#c0392b}.wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}.wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}.wrapper .button-wrapper{position:relative;-ms-flex:1;flex:1;font-size:1.125rem;color:#575195;min-width:8.75rem}.wrapper .button-wrapper .displayedoption{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background:transparent;width:100%;border:solid 1px rgba(35, 35, 35, 0.6);padding:0 1.875rem 0 0.9375rem;cursor:pointer;height:2.5rem;line-height:normal;font-family:inherit;color:#575195;font-weight:400;font-size:0.875rem;text-transform:none;text-align:left}@media only screen and (max-width: 768px){.wrapper .button-wrapper .displayedoption{height:2.75rem}}.wrapper .button-wrapper .displayedoption:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f140\";position:absolute;right:0.5625rem;pointer-events:none}.wrapper .button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:transparent;text-decoration:none}.wrapper .button-wrapper .displayedoption:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}.wrapper .button-wrapper .displayedoption:focus{outline:none}.wrapper .button-wrapper .displayedoption::-moz-focus-inner{border:0}.wrapper .button-wrapper .displayedoption.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}.wrapper .button-wrapper .displayedoption.user-is-tabbing:focus::-moz-focus-inner{border:0}.wrapper .button-wrapper .displayedoption .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-ms-flex:1;flex:1}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo{display:-ms-flexbox;display:flex}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text{-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;min-width:0}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo{-ms-flex:none;flex:none;font-style:italic}.wrapper .button-wrapper .displayedoption .overflow-counter{font-weight:bold;margin-left:0.5rem}.wrapper .button-wrapper>.displayedoption[disabled]{color:#6b6b6b;border-color:#8a8a8a;background:#f0f0f0;cursor:default}.wrapper .button-wrapper>.dropdown{-webkit-overflow-scrolling:touch;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:0;right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}.wrapper .button-wrapper>.dropdown.upwards{top:unset;bottom:calc(100% - 2.5rem);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.wrapper .button-wrapper>.dropdown.hidden{visibility:hidden}.wrapper .button-wrapper>.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}.wrapper.invalid .button-wrapper .displayedoption{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}.wrapper .error-message{color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:0.25rem;display:block;top:100%;left:0;font-style:italic}.options-wrapper{max-height:12.5rem;overflow:auto}.search{-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:2px solid rgba(46, 27, 70, 0.05);padding:1.25rem}.search .searchfield-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.75rem;width:100%;padding:0 0.75rem;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid #4a4a4a}.search .searchfield-wrapper:focus,.search .searchfield-wrapper.focus{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}.search .searchfield{width:100%;border:none;outline:none;font-family:inherit;font-size:0.875rem;margin-left:0.25rem}.search .icon:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f349\";color:#6b6b6b;font-size:0.875rem}.search-results-message{padding:1.25rem;color:#4a4a4a;font-size:0.875rem;font-style:italic}.rtl>.dropdown{-ms-transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;transform-origin:left top;left:0;right:auto}.rtl>.dropdown .option{padding-left:3rem;padding-right:1.25rem}.rtl>.displayedoption{padding:0 0.9375rem 0 1.875rem;text-align:right}.rtl>.displayedoption:before{right:auto;left:0.5625rem}";
149
149
 
150
- const Select = class {
151
- constructor(hostRef) {
152
- index.registerInstance(this, hostRef);
153
- this.wmSelectDidLoad = index.createEvent(this, "wmSelectDidLoad", 7);
154
- this.wmSelectBlurred = index.createEvent(this, "wmSelectBlurred", 7);
155
- this.wmSelectChanged = index.createEvent(this, "wmSelectChanged", 7);
156
- this.wmComponentBlurred = index.createEvent(this, "wmComponentBlurred", 7);
157
- this.wmSelectSearchChanged = index.createEvent(this, "wmSelectSearchChanged", 7);
158
- this.disabled = false;
159
- this.invalid = false;
160
- this.labelPosition = "top";
161
- this.requiredField = false;
162
- this.errorMessage = "";
163
- this.multiple = false;
164
- this.search = false;
165
- this.placeholder = functions.intl.formatMessage({
166
- id: "select.multiPlaceholder",
167
- defaultMessage: "Make a selection",
168
- description: "Placeholder text. Use imperative",
169
- });
170
- this.searchPlaceholder = functions.intl.formatMessage({
171
- id: "select.searchPlaceholder",
172
- defaultMessage: "Search",
173
- description: "Placeholder text. Use imperative",
174
- });
175
- this.allSelectedMessage = functions.intl.formatMessage({
176
- id: "select.allSelected",
177
- defaultMessage: "All selected",
178
- description: "Text displayed when all options are selected",
179
- });
180
- this.requiredMessage = functions.intl.formatMessage({
181
- id: "global.requiredField",
182
- defaultMessage: "required field",
183
- });
184
- this.isTabbing = false;
185
- this.isExpanded = false;
186
- this.announcement = "";
187
- this.keysSoFar = "";
188
- this.searchIndex = 0;
189
- this.keyClear = null;
190
- this.openUp = false;
191
- //////////////////////////////////////
192
- //////////////////////////////////////
193
- // for multiselect button text
194
- this.overflowCount = 0;
195
- this.displayedOptions = [];
196
- this.debouncedSearch = functions.debounce(() => {
197
- this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });
198
- if (this.filteredOptions.length) {
199
- this.announce(this.resultsFoundMessage);
200
- }
201
- else {
202
- this.announce(this.noResultsFoundMessage);
203
- }
204
- }, 150);
205
- }
206
- get childOptions() {
207
- return Array.from(this.el.querySelectorAll("wm-option"));
208
- }
209
- get duplicateOptions() {
210
- return Array.from(this.el.shadowRoot.querySelectorAll("wm-option"));
211
- }
212
- get allOptionEls() {
213
- // this includes both slotted wm-options and internally created wm-options
214
- return this.duplicateOptions.concat(this.childOptions);
215
- }
216
- get visibleOptionEls() {
217
- return this.allOptionEls.filter((option) => !option.classList.contains("hidden") && !option.classList.contains("filtered-out"));
218
- }
219
- //////////////////////////////////////
220
- // for search variants
221
- get searchTerm() {
222
- return this.searchFieldEl ? this.searchFieldEl.value : "";
223
- }
224
- get filteredOptions() {
225
- return this.childOptions.filter((option) => { var _a; return (_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.searchTerm.toLowerCase()); });
226
- }
227
- get selectedOptions() {
228
- return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
229
- }
230
- get allSelected() {
231
- return this.childOptions.filter((option) => option.selected).length === this.childOptions.length;
232
- }
233
- //////////////////////////////////////
234
- get resultsFoundMessage() {
235
- return functions.intl.formatMessage({
236
- id: "select.searchResultsFound",
237
- defaultMessage: "{numResults, plural, one {1 option found} other {# options found}}",
238
- description: "The message read by the screen reader, indicating how many results a search returned",
239
- }, { numResults: this.filteredOptions.length });
240
- }
241
- get noResultsFoundMessage() {
242
- return functions.intl.formatMessage({
243
- id: "select.noSearchResults",
244
- defaultMessage: "No results found. Please try your search again.",
245
- description: "The message displayed when no options pass the search filter",
246
- });
247
- }
248
- toggleTabbingOn() {
249
- this.isTabbing = true;
250
- }
251
- toggleTabbingOff() {
252
- this.isTabbing = false;
253
- }
254
- handleOptionSelection(ev) {
255
- const option = ev.detail;
256
- this.focusOption(option);
257
- if (!this.multiple) {
258
- // if the option was already selected, leave selected states untouched and don't fire the event
259
- if (!option.selected) {
260
- this.selectOption(option);
261
- const detail = { changedOption: option, selectedOptions: [option] };
262
- this.wmSelectChanged.emit(detail);
263
- // change is deprecated in favor of wmSelectChanged
264
- // because of issues with React wrappers when using native events name
265
- const event = new CustomEvent("change", { detail: detail });
266
- // @ts-ignore
267
- this.el.dispatchEvent(event);
268
- }
269
- this.close();
270
- }
271
- else {
272
- this.selectOption(option);
273
- // we pass the original option with the event, as it's the only one the devs know or care about
274
- // devs will typically set a `value` on the option, which is not copied over
275
- // we could have taken the value and put it on the duplicate option,
276
- // but this approach is more flexible (what if they want to have a data attribute?)
277
- const isDuplicate = option.classList.contains("duplicate");
278
- const originalOption = isDuplicate ? this.findCorrespondingOption(option) : option;
279
- const selectedOptions = this.childOptions.filter((o) => o.selected);
280
- const detail = { changedOption: originalOption, selectedOptions: selectedOptions };
281
- this.wmSelectChanged.emit(detail);
282
- // change is deprecated in favor of wmSelectChanged
283
- // because of issues with React wrappers when using native events name
284
- const event = new CustomEvent("change", { detail: detail });
285
- // @ts-ignore
286
- this.el.dispatchEvent(event);
287
- }
288
- }
289
- handleChildEnter() {
290
- // only occurs for multiselects. handle the click, then close
291
- this.close();
292
- }
293
- handleChildUp(ev) {
294
- this.moveUp(ev.detail);
295
- }
296
- handleChildDown(ev) {
297
- this.moveDown(ev.detail);
298
- }
299
- moveToFirstOption() {
300
- this.focusOption(this.visibleOptionEls[0]);
301
- }
302
- moveToLastOption() {
303
- this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
304
- }
305
- closePopupOnEscape() {
306
- this.close();
307
- }
308
- handleOptionBlur(ev) {
309
- // if the Option is blurred to something other than the component emit a blur event with the appropriate relatedTarget
310
- // keeps our component's blur events accurate, and closes when focusing browser address bar
311
- if (!this.isElOrChild(ev.detail.relatedTarget)) {
312
- const event = new CustomEvent("blur");
313
- // @ts-ignore
314
- event.relatedTarget = ev.detail.relatedTarget;
315
- this.el.dispatchEvent(event);
316
- }
317
- }
318
- handleClick(ev) {
319
- if (!this.isElOrChild(ev.target)) {
320
- this.close();
321
- }
322
- }
323
- handleButtonBlur(ev) {
324
- if (this.isElOrChild(ev.relatedTarget)) {
325
- // do not emit a blur event when opening the dropdown and focusing the Options
326
- ev.stopPropagation();
327
- }
328
- }
329
- handleSearchFieldBlur(ev) {
330
- this.searchFieldWrapperEl.classList.remove("focus");
331
- if (this.isElOrChild(ev.relatedTarget)) {
332
- // do not emit a blur event when moving from searchfield to options
333
- ev.stopPropagation();
334
- }
335
- }
336
- handleKey(ev) {
337
- switch (ev.key) {
338
- case "ArrowDown":
339
- if (this.isExpanded === false) {
340
- ev.preventDefault();
341
- this.open("next");
342
- }
343
- break;
344
- case "ArrowUp":
345
- if (this.isExpanded === false) {
346
- ev.preventDefault();
347
- this.open("previous");
348
- }
349
- break;
350
- }
351
- }
352
- componentWillLoad() {
353
- if (!this.label) {
354
- console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).");
355
- }
356
- this.el.focus = function () {
357
- if (!this.disabled) {
358
- this.shadowRoot.querySelector("button").focus();
359
- }
360
- };
361
- this.uid = this.el.id ? this.el.id : functions.generateId();
362
- if (document.body.classList.contains("wmcl-user-is-tabbing")) {
363
- this.toggleTabbingOn();
364
- }
365
- // set initial selections
366
- if (this.selectedOptions.length > 0) {
367
- this.selectedOptions.forEach((x) => {
368
- this.displayedOptions.push(x);
369
- });
370
- // single Select only, pre-select if no default option from dev
371
- }
372
- else if (!this.multiple) {
373
- this.selectOption(this.allOptionEls[0]);
374
- }
375
- }
376
- componentDidLoad() {
377
- this.wmSelectDidLoad.emit();
378
- this.dropdownEl.classList.add("hidden");
379
- index.forceUpdate(this.el);
380
- // Dev can overwrite the max-height rule set in the Sass file
381
- if (this.maxHeight) {
382
- this.listboxEl.style.maxHeight = this.maxHeight;
383
- }
384
- if (this.multiple) {
385
- this.updateOptionVisibility();
386
- }
387
- this.setButtonText();
388
- }
389
- componentWillUpdate() {
390
- if (this.multiple) {
391
- // find last visible duplicate option and apply .last class
392
- const visibleDuplicateOptions = this.visibleOptionEls.filter((option) => option.classList.contains("duplicate"));
393
- visibleDuplicateOptions.forEach((option, idx) => {
394
- if (idx === visibleDuplicateOptions.length - 1) {
395
- option.classList.add("last");
396
- }
397
- else {
398
- option.classList.remove("last");
399
- }
400
- });
401
- }
402
- }
403
- moveUp(el) {
404
- const prevEl = this.visibleOptionEls[this.visibleOptionEls.indexOf(el) - 1];
405
- if (prevEl) {
406
- // scroll option to top of dropdown if partially obscured / out of view
407
- if (prevEl.getBoundingClientRect().top < this.listboxEl.getBoundingClientRect().top) {
408
- this.scrollOptionToTop(prevEl);
409
- }
410
- this.focusOption(prevEl);
411
- }
412
- else if (this.search) {
413
- // if top of list and search variant, focus search field
414
- this.searchFieldEl.focus();
415
- }
416
- else {
417
- // if top of list, focus last element
418
- this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
419
- }
420
- }
421
- moveDown(el) {
422
- const nextEl = this.visibleOptionEls[this.visibleOptionEls.indexOf(el) + 1];
423
- if (nextEl) {
424
- // scroll option to bottom of dropdown if partially obscured / out of view
425
- if (nextEl.getBoundingClientRect().bottom > this.listboxEl.getBoundingClientRect().bottom) {
426
- this.scrollOptionToBottom(nextEl);
427
- }
428
- this.focusOption(nextEl);
429
- }
430
- else {
431
- // if end of list, focus first option in all variants
432
- this.focusOption(this.visibleOptionEls[0]);
433
- }
434
- }
435
- scrollOptionToTop(option) {
436
- this.listboxEl.scrollTop =
437
- option.getBoundingClientRect().top - this.listboxEl.getBoundingClientRect().top + this.listboxEl.scrollTop;
438
- }
439
- scrollOptionToBottom(option) {
440
- this.listboxEl.scrollTop =
441
- option.getBoundingClientRect().bottom -
442
- this.listboxEl.getBoundingClientRect().top +
443
- this.listboxEl.scrollTop -
444
- this.listboxEl.offsetHeight;
445
- }
446
- open(optionToSelect) {
447
- if (!this.disabled) {
448
- const elHeight = this.el.clientHeight;
449
- const buttonHeight = this.buttonEl.clientHeight;
450
- this.openUp = functions.shouldOpenUp(this.el, this.dropdownEl,
451
- // when opening up, dropdown covers both label and button
452
- elHeight,
453
- // when opening down, dropdown covers only the button
454
- buttonHeight);
455
- this.isExpanded = true;
456
- this.dropdownEl.classList.remove("hidden");
457
- window.requestAnimationFrame(() => {
458
- switch (optionToSelect) {
459
- case "next":
460
- // search variant focuses search field
461
- // all others focus option "after" last selected option (this can be the first option)
462
- if (this.search) {
463
- this.searchFieldEl.focus();
464
- this.listboxEl.scrollTop = 0;
465
- }
466
- else {
467
- this.moveDown(this.visibleOptionEls.filter((x) => x.selected).slice(-1)[0]);
468
- }
469
- break;
470
- case "previous":
471
- // search variant focuses last option
472
- // all others focus option "above" first selected option (this can be the last option)
473
- if (this.search) {
474
- this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
475
- }
476
- else {
477
- this.moveUp(this.visibleOptionEls.filter((x) => x.selected)[0]);
478
- }
479
- break;
480
- default:
481
- // search variant focuses search field
482
- // all others focus the selected option
483
- // if no option is selected (empty multiselect), focuses first option
484
- if (this.search) {
485
- this.searchFieldEl.focus();
486
- this.listboxEl.scrollTop = 0;
487
- }
488
- else if (this.selectedOptions.length > 0) {
489
- this.focusOption(this.visibleOptionEls.filter((x) => x.selected)[0]);
490
- }
491
- else {
492
- this.focusOption(this.visibleOptionEls[0]);
493
- }
494
- break;
495
- }
496
- });
497
- }
498
- }
499
- close(returnFocus = true) {
500
- if (this.isExpanded) {
501
- this.isExpanded = false;
502
- this.allOptionEls.map((i) => (i.focused = false));
503
- window.setTimeout(() => {
504
- this.dropdownEl.classList.add("hidden");
505
- if (this.multiple) {
506
- this.updateOptionVisibility();
507
- }
508
- // clear search field, reset filtered / bolded state of wm-options
509
- if (this.search) {
510
- this.searchFieldEl.value = "";
511
- this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });
512
- }
513
- // Returns focus to button after popup closes (no need if user is tabbing)
514
- // Delay is necessary for screenreader to get new expanded state before focus
515
- // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
516
- // also UX wise, it makes sense for the button to only be focused after the animation is complete
517
- if (returnFocus) {
518
- this.el.focus();
519
- }
520
- }, 150);
521
- }
522
- }
523
- updateOptionVisibility() {
524
- // this runs for search multiselects, where selected options are rendered at the top of the dropdown list
525
- // slotted wm-options are hidden if selected, and duplicate wm-options are made visible if selected
526
- this.childOptions.forEach((option, idx) => {
527
- const duplicateOption = this.duplicateOptions[idx];
528
- if (option.selected) {
529
- option.classList.add("hidden");
530
- duplicateOption.classList.remove("hidden");
531
- }
532
- else {
533
- option.classList.remove("hidden");
534
- duplicateOption.classList.add("hidden");
535
- }
536
- });
537
- }
538
- focusOption(option) {
539
- this.allOptionEls.forEach((i) => (i.focused = i === option));
540
- option.focus();
541
- }
542
- selectOption(option) {
543
- // beware of this function's name. For multiselect it actually toggles the selected state, so it can also deselect the option
544
- if (option.classList.contains("duplicate")) {
545
- // if clicking on a duplicate option, toggle selected property of real one, then rerender
546
- const correspondingOption = this.findCorrespondingOption(option);
547
- correspondingOption.selected = !correspondingOption.selected;
548
- index.forceUpdate(this.el);
549
- }
550
- else if (this.multiple) {
551
- option.selected = !option.selected;
552
- }
553
- else {
554
- this.childOptions.forEach((x) => (x.selected = x === option));
555
- }
556
- this.setButtonText();
557
- }
558
- findAndFocusOption(ev) {
559
- const character = ev.detail.toUpperCase();
560
- if (!this.keysSoFar) {
561
- for (var i = 0; i < this.allOptionEls.length; i++) {
562
- if (this.allOptionEls[i].focused) {
563
- this.searchIndex = i;
564
- }
565
- }
566
- }
567
- this.keysSoFar += character;
568
- this.clearKeysSoFarAfterDelay();
569
- var nextMatch = this.findMatchInRange(this.allOptionEls, this.searchIndex + 1, this.allOptionEls.length);
570
- if (!nextMatch) {
571
- nextMatch = this.findMatchInRange(this.allOptionEls, 0, this.searchIndex);
572
- }
573
- if (nextMatch) {
574
- this.focusOption(nextMatch);
575
- }
576
- }
577
- clearKeysSoFarAfterDelay() {
578
- if (this.keyClear) {
579
- window.clearTimeout(this.keyClear);
580
- this.keyClear = null;
581
- }
582
- this.keyClear = window.setTimeout(function () {
583
- this.keysSoFar = "";
584
- this.keyClear = null;
585
- }.bind(this), 500);
586
- }
587
- findMatchInRange(list, startIndex, endIndex) {
588
- // Find the first option starting with the keysSoFar substring, searching in
589
- // the specified range of options
590
- for (var n = startIndex; n < endIndex; n++) {
591
- var label = list[n].textContent;
592
- if (label && label.toUpperCase().indexOf(this.keysSoFar) === 0) {
593
- return list[n];
594
- }
595
- }
596
- return null;
597
- }
598
- findCorrespondingOption(el) {
599
- // if duplicate, returns the child wm-option
600
- // if child wm-option, returns duplicate
601
- const isDuplicate = el.classList.contains("duplicate");
602
- return isDuplicate
603
- ? this.childOptions[this.duplicateOptions.indexOf(el)]
604
- : this.duplicateOptions[this.childOptions.indexOf(el)];
605
- }
606
- isElOrChild(el) {
607
- var _a;
608
- // determines whether or not the element is the component, a child of the component, or exists within the component's shadowroot
609
- return el === this.el || this.el.contains(el) || ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(el));
610
- }
611
- exposeErrors() {
612
- // When the error changes, a new id is set for the error container and the button's aria-describedby attribute is updated accordingly. This is to make sure the screen reader announces teh updated errors in Firefox. See this longstanding bug: https://bugzilla.mozilla.org/show_bug.cgi?id=493683
613
- const newId = functions.generateId();
614
- this.errorContainer.id = `wm-errors-${newId}`;
615
- this.buttonEl.setAttribute("aria-describedby", `wm-errors-${newId}`);
616
- }
617
- renderErrorContainer() {
618
- return (index.h("div", { id: "wm-errors", class: this.errorMessage ? "error-message" : "", ref: (el) => (this.errorContainer = el), "aria-live": "assertive", "aria-atomic": "true" }, this.errorMessage));
619
- }
620
- handleComponentBlur(ev) {
621
- // Do not close or emit custom blur event when blurring to an element inside (wm-option)
622
- if (!this.el.contains(ev.relatedTarget)) {
623
- this.close(false);
624
- this.wmSelectBlurred.emit();
625
- this.wmComponentBlurred.emit(); // deprecated
626
- }
627
- }
628
- handleSearchFieldKeyDown(ev) {
629
- switch (ev.key) {
630
- case "ArrowDown":
631
- ev.preventDefault();
632
- if (this.visibleOptionEls.length) {
633
- this.focusOption(this.visibleOptionEls[0]);
634
- }
635
- break;
636
- case "ArrowUp":
637
- ev.preventDefault();
638
- if (this.visibleOptionEls.length) {
639
- this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
640
- }
641
- break;
642
- case "Escape":
643
- ev.preventDefault();
644
- this.close();
645
- break;
646
- }
647
- }
648
- setButtonText() {
649
- this.displayedOptions = this.childOptions
650
- .filter((x) => x.selected)
651
- .map((y) => (!y.classList.contains("hidden") ? y : this.findCorrespondingOption(y)));
652
- // handle overflow + counter for multiselect
653
- if (this.multiple) {
654
- // this is a fixed measurement accounting for the max width of a 3 character overflow counter
655
- const overflowCounterWidth = 38;
656
- const computedStyle = window.getComputedStyle(this.buttonEl);
657
- // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
658
- const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
659
- const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
660
- const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
661
- let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-wrapper").clientWidth);
662
- let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
663
- this.overflowCount = 0;
664
- while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
665
- this.overflowCount++;
666
- optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];
667
- optionsWidths.pop();
668
- this.displayedOptions.pop();
669
- }
670
- }
671
- }
672
- announce(message) {
673
- // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
674
- if (this.liveRegionEl.textContent === message) {
675
- message += "\u00A0";
676
- }
677
- this.announcement = message;
678
- }
679
- renderButtonText() {
680
- if (this.multiple && this.displayedOptions.length < 1) {
681
- return index.h("span", null, this.placeholder);
682
- }
683
- else if (this.multiple && this.allSelected && this.overflowCount > 0) {
684
- return this.allSelectedMessage;
685
- }
686
- else {
687
- return this.displayedOptions.map((x, idx) => (index.h("span", null, idx > 0 ? ", " : "", x.textContent)));
688
- }
689
- }
690
- renderSubinfo() {
691
- // multiselects cannot have subinfo for options
692
- if (!this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo) {
693
- return index.h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo);
694
- }
695
- }
696
- renderOverflowCount() {
697
- if (this.overflowCount > 0 && !this.allSelected) {
698
- return (index.h("span", null, index.h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
699
- }
700
- }
701
- renderSearchField() {
702
- return (index.h("div", { class: "search" }, index.h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, index.h("div", { class: "icon" }), index.h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": `list-${this.uid}`, "aria-expanded": this.isExpanded ? "true" : "false", onKeyDown: (ev) => this.handleSearchFieldKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
703
- }
704
- renderSearchFailedMessage() {
705
- return index.h("div", { class: "search-results-message" }, this.noResultsFoundMessage);
706
- }
707
- renderDuplicateOptions() {
708
- return Array.from(this.el.children).map((option) => {
709
- return (index.h("wm-option", { class: "duplicate", selected: option.selected }, option.textContent));
710
- });
711
- }
712
- render() {
713
- const buttonProps = {
714
- id: `selectbtn-${this.uid}`,
715
- ["disabled"]: this.disabled,
716
- ["aria-controls"]: `list-${this.uid}`,
717
- ["aria-labelledby"]: `label-${this.uid} selectbtn-${this.uid}`,
718
- ["aria-describedby"]: "wm-errors",
719
- ["aria-expanded"]: this.isExpanded ? "true" : "false",
720
- onClick: () => (this.isExpanded ? this.close() : this.open()),
721
- };
722
- return (index.h(index.Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.invalid || this.errorMessage ? "invalid" : ""}` }, index.h("div", { class: "label-wrapper" }, index.h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `selectbtn-${this.uid}` }, this.label,
723
- // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
724
- this.requiredField ? (index.h("span", { class: "required" }, index.h("span", { class: "sr-only" }, this.requiredMessage), index.h("span", { "aria-hidden": "true" }, "*"))) : (""))), index.h("div", { class: "button-wrapper" }, index.h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isTabbing ? "user-is-tabbing" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), index.h("span", { class: this.selectedOptions.length > 0 && this.selectedOptions.filter((x) => x.subinfo).length > 0
725
- ? "overflowcontrol hassubinfo"
726
- : "overflowcontrol" }, index.h("span", { class: "button-text" }, this.renderButtonText()), this.renderSubinfo()), this.renderOverflowCount()), index.h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), index.h("div", { id: `list-${this.uid}`, class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": `label-${this.uid}`, ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderDuplicateOptions(), index.h("slot", null))), this.renderErrorContainer(), index.h("div", { id: "announcement", "aria-live": "polite", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
727
- }
728
- get el() { return index.getElement(this); }
729
- static get watchers() { return {
730
- "errorMessage": ["exposeErrors"]
731
- }; }
732
- };
150
+ let Select = class {
151
+ constructor(hostRef) {
152
+ index.registerInstance(this, hostRef);
153
+ this.wmSelectDidLoad = index.createEvent(this, "wmSelectDidLoad", 7);
154
+ this.wmSelectBlurred = index.createEvent(this, "wmSelectBlurred", 7);
155
+ this.wmSelectChanged = index.createEvent(this, "wmSelectChanged", 7);
156
+ this.wmComponentBlurred = index.createEvent(this, "wmComponentBlurred", 7);
157
+ this.wmSelectSearchChanged = index.createEvent(this, "wmSelectSearchChanged", 7);
158
+ this.disabled = false;
159
+ this.invalid = false;
160
+ this.labelPosition = "top";
161
+ this.requiredField = false;
162
+ this.errorMessage = "";
163
+ this.multiple = false;
164
+ this.search = false;
165
+ this.placeholder = functions.intl.formatMessage({
166
+ id: "select.multiPlaceholder",
167
+ defaultMessage: "Make a selection",
168
+ description: "Placeholder text. Use imperative",
169
+ });
170
+ this.searchPlaceholder = functions.intl.formatMessage({
171
+ id: "select.searchPlaceholder",
172
+ defaultMessage: "Search",
173
+ description: "Placeholder text. Use imperative",
174
+ });
175
+ this.allSelectedMessage = functions.intl.formatMessage({
176
+ id: "select.allSelected",
177
+ defaultMessage: "All selected",
178
+ description: "Text displayed when all options are selected",
179
+ });
180
+ this.requiredMessage = functions.intl.formatMessage({
181
+ id: "global.requiredField",
182
+ defaultMessage: "required field",
183
+ });
184
+ this.isTabbing = false;
185
+ this.isExpanded = false;
186
+ this.announcement = "";
187
+ this.keysSoFar = "";
188
+ this.searchIndex = 0;
189
+ this.keyClear = null;
190
+ this.openUp = false;
191
+ //////////////////////////////////////
192
+ //////////////////////////////////////
193
+ // for multiselect button text
194
+ this.overflowCount = 0;
195
+ this.displayedOptions = [];
196
+ this.debouncedSearch = functions.debounce(() => {
197
+ this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });
198
+ if (this.filteredOptions.length) {
199
+ this.announce(this.resultsFoundMessage);
200
+ }
201
+ else {
202
+ this.announce(this.noResultsFoundMessage);
203
+ }
204
+ }, 150);
205
+ }
206
+ get childOptions() {
207
+ return Array.from(this.el.querySelectorAll("wm-option"));
208
+ }
209
+ get duplicateOptions() {
210
+ return Array.from(this.el.shadowRoot.querySelectorAll("wm-option"));
211
+ }
212
+ get allOptionEls() {
213
+ // this includes both slotted wm-options and internally created wm-options
214
+ return this.duplicateOptions.concat(this.childOptions);
215
+ }
216
+ get visibleOptionEls() {
217
+ return this.allOptionEls.filter((option) => !option.classList.contains("hidden") && !option.classList.contains("filtered-out"));
218
+ }
219
+ //////////////////////////////////////
220
+ // for search variants
221
+ get searchTerm() {
222
+ return this.searchFieldEl ? this.searchFieldEl.value : "";
223
+ }
224
+ get filteredOptions() {
225
+ return this.childOptions.filter((option) => { var _a; return (_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.searchTerm.toLowerCase()); });
226
+ }
227
+ get selectedOptions() {
228
+ return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
229
+ }
230
+ get allSelected() {
231
+ return this.childOptions.filter((option) => option.selected).length === this.childOptions.length;
232
+ }
233
+ //////////////////////////////////////
234
+ get resultsFoundMessage() {
235
+ return functions.intl.formatMessage({
236
+ id: "select.searchResultsFound",
237
+ defaultMessage: "{numResults, plural, one {1 option found} other {# options found}}",
238
+ description: "The message read by the screen reader, indicating how many results a search returned",
239
+ }, { numResults: this.filteredOptions.length });
240
+ }
241
+ get noResultsFoundMessage() {
242
+ return functions.intl.formatMessage({
243
+ id: "select.noSearchResults",
244
+ defaultMessage: "No results found. Please try your search again.",
245
+ description: "The message displayed when no options pass the search filter",
246
+ });
247
+ }
248
+ toggleTabbingOn() {
249
+ this.isTabbing = true;
250
+ }
251
+ toggleTabbingOff() {
252
+ this.isTabbing = false;
253
+ }
254
+ handleOptionSelection(ev) {
255
+ const option = ev.detail;
256
+ this.focusOption(option);
257
+ if (!this.multiple) {
258
+ // if the option was already selected, leave selected states untouched and don't fire the event
259
+ if (!option.selected) {
260
+ this.selectOption(option);
261
+ const detail = { changedOption: option, selectedOptions: [option] };
262
+ this.wmSelectChanged.emit(detail);
263
+ // change is deprecated in favor of wmSelectChanged
264
+ // because of issues with React wrappers when using native events name
265
+ const event = new CustomEvent("change", { detail: detail });
266
+ // @ts-ignore
267
+ this.el.dispatchEvent(event);
268
+ }
269
+ this.close();
270
+ }
271
+ else {
272
+ this.selectOption(option);
273
+ // we pass the original option with the event, as it's the only one the devs know or care about
274
+ // devs will typically set a `value` on the option, which is not copied over
275
+ // we could have taken the value and put it on the duplicate option,
276
+ // but this approach is more flexible (what if they want to have a data attribute?)
277
+ const isDuplicate = option.classList.contains("duplicate");
278
+ const originalOption = isDuplicate ? this.findCorrespondingOption(option) : option;
279
+ const selectedOptions = this.childOptions.filter((o) => o.selected);
280
+ const detail = { changedOption: originalOption, selectedOptions: selectedOptions };
281
+ this.wmSelectChanged.emit(detail);
282
+ // change is deprecated in favor of wmSelectChanged
283
+ // because of issues with React wrappers when using native events name
284
+ const event = new CustomEvent("change", { detail: detail });
285
+ // @ts-ignore
286
+ this.el.dispatchEvent(event);
287
+ }
288
+ }
289
+ handleChildEnter() {
290
+ // only occurs for multiselects. handle the click, then close
291
+ this.close();
292
+ }
293
+ handleChildUp(ev) {
294
+ this.moveUp(ev.detail);
295
+ }
296
+ handleChildDown(ev) {
297
+ this.moveDown(ev.detail);
298
+ }
299
+ moveToFirstOption() {
300
+ this.focusOption(this.visibleOptionEls[0]);
301
+ }
302
+ moveToLastOption() {
303
+ this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
304
+ }
305
+ closePopupOnEscape() {
306
+ this.close();
307
+ }
308
+ handleOptionBlur(ev) {
309
+ // if the Option is blurred to something other than the component emit a blur event with the appropriate relatedTarget
310
+ // keeps our component's blur events accurate, and closes when focusing browser address bar
311
+ if (!this.isElOrChild(ev.detail.relatedTarget)) {
312
+ const event = new CustomEvent("blur");
313
+ // @ts-ignore
314
+ event.relatedTarget = ev.detail.relatedTarget;
315
+ this.el.dispatchEvent(event);
316
+ }
317
+ }
318
+ handleClick(ev) {
319
+ if (!this.isElOrChild(ev.target)) {
320
+ this.close();
321
+ }
322
+ }
323
+ handleButtonBlur(ev) {
324
+ if (this.isElOrChild(ev.relatedTarget)) {
325
+ // do not emit a blur event when opening the dropdown and focusing the Options
326
+ ev.stopPropagation();
327
+ }
328
+ }
329
+ handleSearchFieldBlur(ev) {
330
+ this.searchFieldWrapperEl.classList.remove("focus");
331
+ if (this.isElOrChild(ev.relatedTarget)) {
332
+ // do not emit a blur event when moving from searchfield to options
333
+ ev.stopPropagation();
334
+ }
335
+ }
336
+ handleKey(ev) {
337
+ switch (ev.key) {
338
+ case "ArrowDown":
339
+ if (this.isExpanded === false) {
340
+ ev.preventDefault();
341
+ this.open("next");
342
+ }
343
+ break;
344
+ case "ArrowUp":
345
+ if (this.isExpanded === false) {
346
+ ev.preventDefault();
347
+ this.open("previous");
348
+ }
349
+ break;
350
+ }
351
+ }
352
+ componentWillLoad() {
353
+ if (!this.label) {
354
+ console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).");
355
+ }
356
+ this.el.focus = function () {
357
+ if (!this.disabled) {
358
+ this.shadowRoot.querySelector("button").focus();
359
+ }
360
+ };
361
+ this.uid = this.el.id ? this.el.id : functions.generateId();
362
+ if (document.body.classList.contains("wmcl-user-is-tabbing")) {
363
+ this.toggleTabbingOn();
364
+ }
365
+ // set initial selections
366
+ if (this.selectedOptions.length > 0) {
367
+ this.selectedOptions.forEach((x) => {
368
+ this.displayedOptions.push(x);
369
+ });
370
+ // single Select only, pre-select if no default option from dev
371
+ }
372
+ else if (!this.multiple) {
373
+ this.selectOption(this.allOptionEls[0]);
374
+ }
375
+ }
376
+ componentDidLoad() {
377
+ this.wmSelectDidLoad.emit();
378
+ this.dropdownEl.classList.add("hidden");
379
+ index.forceUpdate(this.el);
380
+ // Dev can overwrite the max-height rule set in the Sass file
381
+ if (this.maxHeight) {
382
+ this.listboxEl.style.maxHeight = this.maxHeight;
383
+ }
384
+ if (this.multiple) {
385
+ this.updateOptionVisibility();
386
+ }
387
+ this.setButtonText();
388
+ }
389
+ componentWillUpdate() {
390
+ if (this.multiple) {
391
+ // find last visible duplicate option and apply .last class
392
+ const visibleDuplicateOptions = this.visibleOptionEls.filter((option) => option.classList.contains("duplicate"));
393
+ visibleDuplicateOptions.forEach((option, idx) => {
394
+ if (idx === visibleDuplicateOptions.length - 1) {
395
+ option.classList.add("last");
396
+ }
397
+ else {
398
+ option.classList.remove("last");
399
+ }
400
+ });
401
+ }
402
+ }
403
+ moveUp(el) {
404
+ const prevEl = this.visibleOptionEls[this.visibleOptionEls.indexOf(el) - 1];
405
+ if (prevEl) {
406
+ // scroll option to top of dropdown if partially obscured / out of view
407
+ if (prevEl.getBoundingClientRect().top < this.listboxEl.getBoundingClientRect().top) {
408
+ this.scrollOptionToTop(prevEl);
409
+ }
410
+ this.focusOption(prevEl);
411
+ }
412
+ else if (this.search) {
413
+ // if top of list and search variant, focus search field
414
+ this.searchFieldEl.focus();
415
+ }
416
+ else {
417
+ // if top of list, focus last element
418
+ this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
419
+ }
420
+ }
421
+ moveDown(el) {
422
+ const nextEl = this.visibleOptionEls[this.visibleOptionEls.indexOf(el) + 1];
423
+ if (nextEl) {
424
+ // scroll option to bottom of dropdown if partially obscured / out of view
425
+ if (nextEl.getBoundingClientRect().bottom > this.listboxEl.getBoundingClientRect().bottom) {
426
+ this.scrollOptionToBottom(nextEl);
427
+ }
428
+ this.focusOption(nextEl);
429
+ }
430
+ else {
431
+ // if end of list, focus first option in all variants
432
+ this.focusOption(this.visibleOptionEls[0]);
433
+ }
434
+ }
435
+ scrollOptionToTop(option) {
436
+ this.listboxEl.scrollTop =
437
+ option.getBoundingClientRect().top - this.listboxEl.getBoundingClientRect().top + this.listboxEl.scrollTop;
438
+ }
439
+ scrollOptionToBottom(option) {
440
+ this.listboxEl.scrollTop =
441
+ option.getBoundingClientRect().bottom -
442
+ this.listboxEl.getBoundingClientRect().top +
443
+ this.listboxEl.scrollTop -
444
+ this.listboxEl.offsetHeight;
445
+ }
446
+ open(optionToSelect) {
447
+ if (!this.disabled) {
448
+ const elHeight = this.el.clientHeight;
449
+ const buttonHeight = this.buttonEl.clientHeight;
450
+ this.openUp = functions.shouldOpenUp(this.el, this.dropdownEl,
451
+ // when opening up, dropdown covers both label and button
452
+ elHeight,
453
+ // when opening down, dropdown covers only the button
454
+ buttonHeight);
455
+ this.isExpanded = true;
456
+ this.dropdownEl.classList.remove("hidden");
457
+ window.requestAnimationFrame(() => {
458
+ switch (optionToSelect) {
459
+ case "next":
460
+ // search variant focuses search field
461
+ // all others focus option "after" last selected option (this can be the first option)
462
+ if (this.search) {
463
+ this.searchFieldEl.focus();
464
+ this.listboxEl.scrollTop = 0;
465
+ }
466
+ else {
467
+ this.moveDown(this.visibleOptionEls.filter((x) => x.selected).slice(-1)[0]);
468
+ }
469
+ break;
470
+ case "previous":
471
+ // search variant focuses last option
472
+ // all others focus option "above" first selected option (this can be the last option)
473
+ if (this.search) {
474
+ this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
475
+ }
476
+ else {
477
+ this.moveUp(this.visibleOptionEls.filter((x) => x.selected)[0]);
478
+ }
479
+ break;
480
+ default:
481
+ // search variant focuses search field
482
+ // all others focus the selected option
483
+ // if no option is selected (empty multiselect), focuses first option
484
+ if (this.search) {
485
+ this.searchFieldEl.focus();
486
+ this.listboxEl.scrollTop = 0;
487
+ }
488
+ else if (this.selectedOptions.length > 0) {
489
+ this.focusOption(this.visibleOptionEls.filter((x) => x.selected)[0]);
490
+ }
491
+ else {
492
+ this.focusOption(this.visibleOptionEls[0]);
493
+ }
494
+ break;
495
+ }
496
+ });
497
+ }
498
+ }
499
+ close(returnFocus = true) {
500
+ if (this.isExpanded) {
501
+ this.isExpanded = false;
502
+ this.allOptionEls.map((i) => (i.focused = false));
503
+ window.setTimeout(() => {
504
+ this.dropdownEl.classList.add("hidden");
505
+ if (this.multiple) {
506
+ this.updateOptionVisibility();
507
+ }
508
+ // clear search field, reset filtered / bolded state of wm-options
509
+ if (this.search) {
510
+ this.searchFieldEl.value = "";
511
+ this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });
512
+ }
513
+ // Returns focus to button after popup closes (no need if user is tabbing)
514
+ // Delay is necessary for screenreader to get new expanded state before focus
515
+ // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
516
+ // also UX wise, it makes sense for the button to only be focused after the animation is complete
517
+ if (returnFocus) {
518
+ this.el.focus();
519
+ }
520
+ }, 150);
521
+ }
522
+ }
523
+ updateOptionVisibility() {
524
+ // this runs for search multiselects, where selected options are rendered at the top of the dropdown list
525
+ // slotted wm-options are hidden if selected, and duplicate wm-options are made visible if selected
526
+ this.childOptions.forEach((option, idx) => {
527
+ const duplicateOption = this.duplicateOptions[idx];
528
+ if (option.selected) {
529
+ option.classList.add("hidden");
530
+ duplicateOption.classList.remove("hidden");
531
+ }
532
+ else {
533
+ option.classList.remove("hidden");
534
+ duplicateOption.classList.add("hidden");
535
+ }
536
+ });
537
+ }
538
+ focusOption(option) {
539
+ this.allOptionEls.forEach((i) => (i.focused = i === option));
540
+ option.focus();
541
+ }
542
+ selectOption(option) {
543
+ // beware of this function's name. For multiselect it actually toggles the selected state, so it can also deselect the option
544
+ if (option.classList.contains("duplicate")) {
545
+ // if clicking on a duplicate option, toggle selected property of real one, then rerender
546
+ const correspondingOption = this.findCorrespondingOption(option);
547
+ correspondingOption.selected = !correspondingOption.selected;
548
+ index.forceUpdate(this.el);
549
+ }
550
+ else if (this.multiple) {
551
+ option.selected = !option.selected;
552
+ }
553
+ else {
554
+ this.childOptions.forEach((x) => (x.selected = x === option));
555
+ }
556
+ this.setButtonText();
557
+ }
558
+ findAndFocusOption(ev) {
559
+ const character = ev.detail.toUpperCase();
560
+ if (!this.keysSoFar) {
561
+ for (var i = 0; i < this.allOptionEls.length; i++) {
562
+ if (this.allOptionEls[i].focused) {
563
+ this.searchIndex = i;
564
+ }
565
+ }
566
+ }
567
+ this.keysSoFar += character;
568
+ this.clearKeysSoFarAfterDelay();
569
+ var nextMatch = this.findMatchInRange(this.allOptionEls, this.searchIndex + 1, this.allOptionEls.length);
570
+ if (!nextMatch) {
571
+ nextMatch = this.findMatchInRange(this.allOptionEls, 0, this.searchIndex);
572
+ }
573
+ if (nextMatch) {
574
+ this.focusOption(nextMatch);
575
+ }
576
+ }
577
+ clearKeysSoFarAfterDelay() {
578
+ if (this.keyClear) {
579
+ window.clearTimeout(this.keyClear);
580
+ this.keyClear = null;
581
+ }
582
+ this.keyClear = window.setTimeout(function () {
583
+ this.keysSoFar = "";
584
+ this.keyClear = null;
585
+ }.bind(this), 500);
586
+ }
587
+ findMatchInRange(list, startIndex, endIndex) {
588
+ // Find the first option starting with the keysSoFar substring, searching in
589
+ // the specified range of options
590
+ for (var n = startIndex; n < endIndex; n++) {
591
+ var label = list[n].textContent;
592
+ if (label && label.toUpperCase().indexOf(this.keysSoFar) === 0) {
593
+ return list[n];
594
+ }
595
+ }
596
+ return null;
597
+ }
598
+ findCorrespondingOption(el) {
599
+ // if duplicate, returns the child wm-option
600
+ // if child wm-option, returns duplicate
601
+ const isDuplicate = el.classList.contains("duplicate");
602
+ return isDuplicate
603
+ ? this.childOptions[this.duplicateOptions.indexOf(el)]
604
+ : this.duplicateOptions[this.childOptions.indexOf(el)];
605
+ }
606
+ isElOrChild(el) {
607
+ var _a;
608
+ // determines whether or not the element is the component, a child of the component, or exists within the component's shadowroot
609
+ return el === this.el || this.el.contains(el) || ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(el));
610
+ }
611
+ exposeErrors() {
612
+ // When the error changes, a new id is set for the error container and the button's aria-describedby attribute is updated accordingly. This is to make sure the screen reader announces teh updated errors in Firefox. See this longstanding bug: https://bugzilla.mozilla.org/show_bug.cgi?id=493683
613
+ const newId = functions.generateId();
614
+ this.errorContainer.id = `wm-errors-${newId}`;
615
+ this.buttonEl.setAttribute("aria-describedby", `wm-errors-${newId}`);
616
+ }
617
+ renderErrorContainer() {
618
+ return (index.h("div", { id: "wm-errors", class: this.errorMessage ? "error-message" : "", ref: (el) => (this.errorContainer = el), "aria-live": "assertive", "aria-atomic": "true" }, this.errorMessage));
619
+ }
620
+ handleComponentBlur(ev) {
621
+ // Do not close or emit custom blur event when blurring to an element inside (wm-option)
622
+ if (!this.el.contains(ev.relatedTarget)) {
623
+ this.close(false);
624
+ this.wmSelectBlurred.emit();
625
+ this.wmComponentBlurred.emit(); // deprecated
626
+ }
627
+ }
628
+ handleSearchFieldKeyDown(ev) {
629
+ switch (ev.key) {
630
+ case "ArrowDown":
631
+ ev.preventDefault();
632
+ if (this.visibleOptionEls.length) {
633
+ this.focusOption(this.visibleOptionEls[0]);
634
+ }
635
+ break;
636
+ case "ArrowUp":
637
+ ev.preventDefault();
638
+ if (this.visibleOptionEls.length) {
639
+ this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
640
+ }
641
+ break;
642
+ case "Escape":
643
+ ev.preventDefault();
644
+ this.close();
645
+ break;
646
+ }
647
+ }
648
+ setButtonText() {
649
+ this.displayedOptions = this.childOptions
650
+ .filter((x) => x.selected)
651
+ .map((y) => (!y.classList.contains("hidden") ? y : this.findCorrespondingOption(y)));
652
+ // handle overflow + counter for multiselect
653
+ if (this.multiple) {
654
+ // this is a fixed measurement accounting for the max width of a 3 character overflow counter
655
+ const overflowCounterWidth = 38;
656
+ const computedStyle = window.getComputedStyle(this.buttonEl);
657
+ // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
658
+ const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
659
+ const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
660
+ const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
661
+ let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-wrapper").clientWidth);
662
+ let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
663
+ this.overflowCount = 0;
664
+ while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
665
+ this.overflowCount++;
666
+ optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];
667
+ optionsWidths.pop();
668
+ this.displayedOptions.pop();
669
+ }
670
+ }
671
+ }
672
+ announce(message) {
673
+ // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
674
+ if (this.liveRegionEl.textContent === message) {
675
+ message += "\u00A0";
676
+ }
677
+ this.announcement = message;
678
+ }
679
+ renderButtonText() {
680
+ if (this.multiple && this.displayedOptions.length < 1) {
681
+ return index.h("span", null, this.placeholder);
682
+ }
683
+ else if (this.multiple && this.allSelected && this.overflowCount > 0) {
684
+ return this.allSelectedMessage;
685
+ }
686
+ else {
687
+ return this.displayedOptions.map((x, idx) => (index.h("span", null, idx > 0 ? ", " : "", x.textContent)));
688
+ }
689
+ }
690
+ renderSubinfo() {
691
+ // multiselects cannot have subinfo for options
692
+ if (!this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo) {
693
+ return index.h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo);
694
+ }
695
+ }
696
+ renderOverflowCount() {
697
+ if (this.overflowCount > 0 && !this.allSelected) {
698
+ return (index.h("span", null, index.h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
699
+ }
700
+ }
701
+ renderSearchField() {
702
+ return (index.h("div", { class: "search" }, index.h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, index.h("div", { class: "icon" }), index.h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": `list-${this.uid}`, "aria-expanded": this.isExpanded ? "true" : "false", onKeyDown: (ev) => this.handleSearchFieldKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
703
+ }
704
+ renderSearchFailedMessage() {
705
+ return index.h("div", { class: "search-results-message" }, this.noResultsFoundMessage);
706
+ }
707
+ renderDuplicateOptions() {
708
+ return Array.from(this.el.children).map((option) => {
709
+ return (index.h("wm-option", { class: "duplicate", selected: option.selected }, option.textContent));
710
+ });
711
+ }
712
+ render() {
713
+ const buttonProps = {
714
+ id: `selectbtn-${this.uid}`,
715
+ ["disabled"]: this.disabled,
716
+ ["aria-controls"]: `list-${this.uid}`,
717
+ ["aria-labelledby"]: `label-${this.uid} selectbtn-${this.uid}`,
718
+ ["aria-describedby"]: "wm-errors",
719
+ ["aria-expanded"]: this.isExpanded ? "true" : "false",
720
+ onClick: () => (this.isExpanded ? this.close() : this.open()),
721
+ };
722
+ return (index.h(index.Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.invalid || this.errorMessage ? "invalid" : ""}` }, index.h("div", { class: "label-wrapper" }, index.h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `selectbtn-${this.uid}` }, this.label,
723
+ // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
724
+ this.requiredField ? (index.h("span", { class: "required" }, index.h("span", { class: "sr-only" }, this.requiredMessage), index.h("span", { "aria-hidden": "true" }, "*"))) : (""))), index.h("div", { class: "button-wrapper" }, index.h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isTabbing ? "user-is-tabbing" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), index.h("span", { class: this.selectedOptions.length > 0 && this.selectedOptions.filter((x) => x.subinfo).length > 0
725
+ ? "overflowcontrol hassubinfo"
726
+ : "overflowcontrol" }, index.h("span", { class: "button-text" }, this.renderButtonText()), this.renderSubinfo()), this.renderOverflowCount()), index.h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), index.h("div", { id: `list-${this.uid}`, class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": `label-${this.uid}`, ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderDuplicateOptions(), index.h("slot", null))), this.renderErrorContainer(), index.h("div", { id: "announcement", "aria-live": "polite", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
727
+ }
728
+ get el() { return index.getElement(this); }
729
+ static get watchers() { return {
730
+ "errorMessage": ["exposeErrors"]
731
+ }; }
732
+ };
733
733
  Select.style = wmSelectCss;
734
734
 
735
735
  exports.wm_option = Option;