@watermarkinsights/ripple 3.27.0 → 3.27.1

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

@@ -1,964 +1,964 @@
-import { h, Host } from "@stencil/core";
-import { forceUpdate } from "@stencil/core";
-import { generateId, hasValidType } from "../../global/functions";
-import { uploaderMessages } from "../../global/intl";
-export class Uploader {
-  constructor() {
-    this.inputId = generateId();
-    this.uploaderType = undefined;
-    this.type = undefined;
-    this.label = undefined;
-    this.buttonText = undefined;
-    this.info = undefined;
-    this.emptyStateText = 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.sortBy = "date";
-    this.showInfo = "time";
-    this.errorMessage = undefined;
-    this.requiredField = undefined;
-    this.files = undefined;
-    this.fileList = [];
-    this.filesToUpload = [];
-    this.isTabbing = false;
-    this.rejectedFiles = undefined;
-    this.errorList = [];
-    this.notif = undefined;
-    this.internalErrorMessage = undefined;
-    this.announcement = "";
-    this.numFilesInProgress = undefined;
-    this.isCondensed = false;
-  }
-  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 fileLimitReached() {
-    return this.maxFiles && this.fileList.length >= this.maxFiles;
-  }
-  get displayedErrorMessage() {
-    return this.errorMessage || this.internalErrorMessage || "";
-  }
-  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);
-        this.announce(uploaderMessages.getUploadProgress(Math.floor(aggregate / total)));
-      }, 5000);
-    }
-  }
-  handleFileErrorCleared(ev) {
-    const filename = ev.detail.name;
-    this.errorList = this.errorList.filter((error) => error.name != filename);
-    this.uploadButtonEl.focus();
-  }
-  handleFileDeleted(ev) {
-    this.clearErrors();
-    forceUpdate(this.el); // for the button to stop being disabled if num files become < max-files
-    this.wmUploaderDeleteFile.emit(ev.detail);
-    this.wmFileDelete.emit(ev.detail);
-    this.wmDeleteFile.emit(ev.detail); // deprecated
-  }
-  handleFilePreviewed(ev) {
-    this.clearErrors();
-    this.wmUploaderPreviewFile.emit(ev.detail);
-    this.wmFilePreview.emit(ev.detail);
-  }
-  handleFileDownloaded(ev) {
-    this.clearErrors();
-    this.wmUploaderDownloadFile.emit(ev.detail);
-    this.wmFileDownload.emit(ev.detail);
-    this.wmDownloadFile.emit(ev.detail); // deprecated
-  }
-  parseFiles() {
-    if (!!this.files) {
-      if (typeof this.files === "string") {
-        let list = JSON.parse(this.files);
-        if (typeof list === "object") {
-          // if size is in byte format, convert to display format
-          list.forEach((item) => {
-            if (item.size && (typeof item.size === "number" || item.size.match(/^[0-9]+$/))) {
-              const convertedSize = this.convertBytes(item.size);
-              item.size = `${convertedSize.size.toFixed(0)} ${convertedSize.unit}`;
-            }
-          });
-          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");
-      }
-    }
-  }
-  focusAfterRemoval(newFiles, oldFiles) {
-    if (this.isTabbing && newFiles.length < oldFiles.length) {
-      const newFileIds = newFiles.map((file) => file.id);
-      const oldFileIds = oldFiles.map((file) => file.id);
-      // even in the case that multiple files have been removed at once, work off of the first in that group
-      const removedFileId = oldFileIds.filter((id) => !newFileIds.includes(id))[0];
-      if (oldFileIds.indexOf(removedFileId) > 0) {
-        const fileIdPrecedingRemoved = oldFileIds[oldFileIds.indexOf(removedFileId) - 1];
-        const fileElPrecedingRemoved = this.el.shadowRoot.querySelector("#file-" + fileIdPrecedingRemoved);
-        const focusedElementsButtons = fileElPrecedingRemoved === null || fileElPrecedingRemoved === void 0 ? void 0 : fileElPrecedingRemoved.shadowRoot.querySelectorAll("wm-button");
-        if (focusedElementsButtons && focusedElementsButtons.length > 0) {
-          const lastButtonInFile = focusedElementsButtons[focusedElementsButtons.length - 1];
-          lastButtonInFile.focus();
-        }
-        else {
-          // if preceding file has no file action buttons, rerun function with adjusted params
-          // by removing the fileElPrecedingRemoved from the newFiles list, it is now considered the removedFile and looks to focus it's preceding file
-          // if it continues to cannot find an appropriate preceding file and becomes the first file in the list, it focuses the upload button
-          this.focusAfterRemoval(newFiles.filter((file) => file.id !== fileIdPrecedingRemoved), oldFiles);
-        }
-      }
-      else {
-        this.uploadButtonEl.focus();
-      }
-    }
-  }
-  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 = "";
-        this.internalErrorMessage = "";
-      }, 20 * 1000);
-      this.notif = uploaderMessages.finishedUploading;
-      this.announce(uploaderMessages.finishedUploading);
-      this.numFilesInProgress = null;
-      clearInterval(this.srProgress);
-      forceUpdate(this.el);
-    }
-    else if (newNum > 0 && newNum != oldNum) {
-      this.notif = uploaderMessages.getFilesUploading(newNum);
-      this.announce(uploaderMessages.getFilesUploading(newNum));
-      forceUpdate(this.el);
-    }
-  }
-  handleErrorMessageChange() {
-    if (this.errorMessage) {
-      this.announce(this.errorMessage);
-    }
-  }
-  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) {
-    const hasDuplicateUploadingFile = this.filesToUpload.some((fileToUpload) => fileToUpload.name === name);
-    const hasDuplicateUploadedFile = this.fileList.some((f) => {
-      const filename = f.type ? f.name + "." + f.type : f.name;
-      return filename === name;
-    });
-    return hasDuplicateUploadingFile || hasDuplicateUploadedFile;
-  }
-  isEmpty() {
-    return !this.fileList.length && !this.errorList.length;
-  }
-  get isDisabled() {
-    // 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;
-  }
-  announce(message) {
-    if (this.liveRegion.textContent === message) {
-      message += "\u00A0";
-    }
-    this.announcement = message;
-  }
-  clearErrors() {
-    this.errorList = [];
-    this.notif = "";
-    this.internalErrorMessage = "";
-  }
-  handleFiles(ev) {
-    this.filesToUpload = [];
-    const files = Array.from(ev.target.files);
-    const validTypes = this.fileTypes.split(" ").join(", ");
-    if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {
-      this.internalErrorMessage = uploaderMessages.fileLimitExceeded;
-      this.announce(uploaderMessages.fileLimitExceeded);
-    }
-    else {
-      files &&
-        files.map((file) => {
-          if (!hasValidType(file, this.fileTypes)) {
-            const error = {
-              name: file.name,
-              message: uploaderMessages.getInvalidFileType(validTypes),
-            };
-            this.errorList.push(error);
-          }
-          else if (file.size === 0) {
-            const error = {
-              name: file.name,
-              message: uploaderMessages.zeroFileSize,
-            };
-            this.errorList.push(error);
-          }
-          else if (!this.isValidSize(file.size)) {
-            const error = {
-              name: file.name,
-              message: uploaderMessages.getFileTooLarge(this.effectiveMaxSize),
-            };
-            this.errorList.push(error);
-          }
-          else if (this.isDuplicate(file.name)) {
-            const error = {
-              name: file.name,
-              message: uploaderMessages.duplicateName,
-            };
-            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
-  }
-  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");
-    }
-    this.parseFiles();
-    this.clearErrors();
-    this.parseRejectedFiles();
-  }
-  componentDidLoad() {
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-  }
-  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.
-      ev.preventDefault();
-      if (this.numFilesInProgress > 0) {
-        const srMsg = uploaderMessages.waitToUpload;
-        this.announce(srMsg);
-      }
-      else if (this.fileLimitReached) {
-        this.internalErrorMessage = uploaderMessages.fileLimitReached;
-        this.announce(uploaderMessages.fileLimitReached);
-      }
-    }
-    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 h("div", { class: "notif" }, this.notif);
-  }
-  renderError() {
-    return h("div", { id: "error" }, this.displayedErrorMessage);
-  }
-  renderUploadButton(classes) {
-    let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : ""}${this.buttonText}`;
-    return (h("div", { class: "info-wrapper" }, h("input", { name: this.inputId, id: this.inputId, class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.displayedErrorMessage ? "error " : ""}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.notif && this.renderNotif(), this.displayedErrorMessage && this.renderError()));
-  }
-  renderErrorList() {
-    let srMessage = this.errorList.reduce(function (acc, err) {
-      return acc + `${err.name}: ${err.message} `;
-    }, "");
-    this.announce(srMessage);
-    return (h("ul", { class: "error-list" }, this.errorList.map((err) => (h("wm-file", { file: `{"name": "${err.name}"}`, "error-message": err.message })))));
-  }
-  formatTimestamp(timestamp) {
-    const uploadDate = new Date(Date.parse(timestamp));
-    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}`;
-    return formattedDate;
-  }
-  renderInProgressFileList() {
-    return (h("ul", { class: "inprogress-list" }, this.fileList
-      .filter((item) => this.isItemUploading(item))
-      .map((item) => (h("wm-file", { file: JSON.stringify(item), "show-info": this.showInfo })))));
-  }
-  renderUploadedFileList() {
-    return (h("ul", { class: "file-list" }, this.fileList
-      .filter((item) => !this.isItemUploading(item))
-      .map((item) => {
-      item.lastUpdated = this.formatTimestamp(item.lastUpdated);
-      return h("wm-file", { id: `file-${item.id}`, file: JSON.stringify(item), "show-info": this.showInfo });
-    })));
-  }
-  renderFiles() {
-    // if we switch to accepting display format for the wm-uploader's file lastUpdateds, sorting by date will become impossible
-    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, this.renderInProgressFileList(), this.renderUploadedFileList()));
-  }
-  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.notif && this.renderNotif(), this.displayedErrorMessage && this.renderError()))));
-  }
-  renderHeader() {
-    const validTypes = "." + this.fileTypes.split(" ").join(", .");
-    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" }, uploaderMessages.getAcceptedFileTypes(validTypes, this.fileTypes.split(" ").length)), this.notif && this.renderNotif(), this.displayedErrorMessage && this.renderError()));
-  }
-  renderRequirements() {
-    return (h("div", { class: "requirements" }, this.maxFiles && (h("span", { id: "file-count" }, uploaderMessages.getFileCount(this.fileList.length, this.maxFiles))), this.maxSize && h("span", { id: "max-size" }, uploaderMessages.getMaxSize(this.effectiveMaxSize))));
-  }
-  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" }, uploaderMessages.getFilesAdded(this.fileList.length)), this.renderUploadButton(`-primary ${this.isDisabled ? "disabled" : ""}`)), this.notif && this.renderNotif(), this.displayedErrorMessage && this.renderError())));
-  }
-  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.errorList.length > 0 && this.renderErrorList(), this.fileList.length > 0 && this.renderFiles()), this.tempUploaderType === "1" && this.renderFooter()));
-  }
-  renderLabel() {
-    return (h("div", { class: `wrapper ${this.displayedErrorMessage ? "invalid" : ""}` }, h("div", { id: "label", class: `label` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))));
-  }
-  render() {
-    return (h(Host, null, this.label && this.renderLabel(), 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" }, this.announcement)));
-  }
-  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 {
-      "uploaderType": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "\"1\" | \"2\"",
-          "resolved": "\"1\" | \"2\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "uploader-type",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"1\" | \"2\"",
-          "resolved": "\"1\" | \"2\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "type",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "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 | null",
-          "resolved": "null | number | 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
-      },
-      "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\""
-      },
-      "showInfo": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"time\" | \"size\" | \"none\"",
-          "resolved": "\"none\" | \"size\" | \"time\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-info",
-        "reflect": false,
-        "defaultValue": "\"time\""
-      },
-      "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
-      },
-      "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": true,
-        "complexType": {
-          "original": "File[]",
-          "resolved": "File[]",
-          "references": {
-            "File": {
-              "location": "global"
-            }
-          }
-        },
-        "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 {
-      "fileList": {},
-      "isTabbing": {},
-      "errorList": {},
-      "notif": {},
-      "internalErrorMessage": {},
-      "announcement": {},
-      "numFilesInProgress": {},
-      "isCondensed": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmUploaderFilesSelected",
-        "name": "wmUploaderFilesSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "wmFilesSelected",
-        "name": "wmFilesSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "wmUploaderDeleteFile",
-        "name": "wmUploaderDeleteFile",
-        "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": "wmUploaderDownloadFile",
-        "name": "wmUploaderDownloadFile",
-        "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": {}
-        }
-      }, {
-        "method": "wmUploaderPreviewFile",
-        "name": "wmUploaderPreviewFile",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "wmFileDelete",
-        "name": "wmFileDelete",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }, {
-        "method": "wmFileDownload",
-        "name": "wmFileDownload",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }, {
-        "method": "wmFilePreview",
-        "name": "wmFilePreview",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "files",
-        "methodName": "parseFiles"
-      }, {
-        "propName": "fileList",
-        "methodName": "focusAfterRemoval"
-      }, {
-        "propName": "rejectedFiles",
-        "methodName": "parseRejectedFiles"
-      }, {
-        "propName": "numFilesInProgress",
-        "methodName": "uploadNotifications"
-      }, {
-        "propName": "errorMessage",
-        "methodName": "handleErrorMessageChange"
-      }];
-  }
-  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
-      }, {
-        "name": "wmFileClearErrorClicked",
-        "method": "handleFileErrorCleared",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmIntFileDeleted",
-        "method": "handleFileDeleted",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmIntFilePreviewed",
-        "method": "handleFilePreviewed",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmIntFileDownloaded",
-        "method": "handleFileDownloaded",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { h, Host } from "@stencil/core";
+import { forceUpdate } from "@stencil/core";
+import { generateId, hasValidType } from "../../global/functions";
+import { uploaderMessages } from "../../global/intl";
+export class Uploader {
+  constructor() {
+    this.inputId = generateId();
+    this.uploaderType = undefined;
+    this.type = undefined;
+    this.label = undefined;
+    this.buttonText = undefined;
+    this.info = undefined;
+    this.emptyStateText = 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.sortBy = "date";
+    this.showInfo = "time";
+    this.errorMessage = undefined;
+    this.requiredField = undefined;
+    this.files = undefined;
+    this.fileList = [];
+    this.filesToUpload = [];
+    this.isTabbing = false;
+    this.rejectedFiles = undefined;
+    this.errorList = [];
+    this.notif = undefined;
+    this.internalErrorMessage = undefined;
+    this.announcement = "";
+    this.numFilesInProgress = undefined;
+    this.isCondensed = false;
+  }
+  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 fileLimitReached() {
+    return this.maxFiles && this.fileList.length >= this.maxFiles;
+  }
+  get displayedErrorMessage() {
+    return this.errorMessage || this.internalErrorMessage || "";
+  }
+  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);
+        this.announce(uploaderMessages.getUploadProgress(Math.floor(aggregate / total)));
+      }, 5000);
+    }
+  }
+  handleFileErrorCleared(ev) {
+    const filename = ev.detail.name;
+    this.errorList = this.errorList.filter((error) => error.name != filename);
+    this.uploadButtonEl.focus();
+  }
+  handleFileDeleted(ev) {
+    this.clearErrors();
+    forceUpdate(this.el); // for the button to stop being disabled if num files become < max-files
+    this.wmUploaderDeleteFile.emit(ev.detail);
+    this.wmFileDelete.emit(ev.detail);
+    this.wmDeleteFile.emit(ev.detail); // deprecated
+  }
+  handleFilePreviewed(ev) {
+    this.clearErrors();
+    this.wmUploaderPreviewFile.emit(ev.detail);
+    this.wmFilePreview.emit(ev.detail);
+  }
+  handleFileDownloaded(ev) {
+    this.clearErrors();
+    this.wmUploaderDownloadFile.emit(ev.detail);
+    this.wmFileDownload.emit(ev.detail);
+    this.wmDownloadFile.emit(ev.detail); // deprecated
+  }
+  parseFiles() {
+    if (!!this.files) {
+      if (typeof this.files === "string") {
+        let list = JSON.parse(this.files);
+        if (typeof list === "object") {
+          // if size is in byte format, convert to display format
+          list.forEach((item) => {
+            if (item.size && (typeof item.size === "number" || item.size.match(/^[0-9]+$/))) {
+              const convertedSize = this.convertBytes(item.size);
+              item.size = `${convertedSize.size.toFixed(0)} ${convertedSize.unit}`;
+            }
+          });
+          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");
+      }
+    }
+  }
+  focusAfterRemoval(newFiles, oldFiles) {
+    if (this.isTabbing && newFiles.length < oldFiles.length) {
+      const newFileIds = newFiles.map((file) => file.id);
+      const oldFileIds = oldFiles.map((file) => file.id);
+      // even in the case that multiple files have been removed at once, work off of the first in that group
+      const removedFileId = oldFileIds.filter((id) => !newFileIds.includes(id))[0];
+      if (oldFileIds.indexOf(removedFileId) > 0) {
+        const fileIdPrecedingRemoved = oldFileIds[oldFileIds.indexOf(removedFileId) - 1];
+        const fileElPrecedingRemoved = this.el.shadowRoot.querySelector("#file-" + fileIdPrecedingRemoved);
+        const focusedElementsButtons = fileElPrecedingRemoved === null || fileElPrecedingRemoved === void 0 ? void 0 : fileElPrecedingRemoved.shadowRoot.querySelectorAll("wm-button");
+        if (focusedElementsButtons && focusedElementsButtons.length > 0) {
+          const lastButtonInFile = focusedElementsButtons[focusedElementsButtons.length - 1];
+          lastButtonInFile.focus();
+        }
+        else {
+          // if preceding file has no file action buttons, rerun function with adjusted params
+          // by removing the fileElPrecedingRemoved from the newFiles list, it is now considered the removedFile and looks to focus it's preceding file
+          // if it continues to cannot find an appropriate preceding file and becomes the first file in the list, it focuses the upload button
+          this.focusAfterRemoval(newFiles.filter((file) => file.id !== fileIdPrecedingRemoved), oldFiles);
+        }
+      }
+      else {
+        this.uploadButtonEl.focus();
+      }
+    }
+  }
+  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 = "";
+        this.internalErrorMessage = "";
+      }, 20 * 1000);
+      this.notif = uploaderMessages.finishedUploading;
+      this.announce(uploaderMessages.finishedUploading);
+      this.numFilesInProgress = null;
+      clearInterval(this.srProgress);
+      forceUpdate(this.el);
+    }
+    else if (newNum > 0 && newNum != oldNum) {
+      this.notif = uploaderMessages.getFilesUploading(newNum);
+      this.announce(uploaderMessages.getFilesUploading(newNum));
+      forceUpdate(this.el);
+    }
+  }
+  handleErrorMessageChange() {
+    if (this.errorMessage) {
+      this.announce(this.errorMessage);
+    }
+  }
+  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) {
+    const hasDuplicateUploadingFile = this.filesToUpload.some((fileToUpload) => fileToUpload.name === name);
+    const hasDuplicateUploadedFile = this.fileList.some((f) => {
+      const filename = f.type ? f.name + "." + f.type : f.name;
+      return filename === name;
+    });
+    return hasDuplicateUploadingFile || hasDuplicateUploadedFile;
+  }
+  isEmpty() {
+    return !this.fileList.length && !this.errorList.length;
+  }
+  get isDisabled() {
+    // 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;
+  }
+  announce(message) {
+    if (this.liveRegion.textContent === message) {
+      message += "\u00A0";
+    }
+    this.announcement = message;
+  }
+  clearErrors() {
+    this.errorList = [];
+    this.notif = "";
+    this.internalErrorMessage = "";
+  }
+  handleFiles(ev) {
+    this.filesToUpload = [];
+    const files = Array.from(ev.target.files);
+    const validTypes = this.fileTypes.split(" ").join(", ");
+    if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {
+      this.internalErrorMessage = uploaderMessages.fileLimitExceeded;
+      this.announce(uploaderMessages.fileLimitExceeded);
+    }
+    else {
+      files &&
+        files.map((file) => {
+          if (!hasValidType(file, this.fileTypes)) {
+            const error = {
+              name: file.name,
+              message: uploaderMessages.getInvalidFileType(validTypes),
+            };
+            this.errorList.push(error);
+          }
+          else if (file.size === 0) {
+            const error = {
+              name: file.name,
+              message: uploaderMessages.zeroFileSize,
+            };
+            this.errorList.push(error);
+          }
+          else if (!this.isValidSize(file.size)) {
+            const error = {
+              name: file.name,
+              message: uploaderMessages.getFileTooLarge(this.effectiveMaxSize),
+            };
+            this.errorList.push(error);
+          }
+          else if (this.isDuplicate(file.name)) {
+            const error = {
+              name: file.name,
+              message: uploaderMessages.duplicateName,
+            };
+            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
+  }
+  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");
+    }
+    this.parseFiles();
+    this.clearErrors();
+    this.parseRejectedFiles();
+  }
+  componentDidLoad() {
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+  }
+  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.
+      ev.preventDefault();
+      if (this.numFilesInProgress > 0) {
+        const srMsg = uploaderMessages.waitToUpload;
+        this.announce(srMsg);
+      }
+      else if (this.fileLimitReached) {
+        this.internalErrorMessage = uploaderMessages.fileLimitReached;
+        this.announce(uploaderMessages.fileLimitReached);
+      }
+    }
+    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 h("div", { class: "notif" }, this.notif);
+  }
+  renderError() {
+    return h("div", { id: "error" }, this.displayedErrorMessage);
+  }
+  renderUploadButton(classes) {
+    let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : ""}${this.buttonText}`;
+    return (h("div", { class: "info-wrapper" }, h("input", { name: this.inputId, id: this.inputId, class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.displayedErrorMessage ? "error " : ""}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.notif && this.renderNotif(), this.displayedErrorMessage && this.renderError()));
+  }
+  renderErrorList() {
+    let srMessage = this.errorList.reduce(function (acc, err) {
+      return acc + `${err.name}: ${err.message} `;
+    }, "");
+    this.announce(srMessage);
+    return (h("ul", { class: "error-list" }, this.errorList.map((err) => (h("wm-file", { file: `{"name": "${err.name}"}`, "error-message": err.message })))));
+  }
+  formatTimestamp(timestamp) {
+    const uploadDate = new Date(Date.parse(timestamp));
+    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}`;
+    return formattedDate;
+  }
+  renderInProgressFileList() {
+    return (h("ul", { class: "inprogress-list" }, this.fileList
+      .filter((item) => this.isItemUploading(item))
+      .map((item) => (h("wm-file", { file: JSON.stringify(item), "show-info": this.showInfo })))));
+  }
+  renderUploadedFileList() {
+    return (h("ul", { class: "file-list" }, this.fileList
+      .filter((item) => !this.isItemUploading(item))
+      .map((item) => {
+      item.lastUpdated = this.formatTimestamp(item.lastUpdated);
+      return h("wm-file", { id: `file-${item.id}`, file: JSON.stringify(item), "show-info": this.showInfo });
+    })));
+  }
+  renderFiles() {
+    // if we switch to accepting display format for the wm-uploader's file lastUpdateds, sorting by date will become impossible
+    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, this.renderInProgressFileList(), this.renderUploadedFileList()));
+  }
+  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.notif && this.renderNotif(), this.displayedErrorMessage && this.renderError()))));
+  }
+  renderHeader() {
+    const validTypes = "." + this.fileTypes.split(" ").join(", .");
+    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" }, uploaderMessages.getAcceptedFileTypes(validTypes, this.fileTypes.split(" ").length)), this.notif && this.renderNotif(), this.displayedErrorMessage && this.renderError()));
+  }
+  renderRequirements() {
+    return (h("div", { class: "requirements" }, this.maxFiles && (h("span", { id: "file-count" }, uploaderMessages.getFileCount(this.fileList.length, this.maxFiles))), this.maxSize && h("span", { id: "max-size" }, uploaderMessages.getMaxSize(this.effectiveMaxSize))));
+  }
+  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" }, uploaderMessages.getFilesAdded(this.fileList.length)), this.renderUploadButton(`-primary ${this.isDisabled ? "disabled" : ""}`)), this.notif && this.renderNotif(), this.displayedErrorMessage && this.renderError())));
+  }
+  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.errorList.length > 0 && this.renderErrorList(), this.fileList.length > 0 && this.renderFiles()), this.tempUploaderType === "1" && this.renderFooter()));
+  }
+  renderLabel() {
+    return (h("div", { class: `wrapper ${this.displayedErrorMessage ? "invalid" : ""}` }, h("div", { id: "label", class: `label` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))));
+  }
+  render() {
+    return (h(Host, null, this.label && this.renderLabel(), 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" }, this.announcement)));
+  }
+  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 {
+      "uploaderType": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"1\" | \"2\"",
+          "resolved": "\"1\" | \"2\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "uploader-type",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"1\" | \"2\"",
+          "resolved": "\"1\" | \"2\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "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 | null",
+          "resolved": "null | number | 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
+      },
+      "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\""
+      },
+      "showInfo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"time\" | \"size\" | \"none\"",
+          "resolved": "\"none\" | \"size\" | \"time\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-info",
+        "reflect": false,
+        "defaultValue": "\"time\""
+      },
+      "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
+      },
+      "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": true,
+        "complexType": {
+          "original": "File[]",
+          "resolved": "File[]",
+          "references": {
+            "File": {
+              "location": "global"
+            }
+          }
+        },
+        "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 {
+      "fileList": {},
+      "isTabbing": {},
+      "errorList": {},
+      "notif": {},
+      "internalErrorMessage": {},
+      "announcement": {},
+      "numFilesInProgress": {},
+      "isCondensed": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "wmUploaderFilesSelected",
+        "name": "wmUploaderFilesSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "wmFilesSelected",
+        "name": "wmFilesSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "wmUploaderDeleteFile",
+        "name": "wmUploaderDeleteFile",
+        "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": "wmUploaderDownloadFile",
+        "name": "wmUploaderDownloadFile",
+        "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": {}
+        }
+      }, {
+        "method": "wmUploaderPreviewFile",
+        "name": "wmUploaderPreviewFile",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "wmFileDelete",
+        "name": "wmFileDelete",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "wmFileDownload",
+        "name": "wmFileDownload",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "wmFilePreview",
+        "name": "wmFilePreview",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "files",
+        "methodName": "parseFiles"
+      }, {
+        "propName": "fileList",
+        "methodName": "focusAfterRemoval"
+      }, {
+        "propName": "rejectedFiles",
+        "methodName": "parseRejectedFiles"
+      }, {
+        "propName": "numFilesInProgress",
+        "methodName": "uploadNotifications"
+      }, {
+        "propName": "errorMessage",
+        "methodName": "handleErrorMessageChange"
+      }];
+  }
+  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
+      }, {
+        "name": "wmFileClearErrorClicked",
+        "method": "handleFileErrorCleared",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmIntFileDeleted",
+        "method": "handleFileDeleted",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmIntFilePreviewed",
+        "method": "handleFilePreviewed",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmIntFileDownloaded",
+        "method": "handleFileDownloaded",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}