@watermarkinsights/ripple 5.12.0 → 5.13.0-alpha.10

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

@@ -1,412 +0,0 @@
-import { h, Host, forceUpdate } from "@stencil/core";
-import { debounce, hideTooltip, intl, showTooltip, truncateText } from "../../global/functions";
-export class File {
-    constructor() {
-        this.fullFilename = `${this.name}.${this.type}`;
-        this.debouncedUpdate = debounce(async () => {
-            forceUpdate(this.el);
-        }, 10);
-        this.name = undefined;
-        this.type = undefined;
-        this.fileActions = "download delete";
-        this.lastUpdated = undefined;
-        this.progress = undefined;
-        this.size = undefined;
-        this.uploadedBy = undefined;
-        this.errorMessage = undefined;
-        this.showInfo = "last-updated";
-    }
-    get isCondensed() {
-        return this.el.clientWidth < 500;
-    }
-    get isUploading() {
-        return this.progress !== undefined && this.progress < 100;
-    }
-    get previewButtonTooltip() {
-        return intl.formatMessage({
-            id: "file.previewButtonTooltip",
-            defaultMessage: "Preview",
-            description: "Tooltip of a button that triggers a file to be previewed",
-        });
-    }
-    get downloadButtonTooltip() {
-        return intl.formatMessage({
-            id: "file.downloadButtonTooltip",
-            defaultMessage: "Download",
-            description: "Tooltip of a button that triggers a file to be downloaded",
-        });
-    }
-    get deleteButtonTooltip() {
-        return intl.formatMessage({
-            id: "file.deleteButtonTooltip",
-            defaultMessage: "Delete",
-            description: "Tooltip of a button that triggers a file to be deleted",
-        });
-    }
-    get previewActionMessage() {
-        return intl.formatMessage({
-            id: "file.previewAction",
-            defaultMessage: "Preview File",
-            description: "Label of a button that triggers a file to be previewed",
-        });
-    }
-    get downloadActionMessage() {
-        return intl.formatMessage({
-            id: "file.downloadAction",
-            defaultMessage: "Download File",
-            description: "Label of a button that triggers a file to be downloaded",
-        });
-    }
-    get deleteActionMessage() {
-        return intl.formatMessage({
-            id: "file.deleteAction",
-            defaultMessage: "Delete File",
-            description: "Label of a button that triggers a file to be delete",
-        });
-    }
-    get actionMenuLabel() {
-        return intl.formatMessage({
-            id: "file.actionMenuLabel",
-            defaultMessage: "Actions",
-            description: "Label of a button that opens a menu of file actions",
-        });
-    }
-    get clearButtonText() {
-        return intl.formatMessage({
-            id: "file.clearErrorText",
-            defaultMessage: "Clear",
-            description: "Text for a button used to clear an error",
-        });
-    }
-    generateClearButtonLabel(filename) {
-        return intl.formatMessage({
-            id: "file.clearErrorLabel",
-            defaultMessage: "Clear {fileName} error",
-            description: "Label for a button used to clear an error, including filename",
-        }, { fileName: filename });
-    }
-    componentWillLoad() {
-        if (!this.el.id) {
-            console.error("wm-file: a file id is required");
-        }
-        if (!this.name) {
-            console.error('wm-file: "name" is a required property');
-        }
-        if (!this.type) {
-            console.error('wm-file: "type" is a required property');
-        }
-        // inherit showInfo property from parent
-        if (this.el.parentElement && this.el.parentElement.showInfo) {
-            this.showInfo = this.el.parentElement.showInfo;
-        }
-        if (this.showInfo === "time") {
-            console.warn("wm-file: show-info='time' is deprecated, use show-info='last-updated'");
-            this.showInfo = "last-updated";
-        }
-        // rerender on resize in case layout needs to change
-        const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
-        resizeObserver.observe(this.el);
-    }
-    setFilename() {
-        // calc is not accurate and last letter may be cropped if we don't wait
-        requestAnimationFrame(() => {
-            const fileNameEl = this.el.shadowRoot.querySelector(".filename");
-            const leftBoundary = this.el.shadowRoot.querySelector(".left-group").getBoundingClientRect().left;
-            const rightGroup = this.el.shadowRoot.querySelector(".right-group");
-            const file = this.el.shadowRoot.querySelector(".file");
-            const colGap = file ? getComputedStyle(file).getPropertyValue("column-gap") : "0";
-            const rightBoundary = rightGroup
-                ? rightGroup.getBoundingClientRect().left - parseFloat(colGap)
-                : this.el.shadowRoot.querySelector(".file-wrapper").getBoundingClientRect().right - 20;
-            fileNameEl.textContent = truncateText(fileNameEl, this.fullFilename, rightBoundary - leftBoundary, 7);
-        });
-    }
-    componentDidRender() {
-        this.setFilename();
-    }
-    previewFile() {
-        this.wmFilePreview.emit();
-    }
-    downloadFile() {
-        this.wmFileDownload.emit();
-    }
-    deleteFile() {
-        this.wmFileDelete.emit();
-    }
-    handleFilenameMouseEnter(ev) {
-        // only show tooltip if file name is being truncated (has ellipses)
-        if (ev.target.textContent !== this.fullFilename) {
-            showTooltip("bottom", ev.target, this.fullFilename);
-        }
-    }
-    renderFileName() {
-        return (h("div", { class: "left-group" }, h("div", { class: "name-wrapper" }, h("span", { class: "sr-only" }, this.fullFilename), h("span", { "aria-hidden": "true", class: "filename", onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev), onMouseLeave: () => hideTooltip() }), this.isUploading && h("span", { class: "sr-only" }, "uploading"))));
-    }
-    renderFileInfo() {
-        return (h("div", { class: "file-info" }, (this.showInfo === "uploaded-by" || this.showInfo === "all") && (h("div", { class: "details uploader-name" }, this.uploadedBy)), (this.showInfo === "last-updated" || this.showInfo === "all") && h("div", { class: "details" }, this.lastUpdated), (this.showInfo === "size" || this.showInfo === "all") && h("div", { class: "details" }, this.size)));
-    }
-    renderActionMenu() {
-        const previewItem = (h("wm-menuitem", { icon: "#show", onClick: () => this.previewFile() }, this.previewActionMessage));
-        const downloadItem = (h("wm-menuitem", { icon: "#download", onClick: () => this.downloadFile() }, this.downloadActionMessage));
-        const deleteItem = (h("wm-menuitem", { icon: "#delete", onClick: () => this.deleteFile() }, this.deleteActionMessage));
-        return (h("wm-action-menu", { "action-menu-type": "icon", tooltip: this.actionMenuLabel, "tooltip-position": "bottom", "label-for-identical-buttons": `${this.name} ${this.actionMenuLabel}` }, this.fileActions.includes("preview") && previewItem, this.fileActions.includes("download") && downloadItem, this.fileActions.includes("delete") && deleteItem));
-    }
-    renderFileActionButtons() {
-        const previewButton = (h("wm-button", { class: "preview-button", "button-type": "icononly", tooltip: this.previewButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `preview ${this.name}`, icon: "#show", onClick: () => this.previewFile() }));
-        const downloadButton = (h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: this.downloadButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `download ${this.name}`, icon: "#download", onClick: () => this.downloadFile() }));
-        const deleteButton = (h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: this.deleteButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `delete ${this.name}`, icon: "#delete", onClick: () => this.deleteFile() }));
-        return (h("div", { class: "file-controls" }, this.fileActions.includes("preview") && previewButton, this.fileActions.includes("download") && downloadButton, this.fileActions.includes("delete") && deleteButton));
-    }
-    renderFileInProgress() {
-        return (h("div", { class: "file-wrapper" }, h("div", { class: "file --progress" }, h("div", { class: "progress", style: {
-                background: `linear-gradient(to right, var(--wmcolor-file-progress) ${this.progress}%, transparent ${this.progress}%)`,
-            } }), this.renderFileName())));
-    }
-    renderFileControls() {
-        const hasSingleFileAction = this.fileActions.split(" ").length === 1;
-        const showActionMenu = this.isCondensed && !hasSingleFileAction;
-        return showActionMenu ? this.renderActionMenu() : this.renderFileActionButtons();
-    }
-    renderFile() {
-        return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: "right-group" }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText)), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
-    }
-    render() {
-        return h(Host, { role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
-    }
-    static get is() { return "wm-file"; }
-    static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["wm-file.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["wm-file.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "name",
-                "reflect": false
-            },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "type",
-                "reflect": false
-            },
-            "fileActions": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "file-actions",
-                "reflect": false,
-                "defaultValue": "\"download delete\""
-            },
-            "lastUpdated": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "last-updated",
-                "reflect": false
-            },
-            "progress": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "progress",
-                "reflect": true
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "size",
-                "reflect": false
-            },
-            "uploadedBy": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "uploaded-by",
-                "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
-            },
-            "showInfo": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "\"time\" | \"last-updated\" | \"size\" | \"uploaded-by\" | \"all\" | \"none\"",
-                    "resolved": "\"all\" | \"last-updated\" | \"none\" | \"size\" | \"time\" | \"uploaded-by\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "show-info",
-                "reflect": false,
-                "defaultValue": "\"last-updated\""
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "wmFilePreview",
-                "name": "wmFilePreview",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "wmFileDownload",
-                "name": "wmFileDownload",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "wmFileDelete",
-                "name": "wmFileDelete",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "wmFileErrorCleared",
-                "name": "wmFileErrorCleared",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-}

