@watermarkinsights/ripple 5.11.1 → 5.11.2

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

@@ -0,0 +1,234 @@
+jest.mock("../../global/services/http-service");
+import { newSpecPage } from "@stencil/core/testing";
+import { Uploader } from "./wm-uploader";
+import { File } from "../wm-file/wm-file";
+// mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+// mock MutationObserver
+global.MutationObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+describe("wm-uploader", () => {
+    let html, page;
+    beforeEach(async () => {
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    max-size="200 MB"
+    max-files="5"
+    >
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+    });
+    afterEach(() => {
+        html = undefined;
+        page = undefined;
+    });
+    it("has necessary aria properties", async () => {
+        let inputEl = page.root.shadowRoot.querySelector("input");
+        expect(inputEl).toEqualAttribute("aria-describedby", "file-count max-size accepted-types");
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    label="example label"
+    required-field="true"
+    ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        inputEl = page.root.shadowRoot.querySelector("input");
+        expect(inputEl).toEqualAttribute("aria-label", "example label, Upload new document");
+        expect(inputEl).toEqualAttribute("aria-required", "true");
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    required-field="true"
+    ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        inputEl = page.root.shadowRoot.querySelector("input");
+        expect(inputEl).toEqualAttribute("aria-label", "Upload new document");
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    label="Upload new document"
+    required-field="true"
+    ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        inputEl = page.root.shadowRoot.querySelector("input");
+        expect(inputEl).toEqualAttribute("aria-label", "Upload new document");
+    });
+    it("renders button text based on button-text prop", () => {
+        const labelEl = page.root.shadowRoot.querySelector("label");
+        expect(labelEl.textContent).toBe("Upload new document");
+    });
+    it("uploads files", async () => {
+        const input = page.root.shadowRoot.querySelector("input");
+        // fake files which the components uploadFiles() function will process
+        // @ts-ignore
+        input.files = {
+            length: 2,
+            0: {
+                lastModified: 1562163068000,
+                lastModifiedDate: new Date(1562163068000),
+                name: "third_file.pdf",
+                size: 104857600,
+                type: "application/pdf",
+                webkitRelativePath: "",
+            },
+            1: {
+                lastModified: 1562062469000,
+                lastModifiedDate: new Date(1562062469000),
+                name: "fourth file.jpg",
+                size: 123456,
+                type: "image/jpeg",
+                webkitRelativePath: "",
+            },
+        };
+        // triggering the change event will run validations and emit event wmUploaderFilesSelected
+        const ev = new Event("change");
+        let validFiles = [];
+        page.root.addEventListener("wmUploaderFilesSelected", (ev) => (validFiles = ev.detail));
+        input.dispatchEvent(ev);
+        await page.waitForChanges();
+        expect(validFiles[0].name).toBe("third_file.pdf");
+        expect(validFiles[1].size).toBe(123456);
+    });
+    it("disables button when upload is in progress", async () => {
+        html = `<wm-uploader id="uploader1">
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB" progress="30"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        const labelEl = page.root.shadowRoot.querySelector("label");
+        expect(labelEl).toHaveClass("disabled");
+    });
+    it("renders max-files text, if set", async () => {
+        let html, page;
+        html = `<wm-uploader
+      id="uploader1"
+      button-text="Upload new document"
+      ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        let fileCountEl = page.root.shadowRoot.querySelector("#file-count");
+        expect(fileCountEl).toBeFalsy();
+        html = `<wm-uploader
+    id="uploader1"
+    max-files="3"
+    >
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        fileCountEl = page.root.shadowRoot.querySelector("#file-count");
+        expect(fileCountEl).toBeTruthy();
+        expect(fileCountEl.textContent).toBe("2 of 3 Files");
+    });
+    it("renders max-size text, if set", async () => {
+        let html, page;
+        html = `<wm-uploader
+      id="uploader1"
+      button-text="Upload new document"
+      ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        let maxSizeEl = page.root.shadowRoot.querySelector("#max-size");
+        expect(maxSizeEl).toBeFalsy();
+        html = `<wm-uploader
+      id="uploader1"
+      max-size="25 MB"
+      button-text="Upload new document"
+      ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        maxSizeEl = page.root.shadowRoot.querySelector("#max-size");
+        expect(maxSizeEl).toBeTruthy();
+        expect(maxSizeEl.textContent).toBe("Maximum file size 25 MB");
+    });
+    it("announces error when max-files has been reached and button clicked", async () => {
+        html = `<wm-uploader
+    id="uploader1"
+    max-files="2"
+    >
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        const input = page.root.shadowRoot.querySelector("input");
+        input.click();
+        await page.waitForChanges();
+        const liveRegion = page.root.shadowRoot.querySelector(".live-region").textContent;
+        expect(liveRegion).toBe("The maximum number of files has been reached");
+    });
+    it("singularizes the accepted file types message", async () => {
+        let message = page.root.shadowRoot.querySelector("#accepted-types").textContent;
+        expect(message).toBe("Accepted file types: .pdf, .txt, .log, .xml, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .gif, .jpg, .jpeg, .png, .csv");
+        html = `<wm-uploader
+      id="uploader1"
+      file-types="jpeg"
+      button-text="Upload new document"
+      files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "1/28/2020"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2/14/2019"}]'
+      ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        message = page.root.shadowRoot.querySelector("#accepted-types").textContent;
+        expect(message).toBe("Accepted file type: .jpeg");
+    });
+    it("provides wm-files with the proper show-info", async () => {
+        // defaults to time
+        let infoEl = await page.root.querySelector("wm-file").shadowRoot.querySelector(".file-info");
+        expect(infoEl.textContent).toBe("1/28/2020");
+        // size
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    show-info="size"
+    >
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        infoEl = await page.root.querySelector("wm-file").shadowRoot.querySelector(".file-info");
+        expect(infoEl.textContent).toBe("28 KB");
+        // time
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    show-info="time"
+    >
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        infoEl = await page.root.querySelector("wm-file").shadowRoot.querySelector(".file-info");
+        expect(infoEl.textContent).toBe("1/28/2020");
+        // none
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    show-info="none"
+    >
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        infoEl = await page.root.querySelector("wm-file").shadowRoot.querySelector(".file-info");
+        expect(infoEl).toBe(null);
+    });
+});

package/dist/collection/global/functions.spec.js

@@ -0,0 +1,126 @@
+import { csvToArray, getAcceptedMimeTypesList, intl, snakeCaseToCamelCase, getNewIndexToFocus, transposeMatrix, wrapAround, skipByInterval, getSmallestSkipInterval, calcPercentageInRange, } from "./functions";
+describe("Global functions", () => {
+    it("converts the list of extensions into a list of MIME types", () => {
+        expect(getAcceptedMimeTypesList(["pdf", "doc", "txt"])).toMatchObject([
+            "application/pdf",
+            "application/msword",
+            "text/plain",
+        ]);
+    });
+    it("translates", () => {
+        expect(intl.formatMessage({ id: "date.Monday", defaultMessage: "Monday" })).toEqual("Monday"); // falls back to English when language attribute is not set
+    });
+    it("changes string from snake_case to camelCase", async () => {
+        expect(snakeCaseToCamelCase("snake_case")).toBe("snakeCase");
+        expect(snakeCaseToCamelCase("even_more_words")).toBe("evenMoreWords");
+        expect(snakeCaseToCamelCase("camelCase")).toBe("camelCase");
+        expect(snakeCaseToCamelCase("A regular sentence")).toBe("A regular sentence");
+        expect(snakeCaseToCamelCase("singleword")).toBe("singleword");
+    });
+    it("parses comma separated values properly", async () => {
+        expect(csvToArray("one, two, three")).toStrictEqual(["one", "two", "three"]);
+        expect(csvToArray("four,five, six")).toStrictEqual(["four", "five", "six"]);
+        expect(csvToArray("seven eight,nine ten eleven")).toStrictEqual(["seven eight", "nine ten eleven"]);
+    });
+    it("gets new index to focus correctly", async () => {
+        let index = 1;
+        let direction = "ArrowDown";
+        let listLength = 5;
+        // moves forward
+        expect(getNewIndexToFocus(index, direction, listLength)).toBe(index + 1);
+        // wraps backwards
+        index = 4;
+        expect(getNewIndexToFocus(index, direction, listLength)).toBe(0);
+        // moves backwards
+        direction = "ArrowUp";
+        index = 2;
+        expect(getNewIndexToFocus(index, direction, listLength)).toBe(index - 1);
+        // wraps forward
+        index = 0;
+        expect(getNewIndexToFocus(index, direction, listLength)).toBe(listLength - 1);
+    });
+    it("transposes matrices correctly", () => {
+        expect(transposeMatrix([
+            [0, 1, 2],
+            [3, 4, 5],
+            [6, 7, 8],
+        ])).toStrictEqual([
+            [0, 3, 6],
+            [1, 4, 7],
+            [2, 5, 8],
+        ]);
+        expect(transposeMatrix([
+            [0, 1, 2, 3],
+            [4, 5, 6, 7],
+            [8, 9, 10, 11],
+        ])).toStrictEqual([
+            [0, 4, 8],
+            [1, 5, 9],
+            [2, 6, 10],
+            [3, 7, 11],
+        ]);
+        expect(transposeMatrix([
+            ["0", "1", "2"],
+            ["3", "4", "5"],
+            ["6", "7", "8"],
+        ])).toStrictEqual([
+            ["0", "3", "6"],
+            ["1", "4", "7"],
+            ["2", "5", "8"],
+        ]);
+        expect(transposeMatrix([
+            [0, "1", 2],
+            [3, 4, [5]],
+            [{ key: "value" }, 7, 8],
+        ])).toStrictEqual([
+            [0, 3, { key: "value" }],
+            ["1", 4, 7],
+            [2, [5], 8],
+        ]);
+    });
+    it("wraps around indices correctly", () => {
+        // forward steps
+        expect(wrapAround(0, 1, 8)).toBe(1);
+        expect(wrapAround(2, 3, 8)).toBe(5);
+        expect(wrapAround(7, 1, 8)).toBe(8);
+        // forward to 0
+        expect(wrapAround(8, 1, 8)).toBe(0);
+        expect(wrapAround(2, 7, 8)).toBe(0);
+        // forward beyond 0
+        expect(wrapAround(8, 4, 8)).toBe(3);
+        expect(wrapAround(2, 10, 8)).toBe(3);
+        // backward steps
+        expect(wrapAround(8, -1, 8)).toBe(7);
+        expect(wrapAround(5, -3, 8)).toBe(2);
+        expect(wrapAround(1, -1, 8)).toBe(0);
+        // backward to end
+        expect(wrapAround(0, -1, 8)).toBe(8);
+        expect(wrapAround(7, -8, 8)).toBe(8);
+        // backward beyond end
+        expect(wrapAround(0, -7, 8)).toBe(2);
+        expect(wrapAround(2, -7, 8)).toBe(4);
+        // multiple wraps
+        expect(wrapAround(0, 10, 2)).toBe(1);
+        expect(wrapAround(0, -10, 2)).toBe(2);
+    });
+    it("skips by interval correctly", () => {
+        const list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+        expect(skipByInterval(list, 0)).toStrictEqual([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
+        expect(skipByInterval(list, 1)).toStrictEqual([0, 2, 4, 6, 8]);
+        expect(skipByInterval(list, 2)).toStrictEqual([0, 3, 6, 9]);
+        expect(skipByInterval(list, 3)).toStrictEqual([0, 4, 8]);
+        expect(skipByInterval(list, 4)).toStrictEqual([0, 5]);
+        expect(skipByInterval(list, 5)).toStrictEqual([0, 6]);
+        expect(skipByInterval(list, 20)).toStrictEqual([0]);
+        expect(getSmallestSkipInterval(list, 6)).toStrictEqual({ skipInterval: 1, skippedList: [0, 2, 4, 6, 8] });
+        expect(getSmallestSkipInterval(list, 5)).toStrictEqual({ skipInterval: 1, skippedList: [0, 2, 4, 6, 8] });
+        expect(getSmallestSkipInterval(list, 3)).toStrictEqual({ skipInterval: 3, skippedList: [0, 4, 8] });
+        expect(getSmallestSkipInterval(list, 1)).toStrictEqual({ skipInterval: 9, skippedList: [0] });
+    });
+    it("calcs percentage in range properly", () => {
+        expect(calcPercentageInRange(13, 0, 100)).toBe(13);
+        expect(calcPercentageInRange(-75, -100, 0)).toBe(25);
+        expect(calcPercentageInRange(50, 25, 75)).toBe(50);
+        expect(calcPercentageInRange(150, 100, 300)).toBe(25);
+    });
+});

package/dist/collection/lang/lang.spec.js

@@ -0,0 +1,20 @@
+"use strict";
+const en = require("./en.json");
+const fr = require("./fr.json");
+const es = require("./es.json");
+const pig = require("./pig.json");
+describe("translations", () => {
+    it("has translated strings for every key", () => {
+        let missingFR = [];
+        let missingES = [];
+        let missingPIG = [];
+        for (let i = 0; i < Object.keys(en).length; i++) {
+            !Object.keys(fr).includes(Object.keys(en)[i]) && missingFR.push(Object.keys(en)[i]);
+            !Object.keys(es).includes(Object.keys(en)[i]) && missingES.push(Object.keys(en)[i]);
+            !Object.keys(pig).includes(Object.keys(en)[i]) && missingPIG.push(Object.keys(en)[i]);
+        }
+        expect(missingFR.length).toBe(0);
+        expect(missingES.length).toBe(0);
+        expect(missingPIG.length).toBe(0);
+    });
+});

package/dist/esm/{chartFunctions-c273c613.js → chartFunctions-37511f93.js}

@@ -1,5 +1,5 @@
-import { h } from './index-130e07bb.js';
-import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-f39e6177.js';
+import { h } from './index-558b5a82.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-8800c690.js';
 
 const colors = {
     salmon: "#ff5f4e",
@@ -69,7 +69,7 @@ const allChartsDetails = {
     bar5: {
         size: 400,
         colors: [
-            colors.gray, // this is only used if prop notStartedColor is set
+            colors.gray,
             colors.lavender,
             colors.midnight,
             "#0089e4",
@@ -395,9 +395,9 @@ function getPathData(amount, offset, chartType) {
     const half = this.chartDetails.size / 2;
     const innerRadius = this.chartDetails.thickness;
     const outerRadius = 1;
-    const isHybridDoughnut = chartType === "doughnut";
+    const isProgressIndicator = chartType === "doughnut";
     const outerSeparatorOffset = 1.5;
-    const innerSeparatorOffset = isHybridDoughnut ? 2.25 : 3;
+    const innerSeparatorOffset = isProgressIndicator ? 2.25 : 3;
     if (activeAngle === 360) {
         // fix to avoid bad svg shape when the path goes all around (100%)
         endAngle -= 0.01;
@@ -464,18 +464,28 @@ function applyMinimumAngle(minimumAngle, slicesDetails, total) {
 }
 function renderDoughnut(chartType) {
     const outerSize = this.chartDetails.size + this.chartDetails.padding;
-    const isHybridDoughnut = chartType === "doughnut";
+    const isProgressIndicator = chartType === "doughnut";
     // no sorting in progress indicators
-    let slicesDetails = isHybridDoughnut ? this.slicesDetails : sortSlicesDetails(this.slicesDetails, this.total);
+    let slicesDetails = isProgressIndicator ? this.slicesDetails : sortSlicesDetails(this.slicesDetails, this.total);
     slicesDetails = applyMinimumAngle(7, slicesDetails, this.total);
-    let perc = amountToPercent(slicesDetails[0].amount, this.total, true);
-    perc = perc === 0 ? "<1%" : perc + "%";
+    // perc is only for progress indicator
+    const amount = slicesDetails[0].amount;
+    let perc = amountToPercent(amount, this.total, true);
+    if (perc === 0 && amount > 0) {
+        perc = "<1%";
+    }
+    else if (perc === 100 && amount < this.total) {
+        perc = ">99%";
+    }
+    else {
+        perc = perc + "%";
+    }
     return (h("div", { class: "chart-wrapper doughnut-wrapper" },
         h("svg", { width: outerSize + "px", height: outerSize + "px", id: `graphic-${this.uid}`, class: "doughnut-svg" },
             renderFilter(),
             slicesDetails.map((s) => renderPath.call(this, s, chartType)),
             renderFocusOutline.call(this),
-            isHybridDoughnut ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, perc)) : (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesDetails.map((s) => s.amount > 0 && !s.inSmallCluster ? renderDoughnutText.call(this, s) : ""))))));
+            isProgressIndicator ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, perc)) : (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesDetails.map((s) => s.amount > 0 && !s.inSmallCluster ? renderDoughnutText.call(this, s) : ""))))));
 }
 function highlightSegmentInfo(infoEls, s) {
     infoEls.forEach((el) => {
@@ -506,7 +516,17 @@ function renderFocusOutline() {
 function renderDoughnutText(s) {
     const arcMiddle = amountToDegree(s.offset + s.visualAmount / 2, this.total);
     let { x, y } = polarToCartesian(this.chartDetails.size / 2, 1.4, arcMiddle - 90);
-    return (h("text", { class: "value", x: x + "px", y: y + "px", "data-segmentindex": s.index }, `${s.perc > 0 ? s.perc : "<1"}%`));
+    let val;
+    if (s.perc === 0 && s.amount > 0) {
+        val = "<1%";
+    }
+    else if (s.perc === 100 && s.amount < this.total) {
+        val = ">99%";
+    }
+    else {
+        val = s.perc + "%";
+    }
+    return (h("text", { class: "value", x: x + "px", y: y + "px", "data-segmentindex": s.index }, val));
 }
 function renderStackedBar(chartType) {
     const isHybridBar = chartType === "bar";