@watermarkinsights/ripple 5.16.0-alpha.0 → 5.16.0-alpha.2

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/flyout.js

@@ -1,194 +0,0 @@
-// Setup for flyout with footer
-const openBtn1 = document.getElementById("openBtn1");
-const flyout1 = document.getElementById("flyout1");
-
-if (openBtn1 && flyout1) {
-  openBtn1.addEventListener("click", () => {
-    flyout1.setAttribute("open", "true");
-  });
-
-  flyout1.addEventListener("wmFlyoutCloseTriggered", () => {
-    flyout1.setAttribute("open", "false");
-  });
-
-  flyout1.addEventListener("wmFlyoutPrimaryTriggered", () => {
-    console.log("Primary button clicked");
-    // Handle save changes
-    flyout1.setAttribute("open", "false");
-  });
-
-  flyout1.addEventListener("wmFlyoutSecondaryTriggered", () => {
-    console.log("Secondary button clicked");
-    // Handle cancel
-    flyout1.setAttribute("open", "false");
-  });
-
-  flyout1.addEventListener("wmFlyoutBreadcrumbClicked", (event) => {
-    console.log("Breadcrumb clicked:", event.detail.breadcrumb);
-    // Handle breadcrumb navigation
-  });
-}
-
-// Setup for flyout without footer
-const openBtn2 = document.getElementById("openBtn2");
-const flyout2 = document.getElementById("flyout2");
-
-if (openBtn2 && flyout2) {
-  openBtn2.addEventListener("click", () => {
-    flyout2.setAttribute("open", "true");
-  });
-
-  flyout2.addEventListener("wmFlyoutCloseTriggered", () => {
-    flyout2.setAttribute("open", "false");
-  });
-
-  flyout2.addEventListener("wmFlyoutBreadcrumbClicked", (event) => {
-    console.log("Breadcrumb clicked:", event.detail.breadcrumb);
-    // Handle breadcrumb navigation
-  });
-}
-
-// Setup for multi-step flyout
-const openBtn3 = document.getElementById("openBtn3");
-const flyout3 = document.getElementById("flyout3");
-const step1 = document.getElementById("step1");
-const step2 = document.getElementById("step2");
-const step3 = document.getElementById("step3");
-let currentStep = 1;
-
-if (openBtn3 && flyout3) {
-  openBtn3.addEventListener("click", () => {
-    currentStep = 1;
-    updateStepUI();
-    flyout3.setAttribute("open", "true");
-  });
-
-  flyout3.addEventListener("wmFlyoutCloseTriggered", () => {
-    flyout3.setAttribute("open", "false");
-  });
-
-  flyout3.addEventListener("wmFlyoutPrimaryTriggered", () => {
-    if (currentStep < 3) {
-      currentStep++;
-      updateStepUI();
-    } else {
-      // On the last step, close the flyout
-      flyout3.setAttribute("open", "false");
-    }
-  });
-
-  flyout3.addEventListener("wmFlyoutSecondaryTriggered", () => {
-    if (currentStep > 1) {
-      currentStep--;
-      updateStepUI();
-    }
-  });
-
-  flyout3.addEventListener("wmFlyoutBreadcrumbClicked", (event) => {
-    const targetStep = event.detail.index + 1;
-    if (targetStep && targetStep <= currentStep) {
-      // Only allow navigating to steps we've visited
-      currentStep = targetStep;
-      updateStepUI();
-    }
-  });
-}
-
-function updateStepUI() {
-  // Hide all steps
-  [step1, step2, step3].forEach((step) => (step.style.display = "none"));
-
-  // Show current step
-  const currentStepEl = document.getElementById(`step${currentStep}`);
-  currentStepEl.style.display = "block";
-
-  // Update flyout properties based on current step
-  const stepConfig = {
-    1: {
-      heading: "Step 1: Choose Type",
-      breadcrumb: "Choose Type",
-      primaryText: "Next",
-      secondaryText: "",
-    },
-    2: {
-      heading: "Step 2: Add Details",
-      breadcrumb: "Choose Type,Add Details",
-      primaryText: "Next",
-      secondaryText: "Back",
-    },
-    3: {
-      heading: "Step 3: Review",
-      breadcrumb: "Choose Type,Add Details,Review",
-      primaryText: "Finish",
-      secondaryText: "Back",
-    },
-  };
-
-  const config = stepConfig[currentStep];
-  flyout3.setAttribute("heading", config.heading);
-  flyout3.setAttribute("breadcrumb", config.breadcrumb);
-  flyout3.setAttribute("primary-text", config.primaryText);
-  flyout3.setAttribute("secondary-text", config.secondaryText);
-
-  // Focus the header after step change - wait for component to update
-  requestAnimationFrame(() => {
-    flyout3.focusHeading();
-  });
-
-  // If we're on step 3, populate the review content
-  if (currentStep === 3) {
-    const type = document.getElementById("step1-input").value;
-    const name = document.getElementById("step2-input").value;
-    const description = document.querySelector("#step2 wm-textarea").value;
-
-    document.getElementById("review-content").innerHTML = `
-          <div style="margin-bottom: 1rem">
-            <strong>Type:</strong> ${type || "Not specified"}<br>
-            <strong>Name:</strong> ${name || "Not specified"}<br>
-            <strong>Description:</strong> ${description || "Not specified"}
-          </div>
-        `;
-  }
-}
-
-// Setup for nested dialogs example
-const openBtn4 = document.getElementById("openBtn4");
-const flyout4 = document.getElementById("flyout4");
-const flyout5 = document.getElementById("flyout5");
-const modal1 = document.getElementById("modal1");
-
-if (openBtn4 && flyout4 && flyout5 && modal1) {
-  openBtn4.addEventListener("click", () => {
-    flyout4.setAttribute("open", "true");
-  });
-
-  flyout4.addEventListener("wmFlyoutCloseTriggered", () => {
-    flyout4.setAttribute("open", "false");
-    // Also close any open nested dialogs
-    flyout5.setAttribute("open", "false");
-    modal1.setAttribute("open", "false");
-  });
-
-  flyout4.addEventListener("wmFlyoutPrimaryTriggered", () => {
-    flyout4.setAttribute("open", "false");
-    // Also close any open nested dialogs
-    flyout5.setAttribute("open", "false");
-    modal1.setAttribute("open", "false");
-  });
-
-  flyout5.addEventListener("wmFlyoutCloseTriggered", () => {
-    flyout5.setAttribute("open", "false");
-  });
-
-  modal1.addEventListener("wmModalCloseTriggered", () => {
-    modal1.setAttribute("open", "false");
-  });
-
-  modal1.addEventListener("wmModalPrimaryTriggered", () => {
-    modal1.setAttribute("open", "false");
-  });
-
-  modal1.addEventListener("wmModalSecondaryTriggered", () => {
-    modal1.setAttribute("open", "false");
-  });
-}

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;
-}