package/dist/collection/components/wm-file/wm-file.spec.js

@@ -1,194 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { File } from "./wm-file";
-// mock ResizeObserver
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-}));
-describe("wm-file", () => {
-    let html, page;
-    async function createPageHelper() {
-        return await newSpecPage({
-            components: [File],
-            html: `<wm-file 
-      id="file1"
-      name="File retrieved from server"
-      type="pdf"
-      last-updated="10/30/97 3:46 PM"
-      size="22 KB"
-      file-actions="download preview delete"
-      >
-      </wm-file>`,
-        });
-    }
-    it("renders green check alongside recently uploaded files", async () => {
-        html = `<wm-file 
-    id="file1"
-    name="File retrieved from server"
-    type="pdf"
-    last-updated="10/30/97 3:46 PM"
-    size="22 KB"
-    file-actions="download preview delete"
-    progress="100"
-    >
-    </wm-file>`;
-        page = await newSpecPage({ components: [File], html });
-        await page.waitForChanges();
-        const fileWrapperEl = page.root.shadowRoot.querySelector(".file-wrapper");
-        expect(fileWrapperEl).toHaveClass("checked");
-    });
-    it("renders file actions in the proper order", async () => {
-        html = `<wm-file 
-    id="file1"
-    name="File retrieved from server"
-    type="pdf"
-    last-updated="10/30/97 3:46 PM"
-    size="22 KB"
-    file-actions="download delete preview"
-    >
-    </wm-file>`;
-        page = await newSpecPage({ components: [File], html });
-        await page.waitForChanges();
-        const fileActionEls = page.root.shadowRoot.querySelectorAll("wm-button");
-        expect(fileActionEls[0]).toEqualAttribute("tooltip", "Preview");
-        expect(fileActionEls[1]).toEqualAttribute("tooltip", "Download");
-        expect(fileActionEls[2]).toEqualAttribute("tooltip", "Delete");
-    });
-    it("defaults available actions to download and delete", async () => {
-        html = `<wm-file 
-    id="file1"
-    name="File retrieved from server"
-    type="pdf"
-    last-updated="10/30/97 3:46 PM"
-    size="22 KB"
-    >
-    </wm-file>`;
-        page = await newSpecPage({ components: [File], html });
-        await page.waitForChanges();
-        const deleteButton = page.root.shadowRoot.querySelector(".delete-button");
-        const downloadButton = page.root.shadowRoot.querySelector(".download-button");
-        const previewButton = page.root.shadowRoot.querySelector(".preview-button");
-        expect(deleteButton).toBeTruthy();
-        expect(downloadButton).toBeTruthy();
-        expect(previewButton).toBeFalsy();
-    });
-    it("displays no file actions when an empty string is passed", async () => {
-        html = `<wm-file 
-    id="file1"
-    name="File retrieved from server"
-    type="pdf"
-    last-updated="10/30/97 3:46 PM"
-    size="22 KB"
-    file-actions=""
-    >
-    </wm-file>`;
-        page = await newSpecPage({ components: [File], html });
-        await page.waitForChanges();
-        const deleteButton = page.root.shadowRoot.querySelector(".delete-button");
-        const downloadButton = page.root.shadowRoot.querySelector(".download-button");
-        const previewButton = page.root.shadowRoot.querySelector(".preview-button");
-        expect(deleteButton).toBeFalsy();
-        expect(downloadButton).toBeFalsy();
-        expect(previewButton).toBeFalsy();
-    });
-    it("renders timestamp by default, size if specified, or none based on show-info prop", async () => {
-        page = await createPageHelper();
-        await page.waitForChanges();
-        let fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
-        expect(fileInfoEl.textContent).toBe("10/30/97 3:46 PM");
-        page = await newSpecPage({
-            components: [File],
-            html: `<wm-file 
-      id="file1"
-      name="File retrieved from server"
-      type="pdf"
-      last-updated="10/30/97 3:46 PM"
-      size="22 KB"
-      file-actions="download preview delete"
-      show-info="size"
-      >
-      </wm-file>`,
-        });
-        await page.waitForChanges();
-        fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
-        expect(fileInfoEl.textContent).toBe("22 KB");
-        page = await newSpecPage({
-            components: [File],
-            html: `<wm-file 
-      id="file1"
-      name="File retrieved from server"
-      type="pdf"
-      last-updated="10/30/97 3:46 PM"
-      size="22 KB"
-      file-actions="download preview delete"
-      show-info="time"
-      >
-      </wm-file>`,
-        });
-        await page.waitForChanges();
-        fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
-        expect(fileInfoEl.textContent).toBe("10/30/97 3:46 PM");
-        page = await newSpecPage({
-            components: [File],
-            html: `<wm-file 
-      id="file1"
-      name="File retrieved from server"
-      type="pdf"
-      last-updated="10/30/97 3:46 PM"
-      size="22 KB"
-      file-actions="download preview delete"
-      show-info="none"
-      >
-      </wm-file>`,
-        });
-        await page.waitForChanges();
-        fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
-        expect(fileInfoEl).toBeFalsy();
-    });
-    it("emits the appropriate events when user clicks the buttons", async () => {
-        const filePreviewedSpy = jest.fn();
-        const fileDownloadedSpy = jest.fn();
-        const fileDeletedSpy = jest.fn();
-        html = `<wm-file 
-      id="file1"
-      name="File retrieved from server"
-      type="pdf"
-      last-updated="10/30/97 3:46 PM"
-      size="22 KB"
-      file-actions="download preview delete"
-      >
-      </wm-file>`;
-        page = await newSpecPage({ components: [File], html });
-        await page.waitForChanges();
-        page.root.addEventListener("wmFilePreview", filePreviewedSpy);
-        page.root.addEventListener("wmFileDownload", fileDownloadedSpy);
-        page.root.addEventListener("wmFileDelete", fileDeletedSpy);
-        // wmFilePreview
-        page.root.shadowRoot.querySelector(".preview-button").click();
-        await page.waitForChanges();
-        expect(filePreviewedSpy.mock.calls[0][0].target.id).toBe("file1");
-        // wmFileDownload
-        page.root.shadowRoot.querySelector(".download-button").click();
-        await page.waitForChanges();
-        expect(fileDownloadedSpy.mock.calls[0][0].target.id).toBe("file1");
-        // wmFileDelete
-        page.root.shadowRoot.querySelector(".delete-button").click();
-        await page.waitForChanges();
-        expect(fileDeletedSpy.mock.calls[0][0].target.id).toBe("file1");
-        jest.restoreAllMocks();
-    });
-    it("renders with an error if one is passed", async () => {
-        html = `<wm-file
-      id="file1"
-      error-message="Example error message"
-      file='{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "10/30/97 3:46 PM", "size": "22 KB", "fileActions": "download preview delete"}'
-      ></wm-file>`;
-        page = await newSpecPage({ components: [File], html });
-        await page.waitForChanges();
-        const fileDiv = page.root.shadowRoot.querySelector(".file");
-        expect(fileDiv).toHaveClass("--error");
-        const errorText = page.root.shadowRoot.querySelector(".error-message");
-        expect(errorText.textContent).toBe("Example error message");
-    });
-});