@watermarkinsights/ripple 3.7.0 → 3.8.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 (256) hide show
  1. package/README.md +3 -3
  2. package/dist/cjs/{functions-13b0e88e.js → functions-f0693632.js} +442 -442
  3. package/dist/cjs/{global-c802d13c.js → global-0d9945cb.js} +65 -65
  4. package/dist/cjs/{http-service-9e8c4dd5.js → http-service-494d81de.js} +49 -49
  5. package/dist/cjs/{interfaces-30a74c1f.js → interfaces-a3338581.js} +29 -29
  6. package/dist/cjs/loader.cjs.js +2 -2
  7. package/dist/cjs/priv-chart-popover.cjs.entry.js +79 -79
  8. package/dist/cjs/priv-datepicker.cjs.entry.js +673 -668
  9. package/dist/cjs/priv-navigator-button.cjs.entry.js +19 -19
  10. package/dist/cjs/priv-navigator-item.cjs.entry.js +23 -23
  11. package/dist/cjs/ripple.cjs.js +2 -2
  12. package/dist/cjs/wm-action-menu_2.cjs.entry.js +342 -342
  13. package/dist/cjs/wm-button.cjs.entry.js +237 -237
  14. package/dist/cjs/wm-chart-slice.cjs.entry.js +13 -13
  15. package/dist/cjs/wm-chart.cjs.entry.js +475 -475
  16. package/dist/cjs/wm-datepicker.cjs.entry.js +272 -263
  17. package/dist/cjs/wm-input.cjs.entry.js +135 -135
  18. package/dist/cjs/wm-modal-footer.cjs.entry.js +32 -32
  19. package/dist/cjs/wm-modal-header.cjs.entry.js +34 -34
  20. package/dist/cjs/wm-modal.cjs.entry.js +162 -162
  21. package/dist/cjs/wm-navigator.cjs.entry.js +269 -269
  22. package/dist/cjs/wm-network-uploader.cjs.entry.js +421 -421
  23. package/dist/cjs/wm-option_2.cjs.entry.js +496 -496
  24. package/dist/cjs/wm-pagination.cjs.entry.js +168 -168
  25. package/dist/cjs/wm-search.cjs.entry.js +233 -233
  26. package/dist/cjs/wm-snackbar.cjs.entry.js +171 -171
  27. package/dist/cjs/wm-tab-item_3.cjs.entry.js +298 -298
  28. package/dist/cjs/wm-tag-input.cjs.entry.js +580 -571
  29. package/dist/cjs/wm-timepicker.cjs.entry.js +384 -381
  30. package/dist/cjs/wm-toggletip.cjs.entry.js +125 -125
  31. package/dist/cjs/wm-uploader.cjs.entry.js +347 -347
  32. package/dist/cjs/wm-wrapper.cjs.entry.js +12 -12
  33. package/dist/collection/components/wm-action-menu/wm-action-menu.js +460 -460
  34. package/dist/collection/components/wm-button/wm-button.js +503 -503
  35. package/dist/collection/components/wm-chart/priv-chart-popover/priv-chart-popover.js +232 -232
  36. package/dist/collection/components/wm-chart/wm-chart-slice.js +64 -64
  37. package/dist/collection/components/wm-chart/wm-chart.css +3 -0
  38. package/dist/collection/components/wm-chart/wm-chart.js +718 -718
  39. package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.js +1039 -1015
  40. package/dist/collection/components/wm-datepicker/wm-datepicker.js +483 -468
  41. package/dist/collection/components/wm-input/wm-input.js +423 -423
  42. package/dist/collection/components/wm-menuitem/wm-menuitem.js +444 -444
  43. package/dist/collection/components/wm-modal/wm-modal-footer.js +141 -141
  44. package/dist/collection/components/wm-modal/wm-modal-header.js +92 -92
  45. package/dist/collection/components/wm-modal/wm-modal.js +459 -459
  46. package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js +97 -97
  47. package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js +114 -114
  48. package/dist/collection/components/wm-navigator/wm-navigator.js +468 -468
  49. package/dist/collection/components/wm-option/wm-option.js +422 -422
  50. package/dist/collection/components/wm-pagination/wm-pagination.js +368 -368
  51. package/dist/collection/components/wm-search/wm-search.js +480 -480
  52. package/dist/collection/components/wm-select/wm-select.js +720 -720
  53. package/dist/collection/components/wm-snackbar/wm-snackbar.js +297 -297
  54. package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js +216 -216
  55. package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js +330 -330
  56. package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js +104 -104
  57. package/dist/collection/components/wm-tag-input/wm-tag-input.js +810 -801
  58. package/dist/collection/components/wm-timepicker/wm-timepicker.js +583 -580
  59. package/dist/collection/components/wm-toggletip/wm-toggletip.js +241 -241
  60. package/dist/collection/components/wm-uploader/wm-network-uploader/wm-network-uploader.js +753 -753
  61. package/dist/collection/components/wm-uploader/wm-uploader.js +748 -748
  62. package/dist/collection/components/wm-wrapper/wm-wrapper.js +27 -27
  63. package/dist/collection/dev/scripts.js +20 -20
  64. package/dist/collection/global/__mocks__/functions.js +6 -6
  65. package/dist/collection/global/functions.js +445 -445
  66. package/dist/collection/global/global.js +72 -72
  67. package/dist/collection/global/interfaces.js +49 -49
  68. package/dist/collection/global/services/__mocks__/http-service.js +130 -130
  69. package/dist/collection/global/services/http-service.js +50 -50
  70. package/dist/collection/lang/lang.js +5 -5
  71. package/dist/collection/lang/missing.js +39 -39
  72. package/dist/collection/lang/piglatin.js +93 -93
  73. package/dist/esm/{functions-6ddad20e.js → functions-cbfc81d1.js} +442 -442
  74. package/dist/esm/{global-a4da88c7.js → global-6f2aeeeb.js} +65 -65
  75. package/dist/esm/{http-service-5d037e16.js → http-service-3dc3b3e7.js} +49 -49
  76. package/dist/esm/{interfaces-61c6305b.js → interfaces-2b97fab2.js} +29 -29
  77. package/dist/esm/loader.js +2 -2
  78. package/dist/esm/polyfills/core-js.js +0 -0
  79. package/dist/esm/polyfills/dom.js +0 -0
  80. package/dist/esm/polyfills/es5-html-element.js +0 -0
  81. package/dist/esm/polyfills/index.js +0 -0
  82. package/dist/esm/polyfills/system.js +0 -0
  83. package/dist/esm/priv-chart-popover.entry.js +79 -79
  84. package/dist/esm/priv-datepicker.entry.js +673 -668
  85. package/dist/esm/priv-navigator-button.entry.js +19 -19
  86. package/dist/esm/priv-navigator-item.entry.js +23 -23
  87. package/dist/esm/ripple.js +2 -2
  88. package/dist/esm/wm-action-menu_2.entry.js +342 -342
  89. package/dist/esm/wm-button.entry.js +237 -237
  90. package/dist/esm/wm-chart-slice.entry.js +13 -13
  91. package/dist/esm/wm-chart.entry.js +475 -475
  92. package/dist/esm/wm-datepicker.entry.js +272 -263
  93. package/dist/esm/wm-input.entry.js +135 -135
  94. package/dist/esm/wm-modal-footer.entry.js +32 -32
  95. package/dist/esm/wm-modal-header.entry.js +34 -34
  96. package/dist/esm/wm-modal.entry.js +162 -162
  97. package/dist/esm/wm-navigator.entry.js +269 -269
  98. package/dist/esm/wm-network-uploader.entry.js +421 -421
  99. package/dist/esm/wm-option_2.entry.js +496 -496
  100. package/dist/esm/wm-pagination.entry.js +168 -168
  101. package/dist/esm/wm-search.entry.js +233 -233
  102. package/dist/esm/wm-snackbar.entry.js +171 -171
  103. package/dist/esm/wm-tab-item_3.entry.js +298 -298
  104. package/dist/esm/wm-tag-input.entry.js +580 -571
  105. package/dist/esm/wm-timepicker.entry.js +384 -381
  106. package/dist/esm/wm-toggletip.entry.js +125 -125
  107. package/dist/esm/wm-uploader.entry.js +347 -347
  108. package/dist/esm/wm-wrapper.entry.js +12 -12
  109. package/dist/esm-es5/functions-cbfc81d1.js +15 -0
  110. package/dist/esm-es5/global-6f2aeeeb.js +1 -0
  111. package/dist/esm-es5/http-service-3dc3b3e7.js +1 -0
  112. package/dist/esm-es5/index-66f8130e.js +1 -0
  113. package/dist/esm-es5/index.js +0 -0
  114. package/dist/esm-es5/interfaces-2b97fab2.js +1 -0
  115. package/dist/esm-es5/loader.js +1 -0
  116. package/dist/esm-es5/priv-chart-popover.entry.js +1 -0
  117. package/dist/esm-es5/priv-datepicker.entry.js +1 -0
  118. package/dist/esm-es5/priv-navigator-button.entry.js +1 -0
  119. package/dist/esm-es5/priv-navigator-item.entry.js +1 -0
  120. package/dist/esm-es5/ripple.js +1 -0
  121. package/dist/esm-es5/wm-action-menu_2.entry.js +1 -0
  122. package/dist/esm-es5/wm-button.entry.js +1 -0
  123. package/dist/esm-es5/wm-chart-slice.entry.js +1 -0
  124. package/dist/esm-es5/wm-chart.entry.js +1 -0
  125. package/dist/esm-es5/wm-datepicker.entry.js +1 -0
  126. package/dist/esm-es5/wm-input.entry.js +1 -0
  127. package/dist/esm-es5/wm-modal-footer.entry.js +1 -0
  128. package/dist/esm-es5/wm-modal-header.entry.js +1 -0
  129. package/dist/esm-es5/wm-modal.entry.js +1 -0
  130. package/dist/esm-es5/wm-navigator.entry.js +1 -0
  131. package/dist/esm-es5/wm-network-uploader.entry.js +1 -0
  132. package/dist/esm-es5/wm-option_2.entry.js +1 -0
  133. package/dist/esm-es5/wm-pagination.entry.js +1 -0
  134. package/dist/esm-es5/wm-search.entry.js +1 -0
  135. package/dist/esm-es5/wm-snackbar.entry.js +1 -0
  136. package/dist/esm-es5/wm-tab-item_3.entry.js +1 -0
  137. package/dist/esm-es5/wm-tag-input.entry.js +1 -0
  138. package/dist/esm-es5/wm-timepicker.entry.js +1 -0
  139. package/dist/esm-es5/wm-toggletip.entry.js +1 -0
  140. package/dist/esm-es5/wm-uploader.entry.js +1 -0
  141. package/dist/esm-es5/wm-wrapper.entry.js +1 -0
  142. package/dist/index.js +1 -1
  143. package/dist/loader/index.js +1 -1
  144. package/dist/ripple/p-0418abd7.system.js +15 -0
  145. package/dist/ripple/p-065e2ca1.entry.js +1 -0
  146. package/dist/ripple/p-06627dcf.entry.js +1 -0
  147. package/dist/ripple/p-08b2262e.system.entry.js +1 -0
  148. package/dist/ripple/p-09432004.system.entry.js +1 -0
  149. package/dist/ripple/{p-bc9ca97b.entry.js → p-0d8bd4ee.entry.js} +1 -1
  150. package/dist/ripple/{p-cfdf1a79.entry.js → p-111f705a.entry.js} +1 -1
  151. package/dist/ripple/p-1d899a2d.system.entry.js +1 -0
  152. package/dist/ripple/p-252e91de.entry.js +1 -0
  153. package/dist/ripple/p-261ea633.system.entry.js +1 -0
  154. package/dist/ripple/p-2cdfb4cc.entry.js +1 -0
  155. package/dist/ripple/p-2d49a016.system.entry.js +1 -0
  156. package/dist/ripple/{p-e43b4eda.entry.js → p-2f91e2a6.entry.js} +1 -1
  157. package/dist/ripple/p-366a3db1.system.entry.js +1 -0
  158. package/dist/ripple/p-3e1dd662.entry.js +1 -0
  159. package/dist/ripple/p-3fb41fe3.system.entry.js +1 -0
  160. package/dist/ripple/{p-888bec42.js → p-43f1298b.js} +0 -0
  161. package/dist/ripple/p-50ea2036.system.js +1 -0
  162. package/dist/ripple/{p-d22c957d.entry.js → p-51d2b9a0.entry.js} +1 -1
  163. package/dist/ripple/p-5a528af7.entry.js +1 -0
  164. package/dist/ripple/{p-66513af1.entry.js → p-5ad7afc0.entry.js} +1 -1
  165. package/dist/ripple/p-5bd3aa5a.system.entry.js +1 -0
  166. package/dist/ripple/p-656f8dad.system.js +1 -0
  167. package/dist/ripple/p-67fcdd5d.entry.js +1 -0
  168. package/dist/ripple/p-6b4374e3.system.entry.js +1 -0
  169. package/dist/ripple/p-6bc37009.system.entry.js +1 -0
  170. package/dist/ripple/p-7a9aac92.system.entry.js +1 -0
  171. package/dist/ripple/p-7bc744bf.system.entry.js +1 -0
  172. package/dist/ripple/p-85d12cf2.system.entry.js +1 -0
  173. package/dist/ripple/{p-08b273ba.entry.js → p-8afdc986.entry.js} +1 -1
  174. package/dist/ripple/p-8d97d1d5.system.entry.js +1 -0
  175. package/dist/ripple/p-8f05bc58.system.entry.js +1 -0
  176. package/dist/ripple/p-90aebfd6.system.entry.js +1 -0
  177. package/dist/ripple/p-9276c5e4.entry.js +1 -0
  178. package/dist/ripple/p-92b6bc97.system.entry.js +1 -0
  179. package/dist/ripple/p-99548d58.system.js +1 -0
  180. package/dist/ripple/p-9d02957d.system.js +1 -0
  181. package/dist/ripple/p-ae4e95ce.system.entry.js +1 -0
  182. package/dist/ripple/p-b3ce2033.system.entry.js +1 -0
  183. package/dist/ripple/p-b4e9a8e3.entry.js +1 -0
  184. package/dist/ripple/{p-857a0bc0.js → p-b5edcf38.js} +0 -0
  185. package/dist/ripple/p-b626f3b9.system.entry.js +1 -0
  186. package/dist/ripple/p-b840acea.system.entry.js +1 -0
  187. package/dist/ripple/p-ba30bf08.js +1 -0
  188. package/dist/ripple/p-c10dee71.system.js +1 -0
  189. package/dist/ripple/p-c3a9a5da.system.entry.js +1 -0
  190. package/dist/ripple/p-c730ce74.entry.js +1 -0
  191. package/dist/ripple/p-d0643c9b.entry.js +1 -0
  192. package/dist/ripple/p-da78496a.entry.js +1 -0
  193. package/dist/ripple/{p-b8aa478f.entry.js → p-dc196bc2.entry.js} +1 -1
  194. package/dist/ripple/p-deae1a7a.entry.js +1 -0
  195. package/dist/ripple/p-e06b8ab3.system.entry.js +1 -0
  196. package/dist/ripple/{p-b495e06c.entry.js → p-e3bab713.entry.js} +1 -1
  197. package/dist/ripple/p-e8acac87.system.entry.js +1 -0
  198. package/dist/ripple/p-eed76888.system.entry.js +1 -0
  199. package/dist/ripple/p-f5df5903.system.js +1 -0
  200. package/dist/ripple/{p-a6d6eae7.js → p-fd8070fb.js} +0 -0
  201. package/dist/ripple/p-ff5ec153.entry.js +1 -0
  202. package/dist/ripple/ripple.esm.js +1 -1
  203. package/dist/ripple/ripple.js +130 -0
  204. package/dist/types/components/wm-action-menu/wm-action-menu.d.ts +48 -48
  205. package/dist/types/components/wm-button/wm-button.d.ts +44 -44
  206. package/dist/types/components/wm-chart/priv-chart-popover/priv-chart-popover.d.ts +23 -23
  207. package/dist/types/components/wm-chart/wm-chart-slice.d.ts +8 -8
  208. package/dist/types/components/wm-chart/wm-chart.d.ts +82 -82
  209. package/dist/types/components/wm-datepicker/priv-datepicker/priv-datepicker.d.ts +80 -76
  210. package/dist/types/components/wm-datepicker/wm-datepicker.d.ts +42 -41
  211. package/dist/types/components/wm-input/wm-input.d.ts +46 -46
  212. package/dist/types/components/wm-menuitem/wm-menuitem.d.ts +34 -34
  213. package/dist/types/components/wm-modal/wm-modal-footer.d.ts +15 -15
  214. package/dist/types/components/wm-modal/wm-modal-header.d.ts +12 -12
  215. package/dist/types/components/wm-modal/wm-modal.d.ts +41 -41
  216. package/dist/types/components/wm-navigator/priv-navigator-button/priv-navigator-button.d.ts +10 -10
  217. package/dist/types/components/wm-navigator/priv-navigator-item/priv-navigator-item.d.ts +13 -13
  218. package/dist/types/components/wm-navigator/wm-navigator.d.ts +61 -61
  219. package/dist/types/components/wm-option/wm-option.d.ts +32 -32
  220. package/dist/types/components/wm-pagination/wm-pagination.d.ts +32 -32
  221. package/dist/types/components/wm-search/wm-search.d.ts +86 -86
  222. package/dist/types/components/wm-select/wm-select.d.ts +66 -66
  223. package/dist/types/components/wm-snackbar/wm-snackbar.d.ts +35 -35
  224. package/dist/types/components/wm-tabs/wm-tab-item/wm-tab-item.d.ts +38 -38
  225. package/dist/types/components/wm-tabs/wm-tab-list/wm-tab-list.d.ts +53 -53
  226. package/dist/types/components/wm-tabs/wm-tab-panel/wm-tab-panel.d.ts +20 -20
  227. package/dist/types/components/wm-tag-input/wm-tag-input.d.ts +92 -92
  228. package/dist/types/components/wm-timepicker/wm-timepicker.d.ts +61 -61
  229. package/dist/types/components/wm-toggletip/wm-toggletip.d.ts +27 -27
  230. package/dist/types/components/wm-uploader/wm-network-uploader/wm-network-uploader.d.ts +85 -85
  231. package/dist/types/components/wm-uploader/wm-uploader.d.ts +80 -80
  232. package/dist/types/components/wm-wrapper/wm-wrapper.d.ts +7 -7
  233. package/dist/types/components.d.ts +25 -24
  234. package/dist/types/global/__mocks__/functions.d.ts +6 -6
  235. package/dist/types/global/functions.d.ts +40 -40
  236. package/dist/types/global/global.d.ts +1 -1
  237. package/dist/types/global/interfaces.d.ts +34 -34
  238. package/dist/types/global/services/__mocks__/http-service.d.ts +6 -6
  239. package/dist/types/global/services/http-service.d.ts +4 -4
  240. package/dist/types/lang/lang.d.ts +5 -5
  241. package/package.json +47 -47
  242. package/dist/ripple/p-0068e871.entry.js +0 -1
  243. package/dist/ripple/p-00999aeb.entry.js +0 -1
  244. package/dist/ripple/p-11c09317.entry.js +0 -1
  245. package/dist/ripple/p-196b4c55.entry.js +0 -1
  246. package/dist/ripple/p-1a3df227.entry.js +0 -1
  247. package/dist/ripple/p-3590a57f.entry.js +0 -1
  248. package/dist/ripple/p-3a178ac8.entry.js +0 -1
  249. package/dist/ripple/p-46371fad.entry.js +0 -1
  250. package/dist/ripple/p-5548fc7c.js +0 -1
  251. package/dist/ripple/p-5c73fd59.entry.js +0 -1
  252. package/dist/ripple/p-828316d6.entry.js +0 -1
  253. package/dist/ripple/p-9624967f.entry.js +0 -1
  254. package/dist/ripple/p-99e2c5f6.entry.js +0 -1
  255. package/dist/ripple/p-bf985c5d.entry.js +0 -1
  256. package/dist/ripple/p-cd6de442.entry.js +0 -1
