@watermarkinsights/ripple 5.12.0 → 5.13.0-alpha.1

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

@@ -1,234 +0,0 @@
-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/components/wm-wrapper/wm-wrapper.js

@@ -1,28 +0,0 @@
-export class Wrapper {
-    componentDidLoad() {
-        this.wmWrapperLoaded.emit();
-    }
-    render() {
-        return;
-    }
-    static get is() { return "wm-wrapper"; }
-    static get events() {
-        return [{
-                "method": "wmWrapperLoaded",
-                "name": "wmWrapperLoaded",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-}

package/dist/collection/dev/chart-small.js

@@ -1,56 +0,0 @@
-function chartAction() {
-  function getRandomColor() {
-    return `hsl(${Math.round(Math.random() * 360)}, ${Math.round(Math.random() * 50) + 50}%, ${
-      Math.round(Math.random() * 30) + 50
-    }%)`;
-  }
-  document.querySelector("body").style.backgroundColor = getRandomColor();
-}
-
-let counter = 1;
-function makeChart(amounts) {
-  const target = document.querySelector("#autochart");
-  if (target) {
-    const chart = document.createElement("wm-chart");
-    chart.id = `generated-4${counter}`;
-    counter++;
-    chart.setAttribute("chart-type", "doughnut3");
-    chart.setAttribute("label", "auto chart");
-    const bigindex = Math.floor(Math.random() * 7);
-    const total = amounts.reduce((total, newval) => (total += newval), 0);
-    for (var i = 0; i < 7; i++) {
-      const chartSlice = document.createElement("wm-chart-slice");
-      chartSlice.setAttribute("amount", amounts[i]);
-      chartSlice.setAttribute("legend", `slice ${i + 1}`);
-      chartSlice.setAttribute("popover-title", `${amounts[i]} / ${total}`);
-      chartSlice.setAttribute("popover-text", (i % 2 ? "" : "Not ") + ["Boiled", "Washed", "Rinsed", "Roasted"][i % 4]);
-      chart.appendChild(chartSlice);
-    }
-    target.appendChild(chart);
-  }
-}
-
-function spawnCharts() {
-  makeChart([1, 1, 1, 1, 1, 1, 94]);
-  makeChart([1, 2, 1, 2, 1, 2, 91]);
-  makeChart([2, 3, 2, 3, 2, 3, 85]);
-  makeChart([3, 4, 3, 79, 4, 3, 4]);
-  makeChart([3, 4, 5, 76, 3, 4, 5]);
-  makeChart([4, 4, 4, 4, 76, 4, 4]);
-  makeChart([70, 4, 5, 6, 4, 5, 6]);
-  for (var i = 0; i < 5; i++) {
-    const amounts = [];
-    for (var j = 0; j < 7; j++) {
-      if (Math.random() > 0.9) {
-        // 10% chance of a big number
-        amounts.push(Math.floor(Math.random() * 5000));
-      } else {
-        amounts.push(Math.floor(Math.random() * 100));
-      }
-    }
-    makeChart(amounts);
-  }
-}
-spawnCharts();
-
-

package/dist/collection/dev/chart.js

@@ -1,18 +0,0 @@
-const progset = document.getElementById("progset");
-
-const slice1 = document.createElement("wm-chart-slice");
-slice1.setAttribute("amount", 8);
-slice1.setAttribute("legend", "mint");
-slice1.setAttribute("popoverTitle", "mint");
-slice1.setAttribute("popoverText", "as new");
-progset.appendChild(slice1);
-
-const slice2 = document.createElement("wm-chart-slice");
-slice2.setAttribute("amount", 2);
-slice2.setAttribute("legend", "used");
-slice2.setAttribute("popoverTitle", "used");
-slice2.setAttribute("popoverText", "as is");
-progset.appendChild(slice2);
-
-
-

package/dist/collection/dev/date-range.js

@@ -1,6 +0,0 @@
-document.querySelectorAll("wm-date-range").forEach((dateRange) => {
-  dateRange.addEventListener("wmRangeSelection", (ev) => {
-    dateRange.valueStart = ev.detail.startDate.us;
-    dateRange.valueEnd = ev.detail.endDate.us;
-  });
-});

package/dist/collection/dev/datepicker.js

@@ -1,46 +0,0 @@
-function customizedError() {
-  let dp = document.getElementById("firstDP");
-  if (dp) {
-    if (dp.value.includes("2013")) {
-      dp.errorMessage = "Year cannot be 2013!";
-    } else {
-      dp.errorMessage = "";
-    }
-  }
-}
-customizedError();
-
-document.querySelectorAll("wm-datepicker").forEach((datepicker) => {
-  // this is flexible to test for many types of date formats, but this is typically uniform across datepicker instances
-  const dateFormat = datepicker.getAttribute("date-format");
-  const dateFormatUnit =
-    dateFormat === "mm/dd/yyyy" || dateFormat === null ? "US" : dateFormat === "dd/mm/yyyy" ? "INT" : "ISO";
-
-  datepicker.addEventListener("wmDatepickerInputBlurred", async (ev) => {
-    if (datepicker.value) {
-      const isoDate = await datepicker.reformatDate(dateFormatUnit, "ISO", datepicker.value);
-
-      if (await datepicker.isValidIso(isoDate)) {
-        // if valid date, clean up formatting and set properties
-        const displayDate = await datepicker.reformatDate("ISO", dateFormatUnit, isoDate);
-
-        datepicker.value = displayDate;
-        datepicker.errorMessage = "";
-      } else {
-        // if invalid date, leave value and display error
-        datepicker.errorMessage = `Please enter a valid date in the format ${dateFormat ? dateFormat : "mm/dd/yyyy"}`;
-      }
-    }
-  });
-
-  datepicker.addEventListener("wmDatepickerDateSelected", async (ev) => {
-    datepicker.errorMessage = "";
-    datepicker.value = await datepicker.reformatDate("ISO", dateFormatUnit, ev.detail.date);
-  });
-
-  datepicker.addEventListener("blur", (ev) => {
-    if (datepicker.requiredField && datepicker.value === "") {
-      datepicker.errorMessage = "A date is required";
-    }
-  });
-});

package/dist/collection/dev/file-list.js

@@ -1,16 +0,0 @@
-/* FILE LIST */
-const fileLists = document.querySelectorAll("wm-file-list");
-fileLists &&
-  fileLists.forEach((fileList) => {
-    fileList.addEventListener("wmFileDownload", (ev) => {
-      alert("downloading", ev.target.id);
-    });
-    fileList.addEventListener("wmFilePreview", (ev) => {
-      alert("previewing", ev.target.id);
-    });
-    fileList.addEventListener("wmFileDelete", (ev) => {
-      alert("deleting", ev.target.id);
-    });
-  });
-
-

package/dist/collection/dev/input.js

@@ -1,6 +0,0 @@
-function changeValue() {
-  const values = ["Gomez", "Morticia", "Wednesday", "Pugsley", "Uncle Fester", "Lurch", "Aristotle", "Thing"];
-  const randomValue = () => values[~~(Math.random() * values.length)];
-  document.querySelector("wm-input").setAttribute("value", randomValue());
-}
-

package/dist/collection/dev/modal.js

@@ -1,48 +0,0 @@
-function showModal(id) {
-  const modal = document.getElementById(id);
-  modal.open = true;
-}
-
-function hideModal(ev) {
-  ev.target.open = false;
-}
-
-// 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 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;
-      }
-    });
-
-  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;
-  }
-}, 50);

