@watermarkinsights/ripple 4.3.0 → 4.4.0-0

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

@@ -1,430 +1,431 @@
 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
-    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);
+    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 = "";
-      }
-      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.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 = "";
-      }, 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"
+        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 = "";
             }
-          }
+            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();
         }
-      }];
-  }
-  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
-      }];
-  }
+    }
+    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
+            }];
+    }
 }