@@ -3,179 +3,179 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-cd179539.js');
6
- const functions = require('./functions-13b0e88e.js');
6
+ const functions = require('./functions-f0693632.js');
7
7
 
8
- const wmSnackbarCss = "@charset \"UTF-8\";.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active){-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 #c6b4e3;-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 #c6b4e3;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 #c6b4e3;outline:none}:host *,wm-snackbar *{box-sizing:border-box;margin:unset}:host .wm-snackbars,wm-snackbar .wm-snackbars{position:fixed;bottom:0;left:1.25rem;right:1.25rem;padding:0.25rem 0.625rem 1.875rem;z-index:2001;max-width:35.5rem;max-height:17.5rem;-webkit-overflow-scrolling:touch;overflow:auto}:host .wm-snackbars.empty,wm-snackbar .wm-snackbars.empty{-ms-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-webkit-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-moz-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);padding-top:0;padding-bottom:0}:host .wm-snackbars .wm-snack-wrapper,wm-snackbar .wm-snackbars .wm-snack-wrapper{width:100%;height:100%}:host .wm-snackbars .wm-snack-wrapper:not(:last-child),wm-snackbar .wm-snackbars .wm-snack-wrapper:not(:last-child){margin-bottom:1.25rem}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar{-webkit-box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-ms-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-webkit-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-moz-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);font-size:0.875rem;color:#fff;padding:0.9375rem 1.875rem;background:#4a4a4a;opacity:0;left:0;position:relative;font-family:inherit}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link{letter-spacing:0;text-transform:none;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1;color:#85dadf;margin:0 3.125rem 0 0.625rem;text-decoration:none;font-weight:600;cursor:pointer}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link.new-window::after,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link.new-window::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;display:inline;content:\"\";margin-left:0.25rem}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:hover,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:hover{text-decoration:underline}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:focus,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:focus{outline:none;border:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner{border:0;outline:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar:not(:last-child),wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar:not(:last-child){margin-bottom:1.25rem}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar.active:not(button),wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar.active:not(button){opacity:1}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;position:relative;padding:0}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext{width:100%}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;background-color:#3b3b3b;color:#ffffff;cursor:pointer;border:none;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}@media screen and (min-width: 48rem){:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack{min-width:1.875rem;min-height:1.875rem}}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:before,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack: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:\"\"}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover{background-color:#fff;color:#4a4a4a}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus{outline:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner{border:0;outline:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active{-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack>.tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;padding:0;line-height:normal;z-index:30}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip{clip:auto;width:auto;height:auto;opacity:1;transition:opacity 500ms 500ms;padding:0.375rem;top:2.75rem;left:2.75rem;white-space:nowrap;transform:translateX(-50%)}@media screen and (min-width: 48rem){:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip{top:2.0625rem;left:auto}}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .sr-only,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .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;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}:host .sr-only,wm-snackbar .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;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active)>.tooltip{clip:auto;width:auto;height:auto;opacity:1;transition:opacity 500ms 500ms;padding:0.375rem;top:2.75rem;left:2.75rem;white-space:nowrap;transform:translateX(-50%)}@media screen and (min-width: 48rem){.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active)>.tooltip{top:2.0625rem;left:auto}}.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active){outline:none;background:linear-gradient(90deg, #85dadf 66%, transparent 0) repeat-x;background-size:0.375rem 0.1875rem;background-position:0 1em;border-radius:0;line-height:normal}";
8
+ const wmSnackbarCss = "@charset \"UTF-8\";.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active){-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 #c6b4e3;-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 #c6b4e3;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 #c6b4e3;outline:none}:host *,wm-snackbar *{-webkit-box-sizing:border-box;box-sizing:border-box;margin:unset}:host .wm-snackbars,wm-snackbar .wm-snackbars{position:fixed;bottom:0;left:1.25rem;right:1.25rem;padding:0.25rem 0.625rem 1.875rem;z-index:2001;max-width:35.5rem;max-height:17.5rem;-webkit-overflow-scrolling:touch;overflow:auto}:host .wm-snackbars.empty,wm-snackbar .wm-snackbars.empty{-ms-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-webkit-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-moz-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);padding-top:0;padding-bottom:0}:host .wm-snackbars .wm-snack-wrapper,wm-snackbar .wm-snackbars .wm-snack-wrapper{width:100%;height:100%}:host .wm-snackbars .wm-snack-wrapper:not(:last-child),wm-snackbar .wm-snackbars .wm-snack-wrapper:not(:last-child){margin-bottom:1.25rem}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar{-webkit-box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-ms-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-webkit-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-moz-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);font-size:0.875rem;color:#fff;padding:0.9375rem 1.875rem;background:#4a4a4a;opacity:0;left:0;position:relative;font-family:inherit}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link{letter-spacing:0;text-transform:none;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1;color:#85dadf;margin:0 3.125rem 0 0.625rem;text-decoration:none;font-weight:600;cursor:pointer}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link.new-window::after,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link.new-window::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;display:inline;content:\"\";margin-left:0.25rem}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:hover,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:hover{text-decoration:underline}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:focus,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:focus{outline:none;border:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner{border:0;outline:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar:not(:last-child),wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar:not(:last-child){margin-bottom:1.25rem}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar.active:not(button),wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar.active:not(button){opacity:1}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;position:relative;padding:0}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext{width:100%}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;background-color:#3b3b3b;color:#ffffff;cursor:pointer;border:none;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}@media screen and (min-width: 48rem){:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack{min-width:1.875rem;min-height:1.875rem}}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:before,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack: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:\"\"}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover{background-color:#fff;color:#4a4a4a}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus{outline:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner{border:0;outline:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active{-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack>.tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;padding:0;line-height:normal;z-index:30}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;top:2.75rem;left:2.75rem;white-space:nowrap;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media screen and (min-width: 48rem){:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip{top:2.0625rem;left:auto}}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .sr-only,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .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;top:0;left:0}:host .sr-only,wm-snackbar .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;top:0;left:0}.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active)>.tooltip{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;top:2.75rem;left:2.75rem;white-space:nowrap;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media screen and (min-width: 48rem){.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active)>.tooltip{top:2.0625rem;left:auto}}.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active){outline:none;background:-webkit-gradient(linear, left top, right top, color-stop(66%, #85dadf), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #85dadf 66%, transparent 0) repeat-x;background-size:0.375rem 0.1875rem;background-position:0 1em;border-radius:0;line-height:normal}";
9
9
 
