@watermarkinsights/ripple 4.0.0-9 → 4.0.0

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

@@ -1,24 +1,32 @@
 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;
-  // max-size of 200Mb should be ignored: max is 100 and dev can only set to a smaller value.
   beforeEach(async () => {
     html = `<wm-uploader
     id="uploader1"
     button-text="Upload new document"
-    max-size="200"
+    max-size="200 MB"
     max-files="5"
-    files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
-    ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
+    >
+      <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(() => {
@@ -33,9 +41,8 @@ describe("wm-uploader", () => {
     button-text="Upload new document"
     label="example label"
     required-field="true"
-    files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
     ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
+    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");
@@ -44,9 +51,8 @@ describe("wm-uploader", () => {
     id="uploader1"
     button-text="Upload new document"
     required-field="true"
-    files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
     ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
+    page = await newSpecPage({ components: [Uploader, File], html });
     await page.waitForChanges();
     inputEl = page.root.shadowRoot.querySelector("input");
     expect(inputEl).toEqualAttribute("aria-label", "Upload new document");
@@ -55,9 +61,8 @@ describe("wm-uploader", () => {
     button-text="Upload new document"
     label="Upload new document"
     required-field="true"
-    files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
     ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
+    page = await newSpecPage({ components: [Uploader, File], html });
     await page.waitForChanges();
     inputEl = page.root.shadowRoot.querySelector("input");
     expect(inputEl).toEqualAttribute("aria-label", "Upload new document");
@@ -66,36 +71,6 @@ describe("wm-uploader", () => {
     const labelEl = page.root.shadowRoot.querySelector("label");
     expect(labelEl.textContent).toBe("Upload new document");
   });
-  it("renders the file list", async () => {
-    const fileEls = page.root.shadowRoot.querySelectorAll("wm-file");
-    expect(fileEls.length).toBe(2);
-  });
-  it("sorts by name or date if prop is set accordingly", async () => {
-    // name
-    html = `<wm-uploader
-      id="uploader1"
-      sort-by="name"
-      button-text="Upload new document"
-      files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
-      ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
-    await page.waitForChanges();
-    let fileEls = page.root.shadowRoot.querySelectorAll("wm-file");
-    expect(JSON.parse(fileEls[0].getAttribute("file")).id).toBe("file1");
-    expect(JSON.parse(fileEls[1].getAttribute("file")).id).toBe("file2");
-    // date
-    html = `<wm-uploader
-      id="uploader1"
-      sort-by="date"
-      button-text="Upload new document"
-      files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
-      ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
-    await page.waitForChanges();
-    fileEls = page.root.shadowRoot.querySelectorAll("wm-file");
-    expect(JSON.parse(fileEls[0].getAttribute("file")).id).toBe("file2");
-    expect(JSON.parse(fileEls[1].getAttribute("file")).id).toBe("file1");
-  });
   it("uploads files", async () => {
     const input = page.root.shadowRoot.querySelector("input");
     // fake files which the components uploadFiles() function will process
@@ -129,121 +104,68 @@ describe("wm-uploader", () => {
     expect(validFiles[1].size).toBe(123456);
   });
   it("disables button when upload is in progress", async () => {
-    html = `<wm-uploader
-    id="uploader1"
-    button-text="Upload new document"
-    label="Upload new document"
-    required-field="true"
-    files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z", "progress": "10"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
-    ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
+    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("emits the file ID in the custom event when a file action event is received", async () => {
-    let fakePreviewEvent = new CustomEvent("wmIntFilePreviewed");
-    // @ts-ignore
-    fakePreviewEvent.detail = "previewid";
-    let fakeDownloadEvent = new CustomEvent("wmIntFileDownloaded");
-    // @ts-ignore
-    fakeDownloadEvent.detail = "downloadid";
-    let fakeDeleteEvent = new CustomEvent("wmIntFileDeleted");
-    // @ts-ignore
-    fakeDeleteEvent.detail = "deleteid";
-    const wmUploaderPreviewFileSpy = jest.fn();
-    const wmUploaderDownloadFileSpy = jest.fn();
-    const wmUploaderDeleteFileSpy = jest.fn();
-    const wmFilePreviewSpy = jest.fn();
-    const wmFileDownloadSpy = jest.fn();
-    const wmFileDeleteSpy = jest.fn();
-    page.root.addEventListener("wmUploaderPreviewFile", wmUploaderPreviewFileSpy);
-    page.root.addEventListener("wmUploaderDownloadFile", wmUploaderDownloadFileSpy);
-    page.root.addEventListener("wmUploaderDeleteFile", wmUploaderDeleteFileSpy);
-    page.root.addEventListener("wmFilePreview", wmFilePreviewSpy);
-    page.root.addEventListener("wmFileDownload", wmFileDownloadSpy);
-    page.root.addEventListener("wmFileDelete", wmFileDeleteSpy);
-    page.root.dispatchEvent(fakePreviewEvent);
-    expect(wmUploaderPreviewFileSpy.mock.calls[0][0].detail).toBe("previewid");
-    expect(wmFilePreviewSpy.mock.calls[0][0].detail).toBe("previewid");
-    page.root.dispatchEvent(fakeDownloadEvent);
-    expect(wmUploaderDownloadFileSpy.mock.calls[0][0].detail).toBe("downloadid");
-    expect(wmFileDownloadSpy.mock.calls[0][0].detail).toBe("downloadid");
-    page.root.dispatchEvent(fakeDeleteEvent);
-    expect(wmUploaderDeleteFileSpy.mock.calls[0][0].detail).toBe("deleteid");
-    expect(wmFileDeleteSpy.mock.calls[0][0].detail).toBe("deleteid");
-  });
   it("renders max-files text, if set", async () => {
     let html, page;
     html = `<wm-uploader
       id="uploader1"
       button-text="Upload new document"
-      files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
       ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
+    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"
-      button-text="Upload new document"
-      files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
-      ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
+    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");
-    html = `<wm-uploader
-      id="uploader1"
-      max-files="2"
-      button-text="Upload new document"
-      files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
-      ></wm-uploader>`;
   });
   it("renders max-size text, if set", async () => {
     let html, page;
     html = `<wm-uploader
       id="uploader1"
       button-text="Upload new document"
-      files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
       ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
+    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"
+      max-size="25 MB"
       button-text="Upload new document"
-      files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
       ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
-    await page.waitForChanges();
-    maxSizeEl = page.root.shadowRoot.querySelector("#max-size");
-    expect(maxSizeEl).toBeTruthy();
-    expect(maxSizeEl.textContent).toBe("Maximum file size 25MB");
-    // max-size of 250MB is ignored, defaulting to the cap of 100MB
-    html = `<wm-uploader
-      id="uploader1"
-      max-size="250"
-      button-text="Upload new document"
-      files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
-      ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
+    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"
-    button-text="Upload new document"
-    files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
-    ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
+    >
+      <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();
@@ -256,52 +178,57 @@ describe("wm-uploader", () => {
     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"
-      max-size="250"
       file-types="jpeg"
       button-text="Upload new document"
-      files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
+      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], html });
+    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 () => {
-    // default
-    let wmFileEl = await page.root.shadowRoot.querySelector("wm-file");
-    expect(wmFileEl).toEqualAttribute("show-info", "time");
+    // 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"
-    files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
-    ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
-    await page.waitForChanges();
-    wmFileEl = await page.root.shadowRoot.querySelector("wm-file");
-    expect(wmFileEl).toEqualAttribute("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"
-    files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
-    ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
-    await page.waitForChanges();
-    wmFileEl = await page.root.shadowRoot.querySelector("wm-file");
-    expect(wmFileEl).toEqualAttribute("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"
-    files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "2020-01-28T22:29:10.397Z"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2019-02-14T12:21:05.397Z"}]'
-    ></wm-uploader>`;
-    page = await newSpecPage({ components: [Uploader], html });
-    await page.waitForChanges();
-    wmFileEl = await page.root.shadowRoot.querySelector("wm-file");
-    expect(wmFileEl).toEqualAttribute("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.js

@@ -486,16 +486,6 @@ export function measureText(originEl, placeholderText) {
   document.body.removeChild(measurementEl);
   return boundingClientRect;
 }
-export function safeParseJSON(toParse) {
-  // JSON.parse will throw an exception if the string provided is not in the proper format
-  // instead of the exception, just return null and let other logic check
-  try {
-    return JSON.parse(toParse);
-  }
-  catch (e) {
-    return null;
-  }
-}
 export function truncateText(textEl, text, availableSpace, endAmt) {
   const cloneEl = document.createElement("div");
   cloneEl.style.visibility = "hidden";
@@ -585,3 +575,25 @@ export function handleDisabledAttribute(el, isDisabled) {
     el.removeAttribute("disabled");
   }
 }
+// get the prev/next element with an option to circle through the list
+export function findPrev(list, item, loop = false) {
+  if (!!list && !item)
+    return list[list.length - 1]; // if list was passed but no item, get the last item
+  if (!list.includes(item))
+    return; // if list is empty or doesn't include item 
+  let current = list.indexOf(item);
+  let beforeFirst = loop ? list.length - 1 : 0; // before first item can be first (hard stop) or back to last
+  let prev = current > 0 ? current - 1 : beforeFirst;
+  return list[prev];
+}
+export function findNext(list, item, loop = false) {
+  if (!!list && !item)
+    return list[0]; // if list was passed but no item, get the first item
+  if (!list.includes(item))
+    return; // if list is empty or doesn't include item 
+  let current = list.indexOf(item);
+  const last = list.length - 1;
+  let afterLast = loop ? 0 : last; // after last item can be last (hard stop) or back to first
+  let next = current !== last ? current + 1 : afterLast;
+  return list[next];
+}

package/dist/collection/global/intl.js

@@ -118,7 +118,7 @@ export const uploaderMessages = {
   }, { x: fileListLength, y: maxFiles }),
   getFileTooLarge: (maxSize) => intl.formatMessage({
     id: "uploader.fileTooLarge",
-    defaultMessage: "The selected file is too large. Maximum file size is {size}Mb",
+    defaultMessage: "The selected file is too large. Maximum file size is {size}",
   }, { size: maxSize }),
   getFilesUploading: (numFilesUploading) => intl.formatMessage({
     id: "uploader.filesUploading",
@@ -130,7 +130,7 @@ export const uploaderMessages = {
   }, { validTypes }),
   getMaxSize: (maxSize) => intl.formatMessage({
     id: "uploader.maxSize",
-    defaultMessage: "Maximum file size {maxSize}MB",
+    defaultMessage: "Maximum file size {maxSize}",
     description: "An indicator of the maximum file size the uploader allows",
   }, {
     maxSize: maxSize,

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

@@ -13,8 +13,8 @@ describe("translations", () => {
       !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(26);
-    expect(missingES.length).toBe(30);
+    expect(missingFR.length).toBe(0);
+    expect(missingES.length).toBe(0);
     expect(missingPIG.length).toBe(0);
   });
 });

package/dist/esm/{chartFunctions-36eb2d1a.js → chartFunctions-2a4603c6.js}

@@ -1,5 +1,5 @@
 import { h } from './index-294d486f.js';
-import { i as intl, c as checkForActiveElInShadow, e as getPosition, f as findParentWithScrollbar, d as debounce } from './functions-061ab506.js';
+import { i as intl, c as checkForActiveElInShadow, e as getPosition, f as findParentWithScrollbar, d as debounce } from './functions-358a1a02.js';
 
 const colors = {
   salmon: "#ff5f4e",