@watermarkinsights/ripple 4.2.0-1 → 4.2.0

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

@@ -1,431 +1,430 @@
 import { h, Host, forceUpdate, } from "@stencil/core";
 import { uploaderMessages } from "../../global/intl";
 export class Uploader {
-    constructor() {
-        this.batchCount = 0; // used to calculate the aggregate upload progress
-        this.prevUploadCount = 0; // comparison to determine whether or not to announce updated count
+  constructor() {
+    this.batchCount = 0; // used to calculate the aggregate upload progress
+    this.prevUploadCount = 0; // comparison to determine whether or not to announce updated count
+    this.fileIdToDelete = "";
+    this.label = undefined;
+    this.buttonText = undefined;
+    this.icon = undefined;
+    this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
+    this.maxSize = undefined;
+    this.maxFiles = undefined;
+    this.errorMessage = undefined;
+    this.requiredField = undefined;
+    this.showInfo = "time";
+    this.isTabbing = false;
+    this.notif = "";
+    this.announcement = "";
+    this.isCondensed = false;
+  }
+  get isDisabled() {
+    // disable if is the uploader is maxed out or if something is uploading
+    return this.fileLimitReached || this.inProgressFileEls.length > 0;
+  }
+  get fileEls() {
+    return Array.from(this.el.querySelectorAll("wm-file"));
+  }
+  get inProgressFileEls() {
+    return this.fileEls.filter((file) => file.progress !== undefined && file.progress < 100);
+  }
+  get uploadedFileEls() {
+    return this.fileEls.filter((file) => !file.errorMessage);
+  }
+  get fileLimitReached() {
+    return this.maxFiles && this.uploadedFileEls.length >= this.maxFiles;
+  }
+  get validTypes() {
+    return "." + this.fileTypes.split(" ").join(", .");
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleFileErrorCleared() {
+    this.uploadButtonEl.focus();
+  }
+  storeDeletedId(ev) {
+    this.fileIdToDelete = ev.target.id;
+  }
+  handleErrorMessageChange() {
+    if (this.errorMessage) {
+      this.announce(this.errorMessage);
+    }
+  }
+  componentWillLoad() {
+    if (!this.buttonText) {
+      console.error("wm-uploader: button-text is a required property");
+    }
+  }
+  componentDidLoad() {
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+    const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((mutationRecord) => this.handleChildMutation(mutationRecord)));
+    mutationObserver.observe(this.el, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeOldValue: true,
+      attributeFilter: ["progress"],
+    });
+  }
+  handleChildMutation(mutationRecord) {
+    if (mutationRecord.type === "attributes") {
+      this.handleProgressUpdate(mutationRecord);
+    }
+    else if (mutationRecord.type === "childList") {
+      // if user prompted the removal of a single file (they hit the delete button)
+      if (this.isTabbing &&
+        mutationRecord.removedNodes.length === 1 &&
+        mutationRecord.removedNodes[0].id === this.fileIdToDelete) {
+        this.focusAfterFileRemoval(mutationRecord);
         this.fileIdToDelete = "";
-        this.label = undefined;
-        this.buttonText = undefined;
-        this.icon = undefined;
-        this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
-        this.maxSize = undefined;
-        this.maxFiles = undefined;
-        this.errorMessage = undefined;
-        this.requiredField = undefined;
-        this.showInfo = "time";
-        this.isTabbing = false;
+      }
+      forceUpdate(this.el); // forceUpdate to rerender filecount
+    }
+  }
+  handleProgressUpdate(mutationRecord) {
+    if (this.inProgressFileEls.length !== 0) {
+      const changeInUploadingFiles = this.prevUploadCount !== this.inProgressFileEls.length;
+      changeInUploadingFiles && this.announce(uploaderMessages.getFilesUploading(this.inProgressFileEls.length));
+      this.notif = uploaderMessages.getFilesUploading(this.inProgressFileEls.length);
+      this.prevUploadCount = this.inProgressFileEls.length;
+      if (!this.srProgress) {
+        this.srProgress = setInterval(() => {
+          const aggregate = this.fileEls.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
+          this.announce(uploaderMessages.getUploadProgress(Math.floor(aggregate / this.batchCount)));
+        }, 5000);
+      }
+    }
+    else if (this.inProgressFileEls.length === 0 &&
+      mutationRecord.oldValue &&
+      parseInt(mutationRecord.oldValue) < 100) {
+      // if final file progress completes
+      this.notif = uploaderMessages.finishedUploading;
+      this.announce(uploaderMessages.finishedUploading);
+      clearInterval(this.srProgress);
+      setTimeout(() => {
         this.notif = "";
-        this.announcement = "";
-        this.isCondensed = false;
-    }
-    get isDisabled() {
-        // disable if is the uploader is maxed out or if something is uploading
-        return this.fileLimitReached || this.inProgressFileEls.length > 0;
-    }
-    get fileEls() {
-        return Array.from(this.el.querySelectorAll("wm-file"));
-    }
-    get inProgressFileEls() {
-        return this.fileEls.filter((file) => file.progress !== undefined && file.progress < 100);
-    }
-    get uploadedFileEls() {
-        return this.fileEls.filter((file) => !file.errorMessage);
-    }
-    get fileLimitReached() {
-        return this.maxFiles && this.uploadedFileEls.length >= this.maxFiles;
-    }
-    get validTypes() {
-        return "." + this.fileTypes.split(" ").join(", .");
-    }
-    toggleTabbingOn() {
-        this.isTabbing = true;
-    }
-    toggleTabbingOff() {
-        this.isTabbing = false;
-    }
-    handleFileErrorCleared() {
-        this.uploadButtonEl.focus();
-    }
-    storeDeletedId(ev) {
-        this.fileIdToDelete = ev.target.id;
-    }
-    handleErrorMessageChange() {
-        if (this.errorMessage) {
-            this.announce(this.errorMessage);
-        }
-    }
-    componentWillLoad() {
-        if (!this.buttonText) {
-            console.error("wm-uploader: button-text is a required property");
-        }
-    }
-    componentDidLoad() {
-        if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-            this.toggleTabbingOn();
-        }
-        const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((mutationRecord) => this.handleChildMutation(mutationRecord)));
-        mutationObserver.observe(this.el, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeOldValue: true,
-            attributeFilter: ["progress"],
-        });
-    }
-    handleChildMutation(mutationRecord) {
-        if (mutationRecord.type === "attributes") {
-            this.handleProgressUpdate(mutationRecord);
-        }
-        else if (mutationRecord.type === "childList") {
-            // if user prompted the removal of a single file (they hit the delete button)
-            if (this.isTabbing &&
-                mutationRecord.removedNodes.length === 1 &&
-                mutationRecord.removedNodes[0].id === this.fileIdToDelete) {
-                this.focusAfterFileRemoval(mutationRecord);
-                this.fileIdToDelete = "";
+      }, 20 * 1000);
+    }
+  }
+  focusAfterFileRemoval(mutationRecord) {
+    let previousSibling = mutationRecord.previousSibling;
+    // .previousSibling can sometimes grab #text nodes but unfortunately mutationRecord does not hold .previousElementSibling
+    // so we need to loop upwards until we find a wm-file with a button to focus, or null
+    while (previousSibling &&
+      !(previousSibling.nodeName === "WM-FILE" &&
+        previousSibling.shadowRoot.querySelector("wm-button"))) {
+      previousSibling = previousSibling.previousSibling;
+    }
+    if (previousSibling) {
+      const fileActionButtons = previousSibling.shadowRoot.querySelectorAll("wm-button");
+      fileActionButtons[fileActionButtons.length - 1].focus();
+    }
+    else {
+      this.uploadButtonEl.focus();
+    }
+  }
+  handleUploadButtonClick(ev) {
+    if (this.isDisabled) {
+      // this is a temporary fix.
+      // we need the disabled button to be programmatically focusable
+      // to allow return focus after closing the browser file panel
+      // since it's focusable the button should respond when activated
+      // it looks disabled, and announces the reason why the action cannot
+      // be taken when activated.
+      ev.preventDefault();
+      if (this.inProgressFileEls.length > 0) {
+        this.announce(uploaderMessages.waitToUpload);
+      }
+      else if (this.fileLimitReached) {
+        this.announce(uploaderMessages.fileLimitReached);
+      }
+    }
+  }
+  handleUploadButtonChange(ev) {
+    const inputEl = ev.target;
+    if (inputEl.files) {
+      const files = Array.from(inputEl.files);
+      if (files.length > 0) {
+        this.batchCount = files.length;
+        this.wmUploaderFilesSelected.emit(files);
+      }
+      ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
+    }
+  }
+  announce(message) {
+    if (this.liveRegion.textContent === message) {
+      message += "\u00A0";
+    }
+    this.announcement = message;
+  }
+  renderIcon() {
+    // mdi attachment icon (paper clip) is horizontal but we want it vertical
+    const rotate = this.icon && this.icon === "f066";
+    return h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)));
+  }
+  renderUploadButton(classes) {
+    let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : ""}${this.buttonText}`;
+    return (h("div", { class: "info-wrapper" }, h("input", { name: "input", id: "input", ref: (el) => (this.uploadButtonEl = el), class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.errorMessage ? "error " : ""}file-count max-size accepted-types`, type: "file", multiple: true, onClick: (ev) => this.handleUploadButtonClick(ev), onChange: (ev) => this.handleUploadButtonChange(ev) }), h("label", { htmlFor: "input", class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` }, this.icon && this.renderIcon(), this.buttonText)));
+  }
+  renderHeader() {
+    return (h("div", { class: "header" }, h("div", { class: "notif-wrapper" }, this.renderUploadButton(`-secondary ${this.isDisabled ? "disabled" : ""}`), this.renderRequirements()), h("div", { id: "accepted-types", class: "accepted-types" }, uploaderMessages.getAcceptedFileTypes(this.validTypes, this.fileTypes.split(" ").length)), this.notif && h("div", { class: "notif" }, this.notif), this.errorMessage && h("div", { id: "error" }, this.errorMessage)));
+  }
+  renderRequirements() {
+    return (h("div", { class: "requirements" }, this.maxFiles && (h("span", { id: "file-count" }, uploaderMessages.getFileCount(this.uploadedFileEls.length, this.maxFiles))), this.maxSize && h("span", { id: "max-size" }, uploaderMessages.getMaxSize(this.maxSize))));
+  }
+  renderListContainer() {
+    const hasNewlyUploadedFiles = this.fileEls.filter((file) => file.progress && file.progress === 100).length;
+    return (h("div", { class: `list-container ${hasNewlyUploadedFiles ? "checkmark-spacer" : ""}` }, h("ul", { class: "file-list" }, h("slot", null))));
+  }
+  renderLabel() {
+    return (h("div", { class: `wrapper ${this.errorMessage ? "invalid" : ""}` }, h("div", { 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.renderHeader(), this.renderListContainer(), 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 {
+      "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
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "fileTypes": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "file-types",
+        "reflect": false,
+        "defaultValue": "\"pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv\""
+      },
+      "maxSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-size",
+        "reflect": false
+      },
+      "maxFiles": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-files",
+        "reflect": false
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-message",
+        "reflect": false
+      },
+      "requiredField": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required-field",
+        "reflect": false
+      },
+      "showInfo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"size\" | \"time\" | \"none\"",
+          "resolved": "\"none\" | \"size\" | \"time\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-info",
+        "reflect": false,
+        "defaultValue": "\"time\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isTabbing": {},
+      "notif": {},
+      "announcement": {},
+      "isCondensed": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "wmUploaderFilesSelected",
+        "name": "wmUploaderFilesSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "File[]",
+          "resolved": "File[]",
+          "references": {
+            "File": {
+              "location": "global"
             }
-            forceUpdate(this.el); // forceUpdate to rerender filecount
-        }
-    }
-    handleProgressUpdate(mutationRecord) {
-        if (this.inProgressFileEls.length !== 0) {
-            const changeInUploadingFiles = this.prevUploadCount !== this.inProgressFileEls.length;
-            changeInUploadingFiles && this.announce(uploaderMessages.getFilesUploading(this.inProgressFileEls.length));
-            this.notif = uploaderMessages.getFilesUploading(this.inProgressFileEls.length);
-            this.prevUploadCount = this.inProgressFileEls.length;
-            if (!this.srProgress) {
-                this.srProgress = setInterval(() => {
-                    const aggregate = this.fileEls.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
-                    this.announce(uploaderMessages.getUploadProgress(Math.floor(aggregate / this.batchCount)));
-                }, 5000);
-            }
-        }
-        else if (this.inProgressFileEls.length === 0 &&
-            mutationRecord.oldValue &&
-            parseInt(mutationRecord.oldValue) < 100) {
-            // if final file progress completes
-            this.notif = uploaderMessages.finishedUploading;
-            this.announce(uploaderMessages.finishedUploading);
-            clearInterval(this.srProgress);
-            setTimeout(() => {
-                this.notif = "";
-            }, 20 * 1000);
-        }
-    }
-    focusAfterFileRemoval(mutationRecord) {
-        let previousSibling = mutationRecord.previousSibling;
-        // .previousSibling can sometimes grab #text nodes but unfortunately mutationRecord does not hold .previousElementSibling
-        // so we need to loop upwards until we find a wm-file with a button to focus, or null
-        while (previousSibling &&
-            !(previousSibling.nodeName === "WM-FILE" &&
-                previousSibling.shadowRoot.querySelector("wm-button"))) {
-            previousSibling = previousSibling.previousSibling;
-        }
-        if (previousSibling) {
-            const fileActionButtons = previousSibling.shadowRoot.querySelectorAll("wm-button");
-            fileActionButtons[fileActionButtons.length - 1].focus();
-        }
-        else {
-            this.uploadButtonEl.focus();
+          }
         }
-    }
-    handleUploadButtonClick(ev) {
-        if (this.isDisabled) {
-            // this is a temporary fix.
-            // we need the disabled button to be programmatically focusable
-            // to allow return focus after closing the browser file panel
-            // since it's focusable the button should respond when activated
-            // it looks disabled, and announces the reason why the action cannot
-            // be taken when activated.
-            ev.preventDefault();
-            if (this.inProgressFileEls.length > 0) {
-                this.announce(uploaderMessages.waitToUpload);
-            }
-            else if (this.fileLimitReached) {
-                this.announce(uploaderMessages.fileLimitReached);
-            }
-        }
-    }
-    handleUploadButtonChange(ev) {
-        const inputEl = ev.target;
-        if (inputEl.files) {
-            const files = Array.from(inputEl.files);
-            if (files.length > 0) {
-                this.batchCount = files.length;
-                this.wmUploaderFilesSelected.emit(files);
-            }
-            ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
-        }
-    }
-    announce(message) {
-        if (this.liveRegion.textContent === message) {
-            message += "\u00A0";
-        }
-        this.announcement = message;
-    }
-    renderIcon() {
-        // mdi attachment icon (paper clip) is horizontal but we want it vertical
-        const rotate = this.icon && this.icon === "f066";
-        return h("span", { class: `mdi ${rotate ? "rotate" : ""}` }, String.fromCodePoint(parseInt(`0x${this.icon}`)));
-    }
-    renderUploadButton(classes) {
-        let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : ""}${this.buttonText}`;
-        return (h("div", { class: "info-wrapper" }, h("input", { name: "input", id: "input", ref: (el) => (this.uploadButtonEl = el), class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.errorMessage ? "error " : ""}file-count max-size accepted-types`, type: "file", multiple: true, onClick: (ev) => this.handleUploadButtonClick(ev), onChange: (ev) => this.handleUploadButtonChange(ev) }), h("label", { htmlFor: "input", class: `wm-button ${classes}${this.isTabbing ? " user-is-tabbing" : ""}` }, this.icon && this.renderIcon(), this.buttonText)));
-    }
-    renderHeader() {
-        return (h("div", { class: "header" }, h("div", { class: "notif-wrapper" }, this.renderUploadButton(`-secondary ${this.isDisabled ? "disabled" : ""}`), this.renderRequirements()), h("div", { id: "accepted-types", class: "accepted-types" }, uploaderMessages.getAcceptedFileTypes(this.validTypes, this.fileTypes.split(" ").length)), this.notif && h("div", { class: "notif" }, this.notif), this.errorMessage && h("div", { id: "error" }, this.errorMessage)));
-    }
-    renderRequirements() {
-        return (h("div", { class: "requirements" }, this.maxFiles && (h("span", { id: "file-count" }, uploaderMessages.getFileCount(this.uploadedFileEls.length, this.maxFiles))), this.maxSize && h("span", { id: "max-size" }, uploaderMessages.getMaxSize(this.maxSize))));
-    }
-    renderListContainer() {
-        const hasNewlyUploadedFiles = this.fileEls.filter((file) => file.progress && file.progress === 100).length;
-        return (h("div", { class: `list-container ${hasNewlyUploadedFiles ? "checkmark-spacer" : ""}` }, h("ul", { class: "file-list" }, h("slot", null))));
-    }
-    renderLabel() {
-        return (h("div", { class: `wrapper ${this.errorMessage ? "invalid" : ""}` }, h("div", { 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.renderHeader(), this.renderListContainer(), 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 {
-            "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
-            },
-            "icon": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "icon",
-                "reflect": false
-            },
-            "fileTypes": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "file-types",
-                "reflect": false,
-                "defaultValue": "\"pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv\""
-            },
-            "maxSize": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "max-size",
-                "reflect": false
-            },
-            "maxFiles": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "max-files",
-                "reflect": false
-            },
-            "errorMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "error-message",
-                "reflect": false
-            },
-            "requiredField": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "required-field",
-                "reflect": false
-            },
-            "showInfo": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"size\" | \"time\" | \"none\"",
-                    "resolved": "\"none\" | \"size\" | \"time\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "show-info",
-                "reflect": false,
-                "defaultValue": "\"time\""
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isTabbing": {},
-            "notif": {},
-            "announcement": {},
-            "isCondensed": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "wmUploaderFilesSelected",
-                "name": "wmUploaderFilesSelected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "File[]",
-                    "resolved": "File[]",
-                    "references": {
-                        "File": {
-                            "location": "global",
-                            "id": "global::File"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "errorMessage",
-                "methodName": "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": "wmFileErrorCleared",
-                "method": "handleFileErrorCleared",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmFileDelete",
-                "method": "storeDeletedId",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "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": "wmFileErrorCleared",
+        "method": "handleFileErrorCleared",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmFileDelete",
+        "method": "storeDeletedId",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }