@watermarkinsights/ripple 3.14.1 → 3.15.0-2

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 (263) hide show
  1. package/README.md +3 -3
  2. package/dist/cjs/{chartFunctions-0ea0888f.js → chartFunctions-08494c24.js} +419 -419
  3. package/dist/cjs/{functions-8d3ceccd.js → functions-e1b590e0.js} +528 -446
  4. package/dist/cjs/{global-12a09ffa.js → global-0a41410c.js} +62 -62
  5. package/dist/cjs/{http-service-9e8c4dd5.js → http-service-494d81de.js} +49 -49
  6. package/dist/cjs/{interfaces-30a74c1f.js → interfaces-a3338581.js} +29 -29
  7. package/dist/cjs/loader.cjs.js +2 -2
  8. package/dist/cjs/priv-chart-popover.cjs.entry.js +86 -86
  9. package/dist/cjs/priv-datepicker.cjs.entry.js +657 -657
  10. package/dist/cjs/priv-navigator-button.cjs.entry.js +18 -18
  11. package/dist/cjs/priv-navigator-item.cjs.entry.js +23 -23
  12. package/dist/cjs/ripple.cjs.js +2 -2
  13. package/dist/cjs/wm-action-menu_2.cjs.entry.js +329 -335
  14. package/dist/cjs/wm-button.cjs.entry.js +248 -241
  15. package/dist/cjs/wm-chart-slice.cjs.entry.js +13 -13
  16. package/dist/cjs/wm-chart.cjs.entry.js +110 -110
  17. package/dist/cjs/wm-datepicker.cjs.entry.js +265 -265
  18. package/dist/cjs/wm-input.cjs.entry.js +134 -134
  19. package/dist/cjs/wm-modal-footer.cjs.entry.js +33 -33
  20. package/dist/cjs/wm-modal-header.cjs.entry.js +36 -36
  21. package/dist/cjs/wm-modal.cjs.entry.js +163 -163
  22. package/dist/cjs/wm-navigation_3.cjs.entry.js +227 -227
  23. package/dist/cjs/wm-navigator.cjs.entry.js +268 -268
  24. package/dist/cjs/wm-network-uploader.cjs.entry.js +455 -454
  25. package/dist/cjs/wm-option_2.cjs.entry.js +720 -720
  26. package/dist/cjs/wm-pagination.cjs.entry.js +167 -167
  27. package/dist/cjs/wm-progress-indicator_3.cjs.entry.js +129 -129
  28. package/dist/cjs/wm-search.cjs.entry.js +232 -232
  29. package/dist/cjs/wm-snackbar.cjs.entry.js +170 -170
  30. package/dist/cjs/wm-tab-item_3.cjs.entry.js +296 -296
  31. package/dist/cjs/wm-tag-input.cjs.entry.js +579 -579
  32. package/dist/cjs/wm-timepicker.cjs.entry.js +383 -383
  33. package/dist/cjs/wm-toggletip.cjs.entry.js +124 -124
  34. package/dist/cjs/wm-uploader.cjs.entry.js +599 -629
  35. package/dist/cjs/wm-wrapper.cjs.entry.js +12 -12
  36. package/dist/collection/components/charts/priv-chart-popover/priv-chart-popover.js +258 -258
  37. package/dist/collection/components/charts/wm-chart/wm-chart-slice.js +115 -115
  38. package/dist/collection/components/charts/wm-chart/wm-chart.js +328 -328
  39. package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.js +195 -195
  40. package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.js +88 -88
  41. package/dist/collection/components/charts/wm-progress-monitor/wm-progress-slice.js +111 -111
  42. package/dist/collection/components/wm-action-menu/wm-action-menu.js +442 -448
  43. package/dist/collection/components/wm-button/wm-button.js +545 -504
  44. package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.js +1024 -1024
  45. package/dist/collection/components/wm-datepicker/wm-datepicker.js +471 -471
  46. package/dist/collection/components/wm-input/wm-input.js +423 -423
  47. package/dist/collection/components/wm-menuitem/wm-menuitem.js +444 -444
  48. package/dist/collection/components/wm-modal/wm-modal-footer.js +136 -136
  49. package/dist/collection/components/wm-modal/wm-modal-header.js +87 -87
  50. package/dist/collection/components/wm-modal/wm-modal.js +461 -461
  51. package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js +162 -162
  52. package/dist/collection/components/wm-navigation/wm-navigation-item.js +121 -121
  53. package/dist/collection/components/wm-navigation/wm-navigation.js +218 -218
  54. package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js +97 -97
  55. package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js +114 -114
  56. package/dist/collection/components/wm-navigator/wm-navigator.js +468 -468
  57. package/dist/collection/components/wm-option/wm-option.js +428 -428
  58. package/dist/collection/components/wm-pagination/wm-pagination.js +368 -368
  59. package/dist/collection/components/wm-search/wm-search.js +480 -480
  60. package/dist/collection/components/wm-select/wm-select.js +1001 -1001
  61. package/dist/collection/components/wm-snackbar/wm-snackbar.js +297 -297
  62. package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js +216 -216
  63. package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js +330 -330
  64. package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js +104 -104
  65. package/dist/collection/components/wm-tag-input/wm-tag-input.js +810 -810
  66. package/dist/collection/components/wm-timepicker/wm-timepicker.js +583 -583
  67. package/dist/collection/components/wm-toggletip/wm-toggletip.js +241 -241
  68. package/dist/collection/components/wm-uploader/wm-network-uploader/wm-network-uploader.js +788 -787
  69. package/dist/collection/components/wm-uploader/wm-uploader.js +1043 -1072
  70. package/dist/collection/components/wm-wrapper/wm-wrapper.js +27 -27
  71. package/dist/collection/dev/scripts.js +20 -20
  72. package/dist/collection/global/__mocks__/functions.js +6 -6
  73. package/dist/collection/global/chartFunctions.js +421 -421
  74. package/dist/collection/global/functions.js +441 -441
  75. package/dist/collection/global/global.js +69 -69
  76. package/dist/collection/global/interfaces.js +49 -49
  77. package/dist/collection/global/services/__mocks__/http-service.js +130 -130
  78. package/dist/collection/global/services/http-service.js +50 -50
  79. package/dist/collection/lang/lang.js +5 -5
  80. package/dist/collection/lang/missing.js +43 -43
  81. package/dist/collection/lang/piglatin.js +93 -93
  82. package/dist/esm/{chartFunctions-6f90586d.js → chartFunctions-a310b9d0.js} +419 -419
  83. package/dist/esm/{functions-11c0c4e2.js → functions-b4b62a23.js} +528 -446
  84. package/dist/esm/{global-5abca73e.js → global-e80a0ec8.js} +62 -62
  85. package/dist/esm/{http-service-5d037e16.js → http-service-3dc3b3e7.js} +49 -49
  86. package/dist/esm/{interfaces-61c6305b.js → interfaces-2b97fab2.js} +29 -29
  87. package/dist/esm/loader.js +2 -2
  88. package/dist/esm/polyfills/core-js.js +0 -0
  89. package/dist/esm/polyfills/dom.js +0 -0
  90. package/dist/esm/polyfills/es5-html-element.js +0 -0
  91. package/dist/esm/polyfills/index.js +0 -0
  92. package/dist/esm/polyfills/system.js +0 -0
  93. package/dist/esm/priv-chart-popover.entry.js +86 -86
  94. package/dist/esm/priv-datepicker.entry.js +657 -657
  95. package/dist/esm/priv-navigator-button.entry.js +18 -18
  96. package/dist/esm/priv-navigator-item.entry.js +23 -23
  97. package/dist/esm/ripple.js +2 -2
  98. package/dist/esm/wm-action-menu_2.entry.js +329 -335
  99. package/dist/esm/wm-button.entry.js +248 -241
  100. package/dist/esm/wm-chart-slice.entry.js +13 -13
  101. package/dist/esm/wm-chart.entry.js +110 -110
  102. package/dist/esm/wm-datepicker.entry.js +265 -265
  103. package/dist/esm/wm-input.entry.js +134 -134
  104. package/dist/esm/wm-modal-footer.entry.js +33 -33
  105. package/dist/esm/wm-modal-header.entry.js +36 -36
  106. package/dist/esm/wm-modal.entry.js +163 -163
  107. package/dist/esm/wm-navigation_3.entry.js +227 -227
  108. package/dist/esm/wm-navigator.entry.js +268 -268
  109. package/dist/esm/wm-network-uploader.entry.js +455 -454
  110. package/dist/esm/wm-option_2.entry.js +720 -720
  111. package/dist/esm/wm-pagination.entry.js +167 -167
  112. package/dist/esm/wm-progress-indicator_3.entry.js +129 -129
  113. package/dist/esm/wm-search.entry.js +232 -232
  114. package/dist/esm/wm-snackbar.entry.js +170 -170
  115. package/dist/esm/wm-tab-item_3.entry.js +296 -296
  116. package/dist/esm/wm-tag-input.entry.js +579 -579
  117. package/dist/esm/wm-timepicker.entry.js +383 -383
  118. package/dist/esm/wm-toggletip.entry.js +124 -124
  119. package/dist/esm/wm-uploader.entry.js +599 -629
  120. package/dist/esm/wm-wrapper.entry.js +12 -12
  121. package/dist/esm-es5/{chartFunctions-6f90586d.js → chartFunctions-a310b9d0.js} +1 -1
  122. package/dist/esm-es5/functions-b4b62a23.js +1 -0
  123. package/dist/esm-es5/global-e80a0ec8.js +1 -0
  124. package/dist/esm-es5/{http-service-5d037e16.js → http-service-3dc3b3e7.js} +0 -0
  125. package/dist/esm-es5/{interfaces-61c6305b.js → interfaces-2b97fab2.js} +0 -0
  126. package/dist/esm-es5/loader.js +1 -1
  127. package/dist/esm-es5/priv-chart-popover.entry.js +1 -1
  128. package/dist/esm-es5/priv-datepicker.entry.js +1 -1
  129. package/dist/esm-es5/ripple.js +1 -1
  130. package/dist/esm-es5/wm-action-menu_2.entry.js +1 -1
  131. package/dist/esm-es5/wm-button.entry.js +1 -1
  132. package/dist/esm-es5/wm-chart.entry.js +1 -1
  133. package/dist/esm-es5/wm-datepicker.entry.js +1 -1
  134. package/dist/esm-es5/wm-input.entry.js +1 -1
  135. package/dist/esm-es5/wm-modal-header.entry.js +1 -1
  136. package/dist/esm-es5/wm-modal.entry.js +1 -1
  137. package/dist/esm-es5/wm-navigation_3.entry.js +1 -1
  138. package/dist/esm-es5/wm-navigator.entry.js +1 -1
  139. package/dist/esm-es5/wm-network-uploader.entry.js +1 -1
  140. package/dist/esm-es5/wm-option_2.entry.js +1 -1
  141. package/dist/esm-es5/wm-pagination.entry.js +1 -1
  142. package/dist/esm-es5/wm-progress-indicator_3.entry.js +1 -1
  143. package/dist/esm-es5/wm-search.entry.js +1 -1
  144. package/dist/esm-es5/wm-snackbar.entry.js +1 -1
  145. package/dist/esm-es5/wm-tab-item_3.entry.js +1 -1
  146. package/dist/esm-es5/wm-tag-input.entry.js +1 -1
  147. package/dist/esm-es5/wm-timepicker.entry.js +1 -1
  148. package/dist/esm-es5/wm-toggletip.entry.js +1 -1
  149. package/dist/esm-es5/wm-uploader.entry.js +1 -1
  150. package/dist/ripple/{p-07ebdcd4.system.entry.js → p-0f08a806.system.entry.js} +1 -1
  151. package/dist/ripple/{p-b793bc6f.system.entry.js → p-1ba2134b.system.entry.js} +1 -1
  152. package/dist/ripple/{p-626d5017.entry.js → p-1c75615f.entry.js} +1 -1
  153. package/dist/ripple/{p-42dbd978.entry.js → p-1cadcfc1.entry.js} +1 -1
  154. package/dist/ripple/{p-b2a9b5d6.system.entry.js → p-2531b343.system.entry.js} +1 -1
  155. package/dist/ripple/p-32da7cdf.entry.js +1 -0
  156. package/dist/ripple/p-375a850f.system.js +1 -0
  157. package/dist/ripple/p-3a71d9a3.entry.js +1 -0
  158. package/dist/ripple/{p-0e22a3a4.entry.js → p-428b8b24.entry.js} +1 -1
  159. package/dist/ripple/{p-888bec42.js → p-43f1298b.js} +0 -0
  160. package/dist/ripple/{p-80a00759.entry.js → p-477688c8.entry.js} +1 -1
  161. package/dist/ripple/{p-d927de70.system.entry.js → p-4be49461.system.entry.js} +1 -1
  162. package/dist/ripple/{p-7cb0035a.system.entry.js → p-51b60241.system.entry.js} +1 -1
  163. package/dist/ripple/p-5754e2b8.system.js +1 -0
  164. package/dist/ripple/{p-b5b7c71f.system.js → p-591fae61.system.js} +1 -1
  165. package/dist/ripple/p-5f589556.entry.js +1 -0
  166. package/dist/ripple/{p-b4837126.system.entry.js → p-617b738b.system.entry.js} +1 -1
  167. package/dist/ripple/{p-06012eb7.system.entry.js → p-61e2a39a.system.entry.js} +1 -1
  168. package/dist/ripple/{p-5018f8ae.entry.js → p-65d5f494.entry.js} +1 -1
  169. package/dist/ripple/{p-4f3f7b2b.entry.js → p-6ac734b7.entry.js} +1 -1
  170. package/dist/ripple/p-6d7a6954.js +1 -0
  171. package/dist/ripple/{p-97683ddc.entry.js → p-6ddfada6.entry.js} +1 -1
  172. package/dist/ripple/{p-57a718f0.system.entry.js → p-719864a5.system.entry.js} +1 -1
  173. package/dist/ripple/{p-caef11cc.entry.js → p-73a66a6c.entry.js} +1 -1
  174. package/dist/ripple/{p-c656fcf1.entry.js → p-75346877.entry.js} +1 -1
  175. package/dist/ripple/{p-dfa80ed1.entry.js → p-7833008a.entry.js} +1 -1
  176. package/dist/ripple/{p-08fc668c.system.entry.js → p-79542ae3.system.entry.js} +1 -1
  177. package/dist/ripple/{p-4073ac6a.entry.js → p-79b8e996.entry.js} +1 -1
  178. package/dist/ripple/{p-8b54c589.system.entry.js → p-7a07096b.system.entry.js} +1 -1
  179. package/dist/ripple/{p-c4c21c82.system.entry.js → p-93321f18.system.entry.js} +1 -1
  180. package/dist/ripple/p-96b47a13.js +1 -0
  181. package/dist/ripple/{p-c49ef079.system.entry.js → p-981788dd.system.entry.js} +1 -1
  182. package/dist/ripple/p-990db03b.system.entry.js +1 -0
  183. package/dist/ripple/p-99791f7a.system.js +1 -0
  184. package/dist/ripple/{p-e012273a.entry.js → p-9ad7db55.entry.js} +1 -1
  185. package/dist/ripple/{p-910b6dd5.system.entry.js → p-9caf189d.system.entry.js} +1 -1
  186. package/dist/ripple/{p-313b6073.system.js → p-9d02957d.system.js} +0 -0
  187. package/dist/ripple/{p-ffc34819.system.entry.js → p-9ef524df.system.entry.js} +1 -1
  188. package/dist/ripple/{p-84d0d2ff.system.entry.js → p-9fd29197.system.entry.js} +1 -1
  189. package/dist/ripple/{p-f0d3ceb1.system.entry.js → p-a2f8608f.system.entry.js} +1 -1
  190. package/dist/ripple/{p-dc7e5609.system.entry.js → p-aa35c9dd.system.entry.js} +1 -1
  191. package/dist/ripple/{p-6ffdab0d.system.entry.js → p-ab7ce269.system.entry.js} +1 -1
  192. package/dist/ripple/{p-410687ea.entry.js → p-b5a6aebc.entry.js} +1 -1
  193. package/dist/ripple/{p-4650a83c.system.entry.js → p-b6c197c7.system.entry.js} +1 -1
  194. package/dist/ripple/{p-9c60325b.entry.js → p-c5a3766f.entry.js} +1 -1
  195. package/dist/ripple/{p-2af0b657.system.entry.js → p-c95317b4.system.entry.js} +1 -1
  196. package/dist/ripple/p-ce696630.entry.js +1 -0
  197. package/dist/ripple/{p-17438cd5.entry.js → p-d3326191.entry.js} +1 -1
  198. package/dist/ripple/{p-fe4c1194.system.entry.js → p-e47b10b1.system.entry.js} +1 -1
  199. package/dist/ripple/{p-490dafa4.js → p-eb308bc7.js} +1 -1
  200. package/dist/ripple/{p-4afa52d4.entry.js → p-f5cec3d1.entry.js} +1 -1
  201. package/dist/ripple/{p-08b7ec08.system.js → p-f5df5903.system.js} +0 -0
  202. package/dist/ripple/{p-8a2cabf2.entry.js → p-f7c2b508.entry.js} +1 -1
  203. package/dist/ripple/{p-cb357a84.entry.js → p-fcb81a4e.entry.js} +1 -1
  204. package/dist/ripple/{p-a6d6eae7.js → p-fd8070fb.js} +0 -0
  205. package/dist/ripple/ripple.esm.js +1 -1
  206. package/dist/ripple/ripple.js +1 -1
  207. package/dist/types/components/charts/priv-chart-popover/priv-chart-popover.d.ts +27 -27
  208. package/dist/types/components/charts/wm-chart/wm-chart-slice.d.ts +11 -11
  209. package/dist/types/components/charts/wm-chart/wm-chart.d.ts +36 -36
  210. package/dist/types/components/charts/wm-progress-monitor/wm-progress-indicator.d.ts +27 -27
  211. package/dist/types/components/charts/wm-progress-monitor/wm-progress-monitor.d.ts +17 -17
  212. package/dist/types/components/charts/wm-progress-monitor/wm-progress-slice.d.ts +10 -10
  213. package/dist/types/components/wm-action-menu/wm-action-menu.d.ts +47 -47
  214. package/dist/types/components/wm-button/wm-button.d.ts +49 -43
  215. package/dist/types/components/wm-datepicker/priv-datepicker/priv-datepicker.d.ts +80 -80
  216. package/dist/types/components/wm-datepicker/wm-datepicker.d.ts +41 -41
  217. package/dist/types/components/wm-input/wm-input.d.ts +46 -46
  218. package/dist/types/components/wm-menuitem/wm-menuitem.d.ts +34 -34
  219. package/dist/types/components/wm-modal/wm-modal-footer.d.ts +14 -14
  220. package/dist/types/components/wm-modal/wm-modal-header.d.ts +11 -11
  221. package/dist/types/components/wm-modal/wm-modal.d.ts +41 -41
  222. package/dist/types/components/wm-navigation/wm-navigation-hamburger.d.ts +21 -21
  223. package/dist/types/components/wm-navigation/wm-navigation-item.d.ts +13 -13
  224. package/dist/types/components/wm-navigation/wm-navigation.d.ts +28 -28
  225. package/dist/types/components/wm-navigator/priv-navigator-button/priv-navigator-button.d.ts +10 -10
  226. package/dist/types/components/wm-navigator/priv-navigator-item/priv-navigator-item.d.ts +13 -13
  227. package/dist/types/components/wm-navigator/wm-navigator.d.ts +61 -61
  228. package/dist/types/components/wm-option/wm-option.d.ts +35 -35
  229. package/dist/types/components/wm-pagination/wm-pagination.d.ts +32 -32
  230. package/dist/types/components/wm-search/wm-search.d.ts +86 -86
  231. package/dist/types/components/wm-select/wm-select.d.ts +94 -94
  232. package/dist/types/components/wm-snackbar/wm-snackbar.d.ts +35 -35
  233. package/dist/types/components/wm-tabs/wm-tab-item/wm-tab-item.d.ts +38 -38
  234. package/dist/types/components/wm-tabs/wm-tab-list/wm-tab-list.d.ts +53 -53
  235. package/dist/types/components/wm-tabs/wm-tab-panel/wm-tab-panel.d.ts +20 -20
  236. package/dist/types/components/wm-tag-input/wm-tag-input.d.ts +92 -92
  237. package/dist/types/components/wm-timepicker/wm-timepicker.d.ts +61 -61
  238. package/dist/types/components/wm-toggletip/wm-toggletip.d.ts +27 -27
  239. package/dist/types/components/wm-uploader/wm-network-uploader/wm-network-uploader.d.ts +85 -85
  240. package/dist/types/components/wm-uploader/wm-uploader.d.ts +121 -118
  241. package/dist/types/components/wm-wrapper/wm-wrapper.d.ts +7 -7
  242. package/dist/types/components.d.ts +28 -24
  243. package/dist/types/global/__mocks__/functions.d.ts +6 -6
  244. package/dist/types/global/chartFunctions.d.ts +29 -29
  245. package/dist/types/global/functions.d.ts +42 -42
  246. package/dist/types/global/global.d.ts +1 -1
  247. package/dist/types/global/interfaces.d.ts +44 -44
  248. package/dist/types/global/services/__mocks__/http-service.d.ts +6 -6
  249. package/dist/types/global/services/http-service.d.ts +4 -4
  250. package/dist/types/lang/lang.d.ts +5 -5
  251. package/package.json +47 -47
  252. package/dist/esm-es5/functions-11c0c4e2.js +0 -1
  253. package/dist/esm-es5/global-5abca73e.js +0 -1
  254. package/dist/ripple/p-37b0a23c.system.js +0 -1
  255. package/dist/ripple/p-3e875e87.system.entry.js +0 -1
  256. package/dist/ripple/p-42bf2cd4.system.js +0 -1
  257. package/dist/ripple/p-70d0e993.js +0 -1
  258. package/dist/ripple/p-80b62707.entry.js +0 -1
  259. package/dist/ripple/p-d2a11410.entry.js +0 -1
  260. package/dist/ripple/p-db899686.system.js +0 -1
  261. package/dist/ripple/p-e2d5f8bd.js +0 -1
  262. package/dist/ripple/p-e4cb8aad.entry.js +0 -1
  263. package/dist/ripple/p-fa632547.entry.js +0 -1
