@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

package/dist/collection/components/wm-uploader/wm-uploader.js

@@ -1,673 +1,619 @@
-import { Component, Element, Event, h, Host, Prop, State, Listen, Watch } from "@stencil/core";
-import { forceUpdate } from "@stencil/core";
-import { intl, generateId, hasValidType } from "../../global/functions";
+import { h, Host, forceUpdate, } from "@stencil/core";
+import { uploaderMessages } from "../../global/intl";
+import { intl, hideTooltip, showTooltip } from "../../global/functions";
 export class Uploader {
-  constructor() {
-    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 = 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;
-        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) });
+    constructor() {
+        this.batchCount = 0; // used to calculate the aggregate upload progress
+        this.prevUploadCount = 0; // comparison to determine whether or not to announce updated count
+        this.label = undefined;
+        this.uploaderType = "select";
+        this.dropArea = "component";
+        this.buttonText = undefined;
+        this.icon = undefined;
+        this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
+        this.maxSize = undefined;
+        this.maxFiles = undefined;
+        this.errorMessage = undefined;
+        this.requiredField = undefined;
+        this.showInfo = "time";
+        this.isTabbing = false;
+        this.notif = "";
+        this.isCondensed = false;
+    }
+    get isDisabled() {
+        // disable if is the uploader is maxed out or if something is uploading
+        return this.fileLimitReached || this.inProgressFileEls.length > 0;
+    }
+    get fileEls() {
+        return Array.from(this.el.querySelectorAll("wm-file"));
+    }
+    get inProgressFileEls() {
+        return this.fileEls.filter((file) => file.progress !== undefined && file.progress < 100);
+    }
+    get uploadedFileEls() {
+        return this.fileEls.filter((file) => !file.errorMessage);
+    }
+    get fileLimitReached() {
+        return this.maxFiles && this.uploadedFileEls.length >= this.maxFiles;
+    }
+    get validTypes() {
+        return "." + this.fileTypes.split(" ").join(", .");
+    }
+    toggleTabbingOn() {
+        this.isTabbing = true;
+    }
+    toggleTabbingOff() {
+        this.isTabbing = false;
+    }
+    handleFileErrorCleared() {
+        this.uploadButtonEl.focus();
+    }
+    handleFileDelete(ev) {
+        const focusableFileEls = this.fileEls.filter((file) => !!file.fileActions);
+        this.deletedEl = ev.target;
+        const index = focusableFileEls.indexOf(this.deletedEl);
+        // actual focus will called only after el is removed from DOM
+        if (focusableFileEls.length === 1) {
+            // it was the only item, focus the upload button
+            this.elToFocusOnDelete = this.uploadButtonEl;
         }
-      }, 5000);
-    }
-  }
-  parseFiles() {
-    if (!!this.files) {
-      if (typeof this.files === "string") {
-        const list = JSON.parse(this.files);
-        if (typeof list === "object") {
-          this.fileList = list;
+        else if (index === focusableFileEls.length - 1) {
+            // it's the last item, focus the previous file
+            const fileToFocus = focusableFileEls[index - 1];
+            const fileActionButtons = fileToFocus.shadowRoot.querySelectorAll("wm-button");
+            this.elToFocusOnDelete = fileActionButtons[fileActionButtons.length - 1];
         }
         else {
-          throw new Error("could not parse string passed to files attribute");
+            // otherwise focus the next file
+            const fileToFocus = focusableFileEls[index + 1];
+            const fileActionButtons = fileToFocus.shadowRoot.querySelectorAll("wm-button");
+            this.elToFocusOnDelete = fileActionButtons[fileActionButtons.length - 1];
         }
-      }
-      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;
+    }
+    announceError() {
+        if (this.errorMessage) {
+            setTimeout(() => this.announce(this.errorMessage, this.politeLiveRegionEl), 100);
         }
-        else {
-          throw new Error("could not parse string passed to errors attribute");
+    }
+    ///////// Drop Event Handling ////////
+    handleDocumentDragEnter() {
+        if (this.uploaderType == "drop") {
+            this.beginDropListening();
         }
-      }
-      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 = 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);
-      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 };
-      if (this.liveRegion) {
-        this.liveRegion.innerHTML = message;
-      }
-      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 = 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;
+    }
+    handleDocumentMouseOut() {
+        if (this.uploaderType == "drop" && this.dropAreaEl) {
+            this.endDropListening();
+        }
+    }
+    handleDocumentDragLeave(ev) {
+        if (this.uploaderType == "drop") {
+            // Do not end drop listening for events that bubble up from children of this uploader
+            if (ev.target.closest("wm-uploader") == this.el) {
+                this.endDropListening();
+            }
+        }
+    }
+    handleDocumentVisibilityChange() {
+        // If a file is dropped outside of the drop area, if the browser opens the file in new tab, a dragleave event is not fired. This handles that case
+        if (this.uploaderType == "drop") {
+            this.endDropListening();
+        }
+    }
+    handleDragEnter(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+            this.el.classList.add("dragging");
+        }
+    }
+    handleDragOver(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+        }
+    }
+    handleDragLeave(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+            this.endDropListening();
+            this.el.classList.remove("dragging");
+        }
+    }
+    handleDrop(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+            this.el.classList.remove("dragging");
+            this.endDropListening();
+            if (ev.dataTransfer.files) {
+                const files = Array.from(ev.dataTransfer.files);
+                if (files.length > 0) {
+                    this.batchCount = files.length;
+                    this.wmUploaderFilesSelected.emit(files);
+                }
+            }
         }
