@watermarkinsights/ripple 3.16.0 → 3.17.0-2

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

@@ -1,788 +1,788 @@
-import { Component, Element, h, Host, Prop, State, Listen, Watch, Event } from "@stencil/core";
-import { forceUpdate } from "@stencil/core";
-import { getRequest, postRequest, putRequest, deleteRequest } from "../../../global/services/http-service";
-import { intl, generateId, hasValidType } from "../../../global/functions";
-export class NetworkUploader {
-  constructor() {
-    this.isTabbing = false;
-    this.fileList = [];
-    this.inProgressList = [];
-    this.errorList = []; // for errors on a particular file
-    this.snackbar = [];
-    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.inputId = generateId();
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleUploadProgress(ev) {
-    this.inProgressList.map((i) => {
-      if (i.name === ev.detail.file_name) {
-        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.inProgressList.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
-        if (this.liveRegion) {
-          this.liveRegion.innerHTML = intl.formatMessage({
-            id: "uploader.uploadProgress",
-            defaultMessage: "Upload progress: {percentage}%",
-          }, { percentage: Math.floor(aggregate / total) });
-        }
-      }, 5000);
-    }
-  }
-  handleFinishedSnack(ev) {
-    this.snackbar = this.snackbar.filter((n) => n.id !== ev.detail.id);
-  }
-  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);
-    }
-  }
-  emitFileListEvent() {
-    this.wmNetworkUploaderFilesChanged.emit(this.fileList);
-  }
-  formatDate(isoDate, locale, timezone) {
-    const timestamp = Date.parse(isoDate);
-    if (locale.match(/^[a-zA-Z]*(-[a-zA-Z0-9]*)*$/g)) {
-      // make sure locale is valid, otherwise set default locale
-      try {
-        //@ts-ignore
-        Intl.getCanonicalLocales(locale);
-      }
-      catch (_a) {
-        locale = "en-us";
-      }
-    }
-    else {
-      return isoDate;
-    }
-    if (!!timestamp) {
-      const date = new Date(timestamp);
-      const year = date.getFullYear();
-      const month = ("0" + (date.getMonth() + 1)).substr(-2);
-      const day = ("0" + date.getDate()).substr(-2);
-      const time = date.toLocaleTimeString([locale, "en-us"], {
-        timeZone: timezone,
-        hour: "numeric",
-        minute: "numeric",
-      });
-      return `${year}/${month}/${day} ${time}`;
-    }
-    else {
-      return isoDate;
-    }
-  }
-  isValidSize(size) {
-    // https://stackoverflow.com/questions/2365100/converting-bytes-to-megabytes
-    return size / 1024 / 1024 <= this.maxSize;
-  }
-  isDuplicate(name) {
-    return this.fileList.find((f) => f.file_name === name);
-  }
-  isEmpty() {
-    return !this.fileList.length && !this.inProgressList.length && !this.errorList.length;
-  }
-  get isDisabled() {
-    const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;
-    if (!this.notif) {
-      if (isMax) {
-        const errMessage = intl.formatMessage({
-          id: "uploader.fileUploadLimitExceeded",
-          defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
-          description: "Message displayed when trying to upload too many files",
-        });
-        this.notif = { id: 1, message: errMessage };
-        if (this.liveRegion) {
-          this.liveRegion.innerHTML = errMessage;
-        }
-      }
-      else {
-        this.notif = null;
-      }
-    }
-    else if (this.notif.id === 1) {
-      // to make sure SR don't repeat the error, don't reset it if it already is showing
-      // just dismiss it if isMax is not true anymore
-      if (!isMax) {
-        this.notif = null;
-      }
-      // finally do nothing if error 2 is showing (special case when user selects too many files)
-    }
-    // disable if is the uploader is maxed out or if something is uploading
-    return isMax || this.numFilesInProgress > 0;
-  }
-  purgeProgressList(item) {
-    // If a file is retrieved from the server because it was just uploaded
-    // it should be removed from inProgressList
-    this.inProgressList = this.inProgressList.filter((i) => i.progress !== 100 && i.name !== item.file_name);
-  }
-  getExistingFiles() {
-    getRequest(this.getPath)
-      .then((reply) => {
-      reply.map((item) => this.purgeProgressList(item));
-      if (this.sortBy === "name") {
-        reply.sort((a, b) => a.file_name.localeCompare(b.file_name));
-      }
-      this.fileList = reply;
-    })
-      .catch((errStatus) => {
-      console.error(errStatus);
-    });
-  }
-  clearErrors() {
-    this.errorList = [];
-    this.notif = null;
-  }
-  handleFiles(ev) {
-    const files = Array.from(ev.target.files);
-    const validTypes = this.fileTypes.split(" ").join(", ");
-    if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {
-      const errMessage = intl.formatMessage({
-        id: "uploader.fileUploadLimitExceeded",
-        defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
-        description: "Message displayed when trying to upload too many files",
-      });
-      this.notif = { id: 2, message: errMessage };
-      if (this.liveRegion) {
-        this.liveRegion.innerHTML = errMessage;
-      }
-    }
-    else {
-      // map to create inProgress items so they can be displayed immediately
-      files &&
-        files.map((file) => {
-          if (!hasValidType(file, this.fileTypes)) {
-            const error = {
-              file_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 = {
-              file_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 = {
-              file_name: file.name,
-              message: intl.formatMessage({
-                id: "uploader.duplicateName",
-                defaultMessage: "A file with this name already exists.",
-              }),
-            };
-            this.errorList.push(error);
-          }
-          else {
-            this.inProgressList.push(file);
-          }
-          forceUpdate(this.el);
-        });
-      if (this.inProgressList.length > 0) {
-        this.numFilesInProgress = this.inProgressList.length;
-        // map over "uploadable" files for actual upload
-        // this happens separately otherwise at each pass we'd have to wait for the requests to complete before displaying things
-        this.inProgressList.map((file, i) => {
-          this.uploadFile(file, i); // = input.files file
-        });
-      }
-    }
-    ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
-  }
-  uploadFile(file, i) {
-    // get upload link
-    getRequest(this.requestUploadPath + i.toString())
-      .then(async (reply) => {
-      const assData = JSON.parse(this.associatedData);
-      const fileInfo = Object.assign(Object.assign({}, assData), { file_name: file.name, mime_type: file.type, file_path: reply.path, document_uuid: reply.guid });
-      // onProgress is passed as a callback to the ev listener inside putRequest (http service),
-      // so we can't change component things directly => custom event to pass data to uploader component.
-      const onProgress = (ev) => {
-        const progress = ev.lengthComputable && ev.total !== 0 ? (ev.loaded / ev.total) * 100 : 0;
-        const event = new CustomEvent("wmUploadProgress", {
-          detail: { file_name: file.name, progress },
-        });
-        this.el.dispatchEvent(event);
-      };
-      // upload to AWS s3 to url we just fetched
-      await putRequest(reply.url, file, onProgress);
-      // create the db entry
-      await postRequest(this.uploadPath, fileInfo);
-      // get files from server again
-      this.getExistingFiles();
-    })
-      .catch((err) => {
-      // do not show toast on error
-      this.numFilesInProgress = null;
-      // do not show in progress item on error
-      this.inProgressList = [];
-      this.notif = {
-        id: 3,
-        message: intl.formatMessage({
-          id: "global.genericError",
-          defaultMessage: "An error occurred. Please try again.",
-        }),
-      };
-      console.error(err);
-    });
-  }
-  downloadFile(uuid, path) {
-    this.clearErrors();
-    // POST request to get temporary download link
-    const payload = {
-      file_path: path,
-      file_uuid: uuid,
-    };
-    postRequest(this.requestDownloadPath, payload)
-      .then((reply) => {
-      // we got the download link, now download the file
-      window.location.assign(reply.url);
-    })
-      .catch((err) => {
-      console.error(err);
-    });
-  }
-  deleteFile(file) {
-    this.clearErrors();
-    this.snackbar.push({
-      message: intl.formatMessage({
-        id: "uploader.fileDeleted",
-        defaultMessage: "{fileName} was deleted.",
-      }, { fileName: file.file_name }),
-      id: file.uuid,
-      link: "",
-    });
-    // rm file from list immediately.
-    this.fileList = this.fileList.filter((i) => i.uuid !== file.uuid);
-    deleteRequest(`${this.deletePath}/${file.uuid}`).catch((err) => {
-      this.notif = {
-        id: 4,
-        message: intl.formatMessage({
-          id: "uploader.fileNotDeleted",
-          defaultMessage: "{fileName} could not be deleted.",
-        }, { fileName: file.file_name }),
-      };
-      this.getExistingFiles();
-      console.error(err);
-    });
-  }
-  componentWillLoad() {
-    if (!this.getPath) {
-      throw new Error("wm-network-uploader: get-path is a required prop");
-    }
-    if (!this.requestUploadPath) {
-      throw new Error("wm-network-uploader: request-upload-path is a required prop");
-    }
-    if (!this.uploadPath) {
-      throw new Error("wm-network-uploader: upload-path is a required prop");
-    }
-    if (!this.requestDownloadPath) {
-      throw new Error("wm-network-uploader: request-download-path is a required prop");
-    }
-    if (!this.deletePath) {
-      throw new Error("wm-network-uploader: delete-path is a required prop");
-    }
-    if (!this.buttonText) {
-      throw new Error("wm-network-uploader: button-text is a required prop");
-    }
-    if (!this.emptyStateText) {
-      throw new Error("wm-network-uploader: empty-state-text is a required prop");
-    }
-    if (!this.associatedData) {
-      throw new Error("wm-network-uploader: associated-data is a required prop");
-    }
-    this.setMaxSize();
-    this.clearErrors();
-  }
-  componentDidLoad() {
-    this.getExistingFiles();
-    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.
-      // this is not pretty duplicating a intl message + the logic of isDisabled,
-      // but not worth a bigger refactor since this is only until we get the UX for disabled elements and refactor all interactive els.
-      ev.preventDefault();
-      if (this.liveRegion) {
-        const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;
-        let errMsg = "";
-        if (this.numFilesInProgress > 0) {
-          errMsg = intl.formatMessage({
-            id: "uploader.waitToUpload",
-            defaultMessage: "Please wait for current upload to complete before uploading new files.",
-            description: "Message for screen reader users",
-          });
-        }
-        else if (isMax) {
-          errMsg = intl.formatMessage({
-            id: "uploader.fileUploadLimitExceeded",
-            defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
-            description: "Message displayed when trying to upload too many files",
-          });
-        }
-        if (errMsg) {
-          // clear and set again to re-announce if button is clicked several times
-          // (can't be done inside setTimeout because of scope, hence the promise)
-          this.liveRegion.innerHTML = "";
-          new Promise((resolve) => {
-            setTimeout(() => {
-              resolve("");
-            }, 500);
-          }).then(() => (this.liveRegion.innerHTML = errMsg));
-        }
-      }
-    }
-    else {
-      this.clearErrors();
-    }
-  }
-  renderUploadSvg() {
-    return (h("svg", { class: "upload-file", width: "91", height: "84", viewBox: "0 0 91 84" },
-      h("path", { transform: "rotate(-180.000000) translate(-452, -255.5)", fill: "#eae8ec", d: "M361,249.681818 L361,197.318182 C361,194.118182 365.555061,191.5 371.122358,191.5 L391.316463,191.5 L391.286495,200.562515 L369.871211,200.600292 L369.885404,200.622146 L369.886423,246.655947 L443.657038,246.840767 L443.657038,200.622146 L421.683537,200.622146 L421.683537,191.5 L441.978865,191.5 C447.546162,191.5 452,194.118182 452,197.318182 L452,249.681818 C452,252.881818 447.546162,255.5 441.978865,255.5 L371.122358,255.5 C365.504449,255.5 361,252.881818 361,249.681818 Z M391.5,207 L406,221 L420.5,207 L409.625,207 L409.625,172 L402.375,172 L402.375,207 L391.5,207 Z" })));
-  }
-  renderIcon() {
-    // mdi attachment icon (paper clip) is horizontal but we want it vertical
-    const rotate = this.icon && this.icon === "f066";
-    return (this.icon && (h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)))));
-  }
-  renderNotif() {
-    return this.notif ? h("span", { class: "notif" }, this.notif.message) : "";
-  }
-  renderUploadButton(classes) {
-    return (h("div", { class: "notif-wrapper" },
-      h("input", { name: this.inputId, id: this.inputId, class: "sr-only", type: "file", multiple: true, onClick: (ev) => this.uploadButtonOnClick(ev), onChange: (e) => this.handleFiles(e) }),
-      h("label", { htmlFor: this.inputId, class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` },
-        this.renderIcon(),
-        this.buttonText),
-      this.renderNotif()));
-  }
-  renderWithItems() {
-    return (h("div", null,
-      h("div", { class: "header" },
-        h("div", { class: "descr" },
-          h("slot", null)),
-        this.renderUploadButton(this.isDisabled ? "disabled" : "")),
-      this.renderErrorList(),
-      this.renderInProgressList(),
-      this.renderFileList()));
-  }
-  renderEmptyState() {
-    return (h("div", null,
-      h("div", { class: "header" },
-        h("div", { class: "descr" },
-          h("slot", null))),
-      h("div", { class: "empty-block" },
-        this.renderUploadSvg(),
-        h("div", { class: "empty-message" }, this.emptyStateText),
-        this.renderUploadButton("-primary empty-button"))));
-  }
-  renderErrorList() {
-    if (!!this.errorList.length) {
-      if (this.liveRegion) {
-        let srMessage = this.errorList.reduce(function (acc, err) {
-          return acc + `${err.file_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.file_name))),
-        h("div", { class: "error-message" }, err.message))))));
-    }
-  }
-  renderInProgressList() {
-    return (h("ul", { class: "inprogress-list" }, this.inProgressList.map((item) => {
-      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" },
-              item.name,
-              " ",
-              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.file_name),
-          h("span", { class: "filedate" }, this.formatDate(item.updated_at, intl.locale, Intl.DateTimeFormat().resolvedOptions().timeZone))),
-        h("div", { class: "file-controls" },
-          h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: "download", "label-for-identical-buttons": `download ${item.file_name}`, icon: "f1da", onClick: () => this.downloadFile(item.uuid, item.file_path) }),
-          h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: "remove", "label-for-identical-buttons": `remove ${item.file_name}`, icon: "f1c0", onClick: () => this.deleteFile(item) })))));
-  }
-  renderFileList() {
-    return h("ul", { class: "file-list" }, this.fileList.map((item) => this.renderFile(item)));
-  }
-  render() {
-    return (h(Host, null,
-      this.isEmpty() ? this.renderEmptyState() : this.renderWithItems(),
-      h("wm-snackbar", { notifications: JSON.stringify(this.snackbar) }),
-      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-network-uploader"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-network-uploader.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-network-uploader.css"]
-  }; }
-  static get properties() { return {
-    "getPath": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "get-path",
-      "reflect": false
-    },
-    "requestUploadPath": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "request-upload-path",
-      "reflect": false
-    },
-    "uploadPath": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "upload-path",
-      "reflect": false
-    },
-    "requestDownloadPath": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "request-download-path",
-      "reflect": false
-    },
-    "deletePath": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "delete-path",
-      "reflect": false
-    },
-    "associatedData": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "associated-data",
-      "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
-    },
-    "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": true,
-      "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\""
-    }
-  }; }
-  static get states() { return {
-    "isTabbing": {},
-    "fileList": {},
-    "inProgressList": {},
-    "errorList": {},
-    "notif": {},
-    "snackbar": {},
-    "numFilesInProgress": {}
-  }; }
-  static get events() { return [{
-      "method": "wmNetworkUploaderFilesChanged",
-      "name": "wmNetworkUploaderFilesChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "Object[]",
-        "resolved": "Object[]",
-        "references": {
-          "Object": {
-            "location": "global"
-          }
-        }
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "maxSize",
-      "methodName": "setMaxSize"
-    }, {
-      "propName": "numFilesInProgress",
-      "methodName": "uploadNotifications"
-    }, {
-      "propName": "fileList",
-      "methodName": "emitFileListEvent"
-    }]; }
-  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": "userFinishedSnack",
-      "method": "handleFinishedSnack",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}
+import { Component, Element, h, Host, Prop, State, Listen, Watch, Event } from "@stencil/core";
+import { forceUpdate } from "@stencil/core";
+import { getRequest, postRequest, putRequest, deleteRequest } from "../../../global/services/http-service";
+import { intl, generateId, hasValidType } from "../../../global/functions";
+export class NetworkUploader {
+  constructor() {
+    this.isTabbing = false;
+    this.fileList = [];
+    this.inProgressList = [];
+    this.errorList = []; // for errors on a particular file
+    this.snackbar = [];
+    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.inputId = generateId();
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleUploadProgress(ev) {
+    this.inProgressList.map((i) => {
+      if (i.name === ev.detail.file_name) {
+        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.inProgressList.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
+        if (this.liveRegion) {
+          this.liveRegion.innerHTML = intl.formatMessage({
+            id: "uploader.uploadProgress",
+            defaultMessage: "Upload progress: {percentage}%",
+          }, { percentage: Math.floor(aggregate / total) });
+        }
+      }, 5000);
+    }
+  }
+  handleFinishedSnack(ev) {
+    this.snackbar = this.snackbar.filter((n) => n.id !== ev.detail.id);
+  }
+  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);
+    }
+  }
+  emitFileListEvent() {
+    this.wmNetworkUploaderFilesChanged.emit(this.fileList);
+  }
+  formatDate(isoDate, locale, timezone) {
+    const timestamp = Date.parse(isoDate);
+    if (locale.match(/^[a-zA-Z]*(-[a-zA-Z0-9]*)*$/g)) {
+      // make sure locale is valid, otherwise set default locale
+      try {
+        //@ts-ignore
+        Intl.getCanonicalLocales(locale);
+      }
+      catch (_a) {
+        locale = "en-us";
+      }
+    }
+    else {
+      return isoDate;
+    }
+    if (!!timestamp) {
+      const date = new Date(timestamp);
+      const year = date.getFullYear();
+      const month = ("0" + (date.getMonth() + 1)).substr(-2);
+      const day = ("0" + date.getDate()).substr(-2);
+      const time = date.toLocaleTimeString([locale, "en-us"], {
+        timeZone: timezone,
+        hour: "numeric",
+        minute: "numeric",
+      });
+      return `${year}/${month}/${day} ${time}`;
+    }
+    else {
+      return isoDate;
+    }
+  }
+  isValidSize(size) {
+    // https://stackoverflow.com/questions/2365100/converting-bytes-to-megabytes
+    return size / 1024 / 1024 <= this.maxSize;
+  }
+  isDuplicate(name) {
+    return this.fileList.find((f) => f.file_name === name);
+  }
+  isEmpty() {
+    return !this.fileList.length && !this.inProgressList.length && !this.errorList.length;
+  }
+  get isDisabled() {
+    const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;
+    if (!this.notif) {
+      if (isMax) {
+        const errMessage = intl.formatMessage({
+          id: "uploader.fileUploadLimitExceeded",
+          defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
+          description: "Message displayed when trying to upload too many files",
+        });
+        this.notif = { id: 1, message: errMessage };
+        if (this.liveRegion) {
+          this.liveRegion.innerHTML = errMessage;
+        }
+      }
+      else {
+        this.notif = null;
+      }
+    }
+    else if (this.notif.id === 1) {
+      // to make sure SR don't repeat the error, don't reset it if it already is showing
+      // just dismiss it if isMax is not true anymore
+      if (!isMax) {
+        this.notif = null;
+      }
+      // finally do nothing if error 2 is showing (special case when user selects too many files)
+    }
+    // disable if is the uploader is maxed out or if something is uploading
+    return isMax || this.numFilesInProgress > 0;
+  }
+  purgeProgressList(item) {
+    // If a file is retrieved from the server because it was just uploaded
+    // it should be removed from inProgressList
+    this.inProgressList = this.inProgressList.filter((i) => i.progress !== 100 && i.name !== item.file_name);
+  }
+  getExistingFiles() {
+    getRequest(this.getPath)
+      .then((reply) => {
+      reply.map((item) => this.purgeProgressList(item));
+      if (this.sortBy === "name") {
+        reply.sort((a, b) => a.file_name.localeCompare(b.file_name));
+      }
+      this.fileList = reply;
+    })
+      .catch((errStatus) => {
+      console.error(errStatus);
+    });
+  }
+  clearErrors() {
+    this.errorList = [];
+    this.notif = null;
+  }
+  handleFiles(ev) {
+    const files = Array.from(ev.target.files);
+    const validTypes = this.fileTypes.split(" ").join(", ");
+    if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {
+      const errMessage = intl.formatMessage({
+        id: "uploader.fileUploadLimitExceeded",
+        defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
+        description: "Message displayed when trying to upload too many files",
+      });
+      this.notif = { id: 2, message: errMessage };
+      if (this.liveRegion) {
+        this.liveRegion.innerHTML = errMessage;
+      }
+    }
+    else {
+      // map to create inProgress items so they can be displayed immediately
+      files &&
+        files.map((file) => {
+          if (!hasValidType(file, this.fileTypes)) {
+            const error = {
+              file_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 = {
+              file_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 = {
+              file_name: file.name,
+              message: intl.formatMessage({
+                id: "uploader.duplicateName",
+                defaultMessage: "A file with this name already exists.",
+              }),
+            };
+            this.errorList.push(error);
+          }
+          else {
+            this.inProgressList.push(file);
+          }
+          forceUpdate(this.el);
+        });
+      if (this.inProgressList.length > 0) {
+        this.numFilesInProgress = this.inProgressList.length;
+        // map over "uploadable" files for actual upload
+        // this happens separately otherwise at each pass we'd have to wait for the requests to complete before displaying things
+        this.inProgressList.map((file, i) => {
+          this.uploadFile(file, i); // = input.files file
+        });
+      }
+    }
+    ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
+  }
+  uploadFile(file, i) {
+    // get upload link
+    getRequest(this.requestUploadPath + i.toString())
+      .then(async (reply) => {
+      const assData = JSON.parse(this.associatedData);
+      const fileInfo = Object.assign(Object.assign({}, assData), { file_name: file.name, mime_type: file.type, file_path: reply.path, document_uuid: reply.guid });
+      // onProgress is passed as a callback to the ev listener inside putRequest (http service),
+      // so we can't change component things directly => custom event to pass data to uploader component.
+      const onProgress = (ev) => {
+        const progress = ev.lengthComputable && ev.total !== 0 ? (ev.loaded / ev.total) * 100 : 0;
+        const event = new CustomEvent("wmUploadProgress", {
+          detail: { file_name: file.name, progress },
+        });
+        this.el.dispatchEvent(event);
+      };
+      // upload to AWS s3 to url we just fetched
+      await putRequest(reply.url, file, onProgress);
+      // create the db entry
+      await postRequest(this.uploadPath, fileInfo);
+      // get files from server again
+      this.getExistingFiles();
+    })
+      .catch((err) => {
+      // do not show toast on error
+      this.numFilesInProgress = null;
+      // do not show in progress item on error
+      this.inProgressList = [];
+      this.notif = {
+        id: 3,
+        message: intl.formatMessage({
+          id: "global.genericError",
+          defaultMessage: "An error occurred. Please try again.",
+        }),
+      };
+      console.error(err);
+    });
+  }
+  downloadFile(uuid, path) {
+    this.clearErrors();
+    // POST request to get temporary download link
+    const payload = {
+      file_path: path,
+      file_uuid: uuid,
+    };
+    postRequest(this.requestDownloadPath, payload)
+      .then((reply) => {
+      // we got the download link, now download the file
+      window.location.assign(reply.url);
+    })
+      .catch((err) => {
+      console.error(err);
+    });
+  }
+  deleteFile(file) {
+    this.clearErrors();
+    this.snackbar.push({
+      message: intl.formatMessage({
+        id: "uploader.fileDeleted",
+        defaultMessage: "{fileName} was deleted.",
+      }, { fileName: file.file_name }),
+      id: file.uuid,
+      link: "",
+    });
+    // rm file from list immediately.
+    this.fileList = this.fileList.filter((i) => i.uuid !== file.uuid);
+    deleteRequest(`${this.deletePath}/${file.uuid}`).catch((err) => {
+      this.notif = {
+        id: 4,
+        message: intl.formatMessage({
+          id: "uploader.fileNotDeleted",
+          defaultMessage: "{fileName} could not be deleted.",
+        }, { fileName: file.file_name }),
+      };
+      this.getExistingFiles();
+      console.error(err);
+    });
+  }
+  componentWillLoad() {
+    if (!this.getPath) {
+      throw new Error("wm-network-uploader: get-path is a required prop");
+    }
+    if (!this.requestUploadPath) {
+      throw new Error("wm-network-uploader: request-upload-path is a required prop");
+    }
+    if (!this.uploadPath) {
+      throw new Error("wm-network-uploader: upload-path is a required prop");
+    }
+    if (!this.requestDownloadPath) {
+      throw new Error("wm-network-uploader: request-download-path is a required prop");
+    }
+    if (!this.deletePath) {
+      throw new Error("wm-network-uploader: delete-path is a required prop");
+    }
+    if (!this.buttonText) {
+      throw new Error("wm-network-uploader: button-text is a required prop");
+    }
+    if (!this.emptyStateText) {
+      throw new Error("wm-network-uploader: empty-state-text is a required prop");
+    }
+    if (!this.associatedData) {
+      throw new Error("wm-network-uploader: associated-data is a required prop");
+    }
+    this.setMaxSize();
+    this.clearErrors();
+  }
+  componentDidLoad() {
+    this.getExistingFiles();
+    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.
+      // this is not pretty duplicating a intl message + the logic of isDisabled,
+      // but not worth a bigger refactor since this is only until we get the UX for disabled elements and refactor all interactive els.
+      ev.preventDefault();
+      if (this.liveRegion) {
+        const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;
+        let errMsg = "";
+        if (this.numFilesInProgress > 0) {
+          errMsg = intl.formatMessage({
+            id: "uploader.waitToUpload",
+            defaultMessage: "Please wait for current upload to complete before uploading new files.",
+            description: "Message for screen reader users",
+          });
+        }
+        else if (isMax) {
+          errMsg = intl.formatMessage({
+            id: "uploader.fileUploadLimitExceeded",
+            defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
+            description: "Message displayed when trying to upload too many files",
+          });
+        }
+        if (errMsg) {
+          // clear and set again to re-announce if button is clicked several times
+          // (can't be done inside setTimeout because of scope, hence the promise)
+          this.liveRegion.innerHTML = "";
+          new Promise((resolve) => {
+            setTimeout(() => {
+              resolve("");
+            }, 500);
+          }).then(() => (this.liveRegion.innerHTML = errMsg));
+        }
+      }
+    }
+    else {
+      this.clearErrors();
+    }
+  }
+  renderUploadSvg() {
+    return (h("svg", { class: "upload-file", width: "91", height: "84", viewBox: "0 0 91 84" },
+      h("path", { transform: "rotate(-180.000000) translate(-452, -255.5)", fill: "#eae8ec", d: "M361,249.681818 L361,197.318182 C361,194.118182 365.555061,191.5 371.122358,191.5 L391.316463,191.5 L391.286495,200.562515 L369.871211,200.600292 L369.885404,200.622146 L369.886423,246.655947 L443.657038,246.840767 L443.657038,200.622146 L421.683537,200.622146 L421.683537,191.5 L441.978865,191.5 C447.546162,191.5 452,194.118182 452,197.318182 L452,249.681818 C452,252.881818 447.546162,255.5 441.978865,255.5 L371.122358,255.5 C365.504449,255.5 361,252.881818 361,249.681818 Z M391.5,207 L406,221 L420.5,207 L409.625,207 L409.625,172 L402.375,172 L402.375,207 L391.5,207 Z" })));
+  }
+  renderIcon() {
+    // mdi attachment icon (paper clip) is horizontal but we want it vertical
+    const rotate = this.icon && this.icon === "f066";
+    return (this.icon && (h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)))));
+  }
+  renderNotif() {
+    return this.notif ? h("span", { class: "notif" }, this.notif.message) : "";
+  }
+  renderUploadButton(classes) {
+    return (h("div", { class: "notif-wrapper" },
+      h("input", { name: this.inputId, id: this.inputId, class: "sr-only", type: "file", multiple: true, onClick: (ev) => this.uploadButtonOnClick(ev), onChange: (e) => this.handleFiles(e) }),
+      h("label", { htmlFor: this.inputId, class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` },
+        this.renderIcon(),
+        this.buttonText),
+      this.renderNotif()));
+  }
+  renderWithItems() {
+    return (h("div", null,
+      h("div", { class: "header" },
+        h("div", { class: "descr" },
+          h("slot", null)),
+        this.renderUploadButton(this.isDisabled ? "disabled" : "")),
+      this.renderErrorList(),
+      this.renderInProgressList(),
+      this.renderFileList()));
+  }
+  renderEmptyState() {
+    return (h("div", null,
+      h("div", { class: "header" },
+        h("div", { class: "descr" },
+          h("slot", null))),
+      h("div", { class: "empty-block" },
+        this.renderUploadSvg(),
+        h("div", { class: "empty-message" }, this.emptyStateText),
+        this.renderUploadButton("-primary empty-button"))));
+  }
+  renderErrorList() {
+    if (!!this.errorList.length) {
+      if (this.liveRegion) {
+        let srMessage = this.errorList.reduce(function (acc, err) {
+          return acc + `${err.file_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.file_name))),
+        h("div", { class: "error-message" }, err.message))))));
+    }
+  }
+  renderInProgressList() {
+    return (h("ul", { class: "inprogress-list" }, this.inProgressList.map((item) => {
+      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" },
+              item.name,
+              " ",
+              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.file_name),
+          h("span", { class: "filedate" }, this.formatDate(item.updated_at, intl.locale, Intl.DateTimeFormat().resolvedOptions().timeZone))),
+        h("div", { class: "file-controls" },
+          h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: "download", "label-for-identical-buttons": `download ${item.file_name}`, icon: "f1da", onClick: () => this.downloadFile(item.uuid, item.file_path) }),
+          h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: "remove", "label-for-identical-buttons": `remove ${item.file_name}`, icon: "f1c0", onClick: () => this.deleteFile(item) })))));
+  }
+  renderFileList() {
+    return h("ul", { class: "file-list" }, this.fileList.map((item) => this.renderFile(item)));
+  }
+  render() {
+    return (h(Host, null,
+      this.isEmpty() ? this.renderEmptyState() : this.renderWithItems(),
+      h("wm-snackbar", { notifications: JSON.stringify(this.snackbar) }),
+      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-network-uploader"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-network-uploader.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-network-uploader.css"]
+  }; }
+  static get properties() { return {
+    "getPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "get-path",
+      "reflect": false
+    },
+    "requestUploadPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "request-upload-path",
+      "reflect": false
+    },
+    "uploadPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "upload-path",
+      "reflect": false
+    },
+    "requestDownloadPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "request-download-path",
+      "reflect": false
+    },
+    "deletePath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "delete-path",
+      "reflect": false
+    },
+    "associatedData": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "associated-data",
+      "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
+    },
+    "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": true,
+      "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\""
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {},
+    "fileList": {},
+    "inProgressList": {},
+    "errorList": {},
+    "notif": {},
+    "snackbar": {},
+    "numFilesInProgress": {}
+  }; }
+  static get events() { return [{
+      "method": "wmNetworkUploaderFilesChanged",
+      "name": "wmNetworkUploaderFilesChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Object[]",
+        "resolved": "Object[]",
+        "references": {
+          "Object": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "maxSize",
+      "methodName": "setMaxSize"
+    }, {
+      "propName": "numFilesInProgress",
+      "methodName": "uploadNotifications"
+    }, {
+      "propName": "fileList",
+      "methodName": "emitFileListEvent"
+    }]; }
+  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": "userFinishedSnack",
+      "method": "handleFinishedSnack",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}