package/dist/collection/dev/search.js

@@ -1,72 +0,0 @@
-const search = document.getElementById("search-example");
-if (search) search.oninput = (e) => sInputCallback(e);
-let results = [];
-
-const searchAndFind = document.getElementById("search-find-example");
-if (searchAndFind) searchAndFind.oninput = (e) => sfInputCallback(e, ".foodlist");
-
-const searchAndFindDatabase = document.getElementById("search-find-database-example");
-if (searchAndFindDatabase)
-  searchAndFindDatabase.oninput = (e) => {
-    window.setTimeout(() => sfInputCallback(e, ".namelist"), 1000);
-  };
-
-function sfInputCallback(e, list) {
-  results = searchList(list, e.target.value);
-  e.target.numResults = results.length;
-  if (results.length) {
-    e.target.highlightedId = results[0].toLowerCase();
-    e.target.highlightedName = results[0];
-  } else {
-    e.target.highlightedId = "";
-    e.target.highlightedName = "";
-  }
-  highlight(e.target.highlightedId);
-}
-
-searchAndFind &&
-  searchAndFind.addEventListener("wmSearchBrowseResults", (ev) => {
-    const results = searchList(".foodlist", ev.target.value);
-    const index = ev.detail.position - 1;
-    searchAndFind.highlightedId = results[index].toLowerCase();
-    searchAndFind.highlightedName = results[index];
-    highlight(searchAndFind.highlightedId);
-  });
-
-searchAndFindDatabase &&
-  searchAndFindDatabase.addEventListener("wmSearchBrowseResults", (ev) => {
-    const results = searchList(".namelist", ev.target.value);
-    const index = ev.detail.position - 1;
-    ev.target.highlightedId = results[index].toLowerCase();
-    ev.target.highlightedName = results[index];
-    highlight(ev.target.highlightedId);
-  });
-
-function sInputCallback(e) {
-  results = searchList(".foodlist", e.target.value);
-  search.numResults = results.length;
-}
-
-function searchList(querySelector, searchString) {
-  const results = [];
-  let foods = [];
-  if (searchString) {
-    Array.from(document.querySelector(querySelector).children).map((item) => foods.push(item.textContent));
-    for (let i = 0; i < foods.length; i++) {
-      const food = foods[i].toLowerCase();
-      if (food.indexOf(searchString.toLowerCase()) === 0) {
-        results.push(foods[i]);
-      }
-    }
-  }
-  return results;
-}
-
-function highlight(id) {
-  document.querySelectorAll("li").forEach((i) => i.classList.remove("highlighted"));
-  if (id) {
-    document.querySelector("#" + id).classList.add("highlighted");
-  }
-}
-
-