@watermarkinsights/ripple 5.2.0 → 5.2.1-0

package/dist/collection/dev/scripts.js

@@ -1,362 +1,9 @@
-/* GLOBAL */
-function openModal(id) {
-  const modal = document.getElementById(id);
-  modal.open = true;
-}
-
-function closeModal(ev) {
-  const modal = ev.target;
-  modal.open = false;
-}
-
-const modals = document.querySelectorAll("wm-modal");
-modals.forEach((modal) => {
-  modal.addEventListener("wmModalCloseTriggered", (ev) => closeModal(ev));
-  modal.addEventListener("wmModalPrimaryTriggered", (ev) => closeModal(ev));
-  modal.addEventListener("wmModalSecondaryTriggered", (ev) => closeModal(ev));
-});
-
-/* CHART (SMALL VALUES) */
-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);
-  }
-}
-window.addEventListener("load", spawnCharts);
-
-/* DATEPICKER */
-function customizedError() {
-  let dp = document.getElementById("firstDP");
-  if (dp) {
-    if (dp.value.includes("2013")) {
-      dp.errorMessage = "Year cannot be 2013!";
-    } else {
-      dp.errorMessage = "";
-    }
-  }
-}
-window.addEventListener("load", () => {
-  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";
-    }
-  });
-});
-
-/* 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);
-    });
-  });
-
-/* INPUT */
-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());
-}
-
-/* MODAL */
-function showModal(id) {
-  const modal = document.getElementById(id);
-  modal.open = true;
-}
-
-function showDialog(id) {
-  const event = new Event("wmShowModal");
-  event.detail = "dialog";
-  window.dispatchEvent(event);
-  const dialog = document.getElementById(id);
-  dialog.open = true;
-}
-
-const modal = document.getElementById("modal");
-const innerModal = document.getElementById("inner-modal");
-const innerDialog = document.getElementById("inner-dialog");
-const nestedModal = document.getElementById("nested-modal");
-
-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");
-  });
-
-const nestingModals = [modal, innerModal, innerDialog, nestedModal];
-
-nestingModals.forEach((modal) => {
-  modal && modal.addEventListener("wmModalPrimaryTriggered", actionTriggered);
-  modal && modal.addEventListener("wmModalSecondaryTriggered", modalDismissed);
-  modal && modal.addEventListener("wmModalCloseTriggered", modalDismissed);
-});
-
-function actionTriggered(element) {
-  modalInput.value = "";
-  console.log("Changes saved");
-  modalFooter.actionDisabled = true;
-  this.open = false;
-}
-
-function modalDismissed(element) {
-  this.open = false;
-}
-
-const dialog = document.getElementById("dialog");
-
-dialog &&
-  dialog.addEventListener("wmModalCloseTriggered", function () {
-    dialog.open = false;
-  });
-
-dialog &&
-  dialog.addEventListener("wmModalSecondaryTriggered", function () {
-    dialog.open = false;
-    alert("Secondary clicked!");
-  });
-
-dialog &&
-  dialog.addEventListener("wmModalPrimaryTriggered", function () {
-    console.log("Deleted");
-    dialog.open = false;
-  });
-
-/* NAVIGATION */
-// 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;
-    }
-  });
-}
-
-window.addEventListener("load", () => {
-  setActiveOnLoad();
-});
-
-/* NAVIGATOR */
-window.addEventListener("load", () => {
-  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.
-);
-
-/* PAGINATION */
-var notifications = [];
-window.addEventListener("wmPaginationPageClicked", function (ev) {
-  const pagin = document.getElementById(ev.target.id);
-  pagin.currentPage = ev.target.value;
-});
-
-/* SEARCH */
-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");
-  }
-}
-
 function openModal() {
-  document.querySelector("wm-modal").isOpen = "true";
+  document.querySelector("wm-modal").open = "true";
 }
 
 function closeModal() {
-  document.querySelector("wm-modal").isOpen = "false";
+  document.querySelector("wm-modal").open = "false";
 }
 
 evNames = ["wmModalCloseTriggered", "wmModalPrimaryTriggered", "wmModalSecondaryTriggered"];
@@ -366,404 +13,40 @@ evNames.forEach((evName) =>
   })
 );
 
-document.addEventListener("wmSearchValueChanged", (ev) => {
-  console.log("wmSearchValueChanged event fired: ", ev);
-});
+const snackbar = document.getElementById("info");
+let notifications = snackbar && JSON.parse(snackbar.notifications || "[]");
 
-/* SELECT */
 function actionToRun() {
-  var switcher = document.getElementById("switcher");
-  var text = switcher.innerHTML;
-
-  if (text === "Yes") {
-    switcher.innerHTML = "No";
-  } else {
-    switcher.innerHTML = "Yes";
-  }
-}
-
-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);
-}
-
-window.addEventListener("load", () => {
-  const selects = document.querySelectorAll("wm-select");
-  // const selectedOptions = selects.forEach(testSelectedOption);
-});
-
-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));
-}
-
-/* SNACKBAR */
-function generateSnackbar(isDefault = false) {
-  const id = Math.floor(Math.random() * 100) + 1;
-  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 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: "",
   };
 
-  const snackbar = document.getElementById("snackbar");
-  const notifications = JSON.parse(snackbar.notifications);
-  let updatedNotifications = [newNotification, ...notifications];
-  snackbar.notifications = JSON.stringify(updatedNotifications);
+  notifications.push(newNotification);
+  snackbar.notifications = JSON.stringify(notifications);
 }
 
-document.addEventListener("wmSnackbarSnackFinished", function (ev) {
-  console.log("in listener for finished snack");
-  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);
-});
-
-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.");
-});
-
-/* TABS */
-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;
-      }
-    });
+function dismissSnack(ev) {
+  const snackbar = document.getElementById(ev.target.id);
+  notifications = notifications.filter((snack) => snack.id !== ev.detail.id);
+  snackbar.notifications = JSON.stringify(notifications);
 }
 
-/* TAG INPUT */
-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;
-    }
-  });
-});
-
-/* TEXTAREA */
-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 = "";
-    }
-  }
-});
-
-/* TIMEPICKER */
-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);
-  });
-});
-
-/* UPLOADER */
-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] };
-}
+snackbar.addEventListener("wmSnackbarSnackFinished", dismissSnack);