package/dist/collection/dev/navigation.js

@@ -1,13 +0,0 @@
-// page is reloaded on click, so we can't setup onclick funcs like we would in real situation.
-// for testing purposes we just set a url param and read that on load
-function setActiveOnLoad() {
-  Array.from(document.querySelectorAll("wm-navigation-item")).map((el, index) => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const indexParam = urlParams.get("item");
-    if (indexParam) {
-      el.active = index == indexParam;
-    }
-  });
-}
-
-setActiveOnLoad();

package/dist/collection/dev/navigator.js

@@ -1,34 +0,0 @@
-function setProds() {
-  const navigator = document.getElementById("nav");
-  const userModules = [
-    {
-      id: "aqua",
-      linkUrl: "/aqua",
-      samlLinkUrl: "/saml/aqua",
-      iconUrl: "https://cdn.watermarkinsights.com/images/login/aqua.svg",
-      name: "Aqua",
-    },
-    {
-      id: "dm",
-      linkUrl: "",
-      samlLinkUrl: "",
-      iconUrl: "https://cdn.watermarkinsights.com/images/login/digitalmeasures.svg",
-      name: "DM",
-    },
-  ];
-
-  if (navigator) {
-    navigator.ref = (function () {
-      navigator.products = userModules;
-    })();
-  }
-}
-
-setProds();
-
-document.addEventListener(
-  "wmNavigatorLogout",
-  () => console.log("user logged out") // make sure to make the log persistent if you want to see this in the browser console.
-);
-
-

