@watermarkinsights/ripple 5.16.0-alpha.2 → 5.16.0-alpha.5

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

@@ -0,0 +1,603 @@
+import { h, Host, forceUpdate, } from "@stencil/core";
+import { uploaderMessages } from "../../global/intl";
+import { intl } from "../../global/functions";
+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.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();
+    }
+    storeDeletedId(ev) {
+        this.fileIdToDelete = ev.target.id;
+    }
+    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)
+            if (this.isTabbing &&
+                mutationRecord.removedNodes.length === 1 &&
+                mutationRecord.removedNodes[0].id === this.fileIdToDelete) {
+                this.focusAfterFileRemoval(mutationRecord);
+                this.fileIdToDelete = "";
+            }
+            // 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) {
+        if (this.inProgressFileEls.length !== 0) {
+            const changeInUploadingFiles = this.prevUploadCount !== this.inProgressFileEls.length;
+            changeInUploadingFiles &&
+                this.announce(uploaderMessages.getFilesUploading(this.inProgressFileEls.length), this.assertiveLiveRegionEl);
+            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)), this.assertiveLiveRegionEl);
+                }, 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, this.assertiveLiveRegionEl);
+            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, this.assertiveLiveRegionEl);
+            }
+            else if (this.fileLimitReached) {
+                this.announce(uploaderMessages.fileLimitReached, this.assertiveLiveRegionEl);
+            }
+        }
+    }
+    handleUploadButtonChange() {
+        if (this.uploadButtonEl.files) {
+            const files = Array.from(this.uploadButtonEl.files);
+            if (files.length > 0) {
+                this.batchCount = files.length;
+                this.wmUploaderFilesSelected.emit(files);
+            }
+            this.uploadButtonEl.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
+        }
+    }
+    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, 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", { id: "label", class: `label` }, this.label, this.requiredField && (h("span", { 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: '1ac02923034959f6227c730654b3f07161348f5d', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: '86d79a6b3e97ad750c1b7025f1632c2ceeff74fb', 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: '7383fb94d35ef70e7a69c758b4cac0f0f62d7a1b', 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": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "uploaderType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"select\" | \"drop\"",
+                    "resolved": "\"drop\" | \"select\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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": [],
+                    "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": [],
+                    "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": {},
+            "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": "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": "storeDeletedId",
+                "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
+            }];
+    }
+}

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

@@ -0,0 +1,28 @@
+export class Wrapper {
+    componentDidLoad() {
+        this.wmWrapperLoaded.emit();
+    }
+    render() {
+        return;
+    }
+    static get is() { return "wm-wrapper"; }
+    static get events() {
+        return [{
+                "method": "wmWrapperLoaded",
+                "name": "wmWrapperLoaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}