@watermarkinsights/ripple 3.11.0-1 → 3.11.0-4

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 (26) hide show
  1. package/dist/cjs/{global-965d9e47.js → global-2eb5000b.js} +1 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/ripple.cjs.js +1 -1
  4. package/dist/cjs/wm-uploader.cjs.entry.js +23 -36
  5. package/dist/collection/components/wm-uploader/wm-uploader.css +17 -7
  6. package/dist/collection/components/wm-uploader/wm-uploader.js +34 -47
  7. package/dist/esm/{global-61cf5e64.js → global-6aa5b97b.js} +1 -1
  8. package/dist/esm/loader.js +1 -1
  9. package/dist/esm/ripple.js +1 -1
  10. package/dist/esm/wm-uploader.entry.js +23 -36
  11. package/dist/esm-es5/{global-61cf5e64.js → global-6aa5b97b.js} +1 -1
  12. package/dist/esm-es5/loader.js +1 -1
  13. package/dist/esm-es5/ripple.js +1 -1
  14. package/dist/esm-es5/wm-uploader.entry.js +1 -1
  15. package/dist/ripple/{p-4ff3c125.js → p-5535f6b0.js} +1 -1
  16. package/dist/ripple/{p-45c1e0d5.system.js → p-cfe4b3cc.system.js} +1 -1
  17. package/dist/ripple/{p-08e30997.system.js → p-e573d941.system.js} +1 -1
  18. package/dist/ripple/p-f696e347.system.entry.js +1 -0
  19. package/dist/ripple/p-fea093e1.entry.js +1 -0
  20. package/dist/ripple/ripple.esm.js +1 -1
  21. package/dist/ripple/ripple.js +1 -1
  22. package/dist/types/components/wm-uploader/wm-uploader.d.ts +4 -4
  23. package/dist/types/components.d.ts +4 -4
  24. package/package.json +1 -1
  25. package/dist/ripple/p-8a5e6823.system.entry.js +0 -1
  26. package/dist/ripple/p-f67ead6d.entry.js +0 -1