10
- const Snackbar = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- this.wmSnackbarSnackFinished = index.createEvent(this, "wmSnackbarSnackFinished", 7);
14
- this.userFinishedSnack = index.createEvent(this, "userFinishedSnack", 7);
15
- this.wmSnackbarActionTriggered = index.createEvent(this, "wmSnackbarActionTriggered", 7);
16
- this.userTriggeredAction = index.createEvent(this, "userTriggeredAction", 7);
17
- //Prop receives notifications as JSON string, which is later parsed into an array of objects.
18
- this.notifications = "[]";
19
- this.parsedNotifications = []; //Holds the parsed array
20
- this.isTabbing = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets "enter" as a "click"
21
- this.timers = [];
22
- this.newNotification = false;
23
- this.newWindowMessage = functions.intl.formatMessage({
24
- id: "global.newWindowLink",
25
- defaultMessage: "Opens in a new window.",
26
- });
27
- }
28
- updateSnacks(newValue) {
29
- const parsedData = JSON.parse(newValue);
30
- const length = parsedData.length;
31
- const prevNotificationsLength = this.parsedNotifications.length;
32
- this.parsedNotifications = [];
33
- //Parse notifications received as props and store a reference to them
34
- for (let i = 0; i < length; i++) {
35
- let newNotification = {
36
- id: parsedData[i].id.toString(),
37
- message: parsedData[i].message.toString(),
38
- link: parsedData[i].link.toString(),
39
- newWindow: !!parsedData[i].newWindow,
40
- };
41
- this.parsedNotifications = [...this.parsedNotifications, newNotification];
42
- }
43
- //If a new notification was added, set a timer and store a reference to the current active element so that if focus must move to the notification, it can return the user where they were once they dismiss the notification.
44
- if (prevNotificationsLength < this.parsedNotifications.length) {
45
- const newTimer = window.setTimeout(() => this.snackExpired(), 20000);
46
- this.timers = [newTimer, ...this.timers];
47
- this.storeElToFocusOnDismiss();
48
- this.newNotification = true;
49
- }
50
- else {
51
- this.newNotification = false;
52
- }
53
- }
54
- componentWillLoad() {
55
- this.uid = this.el.id ? this.el.id : functions.generateId();
56
- }
57
- //A change in the notificaiton prop will trigger the update function. The update's only role is to determine how focus should be managed when a notification is added.
58
- componentDidUpdate() {
59
- //If the user is tabbing and there's a new notification, focus the link and disable timer.
60
- this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();
61
- this.newNotification = false;
62
- }
63
- checkForTabbing(ev) {
64
- if (ev.keyCode === 9) {
65
- this.toggleTabbingOn();
66
- }
67
- }
68
- //Workaround for screenreader's triggering click event on "enter".
69
- handleMouse() {
70
- this.toggleTabbingOff();
71
- }
72
- focusLinkAndDisableTimer() {
73
- //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.
74
- const latestNotification = this.parsedNotifications[0];
75
- if (latestNotification.link) {
76
- let link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
77
- link.focus();
78
- this.stopTimer(latestNotification);
79
- }
80
- }
81
- toggleTabbingOn() {
82
- this.isTabbing = true;
83
- this.snackbarEl && this.snackbarEl.classList.add("user-is-tabbing");
84
- }
85
- toggleTabbingOff() {
86
- this.isTabbing = false;
87
- this.snackbarEl && this.snackbarEl.classList.remove("user-is-tabbing");
88
- }
89
- storeElToFocusOnDismiss() {
90
- let triggeringButton = document.activeElement;
91
- while (triggeringButton && triggeringButton.shadowRoot) {
92
- triggeringButton = triggeringButton.shadowRoot.activeElement;
93
- }
94
- this.focusOnDismiss = triggeringButton;
95
- }
96
- snackDismissed(notification) {
97
- this.endSnack(notification);
98
- //Focus should only be returned if it was moved in the first place, i.e., there was a link and the user was tabbing. Otherwise, for a mouse user, the user's focus would jump back to the triggering element.
99
- notification.link && this.isTabbing && this.focusOnDismiss.focus();
100
- }
101
- //Remove snack from notification list once timer runs out
102
- snackExpired() {
103
- const notification = this.parsedNotifications[this.parsedNotifications.length - 1];
104
- this.endSnack(notification);
105
- }
106
- endSnack(notification) {
107
- //App listens for userFinishedSnack event and deletes the emitted notification.
108
- this.stopTimer(notification);
109
- this.wmSnackbarSnackFinished.emit({
110
- id: notification.id,
111
- message: notification.message,
112
- link: notification.link,
113
- newWindow: notification.newWindow,
114
- });
115
- // deprecated
116
- this.userFinishedSnack.emit({
117
- id: notification.id,
118
- message: notification.message,
119
- link: notification.link,
120
- });
121
- }
122
- snackLinkClicked(notification) {
123
- //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.
124
- this.stopTimer(notification);
125
- this.wmSnackbarActionTriggered.emit({
126
- id: notification.id,
127
- message: notification.message,
128
- link: notification.link,
129
- newWindow: notification.newWindow,
130
- });
131
- // deprecated
132
- this.userTriggeredAction.emit({
133
- id: notification.id,
134
- message: notification.message,
135
- link: notification.link,
136
- });
137
- }
138
- //Delete the timer corresponding to the dismissed notification
139
- stopTimer(notification) {
140
- this.parsedNotifications.forEach((notif, index) => {
141
- if (notif.id === notification.id) {
142
- clearTimeout(this.timers[index]);
143
- this.timers = this.timers.filter((timer, ind) => {
144
- if (ind !== index) {
145
- return timer;
146
- }
147
- });
148
- }
149
- });
150
- }
151
- renderSnackbars() {
152
- return this.parsedNotifications.map((notification) => (index.h("div", { class: "wm-snack-wrapper" }, index.h("div", { id: `snack-${this.uid}`, class: "wm-snackbar active neutral" }, index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), index.h("div", { class: "wm-snackbarmsg" }, index.h("div", { class: "msgtext" }, index.h("span", null, notification.message), notification.link && (index.h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + this.newWindowMessage : ""}`, tabindex: 0, onClick: () => {
153
- this.snackLinkClicked(notification);
154
- }, onKeyDown: (ev) => ev.keyCode === 13 && this.snackLinkClicked(notification) }, index.h("span", { "aria-hidden": "true" }, notification.link)))), index.h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification) }, index.h("span", { class: "tooltip", "aria-hidden": "true" }, "Close"))), index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
155
- }
156
- renderLiveRegion() {
157
- const latestNotification = this.parsedNotifications[0];
158
- const link = this.isTabbing ? "" : latestNotification.link;
159
- const srAnnouncement = `${latestNotification.message} ${link}`;
160
- const region = this.el.shadowRoot.querySelector(`#wm-live-region-${this.uid}`);
161
- if (region) {
162
- region.innerHTML = "";
163
- const wrapper = document.createElement("span");
164
- wrapper.innerHTML = srAnnouncement;
165
- region.appendChild(wrapper);
166
- }
167
- }
168
- render() {
169
- this.newNotification && this.renderLiveRegion();
170
- const snackbars = this.renderSnackbars();
171
- const wrappingClass = this.parsedNotifications.length === 0 ? "empty" : "";
172
- return (index.h("div", { ref: (el) => (this.snackbarEl = el), class: `wm-snackbars ${wrappingClass}` }, index.h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}` }), snackbars));
173
- }
174
- get el() { return index.getElement(this); }
175
- static get watchers() { return {
176
- "notifications": ["updateSnacks"]
177
- }; }
178
- };
10
+ const Snackbar = class {
11
+ constructor(hostRef) {
12
+ index.registerInstance(this, hostRef);
13
+ this.wmSnackbarSnackFinished = index.createEvent(this, "wmSnackbarSnackFinished", 7);
14
+ this.userFinishedSnack = index.createEvent(this, "userFinishedSnack", 7);
15
+ this.wmSnackbarActionTriggered = index.createEvent(this, "wmSnackbarActionTriggered", 7);
16
+ this.userTriggeredAction = index.createEvent(this, "userTriggeredAction", 7);
17
+ //Prop receives notifications as JSON string, which is later parsed into an array of objects.
18
+ this.notifications = "[]";
19
+ this.parsedNotifications = []; //Holds the parsed array
20
+ this.isTabbing = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets "enter" as a "click"
21
+ this.timers = [];
22
+ this.newNotification = false;
23
+ this.newWindowMessage = functions.intl.formatMessage({
24
+ id: "global.newWindowLink",
25
+ defaultMessage: "Opens in a new window.",
26
+ });
27
+ }
28
+ updateSnacks(newValue) {
29
+ const parsedData = JSON.parse(newValue);
30
+ const length = parsedData.length;
31
+ const prevNotificationsLength = this.parsedNotifications.length;
32
+ this.parsedNotifications = [];
33
+ //Parse notifications received as props and store a reference to them
34
+ for (let i = 0; i < length; i++) {
35
+ let newNotification = {
36
+ id: parsedData[i].id.toString(),
37
+ message: parsedData[i].message.toString(),
38
+ link: parsedData[i].link.toString(),
39
+ newWindow: !!parsedData[i].newWindow,
40
+ };
41
+ this.parsedNotifications = [...this.parsedNotifications, newNotification];
42
+ }
43
+ //If a new notification was added, set a timer and store a reference to the current active element so that if focus must move to the notification, it can return the user where they were once they dismiss the notification.
44
+ if (prevNotificationsLength < this.parsedNotifications.length) {
45
+ const newTimer = window.setTimeout(() => this.snackExpired(), 20000);
46
+ this.timers = [newTimer, ...this.timers];
47
+ this.storeElToFocusOnDismiss();
48
+ this.newNotification = true;
49
+ }
50
+ else {
51
+ this.newNotification = false;
52
+ }
53
+ }
54
+ componentWillLoad() {
55
+ this.uid = this.el.id ? this.el.id : functions.generateId();
56
+ }
57
+ //A change in the notificaiton prop will trigger the update function. The update's only role is to determine how focus should be managed when a notification is added.
58
+ componentDidUpdate() {
59
+ //If the user is tabbing and there's a new notification, focus the link and disable timer.
60
+ this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();
61
+ this.newNotification = false;
62
+ }
63
+ checkForTabbing(ev) {
64
+ if (ev.keyCode === 9) {
65
+ this.toggleTabbingOn();
66
+ }
67
+ }
68
+ //Workaround for screenreader's triggering click event on "enter".
69
+ handleMouse() {
70
+ this.toggleTabbingOff();
71
+ }
72
+ focusLinkAndDisableTimer() {
73
+ //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.
74
+ const latestNotification = this.parsedNotifications[0];
75
+ if (latestNotification.link) {
76
+ let link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
77
+ link.focus();
78
+ this.stopTimer(latestNotification);
79
+ }
80
+ }
81
+ toggleTabbingOn() {
82
+ this.isTabbing = true;
83
+ this.snackbarEl && this.snackbarEl.classList.add("user-is-tabbing");
84
+ }
85
+ toggleTabbingOff() {
86
+ this.isTabbing = false;
87
+ this.snackbarEl && this.snackbarEl.classList.remove("user-is-tabbing");
88
+ }
89
+ storeElToFocusOnDismiss() {
90
+ let triggeringButton = document.activeElement;
91
+ while (triggeringButton && triggeringButton.shadowRoot) {
92
+ triggeringButton = triggeringButton.shadowRoot.activeElement;
93
+ }
94
+ this.focusOnDismiss = triggeringButton;
95
+ }
96
+ snackDismissed(notification) {
97
+ this.endSnack(notification);
98
+ //Focus should only be returned if it was moved in the first place, i.e., there was a link and the user was tabbing. Otherwise, for a mouse user, the user's focus would jump back to the triggering element.
99
+ notification.link && this.isTabbing && this.focusOnDismiss.focus();
100
+ }
101
+ //Remove snack from notification list once timer runs out
102
+ snackExpired() {
103
+ const notification = this.parsedNotifications[this.parsedNotifications.length - 1];
104
+ this.endSnack(notification);
105
+ }
106
+ endSnack(notification) {
107
+ //App listens for userFinishedSnack event and deletes the emitted notification.
108
+ this.stopTimer(notification);
109
+ this.wmSnackbarSnackFinished.emit({
110
+ id: notification.id,
111
+ message: notification.message,
112
+ link: notification.link,
113
+ newWindow: notification.newWindow,
114
+ });
115
+ // deprecated
116
+ this.userFinishedSnack.emit({
117
+ id: notification.id,
118
+ message: notification.message,
119
+ link: notification.link,
120
+ });
121
+ }
122
+ snackLinkClicked(notification) {
123
+ //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.
124
+ this.stopTimer(notification);
125
+ this.wmSnackbarActionTriggered.emit({
126
+ id: notification.id,
127
+ message: notification.message,
128
+ link: notification.link,
129
+ newWindow: notification.newWindow,
130
+ });
131
+ // deprecated
132
+ this.userTriggeredAction.emit({
133
+ id: notification.id,
134
+ message: notification.message,
135
+ link: notification.link,
136
+ });
137
+ }
138
+ //Delete the timer corresponding to the dismissed notification
139
+ stopTimer(notification) {
140
+ this.parsedNotifications.forEach((notif, index) => {
141
+ if (notif.id === notification.id) {
142
+ clearTimeout(this.timers[index]);
143
+ this.timers = this.timers.filter((timer, ind) => {
144
+ if (ind !== index) {
145
+ return timer;
146
+ }
147
+ });
148
+ }
149
+ });
150
+ }
151
+ renderSnackbars() {
152
+ return this.parsedNotifications.map((notification) => (index.h("div", { class: "wm-snack-wrapper" }, index.h("div", { id: `snack-${this.uid}`, class: "wm-snackbar active neutral" }, index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), index.h("div", { class: "wm-snackbarmsg" }, index.h("div", { class: "msgtext" }, index.h("span", null, notification.message), notification.link && (index.h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + this.newWindowMessage : ""}`, tabindex: 0, onClick: () => {
153
+ this.snackLinkClicked(notification);
154
+ }, onKeyDown: (ev) => ev.keyCode === 13 && this.snackLinkClicked(notification) }, index.h("span", { "aria-hidden": "true" }, notification.link)))), index.h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification) }, index.h("span", { class: "tooltip", "aria-hidden": "true" }, "Close"))), index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
155
+ }
156
+ renderLiveRegion() {
157
+ const latestNotification = this.parsedNotifications[0];
158
+ const link = this.isTabbing ? "" : latestNotification.link;
159
+ const srAnnouncement = `${latestNotification.message} ${link}`;
160
+ const region = this.el.shadowRoot.querySelector(`#wm-live-region-${this.uid}`);
161
+ if (region) {
162
+ region.innerHTML = "";
163
+ const wrapper = document.createElement("span");
164
+ wrapper.innerHTML = srAnnouncement;
165
+ region.appendChild(wrapper);
166
+ }
167
+ }
168
+ render() {
169
+ this.newNotification && this.renderLiveRegion();
170
+ const snackbars = this.renderSnackbars();
171
+ const wrappingClass = this.parsedNotifications.length === 0 ? "empty" : "";
172
+ return (index.h("div", { ref: (el) => (this.snackbarEl = el), class: `wm-snackbars ${wrappingClass}` }, index.h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}` }), snackbars));
173
+ }
174
+ get el() { return index.getElement(this); }
175
+ static get watchers() { return {
176
+ "notifications": ["updateSnacks"]
177
+ }; }
178
+ };
179
179
  Snackbar.style = wmSnackbarCss;
180
180
 
181
181
  exports.wm_snackbar = Snackbar;