@watermarkinsights/ripple 5.2.1-2 → 5.2.1

package/dist/collection/dev/scripts.js

@@ -1,9 +1,362 @@
+/* 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").open = "true";
+  document.querySelector("wm-modal").isOpen = "true";
 }
 
 function closeModal() {
-  document.querySelector("wm-modal").open = "false";
+  document.querySelector("wm-modal").isOpen = "false";
 }
 
 evNames = ["wmModalCloseTriggered", "wmModalPrimaryTriggered", "wmModalSecondaryTriggered"];
@@ -13,40 +366,404 @@ evNames.forEach((evName) =>
   })
 );
 
-const snackbar = document.getElementById("info");
-let notifications = snackbar && JSON.parse(snackbar.notifications || "[]");
+document.addEventListener("wmSearchValueChanged", (ev) => {
+  console.log("wmSearchValueChanged event fired: ", ev);
+});
 
+/* SELECT */
 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: "",
+  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,
   };
 
-  notifications.push(newNotification);
-  snackbar.notifications = JSON.stringify(notifications);
+  const snackbar = document.getElementById("snackbar");
+  const notifications = JSON.parse(snackbar.notifications);
+  let updatedNotifications = [newNotification, ...notifications];
+  snackbar.notifications = JSON.stringify(updatedNotifications);
 }
 
-function dismissSnack(ev) {
-  const snackbar = document.getElementById(ev.target.id);
-  notifications = notifications.filter((snack) => snack.id !== ev.detail.id);
-  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;
+      }
+    });
 }
 
-snackbar.addEventListener("wmSnackbarSnackFinished", dismissSnack);
+/* 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] };
+}