package/dist/cjs/{global-965d9e47.js → global-2eb5000b.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const version = "3.11.0-1";
3
+ const version = "3.11.0-4";
4
4
 
5
5
  // PRINT RIPPLE VERSION IN CONSOLE
6
6
  // test envs return 0 for plugin.length
package/dist/cjs/loader.cjs.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-acad7ab3.js');
6
- require('./global-965d9e47.js');
6
+ require('./global-2eb5000b.js');
7
7
 
8
8
  /*
9
9
  Stencil Client Patch Esm v2.14.0 | MIT Licensed | https://stenciljs.com
package/dist/cjs/ripple.cjs.js CHANGED
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  const index = require('./index-acad7ab3.js');
4
- require('./global-965d9e47.js');
4
+ require('./global-2eb5000b.js');
5
5
 
6
6
  /*
7
7
  Stencil Client Patch Browser v2.14.0 | MIT Licensed | https://stenciljs.com
package/dist/cjs/wm-uploader.cjs.entry.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-acad7ab3.js');
6
6
  const functions = require('./functions-1a67b971.js');
7
7
 
8
- const wmUploaderCss = ":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:-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-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) :host .wm-button.-textonly .button-text,wm-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-uploader .wm-button.-textonly .button-text,wm-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-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-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 .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:not(:disabled):not(.disabled),wm-uploader .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled){background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-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.-secondary:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-secondary:hover:not(:disabled):not(.disabled),:host .wm-button.-icononly:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-icononly:hover:not(:disabled):not(.disabled){background:#464177;color:#fff}: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:-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-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-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}:host .wm-button.-textonly.-permanentlydelete,wm-uploader .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark),wm-uploader .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark){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:not(:disabled):not(.disabled),wm-uploader .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled){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):not(.disabled),wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):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.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark),wm-uploader .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark){background:#9a2e22;border-color:#9a2e22}:host .wm-button.-pairnegative,wm-uploader .wm-button.-pairnegative{background:#cc4c3e;border-color:#cc4c3e;color:#fff}:host .wm-button.-pairnegative:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-pairnegative:hover:not(:disabled):not(.disabled){background:#a33d32;border-color:#a33d32}:host .wm-button.-pairpositive,wm-uploader .wm-button.-pairpositive{background:#15868d;border-color:#15868d;color:#fff}:host .wm-button.-pairpositive:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-pairpositive:hover:not(:disabled):not(.disabled){background:#116b71;border-color:#116b71}: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:\"\\f140\";position:absolute;right:0.5625rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}:host .wm-button.-selectoronly:hover:not(:disabled):not(.disabled),wm-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;-webkit-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.-primary,wm-uploader .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-uploader .wm-button:disabled.-permanentlydelete,:host .wm-button:disabled.-pairnegative,wm-uploader .wm-button:disabled.-pairnegative,:host .wm-button:disabled.-pairpositive,wm-uploader .wm-button:disabled.-pairpositive,: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.-pairnegative,wm-uploader .wm-button.disabled.-pairnegative,:host .wm-button.disabled.-pairpositive,wm-uploader .wm-button.disabled.-pairpositive{background:#737373;color:#fff;border-color:#737373}: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 .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),wm-uploader .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button:disabled.dark.-textonly,wm-uploader .wm-button:disabled.dark.-textonly,:host .wm-button:disabled.dark.-navigational,wm-uploader .wm-button:disabled.dark.-navigational,:host .wm-button:disabled.dark.-icononly,wm-uploader .wm-button:disabled.dark.-icononly,:host .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),wm-uploader .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button.disabled.dark.-textonly,wm-uploader .wm-button.disabled.dark.-textonly,:host .wm-button.disabled.dark.-navigational,wm-uploader .wm-button.disabled.dark.-navigational,:host .wm-button.disabled.dark.-icononly,wm-uploader .wm-button.disabled.dark.-icononly{color:#b5b5b5;border-color:#b5b5b5}:host .wm-button:disabled.dark.-primary,wm-uploader .wm-button:disabled.dark.-primary,:host .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),wm-uploader .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),:host .wm-button.disabled.dark.-primary,wm-uploader .wm-button.disabled.dark.-primary,:host .wm-button.disabled.dark.-permanentlydelete:not(.-textonly),wm-uploader .wm-button.disabled.dark.-permanentlydelete:not(.-textonly){background:#a6a6a6;border-color:#a6a6a6;color:#353b48}: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;max-width:1140px}: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 *{-webkit-box-sizing:border-box;box-sizing:border-box}.wm-button.disabled{pointer-events:initial !important}.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{margin-bottom:1rem}.header.type3{margin-bottom:2.5rem}.header .slot-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:start;align-items:flex-start}.header .info-wrapper{-ms-flex-align:center;align-items:center}.header .info-wrapper .info{font-size:0.875rem;margin-left:1rem}.header .accepted-types{font-size:0.875rem}.header .requirements{font-size:0.875rem;margin-left:1rem}.footer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;padding:0.9375rem 1.875rem}.footer .notif-wrapper{-ms-flex-align:end;align-items:flex-end}.footer .filecount-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.footer .filecount-wrapper .filecount{font-size:0.875rem;margin-right:1rem}.notif-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-bottom:1rem}.notif-wrapper.type3{-ms-flex-direction:row;flex-direction:row;margin-bottom:0.75rem}.notif-wrapper .requirements{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.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:-ms-flexbox;display:flex}.name-wrapper{overflow:hidden}.name-wrapper+.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:0.875rem;margin-bottom:0.4375rem}.empty-block .empty-message.large{font-size:1.5rem}.empty-block .info-wrapper{-ms-flex-pack:center;justify-content:center;width:100%}.empty-block .info-wrapper .wm-button{width:auto}.list-container{overflow-y:auto}.list-container .file-list .file.--saved,.list-container .inprogress-list .file{margin-bottom:1.625rem}.list-container.type1{padding:0 1.875rem;height:16.25rem}.list-container.type3{overflow-y:unset}.list-container.type3.checkmark-spacer{margin-right:44px}.list-container.type3 .file-list .file.--saved,.list-container.type3 .inprogress-list .file{margin-bottom:0.5rem}ul{list-style:none;padding:0;width:100%}ul li{position:relative;font-size:0.875rem}ul li .file{min-width:300px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:relative;height:3.5rem;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;white-space:nowrap}ul li .file .left-group{overflow:hidden}ul li .file .right-group{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:5rem}ul li .file .right-group .file-controls{display:-ms-flexbox;display:flex}ul li .file .right-group .file-info{white-space:nowrap;margin-right:1rem}ul li .file wm-button+wm-button{margin-left:1rem}ul li.condensed .right-group{padding-left:2.5rem}ul li.checked .file:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f133\";position:absolute;right:-44px;color:#088000;font-size:28px;line-height:1}ul .progress{position:absolute;left:0;top:0;right:0;height:8px}ul.file-list li,ul.inprogress-list li{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ul.file-list li .file,ul.inprogress-list li .file{-ms-flex:1;flex:1}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 = ":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:-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-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) :host .wm-button.-textonly .button-text,wm-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-uploader .wm-button.-textonly .button-text,wm-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-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-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 .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:not(:disabled):not(.disabled),wm-uploader .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled){background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-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.-secondary:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-secondary:hover:not(:disabled):not(.disabled),:host .wm-button.-icononly:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-icononly:hover:not(:disabled):not(.disabled){background:#464177;color:#fff}: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:-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-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-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}:host .wm-button.-textonly.-permanentlydelete,wm-uploader .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark),wm-uploader .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark){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:not(:disabled):not(.disabled),wm-uploader .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled){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):not(.disabled),wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):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.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark),wm-uploader .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark){background:#9a2e22;border-color:#9a2e22}:host .wm-button.-pairnegative,wm-uploader .wm-button.-pairnegative{background:#cc4c3e;border-color:#cc4c3e;color:#fff}:host .wm-button.-pairnegative:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-pairnegative:hover:not(:disabled):not(.disabled){background:#a33d32;border-color:#a33d32}:host .wm-button.-pairpositive,wm-uploader .wm-button.-pairpositive{background:#15868d;border-color:#15868d;color:#fff}:host .wm-button.-pairpositive:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-pairpositive:hover:not(:disabled):not(.disabled){background:#116b71;border-color:#116b71}: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:\"\\f140\";position:absolute;right:0.5625rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}:host .wm-button.-selectoronly:hover:not(:disabled):not(.disabled),wm-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;-webkit-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.-primary,wm-uploader .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-uploader .wm-button:disabled.-permanentlydelete,:host .wm-button:disabled.-pairnegative,wm-uploader .wm-button:disabled.-pairnegative,:host .wm-button:disabled.-pairpositive,wm-uploader .wm-button:disabled.-pairpositive,: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.-pairnegative,wm-uploader .wm-button.disabled.-pairnegative,:host .wm-button.disabled.-pairpositive,wm-uploader .wm-button.disabled.-pairpositive{background:#737373;color:#fff;border-color:#737373}: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 .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),wm-uploader .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button:disabled.dark.-textonly,wm-uploader .wm-button:disabled.dark.-textonly,:host .wm-button:disabled.dark.-navigational,wm-uploader .wm-button:disabled.dark.-navigational,:host .wm-button:disabled.dark.-icononly,wm-uploader .wm-button:disabled.dark.-icononly,:host .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),wm-uploader .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button.disabled.dark.-textonly,wm-uploader .wm-button.disabled.dark.-textonly,:host .wm-button.disabled.dark.-navigational,wm-uploader .wm-button.disabled.dark.-navigational,:host .wm-button.disabled.dark.-icononly,wm-uploader .wm-button.disabled.dark.-icononly{color:#b5b5b5;border-color:#b5b5b5}:host .wm-button:disabled.dark.-primary,wm-uploader .wm-button:disabled.dark.-primary,:host .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),wm-uploader .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),:host .wm-button.disabled.dark.-primary,wm-uploader .wm-button.disabled.dark.-primary,:host .wm-button.disabled.dark.-permanentlydelete:not(.-textonly),wm-uploader .wm-button.disabled.dark.-permanentlydelete:not(.-textonly){background:#a6a6a6;border-color:#a6a6a6;color:#353b48}: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;max-width:1140px}: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 *{-webkit-box-sizing:border-box;box-sizing:border-box}.wm-button.disabled{pointer-events:initial !important}.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{margin-bottom:2.5rem}.header.type1,.header.type2{margin-bottom:1rem}.header .slot-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:start;align-items:flex-start}.header .info-wrapper{-ms-flex-align:center;align-items:center}.header .info-wrapper .info{font-size:0.875rem;margin-left:1rem}.header .accepted-types{font-size:0.875rem}.header .requirements{font-size:0.875rem;margin-left:1rem}.footer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;padding:0.9375rem 1.875rem}.footer .notif-wrapper{-ms-flex-align:end;align-items:flex-end}.footer .filecount-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.footer .filecount-wrapper .filecount{font-size:0.875rem;margin-right:1rem}.notif-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-bottom:0.75rem}.notif-wrapper.type1,.notif-wrapper.type2{-ms-flex-direction:column;flex-direction:column;margin-bottom:1rem}.notif-wrapper .requirements{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.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:-ms-flexbox;display:flex}.name-wrapper{overflow:hidden}.name-wrapper+.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:0.875rem;margin-bottom:0.4375rem}.empty-block .empty-message.large{font-size:1.5rem}.empty-block .info-wrapper{-ms-flex-pack:center;justify-content:center;width:100%}.empty-block .info-wrapper .wm-button{width:auto}.list-container{overflow-y:auto}.list-container .file-list .file.--saved,.list-container .inprogress-list .file{margin-bottom:1.625rem}.list-container.type1{padding:0 1.875rem;height:16.25rem}.list-container.type3{overflow-y:unset}.list-container.type3 ul{margin:0}.list-container.type3.checkmark-spacer{margin-right:44px}.list-container.type3 .file-list .file.--saved,.list-container.type3 .inprogress-list .file{margin-bottom:0.5rem}.list-container.type3 .error-list li{margin-bottom:0.5rem}ul{list-style:none;padding:0;width:100%}ul li{position:relative;font-size:0.875rem}ul li .file{min-width:300px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:relative;height:3.5rem;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;white-space:nowrap}ul li .file .left-group{overflow:hidden}ul li .file .right-group{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:5rem}ul li .file .right-group .file-controls{display:-ms-flexbox;display:flex}ul li .file .right-group .file-info{white-space:nowrap;margin-right:1rem}ul li .file wm-button+wm-button{margin-left:1rem}ul li.condensed .right-group{padding-left:2.5rem}ul li.checked .file:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f133\";position:absolute;right:-44px;color:#088000;font-size:28px;line-height:1}ul .progress{position:absolute;left:0;top:0;right:0;height:8px}ul.file-list li,ul.inprogress-list li{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ul.file-list li .file,ul.inprogress-list li .file{-ms-flex:1;flex:1}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}.ch-measure{width:1ch !important}";
9
9
 
10
10
  let Uploader = class {
11
11
  constructor(hostRef) {
@@ -17,8 +17,6 @@ let Uploader = class {
17
17
  this.wmUploaderDownloadFile = index.createEvent(this, "wmUploaderDownloadFile", 7);
18
18
  this.wmDownloadFile = index.createEvent(this, "wmDownloadFile", 7);
19
19
  this.wmUploaderPreviewFile = index.createEvent(this, "wmUploaderPreviewFile", 7);
20
- this.uploaderType = null; // only mutable for the deprecation transition
21
- this.type = null; // DEPRECATED in favor of uploaderType
22
20
  this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
23
21
  this.defaultMaxSize = 100;
24
22
  this.maxSize = this.defaultMaxSize; // in Mb
@@ -41,8 +39,10 @@ let Uploader = class {
41
39
  }
42
40
  get tempUploaderType() {
43
41
  // replace instances of this.tempUploaderType with this.uploaderType once type is fully phased out
44
- // don't forget to reset this.uploaderType's default value to "1"
45
- return this.type || this.uploaderType || "1";
42
+ return this.type || this.uploaderType;
43
+ }
44
+ get chMeasure() {
45
+ return this.el.shadowRoot.querySelector(".ch-measure").clientWidth;
46
46
  }
47
47
  get fileLimitReached() {
48
48
  return this.maxFiles && this.fileList.length >= this.maxFiles;
@@ -380,17 +380,6 @@ let Uploader = class {
380
380
  this.toggleTabbingOn();
381
381
  }
382
382
  }
383
- getTextWidth(text, parent) {
384
- // a parent is needed to make sure the measurements take into account font treatments (type, size, weight, etc)
385
- const tempSpan = document.createElement("span");
386
- tempSpan.style.whiteSpace = "nowrap";
387
- tempSpan.style.visibility = "hidden";
388
- tempSpan.textContent = text;
389
- parent.appendChild(tempSpan);
390
- const measurements = tempSpan.getBoundingClientRect();
391
- parent.removeChild(tempSpan);
392
- return measurements.width;
393
- }
394
383
  showTooltip(anchorEl, tooltipText) {
395
384
  this.tooltipEl.textContent = tooltipText;
396
385
  this.positionTooltip("bottom", anchorEl, this.tooltipEl);
@@ -491,7 +480,7 @@ let Uploader = class {
491
480
  return (index.h("div", { class: "empty-block" }, this.renderUploadSvg(), index.h("div", { class: `empty-message` }, this.emptyStateText), this.renderUploadButton("-primary empty-button"), this.renderNotif()));
492
481
  }
493
482
  renderFileName(filename, isUploading) {
494
- return (index.h("div", { class: "left-group" }, index.h("div", { class: "name-wrapper" }, index.h("span", { class: "filename", "data-filename": filename, onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev, filename), onMouseLeave: () => this.hideTooltip() }), isUploading && index.h("span", { class: "sr-only" }, "uploading"))));
483
+ return (index.h("div", { class: "left-group" }, index.h("div", { class: "name-wrapper" }, index.h("span", { class: "filename", "data-filename": filename, onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev, filename), onMouseLeave: () => this.hideTooltip() }), isUploading && index.h("span", { class: "sr-only" }, "uploading"), index.h("div", { class: "sr-only ch-measure" }))));
495
484
  }
496
485
  renderErrorList() {
497
486
  if (!!this.errorList.length) {
@@ -513,9 +502,9 @@ let Uploader = class {
513
502
  renderFile(item) {
514
503
  const filename = item.type ? `${item.name}.${item.type}` : item.name;
515
504
  const hasSingleFileAction = item.fileActions && item.fileActions.split(" ").length === 1;
516
- const showActionMenu = this.tempUploaderType === "3" && this.isCondensed && !hasSingleFileAction;
517
- const showFileInfo = this.tempUploaderType === "3" && !this.isCondensed;
518
- const showCheckmark = this.tempUploaderType === "3" && item.progress === 100;
505
+ const showActionMenu = !this.tempUploaderType && this.isCondensed && !hasSingleFileAction;
506
+ const showFileInfo = !this.tempUploaderType && !this.isCondensed;
507
+ const showCheckmark = !this.tempUploaderType && item.progress === 100;
519
508
  return (index.h("li", { class: `${this.isCondensed ? "condensed" : ""} ${showCheckmark ? "checked" : ""}` }, index.h("div", { class: "file --saved" }, this.renderFileName(filename, this.isItemUploading(item)), index.h("div", { class: "right-group" }, showFileInfo && this.renderFileInfo(item), showActionMenu ? this.renderActionMenu(item) : this.renderFileActions(item)))));
520
509
  }
521
510
  handleFilenameMouseEnter(ev, filename) {
@@ -538,18 +527,16 @@ let Uploader = class {
538
527
  const filenameEl = file.querySelector(".filename");
539
528
  const availableSpace = rightBoundary - leftBoundary;
540
529
  let filename = filenameEl.dataset.filename;
541
- const extension = filename.slice(filename.lastIndexOf("."));
542
- // not including the extension, filename has a minimum length of 8 characters in order to truncate
543
- // 2 characters + at least 3 represented by the ellipses + 3 characters before extension
544
- while (filename.replace(extension, "").length > 8 &&
545
- this.getTextWidth(filename, leftGroup) > availableSpace) {
546
- // remove ellipses for easier extension splitting
547
- filename = filename.replace("...", "");
548
- // lastIndexOf is necessary in case filename includes .s
549
- const preEllipses = filename.slice(0, filename.lastIndexOf(".") - 3);
550
- const postEllipses = filename.slice(filename.lastIndexOf(".") - 3, filename.length);
551
- // chop preExtension, trim both, and reintroduce ellipses
552
- filename = preEllipses.slice(0, -1).trim() + "..." + postEllipses.trim();
530
+ const canFitText = availableSpace > filename.length * this.chMeasure;
531
+ if (!canFitText) {
532
+ const extension = filename.slice(filename.lastIndexOf("."));
533
+ const numFittingCharacters = Math.floor(availableSpace / this.chMeasure);
534
+ // three ellipses, three constant characters, extension
535
+ const postEllipsesLength = 3 + 3 + extension.length;
536
+ let preEllipsesLength = Math.max(2, numFittingCharacters - postEllipsesLength);
537
+ const preEllipsesText = filename.slice(0, preEllipsesLength);
538
+ const postEllipsesText = filename.slice(filename.indexOf(extension) - 3, filename.length);
539
+ filename = `${preEllipsesText.trim()}...${postEllipsesText.trim()}`;
553
540
  }
554
541
  filenameEl.textContent = filename;
555
542
  }
@@ -595,23 +582,23 @@ let Uploader = class {
595
582
  }
596
583
  }
597
584
  legacyRenderHeader() {
598
- return (index.h("div", { class: "header" }, index.h("div", { class: "slot-wrapper" }, index.h("slot", null), index.h("div", { class: "notif-wrapper" }, this.renderUploadButton(`-secondary ${this.isDisabled ? "disabled" : ""}`), this.renderNotif()))));
585
+ return (index.h("div", { class: `header ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, index.h("div", { class: "slot-wrapper" }, index.h("slot", null), index.h("div", { class: "notif-wrapper" }, this.renderUploadButton(`-secondary ${this.isDisabled ? "disabled" : ""}`), this.renderNotif()))));
599
586
  }
600
587
  renderHeader() {
601
- return (index.h("div", { class: `header type${this.tempUploaderType}` }, index.h("div", { class: `notif-wrapper type${this.tempUploaderType}` }, this.renderUploadButton(`-secondary ${this.isDisabled ? "disabled" : ""}`), this.renderRequirements()), index.h("div", { id: "accepted-types", class: "accepted-types" }, this.acceptedFileTypesMessage)));
588
+ return (index.h("div", { class: `header ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, index.h("div", { class: `notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, this.renderUploadButton(`-secondary ${this.isDisabled ? "disabled" : ""}`), this.renderRequirements()), index.h("div", { id: "accepted-types", class: "accepted-types" }, this.acceptedFileTypesMessage), this.renderNotif()));
602
589
  }
603
590
  renderRequirements() {
604
591
  return (index.h("div", { class: "requirements" }, this.maxFiles && index.h("span", { id: "file-count" }, this.fileCountMessage), this.maxSize !== this.defaultMaxSize && index.h("span", { id: "max-size" }, this.maxSizeMessage)));
605
592
  }
606
593
  renderFooter() {
607
- return (index.h("div", { class: "footer" }, index.h("div", { class: "notif-wrapper" }, index.h("div", { class: "filecount-wrapper" }, index.h("div", { class: "filecount" }, functions.intl.formatMessage({
594
+ return (index.h("div", { class: "footer" }, index.h("div", { class: `notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, index.h("div", { class: "filecount-wrapper" }, index.h("div", { class: "filecount" }, functions.intl.formatMessage({
608
595
  id: "uploader.filesAdded",
609
596
  defaultMessage: "{numFiles, plural, one {1 file added} other {# files added}}",
610
597
  }, { numFiles: this.fileList.length })), this.renderUploadButton(`-primary ${this.isDisabled ? "disabled" : ""}`)), this.renderNotif())));
611
598
  }
612
599
  renderWithItems() {
613
600
  const hasNewlyUploadedFiles = this.fileList.filter((file) => file.progress === 100).length > 0;
614
- return (index.h("div", null, this.tempUploaderType === "3" && this.renderHeader(), this.tempUploaderType === "2" && this.legacyRenderHeader(), index.h("div", { class: `list-container type${this.tempUploaderType} ${hasNewlyUploadedFiles ? "checkmark-spacer" : ""}` }, this.renderErrorList(), this.renderFileList()), this.tempUploaderType === "1" && this.renderFooter()));
601
+ return (index.h("div", null, !this.tempUploaderType && this.renderHeader(), this.tempUploaderType === "2" && this.legacyRenderHeader(), index.h("div", { class: `list-container type${this.tempUploaderType} ${hasNewlyUploadedFiles ? "checkmark-spacer" : ""}` }, this.renderErrorList(), this.renderFileList()), this.tempUploaderType === "1" && this.renderFooter()));
615
602
  }
616
603
  render() {
617
604
  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
package/dist/collection/components/wm-uploader/wm-uploader.css CHANGED
@@ -558,11 +558,11 @@ wm-uploader * {
558
558
  }
559
559
 
560
560
  .header {
561
- margin-bottom: 1rem;
562
- }
563
- .header.type3 {
564
561
  margin-bottom: 2.5rem;
565
562
  }
563
+ .header.type1, .header.type2 {
564
+ margin-bottom: 1rem;
565
+ }
566
566
  .header .slot-wrapper {
567
567
  display: flex;
568
568
  justify-content: flex-start;
@@ -604,13 +604,13 @@ wm-uploader * {
604
604
  .notif-wrapper {
605
605
  position: relative;
606
606
  display: flex;
607
- flex-direction: column;
608
- margin-bottom: 1rem;
609
- }
610
- .notif-wrapper.type3 {
611
607
  flex-direction: row;
612
608
  margin-bottom: 0.75rem;
613
609
  }
610
+ .notif-wrapper.type1, .notif-wrapper.type2 {
611
+ flex-direction: column;
612
+ margin-bottom: 1rem;
613
+ }
614
614
  .notif-wrapper .requirements {
615
615
  display: flex;
616
616
  flex-direction: column;
@@ -676,6 +676,9 @@ wm-uploader * {
676
676
  .list-container.type3 {
677
677
  overflow-y: unset;
678
678
  }
679
+ .list-container.type3 ul {
680
+ margin: 0;
681
+ }
679
682
  .list-container.type3.checkmark-spacer {
680
683
  margin-right: 44px;
681
684
  }
@@ -683,6 +686,9 @@ wm-uploader * {
683
686
  .list-container.type3 .inprogress-list .file {
684
687
  margin-bottom: 0.5rem;
685
688
  }
689
+ .list-container.type3 .error-list li {
690
+ margin-bottom: 0.5rem;
691
+ }
686
692
 
687
693
  ul {
688
694
  list-style: none;
@@ -777,4 +783,8 @@ ul.error-list li .file {
777
783
  ul.error-list li .error-message {
778
784
  padding-top: 0.25rem;
779
785
  font-style: italic;
786
+ }
787
+
788
+ .ch-measure {
789
+ width: 1ch !important;
780
790
  }
package/dist/collection/components/wm-uploader/wm-uploader.js CHANGED
@@ -3,8 +3,6 @@ import { forceUpdate } from "@stencil/core";
3
3
  import { debounce, generateId, hasValidType, intl } from "../../global/functions";
4
4
  export class Uploader {
5
5
  constructor() {
6
- this.uploaderType = null; // only mutable for the deprecation transition
7
- this.type = null; // DEPRECATED in favor of uploaderType
8
6
  this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
9
7
  this.defaultMaxSize = 100;
10
8
  this.maxSize = this.defaultMaxSize; // in Mb
@@ -27,8 +25,10 @@ export class Uploader {
27
25
  }
28
26
  get tempUploaderType() {
29
27
  // replace instances of this.tempUploaderType with this.uploaderType once type is fully phased out
30
- // don't forget to reset this.uploaderType's default value to "1"
31
- return this.type || this.uploaderType || "1";
28
+ return this.type || this.uploaderType;
29
+ }
30
+ get chMeasure() {
31
+ return this.el.shadowRoot.querySelector(".ch-measure").clientWidth;
32
32
  }
33
33
  get fileLimitReached() {
34
34
  return this.maxFiles && this.fileList.length >= this.maxFiles;
@@ -366,17 +366,6 @@ export class Uploader {
366
366
  this.toggleTabbingOn();
367
367
  }
368
368
  }
369
- getTextWidth(text, parent) {
370
- // a parent is needed to make sure the measurements take into account font treatments (type, size, weight, etc)
371
- const tempSpan = document.createElement("span");
372
- tempSpan.style.whiteSpace = "nowrap";
373
- tempSpan.style.visibility = "hidden";
374
- tempSpan.textContent = text;
375
- parent.appendChild(tempSpan);
376
- const measurements = tempSpan.getBoundingClientRect();
377
- parent.removeChild(tempSpan);
378
- return measurements.width;
379
- }
380
369
  showTooltip(anchorEl, tooltipText) {
381
370
  this.tooltipEl.textContent = tooltipText;
382
371
  this.positionTooltip("bottom", anchorEl, this.tooltipEl);
@@ -490,7 +479,8 @@ export class Uploader {
490
479
  return (h("div", { class: "left-group" },
491
480
  h("div", { class: "name-wrapper" },
492
481
  h("span", { class: "filename", "data-filename": filename, onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev, filename), onMouseLeave: () => this.hideTooltip() }),
493
- isUploading && h("span", { class: "sr-only" }, "uploading"))));
482
+ isUploading && h("span", { class: "sr-only" }, "uploading"),
483
+ h("div", { class: "sr-only ch-measure" }))));
494
484
  }
495
485
  renderErrorList() {
496
486
  if (!!this.errorList.length) {
@@ -517,9 +507,9 @@ export class Uploader {
517
507
  renderFile(item) {
518
508
  const filename = item.type ? `${item.name}.${item.type}` : item.name;
519
509
  const hasSingleFileAction = item.fileActions && item.fileActions.split(" ").length === 1;
520
- const showActionMenu = this.tempUploaderType === "3" && this.isCondensed && !hasSingleFileAction;
521
- const showFileInfo = this.tempUploaderType === "3" && !this.isCondensed;
522
- const showCheckmark = this.tempUploaderType === "3" && item.progress === 100;
510
+ const showActionMenu = !this.tempUploaderType && this.isCondensed && !hasSingleFileAction;
511
+ const showFileInfo = !this.tempUploaderType && !this.isCondensed;
512
+ const showCheckmark = !this.tempUploaderType && item.progress === 100;
523
513
  return (h("li", { class: `${this.isCondensed ? "condensed" : ""} ${showCheckmark ? "checked" : ""}` },
524
514
  h("div", { class: "file --saved" },
525
515
  this.renderFileName(filename, this.isItemUploading(item)),
@@ -547,18 +537,16 @@ export class Uploader {
547
537
  const filenameEl = file.querySelector(".filename");
548
538
  const availableSpace = rightBoundary - leftBoundary;
549
539
  let filename = filenameEl.dataset.filename;
550
- const extension = filename.slice(filename.lastIndexOf("."));
551
- // not including the extension, filename has a minimum length of 8 characters in order to truncate
552
- // 2 characters + at least 3 represented by the ellipses + 3 characters before extension
553
- while (filename.replace(extension, "").length > 8 &&
554
- this.getTextWidth(filename, leftGroup) > availableSpace) {
555
- // remove ellipses for easier extension splitting
556
- filename = filename.replace("...", "");
557
- // lastIndexOf is necessary in case filename includes .s
558
- const preEllipses = filename.slice(0, filename.lastIndexOf(".") - 3);
559
- const postEllipses = filename.slice(filename.lastIndexOf(".") - 3, filename.length);
560
- // chop preExtension, trim both, and reintroduce ellipses
561
- filename = preEllipses.slice(0, -1).trim() + "..." + postEllipses.trim();
540
+ const canFitText = availableSpace > filename.length * this.chMeasure;
541
+ if (!canFitText) {
542
+ const extension = filename.slice(filename.lastIndexOf("."));
543
+ const numFittingCharacters = Math.floor(availableSpace / this.chMeasure);
544
+ // three ellipses, three constant characters, extension
545
+ const postEllipsesLength = 3 + 3 + extension.length;
546
+ let preEllipsesLength = Math.max(2, numFittingCharacters - postEllipsesLength);
547
+ const preEllipsesText = filename.slice(0, preEllipsesLength);
548
+ const postEllipsesText = filename.slice(filename.indexOf(extension) - 3, filename.length);
549
+ filename = `${preEllipsesText.trim()}...${postEllipsesText.trim()}`;
562
550
  }
563
551
  filenameEl.textContent = filename;
564
552
  }
@@ -612,7 +600,7 @@ export class Uploader {
612
600
  }
613
601
  }
614
602
  legacyRenderHeader() {
615
- return (h("div", { class: "header" },
603
+ return (h("div", { class: `header ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` },
616
604
  h("div", { class: "slot-wrapper" },
617
605
  h("slot", null),
618
606
  h("div", { class: "notif-wrapper" },
@@ -620,11 +608,12 @@ export class Uploader {
620
608
  this.renderNotif()))));
621
609
  }
622
610
  renderHeader() {
623
- return (h("div", { class: `header type${this.tempUploaderType}` },
624
- h("div", { class: `notif-wrapper type${this.tempUploaderType}` },
611
+ return (h("div", { class: `header ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` },
612
+ h("div", { class: `notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` },
625
613
  this.renderUploadButton(`-secondary ${this.isDisabled ? "disabled" : ""}`),
626
614
  this.renderRequirements()),
627
- h("div", { id: "accepted-types", class: "accepted-types" }, this.acceptedFileTypesMessage)));
615
+ h("div", { id: "accepted-types", class: "accepted-types" }, this.acceptedFileTypesMessage),
616
+ this.renderNotif()));
628
617
  }
629
618
  renderRequirements() {
630
619
  return (h("div", { class: "requirements" },
@@ -633,7 +622,7 @@ export class Uploader {
633
622
  }
634
623
  renderFooter() {
635
624
  return (h("div", { class: "footer" },
636
- h("div", { class: "notif-wrapper" },
625
+ h("div", { class: `notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` },
637
626
  h("div", { class: "filecount-wrapper" },
638
627
  h("div", { class: "filecount" }, intl.formatMessage({
639
628
  id: "uploader.filesAdded",
@@ -645,7 +634,7 @@ export class Uploader {
645
634
  renderWithItems() {
646
635
  const hasNewlyUploadedFiles = this.fileList.filter((file) => file.progress === 100).length > 0;
647
636
  return (h("div", null,
648
- this.tempUploaderType === "3" && this.renderHeader(),
637
+ !this.tempUploaderType && this.renderHeader(),
649
638
  this.tempUploaderType === "2" && this.legacyRenderHeader(),
650
639
  h("div", { class: `list-container type${this.tempUploaderType} ${hasNewlyUploadedFiles ? "checkmark-spacer" : ""}` },
651
640
  this.renderErrorList(),
@@ -671,37 +660,35 @@ export class Uploader {
671
660
  "type": "string",
672
661
  "mutable": true,
673
662
  "complexType": {
674
- "original": "\"1\" | \"2\" | \"3\" | null",
675
- "resolved": "\"1\" | \"2\" | \"3\" | null",
663
+ "original": "\"1\" | \"2\"",
664
+ "resolved": "\"1\" | \"2\" | undefined",
676
665
  "references": {}
677
666
  },
678
667
  "required": false,
679
- "optional": false,
668
+ "optional": true,
680
669
  "docs": {
681
670
  "tags": [],
682
671
  "text": ""
683
672
  },
684
673
  "attribute": "uploader-type",
685
- "reflect": false,
686
- "defaultValue": "null"
674
+ "reflect": false
687
675
  },
688
676
  "type": {
689
677
  "type": "string",
690
678
  "mutable": false,
691
679
  "complexType": {
692
- "original": "\"1\" | \"2\" | null",
693
- "resolved": "\"1\" | \"2\" | null",
680
+ "original": "\"1\" | \"2\"",
681
+ "resolved": "\"1\" | \"2\" | undefined",
694
682
  "references": {}
695
683
  },
696
684
  "required": false,
697
- "optional": false,
685
+ "optional": true,
698
686
  "docs": {
699
687
  "tags": [],
700
688
  "text": ""
701
689
  },
702
690
  "attribute": "type",
703
- "reflect": false,
704
- "defaultValue": "null"
691
+ "reflect": false
705
692
  },
706
693
  "buttonText": {
707
694
  "type": "string",
package/dist/esm/{global-61cf5e64.js → global-6aa5b97b.js} RENAMED
@@ -1,4 +1,4 @@
1
- const version = "3.11.0-1";
1
+ const version = "3.11.0-4";
2
2
 
3
3
  // PRINT RIPPLE VERSION IN CONSOLE
4
4
  // test envs return 0 for plugin.length
package/dist/esm/loader.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as promiseResolve, b as bootstrapLazy } from './index-7603f98e.js';
2
- import './global-61cf5e64.js';
2
+ import './global-6aa5b97b.js';
3
3
 
4
4
  /*
5
5
  Stencil Client Patch Esm v2.14.0 | MIT Licensed | https://stenciljs.com
package/dist/esm/ripple.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as promiseResolve, b as bootstrapLazy } from './index-7603f98e.js';
2
- import './global-61cf5e64.js';
2
+ import './global-6aa5b97b.js';
3
3
 
4
4
  /*
5
5
  Stencil Client Patch Browser v2.14.0 | MIT Licensed | https://stenciljs.com