@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

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

@@ -0,0 +1,760 @@
+import { h, Host, forceUpdate, } from "@stencil/core";
+import { uploaderMessages } from "../../global/intl";
+import { intl, hideTooltip, showTooltip } from "../../global/functions";
+/**
+ * File upload component for attaching files. Composed of a trigger button and a list of
+ * wm-file children. Two variants: `'select'` opens the browser file picker; `'drop'` adds a
+ * drag-and-drop area. The component emits events when files are selected and when file
+ * actions are triggered — the application is responsible for validation, upload, and managing
+ * the file list. Use wm-file-list instead when displaying files without uploading.
+ *
+ * @category Form Inputs
+ *
+ * @slot - One or more wm-file children representing the current file list.
+ *
+ * @accessibility
+ * - The number of in-progress uploads and aggregate upload percentage are announced via
+ *   `aria-live` regions.
+ * - Deletion focus is managed automatically: moves to the next file, then the previous file,
+ *   then the upload button.
+ * - The `progress` prop on wm-file children must be kept up to date for proper screen reader
+ *   accessibility.
+ *
+ * @usageNotes
+ * - `button-text` is required.
+ * - Validate files (type, size, count) in the `wmUploaderFilesSelected` handler; set
+ *   `error-message` on the uploader or on individual wm-file elements externally.
+ * - Announce file deletions to screen readers using wm-snackbar.
+ * - `drop-area="page"` expands the drop zone to the full page while dragging; only valid
+ *   when `uploader-type="drop"`.
+ *
+ * @example {html} Select variant
+ * <wm-uploader button-text="Attach files" icon="#attach" label="Project documents">
+ *   <wm-file id="f1" name="proposal" type="pdf" size="1.2 MB"></wm-file>
+ * </wm-uploader>
+ *
+ * @example {react} Select variant with file list management
+ * // wmUploaderFilesSelected emits a FileList -- use Array.from() to iterate.
+ * // Extract name (without extension) and type (extension only) for each wm-file child.
+ * // wmFileDelete fires on the wm-file element; use e.target.id to identify which to remove.
+ * // showInfo on the uploader propagates automatically to all wm-file children.
+ * let nextId = 1;
+ * const [files, setFiles] = useState([]);
+ *
+ * const handleFilesSelected = (e) => {
+ *   const newFiles = Array.from(e.detail).map((file) => {
+ *     const lastDot = file.name.lastIndexOf(".");
+ *     const name = lastDot > 0 ? file.name.slice(0, lastDot) : file.name;
+ *     const type = lastDot > 0 ? file.name.slice(lastDot + 1) : "file";
+ *     return { id: String(nextId++), name, type, size: `${(file.size / 1024).toFixed(1)} KB` };
+ *   });
+ *   setFiles((prev) => [...prev, ...newFiles]);
+ * };
+ *
+ * const handleDelete = (e) => {
+ *   const id = e.target.id;
+ *   setFiles((prev) => prev.filter((f) => f.id !== id));
+ * };
+ *
+ * <WmUploader buttonText="Attach files" icon="#attach" label="Project documents" showInfo="size"
+ *   onWmUploaderFilesSelected={handleFilesSelected}>
+ *   {files.map((f) => (
+ *     <WmFile key={f.id} id={f.id} name={f.name} type={f.type} size={f.size}
+ *       onWmFileDelete={handleDelete} />
+ *   ))}
+ * </WmUploader>
+ *
+ * @example {html} Drop variant
+ * <wm-uploader uploader-type="drop" button-text="Upload files" icon="#upload">
+ * </wm-uploader>
+ *
+ * @example {react} Drop variant
+ * <WmUploader uploaderType="drop" buttonText="Upload files" icon="#upload"
+ *   onWmUploaderFilesSelected={handleFilesSelected} />
+ *
+ * @requiredSetup
+ * - Handle `wmUploaderFilesSelected` (`event.detail` is an array of browser `File` objects) and hold
+ *   the files in your own state.
+ * - Validate type, size, and count in that handler and report problems through `error-message`.
+ *   `file-types` and `max-size` are shown to the user but not enforced, and `max-files` only
+ *   disables the control once that many wm-file children exist.
+ * - Render a wm-file per accepted file, and handle its `wmFileDelete` -- identify the file with
+ *   `event.target.id` -- by removing it from state.
+ * - Update each wm-file `progress` as the upload proceeds; it drives the progress bar and the
+ *   aria-live announcement.
+ *
+ *
+ */
+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.label = undefined;
+        this.uploaderType = "select";
+        this.dropArea = "component";
+        this.buttonText = undefined;
+        this.icon = undefined;
+        this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
+        this.maxSize = undefined;
+        this.maxFiles = undefined;
+        this.errorMessage = undefined;
+        this.requiredField = undefined;
+        this.showInfo = "time";
+        this.isTabbing = false;
+        this.notif = "";
+        this.isCondensed = false;
+    }
+    get isDisabled() {
+        // disable if is the uploader is maxed out or if something is uploading
+        return this.fileLimitReached || this.inProgressFileEls.length > 0;
+    }
+    get fileEls() {
+        return Array.from(this.el.querySelectorAll("wm-file"));
+    }
+    get inProgressFileEls() {
+        return this.fileEls.filter((file) => file.progress !== undefined && file.progress < 100);
+    }
+    get uploadedFileEls() {
+        return this.fileEls.filter((file) => !file.errorMessage);
+    }
+    get fileLimitReached() {
+        return this.maxFiles && this.uploadedFileEls.length >= this.maxFiles;
+    }
+    get validTypes() {
+        return "." + this.fileTypes.split(" ").join(", .");
+    }
+    toggleTabbingOn() {
+        this.isTabbing = true;
+    }
+    toggleTabbingOff() {
+        this.isTabbing = false;
+    }
+    handleFileErrorCleared() {
+        this.uploadButtonEl.focus();
+    }
+    handleFileDelete(ev) {
+        const focusableFileEls = this.fileEls.filter((file) => !!file.fileActions);
+        this.deletedEl = ev.target;
+        const index = focusableFileEls.indexOf(this.deletedEl);
+        // actual focus will called only after el is removed from DOM
+        if (focusableFileEls.length === 1) {
+            // it was the only item, focus the upload button
+            this.elToFocusOnDelete = this.uploadButtonEl;
+        }
+        else if (index === focusableFileEls.length - 1) {
+            // it's the last item, focus the previous file
+            const fileToFocus = focusableFileEls[index - 1];
+            const fileActionButtons = fileToFocus.shadowRoot.querySelectorAll("wm-button");
+            this.elToFocusOnDelete = fileActionButtons[fileActionButtons.length - 1];
+        }
+        else {
+            // otherwise focus the next file
+            const fileToFocus = focusableFileEls[index + 1];
+            const fileActionButtons = fileToFocus.shadowRoot.querySelectorAll("wm-button");
+            this.elToFocusOnDelete = fileActionButtons[fileActionButtons.length - 1];
+        }
+    }
+    announceError() {
+        if (this.errorMessage) {
+            setTimeout(() => this.announce(this.errorMessage, this.politeLiveRegionEl), 100);
+        }
+    }
+    ///////// Drop Event Handling ////////
+    handleDocumentDragEnter() {
+        if (this.uploaderType == "drop") {
+            this.beginDropListening();
+        }
+    }
+    handleDocumentMouseOut() {
+        if (this.uploaderType == "drop" && this.dropAreaEl) {
+            this.endDropListening();
+        }
+    }
+    handleDocumentDragLeave(ev) {
+        if (this.uploaderType == "drop") {
+            // Do not end drop listening for events that bubble up from children of this uploader
+            if (ev.target.closest("wm-uploader") == this.el) {
+                this.endDropListening();
+            }
+        }
+    }
+    handleDocumentVisibilityChange() {
+        // If a file is dropped outside of the drop area, if the browser opens the file in new tab, a dragleave event is not fired. This handles that case
+        if (this.uploaderType == "drop") {
+            this.endDropListening();
+        }
+    }
+    handleDragEnter(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+            this.el.classList.add("dragging");
+        }
+    }
+    handleDragOver(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+        }
+    }
+    handleDragLeave(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+            this.endDropListening();
+            this.el.classList.remove("dragging");
+        }
+    }
+    handleDrop(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+            this.el.classList.remove("dragging");
+            this.endDropListening();
+            if (ev.dataTransfer.files) {
+                const files = Array.from(ev.dataTransfer.files);
+                if (files.length > 0) {
+                    this.batchCount = files.length;
+                    this.wmUploaderFilesSelected.emit(files);
+                }
+            }
+        }
+    }
+    beginDropListening() {
+        if (this.dropArea == "page") {
+            this.dropOverlayEl.showPopover();
+        }
+        this.dropAreaEl.classList.add("listening");
+    }
+    endDropListening() {
+        if (this.dropArea == "page") {
+            this.dropOverlayEl.hidePopover();
+        }
+        this.dropAreaEl.classList.remove("listening");
+    }
+    componentDidLoad() {
+        if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+            this.toggleTabbingOn();
+        }
+        const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((mutationRecord) => this.handleChildMutation(mutationRecord)));
+        mutationObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeOldValue: true,
+            attributeFilter: ["progress"],
+        });
+    }
+    handleChildMutation(mutationRecord) {
+        if (mutationRecord.type === "attributes") {
+            this.handleProgressUpdate(mutationRecord);
+        }
+        else if (mutationRecord.type === "childList") {
+            // if user prompted the removal of a single file (they hit the delete button)
+            // re-assigning focus handled here because component shouldn't assume the node removal based on the event firing
+            const removedEls = mutationRecord.removedNodes;
+            const removedEl = removedEls[0];
+            if (removedEls.length === 1 && removedEl === this.deletedEl && this.elToFocusOnDelete) {
+                this.elToFocusOnDelete.focus();
+                this.deletedEl = null;
+                this.elToFocusOnDelete = null;
+            }
+            // on added wm-files, if wm-file has an error, announce
+            if (mutationRecord.addedNodes.length > 0) {
+                mutationRecord.addedNodes.forEach((addedFile) => {
+                    if (addedFile.errorMessage) {
+                        setTimeout(() => this.announce(addedFile.errorMessage, this.politeLiveRegionEl), 500);
+                    }
+                });
+            }
+            forceUpdate(this.el); // forceUpdate to rerender filecount
+        }
+    }
+    handleProgressUpdate(mutationRecord) {
+        const uploadCount = this.inProgressFileEls.length;
+        if (uploadCount !== 0) {
+            const changeInUploadingFiles = this.prevUploadCount !== uploadCount;
+            changeInUploadingFiles &&
+                this.announce(uploaderMessages.getFilesUploading(uploadCount), this.assertiveLiveRegionEl);
+            this.notif = uploaderMessages.getFilesUploading(uploadCount);
+            this.prevUploadCount = uploadCount;
+            if (this.batchCount < uploadCount) {
+                this.batchCount = uploadCount;
+            }
+            if (!this.srProgress) {
+                this.srProgress = setInterval(() => {
+                    const aggregate = this.fileEls.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);
+                    const percentage = this.batchCount > 0 ? Math.floor(aggregate / this.batchCount) : 0;
+                    this.announce(uploaderMessages.getUploadProgress(percentage), this.assertiveLiveRegionEl);
+                }, 5000);
+            }
+        }
+        else if (uploadCount === 0 && mutationRecord.oldValue && parseInt(mutationRecord.oldValue) < 100) {
+            // if final file progress completes
+            this.uploadButtonEl.value = "";
+            this.batchCount = 0;
+            this.notif = uploaderMessages.finishedUploading;
+            this.announce(uploaderMessages.finishedUploading, this.assertiveLiveRegionEl);
+            clearInterval(this.srProgress);
+            setTimeout(() => {
+                this.notif = "";
+            }, 20 * 1000);
+        }
+    }
+    handleUploadButtonClick(ev) {
+        if (this.isDisabled) {
+            // this is a temporary fix.
+            // we need the disabled button to be programmatically focusable
+            // to allow return focus after closing the browser file panel
+            // since it's focusable the button should respond when activated
+            // it looks disabled, and announces the reason why the action cannot
+            // be taken when activated.
+            ev.preventDefault();
+            if (this.inProgressFileEls.length > 0) {
+                this.announce(uploaderMessages.waitToUpload, this.assertiveLiveRegionEl);
+            }
+            else if (this.fileLimitReached) {
+                this.announce(uploaderMessages.fileLimitReached, this.assertiveLiveRegionEl);
+            }
+        }
+        else {
+            this.uploadButtonEl.value = ""; // when making a new selection, always reset the value so onChange is triggered (even if the same file is selected)
+        }
+    }
+    handleUploadButtonChange() {
+        if (this.uploadButtonEl.files) {
+            const files = Array.from(this.uploadButtonEl.files);
+            if (files.length > 0) {
+                this.batchCount = files.length;
+                this.wmUploaderFilesSelected.emit(files);
+            }
+        }
+    }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", labelEl, this.label);
+        }
+    }
+    announce(message, liveRegionEl) {
+        if (liveRegionEl.textContent === message) {
+            message += "\u00A0";
+        }
+        liveRegionEl.textContent = message;
+    }
+    renderIcon() {
+        const defaultIconSize = "0.875rem";
+        if (this.icon.match(/^#/)) {
+            // Icon ID
+            return h("span", { class: `svg-icon svg-${this.icon.slice(1)}`, style: { "--icon-size": defaultIconSize } });
+        }
+        else if (this.icon.match(/^\/\S*[#]\S*/)) {
+            // starts with /, any number of non-whitespace characters, followed by #, followed by any non-whitespace characters
+            // Relative Path & Symbol
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "svg-icon", style: { "--icon-fill": "currentColor", "--icon-size": defaultIconSize }, fill: "currentColor" }, h("use", { href: this.icon })));
+        }
+        else {
+            // MDI
+            return (h("span", { class: "mdi", "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`))));
+        }
+    }
+    renderUploadButton() {
+        let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : ""}${this.buttonText}`;
+        return (h("div", { class: "button-wrapper" }, h("input", { name: "input", id: "input", ref: (el) => (this.uploadButtonEl = el), class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.errorMessage ? "error " : ""}file-count max-size accepted-types`, type: "file", multiple: true, onClick: (ev) => this.handleUploadButtonClick(ev), onChange: () => this.handleUploadButtonChange() }), h("label", { htmlFor: "input", class: `wm-button -secondary ${this.isDisabled ? "disabled" : ""}` }, this.icon && this.renderIcon(), this.buttonText), this.uploaderType == "select" && this.renderFileCount()));
+    }
+    renderDropButton() {
+        let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : ""}${uploaderMessages.dropInstructions}`;
+        return (h("div", { class: "button-wrapper -drop" }, h("input", { name: "input", id: "input", ref: (el) => (this.uploadButtonEl = el), class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.errorMessage ? "error " : ""}file-count max-size accepted-types`, type: "file", multiple: true, onClick: (ev) => this.handleUploadButtonClick(ev), onChange: () => this.handleUploadButtonChange() }), h("label", { htmlFor: "input", class: `${this.isDisabled ? "disabled" : ""}` }, h("div", { class: "prompt" }, h("span", { class: "upload-arrow" }), h("span", { id: "drop-text", class: `wm-button -textonly ${this.isDisabled ? "disabled" : ""}` }, h("span", { class: "default-text" }, uploaderMessages.dropInstructions), h("span", { class: "dragging-text" }, uploaderMessages.dropFile))), this.renderFileCount())));
+    }
+    renderHeader() {
+        return (h("div", { class: "header" }, h("div", { class: "notif-wrapper" }, this.uploaderType == "select" ? this.renderUploadButton() : this.renderDropButton(), this.renderRequirements()), this.notif && h("div", { class: "notif" }, this.notif), h("div", { id: "error" }, this.errorMessage)));
+    }
+    renderFileCount() {
+        if (this.maxFiles) {
+            return h("div", { id: "file-count" }, uploaderMessages.getFileCount(this.uploadedFileEls.length, this.maxFiles));
+        }
+    }
+    renderRequirements() {
+        const maxSizeMessage = intl.formatMessage({
+            id: "uploader.maxSize",
+            defaultMessage: "<b>Maximum File Size:</b> {maxSize}",
+            description: "An indicator of the maximum file size the uploader allows",
+        }, {
+            maxSize: this.maxSize,
+            b: (chunks) => h("span", { style: { "font-weight": "600" } }, chunks),
+        });
+        const acceptedTypesMessage = intl.formatMessage({
+            id: "uploader.acceptedFileTypes",
+            defaultMessage: "<b>Accepted File {amount, plural, =1 {Type} other {Types}}:</b> {fileTypes}",
+        }, {
+            fileTypes: this.validTypes,
+            amount: this.fileTypes.split(" ").length,
+            b: (chunks) => h("span", { style: { "font-weight": "600" } }, chunks),
+        });
+        return (h("details", { class: "requirements" }, h("summary", null, h("span", { class: "title-text" }, uploaderMessages.fileRequirements)), h("div", { class: "requirements-wrapper" }, h("div", { id: "accepted-types", class: "accepted-types" }, acceptedTypesMessage), this.maxSize && h("span", { id: "max-size" }, maxSizeMessage))));
+    }
+    renderListContainer() {
+        const hasNewlyUploadedFiles = this.fileEls.filter((file) => file.progress && file.progress === 100).length;
+        return (h("div", { class: `list-container ${hasNewlyUploadedFiles ? "checkmark-spacer" : ""}` }, h("ul", { class: "file-list" }, h("slot", null))));
+    }
+    renderLabel() {
+        return (h("div", { class: `wrapper ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("div", { id: "label", class: `label`, onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.requiredField && (h("div", { class: "required", "aria-hidden": "true" }, "*")))));
+    }
+    renderDropArea() {
+        return (h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, h("span", { class: "upload-arrow" }), h("span", null, "Drop to Upload")))));
+    }
+    render() {
+        return (h(Host, { key: '10b9229c1b4c9c33c5ac26f2632cef8a3bb7725f', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'ed105d34fbd49f62a7e2aadc0514a4d2243b6e5a', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+            ,
+            "aria-atomic": "true" }), h("div", { key: '1ec637c9bdbefecde3f229db946b3701dc271d06', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+    }
+    static get is() { return "wm-uploader"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-uploader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-uploader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Optional label displayed above the upload button. Use when the uploader is\nrequired (pair with `required-field`) or needs a descriptive heading."
+                        }],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "uploaderType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"select\" | \"drop\"",
+                    "resolved": "\"drop\" | \"select\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "File selection method. `'select'` opens the browser file picker; `'drop'`\nadds a drag-and-drop area."
+                        }, {
+                            "name": "default",
+                            "text": "\"select\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "uploader-type",
+                "reflect": false,
+                "defaultValue": "\"select\""
+            },
+            "dropArea": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"component\" | \"page\"",
+                    "resolved": "\"component\" | \"page\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Scope of the drop zone when `uploader-type=\"drop\"`. `'component'` limits\nthe drop area to the component; `'page'` expands it to cover the full page while dragging."
+                        }, {
+                            "name": "default",
+                            "text": "\"component\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "drop-area",
+                "reflect": false,
+                "defaultValue": "\"component\""
+            },
+            "buttonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Label text on the upload trigger button, e.g. `'Attach files'`. Should\nmatch the action verb used in any surrounding instructions."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "button-text",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Icon displayed on the upload button. Accepts the same formats as wm-button:\n`'#icon-name'` for a Ripple icon or `'/path/to/file.svg#symbol-id'` for a local SVG\nsprite."
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "fileTypes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Space-separated file extensions displayed to the user as accepted types\n(e.g. `'pdf docx xlsx'`). Actual validation must be handled in the\n`wmUploaderFilesSelected` handler."
+                        }, {
+                            "name": "default",
+                            "text": "\"pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv\""
+                        }],
+                    "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": [{
+                            "name": "description",
+                            "text": "Maximum file size displayed to the user (e.g. `'100 MB'`). Validation must\nbe handled in the `wmUploaderFilesSelected` handler."
+                        }],
+                    "text": ""
+                },
+                "attribute": "max-size",
+                "reflect": false
+            },
+            "maxFiles": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Maximum number of files displayed to the user. Disables the upload button\nwhen reached. Validation must be handled in the application."
+                        }],
+                    "text": ""
+                },
+                "attribute": "max-files",
+                "reflect": false
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Puts the uploader in an error state with this message (e.g. `'Please add at\nleast one file'`)."
+                        }],
+                    "text": ""
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "requiredField": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Displays a required-field asterisk next to the label. Must be used together\nwith the `label` prop."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "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": [{
+                            "name": "description",
+                            "text": "Which metadata to show for each wm-file child in the list."
+                        }, {
+                            "name": "default",
+                            "text": "\"time\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "show-info",
+                "reflect": false,
+                "defaultValue": "\"time\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isTabbing": {},
+            "notif": {},
+            "isCondensed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmUploaderFilesSelected",
+                "name": "wmUploaderFilesSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the user selects files via the file picker or drops them onto\nthe drop zone. The host application should validate the files (type, size, count) and\nbegin the upload process."
+                        }, {
+                            "name": "eventDetails",
+                            "text": "File[] \u2014 array of browser `File` objects selected or dropped by the user."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "errorMessage",
+                "methodName": "announceError"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmUserIsTabbing",
+                "method": "toggleTabbingOn",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "toggleTabbingOff",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmFileErrorCleared",
+                "method": "handleFileErrorCleared",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmFileDelete",
+                "method": "handleFileDelete",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "dragenter",
+                "method": "handleDocumentDragEnter",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseout",
+                "method": "handleDocumentMouseOut",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "dragleave",
+                "method": "handleDocumentDragLeave",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "visibilitychange",
+                "method": "handleDocumentVisibilityChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}