@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

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

@@ -0,0 +1,205 @@
+const stackChart1 = document.getElementById("stack-chart-1");
+
+// Event listener for popover button triggered
+stackChart1.addEventListener("wmPopoverButtonClick", (ev) => {
+  console.log("wmPopoverButtonClick: ", ev.detail);
+});
+
+stackChart1.config = {
+  label: "Year 1 Cohort Submission Status by Requirement",
+  subinfo: "Progress of completion of licensure requirements",
+  colors: "semantic",
+  showLegend: "top",
+  valueFormat: "percentage",
+};
+
+// Semantic colors per legend. Not Submitted / Awaiting Review fall on the default
+// palette indices (gray / neutral), while Met / Not Met use positive / negative
+// to reproduce the spec's teal & coral rendering.
+const LEGEND_COLORS = {
+  // Met: "wmcolor-dataviz-semantic-positive-01",
+  // "Not Met": "wmcolor-dataviz-semantic-negative-01",
+};
+const withColor = (segment) => ({ ...segment, color: LEGEND_COLORS[segment.legend] ?? undefined });
+
+stackChart1.data = [
+  { stackName: "Two faculty endorsements", legend: "Not Submitted", amount: 5 },
+  { stackName: "Two faculty endorsements", legend: "Awaiting Review", amount: 5 },
+  { stackName: "Requirement 02", legend: "Not Submitted", amount: 2 },
+  { stackName: "Requirement 02", legend: "Met", amount: 6 },
+  { stackName: "Requirement 02", legend: "Not Met", amount: 2 },
+  { stackName: "Requirement 03", legend: "Awaiting Review", amount: 2 },
+  { stackName: "Requirement 03", legend: "Met", amount: 2 },
+  { stackName: "Requirement 03", legend: "Not Met", amount: 6 },
+].map(withColor);
+
+////////////////////////////////////////////////////////////
+// Control Panel
+////////////////////////////////////////////////////////////
+
+// Colors control
+document.getElementById("colors-discrete").addEventListener("change", () => {
+  stackChart1.config = { ...stackChart1.config, colors: "discrete" };
+});
+document.getElementById("colors-semantic").addEventListener("change", () => {
+  stackChart1.config = { ...stackChart1.config, colors: "semantic" };
+});
+
+// Value format control
+document.getElementById("value-format-percentage").addEventListener("change", () => {
+  stackChart1.config = { ...stackChart1.config, valueFormat: "percentage" };
+});
+document.getElementById("value-format-none").addEventListener("change", () => {
+  stackChart1.config = { ...stackChart1.config, valueFormat: "none" };
+});
+
+// Legend position control
+function updateLegendPosition() {
+  stackChart1.config = {
+    ...stackChart1.config,
+    showLegend: document.querySelector("input[name='legend']:checked").value,
+  };
+}
+["legend-top", "legend-bottom", "legend-left", "legend-right", "legend-none"].forEach((id) => {
+  document.getElementById(id).addEventListener("change", updateLegendPosition);
+});
+
+// Grid control
+document.getElementById("show-grid-checkbox").addEventListener("change", (ev) => {
+  stackChart1.config = { ...stackChart1.config, showGrid: ev.target.checked };
+});
+
+// Label controls
+document.getElementById("chart-label-input").addEventListener("change", (ev) => {
+  stackChart1.config = { ...stackChart1.config, label: ev.target.value };
+});
+document.getElementById("subinfo-input").addEventListener("change", (ev) => {
+  stackChart1.config = { ...stackChart1.config, subinfo: ev.target.value };
+});
+
+// Popover controls
+document.getElementById("popover-title-input").addEventListener("change", (ev) => {
+  stackChart1.config = { ...stackChart1.config, popoverTitle: ev.target.value };
+});
+document.getElementById("popover-text-input").addEventListener("change", (ev) => {
+  stackChart1.config = { ...stackChart1.config, popoverText: ev.target.value };
+});
+document.getElementById("popover-button-text-input").addEventListener("change", (ev) => {
+  stackChart1.config = { ...stackChart1.config, popoverButtonText: ev.target.value };
+});
+
+// Display option controls
+document.getElementById("show-label-checkbox").addEventListener("change", (ev) => {
+  stackChart1.config = { ...stackChart1.config, showLabel: ev.target.checked };
+});
+document.getElementById("print-mode-checkbox").addEventListener("change", (ev) => {
+  stackChart1.config = { ...stackChart1.config, printMode: ev.target.checked };
+});
+document.getElementById("pattern-mode-checkbox").addEventListener("change", (ev) => {
+  stackChart1.config = { ...stackChart1.config, patternMode: ev.target.checked };
+});
+
+////////////////////////////////////////////////////////////
+// Data Controls & Presets
+////////////////////////////////////////////////////////////
+
+const dataJsonInput = document.getElementById("data-json-input");
+
+function setChartData(data) {
+  // Restore a config if it was cleared (e.g. via the Unset preset) so the chart re-renders.
+  if (!stackChart1.config) {
+    stackChart1.config = {
+      label: "Year 1 Cohort Submission Status by Requirement",
+      subinfo: "Progress of completion of licensure requirements",
+      colors: "semantic",
+      showLegend: "top",
+      valueFormat: "percentage",
+    };
+  }
+  stackChart1.data = data;
+  if (dataJsonInput) {
+    dataJsonInput.value = JSON.stringify(data, null, 2);
+  }
+}
+
+// Apply JSON data
+document.getElementById("apply-json-data").addEventListener("click", () => {
+  try {
+    stackChart1.data = JSON.parse(dataJsonInput.value);
+  } catch (e) {
+    alert("Invalid JSON: " + e.message);
+  }
+});
+
+// Preset: Single stack
+document.getElementById("preset-single").addEventListener("click", () => {
+  setChartData([
+    { stackName: "Submission Status", legend: "Not Submitted", amount: 5 },
+    { stackName: "Submission Status", legend: "Awaiting Review", amount: 5 },
+    { stackName: "Submission Status", legend: "Met", amount: 5 },
+    { stackName: "Submission Status", legend: "Not Met", amount: 5 },
+  ]);
+});
+
+// Preset: Multiple stacks (group variant)
+document.getElementById("preset-grouped").addEventListener("click", () => {
+  setChartData(
+    [
+      { stackName: "Two faculty endorsements", legend: "Not Submitted", amount: 5 },
+      { stackName: "Two faculty endorsements", legend: "Awaiting Review", amount: 5 },
+      { stackName: "Requirement 02", legend: "Not Submitted", amount: 2 },
+      { stackName: "Requirement 02", legend: "Met", amount: 6 },
+      { stackName: "Requirement 02", legend: "Not Met", amount: 2 },
+      { stackName: "Requirement 03", legend: "Awaiting Review", amount: 2 },
+      { stackName: "Requirement 03", legend: "Met", amount: 2 },
+      { stackName: "Requirement 03", legend: "Not Met", amount: 6 },
+    ].map(withColor)
+  );
+});
+
+// Preset: Many segments (8 — fills the semantic palette)
+document.getElementById("preset-many").addEventListener("click", () => {
+  const legends = ["Segment A", "Segment B", "Segment C", "Segment D", "Segment E", "Segment F", "Segment G", "Segment H"];
+  setChartData(legends.map((legend) => ({ stackName: "Eight Segments", legend, amount: 10 })));
+});
+
+// Preset: More segments than the palette (extras fall back to the default color)
+document.getElementById("preset-overflow").addEventListener("click", () => {
+  const data = [];
+  for (let i = 1; i <= 10; i++) {
+    data.push({ stackName: "Ten Segments", legend: `Segment ${i}`, amount: 10 });
+  }
+  setChartData(data);
+});
+
+// Preset: Custom popovers (per-segment overrides + a button)
+document.getElementById("preset-popover").addEventListener("click", () => {
+  setChartData([
+    { stackName: "Submission Status", legend: "Not Submitted", amount: 4 },
+    {
+      stackName: "Submission Status",
+      legend: "Awaiting Review",
+      amount: 6,
+      popoverTitle: "Awaiting Review",
+      popoverText: "Six submissions are awaiting reviewer assignment.",
+      popoverButtonText: "View Details",
+    },
+    { stackName: "Submission Status", legend: "Met", amount: 4 },
+  ]);
+});
+
+// Preset: Unset config and data (test the data -> no data transition)
+document.getElementById("preset-unset").addEventListener("click", () => {
+  stackChart1.config = undefined;
+  stackChart1.data = undefined;
+  if (dataJsonInput) {
+    dataJsonInput.value = "";
+  }
+});
+
+// Initialize JSON textarea with current data after chart loads
+setTimeout(() => {
+  if (stackChart1 && stackChart1.data && dataJsonInput) {
+    dataJsonInput.value = JSON.stringify(stackChart1.data, null, 2);
+  }
+}, 1500);

