@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

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

@@ -0,0 +1,342 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d930307d.js');
+const functions = require('./functions-e3f5ae65.js');
+
+const wmUploaderCss = "@charset \"UTF-8\";:host .wm-button,wm-uploader .wm-button{-ms-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;width:inherit;border:2px solid #575195;color:#575195;font-size:0.75rem;font-weight:700;height:2.75rem;padding:0 1.3333333333em;cursor:pointer;position:relative;background:#fff;display:flex;justify-content:center;align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:0.01875rem;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button,wm-uploader .wm-button{height:3.3333333333em}}:host .wm-button.nowrap,wm-uploader .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus,wm-uploader .wm-button:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner,wm-uploader .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled):not(.-primary):not(.-secondary):not(.-secondary):not(.-selectoronly) .button-text,wm-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled):not(.-primary):not(.-secondary):not(.-secondary):not(.-selectoronly) .button-text{background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled),wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark),wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark){-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner,wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner{border:0}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled),wm-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled){background:transparent;border:2px solid #fff;color:#fff}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover,wm-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark,wm-uploader .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;outline:none}:host .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption),wm-uploader .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption){-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-button:hover,wm-uploader .wm-button:hover{background:#464177;color:#fff}:host .wm-button .mdi,wm-uploader .wm-button .mdi{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button:not(.-icononly):not(.-navigational) .mdi,wm-uploader .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi,wm-uploader .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly),wm-uploader .wm-button.-primary:not(.-textonly){background:#575195;color:#fff}:host .wm-button.-primary:not(.-textonly):not(:focus),wm-uploader .wm-button.-primary:not(.-textonly):not(:focus){-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2)}:host .wm-button.-primary:not(.-textonly):hover,wm-uploader .wm-button.-primary:not(.-textonly):hover{background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover,wm-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-textonly,wm-uploader .wm-button.-textonly{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:inline-block;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1}:host .wm-button.-textonly+.-textonly,wm-uploader .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus,wm-uploader .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner,wm-uploader .wm-button.-textonly::-moz-focus-inner{border:0;outline:none}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text,wm-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text{background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text,wm-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text{background:linear-gradient(90deg, #fff 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.small,wm-uploader .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete),wm-uploader .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline;color:#454077}:host .wm-button.-textonly.-permanentlydelete,wm-uploader .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover,wm-uploader .wm-button.-textonly.-permanentlydelete:hover{text-decoration:underline;color:#c0392b !important}:host .wm-button.-textonly.dark,wm-uploader .wm-button.-textonly.dark{color:#fff}:host .wm-button.-textonly.dark:hover,wm-uploader .wm-button.-textonly.dark:hover{text-decoration:underline;color:#fff !important}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}:host .wm-button.-icononly:not(:focus),wm-uploader .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus),wm-uploader .wm-button.-navigational:not(:focus){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button.-icononly,wm-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly{border-width:1px !important}:host .wm-button.-icononly:before,wm-uploader .wm-button.-icononly:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{border:none !important;background-color:transparent}:host .wm-button.-navigational:not(.dark):not(:disabled),wm-uploader .wm-button.-navigational:not(.dark):not(:disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):hover,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled).selected,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled).selected{background-color:#d7d6d9}:host .wm-button.-navigational:before,wm-uploader .wm-button.-navigational:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-permanentlydelete:not(.-textonly),wm-uploader .wm-button.-permanentlydelete:not(.-textonly){background:#c0392b;border-color:#c0392b;color:#fff}:host .wm-button.-selectoronly,wm-uploader .wm-button.-selectoronly{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:block;background:transparent;border:1px solid #575195;border-radius:3px 3px 3px 3px;height:2.75rem;min-width:11.4375rem;padding:0 1.875rem 0 0.9375rem;line-height:normal;font-family:inherit;color:#575195;font-weight:500;font-size:0.875rem;text-transform:none;letter-spacing:0.01875rem;text-align:left}@media screen and (min-width: 48rem){:host .wm-button.-selectoronly,wm-uploader .wm-button.-selectoronly{height:2.5rem}}:host .wm-button.-selectoronly:before,wm-uploader .wm-button.-selectoronly:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\";position:absolute;right:0.5625rem;top:50%;transform:translateY(-50%);pointer-events:none}:host .wm-button.-selectoronly:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-selectoronly:hover:not(:disabled):not(.disabled){background:transparent;text-decoration:none}:host .wm-button.-selectoronly:active,wm-uploader .wm-button.-selectoronly:active{-ms-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selectoronly::-moz-focus-inner,wm-uploader .wm-button.-selectoronly::-moz-focus-inner{border:0}:host .wm-button.-selectoronly .overflowcontrol,wm-uploader .wm-button.-selectoronly .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button:disabled,wm-uploader .wm-button:disabled,:host .wm-button.disabled,wm-uploader .wm-button.disabled{background:inherit;border-color:#737373;color:#737373;cursor:default;pointer-events:none}:host .wm-button:disabled.dark,wm-uploader .wm-button:disabled.dark,:host .wm-button.disabled.dark,wm-uploader .wm-button.disabled.dark{color:#a6a6a6;border-color:#a6a6a6}:host .wm-button:disabled.-primary,wm-uploader .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-uploader .wm-button:disabled.-permanentlydelete,:host .wm-button.disabled.-primary,wm-uploader .wm-button.disabled.-primary,:host .wm-button.disabled.-permanentlydelete,wm-uploader .wm-button.disabled.-permanentlydelete{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-primary.dark,wm-uploader .wm-button:disabled.-primary.dark,:host .wm-button.disabled.-primary.dark,wm-uploader .wm-button.disabled.-primary.dark{background:#a6a6a6;border-color:#a6a6a6;color:#353b48}:host .wm-button:disabled.-secondary,wm-uploader .wm-button:disabled.-secondary,:host .wm-button.disabled.-secondary,wm-uploader .wm-button.disabled.-secondary{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button:disabled.-selectoronly,wm-uploader .wm-button:disabled.-selectoronly,:host .wm-button.disabled.-selectoronly,wm-uploader .wm-button.disabled.-selectoronly{color:#737373}:host .wm-button:disabled.-textonly,wm-uploader .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly,wm-uploader .wm-button.disabled.-textonly{color:#6b6b6b;background:transparent}:host a.wm-button,wm-uploader a.wm-button,:host label.wm-button,wm-uploader label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host,wm-uploader{width:100%;height:100%;display:block;position:relative}:host[dir=RTL] .mdi,wm-uploader[dir=RTL] .mdi{margin-left:0.3125rem;margin-right:0}:host input:focus+.wm-button.user-is-tabbing,wm-uploader input:focus+.wm-button.user-is-tabbing{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important}:host *,wm-uploader *{box-sizing:border-box}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.header{margin-bottom:1rem}.header .slot-wrapper{display:flex;justify-content:flex-start;align-items:flex-start}.header .info-wrapper{align-items:center}.header .info-wrapper .info{font-size:0.875rem;margin-left:1rem}.footer{display:flex;flex-direction:column;align-items:flex-end;padding:0.9375rem 1.875rem}.footer .notif-wrapper{align-items:flex-end}.footer .filecount-wrapper{display:flex;align-items:center}.footer .filecount-wrapper .filecount{font-size:0.875rem;margin-right:1rem}.notif-wrapper{position:relative;display:flex;flex-direction:column;margin-bottom:1rem}.notif{padding-top:0.25rem;font-size:0.875rem;font-style:italic;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.info-wrapper{position:relative;display:flex}.file-info{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.file-info+.file-controls{flex:none;margin-left:1rem}.empty-block{margin:5rem auto;display:flex;flex-direction:column;align-items:center}.empty-block .upload-file{margin-bottom:1.875rem}.empty-block .empty-message{font-size:0.875rem;margin-bottom:0.4375rem}.empty-block .empty-message.large{font-size:1.5rem}.empty-block .info-wrapper{justify-content:center;width:100%}.empty-block .info-wrapper .wm-button{width:auto}.list-container{overflow-y:auto}.list-container.type1{padding:0 1.875rem;height:16.25rem}ul{list-style:none;padding:0;width:100%}ul li{font-size:0.875rem}ul li .file{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:relative;height:3.75rem;padding:0.5rem 1.25rem;background:#f4f4f4;border:1px solid #6b6b6b;display:flex;justify-content:space-between;align-items:center}ul li .file+.file{margin-top:1.25rem}ul li .file .filename{font-weight:500}ul li .file wm-button+wm-button{margin-left:1rem}ul.file-list .file.--saved,ul.inprogress-list .file{margin-bottom:1.625rem}ul .progress{position:absolute;left:0;top:0;right:0;height:8px}ul.error-list li{margin-bottom:1.25rem;color:#c0392b}ul.error-list li .file{border:1px solid #c0392b;background-color:#f5ebea;height:3.75rem}ul.error-list li .error-message{padding-top:0.25rem;font-style:italic}";
+
+const Uploader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wmFilesSelected = index.createEvent(this, "wmFilesSelected", 7);
+    this.wmDeleteFile = index.createEvent(this, "wmDeleteFile", 7);
+    this.wmDownloadFile = index.createEvent(this, "wmDownloadFile", 7);
+    this.type = "1";
+    this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
+    this.maxSize = 100; // in Mb
+    this.sortBy = "date"; // name is descending (a -> z), date is ascending (earlier -> later)
+    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.inputId = functions.generateId();
+  }
+  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;
+        index.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 = functions.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 > 100 ? 100 : this.maxSize;
+  }
+  uploadNotifications(newNum, oldNum) {
+    if (oldNum > 0 && newNum === 0) {
+      setTimeout(() => {
+        this.notif = null;
+      }, 20 * 1000);
+      const message = functions.intl.formatMessage({
+        id: "uploader.finishedUploading",
+        defaultMessage: "Finished uploading",
+      });
+      this.notif = { id: 5, message };
+      if (this.liveRegion) {
+        this.liveRegion.innerHTML = message;
+      }
+      this.numFilesInProgress = null;
+      clearInterval(this.srProgress);
+      index.forceUpdate(this.el);
+    }
+    else if (newNum > 0 && newNum != oldNum) {
+      const message = functions.intl.formatMessage({
+        id: "uploader.filesUploading",
+        defaultMessage: "{num, plural, one {1 file uploading} other {# files uploading}}",
+      }, { num: newNum });
+      this.notif = { id: 6, message };
+      if (this.liveRegion) {
+        this.liveRegion.innerHTML = message;
+      }
+      index.forceUpdate(this.el);
+    }
+  }
+  isValidSize(size) {
+    // https://stackoverflow.com/questions/2365100/converting-bytes-to-megabytes
+    return size / 1024 / 1024 <= this.maxSize;
+  }
+  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;
+  }
+  isDisabled() {
+    const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;
+    if (!this.notif) {
+      if (isMax) {
+        const errMessage = functions.intl.formatMessage({
+          id: "uploader.fileUploadLimit",
+          defaultMessage: "You have reached the file upload limit.",
+        });
+        this.notif = { id: 1, message: errMessage };
+        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 (!isMax) {
+        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 isMax || this.numFilesInProgress > 0;
+  }
+  isItemUploading(item) {
+    return item.hasOwnProperty("progress") && item.progress < 100;
+  }
+  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 = functions.intl.formatMessage({
+        id: "uploader.fileUploadExceeded",
+        defaultMessage: "The number of selected files exceeds the limit.",
+      });
+      this.notif = { id: 2, message: errMessage };
+      if (this.liveRegion) {
+        this.liveRegion.innerHTML = errMessage;
+      }
+    }
+    else {
+      files &&
+        files.map((file) => {
+          if (!functions.hasValidType(file, this.fileTypes)) {
+            const error = {
+              name: file.name,
+              message: functions.intl.formatMessage({
+                id: "uploader.invalidFileType",
+                defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
+              }, { validTypes }),
+            };
+            this.errorList.push(error);
+          }
+          else if (!this.isValidSize(file.size)) {
+            const error = {
+              name: file.name,
+              message: functions.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: functions.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.wmFilesSelected.emit(this.filesToUpload);
+      }
+    }
+    ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
+  }
+  downloadFile(file) {
+    this.clearErrors();
+    this.wmDownloadFile.emit(file.id);
+  }
+  deleteFile(file) {
+    this.clearErrors();
+    index.forceUpdate(this.el); // for the button to stop being disabled if num files become < max-files
+    this.wmDeleteFile.emit(file.id);
+  }
+  componentWillLoad() {
+    if (!this.buttonText) {
+      throw new Error("wm-uploader: button-text is a required prop");
+    }
+    if (this.type === "1" && !this.emptyStateText) {
+      throw new Error("wm-uploader: empty-state-text is a required prop");
+    }
+    this.setMaxSize();
+    this.parseFiles();
+    this.clearErrors();
+    this.parseRejectedFiles();
+  }
+  componentDidLoad() {
+    // awkward way to handle Edge bug where file input dialog doesn't open on Enter key
+    // first, detect polyfill by checking the class name that it adds to the component
+    // (it's important NOT to execute the code below in normal browsers as it would open the dialog twice)
+    this.el.classList.contains("sc-wm-uploader-h") &&
+      // then add an even listener to force a click event when Enter key is pressed
+      this.inputEl &&
+      this.inputEl.addEventListener("keydown", (ev) => {
+        if (this.inputEl && ev.keyCode === 13) {
+          this.inputEl.click();
+        }
+      });
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+  }
+  renderUploadSvg() {
+    return (index.h("svg", { class: "upload-file", width: "91", height: "84", viewBox: "0 0 91 84" }, index.h("path", { transform: "rotate(-180.000000) translate(-452, -255.5)", fill: "#eae8ec", d: "M361,249.681818 L361,197.318182 C361,194.118182 365.555061,191.5 371.122358,191.5 L391.316463,191.5 L391.286495,200.562515 L369.871211,200.600292 L369.885404,200.622146 L369.886423,246.655947 L443.657038,246.840767 L443.657038,200.622146 L421.683537,200.622146 L421.683537,191.5 L441.978865,191.5 C447.546162,191.5 452,194.118182 452,197.318182 L452,249.681818 C452,252.881818 447.546162,255.5 441.978865,255.5 L371.122358,255.5 C365.504449,255.5 361,252.881818 361,249.681818 Z M391.5,207 L406,221 L420.5,207 L409.625,207 L409.625,172 L402.375,172 L402.375,207 L391.5,207 Z" })));
+  }
+  renderIcon() {
+    // mdi attachment icon (paper clip) is horizontal but we want it vertical
+    const rotate = this.icon && this.icon === "f066";
+    return (this.icon && (index.h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)))));
+  }
+  renderInfo() {
+    return this.info && this.type === "2" ? index.h("span", { class: "info" }, this.info) : "";
+  }
+  renderNotif() {
+    return this.notif ? index.h("div", { class: "notif" }, this.notif.message) : "";
+  }
+  renderUploadButton(classes) {
+    return (index.h("div", { class: "info-wrapper" }, index.h("input", { ref: (el) => (this.inputEl = el), name: this.inputId, id: this.inputId, class: "sr-only", type: "file", multiple: true, onClick: () => this.clearErrors(), onChange: (e) => this.handleFiles(e), disabled: this.isDisabled() }), index.h("label", { htmlFor: this.inputId, class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` }, this.renderIcon(), this.buttonText), this.renderInfo()));
+  }
+  renderEmptyState() {
+    return (index.h("div", { class: "empty-block" }, this.renderUploadSvg(), index.h("div", { class: `empty-message` }, this.emptyStateText), this.renderUploadButton("-primary empty-button"), this.renderNotif()));
+  }
+  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 (index.h("ul", { class: "error-list" }, this.errorList.map((err) => (index.h("li", null, index.h("div", { class: "file --error" }, index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, err.name))), index.h("div", { class: "error-message" }, err.message))))));
+    }
+  }
+  renderFileInProgress(item) {
+    const filename = item.type ? item.name + "." + item.type : item.name;
+    return (index.h("li", null, index.h("div", { class: "file --progress" }, index.h("div", { class: "progress", style: {
+        background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
+      } }), index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, filename, " ", index.h("span", { class: "sr-only" }, "uploading"))))));
+  }
+  renderFile(item) {
+    return (index.h("li", null, index.h("div", { class: "file --saved" }, index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, item.name + "." + item.type)), index.h("div", { class: "file-controls" }, index.h("wm-button", { class: "download-button", "button-style": "icononly", tooltip: "download", "tooltip-position": "bottom", "label-for-identical-buttons": `download ${item.name}`, icon: "f1da", onClick: () => this.downloadFile(item) }), index.h("wm-button", { class: "delete-button", "button-style": "icononly", tooltip: "remove", "tooltip-position": "bottom", "label-for-identical-buttons": `remove ${item.name}`, icon: "f1c0", onClick: () => this.deleteFile(item) })))));
+  }
+  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 (index.h("div", null, index.h("ul", { class: "inprogress-list" }, this.fileList.filter((item) => this.isItemUploading(item)).map((item) => this.renderFileInProgress(item))), index.h("ul", { class: "file-list" }, this.fileList.filter((item) => !this.isItemUploading(item)).map((item) => this.renderFile(item)))));
+    }
+  }
+  renderHeader() {
+    return (this.type === "2" && (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())))));
+  }
+  renderFooter() {
+    return (this.type === "1" && (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({
+      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() {
+    return (index.h("div", null, this.renderHeader(), index.h("div", { class: `list-container type${this.type}` }, this.renderErrorList(), this.renderFileList()), this.renderFooter()));
+  }
+  render() {
+    return (index.h(index.Host, null, this.isEmpty() && this.type === "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
+      ,
+      "aria-atomic": "true" })));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "files": ["parseFiles"],
+    "rejectedFiles": ["parseRejectedFiles"],
+    "maxSize": ["setMaxSize"],
+    "numFilesInProgress": ["uploadNotifications"]
+  }; }
+};
+Uploader.style = wmUploaderCss;
+
+exports.wm_uploader = Uploader;

package/dist/cjs/wm-wrapper.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d930307d.js');
+
+const Wrapper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wmWrapperLoaded = index.createEvent(this, "wmWrapperLoaded", 7);
+  }
+  componentDidLoad() {
+    this.wmWrapperLoaded.emit();
+  }
+  render() {
+    return;
+  }
+  get el() { return index.getElement(this); }
+};
+
+exports.wm_wrapper = Wrapper;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,131 @@
+{
+  "entries": [
+    "./components/wm-action-menu/wm-action-menu.js",
+    "./components/wm-button/wm-button.js",
+    "./components/wm-chart/wm-chart-slice.js",
+    "./components/wm-chart/wm-chart.js",
+    "./components/wm-chart/priv-chart-popover/priv-chart-popover.js",
+    "./components/wm-datepicker/wm-datepicker.js",
+    "./components/wm-datepicker/priv-datepicker/priv-datepicker.js",
+    "./components/wm-input/wm-input.js",
+    "./components/wm-menuitem/wm-menuitem.js",
+    "./components/wm-modal/wm-modal-footer.js",
+    "./components/wm-modal/wm-modal-header.js",
+    "./components/wm-modal/wm-modal.js",
+    "./components/wm-navigator/wm-navigator.js",
+    "./components/wm-navigator/priv-navigator-button/priv-navigator-button.js",
+    "./components/wm-navigator/priv-navigator-item/priv-navigator-item.js",
+    "./components/wm-option/wm-option.js",
+    "./components/wm-pagination/wm-pagination.js",
+    "./components/wm-search/wm-search.js",
+    "./components/wm-select/wm-select.js",
+    "./components/wm-snackbar/wm-snackbar.js",
+    "./components/wm-tabs/wm-tab-item/wm-tab-item.js",
+    "./components/wm-tabs/wm-tab-list/wm-tab-list.js",
+    "./components/wm-tabs/wm-tab-panel/wm-tab-panel.js",
+    "./components/wm-tag-input/wm-tag-input.js",
+    "./components/wm-timepicker/wm-timepicker.js",
+    "./components/wm-toggletip/wm-toggletip.js",
+    "./components/wm-uploader/wm-uploader.js",
+    "./components/wm-uploader/wm-network-uploader/wm-network-uploader.js",
+    "./components/wm-wrapper/wm-wrapper.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.8.0",
+    "typescriptVersion": "4.2.3"
+  },
+  "collections": [],
+  "bundles": [
+    {
+      "components": [
+        "wm-button"
+      ]
+    },
+    {
+      "components": [
+        "wm-chart"
+      ]
+    },
+    {
+      "components": [
+        "wm-datepicker"
+      ]
+    },
+    {
+      "components": [
+        "wm-input"
+      ]
+    },
+    {
+      "components": [
+        "wm-modal"
+      ]
+    },
+    {
+      "components": [
+        "wm-navigator"
+      ]
+    },
+    {
+      "components": [
+        "wm-pagination"
+      ]
+    },
+    {
+      "components": [
+        "wm-search"
+      ]
+    },
+    {
+      "components": [
+        "wm-snackbar"
+      ]
+    },
+    {
+      "components": [
+        "wm-timepicker"
+      ]
+    },
+    {
+      "components": [
+        "wm-toggletip"
+      ]
+    },
+    {
+      "components": [
+        "wm-tag-input"
+      ]
+    },
+    {
+      "components": [
+        "wm-uploader"
+      ]
+    },
+    {
+      "components": [
+        "wm-wrapper"
+      ]
+    },
+    {
+      "components": [
+        "wm-action-menu",
+        "wm-menuitem"
+      ]
+    },
+    {
+      "components": [
+        "wm-option",
+        "wm-select"
+      ]
+    },
+    {
+      "components": [
+        "wm-tab-item",
+        "wm-tab-list",
+        "wm-tab-panel"
+      ]
+    }
+  ],
+  "global": "./global/global.js"
+}

package/dist/{ripple/ripple.css → collection/components/wm-action-menu/wm-action-menu.css}

@@ -40,45 +40,83 @@
 /* TODO: replace with vars above whenever possible */
 /* Buttons */
 /* VIA */
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   6. Button Hover
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
-/********************************************************************************************/
-/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
-/********************************************************************************************/
-/* USAGE */
-/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
-/* TODO: replace with vars above whenever possible */
-/* Buttons */
-/* VIA */
+:host {
+  position: relative;
+  display: inline-block;
+  width: -moz-fit-content;
+  width: fit-content;
+  color: #575195;
+  font-family: inherit;
+}
+:host .sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  margin: -1px !important;
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+wm-action-menu:focus {
+  outline: none;
+}
+
+.dropdown {
+  position: absolute;
+  padding: 0;
+  margin: 0.25rem 0;
+  border-radius: 3px 3px 3px 3px;
+  min-width: 11.4375rem;
+  -ms-transform: scale(1, 0);
+  -webkit-transform: scale(1, 0);
+  -moz-transform: scale(1, 0);
+  transform: scale(1, 0);
+  -ms-transition: transform 0.25s ease;
+  -webkit-transition: transform 0.25s ease;
+  -moz-transition: transform 0.25s ease;
+  transition: transform 0.25s ease;
+  -ms-transform-origin: center top;
+  -webkit-transform-origin: center top;
+  -moz-transform-origin: center top;
+  transform-origin: center top;
+  visibility: hidden;
+  -webkit-box-shadow: 0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);
+  background: #fff;
+  z-index: 10;
+  text-align: left;
+  white-space: nowrap;
+}
+.dropdown:focus {
+  outline: none;
+}
+.dropdown.open {
+  -ms-transform: scale(1, 1);
+  -webkit-transform: scale(1, 1);
+  -moz-transform: scale(1, 1);
+  transform: scale(1, 1);
+  visibility: visible;
+}
+.dropdown.open-up {
+  bottom: 2.5rem;
+  top: auto;
+  -ms-transform-origin: center bottom;
+  -webkit-transform-origin: center bottom;
+  -moz-transform-origin: center bottom;
+  transform-origin: center bottom;
+}
+.dropdown.right {
+  left: 0;
+}
+.dropdown.left {
+  right: 0;
+}