@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

package/dist/collection/dev/tabs.js

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

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

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

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

@@ -0,0 +1,9 @@
+requestAnimationFrame(() => {
+  // put toggletip in shadow DOM (now inside scrollable wrapper)
+  const host = document.querySelector("#host");
+  const shadow = host.attachShadow({ mode: "open" });
+  const tsd = document.querySelector("#tsd");
+  tsd.label = "Toggletip in shadow DOM with scrollable parent";
+  tsd.tooltip = "This should account for the red container's scroll offset";
+  shadow.appendChild(tsd);
+});

package/dist/collection/dev/uploader.js

@@ -0,0 +1,139 @@
+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, 0.00), 1000 + 3000);
+        setTimeout(() => updateUploadProgress(upl, fileId, 25), 3000 + uploadStagger + 6000);
+        setTimeout(() => updateUploadProgress(upl, fileId, 75.5), 3250 + uploadStagger + 15000);
+        setTimeout(() => updateUploadProgress(upl, fileId, 100), 3500 + uploadStagger + 20000);
+      } 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,5 +1,6 @@
 export const generateId = () => "random-id";
 export const getTextDir = () => "rtl";
 export const intl = {
-  formatMessage: (_) => "[translated text]",
+    formatMessage: (_) => "[translated text]",
 };
+export const adjustTooltipPosition = () => "bottom-right";