package/dist/collection/dev/chart.js

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,14 @@
+document.querySelectorAll("wm-date-range").forEach((dateRange) => {
+  dateRange.addEventListener("wmRangeSelection", (ev) => {
+    dateRange.valueStart = ev.detail.startDate.us;
+    dateRange.valueEnd = ev.detail.endDate.us;
+  });
+});
+
+setTimeout(() => {
+  const modal = document.getElementById("date-range-modal");
+  document.getElementById("modal-btn").addEventListener("click", () => (modal.open = true));
+  modal.addEventListener("wmModalSecondaryTriggered", () => (modal.open = false));
+  modal.addEventListener("wmModalPrimaryTriggered", () => (modal.open = false));
+  modal.addEventListener("wmModalCloseTriggered", () => (modal.open = false));
+}, 50);

package/dist/collection/dev/datepicker.js

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,16 @@
+/* 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

@@ -0,0 +1,194 @@
+// 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

@@ -0,0 +1,6 @@
+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/line-chart.js

@@ -0,0 +1,45 @@
+function createLineLabels(numLines) {
+  // prettier-ignore
+  const wordBank = [ "Requirement", "Write", "Pneumonoultramicroscopicsilicovolcanoconiosis", "Incomprehensibility", "Firefighter", "Rugby", "Foreigner", "Pleasure", "Allow", "Half", "Dish", "Preference", "Floccinaucinihilipilification", "Physical", "Provincial", "Burial", "Wrap", "Zone", "Silk", "Trace", "Sting", "Guess", "Excavate", "Applied", "File", "Floor", "Makeup", "Wait", "Try", "Drug", "Archive", "Concentrate", "Multimedia", "Discreet", "Hypothesis", "Sleep", "Red", "Crevice", "Realism", "Constituency", "Module", "Redundancy", "Manner", "Basket", "Credibility", "Sausage", "Code", "Track", "Pair", "Nominate", "Parade", "Nursery", "Foot", "Form", "Bolt", "Missile", "Ghost", "Classify", "Chin", "Sheep", "System", "Good", "Manual", "Plagiarize", "Brick", "Presidency", "Jockey", "Flour", "Amuse", "Knife", "Biography", "Value", "Vat", "Weakness", "Ambiguous", "Heat", "Dive", "Bring", "Intelligence", "Layer", "Obscure", "Artist", "Limited", "Council", "Meeting", "Turn", "Few", "Mail", "Action", "Distinct", "Different", "Convulsion", "Volcano", "Conference", "Outlet", "Collect", "Rehabilitation", "Edition", "Fund", "Loot", "Menu" ];
+  let lineLabels = [];
+  for (let i = 0; i < numLines; i++) {
+    let build = "";
+    for (let j = 0; j < 3; j++) {
+      build += " " + wordBank[Math.round(Math.random() * wordBank.length)];
+    }
+    lineLabels[i] = build;
+  }
+  return lineLabels;
+}
+
+function createRandomData(numLines) {
+  let result = {};
+  const lineLabels = createLineLabels(numLines);
+  const numPoints = Math.round(Math.random() * 50) + 2;
+  const startYear = Math.round(Math.random() * 100) + 1971;
+  let xLabels = [];
+  for (let x = 0; x < numPoints; x++) {
+    xLabels.push((x + startYear).toString());
+  }
+
+  for (let i = 0; i < numLines; i++) {
+    let line = {};
+    let yValues = [];
+    const initialAmplitude = 40;
+    const variance = 20;
+    let initialYValue = Math.round(Math.random() * initialAmplitude);
+    xLabels.forEach((xLabel) => {
+      initialYValue += Math.round(Math.random() * (variance * 2)) - variance;
+      line[xLabel] = initialYValue;
+    });
+    result[lineLabels[i]] = line;
+  }
+
+  return result;
+}
+
+window.changeData = function (id) {
+  let lineCount = Math.round(Math.random() * 6) + 1;
+  document.getElementById(id).lineData = createRandomData(lineCount);
+  document.getElementById(id).spotlightData = { label: "Spotlight", "1990": 10 };
+};

package/dist/collection/dev/modal.js

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,13 @@
+// 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

@@ -0,0 +1,34 @@
+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.
+);
+
+