-      }
-      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 = 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 (!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 (!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);
-          }
+    }
+    beginDropListening() {
+        if (this.dropArea == "page") {
+            this.dropOverlayEl.showPopover();
+        }
+        this.dropAreaEl.classList.add("listening");
+    }
+    endDropListening() {
+        if (this.dropArea == "page") {
+            this.dropOverlayEl.hidePopover();
+        }
+        this.dropAreaEl.classList.remove("listening");
+    }
+    componentDidLoad() {
+        if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+            this.toggleTabbingOn();
+        }
+        const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((mutationRecord) => this.handleChildMutation(mutationRecord)));
+        mutationObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeOldValue: true,
+            attributeFilter: ["progress"],
         });
-      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();
-    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();
+    }
+    handleChildMutation(mutationRecord) {
+        if (mutationRecord.type === "attributes") {
+            this.handleProgressUpdate(mutationRecord);
+        }
+        else if (mutationRecord.type === "childList") {
+            // if user prompted the removal of a single file (they hit the delete button)
+            // re-assigning focus handled here because component shouldn't assume the node removal based on the event firing
+            const removedEls = mutationRecord.removedNodes;
+            const removedEl = removedEls[0];
+            if (removedEls.length === 1 && removedEl === this.deletedEl && this.elToFocusOnDelete) {
+                this.elToFocusOnDelete.focus();
+                this.deletedEl = null;
+                this.elToFocusOnDelete = null;
+            }
+            // on added wm-files, if wm-file has an error, announce
+            if (mutationRecord.addedNodes.length > 0) {
+                mutationRecord.addedNodes.forEach((addedFile) => {
+                    if (addedFile.errorMessage) {
+                        setTimeout(() => this.announce(addedFile.errorMessage, this.politeLiveRegionEl), 500);
+                    }
+                });
+            }
+            forceUpdate(this.el); // forceUpdate to rerender filecount
+        }
+    }
+    handleProgressUpdate(mutationRecord) {
+        const uploadCount = this.inProgressFileEls.length;
+        if (uploadCount !== 0) {
+            const changeInUploadingFiles = this.prevUploadCount !== uploadCount;
+            changeInUploadingFiles &&
+                this.announce(uploaderMessages.getFilesUploading(uploadCount), this.assertiveLiveRegionEl);
+            this.notif = uploaderMessages.getFilesUploading(uploadCount);
+            this.prevUploadCount = uploadCount;
+            if (this.batchCount < uploadCount) {
+                this.batchCount = uploadCount;
+            }
+            if (!this.srProgress) {
+                this.srProgress = setInterval(() => {
+                    const aggregate = this.fileEls.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
+                    const percentage = this.batchCount > 0 ? Math.floor(aggregate / this.batchCount) : 0;
+                    this.announce(uploaderMessages.getUploadProgress(percentage), this.assertiveLiveRegionEl);
+                }, 5000);
+            }
+        }
+        else if (uploadCount === 0 && mutationRecord.oldValue && parseInt(mutationRecord.oldValue) < 100) {
+            // if final file progress completes
+            this.uploadButtonEl.value = "";
+            this.batchCount = 0;
+            this.notif = uploaderMessages.finishedUploading;
+            this.announce(uploaderMessages.finishedUploading, this.assertiveLiveRegionEl);
+            clearInterval(this.srProgress);
+            setTimeout(() => {
+                this.notif = "";
+            }, 20 * 1000);
+        }
+    }
+    handleUploadButtonClick(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.
+            ev.preventDefault();
+            if (this.inProgressFileEls.length > 0) {
+                this.announce(uploaderMessages.waitToUpload, this.assertiveLiveRegionEl);
+            }
+            else if (this.fileLimitReached) {
+                this.announce(uploaderMessages.fileLimitReached, this.assertiveLiveRegionEl);
+            }
+        }
+        else {
+            this.uploadButtonEl.value = ""; // when making a new selection, always reset the value so onChange is triggered (even if the same file is selected)
+        }
+    }
+    handleUploadButtonChange() {
+        if (this.uploadButtonEl.files) {
+            const files = Array.from(this.uploadButtonEl.files);
+            if (files.length > 0) {
+                this.batchCount = files.length;
+                this.wmUploaderFilesSelected.emit(files);
+            }
+        }
+    }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", labelEl, this.label);
+        }
+    }
+    announce(message, liveRegionEl) {
+        if (liveRegionEl.textContent === message) {
+            message += "\u00A0";
+        }
+        liveRegionEl.textContent = message;
+    }
+    renderIcon() {
+        const defaultIconSize = "0.875rem";
+        if (this.icon.match(/^#/)) {
+            // Icon ID
+            return h("span", { class: `svg-icon svg-${this.icon.slice(1)}`, style: { "--icon-size": defaultIconSize } });
         }
-      });
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-  }
-  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.type === "2" ? h("span", { class: "info" }, this.info) : "";
-  }
-  renderNotif() {
-    return this.notif ? h("div", { class: "notif" }, this.notif.message) : "";
-  }
-  renderUploadButton(classes) {
-    return (h("div", { class: "info-wrapper" },
-      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() }),
-      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()));
-  }
-  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) => (h("li", null,
-        h("div", { class: "file --error" },
-          h("div", { class: "file-info" },
-            h("span", { class: "filename" }, err.name))),
-        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}%)`,
-          } }),
-        h("div", { class: "file-info" },
-          h("span", { class: "filename" },
-            filename,
-            " ",
-            h("span", { class: "sr-only" }, "uploading"))))));
-  }
-  renderFile(item) {
-    return (h("li", null,
-      h("div", { class: "file --saved" },
-        h("div", { class: "file-info" },
-          h("span", { class: "filename" }, item.name + "." + item.type)),
-        h("div", { class: "file-controls" },
-          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) }),
-          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 (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)))));
-    }
-  }
-  renderHeader() {
-    return (this.type === "2" && (h("div", { class: "header" },
-      h("div", { class: "slot-wrapper" },
-        h("slot", null),
-        h("div", { class: "notif-wrapper" },
-          this.renderUploadButton(`-secondary ${this.isDisabled() ? "disabled" : ""}`),
-          this.renderNotif())))));
-  }
-  renderFooter() {
-    return (this.type === "1" && (h("div", { class: "footer" },
-      h("div", { class: "notif-wrapper" },
-        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() {
-    return (h("div", null,
-      this.renderHeader(),
-      h("div", { class: `list-container type${this.type}` },
-        this.renderErrorList(),
-        this.renderFileList()),
-      this.renderFooter()));
-  }
-  render() {
-    return (h(Host, null,
-      this.isEmpty() && this.type === "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" })));
-  }
-  static get is() { return "wm-uploader"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-uploader.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-uploader.css"]
-  }; }
-  static get properties() { return {
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"1\" | \"2\"",
-        "resolved": "\"1\" | \"2\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "\"1\""
-    },
-    "buttonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "button-text",
-      "reflect": false
-    },
-    "info": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "info",
-      "reflect": false
-    },
-    "emptyStateText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "empty-state-text",
-      "reflect": false
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "fileTypes": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "file-types",
-      "reflect": false,
-      "defaultValue": "\"pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv\""
-    },
-    "maxSize": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max-size",
-      "reflect": false,
-      "defaultValue": "100"
-    },
-    "maxFiles": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max-files",
-      "reflect": false
-    },
-    "sortBy": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"name\" | \"date\"",
-        "resolved": "\"date\" | \"name\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "sort-by",
-      "reflect": false,
-      "defaultValue": "\"date\""
-    },
-    "files": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "files",
-      "reflect": false
-    },
-    "filesToUpload": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "File[]",
-        "resolved": "File[]",
-        "references": {
-          "File": {
-            "location": "global"
-          }
+        else if (this.icon.match(/^\/\S*[#]\S*/)) {
+            // starts with /, any number of non-whitespace characters, followed by #, followed by any non-whitespace characters
+            // Relative Path & Symbol
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "svg-icon", style: { "--icon-fill": "currentColor", "--icon-size": defaultIconSize }, fill: "currentColor" }, h("use", { href: this.icon })));
+        }
+        else {
+            // MDI
+            return (h("span", { class: "mdi", "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`))));
+        }
+    }
+    renderUploadButton() {
+        let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : ""}${this.buttonText}`;
+        return (h("div", { class: "button-wrapper" }, h("input", { name: "input", id: "input", ref: (el) => (this.uploadButtonEl = el), class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.errorMessage ? "error " : ""}file-count max-size accepted-types`, type: "file", multiple: true, onClick: (ev) => this.handleUploadButtonClick(ev), onChange: () => this.handleUploadButtonChange() }), h("label", { htmlFor: "input", class: `wm-button -secondary ${this.isDisabled ? "disabled" : ""}` }, this.icon && this.renderIcon(), this.buttonText), this.uploaderType == "select" && this.renderFileCount()));
+    }
+    renderDropButton() {
+        let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : ""}${uploaderMessages.dropInstructions}`;
+        return (h("div", { class: "button-wrapper -drop" }, h("input", { name: "input", id: "input", ref: (el) => (this.uploadButtonEl = el), class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.errorMessage ? "error " : ""}file-count max-size accepted-types`, type: "file", multiple: true, onClick: (ev) => this.handleUploadButtonClick(ev), onChange: () => this.handleUploadButtonChange() }), h("label", { htmlFor: "input", class: `${this.isDisabled ? "disabled" : ""}` }, h("div", { class: "prompt" }, h("span", { class: "upload-arrow" }), h("span", { id: "drop-text", class: `wm-button -textonly ${this.isDisabled ? "disabled" : ""}` }, h("span", { class: "default-text" }, uploaderMessages.dropInstructions), h("span", { class: "dragging-text" }, uploaderMessages.dropFile))), this.renderFileCount())));
+    }
+    renderHeader() {
+        return (h("div", { class: "header" }, h("div", { class: "notif-wrapper" }, this.uploaderType == "select" ? this.renderUploadButton() : this.renderDropButton(), this.renderRequirements()), this.notif && h("div", { class: "notif" }, this.notif), h("div", { id: "error" }, this.errorMessage)));
+    }
+    renderFileCount() {
+        if (this.maxFiles) {
+            return h("div", { id: "file-count" }, uploaderMessages.getFileCount(this.uploadedFileEls.length, this.maxFiles));
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    },
-    "rejectedFiles": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "rejected-files",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "isTabbing": {},
-    "errorList": {},
-    "notif": {},
-    "numFilesInProgress": {}
-  }; }
-  static get events() { return [{
-      "method": "wmFilesSelected",
-      "name": "wmFilesSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "wmDeleteFile",
-      "name": "wmDeleteFile",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "wmDownloadFile",
-      "name": "wmDownloadFile",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "files",
-      "methodName": "parseFiles"
-    }, {
-      "propName": "rejectedFiles",
-      "methodName": "parseRejectedFiles"
-    }, {
-      "propName": "maxSize",
-      "methodName": "setMaxSize"
-    }, {
-      "propName": "numFilesInProgress",
-      "methodName": "uploadNotifications"
-    }]; }
-  static get listeners() { return [{
-      "name": "wmUserIsTabbing",
-      "method": "toggleTabbingOn",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "wmUserIsNotTabbing",
-      "method": "toggleTabbingOff",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "wmUploadProgress",
-      "method": "handleUploadProgress",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+    }
+    renderRequirements() {
+        const maxSizeMessage = intl.formatMessage({
+            id: "uploader.maxSize",
+            defaultMessage: "<b>Maximum File Size:</b> {maxSize}",
+            description: "An indicator of the maximum file size the uploader allows",
+        }, {
+            maxSize: this.maxSize,
+            b: (chunks) => h("span", { style: { "font-weight": "600" } }, chunks),
+        });
+        const acceptedTypesMessage = intl.formatMessage({
+            id: "uploader.acceptedFileTypes",
+            defaultMessage: "<b>Accepted File {amount, plural, =1 {Type} other {Types}}:</b> {fileTypes}",
+        }, {
+            fileTypes: this.validTypes,
+            amount: this.fileTypes.split(" ").length,
+            b: (chunks) => h("span", { style: { "font-weight": "600" } }, chunks),
+        });
+        return (h("details", { class: "requirements" }, h("summary", null, h("span", { class: "title-text" }, uploaderMessages.fileRequirements)), h("div", { class: "requirements-wrapper" }, h("div", { id: "accepted-types", class: "accepted-types" }, acceptedTypesMessage), this.maxSize && h("span", { id: "max-size" }, maxSizeMessage))));
+    }
+    renderListContainer() {
+        const hasNewlyUploadedFiles = this.fileEls.filter((file) => file.progress && file.progress === 100).length;
+        return (h("div", { class: `list-container ${hasNewlyUploadedFiles ? "checkmark-spacer" : ""}` }, h("ul", { class: "file-list" }, h("slot", null))));
+    }
+    renderLabel() {
+        return (h("div", { class: `wrapper ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("div", { id: "label", class: `label`, onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.requiredField && (h("div", { class: "required", "aria-hidden": "true" }, "*")))));
+    }
+    renderDropArea() {
+        return (h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, h("span", { class: "upload-arrow" }), h("span", null, "Drop to Upload")))));
+    }
+    render() {
+        return (h(Host, { key: 'ba107068957e362e4f7955665fb88ebf5b6cc496', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: '4f66e5d79375d338f5ac9927f92eecafe150505c', ref: (el) => (this.assertiveLiveRegionEl = 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" }), h("div", { key: '976a43710c6b906925e5a081f1518890a901a644', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+    }
+    static get is() { return "wm-uploader"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-uploader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-uploader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "uploaderType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"select\" | \"drop\"",
+                    "resolved": "\"drop\" | \"select\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "uploader-type",
+                "reflect": false,
+                "defaultValue": "\"select\""
+            },
+            "dropArea": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"component\" | \"page\"",
+                    "resolved": "\"component\" | \"page\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "drop-area",
+                "reflect": false,
+                "defaultValue": "\"component\""
+            },
+            "buttonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "button-text",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "fileTypes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "file-types",
+                "reflect": false,
+                "defaultValue": "\"pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv\""
+            },
+            "maxSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-size",
+                "reflect": false
+            },
+            "maxFiles": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-files",
+                "reflect": false
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "requiredField": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "required-field",
+                "reflect": false
+            },
+            "showInfo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"size\" | \"time\" | \"none\"",
+                    "resolved": "\"none\" | \"size\" | \"time\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-info",
+                "reflect": false,
+                "defaultValue": "\"time\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isTabbing": {},
+            "notif": {},
+            "isCondensed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmUploaderFilesSelected",
+                "name": "wmUploaderFilesSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "errorMessage",
+                "methodName": "announceError"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmUserIsTabbing",
+                "method": "toggleTabbingOn",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "toggleTabbingOff",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmFileErrorCleared",
+                "method": "handleFileErrorCleared",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmFileDelete",
+                "method": "handleFileDelete",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "dragenter",
+                "method": "handleDocumentDragEnter",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseout",
+                "method": "handleDocumentMouseOut",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "dragleave",
+                "method": "handleDocumentDragLeave",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "visibilitychange",
+                "method": "handleDocumentVisibilityChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }