@watermarkinsights/ripple 3.5.2 → 3.6.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.
- package/README.md +3 -3
- package/dist/cjs/{functions-8fb310fe.js → functions-653e695c.js} +442 -442
- package/dist/cjs/{global-fe8e4bb7.js → global-e676a97a.js} +65 -65
- package/dist/cjs/{http-service-9e8c4dd5.js → http-service-494d81de.js} +49 -49
- package/dist/cjs/{interfaces-30a74c1f.js → interfaces-a3338581.js} +29 -29
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/priv-chart-popover.cjs.entry.js +78 -78
- package/dist/cjs/priv-datepicker.cjs.entry.js +667 -667
- package/dist/cjs/priv-navigator-button.cjs.entry.js +18 -18
- package/dist/cjs/priv-navigator-item.cjs.entry.js +23 -23
- package/dist/cjs/ripple.cjs.js +2 -2
- package/dist/cjs/wm-action-menu_2.cjs.entry.js +341 -341
- package/dist/cjs/wm-button.cjs.entry.js +218 -218
- package/dist/cjs/wm-chart-slice.cjs.entry.js +13 -13
- package/dist/cjs/wm-chart.cjs.entry.js +474 -474
- package/dist/cjs/wm-datepicker.cjs.entry.js +256 -256
- package/dist/cjs/wm-input.cjs.entry.js +133 -133
- package/dist/cjs/wm-modal-footer.cjs.entry.js +31 -31
- package/dist/cjs/wm-modal-header.cjs.entry.js +34 -34
- package/dist/cjs/wm-modal.cjs.entry.js +161 -161
- package/dist/cjs/wm-navigator.cjs.entry.js +268 -268
- package/dist/cjs/wm-network-uploader.cjs.entry.js +420 -420
- package/dist/cjs/wm-option_2.cjs.entry.js +492 -492
- package/dist/cjs/wm-pagination.cjs.entry.js +167 -167
- package/dist/cjs/wm-search.cjs.entry.js +231 -231
- package/dist/cjs/wm-snackbar.cjs.entry.js +170 -170
- package/dist/cjs/wm-tab-item_3.cjs.entry.js +300 -300
- package/dist/cjs/wm-tag-input.cjs.entry.js +556 -556
- package/dist/cjs/wm-timepicker.cjs.entry.js +379 -379
- package/dist/cjs/wm-toggletip.cjs.entry.js +124 -124
- package/dist/cjs/wm-uploader.cjs.entry.js +356 -347
- package/dist/cjs/wm-wrapper.cjs.entry.js +12 -12
- package/dist/collection/components/wm-action-menu/wm-action-menu.js +460 -460
- package/dist/collection/components/wm-button/wm-button.js +485 -485
- package/dist/collection/components/wm-chart/priv-chart-popover/priv-chart-popover.js +232 -232
- package/dist/collection/components/wm-chart/wm-chart-slice.js +64 -64
- package/dist/collection/components/wm-chart/wm-chart.js +719 -719
- package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.js +1015 -1015
- package/dist/collection/components/wm-datepicker/wm-datepicker.js +462 -462
- package/dist/collection/components/wm-input/wm-input.js +423 -423
- package/dist/collection/components/wm-menuitem/wm-menuitem.js +444 -444
- package/dist/collection/components/wm-modal/wm-modal-footer.js +141 -141
- package/dist/collection/components/wm-modal/wm-modal-header.js +92 -92
- package/dist/collection/components/wm-modal/wm-modal.js +459 -459
- package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js +97 -97
- package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js +114 -114
- package/dist/collection/components/wm-navigator/wm-navigator.js +468 -468
- package/dist/collection/components/wm-option/wm-option.js +422 -422
- package/dist/collection/components/wm-pagination/wm-pagination.js +368 -368
- package/dist/collection/components/wm-search/wm-search.js +479 -479
- package/dist/collection/components/wm-select/wm-select.js +718 -718
- package/dist/collection/components/wm-snackbar/wm-snackbar.js +297 -297
- package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js +219 -219
- package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js +331 -331
- package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js +104 -104
- package/dist/collection/components/wm-tag-input/wm-tag-input.js +787 -787
- package/dist/collection/components/wm-timepicker/wm-timepicker.js +579 -579
- package/dist/collection/components/wm-toggletip/wm-toggletip.js +241 -241
- package/dist/collection/components/wm-uploader/wm-network-uploader/wm-network-uploader.js +753 -753
- package/dist/collection/components/wm-uploader/wm-uploader.css +16 -9
- package/dist/collection/components/wm-uploader/wm-uploader.js +790 -748
- package/dist/collection/components/wm-wrapper/wm-wrapper.js +27 -27
- package/dist/collection/dev/scripts.js +20 -20
- package/dist/collection/global/__mocks__/functions.js +6 -6
- package/dist/collection/global/functions.js +445 -445
- package/dist/collection/global/global.js +72 -72
- package/dist/collection/global/interfaces.js +49 -49
- package/dist/collection/global/services/__mocks__/http-service.js +130 -130
- package/dist/collection/global/services/http-service.js +50 -50
- package/dist/collection/lang/lang.js +5 -5
- package/dist/collection/lang/piglatin.js +93 -93
- package/dist/esm/{functions-c315390d.js → functions-e528c934.js} +442 -442
- package/dist/esm/{global-169de013.js → global-39a2f585.js} +65 -65
- package/dist/esm/{http-service-5d037e16.js → http-service-3dc3b3e7.js} +49 -49
- package/dist/esm/{interfaces-61c6305b.js → interfaces-2b97fab2.js} +29 -29
- package/dist/esm/loader.js +2 -2
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/esm/priv-chart-popover.entry.js +78 -78
- package/dist/esm/priv-datepicker.entry.js +667 -667
- package/dist/esm/priv-navigator-button.entry.js +18 -18
- package/dist/esm/priv-navigator-item.entry.js +23 -23
- package/dist/esm/ripple.js +2 -2
- package/dist/esm/wm-action-menu_2.entry.js +341 -341
- package/dist/esm/wm-button.entry.js +218 -218
- package/dist/esm/wm-chart-slice.entry.js +13 -13
- package/dist/esm/wm-chart.entry.js +474 -474
- package/dist/esm/wm-datepicker.entry.js +256 -256
- package/dist/esm/wm-input.entry.js +133 -133
- package/dist/esm/wm-modal-footer.entry.js +31 -31
- package/dist/esm/wm-modal-header.entry.js +34 -34
- package/dist/esm/wm-modal.entry.js +161 -161
- package/dist/esm/wm-navigator.entry.js +268 -268
- package/dist/esm/wm-network-uploader.entry.js +420 -420
- package/dist/esm/wm-option_2.entry.js +492 -492
- package/dist/esm/wm-pagination.entry.js +167 -167
- package/dist/esm/wm-search.entry.js +231 -231
- package/dist/esm/wm-snackbar.entry.js +170 -170
- package/dist/esm/wm-tab-item_3.entry.js +300 -300
- package/dist/esm/wm-tag-input.entry.js +556 -556
- package/dist/esm/wm-timepicker.entry.js +379 -379
- package/dist/esm/wm-toggletip.entry.js +124 -124
- package/dist/esm/wm-uploader.entry.js +356 -347
- package/dist/esm/wm-wrapper.entry.js +12 -12
- package/dist/ripple/{p-c5e44367.entry.js → p-092b01f3.entry.js} +1 -1
- package/dist/ripple/{p-5ffa983b.entry.js → p-1e0c41a9.entry.js} +1 -1
- package/dist/ripple/{p-374b4fa6.entry.js → p-33524565.entry.js} +1 -1
- package/dist/ripple/{p-888bec42.js → p-43f1298b.js} +0 -0
- package/dist/ripple/{p-dea72d46.entry.js → p-4cc71463.entry.js} +1 -1
- package/dist/ripple/{p-e60fe2f5.js → p-588b4475.js} +0 -0
- package/dist/ripple/{p-b03382ea.entry.js → p-65e3a656.entry.js} +1 -1
- package/dist/ripple/{p-a50439f1.entry.js → p-67e288fe.entry.js} +1 -1
- package/dist/ripple/{p-31fde2c6.entry.js → p-690b4f41.entry.js} +1 -1
- package/dist/ripple/{p-75a9ba2f.entry.js → p-754d3d41.entry.js} +1 -1
- package/dist/ripple/{p-7bbd123c.entry.js → p-8923b7d0.entry.js} +1 -1
- package/dist/ripple/{p-ba9d3069.entry.js → p-8cd1396e.entry.js} +1 -1
- package/dist/ripple/p-a53165df.entry.js +1 -0
- package/dist/ripple/{p-e574fb73.entry.js → p-aa973691.entry.js} +1 -1
- package/dist/ripple/{p-b4a8c8d3.entry.js → p-b3d5ea85.entry.js} +1 -1
- package/dist/ripple/p-c9dcb2ef.js +1 -0
- package/dist/ripple/{p-d69c1688.entry.js → p-d8ecd974.entry.js} +1 -1
- package/dist/ripple/{p-41f39509.entry.js → p-dc9c9fda.entry.js} +1 -1
- package/dist/ripple/{p-34694011.entry.js → p-e7616311.entry.js} +1 -1
- package/dist/ripple/{p-36da5d4a.entry.js → p-e9e8334e.entry.js} +1 -1
- package/dist/ripple/{p-ec5db255.entry.js → p-ec9697db.entry.js} +1 -1
- package/dist/ripple/{p-c724ce54.entry.js → p-efdaf3b6.entry.js} +1 -1
- package/dist/ripple/{p-042d6449.entry.js → p-fcdc6395.entry.js} +1 -1
- package/dist/ripple/{p-a6d6eae7.js → p-fd8070fb.js} +0 -0
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/types/components/wm-action-menu/wm-action-menu.d.ts +48 -48
- package/dist/types/components/wm-button/wm-button.d.ts +44 -44
- package/dist/types/components/wm-chart/priv-chart-popover/priv-chart-popover.d.ts +23 -23
- package/dist/types/components/wm-chart/wm-chart-slice.d.ts +8 -8
- package/dist/types/components/wm-chart/wm-chart.d.ts +82 -82
- package/dist/types/components/wm-datepicker/priv-datepicker/priv-datepicker.d.ts +76 -76
- package/dist/types/components/wm-datepicker/wm-datepicker.d.ts +41 -41
- package/dist/types/components/wm-input/wm-input.d.ts +46 -46
- package/dist/types/components/wm-menuitem/wm-menuitem.d.ts +34 -34
- package/dist/types/components/wm-modal/wm-modal-footer.d.ts +15 -15
- package/dist/types/components/wm-modal/wm-modal-header.d.ts +12 -12
- package/dist/types/components/wm-modal/wm-modal.d.ts +41 -41
- package/dist/types/components/wm-navigator/priv-navigator-button/priv-navigator-button.d.ts +10 -10
- package/dist/types/components/wm-navigator/priv-navigator-item/priv-navigator-item.d.ts +13 -13
- package/dist/types/components/wm-navigator/wm-navigator.d.ts +61 -61
- package/dist/types/components/wm-option/wm-option.d.ts +32 -32
- package/dist/types/components/wm-pagination/wm-pagination.d.ts +32 -32
- package/dist/types/components/wm-search/wm-search.d.ts +86 -86
- package/dist/types/components/wm-select/wm-select.d.ts +66 -66
- package/dist/types/components/wm-snackbar/wm-snackbar.d.ts +35 -35
- package/dist/types/components/wm-tabs/wm-tab-item/wm-tab-item.d.ts +38 -38
- package/dist/types/components/wm-tabs/wm-tab-list/wm-tab-list.d.ts +53 -53
- package/dist/types/components/wm-tabs/wm-tab-panel/wm-tab-panel.d.ts +20 -20
- package/dist/types/components/wm-tag-input/wm-tag-input.d.ts +91 -91
- package/dist/types/components/wm-timepicker/wm-timepicker.d.ts +61 -61
- package/dist/types/components/wm-toggletip/wm-toggletip.d.ts +27 -27
- package/dist/types/components/wm-uploader/wm-network-uploader/wm-network-uploader.d.ts +85 -85
- package/dist/types/components/wm-uploader/wm-uploader.d.ts +82 -80
- package/dist/types/components/wm-wrapper/wm-wrapper.d.ts +7 -7
- package/dist/types/components.d.ts +28 -24
- package/dist/types/global/__mocks__/functions.d.ts +6 -6
- package/dist/types/global/functions.d.ts +40 -40
- package/dist/types/global/global.d.ts +1 -1
- package/dist/types/global/interfaces.d.ts +34 -34
- package/dist/types/global/services/__mocks__/http-service.d.ts +6 -6
- package/dist/types/global/services/http-service.d.ts +4 -4
- package/dist/types/lang/lang.d.ts +5 -5
- package/package.json +46 -46
- package/dist/ripple/p-5ff97329.js +0 -1
- package/dist/ripple/p-d5fafa9c.entry.js +0 -1
|
@@ -3,355 +3,364 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-cd179539.js');
|
|
6
|
-
const functions = require('./functions-
|
|
6
|
+
const functions = require('./functions-653e695c.js');
|
|
7
7
|
|
|
8
|
-
const wmUploaderCss = "@charset \"UTF-8\";:host .wm-button,wm-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-uploader .wm-button{height:3.3333333333em}}:host .wm-button.nowrap,wm-uploader .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus,wm-uploader .wm-button:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner,wm-uploader .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled):not(.-primary):not(.-secondary):not(.-secondary):not(.-selectoronly) .button-text,wm-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled):not(.-primary):not(.-secondary):not(.-secondary):not(.-selectoronly) .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-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-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-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-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-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-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-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-uploader .wm-button:hover{background:#464177;color:#fff}:host .wm-button .mdi,wm-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-uploader .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi,wm-uploader .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly),wm-uploader .wm-button.-primary:not(.-textonly){background:#575195;color:#fff}:host .wm-button.-primary:not(.-textonly):not(:focus),wm-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-uploader .wm-button.-primary:not(.-textonly):hover{background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-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-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-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-uploader .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus,wm-uploader .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner,wm-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-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-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-uploader .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete),wm-uploader .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline;color:#454077}:host .wm-button.-textonly.-permanentlydelete,wm-uploader .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover,wm-uploader .wm-button.-textonly.-permanentlydelete:hover{text-decoration:underline;color:#c0392b !important}:host .wm-button.-textonly.dark,wm-uploader .wm-button.-textonly.dark{color:#fff}:host .wm-button.-textonly.dark:hover,wm-uploader .wm-button.-textonly.dark:hover{text-decoration:underline;color:#fff !important}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-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-uploader .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus),wm-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-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly{border-width:1px !important}:host .wm-button.-icononly:before,wm-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-uploader .wm-button.-navigational{border:none !important;background-color:transparent}:host .wm-button.-navigational:not(.dark):not(:disabled),wm-uploader .wm-button.-navigational:not(.dark):not(:disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):hover,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled).selected,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled).selected{background-color:#d7d6d9}:host .wm-button.-navigational:before,wm-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-uploader .wm-button.-permanentlydelete:not(.-textonly){background:#c0392b;border-color:#c0392b;color:#fff}:host .wm-button.-selectoronly,wm-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-uploader .wm-button.-selectoronly{height:2.5rem}}:host .wm-button.-selectoronly:before,wm-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-uploader .wm-button.-selectoronly:hover:not(:disabled):not(.disabled){background:transparent;text-decoration:none}:host .wm-button.-selectoronly:active,wm-uploader .wm-button.-selectoronly:active{-ms-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selectoronly::-moz-focus-inner,wm-uploader .wm-button.-selectoronly::-moz-focus-inner{border:0}:host .wm-button.-selectoronly .overflowcontrol,wm-uploader .wm-button.-selectoronly .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button:disabled,wm-uploader .wm-button:disabled,:host .wm-button.disabled,wm-uploader .wm-button.disabled{background:inherit;border-color:#737373;color:#737373;cursor:default;pointer-events:none}:host .wm-button:disabled.dark,wm-uploader .wm-button:disabled.dark,:host .wm-button.disabled.dark,wm-uploader .wm-button.disabled.dark{color:#a6a6a6;border-color:#a6a6a6}:host .wm-button:disabled.-primary,wm-uploader .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-uploader .wm-button:disabled.-permanentlydelete,:host .wm-button.disabled.-primary,wm-uploader .wm-button.disabled.-primary,:host .wm-button.disabled.-permanentlydelete,wm-uploader .wm-button.disabled.-permanentlydelete{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-primary.dark,wm-uploader .wm-button:disabled.-primary.dark,:host .wm-button.disabled.-primary.dark,wm-uploader .wm-button.disabled.-primary.dark{background:#a6a6a6;border-color:#a6a6a6;color:#353b48}:host .wm-button:disabled.-secondary,wm-uploader .wm-button:disabled.-secondary,:host .wm-button.disabled.-secondary,wm-uploader .wm-button.disabled.-secondary{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button:disabled.-selectoronly,wm-uploader .wm-button:disabled.-selectoronly,:host .wm-button.disabled.-selectoronly,wm-uploader .wm-button.disabled.-selectoronly{color:#737373}:host .wm-button:disabled.-textonly,wm-uploader .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly,wm-uploader .wm-button.disabled.-textonly{color:#6b6b6b;background:transparent}:host a.wm-button,wm-uploader a.wm-button,:host label.wm-button,wm-uploader label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host,wm-uploader{width:100%;height:100%;display:block;position:relative}:host[dir=RTL] .mdi,wm-uploader[dir=RTL] .mdi{margin-left:0.3125rem;margin-right:0}:host input:focus+.wm-button.user-is-tabbing,wm-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-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{margin-bottom:1rem}.header .slot-wrapper{display:flex;justify-content:flex-start;align-items:flex-start}.header .info-wrapper{align-items:center}.header .info-wrapper .info{font-size:0.875rem;margin-left:1rem}.footer{display:flex;flex-direction:column;align-items:flex-end;padding:0.9375rem 1.875rem}.footer .notif-wrapper{align-items:flex-end}.footer .filecount-wrapper{display:flex;align-items:center}.footer .filecount-wrapper .filecount{font-size:0.875rem;margin-right:1rem}.notif-wrapper{position:relative;display:flex;flex-direction:column;margin-bottom:1rem}.notif{padding-top:0.25rem;font-size:0.875rem;font-style:italic;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.info-wrapper{position:relative;display:flex}.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:0.875rem;margin-bottom:0.4375rem}.empty-block .empty-message.large{font-size:1.5rem}.empty-block .info-wrapper{justify-content:center;width:100%}.empty-block .info-wrapper .wm-button{width:auto}.list-container{overflow-y:auto}.list-container.type1{padding:0 1.875rem;height:16.25rem}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 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-list li .error-message{padding-top:0.25rem;font-style:italic}";
|
|
8
|
+
const wmUploaderCss = "@charset \"UTF-8\";:host .wm-button,wm-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-uploader .wm-button{height:3.3333333333em}}:host .wm-button.nowrap,wm-uploader .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus,wm-uploader .wm-button:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner,wm-uploader .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled):not(.-primary):not(.-secondary):not(.-secondary):not(.-selectoronly) .button-text,wm-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled):not(.-primary):not(.-secondary):not(.-secondary):not(.-selectoronly) .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-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-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-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-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-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-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-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-uploader .wm-button:hover{background:#464177;color:#fff}:host .wm-button .mdi,wm-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-uploader .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi,wm-uploader .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly),wm-uploader .wm-button.-primary:not(.-textonly){background:#575195;color:#fff}:host .wm-button.-primary:not(.-textonly):not(:focus),wm-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-uploader .wm-button.-primary:not(.-textonly):hover{background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-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-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-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-uploader .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus,wm-uploader .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner,wm-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-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-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-uploader .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete),wm-uploader .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline;color:#454077}:host .wm-button.-textonly.-permanentlydelete,wm-uploader .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover,wm-uploader .wm-button.-textonly.-permanentlydelete:hover{text-decoration:underline;color:#c0392b !important}:host .wm-button.-textonly.dark,wm-uploader .wm-button.-textonly.dark{color:#fff}:host .wm-button.-textonly.dark:hover,wm-uploader .wm-button.-textonly.dark:hover{text-decoration:underline;color:#fff !important}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-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-uploader .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus),wm-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-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly{border-width:1px !important}:host .wm-button.-icononly:before,wm-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-uploader .wm-button.-navigational{border:none !important;background-color:transparent}:host .wm-button.-navigational:not(.dark):not(:disabled),wm-uploader .wm-button.-navigational:not(.dark):not(:disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):hover,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled).selected,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled).selected{background-color:#d7d6d9}:host .wm-button.-navigational:before,wm-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-uploader .wm-button.-permanentlydelete:not(.-textonly){background:#c0392b;border-color:#c0392b;color:#fff}:host .wm-button.-selectoronly,wm-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-uploader .wm-button.-selectoronly{height:2.5rem}}:host .wm-button.-selectoronly:before,wm-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-uploader .wm-button.-selectoronly:hover:not(:disabled):not(.disabled){background:transparent;text-decoration:none}:host .wm-button.-selectoronly:active,wm-uploader .wm-button.-selectoronly:active{-ms-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selectoronly::-moz-focus-inner,wm-uploader .wm-button.-selectoronly::-moz-focus-inner{border:0}:host .wm-button.-selectoronly .overflowcontrol,wm-uploader .wm-button.-selectoronly .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button:disabled,wm-uploader .wm-button:disabled,:host .wm-button.disabled,wm-uploader .wm-button.disabled{background:inherit;border-color:#737373;color:#737373;cursor:default;pointer-events:none}:host .wm-button:disabled.dark,wm-uploader .wm-button:disabled.dark,:host .wm-button.disabled.dark,wm-uploader .wm-button.disabled.dark{color:#a6a6a6;border-color:#a6a6a6}:host .wm-button:disabled.-primary,wm-uploader .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-uploader .wm-button:disabled.-permanentlydelete,:host .wm-button.disabled.-primary,wm-uploader .wm-button.disabled.-primary,:host .wm-button.disabled.-permanentlydelete,wm-uploader .wm-button.disabled.-permanentlydelete{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-primary.dark,wm-uploader .wm-button:disabled.-primary.dark,:host .wm-button.disabled.-primary.dark,wm-uploader .wm-button.disabled.-primary.dark{background:#a6a6a6;border-color:#a6a6a6;color:#353b48}:host .wm-button:disabled.-secondary,wm-uploader .wm-button:disabled.-secondary,:host .wm-button.disabled.-secondary,wm-uploader .wm-button.disabled.-secondary{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button:disabled.-selectoronly,wm-uploader .wm-button:disabled.-selectoronly,:host .wm-button.disabled.-selectoronly,wm-uploader .wm-button.disabled.-selectoronly{color:#737373}:host .wm-button:disabled.-textonly,wm-uploader .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly,wm-uploader .wm-button.disabled.-textonly{color:#6b6b6b;background:transparent}:host a.wm-button,wm-uploader a.wm-button,:host label.wm-button,wm-uploader label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host,wm-uploader{width:100%;height:100%;display:block;position:relative}:host[dir=RTL] .mdi,wm-uploader[dir=RTL] .mdi{margin-left:0.3125rem;margin-right:0}:host input:focus+.wm-button.user-is-tabbing,wm-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-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{margin-bottom:1rem}.header .slot-wrapper{display:flex;justify-content:flex-start;align-items:flex-start}.header .slot-wrapper.right{justify-content:flex-end}.footer{display:flex;flex-direction:column;align-items:flex-end;padding:0.9375rem 1.875rem}.footer.left{align-items:flex-start}.footer .filecount-wrapper{display:flex;align-items:center}.footer .filecount-wrapper .filecount{font-size:0.875rem;margin:0 1rem}.notif-wrapper{position:relative;display:flex;flex-direction:column;margin-bottom:1rem}.notif-wrapper.left{align-items:flex-start}.notif-wrapper.right{align-items:flex-end}.notif{padding-top:0.25rem;font-size:0.875rem;font-style:italic;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.info-wrapper{position:relative;display:flex;align-items:center}.info-wrapper .info{font-size:0.875rem;margin:0 1rem}.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:0.875rem;margin-bottom:0.4375rem}.empty-block .empty-message.large{font-size:1.5rem}.empty-block .info-wrapper{justify-content:center;width:100%}.empty-block .info-wrapper .wm-button{width:auto}.list-container{overflow-y:auto}.list-container.type1{padding:0 1.875rem;height:16.25rem}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 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-list li .error-message{padding-top:0.25rem;font-style:italic}";
|
|
9
9
|
|
|
10
|
-
const Uploader = class {
|
|
11
|
-
constructor(hostRef) {
|
|
12
|
-
index.registerInstance(this, hostRef);
|
|
13
|
-
this.wmUploaderFilesSelected = index.createEvent(this, "wmUploaderFilesSelected", 7);
|
|
14
|
-
this.wmFilesSelected = index.createEvent(this, "wmFilesSelected", 7);
|
|
15
|
-
this.wmUploaderDeleteFile = index.createEvent(this, "wmUploaderDeleteFile", 7);
|
|
16
|
-
this.wmDeleteFile = index.createEvent(this, "wmDeleteFile", 7);
|
|
17
|
-
this.wmUploaderDownloadFile = index.createEvent(this, "wmUploaderDownloadFile", 7);
|
|
18
|
-
this.wmDownloadFile = index.createEvent(this, "wmDownloadFile", 7);
|
|
19
|
-
this.uploaderType = null; // only mutable for the deprecation transition
|
|
20
|
-
this.type = null; // DEPRECATED in favor of uploaderType
|
|
21
|
-
this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
|
|
22
|
-
this.maxSize = 100; // in Mb
|
|
23
|
-
this.sortBy = "date"; // name is descending (a -> z), date is ascending (earlier -> later)
|
|
24
|
-
this.
|
|
25
|
-
this.
|
|
26
|
-
this.
|
|
27
|
-
this.
|
|
28
|
-
this.
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
//
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
if
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
this.
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
this.
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
this.
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
this.
|
|
264
|
-
this.
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
//
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
return (index.h(
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
"
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
"
|
|
353
|
-
|
|
354
|
-
};
|
|
10
|
+
const Uploader = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
this.wmUploaderFilesSelected = index.createEvent(this, "wmUploaderFilesSelected", 7);
|
|
14
|
+
this.wmFilesSelected = index.createEvent(this, "wmFilesSelected", 7);
|
|
15
|
+
this.wmUploaderDeleteFile = index.createEvent(this, "wmUploaderDeleteFile", 7);
|
|
16
|
+
this.wmDeleteFile = index.createEvent(this, "wmDeleteFile", 7);
|
|
17
|
+
this.wmUploaderDownloadFile = index.createEvent(this, "wmUploaderDownloadFile", 7);
|
|
18
|
+
this.wmDownloadFile = index.createEvent(this, "wmDownloadFile", 7);
|
|
19
|
+
this.uploaderType = null; // only mutable for the deprecation transition
|
|
20
|
+
this.type = null; // DEPRECATED in favor of uploaderType
|
|
21
|
+
this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
|
|
22
|
+
this.maxSize = 100; // in Mb
|
|
23
|
+
this.sortBy = "date"; // name is descending (a -> z), date is ascending (earlier -> later)
|
|
24
|
+
this.buttonType = this.tempUploaderType === "1" ? "primary" : "secondary";
|
|
25
|
+
this.buttonPosition = this.tempUploaderType === "1" ? "right" : "left";
|
|
26
|
+
this.fileList = []; // the string above transformed into the actual array
|
|
27
|
+
this.filesToUpload = []; // input.files that passed validation
|
|
28
|
+
this.isTabbing = false;
|
|
29
|
+
this.errorList = []; // for errors on a particular file
|
|
30
|
+
this.inputId = functions.generateId();
|
|
31
|
+
}
|
|
32
|
+
get tempUploaderType() {
|
|
33
|
+
// replace instances of this.tempUploaderType with this.uploaderType once type is fully phased out
|
|
34
|
+
// don't forget to reset this.uploaderType's default value to "1"
|
|
35
|
+
return this.type || this.uploaderType || "1";
|
|
36
|
+
}
|
|
37
|
+
toggleTabbingOn() {
|
|
38
|
+
this.isTabbing = true;
|
|
39
|
+
}
|
|
40
|
+
toggleTabbingOff() {
|
|
41
|
+
this.isTabbing = false;
|
|
42
|
+
}
|
|
43
|
+
handleUploadProgress(ev) {
|
|
44
|
+
this.fileList.map((i) => {
|
|
45
|
+
if (i.id === ev.detail.id) {
|
|
46
|
+
i.progress = ev.detail.progress;
|
|
47
|
+
index.forceUpdate(this.el);
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
if (ev.detail.progress === 100) {
|
|
51
|
+
// inProgressList is not a perfect reflection of how many files are uploading
|
|
52
|
+
// because even after progress reached 100% the item should remain in the array
|
|
53
|
+
// (should only be removed once it appears in fileList)
|
|
54
|
+
this.numFilesInProgress -= 1;
|
|
55
|
+
}
|
|
56
|
+
// aggregate the percentages for SR to announce progress
|
|
57
|
+
if (!this.srProgress && this.numFilesInProgress) {
|
|
58
|
+
const total = this.numFilesInProgress; // if we don't reassign this number changes when a file is done and the percentage becomes wrong
|
|
59
|
+
this.srProgress = setInterval(() => {
|
|
60
|
+
const aggregate = this.fileList.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
|
|
61
|
+
if (this.liveRegion) {
|
|
62
|
+
this.liveRegion.innerHTML = functions.intl.formatMessage({
|
|
63
|
+
id: "uploader.uploadProgress",
|
|
64
|
+
defaultMessage: "Upload progress: {percentage}%",
|
|
65
|
+
}, { percentage: Math.floor(aggregate / total) });
|
|
66
|
+
}
|
|
67
|
+
}, 5000);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
parseFiles() {
|
|
71
|
+
if (!!this.files) {
|
|
72
|
+
if (typeof this.files === "string") {
|
|
73
|
+
const list = JSON.parse(this.files);
|
|
74
|
+
if (typeof list === "object") {
|
|
75
|
+
this.fileList = list;
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
throw new Error("could not parse string passed to files attribute");
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
throw new Error("Attribute 'files' should be a string");
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
parseRejectedFiles() {
|
|
87
|
+
if (!!this.rejectedFiles) {
|
|
88
|
+
if (typeof this.files === "string") {
|
|
89
|
+
const list = JSON.parse(this.rejectedFiles);
|
|
90
|
+
if (typeof list === "object") {
|
|
91
|
+
this.errorList = list;
|
|
92
|
+
}
|
|
93
|
+
else {
|
|
94
|
+
throw new Error("could not parse string passed to errors attribute");
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
throw new Error("Attribute 'rejected-files' should be a string");
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
setMaxSize() {
|
|
103
|
+
// Max size can't be set above 100Mb
|
|
104
|
+
this.maxSize = this.maxSize > 100 ? 100 : this.maxSize;
|
|
105
|
+
}
|
|
106
|
+
uploadNotifications(newNum, oldNum) {
|
|
107
|
+
if (oldNum > 0 && newNum === 0) {
|
|
108
|
+
setTimeout(() => {
|
|
109
|
+
this.notif = null;
|
|
110
|
+
}, 20 * 1000);
|
|
111
|
+
const message = functions.intl.formatMessage({
|
|
112
|
+
id: "uploader.finishedUploading",
|
|
113
|
+
defaultMessage: "Finished uploading",
|
|
114
|
+
});
|
|
115
|
+
this.notif = { id: 5, message };
|
|
116
|
+
if (this.liveRegion) {
|
|
117
|
+
this.liveRegion.innerHTML = message;
|
|
118
|
+
}
|
|
119
|
+
this.numFilesInProgress = null;
|
|
120
|
+
clearInterval(this.srProgress);
|
|
121
|
+
index.forceUpdate(this.el);
|
|
122
|
+
}
|
|
123
|
+
else if (newNum > 0 && newNum != oldNum) {
|
|
124
|
+
const message = functions.intl.formatMessage({
|
|
125
|
+
id: "uploader.filesUploading",
|
|
126
|
+
defaultMessage: "{num, plural, one {1 file uploading} other {# files uploading}}",
|
|
127
|
+
}, { num: newNum });
|
|
128
|
+
this.notif = { id: 6, message };
|
|
129
|
+
if (this.liveRegion) {
|
|
130
|
+
this.liveRegion.innerHTML = message;
|
|
131
|
+
}
|
|
132
|
+
index.forceUpdate(this.el);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
isValidSize(size) {
|
|
136
|
+
// https://stackoverflow.com/questions/2365100/converting-bytes-to-megabytes
|
|
137
|
+
return size / 1024 / 1024 <= this.maxSize;
|
|
138
|
+
}
|
|
139
|
+
isDuplicate(name) {
|
|
140
|
+
return this.fileList.find((f) => {
|
|
141
|
+
const filename = f.type ? f.name + "." + f.type : f.name;
|
|
142
|
+
return filename === name;
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
isEmpty() {
|
|
146
|
+
return !this.fileList.length && !this.errorList.length;
|
|
147
|
+
}
|
|
148
|
+
isDisabled() {
|
|
149
|
+
const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;
|
|
150
|
+
if (!this.notif) {
|
|
151
|
+
if (isMax) {
|
|
152
|
+
const errMessage = functions.intl.formatMessage({
|
|
153
|
+
id: "uploader.fileUploadLimit",
|
|
154
|
+
defaultMessage: "You have reached the file upload limit.",
|
|
155
|
+
});
|
|
156
|
+
this.notif = { id: 1, message: errMessage };
|
|
157
|
+
if (this.liveRegion) {
|
|
158
|
+
this.liveRegion.innerHTML = errMessage;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
else {
|
|
162
|
+
this.notif = null;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
else if (this.notif.id === 1) {
|
|
166
|
+
// to make sure SR don't repeat the error, don't reset it if it already is showing
|
|
167
|
+
// just dismiss it if isMax is not true anymore
|
|
168
|
+
if (!isMax) {
|
|
169
|
+
this.notif = null;
|
|
170
|
+
}
|
|
171
|
+
// finally do nothing if error 2 is showing (special case when user selects too many files)
|
|
172
|
+
}
|
|
173
|
+
// disable if is the uploader is maxed out or if something is uploading
|
|
174
|
+
return isMax || this.numFilesInProgress > 0;
|
|
175
|
+
}
|
|
176
|
+
isItemUploading(item) {
|
|
177
|
+
return item.hasOwnProperty("progress") && item.progress < 100;
|
|
178
|
+
}
|
|
179
|
+
clearErrors() {
|
|
180
|
+
this.errorList = [];
|
|
181
|
+
this.notif = null;
|
|
182
|
+
}
|
|
183
|
+
handleFiles(ev) {
|
|
184
|
+
this.filesToUpload = [];
|
|
185
|
+
const validTypes = this.fileTypes.split(" ").join(", ");
|
|
186
|
+
const files = Array.from(ev.target.files);
|
|
187
|
+
if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {
|
|
188
|
+
const errMessage = functions.intl.formatMessage({
|
|
189
|
+
id: "uploader.fileUploadExceeded",
|
|
190
|
+
defaultMessage: "The number of selected files exceeds the limit.",
|
|
191
|
+
});
|
|
192
|
+
this.notif = { id: 2, message: errMessage };
|
|
193
|
+
if (this.liveRegion) {
|
|
194
|
+
this.liveRegion.innerHTML = errMessage;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
else {
|
|
198
|
+
files &&
|
|
199
|
+
files.map((file) => {
|
|
200
|
+
if (!functions.hasValidType(file, this.fileTypes)) {
|
|
201
|
+
const error = {
|
|
202
|
+
name: file.name,
|
|
203
|
+
message: functions.intl.formatMessage({
|
|
204
|
+
id: "uploader.invalidFileType",
|
|
205
|
+
defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
|
|
206
|
+
}, { validTypes }),
|
|
207
|
+
};
|
|
208
|
+
this.errorList.push(error);
|
|
209
|
+
}
|
|
210
|
+
else if (!this.isValidSize(file.size)) {
|
|
211
|
+
const error = {
|
|
212
|
+
name: file.name,
|
|
213
|
+
message: functions.intl.formatMessage({
|
|
214
|
+
id: "uploader.fileTooLarge",
|
|
215
|
+
defaultMessage: "The selected file is too large. Maximum file size is {size}Mb",
|
|
216
|
+
}, { size: this.maxSize }),
|
|
217
|
+
};
|
|
218
|
+
this.errorList.push(error);
|
|
219
|
+
}
|
|
220
|
+
else if (this.isDuplicate(file.name)) {
|
|
221
|
+
const error = {
|
|
222
|
+
name: file.name,
|
|
223
|
+
message: functions.intl.formatMessage({
|
|
224
|
+
id: "uploader.duplicateName",
|
|
225
|
+
defaultMessage: "A file with this name already exists.",
|
|
226
|
+
}),
|
|
227
|
+
};
|
|
228
|
+
this.errorList.push(error);
|
|
229
|
+
}
|
|
230
|
+
else {
|
|
231
|
+
this.filesToUpload.push(file);
|
|
232
|
+
}
|
|
233
|
+
});
|
|
234
|
+
if (this.filesToUpload.length > 0) {
|
|
235
|
+
this.numFilesInProgress = this.filesToUpload.length;
|
|
236
|
+
this.wmUploaderFilesSelected.emit(this.filesToUpload);
|
|
237
|
+
this.wmFilesSelected.emit(this.filesToUpload); // deprecated
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
|
|
241
|
+
}
|
|
242
|
+
downloadFile(file) {
|
|
243
|
+
this.clearErrors();
|
|
244
|
+
this.wmUploaderDownloadFile.emit(file.id);
|
|
245
|
+
this.wmDownloadFile.emit(file.id); // deprecated
|
|
246
|
+
}
|
|
247
|
+
deleteFile(file) {
|
|
248
|
+
this.clearErrors();
|
|
249
|
+
index.forceUpdate(this.el); // for the button to stop being disabled if num files become < max-files
|
|
250
|
+
this.wmUploaderDeleteFile.emit(file.id);
|
|
251
|
+
this.wmDeleteFile.emit(file.id); // deprecated
|
|
252
|
+
}
|
|
253
|
+
componentWillLoad() {
|
|
254
|
+
if (!this.buttonText) {
|
|
255
|
+
throw new Error("wm-uploader: button-text is a required prop");
|
|
256
|
+
}
|
|
257
|
+
if (this.type) {
|
|
258
|
+
console.warn("wm-uploader: type has been deprecated as of v3.1.0. Please use uploader-type instead.");
|
|
259
|
+
}
|
|
260
|
+
if (this.tempUploaderType === "1" && !this.emptyStateText) {
|
|
261
|
+
throw new Error("wm-uploader: empty-state-text is a required prop");
|
|
262
|
+
}
|
|
263
|
+
this.setMaxSize();
|
|
264
|
+
this.parseFiles();
|
|
265
|
+
this.clearErrors();
|
|
266
|
+
this.parseRejectedFiles();
|
|
267
|
+
}
|
|
268
|
+
componentDidLoad() {
|
|
269
|
+
// awkward way to handle Edge bug where file input dialog doesn't open on Enter key
|
|
270
|
+
// first, detect polyfill by checking the class name that it adds to the component
|
|
271
|
+
// (it's important NOT to execute the code below in normal browsers as it would open the dialog twice)
|
|
272
|
+
this.el.classList.contains("sc-wm-uploader-h") &&
|
|
273
|
+
// then add an even listener to force a click event when Enter key is pressed
|
|
274
|
+
this.inputEl &&
|
|
275
|
+
this.inputEl.addEventListener("keydown", (ev) => {
|
|
276
|
+
if (this.inputEl && ev.keyCode === 13) {
|
|
277
|
+
this.inputEl.click();
|
|
278
|
+
}
|
|
279
|
+
});
|
|
280
|
+
if (document.body.classList.contains("wmcl-user-is-tabbing")) {
|
|
281
|
+
this.toggleTabbingOn();
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
renderUploadSvg() {
|
|
285
|
+
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" })));
|
|
286
|
+
}
|
|
287
|
+
renderIcon() {
|
|
288
|
+
// mdi attachment icon (paper clip) is horizontal but we want it vertical
|
|
289
|
+
const rotate = this.icon && this.icon === "f066";
|
|
290
|
+
return (this.icon && (index.h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)))));
|
|
291
|
+
}
|
|
292
|
+
renderInfo() {
|
|
293
|
+
return this.info ? index.h("span", { class: "info" }, this.info) : "";
|
|
294
|
+
}
|
|
295
|
+
renderNotif() {
|
|
296
|
+
return this.notif ? index.h("div", { class: "notif" }, this.notif.message) : "";
|
|
297
|
+
}
|
|
298
|
+
renderUploadButton(classes) {
|
|
299
|
+
const label = (index.h("label", { htmlFor: this.inputId, class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` }, this.renderIcon(), this.buttonText));
|
|
300
|
+
const filecount = this.tempUploaderType === "1" && (index.h("div", { class: "filecount" }, functions.intl.formatMessage({
|
|
301
|
+
id: "uploader.filesAdded",
|
|
302
|
+
defaultMessage: "{numFiles, plural, one {1 file added} other {# files added}}",
|
|
303
|
+
}, { numFiles: this.fileList.length })));
|
|
304
|
+
const info = this.tempUploaderType === "2" && this.renderInfo();
|
|
305
|
+
let renderOrder = [info, label, filecount];
|
|
306
|
+
if (this.buttonPosition === "right") {
|
|
307
|
+
renderOrder = renderOrder.reverse();
|
|
308
|
+
}
|
|
309
|
+
return (index.h("div", { class: "info-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() }), renderOrder.map((x) => x)));
|
|
310
|
+
}
|
|
311
|
+
renderEmptyState() {
|
|
312
|
+
return (index.h("div", { class: "empty-block" }, this.renderUploadSvg(), index.h("div", { class: `empty-message` }, this.emptyStateText), this.renderUploadButton(`-${this.buttonType} empty-button`), this.renderNotif()));
|
|
313
|
+
}
|
|
314
|
+
renderErrorList() {
|
|
315
|
+
if (!!this.errorList.length) {
|
|
316
|
+
if (this.liveRegion) {
|
|
317
|
+
let srMessage = this.errorList.reduce(function (acc, err) {
|
|
318
|
+
return acc + `${err.name}: ${err.message} `;
|
|
319
|
+
}, "");
|
|
320
|
+
this.liveRegion.innerHTML = srMessage;
|
|
321
|
+
}
|
|
322
|
+
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.name))), index.h("div", { class: "error-message" }, err.message))))));
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
renderFileInProgress(item) {
|
|
326
|
+
const filename = item.type ? item.name + "." + item.type : item.name;
|
|
327
|
+
return (index.h("li", null, index.h("div", { class: "file --progress" }, index.h("div", { class: "progress", style: {
|
|
328
|
+
background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
|
|
329
|
+
} }), index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, filename, " ", index.h("span", { class: "sr-only" }, "uploading"))))));
|
|
330
|
+
}
|
|
331
|
+
renderFile(item) {
|
|
332
|
+
return (index.h("li", null, index.h("div", { class: "file --saved" }, index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, item.name + "." + item.type)), index.h("div", { class: "file-controls" }, index.h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: "download", "tooltip-position": "bottom", "label-for-identical-buttons": `download ${item.name}`, icon: "f1da", onClick: () => this.downloadFile(item) }), index.h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: "remove", "tooltip-position": "bottom", "label-for-identical-buttons": `remove ${item.name}`, icon: "f1c0", onClick: () => this.deleteFile(item) })))));
|
|
333
|
+
}
|
|
334
|
+
renderFileList() {
|
|
335
|
+
if (this.fileList) {
|
|
336
|
+
this.sortBy === "name"
|
|
337
|
+
? this.fileList.sort((a, b) => a.name.localeCompare(b.name))
|
|
338
|
+
: this.fileList.sort((a, b) => Date.parse(a.lastUpdated) - Date.parse(b.lastUpdated));
|
|
339
|
+
return (index.h("div", null, index.h("ul", { class: "inprogress-list" }, this.fileList.filter((item) => this.isItemUploading(item)).map((item) => this.renderFileInProgress(item))), index.h("ul", { class: "file-list" }, this.fileList.filter((item) => !this.isItemUploading(item)).map((item) => this.renderFile(item)))));
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
renderHeader() {
|
|
343
|
+
return (index.h("div", { class: "header" }, index.h("div", { class: `slot-wrapper ${this.buttonPosition === "right" ? "right" : ""}` }, index.h("slot", null), index.h("div", { class: `notif-wrapper ${this.buttonPosition}` }, this.renderUploadButton(`-${this.buttonType} ${this.isDisabled() ? "disabled" : ""}`), this.renderNotif()))));
|
|
344
|
+
}
|
|
345
|
+
renderFooter() {
|
|
346
|
+
return (index.h("div", { class: `footer ${this.buttonPosition}` }, index.h("div", { class: `notif-wrapper ${this.buttonPosition}` }, index.h("div", { class: "filecount-wrapper" }, this.renderUploadButton(`-${this.buttonType} ${this.isDisabled() ? "disabled" : ""}`)), this.renderNotif())));
|
|
347
|
+
}
|
|
348
|
+
renderWithItems() {
|
|
349
|
+
return (index.h("div", null, this.tempUploaderType === "2" && this.renderHeader(), index.h("div", { class: `list-container type${this.tempUploaderType}` }, this.renderErrorList(), this.renderFileList()), this.tempUploaderType === "1" && this.renderFooter()));
|
|
350
|
+
}
|
|
351
|
+
render() {
|
|
352
|
+
return (index.h(index.Host, null, this.isEmpty() && this.tempUploaderType === "1" ? this.renderEmptyState() : this.renderWithItems(), 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
|
|
353
|
+
,
|
|
354
|
+
"aria-atomic": "true" })));
|
|
355
|
+
}
|
|
356
|
+
get el() { return index.getElement(this); }
|
|
357
|
+
static get watchers() { return {
|
|
358
|
+
"files": ["parseFiles"],
|
|
359
|
+
"rejectedFiles": ["parseRejectedFiles"],
|
|
360
|
+
"maxSize": ["setMaxSize"],
|
|
361
|
+
"numFilesInProgress": ["uploadNotifications"]
|
|
362
|
+
}; }
|
|
363
|
+
};
|
|
355
364
|
Uploader.style = wmUploaderCss;
|
|
356
365
|
|
|
357
366
|
exports.wm_uploader = Uploader;
|