@@ -3,463 +3,464 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-df6a3611.js');
6
- const httpService = require('./http-service-9e8c4dd5.js');
7
- const functions = require('./functions-8d3ceccd.js');
6
+ const httpService = require('./http-service-494d81de.js');
7
+ const functions = require('./functions-e1b590e0.js');
8
8
 
9
9
  const wmNetworkUploaderCss = ":host .wm-button,wm-network-uploader .wm-button{-ms-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;width:inherit;border:2px solid #575195;color:#575195;font-family:inherit;font-size:0.75rem;font-weight:700;height:2.75rem;padding:0 1.3333333333em;cursor:pointer;position:relative;background:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:0.01875rem;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button,wm-network-uploader .wm-button{height:3.3333333333em}}:host .wm-button.nowrap,wm-network-uploader .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus,wm-network-uploader .wm-button:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner,wm-network-uploader .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,wm-network-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-network-uploader .wm-button.-textonly .button-text,wm-network-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-network-uploader .wm-button.-textonly .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled),wm-network-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark),wm-network-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark){-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}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner,wm-network-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner{border:0}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled),wm-network-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled){background:transparent;border:2px solid #fff;color:#fff}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover,wm-network-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark,wm-network-uploader .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-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-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption),wm-network-uploader .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption){-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-button .mdi,wm-network-uploader .wm-button .mdi{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}:host .wm-button:not(.-icononly):not(.-navigational) .mdi,wm-network-uploader .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi,wm-network-uploader .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly),wm-network-uploader .wm-button.-primary:not(.-textonly){background:#575195;color:#fff}:host .wm-button.-primary:not(.-textonly):not(:focus),wm-network-uploader .wm-button.-primary:not(.-textonly):not(:focus){-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2)}:host .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled){background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover,wm-network-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-secondary:hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-secondary:hover:not(:disabled):not(.disabled),:host .wm-button.-icononly:hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-icononly:hover:not(:disabled):not(.disabled){background:#464177;color:#fff}:host .wm-button.-textonly,wm-network-uploader .wm-button.-textonly{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:inline-block;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1}:host .wm-button.-textonly+.-textonly,wm-network-uploader .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus,wm-network-uploader .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner,wm-network-uploader .wm-button.-textonly::-moz-focus-inner{border:0;outline:none}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text,wm-network-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text,wm-network-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #fff), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #fff 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.small,wm-network-uploader .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete),wm-network-uploader .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline}:host .wm-button.-textonly.-permanentlydelete,wm-network-uploader .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark),wm-network-uploader .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark){text-decoration:underline;color:#c0392b !important}:host .wm-button.-textonly.dark,wm-network-uploader .wm-button.-textonly.dark{color:#fff}:host .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled){text-decoration:underline;color:#fff !important}:host .wm-button.-icononly,wm-network-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-network-uploader .wm-button.-navigational{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}:host .wm-button.-icononly:not(:focus),wm-network-uploader .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus),wm-network-uploader .wm-button.-navigational:not(:focus){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button.-icononly,wm-network-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-network-uploader .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly,wm-network-uploader .wm-button.-icononly{border-width:1px !important}:host .wm-button.-icononly:before,wm-network-uploader .wm-button.-icononly: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}:host .wm-button.-navigational,wm-network-uploader .wm-button.-navigational{border:none !important;background-color:transparent}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled),wm-network-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,wm-network-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected,wm-network-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected{background-color:#d7d6d9}:host .wm-button.-navigational:before,wm-network-uploader .wm-button.-navigational: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}:host .wm-button.-permanentlydelete:not(.-textonly),wm-network-uploader .wm-button.-permanentlydelete:not(.-textonly){background:#c0392b;border-color:#c0392b;color:#fff}:host .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark),wm-network-uploader .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark){background:#9a2e22;border-color:#9a2e22}:host .wm-button.-pairnegative,wm-network-uploader .wm-button.-pairnegative{background:#cc4c3e;border-color:#cc4c3e;color:#fff}:host .wm-button.-pairnegative:hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-pairnegative:hover:not(:disabled):not(.disabled){background:#a33d32;border-color:#a33d32}:host .wm-button.-pairpositive,wm-network-uploader .wm-button.-pairpositive{background:#15868d;border-color:#15868d;color:#fff}:host .wm-button.-pairpositive:hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-pairpositive:hover:not(:disabled):not(.disabled){background:#116b71;border-color:#116b71}:host .wm-button.-selectoronly,wm-network-uploader .wm-button.-selectoronly{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:block;background:transparent;border:1px solid #575195;border-radius:3px 3px 3px 3px;height:2.75rem;min-width:11.4375rem;padding:0 1.875rem 0 0.9375rem;line-height:normal;font-family:inherit;color:#575195;font-weight:500;font-size:0.875rem;text-transform:none;letter-spacing:0.01875rem;text-align:left}@media screen and (min-width: 48rem){:host .wm-button.-selectoronly,wm-network-uploader .wm-button.-selectoronly{height:2.5rem}}:host .wm-button.-selectoronly:before,wm-network-uploader .wm-button.-selectoronly: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;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}:host .wm-button.-selectoronly:hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-selectoronly:hover:not(:disabled):not(.disabled){background:transparent;text-decoration:none}:host .wm-button.-selectoronly:active,wm-network-uploader .wm-button.-selectoronly:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selectoronly::-moz-focus-inner,wm-network-uploader .wm-button.-selectoronly::-moz-focus-inner{border:0}:host .wm-button.-selectoronly .overflowcontrol,wm-network-uploader .wm-button.-selectoronly .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button:disabled,wm-network-uploader .wm-button:disabled,:host .wm-button.disabled,wm-network-uploader .wm-button.disabled{background:inherit;border-color:#737373;color:#737373;cursor:default;pointer-events:none}:host .wm-button:disabled.-primary,wm-network-uploader .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-network-uploader .wm-button:disabled.-permanentlydelete,:host .wm-button:disabled.-pairnegative,wm-network-uploader .wm-button:disabled.-pairnegative,:host .wm-button:disabled.-pairpositive,wm-network-uploader .wm-button:disabled.-pairpositive,:host .wm-button.disabled.-primary,wm-network-uploader .wm-button.disabled.-primary,:host .wm-button.disabled.-permanentlydelete,wm-network-uploader .wm-button.disabled.-permanentlydelete,:host .wm-button.disabled.-pairnegative,wm-network-uploader .wm-button.disabled.-pairnegative,:host .wm-button.disabled.-pairpositive,wm-network-uploader .wm-button.disabled.-pairpositive{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-secondary,wm-network-uploader .wm-button:disabled.-secondary,:host .wm-button.disabled.-secondary,wm-network-uploader .wm-button.disabled.-secondary{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button:disabled.-selectoronly,wm-network-uploader .wm-button:disabled.-selectoronly,:host .wm-button.disabled.-selectoronly,wm-network-uploader .wm-button.disabled.-selectoronly{color:#737373}:host .wm-button:disabled.-textonly,wm-network-uploader .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly,wm-network-uploader .wm-button.disabled.-textonly{color:#6b6b6b;background:transparent}:host .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),wm-network-uploader .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button:disabled.dark.-textonly,wm-network-uploader .wm-button:disabled.dark.-textonly,:host .wm-button:disabled.dark.-navigational,wm-network-uploader .wm-button:disabled.dark.-navigational,:host .wm-button:disabled.dark.-icononly,wm-network-uploader .wm-button:disabled.dark.-icononly,:host .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),wm-network-uploader .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button.disabled.dark.-textonly,wm-network-uploader .wm-button.disabled.dark.-textonly,:host .wm-button.disabled.dark.-navigational,wm-network-uploader .wm-button.disabled.dark.-navigational,:host .wm-button.disabled.dark.-icononly,wm-network-uploader .wm-button.disabled.dark.-icononly{color:#b5b5b5;border-color:#b5b5b5}:host .wm-button:disabled.dark.-primary,wm-network-uploader .wm-button:disabled.dark.-primary,:host .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),wm-network-uploader .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),:host .wm-button.disabled.dark.-primary,wm-network-uploader .wm-button.disabled.dark.-primary,:host .wm-button.disabled.dark.-permanentlydelete:not(.-textonly),wm-network-uploader .wm-button.disabled.dark.-permanentlydelete:not(.-textonly){background:#a6a6a6;border-color:#a6a6a6;color:#353b48}:host a.wm-button,wm-network-uploader a.wm-button,:host label.wm-button,wm-network-uploader label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host,wm-network-uploader{width:100%;position:relative}:host[dir=RTL] .mdi,wm-network-uploader[dir=RTL] .mdi{margin-left:0.3125rem;margin-right:0}:host input:focus+.wm-button.user-is-tabbing,wm-network-uploader input:focus+.wm-button.user-is-tabbing{-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 !important;-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 !important;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 !important}:host *,wm-network-uploader *{-webkit-box-sizing:border-box;box-sizing:border-box}.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}.header{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}.header .notif-wrapper{-ms-flex-align:end;align-items:flex-end}.notif-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.notif-wrapper .notif{font-size:0.875rem;font-style:italic;margin-top:0.25rem}@media (max-width: 60.9375rem){.descr{margin-bottom:0.5rem}.notif-wrapper{margin-bottom:1rem}.header .notif-wrapper{-ms-flex-align:start;align-items:flex-start}}.file-info{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.file-info+.file-controls{-ms-flex:none;flex:none;margin-left:1rem}.empty-block{margin:5rem auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.empty-block .upload-file{margin-bottom:1.875rem}.empty-block .empty-message{font-size:1.5rem;margin-bottom:0.4375rem}.empty-block .notif-wrapper{-ms-flex-pack:center;justify-content:center}.empty-block .notif-wrapper .wm-button{width:auto}ul{list-style:none;padding:0;width:100%}ul li{font-size:0.875rem}ul li .file{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:relative;height:3.75rem;padding:0.5rem 1.25rem;background:#f4f4f4;border:1px solid #6b6b6b;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}ul li .file+.file{margin-top:1.25rem}ul li .file .filename{font-weight:500}ul li .file .filedate{margin-left:3.75rem;font-weight:normal;font-style:italic}ul li .file wm-button+wm-button{margin-left:1rem}ul.file-list .file.--saved,ul.inprogress-list .file{margin-bottom:1.625rem}ul .progress{position:absolute;left:0;top:0;right:0;height:8px}ul.error-list li{margin-bottom:1.25rem;color:#c0392b}ul.error-list li .file{border:1px solid #c0392b;background-color:#f5ebea;height:3.75rem}ul .error-message{padding-top:0.25rem;font-style:italic}";
