npm - @watermarkinsights/ripple - Versions diffs - 5.12.0-1 → 5.12.0-11 - Mend

@watermarkinsights/ripple 5.12.0-1 → 5.12.0-11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (353) hide show

package/dist/collection/components/wm-uploader/wm-uploader.e2e.js ADDED Viewed

@@ -0,0 +1,70 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-uploader", () => {
+    let page, input, label;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-uploader button-text="Upload new document">
+        <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="2020-01-28T22:29:10.397Z"></wm-file>
+        <wm-file id="file2" name="Second file" type="jpeg" last-updated="2019-02-14T12:21:05.397Z"></wm-file>
+      </wm-uploader>
+      </main></body></html>`);
+        input = await page.find("wm-uploader >>> input[type='file']");
+        label = await page.find("wm-uploader >>> label");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("renders the component", async () => {
+        expect(input).not.toBeNull();
+        expect(label).not.toBeNull();
+    });
+    it("focuses previous file when deleting with the keyboard", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-uploader button-text="Upload new document">
+        <wm-file id="file1" name="First file" type="pdf" file-actions="preview delete"></wm-file>
+        <wm-file id="file2" name="Second file" type="pdf" file-actions="delete"></wm-file>
+      </wm-uploader>
+      </main></body></html>`);
+        await page.waitForChanges();
+        let fileEls = await page.findAll("wm-file");
+        let secondFileEl = fileEls[1];
+        // inital check of file count
+        expect(fileEls.length).toBe(2);
+        // user must be tabbing for these changes to occur
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        // check focused element is last file, delete button
+        let activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toBe("file2");
+        let activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
+        expect(activeElButtonType).toBe("delete-button");
+        let mockFileDeleteEvent = new CustomEvent("wmFileDelete");
+        //@ts-ignore
+        mockFileDeleteEvent.target = secondFileEl;
+        secondFileEl.dispatchEvent(mockFileDeleteEvent);
+        await page.evaluate(() => { var _a; return (_a = document.getElementById("file2")) === null || _a === void 0 ? void 0 : _a.remove(); });
+        await page.waitForChanges();
+        // confirm file has been removed
+        fileEls = await page.findAll("wm-file");
+        expect(fileEls.length).toBe(1);
+        // check focused element is last file, delete button
+        activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toBe("file1");
+        activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
+        expect(activeElButtonType).toBe("delete-button");
+    });
+    //  it("disables the button dynamically", async () => {
+    // disabled when maxed out
+    // disabled while a file is uploading
+    // not disabled after upload
+    // });
+});

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

@@ -300,9 +300,9 @@ export class Uploader {
         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: '05fa03d63ba14665a196bece2c82eabb4882ba82', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'fd2c2779cc8f5e8aab480fdb68ac0e482905785d', 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
+        return (h(Host, { class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { 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: '2a5c1d00d2a98bd40fa9ac8dbc248209cca470ba', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { 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"; }

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

@@ -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/dev/modal.js CHANGED Viewed

@@ -7,39 +7,42 @@ function hideModal(ev) {
   ev.target.open = false;
 }
-// hook up each modal and its button
-const ids = ["modal", "inner-modal", "inner-dialog", "nested-modal", "dialog"];
-ids.forEach((id) => {
-  const modalBtn = document.getElementById(`${id}-btn`);
-  modalBtn && modalBtn.addEventListener("click", () => showModal(id));
+// if we don't wait, sometimes the DOM else are not queryied. Waiting for load doesn't work as load, it seems it have already fired. requestAnimationFrame doesn't work either
+setTimeout(() => {
+  // hook up each modal and its button
+  const ids = ["modal", "inner-modal", "inner-dialog", "nested-modal", "dialog"];
+  ids.forEach((id) => {
+    const modalBtn = document.getElementById(`${id}-btn`);
+    modalBtn && modalBtn.addEventListener("click", () => showModal(id));
-  const modal = document.getElementById(id);
-  modal && modal.addEventListener("wmModalPrimaryTriggered", actionTriggered);
-  modal && modal.addEventListener("wmModalSecondaryTriggered", hideModal);
-  modal && modal.addEventListener("wmModalCloseTriggered", hideModal);
-});
+    const modal = document.getElementById(id);
+    modal && modal.addEventListener("wmModalPrimaryTriggered", actionTriggered);
+    modal && modal.addEventListener("wmModalSecondaryTriggered", hideModal);
+    modal && modal.addEventListener("wmModalCloseTriggered", hideModal);
+  });
-const modalInput = document.getElementById("modal-input");
-const count = document.getElementById("count");
-const modalFooter = document.getElementById("modal-footer");
+  const modalInput = document.getElementById("modal-input");
+  const count = document.getElementById("count");
+  const modalFooter = document.getElementById("modal-footer");
-modalInput &&
-  modalInput.addEventListener("change", function () {
-    if (modalInput.value !== "") {
-      modalFooter.primaryActionDisabled = false;
-    } else {
-      modalFooter.primaryActionDisabled = true;
-    }
-  });
+  modalInput &&
+    modalInput.addEventListener("change", function () {
+      if (modalInput.value !== "") {
+        modalFooter.primaryActionDisabled = false;
+      } else {
+        modalFooter.primaryActionDisabled = true;
+      }
+    });
-count &&
-  count.addEventListener("change", (ev) => {
-    modalFooter.setAttribute("info-text", ev.target.value + " things ready to launch");
-  });
+  count &&
+    count.addEventListener("change", (ev) => {
+      modalFooter.setAttribute("info-text", ev.target.value + " things ready to launch");
+    });
-function actionTriggered(ev) {
-  modalInput.value = "";
-  console.log("Changes saved");
-  modalFooter.actionDisabled = true;
-  ev.target.open = false;
-}
+  function actionTriggered(ev) {
+    modalInput.value = "";
+    console.log("Changes saved");
+    modalFooter.actionDisabled = true;
+    ev.target.open = false;
+  }
+}, 50);

package/dist/collection/dev/toggletip.js CHANGED Viewed

@@ -0,0 +1,9 @@
+requestAnimationFrame(() => {
+  // put toggletip in shadow DOM
+  const host = document.querySelector("#host");
+  const shadow = host.attachShadow({ mode: "open" });
+  const tsd = document.querySelector("#tsd");
+  tsd.label = "Toggletip in shadow DOM";
+  tsd.tooltip = "Toggletip in shadow DOM";
+  shadow.appendChild(tsd);
+});

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

@@ -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 ADDED Viewed

@@ -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-ef4089f9.js → chartFunctions-7a2b7a90.js} RENAMED Viewed

@@ -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-a3c016ae.js';
+import { h } from './index-558b5a82.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-899cea51.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";