@watermarkinsights/ripple 3.13.0 → 3.14.0

package/dist/esm/wm-uploader.entry.js

@@ -1,638 +1,636 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-7603f98e.js';
-import { g as generateId, d as debounce, i as intl, p as hasValidType } from './functions-036af8dc.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-17c79cc6.js';
+import { g as generateId, d as debounce, i as intl, p as hasValidType } from './functions-11c0c4e2.js';
 
 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}.notif.error{color:#c0392b}.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:unset}.list-container.checkmark-spacer{margin-right:2.75rem}.list-container.type1,.list-container.type2{overflow-y:auto}.list-container.type1 ul,.list-container.type2 ul{margin:revert}.list-container.type1 .file-list li,.list-container.type1 .inprogress-list li,.list-container.type2 .file-list li,.list-container.type2 .inprogress-list li{margin-bottom:1.625rem}.list-container.type1 .error-list li,.list-container.type2 .error-list li{margin-bottom:1.25rem}.list-container.type1{padding:0 1.875rem;height:16.25rem}ul{list-style:none;padding:0;width:100%;margin:0}ul li{position:relative;font-size:0.875rem;margin-bottom:0.5rem}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{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:0.5rem}ul.error-list li .file{border:1px solid #c0392b;background-color:#f5ebea;height:3.75rem}ul.error-list li .error-message{color:#c0392b;padding-top:0.25rem;font-style:italic}.ch-measure{width:1ch !important}";
 
-let Uploader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmUploaderFilesSelected = createEvent(this, "wmUploaderFilesSelected", 7);
-    this.wmFilesSelected = createEvent(this, "wmFilesSelected", 7);
-    this.wmUploaderDeleteFile = createEvent(this, "wmUploaderDeleteFile", 7);
-    this.wmDeleteFile = createEvent(this, "wmDeleteFile", 7);
-    this.wmUploaderDownloadFile = createEvent(this, "wmUploaderDownloadFile", 7);
-    this.wmDownloadFile = createEvent(this, "wmDownloadFile", 7);
-    this.wmUploaderPreviewFile = createEvent(this, "wmUploaderPreviewFile", 7);
-    this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
-    this.defaultMaxSize = 100;
-    this.maxSize = this.defaultMaxSize; // in Mb
-    this.sortBy = "date"; // name is descending (a -> z), date is ascending (earlier -> later)
-    this.showInfo = "time";
-    this.fileList = []; // the string above transformed into the actual array
-    this.filesToUpload = []; // input.files that passed validation
-    this.isTabbing = false;
-    this.errorList = []; // for errors on a particular file
-    this.isCondensed = false;
-    this.inputId = generateId();
-    this.debouncedResize = debounce(() => {
-      this.isCondensed = this.el.clientWidth < 500;
-      // rerender to show filename truncation changes
-      forceUpdate(this.el);
-    }, 50);
-  }
-  get tooltipEl() {
-    return document.getElementById("wm-tooltip");
-  }
-  get uploadButtonEl() {
-    return this.el.shadowRoot.querySelector(`#${this.inputId}`);
-  }
-  get tempUploaderType() {
-    // replace instances of this.tempUploaderType with this.uploaderType once type is fully phased out
-    return this.type || this.uploaderType;
-  }
-  get chMeasure() {
-    return this.el.shadowRoot.querySelector(".ch-measure").clientWidth;
-  }
-  get fileLimitReached() {
-    return this.maxFiles && this.fileList.length >= this.maxFiles;
-  }
-  get fileUploadLimitMessage() {
-    return intl.formatMessage({
-      id: "uploader.fileUploadLimit",
-      defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
-      description: "Message displayed when trying to upload too many files",
-    });
-  }
-  get fileCountMessage() {
-    return intl.formatMessage({
-      id: "uploader.fileCount",
-      defaultMessage: "{x} of {y} Files",
-      description: "A count of the number of files currently uploaded",
-    }, { x: this.fileList.length, y: this.maxFiles });
-  }
-  get maxSizeMessage() {
-    return intl.formatMessage({
-      id: "uploader.maxSize",
-      defaultMessage: "Maximum file size {maxSize}MB",
-      description: "An indicator of the maximum file size the uploader allows",
-    }, {
-      maxSize: this.maxSize,
-    });
-  }
-  get acceptedFileTypesMessage() {
-    const validTypes = "." + this.fileTypes.split(" ").join(", .");
-    return intl.formatMessage({
-      id: "uploader.acceptedFileTypes",
-      defaultMessage: "Accepted file {amount, plural, =1 {type} other {types}}: {fileTypes}",
-    }, {
-      fileTypes: validTypes,
-      amount: this.fileTypes.split(" ").length,
-    });
-  }
-  get previewActionMessage() {
-    return intl.formatMessage({
-      id: "uploader.previewAction",
-      defaultMessage: "Preview File",
-      description: "Label of a button that triggers a file to be previewed",
-    });
-  }
-  get downloadActionMessage() {
-    return intl.formatMessage({
-      id: "uploader.downloadAction",
-      defaultMessage: "Download File",
-      description: "Label of a button that triggers a file to be downloaded",
-    });
-  }
-  get deleteActionMessage() {
-    return intl.formatMessage({
-      id: "uploader.deleteAction",
-      defaultMessage: "Delete File",
-      description: "Label of a button that triggers a file to be delete",
-    });
-  }
-  get clearButtonText() {
-    return intl.formatMessage({
-      id: "uploader.clearErrorText",
-      defaultMessage: "Clear",
-      description: "Text for a button used to clear an error",
-    });
-  }
-  get actionMenuLabel() {
-    return intl.formatMessage({
-      id: "uploader.actionMenuLabel",
-      defaultMessage: "Actions",
-      description: "Label of a button that opens a menu of file actions",
-    });
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleUploadProgress(ev) {
-    this.fileList.map((i) => {
-      if (i.id === ev.detail.id) {
-        i.progress = ev.detail.progress;
-        forceUpdate(this.el);
-      }
-    });
-    if (ev.detail.progress === 100) {
-      // inProgressList is not a perfect reflection of how many files are uploading
-      // because even after progress reached 100% the item should remain in the array
-      // (should only be removed once it appears in fileList)
-      this.numFilesInProgress -= 1;
-    }
-    // aggregate the percentages for SR to announce progress
-    if (!this.srProgress && this.numFilesInProgress) {
-      const total = this.numFilesInProgress; // if we don't reassign this number changes when a file is done and the percentage becomes wrong
-      this.srProgress = setInterval(() => {
-        const aggregate = this.fileList.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
-        if (this.liveRegion) {
-          this.liveRegion.innerHTML = intl.formatMessage({
-            id: "uploader.uploadProgress",
-            defaultMessage: "Upload progress: {percentage}%",
-          }, { percentage: Math.floor(aggregate / total) });
-        }
-      }, 5000);
-    }
-  }
-  parseFiles() {
-    if (!!this.files) {
-      if (typeof this.files === "string") {
-        const list = JSON.parse(this.files);
-        if (typeof list === "object") {
-          this.fileList = list;
-        }
-        else {
-          throw new Error("could not parse string passed to files attribute");
-        }
-      }
-      else {
-        throw new Error("Attribute 'files' should be a string");
-      }
-    }
-  }
-  parseRejectedFiles() {
-    if (!!this.rejectedFiles) {
-      if (typeof this.files === "string") {
-        const list = JSON.parse(this.rejectedFiles);
-        if (typeof list === "object") {
-          this.errorList = list;
-        }
-        else {
-          throw new Error("could not parse string passed to errors attribute");
-        }
-      }
-      else {
-        throw new Error("Attribute 'rejected-files' should be a string");
-      }
-    }
-  }
-  setMaxSize() {
-    // Max size can't be set above 100Mb
-    this.maxSize = this.maxSize > this.defaultMaxSize ? this.defaultMaxSize : this.maxSize;
-  }
-  uploadNotifications(newNum, oldNum) {
-    if (oldNum > 0 && newNum === 0) {
-      setTimeout(() => {
-        this.notif = null;
-      }, 20 * 1000);
-      const message = intl.formatMessage({
-        id: "uploader.finishedUploading",
-        defaultMessage: "Finished uploading",
-      });
-      this.notif = { id: 5, message, isError: false };
-      if (this.liveRegion) {
-        this.liveRegion.innerHTML = message;
-      }
-      this.numFilesInProgress = null;
-      clearInterval(this.srProgress);
-      forceUpdate(this.el);
-    }
-    else if (newNum > 0 && newNum != oldNum) {
-      const message = intl.formatMessage({
-        id: "uploader.filesUploading",
-        defaultMessage: "{num, plural, one {1 file uploading} other {# files uploading}}",
-      }, { num: newNum });
-      this.notif = { id: 6, message, isError: false };
-      if (this.liveRegion) {
-        this.liveRegion.innerHTML = message;
-      }
-      forceUpdate(this.el);
-    }
-  }
-  isValidSize(size) {
-    return this.convertBytes(size, "MB").size <= this.maxSize;
-  }
-  convertBytes(bytes, unit) {
-    // https://stackoverflow.com/questions/2365100/converting-bytes-to-megabytes
-    const unitOrder = ["bytes", "KB", "MB", "GB", "TB"];
-    let unitIndex = 0;
-    let result = typeof bytes === "number" ? bytes : parseInt(bytes);
-    if (unit) {
-      // convert until result matches desired unit
-      while (unitOrder.indexOf(unit) > unitIndex) {
-        result /= 1024;
-        unitIndex++;
-      }
-    }
-    else {
-      // convert until result is appropriate unit (value is under 1000)
-      while (result > 1000) {
-        result /= 1024;
-        unitIndex++;
-      }
-    }
-    return { size: result, unit: unitOrder[unitIndex] };
-  }
-  isDuplicate(name) {
-    return this.fileList.find((f) => {
-      const filename = f.type ? f.name + "." + f.type : f.name;
-      return filename === name;
-    });
-  }
-  isEmpty() {
-    return !this.fileList.length && !this.errorList.length;
-  }
-  get isDisabled() {
-    if (!this.notif) {
-      if (this.fileLimitReached) {
-        const errMessage = this.fileUploadLimitMessage;
-        this.notif = { id: 1, message: errMessage, isError: true };
-        if (this.liveRegion) {
-          this.liveRegion.innerHTML = errMessage;
-        }
-      }
-      else {
-        this.notif = null;
-      }
-    }
-    else if (this.notif.id === 1) {
-      // to make sure SR don't repeat the error, don't reset it if it already is showing
-      // just dismiss it if isMax is not true anymore
-      if (!this.fileLimitReached) {
-        this.notif = null;
-      }
-      // finally do nothing if error 2 is showing (special case when user selects too many files)
-    }
-    // disable if is the uploader is maxed out or if something is uploading
-    return this.fileLimitReached || this.numFilesInProgress > 0;
-  }
-  isItemUploading(item) {
-    return item.hasOwnProperty("progress") && item.progress < 100;
-  }
-  clearError(filename) {
-    this.errorList = this.errorList.filter((error) => error.name != filename);
-    this.notif = null;
-  }
-  clearErrors() {
-    this.errorList = [];
-    this.notif = null;
-  }
-  handleFiles(ev) {
-    this.filesToUpload = [];
-    const validTypes = this.fileTypes.split(" ").join(", ");
-    const files = Array.from(ev.target.files);
-    if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {
-      const errMessage = intl.formatMessage({
-        id: "uploader.fileUploadExceeded",
-        defaultMessage: "The number of selected files exceeds the limit.",
-      });
-      this.notif = { id: 2, message: errMessage, isError: true };
-      if (this.liveRegion) {
-        this.liveRegion.innerHTML = errMessage;
-      }
-    }
-    else {
-      files &&
-        files.map((file) => {
-          if (!hasValidType(file, this.fileTypes)) {
-            const error = {
-              name: file.name,
-              message: intl.formatMessage({
-                id: "uploader.invalidFileType",
-                defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
-              }, { validTypes }),
-            };
-            this.errorList.push(error);
-          }
-          else if (file.size === 0) {
-            const error = {
-              name: file.name,
-              message: intl.formatMessage({
-                id: "uploader.zeroFileSize",
-                defaultMessage: "The file must be more than 0 bytes",
-                description: "Error message when user attempts to upload a file of no size",
-              }),
-            };
-            this.errorList.push(error);
-          }
-          else if (!this.isValidSize(file.size)) {
-            const error = {
-              name: file.name,
-              message: intl.formatMessage({
-                id: "uploader.fileTooLarge",
-                defaultMessage: "The selected file is too large. Maximum file size is {size}Mb",
-              }, { size: this.maxSize }),
-            };
-            this.errorList.push(error);
-          }
-          else if (this.isDuplicate(file.name)) {
-            const error = {
-              name: file.name,
-              message: intl.formatMessage({
-                id: "uploader.duplicateName",
-                defaultMessage: "A file with this name already exists.",
-              }),
-            };
-            this.errorList.push(error);
-          }
-          else {
-            this.filesToUpload.push(file);
-          }
-        });
-      if (this.filesToUpload.length > 0) {
-        this.numFilesInProgress = this.filesToUpload.length;
-        this.wmUploaderFilesSelected.emit(this.filesToUpload);
-        this.wmFilesSelected.emit(this.filesToUpload); // deprecated
-      }
-    }
-    ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
-  }
-  previewFile(file) {
-    this.clearErrors();
-    this.wmUploaderPreviewFile.emit(file.id);
-  }
-  downloadFile(file) {
-    this.clearErrors();
-    this.wmUploaderDownloadFile.emit(file.id);
-    this.wmDownloadFile.emit(file.id); // deprecated
-  }
-  deleteFile(file) {
-    this.clearErrors();
-    forceUpdate(this.el); // for the button to stop being disabled if num files become < max-files
-    this.wmUploaderDeleteFile.emit(file.id);
-    this.wmDeleteFile.emit(file.id); // deprecated
-  }
-  componentWillLoad() {
-    if (!this.buttonText) {
-      throw new Error("wm-uploader: button-text is a required prop");
-    }
-    if (this.type) {
-      console.warn("wm-uploader: type has been deprecated as of v3.1.0. Please use uploader-type instead.");
-    }
-    if (this.tempUploaderType === "1" && !this.emptyStateText) {
-      throw new Error("wm-uploader: empty-state-text is a required prop");
-    }
-    // rerender on resize in case layout needs to change
-    const resizeObserver = new ResizeObserver(() => this.debouncedResize());
-    resizeObserver.observe(this.el);
-    this.setMaxSize();
-    this.parseFiles();
-    this.clearErrors();
-    this.parseRejectedFiles();
-  }
-  componentDidLoad() {
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-  }
-  showTooltip(anchorEl, tooltipText) {
-    this.tooltipEl.textContent = tooltipText;
-    this.positionTooltip("bottom", anchorEl, this.tooltipEl);
-    this.tooltipEl.style.transitionDelay = "500ms";
-    this.tooltipEl.style.opacity = "1";
-  }
-  hideTooltip() {
-    this.tooltipEl.style.transitionDelay = "0s";
-    this.tooltipEl.style.opacity = "0";
-  }
-  positionTooltip(tPos, anchorEl, tooltipEl) {
-    const tooltipHeight = tooltipEl.getBoundingClientRect().height;
-    const tooltipWidth = tooltipEl.getBoundingClientRect().width;
-    // to get the center positions, calculate the difference between the button width and the tooltip width
-    const verticalDiff = (anchorEl.getBoundingClientRect().height - tooltipHeight) / 2;
-    const horizontalDiff = (anchorEl.getBoundingClientRect().width - tooltipWidth) / 2;
-    // the naming convention defaults to center in the absence of a value
-    // "top" and "bottom" imply centering horizontally; "right" and "left" imply centering vertically
-    // therefore we first set to center and adjust accordingly
-    let verticalPos = anchorEl.getBoundingClientRect().top + verticalDiff;
-    let horizontalPos = anchorEl.getBoundingClientRect().left + horizontalDiff;
-    if (tPos.includes("top")) {
-      verticalPos = anchorEl.getBoundingClientRect().top - tooltipHeight - 8;
-    }
-    if (tPos.includes("bottom")) {
-      verticalPos = anchorEl.getBoundingClientRect().bottom + 8;
-    }
-    if (tPos.includes("left")) {
-      horizontalPos = anchorEl.getBoundingClientRect().left - tooltipWidth - 8;
-    }
-    if (tPos.includes("right")) {
-      horizontalPos = anchorEl.getBoundingClientRect().right + 8;
-    }
-    // after all positioning has been calculated, if tooltip is off-screen or closer than 24px it is readjusted
-    // this only occurs when the tooltip is overflowing to the left and is positioned top or bottom
-    // (button placed too far left, or screen size under 268px)
-    horizontalPos = Math.max(horizontalPos, 24);
-    tooltipEl.style.top = (verticalPos / 16).toString() + "rem";
-    tooltipEl.style.left = (horizontalPos / 16).toString() + "rem";
-  }
-  uploadButtonOnClick(ev) {
-    if (this.isDisabled) {
-      // this is a temporary fix.
-      // we need the disabled button to be programmatically focusable
-      // to allow return focus after closing the browser file panel
-      // since it's focusable the button should respond when activated
-      // it looks disabled, and announces the reason why the action cannot
-      // be taken when activated.
-      // this is not pretty duplicating a intl message + the logic of isDisabled,
-      // but not worth a bigger refactor since this is only until we get the UX for disabled elements and refactor all interactive els.
-      ev.preventDefault();
-      if (this.liveRegion) {
-        let errMsg = "";
-        if (this.numFilesInProgress > 0) {
-          errMsg = intl.formatMessage({
-            id: "uploader.waitToUpload",
-            defaultMessage: "Please wait for current upload to complete before uploading new files.",
-            description: "Message for screen reader users",
-          });
-        }
-        else if (this.fileLimitReached) {
-          errMsg = this.fileUploadLimitMessage;
-        }
-        if (errMsg) {
-          // clear and set again to re-announce if button is clicked several times
-          // (can't be done inside setTimeout because of scope, hence the promise)
-          this.liveRegion.innerHTML = "";
-          new Promise((resolve) => {
-            setTimeout(() => {
-              resolve("");
-            }, 500);
-          }).then(() => (this.liveRegion.innerHTML = errMsg));
-        }
-      }
-    }
-    else {
-      this.clearErrors();
-    }
-  }
-  renderUploadSvg() {
-    return (h("svg", { class: "upload-file", width: "91", height: "84", viewBox: "0 0 91 84" }, 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" })));
-  }
-  renderIcon() {
-    // mdi attachment icon (paper clip) is horizontal but we want it vertical
-    const rotate = this.icon && this.icon === "f066";
-    return (this.icon && (h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)))));
-  }
-  renderInfo() {
-    return this.info && this.tempUploaderType === "2" ? h("span", { class: "info" }, this.info) : "";
-  }
-  renderNotif() {
-    return this.notif ? h("div", { class: `notif ${this.notif.isError ? "error" : ""}` }, this.notif.message) : "";
-  }
-  renderUploadButton(classes) {
-    return (h("div", { class: "info-wrapper" }, h("input", { name: this.inputId, id: this.inputId, class: "sr-only", "aria-describedby": "file-count max-size accepted-types", type: "file", multiple: true, onClick: (ev) => this.uploadButtonOnClick(ev), onChange: (ev) => this.handleFiles(ev) }), h("label", { htmlFor: this.inputId, class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` }, this.renderIcon(), this.buttonText), this.renderInfo()));
-  }
-  renderEmptyState() {
-    return (h("div", { class: "empty-block" }, this.renderUploadSvg(), h("div", { class: `empty-message` }, this.emptyStateText), this.renderUploadButton("-primary empty-button"), this.renderNotif()));
-  }
-  renderFileName(filename, isUploading) {
-    return (h("div", { class: "left-group" }, h("div", { class: "name-wrapper" }, h("span", { class: "filename", "data-filename": filename, onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev, filename), onMouseLeave: () => this.hideTooltip() }), isUploading && h("span", { class: "sr-only" }, "uploading"), h("div", { class: "sr-only ch-measure" }))));
-  }
-  renderErrorList() {
-    if (!!this.errorList.length) {
-      if (this.liveRegion) {
-        let srMessage = this.errorList.reduce(function (acc, err) {
-          return acc + `${err.name}: ${err.message} `;
-        }, "");
-        this.liveRegion.innerHTML = srMessage;
-      }
-      return (h("ul", { class: "error-list" }, this.errorList.map((err) => {
-        const clearButtonLabel = intl.formatMessage({
-          id: "uploader.clearErrorLabel",
-          defaultMessage: "Clear {fileName} error",
-          description: "Label for a button used to clear an error, including filename",
-        }, { fileName: err.name });
-        return (h("li", null, h("div", { class: "file --error" }, this.renderFileName(err.name, false), h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": clearButtonLabel, onClick: () => {
-            this.clearError(err.name);
-            this.uploadButtonEl.focus();
-          } }, this.clearButtonText)), h("div", { class: "error-message" }, err.message)));
-      })));
-    }
-  }
-  renderFileInProgress(item) {
-    const filename = item.type ? `${item.name}.${item.type}` : item.name;
-    return (h("li", null, h("div", { class: "file --progress" }, h("div", { class: "progress", style: {
-        background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
-      } }), this.renderFileName(filename, this.isItemUploading(item)))));
-  }
-  renderFile(item) {
-    const filename = item.type ? `${item.name}.${item.type}` : item.name;
-    const hasSingleFileAction = item.fileActions && item.fileActions.split(" ").length === 1;
-    const showActionMenu = !this.tempUploaderType && this.isCondensed && !hasSingleFileAction;
-    const showFileInfo = !this.tempUploaderType && !this.isCondensed;
-    // @ts-ignore it's possible progress is passed in as a string, so we need to check for "100" as well
-    const showCheckmark = !this.tempUploaderType && (item.progress === 100 || item.progress === "100");
-    return (h("li", { class: `${this.isCondensed ? "condensed" : ""} ${showCheckmark ? "checked" : ""}` }, h("div", { class: "file --saved" }, this.renderFileName(filename, this.isItemUploading(item)), h("div", { class: "right-group" }, showFileInfo && this.renderFileInfo(item), showActionMenu ? this.renderActionMenu(item) : this.renderFileActions(item)))));
-  }
-  handleFilenameMouseEnter(ev, filename) {
-    // only show tooltip if file name is being truncated (has ellipses)
-    if (ev.target.textContent.includes("...")) {
-      this.showTooltip(ev.target, filename);
-    }
-  }
-  componentDidRender() {
-    const files = this.el.shadowRoot.querySelectorAll(".file");
-    files.forEach((file) => this.truncateFileName(file));
-  }
-  truncateFileName(file) {
-    const leftGroup = file.querySelector(".left-group");
-    const leftBoundary = leftGroup.getBoundingClientRect().left;
-    const rightGroup = file.querySelector(".right-group");
-    const rightBoundary = rightGroup
-      ? rightGroup.getBoundingClientRect().left
-      : file.getBoundingClientRect().right - 20;
-    const filenameEl = file.querySelector(".filename");
-    const availableSpace = rightBoundary - leftBoundary;
-    let filename = filenameEl.dataset.filename;
-    const canFitText = availableSpace > filename.length * this.chMeasure;
-    if (!canFitText) {
-      const extension = filename.slice(filename.lastIndexOf("."));
-      const numFittingCharacters = Math.floor(availableSpace / this.chMeasure);
-      // three ellipses, three constant characters, extension
-      const postEllipsesLength = 3 + 3 + extension.length;
-      let preEllipsesLength = Math.max(2, numFittingCharacters - postEllipsesLength);
-      const preEllipsesText = filename.slice(0, preEllipsesLength);
-      const postEllipsesText = filename.slice(filename.indexOf(extension) - 3, filename.length);
-      filename = `${preEllipsesText.trim()}...${postEllipsesText.trim()}`;
-    }
-    filenameEl.textContent = filename;
-  }
-  renderFileActions(item) {
-    const defaultFileActions = "download delete";
-    const availableActions = item.fileActions || defaultFileActions;
-    const previewButton = (h("wm-button", { class: "preview-button", "button-type": "icononly", tooltip: "Preview", "tooltip-position": "bottom", "label-for-identical-buttons": `preview ${item.name}`, icon: "f208", onClick: () => this.previewFile(item) }));
-    const downloadButton = (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) }));
-    const deleteButton = (h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: "Delete", "tooltip-position": "bottom", "label-for-identical-buttons": `delete ${item.name}`, icon: "f1c0", onClick: () => this.deleteFile(item) }));
-    return (h("div", { class: "file-controls" }, availableActions.includes("preview") && previewButton, availableActions.includes("download") && downloadButton, availableActions.includes("delete") && deleteButton));
-  }
-  renderActionMenu(item) {
-    const defaultFileActions = "download delete";
-    const availableActions = item.fileActions || defaultFileActions;
-    const previewItem = (h("wm-menuitem", { icon: "f208", onClick: () => this.previewFile(item) }, this.previewActionMessage));
-    const downloadItem = (h("wm-menuitem", { icon: "f1da", onClick: () => this.downloadFile(item) }, this.downloadActionMessage));
-    const deleteItem = (h("wm-menuitem", { icon: "f1c0", onClick: () => this.deleteFile(item) }, this.deleteActionMessage));
-    return (h("wm-action-menu", { "action-menu-type": "icon", tooltip: this.actionMenuLabel, "tooltip-position": "bottom", "label-for-identical-buttons": `${item.name} ${this.actionMenuLabel}` }, availableActions.includes("preview") && previewItem, availableActions.includes("download") && downloadItem, availableActions.includes("delete") && deleteItem));
-  }
-  renderFileInfo(item) {
-    let elementToRender = undefined;
-    if (this.showInfo === "time") {
-      const uploadDate = new Date(Date.parse(item.lastUpdated));
-      const day = uploadDate.getDate();
-      const month = uploadDate.getMonth() + 1;
-      const year = uploadDate.getFullYear();
-      const time = uploadDate.toLocaleTimeString("en-us", { hour: "numeric", minute: "2-digit" });
-      const formattedDate = `${month}/${day}/${year} ${time}`;
-      elementToRender = h("div", { class: "file-info" }, formattedDate);
-    }
-    else if (this.showInfo === "size" && item.size) {
-      const convertedSize = this.convertBytes(item.size);
-      elementToRender = h("div", { class: "file-info" }, `${convertedSize.size.toFixed(0)} ${convertedSize.unit}`);
-    }
-    return elementToRender;
-  }
-  renderFileList() {
-    if (this.fileList) {
-      this.sortBy === "name"
-        ? this.fileList.sort((a, b) => a.name.localeCompare(b.name))
-        : this.fileList.sort((a, b) => Date.parse(a.lastUpdated) - Date.parse(b.lastUpdated));
-      return (h("div", null, h("ul", { class: "inprogress-list" }, this.fileList.filter((item) => this.isItemUploading(item)).map((item) => this.renderFileInProgress(item))), h("ul", { class: "file-list" }, this.fileList.filter((item) => !this.isItemUploading(item)).map((item) => this.renderFile(item)))));
-    }
-  }
-  legacyRenderHeader() {
-    return (h("div", { class: `header ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, h("div", { class: "slot-wrapper" }, h("slot", null), h("div", { class: `notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, this.renderUploadButton(`-secondary ${this.isDisabled ? "disabled" : ""}`), this.renderNotif()))));
-  }
-  renderHeader() {
-    return (h("div", { class: `header ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, h("div", { class: `notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, this.renderUploadButton(`-secondary ${this.isDisabled ? "disabled" : ""}`), this.renderRequirements()), h("div", { id: "accepted-types", class: "accepted-types" }, this.acceptedFileTypesMessage), this.renderNotif()));
-  }
-  renderRequirements() {
-    return (h("div", { class: "requirements" }, this.maxFiles && h("span", { id: "file-count" }, this.fileCountMessage), this.maxSize !== this.defaultMaxSize && h("span", { id: "max-size" }, this.maxSizeMessage)));
-  }
-  renderFooter() {
-    return (h("div", { class: "footer" }, h("div", { class: `notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, h("div", { class: "filecount-wrapper" }, h("div", { class: "filecount" }, intl.formatMessage({
-      id: "uploader.filesAdded",
-      defaultMessage: "{numFiles, plural, one {1 file added} other {# files added}}",
-    }, { numFiles: this.fileList.length })), this.renderUploadButton(`-primary ${this.isDisabled ? "disabled" : ""}`)), this.renderNotif())));
-  }
-  renderWithItems() {
-    // it's possible progress is passed in as a string, so we need to check for "100" as well
-    const hasNewlyUploadedFiles = this.fileList.filter((file) => file.progress === (typeof file.progress === "number" ? 100 : "100")).length > 0;
-    return (h("div", null, !this.tempUploaderType && this.renderHeader(), this.tempUploaderType === "2" && this.legacyRenderHeader(), h("div", { class: `list-container type${this.tempUploaderType} ${!this.tempUploaderType && hasNewlyUploadedFiles ? "checkmark-spacer" : ""}` }, this.renderErrorList(), this.renderFileList()), this.tempUploaderType === "1" && this.renderFooter()));
-  }
-  render() {
-    return (h(Host, null, this.isEmpty() && this.tempUploaderType === "1" ? this.renderEmptyState() : this.renderWithItems(), 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
-      ,
-      "aria-atomic": "true" })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "files": ["parseFiles"],
-    "rejectedFiles": ["parseRejectedFiles"],
-    "maxSize": ["setMaxSize"],
-    "numFilesInProgress": ["uploadNotifications"]
-  }; }
-};
+const Uploader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmUploaderFilesSelected = createEvent(this, "wmUploaderFilesSelected", 7);
+    this.wmFilesSelected = createEvent(this, "wmFilesSelected", 7);
+    this.wmUploaderDeleteFile = createEvent(this, "wmUploaderDeleteFile", 7);
+    this.wmDeleteFile = createEvent(this, "wmDeleteFile", 7);
+    this.wmUploaderDownloadFile = createEvent(this, "wmUploaderDownloadFile", 7);
+    this.wmDownloadFile = createEvent(this, "wmDownloadFile", 7);
+    this.wmUploaderPreviewFile = createEvent(this, "wmUploaderPreviewFile", 7);
+    this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
+    this.sortBy = "date"; // name is descending (a -> z), date is ascending (earlier -> later)
+    this.showInfo = "time";
+    this.fileList = []; // the string above transformed into the actual array
+    this.filesToUpload = []; // input.files that passed validation
+    this.isTabbing = false;
+    this.errorList = []; // for errors on a particular file
+    this.isCondensed = false;
+    this.inputId = generateId();
+    this.debouncedResize = debounce(() => {
+      this.isCondensed = this.el.clientWidth < 500;
+      // rerender to show filename truncation changes
+      forceUpdate(this.el);
+    }, 50);
+  }
+  get tooltipEl() {
+    return document.getElementById("wm-tooltip");
+  }
+  get uploadButtonEl() {
+    return this.el.shadowRoot.querySelector(`#${this.inputId}`);
+  }
+  get tempUploaderType() {
+    // replace instances of this.tempUploaderType with this.uploaderType once type is fully phased out
+    return this.type || this.uploaderType;
+  }
+  get effectiveMaxSize() {
+    const defaultMaxSize = 100;
+    // maxsize cannot be set to over 100Mb
+    const maxSizeLimit = 100;
+    return this.maxSize ? Math.min(this.maxSize, maxSizeLimit) : defaultMaxSize;
+  }
+  get chMeasure() {
+    return this.el.shadowRoot.querySelector(".ch-measure").clientWidth;
+  }
+  get fileLimitReached() {
+    return this.maxFiles && this.fileList.length >= this.maxFiles;
+  }
+  get fileUploadLimitMessage() {
+    return intl.formatMessage({
+      id: "uploader.fileUploadLimit",
+      defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
+      description: "Message displayed when trying to upload too many files",
+    });
+  }
+  get fileCountMessage() {
+    return intl.formatMessage({
+      id: "uploader.fileCount",
+      defaultMessage: "{x} of {y} Files",
+      description: "A count of the number of files currently uploaded",
+    }, { x: this.fileList.length, y: this.maxFiles });
+  }
+  get maxSizeMessage() {
+    return intl.formatMessage({
+      id: "uploader.maxSize",
+      defaultMessage: "Maximum file size {maxSize}MB",
+      description: "An indicator of the maximum file size the uploader allows",
+    }, {
+      maxSize: this.effectiveMaxSize,
+    });
+  }
+  get acceptedFileTypesMessage() {
+    const validTypes = "." + this.fileTypes.split(" ").join(", .");
+    return intl.formatMessage({
+      id: "uploader.acceptedFileTypes",
+      defaultMessage: "Accepted file {amount, plural, =1 {type} other {types}}: {fileTypes}",
+    }, {
+      fileTypes: validTypes,
+      amount: this.fileTypes.split(" ").length,
+    });
+  }
+  get previewActionMessage() {
+    return intl.formatMessage({
+      id: "uploader.previewAction",
+      defaultMessage: "Preview File",
+      description: "Label of a button that triggers a file to be previewed",
+    });
+  }
+  get downloadActionMessage() {
+    return intl.formatMessage({
+      id: "uploader.downloadAction",
+      defaultMessage: "Download File",
+      description: "Label of a button that triggers a file to be downloaded",
+    });
+  }
+  get deleteActionMessage() {
+    return intl.formatMessage({
+      id: "uploader.deleteAction",
+      defaultMessage: "Delete File",
+      description: "Label of a button that triggers a file to be delete",
+    });
+  }
+  get clearButtonText() {
+    return intl.formatMessage({
+      id: "uploader.clearErrorText",
+      defaultMessage: "Clear",
+      description: "Text for a button used to clear an error",
+    });
+  }
+  get actionMenuLabel() {
+    return intl.formatMessage({
+      id: "uploader.actionMenuLabel",
+      defaultMessage: "Actions",
+      description: "Label of a button that opens a menu of file actions",
+    });
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleUploadProgress(ev) {
+    this.fileList.map((i) => {
+      if (i.id === ev.detail.id) {
+        i.progress = ev.detail.progress;
+        forceUpdate(this.el);
+      }
+    });
+    if (ev.detail.progress === 100) {
+      // inProgressList is not a perfect reflection of how many files are uploading
+      // because even after progress reached 100% the item should remain in the array
+      // (should only be removed once it appears in fileList)
+      this.numFilesInProgress -= 1;
+    }
+    // aggregate the percentages for SR to announce progress
+    if (!this.srProgress && this.numFilesInProgress) {
+      const total = this.numFilesInProgress; // if we don't reassign this number changes when a file is done and the percentage becomes wrong
+      this.srProgress = setInterval(() => {
+        const aggregate = this.fileList.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
+        if (this.liveRegion) {
+          this.liveRegion.innerHTML = intl.formatMessage({
+            id: "uploader.uploadProgress",
+            defaultMessage: "Upload progress: {percentage}%",
+          }, { percentage: Math.floor(aggregate / total) });
+        }
+      }, 5000);
+    }
+  }
+  parseFiles() {
+    if (!!this.files) {
+      if (typeof this.files === "string") {
+        const list = JSON.parse(this.files);
+        if (typeof list === "object") {
+          this.fileList = list;
+        }
+        else {
+          throw new Error("could not parse string passed to files attribute");
+        }
+      }
+      else {
+        throw new Error("Attribute 'files' should be a string");
+      }
+    }
+  }
+  parseRejectedFiles() {
+    if (!!this.rejectedFiles) {
+      if (typeof this.files === "string") {
+        const list = JSON.parse(this.rejectedFiles);
+        if (typeof list === "object") {
+          this.errorList = list;
+        }
+        else {
+          throw new Error("could not parse string passed to errors attribute");
+        }
+      }
+      else {
+        throw new Error("Attribute 'rejected-files' should be a string");
+      }
+    }
+  }
+  uploadNotifications(newNum, oldNum) {
+    if (oldNum > 0 && newNum === 0) {
+      setTimeout(() => {
+        this.notif = null;
+      }, 20 * 1000);
+      const message = intl.formatMessage({
+        id: "uploader.finishedUploading",
+        defaultMessage: "Finished uploading",
+      });
+      this.notif = { id: 5, message, isError: false };
+      if (this.liveRegion) {
+        this.liveRegion.innerHTML = message;
+      }
+      this.numFilesInProgress = null;
+      clearInterval(this.srProgress);
+      forceUpdate(this.el);
+    }
+    else if (newNum > 0 && newNum != oldNum) {
+      const message = intl.formatMessage({
+        id: "uploader.filesUploading",
+        defaultMessage: "{num, plural, one {1 file uploading} other {# files uploading}}",
+      }, { num: newNum });
+      this.notif = { id: 6, message, isError: false };
+      if (this.liveRegion) {
+        this.liveRegion.innerHTML = message;
+      }
+      forceUpdate(this.el);
+    }
+  }
+  isValidSize(size) {
+    return this.convertBytes(size, "MB").size <= this.effectiveMaxSize;
+  }
+  convertBytes(bytes, unit) {
+    // https://stackoverflow.com/questions/2365100/converting-bytes-to-megabytes
+    const unitOrder = ["bytes", "KB", "MB", "GB", "TB"];
+    let unitIndex = 0;
+    let result = typeof bytes === "number" ? bytes : parseInt(bytes);
+    if (unit) {
+      // convert until result matches desired unit
+      while (unitOrder.indexOf(unit) > unitIndex) {
+        result /= 1024;
+        unitIndex++;
+      }
+    }
+    else {
+      // convert until result is appropriate unit (value is under 1000)
+      while (result > 1000) {
+        result /= 1024;
+        unitIndex++;
+      }
+    }
+    return { size: result, unit: unitOrder[unitIndex] };
+  }
+  isDuplicate(name) {
+    return this.fileList.find((f) => {
+      const filename = f.type ? f.name + "." + f.type : f.name;
+      return filename === name;
+    });
+  }
+  isEmpty() {
+    return !this.fileList.length && !this.errorList.length;
+  }
+  get isDisabled() {
+    if (!this.notif) {
+      if (this.fileLimitReached) {
+        const errMessage = this.fileUploadLimitMessage;
+        this.notif = { id: 1, message: errMessage, isError: true };
+        if (this.liveRegion) {
+          this.liveRegion.innerHTML = errMessage;
+        }
+      }
+      else {
+        this.notif = null;
+      }
+    }
+    else if (this.notif.id === 1) {
+      // to make sure SR don't repeat the error, don't reset it if it already is showing
+      // just dismiss it if isMax is not true anymore
+      if (!this.fileLimitReached) {
+        this.notif = null;
+      }
+      // finally do nothing if error 2 is showing (special case when user selects too many files)
+    }
+    // disable if is the uploader is maxed out or if something is uploading
+    return this.fileLimitReached || this.numFilesInProgress > 0;
+  }
+  isItemUploading(item) {
+    return item.hasOwnProperty("progress") && item.progress < 100;
+  }
+  clearError(filename) {
+    this.errorList = this.errorList.filter((error) => error.name != filename);
+    this.notif = null;
+  }
+  clearErrors() {
+    this.errorList = [];
+    this.notif = null;
+  }
+  handleFiles(ev) {
+    this.filesToUpload = [];
+    const validTypes = this.fileTypes.split(" ").join(", ");
+    const files = Array.from(ev.target.files);
+    if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {
+      const errMessage = intl.formatMessage({
+        id: "uploader.fileUploadExceeded",
+        defaultMessage: "The number of selected files exceeds the limit.",
+      });
+      this.notif = { id: 2, message: errMessage, isError: true };
+      if (this.liveRegion) {
+        this.liveRegion.innerHTML = errMessage;
+      }
+    }
+    else {
+      files &&
+        files.map((file) => {
+          if (!hasValidType(file, this.fileTypes)) {
+            const error = {
+              name: file.name,
+              message: intl.formatMessage({
+                id: "uploader.invalidFileType",
+                defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
+              }, { validTypes }),
+            };
+            this.errorList.push(error);
+          }
+          else if (file.size === 0) {
+            const error = {
+              name: file.name,
+              message: intl.formatMessage({
+                id: "uploader.zeroFileSize",
+                defaultMessage: "The file must be more than 0 bytes",
+                description: "Error message when user attempts to upload a file of no size",
+              }),
+            };
+            this.errorList.push(error);
+          }
+          else if (!this.isValidSize(file.size)) {
+            const error = {
+              name: file.name,
+              message: intl.formatMessage({
+                id: "uploader.fileTooLarge",
+                defaultMessage: "The selected file is too large. Maximum file size is {size}Mb",
+              }, { size: this.effectiveMaxSize }),
+            };
+            this.errorList.push(error);
+          }
+          else if (this.isDuplicate(file.name)) {
+            const error = {
+              name: file.name,
+              message: intl.formatMessage({
+                id: "uploader.duplicateName",
+                defaultMessage: "A file with this name already exists.",
+              }),
+            };
+            this.errorList.push(error);
+          }
+          else {
+            this.filesToUpload.push(file);
+          }
+        });
+      if (this.filesToUpload.length > 0) {
+        this.numFilesInProgress = this.filesToUpload.length;
+        this.wmUploaderFilesSelected.emit(this.filesToUpload);
+        this.wmFilesSelected.emit(this.filesToUpload); // deprecated
+      }
+    }
+    ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
+  }
+  previewFile(file) {
+    this.clearErrors();
+    this.wmUploaderPreviewFile.emit(file.id);
+  }
+  downloadFile(file) {
+    this.clearErrors();
+    this.wmUploaderDownloadFile.emit(file.id);
+    this.wmDownloadFile.emit(file.id); // deprecated
+  }
+  deleteFile(file) {
+    this.clearErrors();
+    forceUpdate(this.el); // for the button to stop being disabled if num files become < max-files
+    this.wmUploaderDeleteFile.emit(file.id);
+    this.wmDeleteFile.emit(file.id); // deprecated
+  }
+  componentWillLoad() {
+    if (!this.buttonText) {
+      throw new Error("wm-uploader: button-text is a required prop");
+    }
+    if (this.type) {
+      console.warn("wm-uploader: type has been deprecated as of v3.1.0. Please use uploader-type instead.");
+    }
+    if (this.tempUploaderType === "1" && !this.emptyStateText) {
+      throw new Error("wm-uploader: empty-state-text is a required prop");
+    }
+    // rerender on resize in case layout needs to change
+    const resizeObserver = new ResizeObserver(() => this.debouncedResize());
+    resizeObserver.observe(this.el);
+    this.parseFiles();
+    this.clearErrors();
+    this.parseRejectedFiles();
+  }
+  componentDidLoad() {
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+  }
+  showTooltip(anchorEl, tooltipText) {
+    this.tooltipEl.textContent = tooltipText;
+    this.positionTooltip("bottom", anchorEl, this.tooltipEl);
+    this.tooltipEl.style.transitionDelay = "500ms";
+    this.tooltipEl.style.opacity = "1";
+  }
+  hideTooltip() {
+    this.tooltipEl.style.transitionDelay = "0s";
+    this.tooltipEl.style.opacity = "0";
+  }
+  positionTooltip(tPos, anchorEl, tooltipEl) {
+    const tooltipHeight = tooltipEl.getBoundingClientRect().height;
+    const tooltipWidth = tooltipEl.getBoundingClientRect().width;
+    // to get the center positions, calculate the difference between the button width and the tooltip width
+    const verticalDiff = (anchorEl.getBoundingClientRect().height - tooltipHeight) / 2;
+    const horizontalDiff = (anchorEl.getBoundingClientRect().width - tooltipWidth) / 2;
+    // the naming convention defaults to center in the absence of a value
+    // "top" and "bottom" imply centering horizontally; "right" and "left" imply centering vertically
+    // therefore we first set to center and adjust accordingly
+    let verticalPos = anchorEl.getBoundingClientRect().top + verticalDiff;
+    let horizontalPos = anchorEl.getBoundingClientRect().left + horizontalDiff;
+    if (tPos.includes("top")) {
+      verticalPos = anchorEl.getBoundingClientRect().top - tooltipHeight - 8;
+    }
+    if (tPos.includes("bottom")) {
+      verticalPos = anchorEl.getBoundingClientRect().bottom + 8;
+    }
+    if (tPos.includes("left")) {
+      horizontalPos = anchorEl.getBoundingClientRect().left - tooltipWidth - 8;
+    }
+    if (tPos.includes("right")) {
+      horizontalPos = anchorEl.getBoundingClientRect().right + 8;
+    }
+    // after all positioning has been calculated, if tooltip is off-screen or closer than 24px it is readjusted
+    // this only occurs when the tooltip is overflowing to the left and is positioned top or bottom
+    // (button placed too far left, or screen size under 268px)
+    horizontalPos = Math.max(horizontalPos, 24);
+    tooltipEl.style.top = (verticalPos / 16).toString() + "rem";
+    tooltipEl.style.left = (horizontalPos / 16).toString() + "rem";
+  }
+  uploadButtonOnClick(ev) {
+    if (this.isDisabled) {
+      // this is a temporary fix.
+      // we need the disabled button to be programmatically focusable
+      // to allow return focus after closing the browser file panel
+      // since it's focusable the button should respond when activated
+      // it looks disabled, and announces the reason why the action cannot
+      // be taken when activated.
+      // this is not pretty duplicating a intl message + the logic of isDisabled,
+      // but not worth a bigger refactor since this is only until we get the UX for disabled elements and refactor all interactive els.
+      ev.preventDefault();
+      if (this.liveRegion) {
+        let errMsg = "";
+        if (this.numFilesInProgress > 0) {
+          errMsg = intl.formatMessage({
+            id: "uploader.waitToUpload",
+            defaultMessage: "Please wait for current upload to complete before uploading new files.",
+            description: "Message for screen reader users",
+          });
+        }
+        else if (this.fileLimitReached) {
+          errMsg = this.fileUploadLimitMessage;
+        }
+        if (errMsg) {
+          // clear and set again to re-announce if button is clicked several times
+          // (can't be done inside setTimeout because of scope, hence the promise)
+          this.liveRegion.innerHTML = "";
+          new Promise((resolve) => {
+            setTimeout(() => {
+              resolve("");
+            }, 500);
+          }).then(() => (this.liveRegion.innerHTML = errMsg));
+        }
+      }
+    }
+    else {
+      this.clearErrors();
+    }
+  }
+  renderUploadSvg() {
+    return (h("svg", { class: "upload-file", width: "91", height: "84", viewBox: "0 0 91 84" }, 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" })));
+  }
+  renderIcon() {
+    // mdi attachment icon (paper clip) is horizontal but we want it vertical
+    const rotate = this.icon && this.icon === "f066";
+    return (this.icon && (h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)))));
+  }
+  renderInfo() {
+    return this.info && this.tempUploaderType === "2" ? h("span", { class: "info" }, this.info) : "";
+  }
+  renderNotif() {
+    return this.notif ? h("div", { class: `notif ${this.notif.isError ? "error" : ""}` }, this.notif.message) : "";
+  }
+  renderUploadButton(classes) {
+    return (h("div", { class: "info-wrapper" }, h("input", { name: this.inputId, id: this.inputId, class: "sr-only", "aria-describedby": "file-count max-size accepted-types", type: "file", multiple: true, onClick: (ev) => this.uploadButtonOnClick(ev), onChange: (ev) => this.handleFiles(ev) }), h("label", { htmlFor: this.inputId, class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` }, this.renderIcon(), this.buttonText), this.renderInfo()));
+  }
+  renderEmptyState() {
+    return (h("div", { class: "empty-block" }, this.renderUploadSvg(), h("div", { class: `empty-message` }, this.emptyStateText), this.renderUploadButton("-primary empty-button"), this.renderNotif()));
+  }
+  renderFileName(filename, isUploading) {
+    return (h("div", { class: "left-group" }, h("div", { class: "name-wrapper" }, h("span", { class: "filename", "data-filename": filename, onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev, filename), onMouseLeave: () => this.hideTooltip() }), isUploading && h("span", { class: "sr-only" }, "uploading"), h("div", { class: "sr-only ch-measure" }))));
+  }
+  renderErrorList() {
+    if (!!this.errorList.length) {
+      if (this.liveRegion) {
+        let srMessage = this.errorList.reduce(function (acc, err) {
+          return acc + `${err.name}: ${err.message} `;
+        }, "");
+        this.liveRegion.innerHTML = srMessage;
+      }
+      return (h("ul", { class: "error-list" }, this.errorList.map((err) => {
+        const clearButtonLabel = intl.formatMessage({
+          id: "uploader.clearErrorLabel",
+          defaultMessage: "Clear {fileName} error",
+          description: "Label for a button used to clear an error, including filename",
+        }, { fileName: err.name });
+        return (h("li", null, h("div", { class: "file --error" }, this.renderFileName(err.name, false), h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": clearButtonLabel, onClick: () => {
+            this.clearError(err.name);
+            this.uploadButtonEl.focus();
+          } }, this.clearButtonText)), h("div", { class: "error-message" }, err.message)));
+      })));
+    }
+  }
+  renderFileInProgress(item) {
+    const filename = item.type ? `${item.name}.${item.type}` : item.name;
+    return (h("li", null, h("div", { class: "file --progress" }, h("div", { class: "progress", style: {
+        background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
+      } }), this.renderFileName(filename, this.isItemUploading(item)))));
+  }
+  renderFile(item) {
+    const filename = item.type ? `${item.name}.${item.type}` : item.name;
+    const hasSingleFileAction = item.fileActions && item.fileActions.split(" ").length === 1;
+    const showActionMenu = !this.tempUploaderType && this.isCondensed && !hasSingleFileAction;
+    const showFileInfo = !this.tempUploaderType && !this.isCondensed;
+    // @ts-ignore it's possible progress is passed in as a string, so we need to check for "100" as well
+    const showCheckmark = !this.tempUploaderType && (item.progress === 100 || item.progress === "100");
+    return (h("li", { class: `${this.isCondensed ? "condensed" : ""} ${showCheckmark ? "checked" : ""}` }, h("div", { class: "file --saved" }, this.renderFileName(filename, this.isItemUploading(item)), h("div", { class: "right-group" }, showFileInfo && this.renderFileInfo(item), showActionMenu ? this.renderActionMenu(item) : this.renderFileActions(item)))));
+  }
+  handleFilenameMouseEnter(ev, filename) {
+    // only show tooltip if file name is being truncated (has ellipses)
+    if (ev.target.textContent.includes("...")) {
+      this.showTooltip(ev.target, filename);
+    }
+  }
+  componentDidRender() {
+    const files = this.el.shadowRoot.querySelectorAll(".file");
+    files.forEach((file) => this.truncateFileName(file));
+  }
+  truncateFileName(file) {
+    const leftGroup = file.querySelector(".left-group");
+    const leftBoundary = leftGroup.getBoundingClientRect().left;
+    const rightGroup = file.querySelector(".right-group");
+    const rightBoundary = rightGroup
+      ? rightGroup.getBoundingClientRect().left
+      : file.getBoundingClientRect().right - 20;
+    const filenameEl = file.querySelector(".filename");
+    const availableSpace = rightBoundary - leftBoundary;
+    let filename = filenameEl.dataset.filename;
+    const canFitText = availableSpace > filename.length * this.chMeasure;
+    if (!canFitText) {
+      const extension = filename.slice(filename.lastIndexOf("."));
+      const numFittingCharacters = Math.floor(availableSpace / this.chMeasure);
+      // three ellipses, three constant characters, extension
+      const postEllipsesLength = 3 + 3 + extension.length;
+      let preEllipsesLength = Math.max(2, numFittingCharacters - postEllipsesLength);
+      const preEllipsesText = filename.slice(0, preEllipsesLength);
+      const postEllipsesText = filename.slice(filename.indexOf(extension) - 3, filename.length);
+      filename = `${preEllipsesText.trim()}...${postEllipsesText.trim()}`;
+    }
+    filenameEl.textContent = filename;
+  }
+  renderFileActions(item) {
+    const defaultFileActions = "download delete";
+    const availableActions = item.fileActions || defaultFileActions;
+    const previewButton = (h("wm-button", { class: "preview-button", "button-type": "icononly", tooltip: "Preview", "tooltip-position": "bottom", "label-for-identical-buttons": `preview ${item.name}`, icon: "f208", onClick: () => this.previewFile(item) }));
+    const downloadButton = (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) }));
+    const deleteButton = (h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: "Delete", "tooltip-position": "bottom", "label-for-identical-buttons": `delete ${item.name}`, icon: "f1c0", onClick: () => this.deleteFile(item) }));
+    return (h("div", { class: "file-controls" }, availableActions.includes("preview") && previewButton, availableActions.includes("download") && downloadButton, availableActions.includes("delete") && deleteButton));
+  }
+  renderActionMenu(item) {
+    const defaultFileActions = "download delete";
+    const availableActions = item.fileActions || defaultFileActions;
+    const previewItem = (h("wm-menuitem", { icon: "f208", onClick: () => this.previewFile(item) }, this.previewActionMessage));
+    const downloadItem = (h("wm-menuitem", { icon: "f1da", onClick: () => this.downloadFile(item) }, this.downloadActionMessage));
+    const deleteItem = (h("wm-menuitem", { icon: "f1c0", onClick: () => this.deleteFile(item) }, this.deleteActionMessage));
+    return (h("wm-action-menu", { "action-menu-type": "icon", tooltip: this.actionMenuLabel, "tooltip-position": "bottom", "label-for-identical-buttons": `${item.name} ${this.actionMenuLabel}` }, availableActions.includes("preview") && previewItem, availableActions.includes("download") && downloadItem, availableActions.includes("delete") && deleteItem));
+  }
+  renderFileInfo(item) {
+    let elementToRender = undefined;
+    if (this.showInfo === "time") {
+      const uploadDate = new Date(Date.parse(item.lastUpdated));
+      const day = uploadDate.getDate();
+      const month = uploadDate.getMonth() + 1;
+      const year = uploadDate.getFullYear();
+      const time = uploadDate.toLocaleTimeString("en-us", { hour: "numeric", minute: "2-digit" });
+      const formattedDate = `${month}/${day}/${year} ${time}`;
+      elementToRender = h("div", { class: "file-info" }, formattedDate);
+    }
+    else if (this.showInfo === "size" && item.size) {
+      const convertedSize = this.convertBytes(item.size);
+      elementToRender = h("div", { class: "file-info" }, `${convertedSize.size.toFixed(0)} ${convertedSize.unit}`);
+    }
+    return elementToRender;
+  }
+  renderFileList() {
+    if (this.fileList) {
+      this.sortBy === "name"
+        ? this.fileList.sort((a, b) => a.name.localeCompare(b.name))
+        : this.fileList.sort((a, b) => Date.parse(a.lastUpdated) - Date.parse(b.lastUpdated));
+      return (h("div", null, h("ul", { class: "inprogress-list" }, this.fileList.filter((item) => this.isItemUploading(item)).map((item) => this.renderFileInProgress(item))), h("ul", { class: "file-list" }, this.fileList.filter((item) => !this.isItemUploading(item)).map((item) => this.renderFile(item)))));
+    }
+  }
+  legacyRenderHeader() {
+    return (h("div", { class: `header ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, h("div", { class: "slot-wrapper" }, h("slot", null), h("div", { class: `notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, this.renderUploadButton(`-secondary ${this.isDisabled ? "disabled" : ""}`), this.renderNotif()))));
+  }
+  renderHeader() {
+    return (h("div", { class: `header ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, h("div", { class: `notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, this.renderUploadButton(`-secondary ${this.isDisabled ? "disabled" : ""}`), this.renderRequirements()), h("div", { id: "accepted-types", class: "accepted-types" }, this.acceptedFileTypesMessage), this.renderNotif()));
+  }
+  renderRequirements() {
+    return (h("div", { class: "requirements" }, this.maxFiles && h("span", { id: "file-count" }, this.fileCountMessage), this.maxSize && h("span", { id: "max-size" }, this.maxSizeMessage)));
+  }
+  renderFooter() {
+    return (h("div", { class: "footer" }, h("div", { class: `notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : ""}` }, h("div", { class: "filecount-wrapper" }, h("div", { class: "filecount" }, intl.formatMessage({
+      id: "uploader.filesAdded",
+      defaultMessage: "{numFiles, plural, one {1 file added} other {# files added}}",
+    }, { numFiles: this.fileList.length })), this.renderUploadButton(`-primary ${this.isDisabled ? "disabled" : ""}`)), this.renderNotif())));
+  }
+  renderWithItems() {
+    // it's possible progress is passed in as a string, so we need to check for "100" as well
+    const hasNewlyUploadedFiles = this.fileList.filter((file) => file.progress === (typeof file.progress === "number" ? 100 : "100")).length > 0;
+    return (h("div", null, !this.tempUploaderType && this.renderHeader(), this.tempUploaderType === "2" && this.legacyRenderHeader(), h("div", { class: `list-container type${this.tempUploaderType} ${!this.tempUploaderType && hasNewlyUploadedFiles ? "checkmark-spacer" : ""}` }, this.renderErrorList(), this.renderFileList()), this.tempUploaderType === "1" && this.renderFooter()));
+  }
+  render() {
+    return (h(Host, null, this.isEmpty() && this.tempUploaderType === "1" ? this.renderEmptyState() : this.renderWithItems(), 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
+      ,
+      "aria-atomic": "true" })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "files": ["parseFiles"],
+    "rejectedFiles": ["parseRejectedFiles"],
+    "numFilesInProgress": ["uploadNotifications"]
+  }; }
+};
 Uploader.style = wmUploaderCss;
 
 export { Uploader as wm_uploader };