10
10
 
11
- const NetworkUploader = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- this.wmNetworkUploaderFilesChanged = index.createEvent(this, "wmNetworkUploaderFilesChanged", 7);
15
- this.isTabbing = false;
16
- this.fileList = [];
17
- this.inProgressList = [];
18
- this.errorList = []; // for errors on a particular file
19
- this.snackbar = [];
20
- this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
21
- this.maxSize = 100; // in Mb
22
- this.sortBy = "date"; // name is descending (a -> z), date is ascending (earlier -> later)
23
- this.inputId = functions.generateId();
24
- }
25
- toggleTabbingOn() {
26
- this.isTabbing = true;
27
- }
28
- toggleTabbingOff() {
29
- this.isTabbing = false;
30
- }
31
- handleUploadProgress(ev) {
32
- this.inProgressList.map((i) => {
33
- if (i.name === ev.detail.file_name) {
34
- i.progress = ev.detail.progress;
35
- index.forceUpdate(this.el);
36
- }
37
- });
38
- if (ev.detail.progress === 100) {
39
- // inProgressList is not a perfect reflection of how many files are uploading
40
- // because even after progress reached 100% the item should remain in the array
41
- // (should only be removed once it appears in fileList)
42
- this.numFilesInProgress -= 1;
43
- }
44
- // aggregate the percentages for SR to announce progress
45
- if (!this.srProgress && this.numFilesInProgress) {
46
- const total = this.numFilesInProgress; // if we don't reassign this number changes when a file is done and the percentage becomes wrong
47
- this.srProgress = setInterval(() => {
48
- const aggregate = this.inProgressList.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
49
- if (this.liveRegion) {
50
- this.liveRegion.innerHTML = functions.intl.formatMessage({
51
- id: "uploader.uploadProgress",
52
- defaultMessage: "Upload progress: {percentage}%",
53
- }, { percentage: Math.floor(aggregate / total) });
54
- }
55
- }, 5000);
56
- }
57
- }
58
- handleFinishedSnack(ev) {
59
- this.snackbar = this.snackbar.filter((n) => n.id !== ev.detail.id);
60
- }
61
- setMaxSize() {
62
- // Max size can't be set above 100Mb
63
- this.maxSize = this.maxSize > 100 ? 100 : this.maxSize;
64
- }
65
- uploadNotifications(newNum, oldNum) {
66
- if (oldNum > 0 && newNum === 0) {
67
- setTimeout(() => {
68
- this.notif = null;
69
- }, 20 * 1000);
70
- const message = functions.intl.formatMessage({
71
- id: "uploader.finishedUploading",
72
- defaultMessage: "Finished uploading",
73
- });
74
- this.notif = { id: 5, message };
75
- if (this.liveRegion) {
76
- this.liveRegion.innerHTML = message;
77
- }
78
- this.numFilesInProgress = null;
79
- clearInterval(this.srProgress);
80
- index.forceUpdate(this.el);
81
- }
82
- else if (newNum > 0 && newNum != oldNum) {
83
- const message = functions.intl.formatMessage({
84
- id: "uploader.filesUploading",
85
- defaultMessage: "{num, plural, one {1 file uploading} other {# files uploading}}",
86
- }, { num: newNum });
87
- this.notif = { id: 6, message };
88
- if (this.liveRegion) {
89
- this.liveRegion.innerHTML = message;
90
- }
91
- index.forceUpdate(this.el);
92
- }
93
- }
94
- emitFileListEvent() {
95
- this.wmNetworkUploaderFilesChanged.emit(this.fileList);
96
- }
97
- formatDate(isoDate, locale, timezone) {
98
- const timestamp = Date.parse(isoDate);
99
- if (locale.match(/^[a-zA-Z]*(-[a-zA-Z0-9]*)*$/g)) {
100
- // make sure locale is valid, otherwise set default locale
101
- try {
102
- //@ts-ignore
103
- Intl.getCanonicalLocales(locale);
104
- }
105
- catch (_a) {
106
- locale = "en-us";
107
- }
108
- }
109
- else {
110
- return isoDate;
111
- }
112
- if (!!timestamp) {
113
- const date = new Date(timestamp);
114
- const year = date.getFullYear();
115
- const month = ("0" + (date.getMonth() + 1)).substr(-2);
116
- const day = ("0" + date.getDate()).substr(-2);
117
- const time = date.toLocaleTimeString([locale, "en-us"], {
118
- timeZone: timezone,
119
- hour: "numeric",
120
- minute: "numeric",
121
- });
122
- return `${year}/${month}/${day} ${time}`;
123
- }
124
- else {
125
- return isoDate;
126
- }
127
- }
128
- isValidSize(size) {
129
- // https://stackoverflow.com/questions/2365100/converting-bytes-to-megabytes
130
- return size / 1024 / 1024 <= this.maxSize;
131
- }
132
- isDuplicate(name) {
133
- return this.fileList.find((f) => f.file_name === name);
134
- }
135
- isEmpty() {
136
- return !this.fileList.length && !this.inProgressList.length && !this.errorList.length;
137
- }
138
- get isDisabled() {
139
- const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;
140
- if (!this.notif) {
141
- if (isMax) {
142
- const errMessage = functions.intl.formatMessage({
143
- id: "uploader.fileUploadLimit",
144
- defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
145
- description: "Message displayed when trying to upload too many files",
146
- });
147
- this.notif = { id: 1, message: errMessage };
148
- if (this.liveRegion) {
149
- this.liveRegion.innerHTML = errMessage;
150
- }
151
- }
152
- else {
153
- this.notif = null;
154
- }
155
- }
156
- else if (this.notif.id === 1) {
157
- // to make sure SR don't repeat the error, don't reset it if it already is showing
158
- // just dismiss it if isMax is not true anymore
159
- if (!isMax) {
160
- this.notif = null;
161
- }
162
- // finally do nothing if error 2 is showing (special case when user selects too many files)
163
- }
164
- // disable if is the uploader is maxed out or if something is uploading
165
- return isMax || this.numFilesInProgress > 0;
166
- }
167
- purgeProgressList(item) {
168
- // If a file is retrieved from the server because it was just uploaded
169
- // it should be removed from inProgressList
170
- this.inProgressList = this.inProgressList.filter((i) => i.progress !== 100 && i.name !== item.file_name);
171
- }
172
- getExistingFiles() {
173
- httpService.getRequest(this.getPath)
174
- .then((reply) => {
175
- reply.map((item) => this.purgeProgressList(item));
176
- if (this.sortBy === "name") {
177
- reply.sort((a, b) => a.file_name.localeCompare(b.file_name));
178
- }
179
- this.fileList = reply;
180
- })
181
- .catch((errStatus) => {
182
- console.error(errStatus);
183
- });
184
- }
185
- clearErrors() {
186
- this.errorList = [];
187
- this.notif = null;
188
- }
189
- handleFiles(ev) {
190
- const files = Array.from(ev.target.files);
191
- const validTypes = this.fileTypes.split(" ").join(", ");
192
- if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {
193
- const errMessage = functions.intl.formatMessage({
194
- id: "uploader.fileUploadExceeded",
195
- defaultMessage: "The number of selected files exceeds the limit.",
196
- });
197
- this.notif = { id: 2, message: errMessage };
198
- if (this.liveRegion) {
199
- this.liveRegion.innerHTML = errMessage;
200
- }
201
- }
202
- else {
203
- // map to create inProgress items so they can be displayed immediately
204
- files &&
205
- files.map((file) => {
206
- if (!functions.hasValidType(file, this.fileTypes)) {
207
- const error = {
208
- file_name: file.name,
209
- message: functions.intl.formatMessage({
210
- id: "uploader.invalidFileType",
211
- defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
212
- }, { validTypes }),
213
- };
214
- this.errorList.push(error);
215
- }
216
- else if (!this.isValidSize(file.size)) {
217
- const error = {
218
- file_name: file.name,
219
- message: functions.intl.formatMessage({
220
- id: "uploader.fileTooLarge",
221
- defaultMessage: "The selected file is too large. Maximum file size is {size}Mb",
222
- }, { size: this.maxSize }),
223
- };
224
- this.errorList.push(error);
225
- }
226
- else if (this.isDuplicate(file.name)) {
227
- const error = {
228
- file_name: file.name,
229
- message: functions.intl.formatMessage({
230
- id: "uploader.duplicateName",
231
- defaultMessage: "A file with this name already exists.",
232
- }),
233
- };
234
- this.errorList.push(error);
235
- }
236
- else {
237
- this.inProgressList.push(file);
238
- }
239
- index.forceUpdate(this.el);
240
- });
241
- if (this.inProgressList.length > 0) {
242
- this.numFilesInProgress = this.inProgressList.length;
243
- // map over "uploadable" files for actual upload
244
- // this happens separately otherwise at each pass we'd have to wait for the requests to complete before displaying things
245
- this.inProgressList.map((file, i) => {
246
- this.uploadFile(file, i); // = input.files file
247
- });
248
- }
249
- }
250
- ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
251
- }
252
- uploadFile(file, i) {
253
- // get upload link
254
- httpService.getRequest(this.requestUploadPath + i.toString())
255
- .then(async (reply) => {
256
- const assData = JSON.parse(this.associatedData);
257
- const fileInfo = Object.assign(Object.assign({}, assData), { file_name: file.name, mime_type: file.type, file_path: reply.path, document_uuid: reply.guid });
258
- // onProgress is passed as a callback to the ev listener inside putRequest (http service),
259
- // so we can't change component things directly => custom event to pass data to uploader component.
260
- const onProgress = (ev) => {
261
- const progress = ev.lengthComputable && ev.total !== 0 ? (ev.loaded / ev.total) * 100 : 0;
262
- const event = new CustomEvent("wmUploadProgress", {
263
- detail: { file_name: file.name, progress },
264
- });
265
- this.el.dispatchEvent(event);
266
- };
267
- // upload to AWS s3 to url we just fetched
268
- await httpService.putRequest(reply.url, file, onProgress);
269
- // create the db entry
270
- await httpService.postRequest(this.uploadPath, fileInfo);
271
- // get files from server again
272
- this.getExistingFiles();
273
- })
274
- .catch((err) => {
275
- // do not show toast on error
276
- this.numFilesInProgress = null;
277
- // do not show in progress item on error
278
- this.inProgressList = [];
279
- this.notif = {
280
- id: 3,
281
- message: functions.intl.formatMessage({
282
- id: "global.genericError",
283
- defaultMessage: "An error occurred. Please try again.",
284
- }),
285
- };
286
- console.error(err);
287
- });
288
- }
289
- downloadFile(uuid, path) {
290
- this.clearErrors();
291
- // POST request to get temporary download link
292
- const payload = {
293
- file_path: path,
294
- file_uuid: uuid,
295
- };
296
- httpService.postRequest(this.requestDownloadPath, payload)
297
- .then((reply) => {
298
- // we got the download link, now download the file
299
- window.location.assign(reply.url);
300
- })
301
- .catch((err) => {
302
- console.error(err);
303
- });
304
- }
305
- deleteFile(file) {
306
- this.clearErrors();
307
- this.snackbar.push({
308
- message: functions.intl.formatMessage({
309
- id: "uploader.fileDeleted",
310
- defaultMessage: "{fileName} was deleted.",
311
- }, { fileName: file.file_name }),
312
- id: file.uuid,
313
- link: "",
314
- });
315
- // rm file from list immediately.
316
- this.fileList = this.fileList.filter((i) => i.uuid !== file.uuid);
317
- httpService.deleteRequest(`${this.deletePath}/${file.uuid}`).catch((err) => {
318
- this.notif = {
319
- id: 4,
320
- message: functions.intl.formatMessage({
321
- id: "uploader.fileNotDeleted",
322
- defaultMessage: "{fileName} could not be deleted.",
323
- }, { fileName: file.file_name }),
324
- };
325
- this.getExistingFiles();
326
- console.error(err);
327
- });
328
- }
329
- componentWillLoad() {
330
- if (!this.getPath) {
331
- throw new Error("wm-network-uploader: get-path is a required prop");
332
- }
333
- if (!this.requestUploadPath) {
334
- throw new Error("wm-network-uploader: request-upload-path is a required prop");
335
- }
336
- if (!this.uploadPath) {
337
- throw new Error("wm-network-uploader: upload-path is a required prop");
338
- }
339
- if (!this.requestDownloadPath) {
340
- throw new Error("wm-network-uploader: request-download-path is a required prop");
341
- }
342
- if (!this.deletePath) {
343
- throw new Error("wm-network-uploader: delete-path is a required prop");
344
- }
345
- if (!this.buttonText) {
346
- throw new Error("wm-network-uploader: button-text is a required prop");
347
- }
348
- if (!this.emptyStateText) {
349
- throw new Error("wm-network-uploader: empty-state-text is a required prop");
350
- }
351
- if (!this.associatedData) {
352
- throw new Error("wm-network-uploader: associated-data is a required prop");
353
- }
354
- this.setMaxSize();
355
- this.clearErrors();
356
- }
357
- componentDidLoad() {
358
- this.getExistingFiles();
359
- if (document.body.classList.contains("wmcl-user-is-tabbing")) {
360
- this.toggleTabbingOn();
361
- }
362
- }
363
- uploadButtonOnClick(ev) {
364
- if (this.isDisabled) {
365
- // this is a temporary fix.
366
- // we need the disabled button to be programmatically focusable
367
- // to allow return focus after closing the browser file panel
368
- // since it's focusable the button should respond when activated
369
- // it looks disabled, and announces the reason why the action cannot
370
- // be taken when activated.
371
- // this is not pretty duplicating a intl message + the logic of isDisabled,
372
- // but not worth a bigger refactor since this is only until we get the UX for disabled elements and refactor all interactive els.
373
- ev.preventDefault();
374
- if (this.liveRegion) {
375
- const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;
376
- let errMsg = "";
377
- if (this.numFilesInProgress > 0) {
378
- errMsg = functions.intl.formatMessage({
379
- id: "uploader.waitToUpload",
380
- defaultMessage: "Please wait for current upload to complete before uploading new files.",
381
- description: "Message for screen reader users",
382
- });
383
- }
384
- else if (isMax) {
385
- errMsg = functions.intl.formatMessage({
386
- id: "uploader.fileUploadLimit",
387
- defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
388
- description: "Message displayed when trying to upload too many files",
389
- });
390
- }
391
- if (errMsg) {
392
- // clear and set again to re-announce if button is clicked several times
393
- // (can't be done inside setTimeout because of scope, hence the promise)
394
- this.liveRegion.innerHTML = "";
395
- new Promise((resolve) => {
396
- setTimeout(() => {
397
- resolve("");
398
- }, 500);
399
- }).then(() => (this.liveRegion.innerHTML = errMsg));
400
- }
401
- }
402
- }
403
- else {
404
- this.clearErrors();
405
- }
406
- }
407
- renderUploadSvg() {
408
- return (index.h("svg", { class: "upload-file", width: "91", height: "84", viewBox: "0 0 91 84" }, index.h("path", { transform: "rotate(-180.000000) translate(-452, -255.5)", fill: "#eae8ec", d: "M361,249.681818 L361,197.318182 C361,194.118182 365.555061,191.5 371.122358,191.5 L391.316463,191.5 L391.286495,200.562515 L369.871211,200.600292 L369.885404,200.622146 L369.886423,246.655947 L443.657038,246.840767 L443.657038,200.622146 L421.683537,200.622146 L421.683537,191.5 L441.978865,191.5 C447.546162,191.5 452,194.118182 452,197.318182 L452,249.681818 C452,252.881818 447.546162,255.5 441.978865,255.5 L371.122358,255.5 C365.504449,255.5 361,252.881818 361,249.681818 Z M391.5,207 L406,221 L420.5,207 L409.625,207 L409.625,172 L402.375,172 L402.375,207 L391.5,207 Z" })));
409
- }
410
- renderIcon() {
411
- // mdi attachment icon (paper clip) is horizontal but we want it vertical
412
- const rotate = this.icon && this.icon === "f066";
413
- return (this.icon && (index.h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)))));
414
- }
415
- renderNotif() {
416
- return this.notif ? index.h("span", { class: "notif" }, this.notif.message) : "";
417
- }
418
- renderUploadButton(classes) {
419
- return (index.h("div", { class: "notif-wrapper" }, index.h("input", { name: this.inputId, id: this.inputId, class: "sr-only", type: "file", multiple: true, onClick: (ev) => this.uploadButtonOnClick(ev), onChange: (e) => this.handleFiles(e) }), index.h("label", { htmlFor: this.inputId, class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` }, this.renderIcon(), this.buttonText), this.renderNotif()));
420
- }
421
- renderWithItems() {
422
- return (index.h("div", null, index.h("div", { class: "header" }, index.h("div", { class: "descr" }, index.h("slot", null)), this.renderUploadButton(this.isDisabled ? "disabled" : "")), this.renderErrorList(), this.renderInProgressList(), this.renderFileList()));
423
- }
424
- renderEmptyState() {
425
- return (index.h("div", null, index.h("div", { class: "header" }, index.h("div", { class: "descr" }, index.h("slot", null))), index.h("div", { class: "empty-block" }, this.renderUploadSvg(), index.h("div", { class: "empty-message" }, this.emptyStateText), this.renderUploadButton("-primary empty-button"))));
426
- }
427
- renderErrorList() {
428
- if (!!this.errorList.length) {
429
- if (this.liveRegion) {
430
- let srMessage = this.errorList.reduce(function (acc, err) {
431
- return acc + `${err.file_name}: ${err.message} `;
432
- }, "");
433
- this.liveRegion.innerHTML = srMessage;
434
- }
435
- return (index.h("ul", { class: "error-list" }, this.errorList.map((err) => (index.h("li", null, index.h("div", { class: "file --error" }, index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, err.file_name))), index.h("div", { class: "error-message" }, err.message))))));
436
- }
437
- }
438
- renderInProgressList() {
439
- return (index.h("ul", { class: "inprogress-list" }, this.inProgressList.map((item) => {
440
- return (index.h("li", null, index.h("div", { class: "file --progress" }, index.h("div", { class: "progress", style: {
441
- background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
442
- } }), index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, item.name, " ", index.h("span", { class: "sr-only" }, "uploading"))))));
443
- })));
444
- }
445
- renderFile(item) {
446
- return (index.h("li", null, index.h("div", { class: "file --saved" }, index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, item.file_name), index.h("span", { class: "filedate" }, this.formatDate(item.updated_at, functions.intl.locale, Intl.DateTimeFormat().resolvedOptions().timeZone))), index.h("div", { class: "file-controls" }, index.h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: "download", "label-for-identical-buttons": `download ${item.file_name}`, icon: "f1da", onClick: () => this.downloadFile(item.uuid, item.file_path) }), index.h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: "remove", "label-for-identical-buttons": `remove ${item.file_name}`, icon: "f1c0", onClick: () => this.deleteFile(item) })))));
447
- }
448
- renderFileList() {
449
- return index.h("ul", { class: "file-list" }, this.fileList.map((item) => this.renderFile(item)));
450
- }
451
- render() {
452
- return (index.h(index.Host, null, this.isEmpty() ? this.renderEmptyState() : this.renderWithItems(), index.h("wm-snackbar", { notifications: JSON.stringify(this.snackbar) }), index.h("div", { ref: (el) => (this.liveRegion = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
453
- ,
454
- "aria-atomic": "true" })));
455
- }
456
- get el() { return index.getElement(this); }
457
- static get watchers() { return {
458
- "maxSize": ["setMaxSize"],
459
- "numFilesInProgress": ["uploadNotifications"],
460
- "fileList": ["emitFileListEvent"]
461
- }; }
462
- };
11
+ const NetworkUploader = class {
12
+ constructor(hostRef) {
13
+ index.registerInstance(this, hostRef);
14
+ this.wmNetworkUploaderFilesChanged = index.createEvent(this, "wmNetworkUploaderFilesChanged", 7);
15
+ this.isTabbing = false;
16
+ this.fileList = [];
17
+ this.inProgressList = [];
18
+ this.errorList = []; // for errors on a particular file
19
+ this.snackbar = [];
20
+ this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
21
+ this.maxSize = 100; // in Mb
22
+ this.sortBy = "date"; // name is descending (a -> z), date is ascending (earlier -> later)
23
+ this.inputId = functions.generateId();
24
+ }
25
+ toggleTabbingOn() {
26
+ this.isTabbing = true;
27
+ }
28
+ toggleTabbingOff() {
29
+ this.isTabbing = false;
30
+ }
31
+ handleUploadProgress(ev) {
32
+ this.inProgressList.map((i) => {
33
+ if (i.name === ev.detail.file_name) {
34
+ i.progress = ev.detail.progress;
35
+ index.forceUpdate(this.el);
36
+ }
37
+ });
38
+ if (ev.detail.progress === 100) {
39
+ // inProgressList is not a perfect reflection of how many files are uploading
40
+ // because even after progress reached 100% the item should remain in the array
41
+ // (should only be removed once it appears in fileList)
42
+ this.numFilesInProgress -= 1;
43
+ }
44
+ // aggregate the percentages for SR to announce progress
45
+ if (!this.srProgress && this.numFilesInProgress) {
46
+ const total = this.numFilesInProgress; // if we don't reassign this number changes when a file is done and the percentage becomes wrong
47
+ this.srProgress = setInterval(() => {
48
+ const aggregate = this.inProgressList.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
49
+ if (this.liveRegion) {
50
+ this.liveRegion.innerHTML = functions.intl.formatMessage({
51
+ id: "uploader.uploadProgress",
52
+ defaultMessage: "Upload progress: {percentage}%",
53
+ }, { percentage: Math.floor(aggregate / total) });
54
+ }
55
+ }, 5000);
56
+ }
57
+ }
58
+ handleFinishedSnack(ev) {
59
+ this.snackbar = this.snackbar.filter((n) => n.id !== ev.detail.id);
60
+ }
61
+ setMaxSize() {
62
+ // Max size can't be set above 100Mb
63
+ this.maxSize = this.maxSize > 100 ? 100 : this.maxSize;
64
+ }
65
+ uploadNotifications(newNum, oldNum) {
66
+ if (oldNum > 0 && newNum === 0) {
67
+ setTimeout(() => {
68
+ this.notif = null;
69
+ }, 20 * 1000);
70
+ const message = functions.intl.formatMessage({
71
+ id: "uploader.finishedUploading",
72
+ defaultMessage: "Finished uploading",
73
+ });
74
+ this.notif = { id: 5, message };
75
+ if (this.liveRegion) {
76
+ this.liveRegion.innerHTML = message;
77
+ }
78
+ this.numFilesInProgress = null;
79
+ clearInterval(this.srProgress);
80
+ index.forceUpdate(this.el);
81
+ }
82
+ else if (newNum > 0 && newNum != oldNum) {
83
+ const message = functions.intl.formatMessage({
84
+ id: "uploader.filesUploading",
85
+ defaultMessage: "{num, plural, one {1 file uploading} other {# files uploading}}",
86
+ }, { num: newNum });
87
+ this.notif = { id: 6, message };
88
+ if (this.liveRegion) {
89
+ this.liveRegion.innerHTML = message;
90
+ }
91
+ index.forceUpdate(this.el);
92
+ }
93
+ }
94
+ emitFileListEvent() {
95
+ this.wmNetworkUploaderFilesChanged.emit(this.fileList);
96
+ }
97
+ formatDate(isoDate, locale, timezone) {
98
+ const timestamp = Date.parse(isoDate);
99
+ if (locale.match(/^[a-zA-Z]*(-[a-zA-Z0-9]*)*$/g)) {
100
+ // make sure locale is valid, otherwise set default locale
101
+ try {
102
+ //@ts-ignore
103
+ Intl.getCanonicalLocales(locale);
104
+ }
105
+ catch (_a) {
106
+ locale = "en-us";
107
+ }
108
+ }
109
+ else {
110
+ return isoDate;
111
+ }
112
+ if (!!timestamp) {
113
+ const date = new Date(timestamp);
114
+ const year = date.getFullYear();
115
+ const month = ("0" + (date.getMonth() + 1)).substr(-2);
116
+ const day = ("0" + date.getDate()).substr(-2);
117
+ const time = date.toLocaleTimeString([locale, "en-us"], {
118
+ timeZone: timezone,
119
+ hour: "numeric",
120
+ minute: "numeric",
121
+ });
122
+ return `${year}/${month}/${day} ${time}`;
123
+ }
124
+ else {
125
+ return isoDate;
126
+ }
127
+ }
128
+ isValidSize(size) {
129
+ // https://stackoverflow.com/questions/2365100/converting-bytes-to-megabytes
130
+ return size / 1024 / 1024 <= this.maxSize;
131
+ }
132
+ isDuplicate(name) {
133
+ return this.fileList.find((f) => f.file_name === name);
134
+ }
135
+ isEmpty() {
136
+ return !this.fileList.length && !this.inProgressList.length && !this.errorList.length;
137
+ }
138
+ get isDisabled() {
139
+ const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;
140
+ if (!this.notif) {
141
+ if (isMax) {
142
+ const errMessage = functions.intl.formatMessage({
143
+ id: "uploader.fileUploadLimitExceeded",
144
+ defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
145
+ description: "Message displayed when trying to upload too many files",
146
+ });
147
+ this.notif = { id: 1, message: errMessage };
148
+ if (this.liveRegion) {
149
+ this.liveRegion.innerHTML = errMessage;
150
+ }
151
+ }
152
+ else {
153
+ this.notif = null;
154
+ }
155
+ }
156
+ else if (this.notif.id === 1) {
157
+ // to make sure SR don't repeat the error, don't reset it if it already is showing
158
+ // just dismiss it if isMax is not true anymore
159
+ if (!isMax) {
160
+ this.notif = null;
161
+ }
162
+ // finally do nothing if error 2 is showing (special case when user selects too many files)
163
+ }
164
+ // disable if is the uploader is maxed out or if something is uploading
165
+ return isMax || this.numFilesInProgress > 0;
166
+ }
167
+ purgeProgressList(item) {
168
+ // If a file is retrieved from the server because it was just uploaded
169
+ // it should be removed from inProgressList
170
+ this.inProgressList = this.inProgressList.filter((i) => i.progress !== 100 && i.name !== item.file_name);
171
+ }
172
+ getExistingFiles() {
173
+ httpService.getRequest(this.getPath)
174
+ .then((reply) => {
175
+ reply.map((item) => this.purgeProgressList(item));
176
+ if (this.sortBy === "name") {
177
+ reply.sort((a, b) => a.file_name.localeCompare(b.file_name));
178
+ }
179
+ this.fileList = reply;
180
+ })
181
+ .catch((errStatus) => {
182
+ console.error(errStatus);
183
+ });
184
+ }
185
+ clearErrors() {
186
+ this.errorList = [];
187
+ this.notif = null;
188
+ }
189
+ handleFiles(ev) {
190
+ const files = Array.from(ev.target.files);
191
+ const validTypes = this.fileTypes.split(" ").join(", ");
192
+ if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {
193
+ const errMessage = functions.intl.formatMessage({
194
+ id: "uploader.fileUploadLimitExceeded",
195
+ defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
196
+ description: "Message displayed when trying to upload too many files",
197
+ });
198
+ this.notif = { id: 2, message: errMessage };
199
+ if (this.liveRegion) {
200
+ this.liveRegion.innerHTML = errMessage;
201
+ }
202
+ }
203
+ else {
204
+ // map to create inProgress items so they can be displayed immediately
205
+ files &&
206
+ files.map((file) => {
207
+ if (!functions.hasValidType(file, this.fileTypes)) {
208
+ const error = {
209
+ file_name: file.name,
210
+ message: functions.intl.formatMessage({
211
+ id: "uploader.invalidFileType",
212
+ defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
213
+ }, { validTypes }),
214
+ };
215
+ this.errorList.push(error);
216
+ }
217
+ else if (!this.isValidSize(file.size)) {
218
+ const error = {
219
+ file_name: file.name,
220
+ message: functions.intl.formatMessage({
221
+ id: "uploader.fileTooLarge",
222
+ defaultMessage: "The selected file is too large. Maximum file size is {size}Mb",
223
+ }, { size: this.maxSize }),
224
+ };
225
+ this.errorList.push(error);
226
+ }
227
+ else if (this.isDuplicate(file.name)) {
228
+ const error = {
229
+ file_name: file.name,
230
+ message: functions.intl.formatMessage({
231
+ id: "uploader.duplicateName",
232
+ defaultMessage: "A file with this name already exists.",
233
+ }),
234
+ };
235
+ this.errorList.push(error);
236
+ }
237
+ else {
238
+ this.inProgressList.push(file);
239
+ }
240
+ index.forceUpdate(this.el);
241
+ });
242
+ if (this.inProgressList.length > 0) {
243
+ this.numFilesInProgress = this.inProgressList.length;
244
+ // map over "uploadable" files for actual upload
245
+ // this happens separately otherwise at each pass we'd have to wait for the requests to complete before displaying things
246
+ this.inProgressList.map((file, i) => {
247
+ this.uploadFile(file, i); // = input.files file
248
+ });
249
+ }
250
+ }
251
+ ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
252
+ }
253
+ uploadFile(file, i) {
254
+ // get upload link
255
+ httpService.getRequest(this.requestUploadPath + i.toString())
256
+ .then(async (reply) => {
257
+ const assData = JSON.parse(this.associatedData);
258
+ const fileInfo = Object.assign(Object.assign({}, assData), { file_name: file.name, mime_type: file.type, file_path: reply.path, document_uuid: reply.guid });
259
+ // onProgress is passed as a callback to the ev listener inside putRequest (http service),
260
+ // so we can't change component things directly => custom event to pass data to uploader component.
261
+ const onProgress = (ev) => {
262
+ const progress = ev.lengthComputable && ev.total !== 0 ? (ev.loaded / ev.total) * 100 : 0;
263
+ const event = new CustomEvent("wmUploadProgress", {
264
+ detail: { file_name: file.name, progress },
265
+ });
266
+ this.el.dispatchEvent(event);
267
+ };
268
+ // upload to AWS s3 to url we just fetched
269
+ await httpService.putRequest(reply.url, file, onProgress);
270
+ // create the db entry
271
+ await httpService.postRequest(this.uploadPath, fileInfo);
272
+ // get files from server again
273
+ this.getExistingFiles();
274
+ })
275
+ .catch((err) => {
276
+ // do not show toast on error
277
+ this.numFilesInProgress = null;
278
+ // do not show in progress item on error
279
+ this.inProgressList = [];
280
+ this.notif = {
281
+ id: 3,
282
+ message: functions.intl.formatMessage({
283
+ id: "global.genericError",
284
+ defaultMessage: "An error occurred. Please try again.",
285
+ }),
286
+ };
287
+ console.error(err);
288
+ });
289
+ }
290
+ downloadFile(uuid, path) {
291
+ this.clearErrors();
292
+ // POST request to get temporary download link
293
+ const payload = {
294
+ file_path: path,
295
+ file_uuid: uuid,
296
+ };
297
+ httpService.postRequest(this.requestDownloadPath, payload)
298
+ .then((reply) => {
299
+ // we got the download link, now download the file
300
+ window.location.assign(reply.url);
301
+ })
302
+ .catch((err) => {
303
+ console.error(err);
304
+ });
305
+ }
306
+ deleteFile(file) {
307
+ this.clearErrors();
308
+ this.snackbar.push({
309
+ message: functions.intl.formatMessage({
310
+ id: "uploader.fileDeleted",
311
+ defaultMessage: "{fileName} was deleted.",
312
+ }, { fileName: file.file_name }),
313
+ id: file.uuid,
314
+ link: "",
315
+ });
316
+ // rm file from list immediately.
317
+ this.fileList = this.fileList.filter((i) => i.uuid !== file.uuid);
318
+ httpService.deleteRequest(`${this.deletePath}/${file.uuid}`).catch((err) => {
319
+ this.notif = {
320
+ id: 4,
321
+ message: functions.intl.formatMessage({
322
+ id: "uploader.fileNotDeleted",
323
+ defaultMessage: "{fileName} could not be deleted.",
324
+ }, { fileName: file.file_name }),
325
+ };
326
+ this.getExistingFiles();
327
+ console.error(err);
328
+ });
329
+ }
330
+ componentWillLoad() {
331
+ if (!this.getPath) {
332
+ throw new Error("wm-network-uploader: get-path is a required prop");
333
+ }
334
+ if (!this.requestUploadPath) {
335
+ throw new Error("wm-network-uploader: request-upload-path is a required prop");
336
+ }
337
+ if (!this.uploadPath) {
338
+ throw new Error("wm-network-uploader: upload-path is a required prop");
339
+ }
340
+ if (!this.requestDownloadPath) {
341
+ throw new Error("wm-network-uploader: request-download-path is a required prop");
342
+ }
343
+ if (!this.deletePath) {
344
+ throw new Error("wm-network-uploader: delete-path is a required prop");
345
+ }
346
+ if (!this.buttonText) {
347
+ throw new Error("wm-network-uploader: button-text is a required prop");
348
+ }
349
+ if (!this.emptyStateText) {
350
+ throw new Error("wm-network-uploader: empty-state-text is a required prop");
351
+ }
352
+ if (!this.associatedData) {
353
+ throw new Error("wm-network-uploader: associated-data is a required prop");
354
+ }
355
+ this.setMaxSize();
356
+ this.clearErrors();
357
+ }
358
+ componentDidLoad() {
359
+ this.getExistingFiles();
360
+ if (document.body.classList.contains("wmcl-user-is-tabbing")) {
361
+ this.toggleTabbingOn();
362
+ }
363
+ }
364
+ uploadButtonOnClick(ev) {
365
+ if (this.isDisabled) {
366
+ // this is a temporary fix.
367
+ // we need the disabled button to be programmatically focusable
368
+ // to allow return focus after closing the browser file panel
369
+ // since it's focusable the button should respond when activated
370
+ // it looks disabled, and announces the reason why the action cannot
371
+ // be taken when activated.
372
+ // this is not pretty duplicating a intl message + the logic of isDisabled,
373
+ // but not worth a bigger refactor since this is only until we get the UX for disabled elements and refactor all interactive els.
374
+ ev.preventDefault();
375
+ if (this.liveRegion) {
376
+ const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;
377
+ let errMsg = "";
378
+ if (this.numFilesInProgress > 0) {
379
+ errMsg = functions.intl.formatMessage({
380
+ id: "uploader.waitToUpload",
381
+ defaultMessage: "Please wait for current upload to complete before uploading new files.",
382
+ description: "Message for screen reader users",
383
+ });
384
+ }
385
+ else if (isMax) {
386
+ errMsg = functions.intl.formatMessage({
387
+ id: "uploader.fileUploadLimitExceeded",
388
+ defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
389
+ description: "Message displayed when trying to upload too many files",
390
+ });
391
+ }
392
+ if (errMsg) {
393
+ // clear and set again to re-announce if button is clicked several times
394
+ // (can't be done inside setTimeout because of scope, hence the promise)
395
+ this.liveRegion.innerHTML = "";
396
+ new Promise((resolve) => {
397
+ setTimeout(() => {
398
+ resolve("");
399
+ }, 500);
400
+ }).then(() => (this.liveRegion.innerHTML = errMsg));
401
+ }
402
+ }
403
+ }
404
+ else {
405
+ this.clearErrors();
406
+ }
407
+ }
408
+ renderUploadSvg() {
409
+ return (index.h("svg", { class: "upload-file", width: "91", height: "84", viewBox: "0 0 91 84" }, index.h("path", { transform: "rotate(-180.000000) translate(-452, -255.5)", fill: "#eae8ec", d: "M361,249.681818 L361,197.318182 C361,194.118182 365.555061,191.5 371.122358,191.5 L391.316463,191.5 L391.286495,200.562515 L369.871211,200.600292 L369.885404,200.622146 L369.886423,246.655947 L443.657038,246.840767 L443.657038,200.622146 L421.683537,200.622146 L421.683537,191.5 L441.978865,191.5 C447.546162,191.5 452,194.118182 452,197.318182 L452,249.681818 C452,252.881818 447.546162,255.5 441.978865,255.5 L371.122358,255.5 C365.504449,255.5 361,252.881818 361,249.681818 Z M391.5,207 L406,221 L420.5,207 L409.625,207 L409.625,172 L402.375,172 L402.375,207 L391.5,207 Z" })));
410
+ }
411
+ renderIcon() {
412
+ // mdi attachment icon (paper clip) is horizontal but we want it vertical
413
+ const rotate = this.icon && this.icon === "f066";
414
+ return (this.icon && (index.h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)))));
415
+ }
416
+ renderNotif() {
417
+ return this.notif ? index.h("span", { class: "notif" }, this.notif.message) : "";
418
+ }
419
+ renderUploadButton(classes) {
420
+ return (index.h("div", { class: "notif-wrapper" }, index.h("input", { name: this.inputId, id: this.inputId, class: "sr-only", type: "file", multiple: true, onClick: (ev) => this.uploadButtonOnClick(ev), onChange: (e) => this.handleFiles(e) }), index.h("label", { htmlFor: this.inputId, class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` }, this.renderIcon(), this.buttonText), this.renderNotif()));
421
+ }
422
+ renderWithItems() {
423
+ return (index.h("div", null, index.h("div", { class: "header" }, index.h("div", { class: "descr" }, index.h("slot", null)), this.renderUploadButton(this.isDisabled ? "disabled" : "")), this.renderErrorList(), this.renderInProgressList(), this.renderFileList()));
424
+ }
425
+ renderEmptyState() {
426
+ return (index.h("div", null, index.h("div", { class: "header" }, index.h("div", { class: "descr" }, index.h("slot", null))), index.h("div", { class: "empty-block" }, this.renderUploadSvg(), index.h("div", { class: "empty-message" }, this.emptyStateText), this.renderUploadButton("-primary empty-button"))));
427
+ }
428
+ renderErrorList() {
429
+ if (!!this.errorList.length) {
430
+ if (this.liveRegion) {
431
+ let srMessage = this.errorList.reduce(function (acc, err) {
432
+ return acc + `${err.file_name}: ${err.message} `;
433
+ }, "");
434
+ this.liveRegion.innerHTML = srMessage;
435
+ }
436
+ return (index.h("ul", { class: "error-list" }, this.errorList.map((err) => (index.h("li", null, index.h("div", { class: "file --error" }, index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, err.file_name))), index.h("div", { class: "error-message" }, err.message))))));
437
+ }
438
+ }
439
+ renderInProgressList() {
440
+ return (index.h("ul", { class: "inprogress-list" }, this.inProgressList.map((item) => {
441
+ return (index.h("li", null, index.h("div", { class: "file --progress" }, index.h("div", { class: "progress", style: {
442
+ background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
443
+ } }), index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, item.name, " ", index.h("span", { class: "sr-only" }, "uploading"))))));
444
+ })));
445
+ }
446
+ renderFile(item) {
447
+ return (index.h("li", null, index.h("div", { class: "file --saved" }, index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, item.file_name), index.h("span", { class: "filedate" }, this.formatDate(item.updated_at, functions.intl.locale, Intl.DateTimeFormat().resolvedOptions().timeZone))), index.h("div", { class: "file-controls" }, index.h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: "download", "label-for-identical-buttons": `download ${item.file_name}`, icon: "f1da", onClick: () => this.downloadFile(item.uuid, item.file_path) }), index.h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: "remove", "label-for-identical-buttons": `remove ${item.file_name}`, icon: "f1c0", onClick: () => this.deleteFile(item) })))));
448
+ }
449
+ renderFileList() {
450
+ return index.h("ul", { class: "file-list" }, this.fileList.map((item) => this.renderFile(item)));
451
+ }
452
+ render() {
453
+ return (index.h(index.Host, null, this.isEmpty() ? this.renderEmptyState() : this.renderWithItems(), index.h("wm-snackbar", { notifications: JSON.stringify(this.snackbar) }), index.h("div", { ref: (el) => (this.liveRegion = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
454
+ ,
455
+ "aria-atomic": "true" })));
456
+ }
457
+ get el() { return index.getElement(this); }
458
+ static get watchers() { return {
459
+ "maxSize": ["setMaxSize"],
460
+ "numFilesInProgress": ["uploadNotifications"],
461
+ "fileList": ["emitFileListEvent"]
462
+ }; }
463
+ };
463
464
  NetworkUploader.style = wmNetworkUploaderCss;
464
465
 
465
466
  exports.wm_network_uploader = NetworkUploader;