@watermarkinsights/ripple 5.12.0 → 5.13.0-alpha.1

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

package/dist/collection/dev/select.js

@@ -1,57 +0,0 @@
-document.addEventListener("wmSelectBlurred", renderErrors);
-
-function renderErrors() {
-  const errorDiv = document.getElementById("errors");
-  const select = document.getElementById("select1");
-  const selectedOption = Array.from(select.querySelectorAll("wm-option")).filter((o) => o.selected)[0];
-
-  if (selectedOption.value === "C") {
-    select.invalid = true;
-    select.errorMessage = "C is my least favorite letter.";
-  } else {
-    select.invalid = false;
-    select.errorMessage = null;
-  }
-}
-
-function testSelectedOption(selectComp) {
-  setTimeout(() => {
-    // making sure the selected and aria-selected attributes are always in sync
-    const options = selectComp.querySelectorAll("wm-option");
-    let selectedOption = Array.from(options).filter((option) => !!option.selected)[0];
-    const ariaSelectedOption = Array.from(options).filter((option) => !!option.getAttribute("aria-selected"))[0];
-    if (selectedOption != ariaSelectedOption) {
-      console.log(selectComp.id, selectedOption, ariaSelectedOption);
-    }
-  }, 150);
-}
-
-const selects = document.querySelectorAll("wm-select");
-selects.forEach((select) => {
-  select.addEventListener("wmOptionSelected", (ev) => handleOptionSelected(ev));
-  select.addEventListener("wmOptionDeselected", (ev) => handleOptionDeselected(ev));
-  select.addEventListener("wmSelectAllSelected", (ev) => handleAllSelected(ev));
-  select.addEventListener("wmSelectAllDeselected", (ev) => handleAllDeselected(ev));
-});
-
-function handleOptionSelected(ev) {
-  const parentSelect = ev.target.parentElement;
-
-  if (!parentSelect.multiple) {
-    // in single select, deselect all other options
-    parentSelect.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/snackbar.js

@@ -1,54 +0,0 @@
-let notifications = [];
-
-function generateSnackbar(isDefault = false) {
-  const randomId = (Math.floor(Math.random() * 100) + 1).toString();
-  const id = isDefault
-    ? randomId
-    : document.getElementById("custom-id").value
-    ? document.getElementById("custom-id").value
-    : randomId;
-  const message = isDefault ? `Here's a snackbar ${id}` : document.getElementById("custom-notif").value;
-  const link = isDefault ? "View this person in the table" : document.getElementById("custom-link").value;
-  const newWindow = isDefault ? true : link && document.getElementById("new-window").checked;
-
-  let newNotification = {
-    id: id,
-    message: message,
-    link: link,
-    newWindow: newWindow,
-  };
-
-  const snackbar = document.getElementById("snackbar");
-  notifications = [newNotification, ...notifications];
-  snackbar.notifications = JSON.stringify(notifications);
-}
-
-document.querySelector("#snack-basic").addEventListener("click", () => generateSnackbar(true));
-document.querySelector("#snack-custom").addEventListener("click", () => generateSnackbar());
-document.querySelector("#snack-update").addEventListener("click", () => updateSnackText());
-
-document.addEventListener("wmSnackbarSnackFinished", function (ev) {
-  const snackbar = document.getElementById("snackbar");
-  let newSnacks = notifications.filter((snack) => snack.id !== ev.detail.id);
-  notifications = newSnacks;
-  snackbar.notifications = JSON.stringify(notifications);
-});
-
-document.addEventListener("wmSnackbarActionTriggered", function (ev) {
-  const snackbar = document.getElementById("snackbar");
-  let newSnacks = JSON.parse(snackbar.notifications).filter(function (snack) {
-    return snack.id !== +ev.detail.id;
-  });
-  snackbar.notifications = JSON.stringify(newSnacks);
-  console.log("You clicked the action.");
-});
-
-function updateSnackText() {
-  const snackbar = document.querySelector("#snackbar");
-  notifications.forEach((notif) => {
-    if (notif.id == "11") {
-      notif.message = Date.now().toLocaleString();
-    }
-  });
-  snackbar.notifications = JSON.stringify(notifications);
-}

package/dist/collection/dev/tabs.js

@@ -1,44 +0,0 @@
-const tab1 = document.getElementById("tab-1");
-if (tab1) {
-  tab1.addEventListener("wmTabSelected", function (ev) {
-    let activeTab = ev.detail.tabId;
-    let tabContainer = document.getElementById("tab-1-wrapper");
-    let panel = tabContainer.querySelector("#tab-panel");
-    let tabList = document.getElementById("tab-1");
-
-    tabList.selectedTab = activeTab;
-  });
-
-  const cloudTabs = document.getElementById("cloud-tabs");
-  cloudTabs &&
-    cloudTabs.addEventListener("wmTabSelected", (ev) => {
-      const tabId = ev.detail.tabId;
-      const cloudTabs = document.getElementById("cloud-tabs");
-      cloudTabs.selectedTab = tabId;
-      let panel = document.querySelector(`wm-tab-panel[tab-id=${tabId}]`);
-      console.log(panel);
-
-      if (panel) {
-        let text;
-
-        switch (tabId) {
-          case "cumulonimbus":
-            text =
-              'Cumulonimbus (from Latin cumulus, "heaped" and nimbus, "rainstorm") is a dense, towering vertical cloud.';
-            break;
-          case "cirrostratus":
-            text =
-              "Cirrostratus /ˌsɪroʊˈstrɑːtəs/ is a high-level, very thin, generally uniform stratiform genus-type of cloud.";
-            break;
-          case "altostratus":
-            text =
-              "Altostratus is a middle altitude cloud genus belonging to the stratiform physical category characterized by a generally uniform gray to bluish-green sheet or layer.";
-            break;
-          default:
-            text = "";
-        }
-
-        panel.innerHTML = text;
-      }
-    });
-}

package/dist/collection/dev/tag-input.js

@@ -1,32 +0,0 @@
-const allTagInputs = document.querySelectorAll("wm-tag-input");
-
-allTagInputs.forEach((ti) => {
-  const initialTags = Array.from(ti.querySelectorAll("wm-tag-option")).map((o) => o.textContent);
-
-  ti.addEventListener("wmTagInputTagAdded", (ev) => {
-    const ciTagName = ev.detail.toLowerCase().trim();
-    const ciExistingTagNames = Array.from(ti.querySelectorAll("wm-tag-option")).map((o) =>
-      o.textContent.toLowerCase().trim()
-    );
-    if (ti.tagInputType === "dropdown" && !ciExistingTagNames.includes(ciTagName)) {
-      const to = document.createElement("wm-tag-option");
-      to.textContent = ev.detail;
-      to.id = "tag" + Math.random().toString(36).substr(2, 6);
-      to.selected = true;
-      ti.appendChild(to);
-    }
-  });
-
-  ti.addEventListener("wmTagOptionSelected", (ev) => {
-    ev.target.selected = true;
-  });
-
-  ti.addEventListener("wmTagOptionDeselected", (ev) => {
-    const isUserTag = !initialTags.includes(ev.target.textContent);
-    if (isUserTag) {
-      ev.target.remove();
-    } else {
-      ev.target.selected = false;
-    }
-  });
-});

package/dist/collection/dev/textarea.js

@@ -1,28 +0,0 @@
-const textAreaEls = document.querySelectorAll("wm-textarea");
-
-textAreaEls.forEach((textAreaEl) => {
-  textAreaEl.addEventListener("wmTextareaValueChanged", (ev) => {
-    console.log("wmTextareaValueChanged heard: ", ev.target.value);
-  });
-
-  textAreaEl.addEventListener("blur", (ev) => {
-    textAreaEl.characterLimit && handleCharacterLimit(textAreaEl);
-    textAreaEl.requiredField && handleRequiredTextArea(textAreaEl);
-  });
-
-  function handleCharacterLimit(textAreaEl) {
-    if (textAreaEl.value.length > textAreaEl.characterLimit) {
-      textAreaEl.errorMessage = "Character limit exceeded, please reduce entered text.";
-    } else if (textAreaEl.errorMessage == "Character limit exceeded, please reduce entered text.") {
-      textAreaEl.errorMessage = "";
-    }
-  }
-
-  function handleRequiredTextArea(textAreaEl) {
-    if (textAreaEl.value.length == 0) {
-      textAreaEl.errorMessage = "This field is required.";
-    } else if (textAreaEl.errorMessage == "This field is required.") {
-      textAreaEl.errorMessage = "";
-    }
-  }
-});

package/dist/collection/dev/timepicker.js

@@ -1,32 +0,0 @@
-const timepickers = document.querySelectorAll("wm-timepicker");
-
-timepickers.forEach((timepicker) => {
-  timepicker.addEventListener("wmTimepickerInputBlurred", async (ev) => {
-    // reformat time and validate for invalid date
-    if (timepicker.value) {
-      if (await timepicker.isValidTime(ev.target.value)) {
-        const displayTime = await timepicker.reformatTime("12", timepicker.value);
-
-        timepicker.errorMessage = "";
-        timepicker.value = displayTime;
-      } else {
-        timepicker.errorMessage = "Please enter a valid time";
-      }
-    }
-  });
-
-  timepicker.addEventListener("blur", (ev) => {
-    // validate for required time
-    if (timepicker.requiredField && timepicker.value === "") {
-      timepicker.errorMessage = "A time is required";
-    }
-  });
-
-  timepicker.addEventListener("wmTimepickerTimeSelected", async (ev) => {
-    // handle user time selection
-    const selectedTime = ev.detail.time;
-
-    timepicker.errorMessage = "";
-    timepicker.value = await timepicker.reformatTime("12", selectedTime);
-  });
-});

package/dist/collection/dev/toggletip.js

@@ -1,9 +0,0 @@
-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/dev/uploader.js

@@ -1,139 +0,0 @@
-function addServerError() {
-  document.getElementById("uploader11").errorMessage = "An error has occurred!";
-}
-const uploaders = document.querySelectorAll("wm-uploader");
-
-uploaders.forEach((upl) => {
-  upl.addEventListener("wmUploaderFilesSelected", (ev) => handleFilesSelected(ev));
-  upl.addEventListener("wmFileErrorCleared", (ev) => handleErrorCleared(ev));
-  upl.addEventListener("wmFileDownload", (ev) => alert("downloading " + ev.target.id));
-  upl.addEventListener("wmFilePreview", (ev) => alert("previewing " + ev.target.id));
-  upl.addEventListener("wmFileDelete", (ev) => removeFile(ev));
-});
-
-function validateFile(upl, file) {
-  const fileList = Array.from(upl.querySelectorAll("wm-file:not([error-message])"));
-  const sizeLimit = 100; // in MB
-
-  if (fileList.some((currentFile) => `${currentFile.name}.${currentFile.type}` === `${file.name}.${file.type}`)) {
-    // check for duplicate file name
-    return `A file named "${file.name}.${file.type}" has already been uploaded.`;
-  } else if (upl.maxSize && file.size / (1024 * 1024) > sizeLimit) {
-    // check against maxSize
-    return `The file is larger than maximum size ${upl.maxSize}.`;
-  } else if (!upl.fileTypes.split(" ").includes(file.type)) {
-    // check against accepted file types
-    return `.${file.type} is not an accepted file type.`;
-  } else {
-    return "";
-  }
-}
-
-function addFile(upl, newFile) {
-  const newFileEl = document.createElement("wm-file");
-  const convertedSize = convertBytes(newFile.size);
-  newFileEl.id = newFile.id;
-  newFileEl.name = newFile.name;
-  newFileEl.type = newFile.type;
-  newFileEl.lastUpdated = newFile.lastUpdated;
-  newFileEl.size = `${convertedSize.size} ${convertedSize.unit}`;
-  newFileEl.progress = newFile.progress;
-
-  upl.append(newFileEl);
-}
-
-function addError(upl, newFile, errorMessage) {
-  const newFileEl = document.createElement("wm-file");
-  newFileEl.id = newFile.id;
-  newFileEl.name = newFile.name;
-  newFileEl.type = newFile.type;
-  newFileEl.errorMessage = errorMessage;
-  upl.prepend(newFileEl);
-}
-
-function removeFile(ev) {
-  const upl = ev.target.parentElement;
-  const fileId = ev.target.id;
-  upl.querySelector(`#${fileId}`).remove();
-}
-
-function handleFilesSelected(ev) {
-  const upl = ev.target;
-  const selectedFiles = ev.detail;
-  let currentFiles = upl.querySelectorAll("wm-file:not([error-message])");
-
-  if (upl.maxFiles && currentFiles.length + selectedFiles.length > upl.maxFiles) {
-    // validate for number of files exceeding file limit
-    upl.errorMessage = "Upload unsuccessful because file selection would exceed the maximum number of files";
-  } else {
-    upl.errorMessage = "";
-
-    selectedFiles.map((file, idx) => {
-      const filenameParts = file.name.split(".");
-      const fileType = filenameParts.pop();
-      const name = filenameParts.join(".");
-      const currentDate = `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`;
-      const fileId = `file${Math.floor(Math.random() * 9999)}`; // mock random file id
-      const uploadStagger = idx * 2000; // stagger for more realistic mocked upload "speed"
-      const newFile = {
-        id: fileId,
-        name: name,
-        type: fileType,
-        lastUpdated: currentDate,
-        size: file.size,
-        progress: 0,
-      };
-
-      const fileError = validateFile(upl, newFile);
-      if (!fileError) {
-        addFile(upl, newFile);
-
-        // mock series of upload progress updates
-        setTimeout(() => updateUploadProgress(upl, fileId, 25), 1000);
-        setTimeout(() => updateUploadProgress(upl, fileId, 50), 3000 + uploadStagger);
-        setTimeout(() => updateUploadProgress(upl, fileId, 75), 3250 + uploadStagger);
-        setTimeout(() => updateUploadProgress(upl, fileId, 100), 3500 + uploadStagger);
-      } else {
-        addError(upl, newFile, fileError);
-      }
-    });
-  }
-}
-
-function updateUploadProgress(upl, fileId, mockProgress) {
-  const fileEl = upl.querySelector(`#${fileId}`);
-  fileEl.progress = mockProgress;
-}
-
-function handleErrorCleared(ev) {
-  const upl = ev.target.parentElement;
-  const errorId = ev.target.id;
-  upl.querySelector(`#${errorId}`).remove();
-}
-
-function handleSubmit() {
-  const requiredUploader = document.getElementById("uploader2");
-  const fileList = requiredUploader.querySelectorAll("wm-file:not([error-message])");
-  requiredUploader.errorMessage = fileList.length === 0 ? "Please upload at least one file" : "";
-}
-
-function convertBytes(bytes, unit) {
-  const unitOrder = ["bytes", "KB", "MB", "GB", "TB"];
-  let unitIndex = 0;
-  let result = typeof bytes === "number" ? bytes : parseInt(bytes);
-
-  if (unit) {
-    // convert until result matches desired unit
-    while (unitOrder.indexOf(unit) > unitIndex) {
-      result /= 1024;
-      unitIndex++;
-    }
-  } else {
-    // convert until result is appropriate unit (value is under 1000)
-    while (result > 1000) {
-      result /= 1024;
-      unitIndex++;
-    }
-  }
-  return { size: result, unit: unitOrder[unitIndex] };
-}

package/dist/collection/global/__mocks__/functions.js

@@ -1,6 +0,0 @@
-export const generateId = () => "random-id";
-export const getTextDir = () => "rtl";
-export const intl = {
-    formatMessage: (_) => "[translated text]",
-};
-export const adjustTooltipPosition = () => "bottom-right";