@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,429 +3,429 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-cd179539.js');
6
- const httpService = require('./http-service-9e8c4dd5.js');
7
- const functions = require('./functions-13b0e88e.js');
6
+ const httpService = require('./http-service-494d81de.js');
7
+ const functions = require('./functions-f0693632.js');
8
8
 
9
- const wmNetworkUploaderCss = "@charset \"UTF-8\";: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:flex;justify-content: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: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:hover,wm-network-uploader .wm-button:hover{background:#464177;color:#fff}: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,wm-network-uploader .wm-button.-primary:not(.-textonly):hover{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.-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: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: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;color:#454077}:host .wm-button.-textonly.-permanentlydelete,wm-network-uploader .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover,wm-network-uploader .wm-button.-textonly.-permanentlydelete:hover{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,wm-network-uploader .wm-button.-textonly.dark:hover{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),wm-network-uploader .wm-button.-navigational:not(.dark):not(:disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):hover,wm-network-uploader .wm-button.-navigational:not(.dark):not(:disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled).selected,wm-network-uploader .wm-button.-navigational:not(.dark):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,wm-network-uploader .wm-button.-permanentlydelete:not(.-textonly):hover{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,wm-network-uploader .wm-button.-pairnegative:hover{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,wm-network-uploader .wm-button.-pairpositive:hover{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:\"\";position:absolute;right:0.5625rem;top: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;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.dark,wm-network-uploader .wm-button:disabled.dark,:host .wm-button.disabled.dark,wm-network-uploader .wm-button.disabled.dark{color:#a6a6a6;border-color:#a6a6a6}: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.-primary.dark,wm-network-uploader .wm-button:disabled.-primary.dark,:host .wm-button.disabled.-primary.dark,wm-network-uploader .wm-button.disabled.-primary.dark{background:#a6a6a6;border-color:#a6a6a6;color:#353b48}: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 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 *{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;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.header{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap}.header .notif-wrapper{align-items:flex-end}.notif-wrapper{display:flex;align-items:flex-start;height:-moz-fit-content;height:fit-content;flex-direction:column;align-items:center}.notif-wrapper .notif{font-size:0.875rem;font-style:italic;margin-top:0.25rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (max-width: 60.9375rem){.descr{margin-bottom:0.5rem}.notif-wrapper{margin-bottom:1rem}.header .notif-wrapper{align-items:flex-start}}.file-info{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.file-info+.file-controls{flex:none;margin-left:1rem}.empty-block{margin:5rem auto;display:flex;flex-direction:column;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{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:flex;justify-content:space-between;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}";
9
+ const wmNetworkUploaderCss = "@charset \"UTF-8\";: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:hover,wm-network-uploader .wm-button:hover{background:#464177;color:#fff}: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,wm-network-uploader .wm-button.-primary:not(.-textonly):hover{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.-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;color:#454077}:host .wm-button.-textonly.-permanentlydelete,wm-network-uploader .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover,wm-network-uploader .wm-button.-textonly.-permanentlydelete:hover{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,wm-network-uploader .wm-button.-textonly.dark:hover{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),wm-network-uploader .wm-button.-navigational:not(.dark):not(:disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):hover,wm-network-uploader .wm-button.-navigational:not(.dark):not(:disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled).selected,wm-network-uploader .wm-button.-navigational:not(.dark):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,wm-network-uploader .wm-button.-permanentlydelete:not(.-textonly):hover{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,wm-network-uploader .wm-button.-pairnegative:hover{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,wm-network-uploader .wm-button.-pairpositive:hover{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:\"\";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.dark,wm-network-uploader .wm-button:disabled.dark,:host .wm-button.disabled.dark,wm-network-uploader .wm-button.disabled.dark{color:#a6a6a6;border-color:#a6a6a6}: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.-primary.dark,wm-network-uploader .wm-button:disabled.-primary.dark,:host .wm-button.disabled.-primary.dark,wm-network-uploader .wm-button.disabled.-primary.dark{background:#a6a6a6;border-color:#a6a6a6;color:#353b48}: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 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;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@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
- 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: "You have reached the file upload limit.",
145
- });
146
- this.notif = { id: 1, message: errMessage };
147
- if (this.liveRegion) {
148
- this.liveRegion.innerHTML = errMessage;
149
- }
150
- }
151
- else {
152
- this.notif = null;
153
- }
154
- }
155
- else if (this.notif.id === 1) {
156
- // to make sure SR don't repeat the error, don't reset it if it already is showing
157
- // just dismiss it if isMax is not true anymore
158
- if (!isMax) {
159
- this.notif = null;
160
- }
161
- // finally do nothing if error 2 is showing (special case when user selects too many files)
162
- }
163
- // disable if is the uploader is maxed out or if something is uploading
164
- return isMax || this.numFilesInProgress > 0;
165
- }
166
- purgeProgressList(item) {
167
- // If a file is retrieved from the server because it was just uploaded
168
- // it should be removed from inProgressList
169
- this.inProgressList = this.inProgressList.filter((i) => i.progress !== 100 && i.name !== item.file_name);
170
- }
171
- getExistingFiles() {
172
- httpService.getRequest(this.getPath)
173
- .then((reply) => {
174
- reply.map((item) => this.purgeProgressList(item));
175
- if (this.sortBy === "name") {
176
- reply.sort((a, b) => a.file_name.localeCompare(b.file_name));
177
- }
178
- this.fileList = reply;
179
- })
180
- .catch((errStatus) => {
181
- console.error(errStatus);
182
- });
183
- }
184
- clearErrors() {
185
- this.errorList = [];
186
- this.notif = null;
187
- }
188
- handleFiles(ev) {
189
- const files = Array.from(ev.target.files);
190
- const validTypes = this.fileTypes.split(" ").join(", ");
191
- if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {
192
- const errMessage = functions.intl.formatMessage({
193
- id: "uploader.fileUploadExceeded",
194
- defaultMessage: "The number of selected files exceeds the limit.",
195
- });
196
- this.notif = { id: 2, message: errMessage };
197
- if (this.liveRegion) {
198
- this.liveRegion.innerHTML = errMessage;
199
- }
200
- }
201
- else {
202
- // map to create inProgress items so they can be displayed immediately
203
- files &&
204
- files.map((file) => {
205
- if (!functions.hasValidType(file, this.fileTypes)) {
206
- const error = {
207
- file_name: file.name,
208
- message: functions.intl.formatMessage({
209
- id: "uploader.invalidFileType",
210
- defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
211
- }, { validTypes }),
212
- };
213
- this.errorList.push(error);
214
- }
215
- else if (!this.isValidSize(file.size)) {
216
- const error = {
217
- file_name: file.name,
218
- message: functions.intl.formatMessage({
219
- id: "uploader.fileTooLarge",
220
- defaultMessage: "The selected file is too large. Maximum file size is {size}Mb",
221
- }, { size: this.maxSize }),
222
- };
223
- this.errorList.push(error);
224
- }
225
- else if (this.isDuplicate(file.name)) {
226
- const error = {
227
- file_name: file.name,
228
- message: functions.intl.formatMessage({
229
- id: "uploader.duplicateName",
230
- defaultMessage: "A file with this name already exists.",
231
- }),
232
- };
233
- this.errorList.push(error);
234
- }
235
- else {
236
- this.inProgressList.push(file);
237
- }
238
- index.forceUpdate(this.el);
239
- });
240
- if (this.inProgressList.length > 0) {
241
- this.numFilesInProgress = this.inProgressList.length;
242
- // map over "uploadable" files for actual upload
243
- // this happens separately otherwise at each pass we'd have to wait for the requests to complete before displaying things
244
- this.inProgressList.map((file, i) => {
245
- this.uploadFile(file, i); // = input.files file
246
- });
247
- }
248
- }
249
- ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
250
- }
251
- uploadFile(file, i) {
252
- // get upload link
253
- httpService.getRequest(this.requestUploadPath + i.toString())
254
- .then(async (reply) => {
255
- const assData = JSON.parse(this.associatedData);
256
- const fileInfo = Object.assign(Object.assign({}, assData), { file_name: file.name, mime_type: file.type, file_path: reply.path, document_uuid: reply.guid });
257
- // onProgress is passed as a callback to the ev listener inside putRequest (http service),
258
- // so we can't change component things directly => custom event to pass data to uploader component.
259
- const onProgress = (ev) => {
260
- const progress = ev.lengthComputable && ev.total !== 0 ? (ev.loaded / ev.total) * 100 : 0;
261
- const event = new CustomEvent("wmUploadProgress", {
262
- detail: { file_name: file.name, progress },
263
- });
264
- this.el.dispatchEvent(event);
265
- };
266
- // upload to AWS s3 to url we just fetched
267
- await httpService.putRequest(reply.url, file, onProgress);
268
- // create the db entry
269
- await httpService.postRequest(this.uploadPath, fileInfo);
270
- // get files from server again
271
- this.getExistingFiles();
272
- })
273
- .catch((err) => {
274
- // do not show toast on error
275
- this.numFilesInProgress = null;
276
- // do not show in progress item on error
277
- this.inProgressList = [];
278
- this.notif = {
279
- id: 3,
280
- message: functions.intl.formatMessage({
281
- id: "global.genericError",
282
- defaultMessage: "An error occurred. Please try again.",
283
- }),
284
- };
285
- console.error(err);
286
- });
287
- }
288
- downloadFile(uuid, path) {
289
- this.clearErrors();
290
- // POST request to get temporary download link
291
- const payload = {
292
- file_path: path,
293
- file_uuid: uuid,
294
- };
295
- httpService.postRequest(this.requestDownloadPath, payload)
296
- .then((reply) => {
297
- // we got the download link, now download the file
298
- window.location.assign(reply.url);
299
- })
300
- .catch((err) => {
301
- console.error(err);
302
- });
303
- }
304
- deleteFile(file) {
305
- this.clearErrors();
306
- this.snackbar.push({
307
- message: functions.intl.formatMessage({
308
- id: "uploader.fileDeleted",
309
- defaultMessage: "{fileName} was deleted.",
310
- }, { fileName: file.file_name }),
311
- id: file.uuid,
312
- link: "",
313
- });
314
- // rm file from list immediately.
315
- this.fileList = this.fileList.filter((i) => i.uuid !== file.uuid);
316
- httpService.deleteRequest(`${this.deletePath}/${file.uuid}`).catch((err) => {
317
- this.notif = {
318
- id: 4,
319
- message: functions.intl.formatMessage({
320
- id: "uploader.fileNotDeleted",
321
- defaultMessage: "{fileName} could not be deleted.",
322
- }, { fileName: file.file_name }),
323
- };
324
- this.getExistingFiles();
325
- console.error(err);
326
- });
327
- }
328
- componentWillLoad() {
329
- if (!this.getPath) {
330
- throw new Error("wm-network-uploader: get-path is a required prop");
331
- }
332
- if (!this.requestUploadPath) {
333
- throw new Error("wm-network-uploader: request-upload-path is a required prop");
334
- }
335
- if (!this.uploadPath) {
336
- throw new Error("wm-network-uploader: upload-path is a required prop");
337
- }
338
- if (!this.requestDownloadPath) {
339
- throw new Error("wm-network-uploader: request-download-path is a required prop");
340
- }
341
- if (!this.deletePath) {
342
- throw new Error("wm-network-uploader: delete-path is a required prop");
343
- }
344
- if (!this.buttonText) {
345
- throw new Error("wm-network-uploader: button-text is a required prop");
346
- }
347
- if (!this.emptyStateText) {
348
- throw new Error("wm-network-uploader: empty-state-text is a required prop");
349
- }
350
- if (!this.associatedData) {
351
- throw new Error("wm-network-uploader: associated-data is a required prop");
352
- }
353
- this.setMaxSize();
354
- this.clearErrors();
355
- }
356
- componentDidLoad() {
357
- this.getExistingFiles();
358
- // awkward way to handle Edge bug where file input dialog doesn't open on Enter key
359
- // first, detect polyfill by checking the class name that it adds to the component
360
- // (it's important NOT to execute the code below in normal browsers as it would open the dialog twice)
361
- this.el.classList.contains("sc-wm-uploader-h") &&
362
- // then add an even listener to force a click event when Enter key is pressed
363
- this.inputEl &&
364
- this.inputEl.addEventListener("keydown", (ev) => {
365
- if (this.inputEl && ev.keyCode === 13) {
366
- this.inputEl.click();
367
- }
368
- });
369
- if (document.body.classList.contains("wmcl-user-is-tabbing")) {
370
- this.toggleTabbingOn();
371
- }
372
- }
373
- renderUploadSvg() {
374
- 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" })));
375
- }
376
- renderIcon() {
377
- // mdi attachment icon (paper clip) is horizontal but we want it vertical
378
- const rotate = this.icon && this.icon === "f066";
379
- return (this.icon && (index.h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)))));
380
- }
381
- renderNotif() {
382
- return this.notif ? index.h("span", { class: "notif" }, this.notif.message) : "";
383
- }
384
- renderUploadButton(classes) {
385
- return (index.h("div", { class: "notif-wrapper" }, index.h("input", { ref: (el) => (this.inputEl = el), name: this.inputId, id: this.inputId, class: "sr-only", type: "file", multiple: true, onClick: () => this.clearErrors(), onChange: (e) => this.handleFiles(e), disabled: this.isDisabled() }), index.h("label", { htmlFor: this.inputId, class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` }, this.renderIcon(), this.buttonText), this.renderNotif()));
386
- }
387
- renderWithItems() {
388
- 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()));
389
- }
390
- renderEmptyState() {
391
- 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"))));
392
- }
393
- renderErrorList() {
394
- if (!!this.errorList.length) {
395
- if (this.liveRegion) {
396
- let srMessage = this.errorList.reduce(function (acc, err) {
397
- return acc + `${err.file_name}: ${err.message} `;
398
- }, "");
399
- this.liveRegion.innerHTML = srMessage;
400
- }
401
- 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))))));
402
- }
403
- }
404
- renderInProgressList() {
405
- return (index.h("ul", { class: "inprogress-list" }, this.inProgressList.map((item) => {
406
- return (index.h("li", null, index.h("div", { class: "file --progress" }, index.h("div", { class: "progress", style: {
407
- background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
408
- } }), index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, item.name, " ", index.h("span", { class: "sr-only" }, "uploading"))))));
409
- })));
410
- }
411
- renderFile(item) {
412
- 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) })))));
413
- }
414
- renderFileList() {
415
- return index.h("ul", { class: "file-list" }, this.fileList.map((item) => this.renderFile(item)));
416
- }
417
- render() {
418
- 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
419
- ,
420
- "aria-atomic": "true" })));
421
- }
422
- get el() { return index.getElement(this); }
423
- static get watchers() { return {
424
- "maxSize": ["setMaxSize"],
425
- "numFilesInProgress": ["uploadNotifications"],
426
- "fileList": ["emitFileListEvent"]
427
- }; }
428
- };
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
+ 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: "You have reached the file upload limit.",
145
+ });
146
+ this.notif = { id: 1, message: errMessage };
147
+ if (this.liveRegion) {
148
+ this.liveRegion.innerHTML = errMessage;
149
+ }
150
+ }
151
+ else {
152
+ this.notif = null;
153
+ }
154
+ }
155
+ else if (this.notif.id === 1) {
156
+ // to make sure SR don't repeat the error, don't reset it if it already is showing
157
+ // just dismiss it if isMax is not true anymore
158
+ if (!isMax) {
159
+ this.notif = null;
160
+ }
161
+ // finally do nothing if error 2 is showing (special case when user selects too many files)
162
+ }
163
+ // disable if is the uploader is maxed out or if something is uploading
164
+ return isMax || this.numFilesInProgress > 0;
165
+ }
166
+ purgeProgressList(item) {
167
+ // If a file is retrieved from the server because it was just uploaded
168
+ // it should be removed from inProgressList
169
+ this.inProgressList = this.inProgressList.filter((i) => i.progress !== 100 && i.name !== item.file_name);
170
+ }
171
+ getExistingFiles() {
172
+ httpService.getRequest(this.getPath)
173
+ .then((reply) => {
174
+ reply.map((item) => this.purgeProgressList(item));
175
+ if (this.sortBy === "name") {
176
+ reply.sort((a, b) => a.file_name.localeCompare(b.file_name));
177
+ }
178
+ this.fileList = reply;
179
+ })
180
+ .catch((errStatus) => {
181
+ console.error(errStatus);
182
+ });
183
+ }
184
+ clearErrors() {
185
+ this.errorList = [];
186
+ this.notif = null;
187
+ }
188
+ handleFiles(ev) {
189
+ const files = Array.from(ev.target.files);
190
+ const validTypes = this.fileTypes.split(" ").join(", ");
191
+ if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {
192
+ const errMessage = functions.intl.formatMessage({
193
+ id: "uploader.fileUploadExceeded",
194
+ defaultMessage: "The number of selected files exceeds the limit.",
195
+ });
196
+ this.notif = { id: 2, message: errMessage };
197
+ if (this.liveRegion) {
198
+ this.liveRegion.innerHTML = errMessage;
199
+ }
200
+ }
201
+ else {
202
+ // map to create inProgress items so they can be displayed immediately
203
+ files &&
204
+ files.map((file) => {
205
+ if (!functions.hasValidType(file, this.fileTypes)) {
206
+ const error = {
207
+ file_name: file.name,
208
+ message: functions.intl.formatMessage({
209
+ id: "uploader.invalidFileType",
210
+ defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
211
+ }, { validTypes }),
212
+ };
213
+ this.errorList.push(error);
214
+ }
215
+ else if (!this.isValidSize(file.size)) {
216
+ const error = {
217
+ file_name: file.name,
218
+ message: functions.intl.formatMessage({
219
+ id: "uploader.fileTooLarge",
220
+ defaultMessage: "The selected file is too large. Maximum file size is {size}Mb",
221
+ }, { size: this.maxSize }),
222
+ };
223
+ this.errorList.push(error);
224
+ }
225
+ else if (this.isDuplicate(file.name)) {
226
+ const error = {
227
+ file_name: file.name,
228
+ message: functions.intl.formatMessage({
229
+ id: "uploader.duplicateName",
230
+ defaultMessage: "A file with this name already exists.",
231
+ }),
232
+ };
233
+ this.errorList.push(error);
234
+ }
235
+ else {
236
+ this.inProgressList.push(file);
237
+ }
238
+ index.forceUpdate(this.el);
239
+ });
240
+ if (this.inProgressList.length > 0) {
241
+ this.numFilesInProgress = this.inProgressList.length;
242
+ // map over "uploadable" files for actual upload
243
+ // this happens separately otherwise at each pass we'd have to wait for the requests to complete before displaying things
244
+ this.inProgressList.map((file, i) => {
245
+ this.uploadFile(file, i); // = input.files file
246
+ });
247
+ }
248
+ }
249
+ ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
250
+ }
251
+ uploadFile(file, i) {
252
+ // get upload link
253
+ httpService.getRequest(this.requestUploadPath + i.toString())
254
+ .then(async (reply) => {
255
+ const assData = JSON.parse(this.associatedData);
256
+ const fileInfo = Object.assign(Object.assign({}, assData), { file_name: file.name, mime_type: file.type, file_path: reply.path, document_uuid: reply.guid });
257
+ // onProgress is passed as a callback to the ev listener inside putRequest (http service),
258
+ // so we can't change component things directly => custom event to pass data to uploader component.
259
+ const onProgress = (ev) => {
260
+ const progress = ev.lengthComputable && ev.total !== 0 ? (ev.loaded / ev.total) * 100 : 0;
261
+ const event = new CustomEvent("wmUploadProgress", {
262
+ detail: { file_name: file.name, progress },
263
+ });
264
+ this.el.dispatchEvent(event);
265
+ };
266
+ // upload to AWS s3 to url we just fetched
267
+ await httpService.putRequest(reply.url, file, onProgress);
268
+ // create the db entry
269
+ await httpService.postRequest(this.uploadPath, fileInfo);
270
+ // get files from server again
271
+ this.getExistingFiles();
272
+ })
273
+ .catch((err) => {
274
+ // do not show toast on error
275
+ this.numFilesInProgress = null;
276
+ // do not show in progress item on error
277
+ this.inProgressList = [];
278
+ this.notif = {
279
+ id: 3,
280
+ message: functions.intl.formatMessage({
281
+ id: "global.genericError",
282
+ defaultMessage: "An error occurred. Please try again.",
283
+ }),
284
+ };
285
+ console.error(err);
286
+ });
287
+ }
288
+ downloadFile(uuid, path) {
289
+ this.clearErrors();
290
+ // POST request to get temporary download link
291
+ const payload = {
292
+ file_path: path,
293
+ file_uuid: uuid,
294
+ };
295
+ httpService.postRequest(this.requestDownloadPath, payload)
296
+ .then((reply) => {
297
+ // we got the download link, now download the file
298
+ window.location.assign(reply.url);
299
+ })
300
+ .catch((err) => {
301
+ console.error(err);
302
+ });
303
+ }
304
+ deleteFile(file) {
305
+ this.clearErrors();
306
+ this.snackbar.push({
307
+ message: functions.intl.formatMessage({
308
+ id: "uploader.fileDeleted",
309
+ defaultMessage: "{fileName} was deleted.",
310
+ }, { fileName: file.file_name }),
311
+ id: file.uuid,
312
+ link: "",
313
+ });
314
+ // rm file from list immediately.
315
+ this.fileList = this.fileList.filter((i) => i.uuid !== file.uuid);
316
+ httpService.deleteRequest(`${this.deletePath}/${file.uuid}`).catch((err) => {
317
+ this.notif = {
318
+ id: 4,
319
+ message: functions.intl.formatMessage({
320
+ id: "uploader.fileNotDeleted",
321
+ defaultMessage: "{fileName} could not be deleted.",
322
+ }, { fileName: file.file_name }),
323
+ };
324
+ this.getExistingFiles();
325
+ console.error(err);
326
+ });
327
+ }
328
+ componentWillLoad() {
329
+ if (!this.getPath) {
330
+ throw new Error("wm-network-uploader: get-path is a required prop");
331
+ }
332
+ if (!this.requestUploadPath) {
333
+ throw new Error("wm-network-uploader: request-upload-path is a required prop");
334
+ }
335
+ if (!this.uploadPath) {
336
+ throw new Error("wm-network-uploader: upload-path is a required prop");
337
+ }
338
+ if (!this.requestDownloadPath) {
339
+ throw new Error("wm-network-uploader: request-download-path is a required prop");
340
+ }
341
+ if (!this.deletePath) {
342
+ throw new Error("wm-network-uploader: delete-path is a required prop");
343
+ }
344
+ if (!this.buttonText) {
345
+ throw new Error("wm-network-uploader: button-text is a required prop");
346
+ }
347
+ if (!this.emptyStateText) {
348
+ throw new Error("wm-network-uploader: empty-state-text is a required prop");
349
+ }
350
+ if (!this.associatedData) {
351
+ throw new Error("wm-network-uploader: associated-data is a required prop");
352
+ }
353
+ this.setMaxSize();
354
+ this.clearErrors();
355
+ }
356
+ componentDidLoad() {
357
+ this.getExistingFiles();
358
+ // awkward way to handle Edge bug where file input dialog doesn't open on Enter key
359
+ // first, detect polyfill by checking the class name that it adds to the component
360
+ // (it's important NOT to execute the code below in normal browsers as it would open the dialog twice)
361
+ this.el.classList.contains("sc-wm-uploader-h") &&
362
+ // then add an even listener to force a click event when Enter key is pressed
363
+ this.inputEl &&
364
+ this.inputEl.addEventListener("keydown", (ev) => {
365
+ if (this.inputEl && ev.keyCode === 13) {
366
+ this.inputEl.click();
367
+ }
368
+ });
369
+ if (document.body.classList.contains("wmcl-user-is-tabbing")) {
370
+ this.toggleTabbingOn();
371
+ }
372
+ }
373
+ renderUploadSvg() {
374
+ 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" })));
375
+ }
376
+ renderIcon() {
377
+ // mdi attachment icon (paper clip) is horizontal but we want it vertical
378
+ const rotate = this.icon && this.icon === "f066";
379
+ return (this.icon && (index.h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)))));
380
+ }
381
+ renderNotif() {
382
+ return this.notif ? index.h("span", { class: "notif" }, this.notif.message) : "";
383
+ }
384
+ renderUploadButton(classes) {
385
+ return (index.h("div", { class: "notif-wrapper" }, index.h("input", { ref: (el) => (this.inputEl = el), name: this.inputId, id: this.inputId, class: "sr-only", type: "file", multiple: true, onClick: () => this.clearErrors(), onChange: (e) => this.handleFiles(e), disabled: this.isDisabled() }), index.h("label", { htmlFor: this.inputId, class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` }, this.renderIcon(), this.buttonText), this.renderNotif()));
386
+ }
387
+ renderWithItems() {
388
+ 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()));
389
+ }
390
+ renderEmptyState() {
391
+ 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"))));
392
+ }
393
+ renderErrorList() {
394
+ if (!!this.errorList.length) {
395
+ if (this.liveRegion) {
396
+ let srMessage = this.errorList.reduce(function (acc, err) {
397
+ return acc + `${err.file_name}: ${err.message} `;
398
+ }, "");
399
+ this.liveRegion.innerHTML = srMessage;
400
+ }
401
+ 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))))));
402
+ }
403
+ }
404
+ renderInProgressList() {
405
+ return (index.h("ul", { class: "inprogress-list" }, this.inProgressList.map((item) => {
406
+ return (index.h("li", null, index.h("div", { class: "file --progress" }, index.h("div", { class: "progress", style: {
407
+ background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
408
+ } }), index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, item.name, " ", index.h("span", { class: "sr-only" }, "uploading"))))));
409
+ })));
410
+ }
411
+ renderFile(item) {
412
+ 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) })))));
413
+ }
414
+ renderFileList() {
415
+ return index.h("ul", { class: "file-list" }, this.fileList.map((item) => this.renderFile(item)));
416
+ }
417
+ render() {
418
+ 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
419
+ ,
420
+ "aria-atomic": "true" })));
421
+ }
422
+ get el() { return index.getElement(this); }
423
+ static get watchers() { return {
424
+ "maxSize": ["setMaxSize"],
425
+ "numFilesInProgress": ["uploadNotifications"],
426
+ "fileList": ["emitFileListEvent"]
427
+ }; }
428
+ };
429
429
  NetworkUploader.style = wmNetworkUploaderCss;
430
430
 
431
431
  exports.wm_network_uploader = NetworkUploader;