package/dist/collection/dev/nested-select.js

@@ -1,36 +0,0 @@
-requestAnimationFrame(() => {
-  const nestedSelects = document.querySelectorAll("wm-nested-select");
-  nestedSelects.forEach((nestedSelect) => {
-    nestedSelect.addEventListener("wmOptionSelected", (ev) => handleOptionSelected(ev));
-    nestedSelect.addEventListener("wmOptionDeselected", (ev) => handleOptionDeselected(ev));
-  });
-
-  const optgroups = document.querySelectorAll("wm-optgroup");
-  optgroups.forEach((optgroup) => {
-    optgroup.addEventListener("wmOptgroupAllSelected", (ev) => handleAllSelected(ev));
-    optgroup.addEventListener("wmOptgroupAllDeselected", (ev) => handleAllDeselected(ev));
-  });
-
-  function handleOptionSelected(ev) {
-    const parentOptgroup = ev.target.parentElement;
-    const parentNestedSelect = parentOptgroup.parentElement;
-
-    if (!parentNestedSelect.multiple) {
-      // in single select, deselect all other options
-      parentNestedSelect.querySelectorAll("wm-option").forEach((option) => (option.selected = false));
-    }
-    ev.target.selected = true;
-  }
-
-  function handleOptionDeselected(ev) {
-    ev.target.selected = false;
-  }
-
-  function handleAllSelected(ev) {
-    ev.target.querySelectorAll("wm-option").forEach((option) => (option.selected = true));
-  }
-
-  function handleAllDeselected(ev) {
-    ev.target.querySelectorAll("wm-option").forEach((option) => (option.selected = false));
-  }
-});

package/dist/collection/dev/pagination.js

@@ -1,7 +0,0 @@
-var notifications = [];
-window.addEventListener("wmPaginationPageClicked", function (ev) {
-  const pagin = document.getElementById(ev.target.id);
-  pagin.currentPage = ev.target.value;
-});
-
-

package/dist/collection/dev/pss-modal.js

@@ -1,8 +0,0 @@
-setTimeout(() => {
-  const modals = document.querySelectorAll(["wm-modal", "wm-modal-pss"]);
-  modals.forEach((modal) => {
-    modal.addEventListener("wmModalCloseTriggered", (ev) => closeModal(ev));
-    modal.addEventListener("wmModalPrimaryTriggered", (ev) => closeModal(ev));
-    modal.addEventListener("wmModalSecondaryTriggered", (ev) => closeModal(ev));
-  });
-}, 50);

package/dist/collection/dev/scripts.js

@@ -1,49 +0,0 @@
-const snackbar = document.getElementById("info");
-let notifications = snackbar && JSON.parse(snackbar.notifications || "[]");
-
-function actionToRun() {
-  const randomId = `snack-${Math.floor(Math.random() * 100) + 1}`;
-  const messages = [
-    "Way to go!",
-    "You go girl!",
-    "That's awesome!",
-    "That was SO cool!",
-    "You're killing it!",
-    "No. Effing. Way.",
-    "Just: WOW.",
-    "Color me impressed.",
-    "How did you do that?",
-    "You can do this!!",
-    "I always believed in you",
-  ];
-  const randomMessage = messages[Math.floor(Math.random() * messages.length)];
-
-  const newNotification = {
-    id: randomId,
-    message: randomMessage,
-    link: "",
-  };
-
-  notifications.push(newNotification);
-  snackbar.notifications = JSON.stringify(notifications);
-}
-
-function dismissSnack(ev) {
-  const snackbar = document.getElementById(ev.target.id);
-  notifications = notifications.filter((snack) => snack.id !== ev.detail.id);
-  snackbar.notifications = JSON.stringify(notifications);
-}
-
-snackbar.addEventListener("wmSnackbarSnackFinished", dismissSnack);
-
-function openModal(id) {
-  console.log("open modal", id);
-  const modal = document.getElementById(id);
-  modal.open = true;
-}
-
-function closeModal(ev) {
-  const modal = ev.target;
-  console.log("close modal", modal);
-  modal.open = false;
-}