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

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

@@ -1,603 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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"; }
-}