@splendidlabz/utils 1.11.3 → 1.11.5

package/dist/esm/dom/get-element.js

@@ -0,0 +1,66 @@
+const astroNodes = ["ASTRO-SLOT", "ASTRO-ISLAND"];
+function getNodeType(node) {
+  if (node instanceof Element) return "element";
+  if (node instanceof NodeList) return "nodelist";
+  if (Array.isArray(node)) return "array";
+}
+function getElement(selector) {
+  if (!selector) return;
+  if (selector instanceof Element) return selector;
+  return document.querySelector(selector);
+}
+function getChildrenElements(node) {
+  let children = node.children;
+  if (children[0]?.nodeName === "ASTRO-SLOT") children = children[0].children;
+  return Array.from(children);
+}
+function getParentElement(element) {
+  const parent = element.parentElement;
+  if (astroNodes.includes(parent.nodeName)) return getParentElement(parent);
+  return parent;
+}
+function getSiblingElements(element) {
+  return Array.from(element.parentElement.children).filter(
+    (child) => child !== element
+  );
+}
+function getSelfIndex(element) {
+  return Array.from(element.parentElement.children).indexOf(element);
+}
+function isAncestor(ancestor, element, { searchLevels = 0 } = {}) {
+  if (ancestor === element) return true;
+  let parent = element.parentElement;
+  if (searchLevels === 0) {
+    while (parent) {
+      if (ancestor === parent) return true;
+      parent = parent.parentElement;
+    }
+  } else {
+    for (let i = 0; i < searchLevels; i++) {
+      if (ancestor === parent) return true;
+      parent = parent.parentElement;
+    }
+  }
+  return false;
+}
+function getAncestorWithSiblings(element, { limit = false } = {}) {
+  const ancestor = element.parentElement;
+  const siblings = getSiblingElements(ancestor);
+  if (siblings.length) return siblings;
+  if (!ancestor) return null;
+  if (limit === false) return getAncestorWithSiblings(ancestor);
+  if (typeof limit === "number" && limit > 0) {
+    return getAncestorWithSiblings(ancestor, { limit: limit - 1 });
+  }
+  if (limit === 0) return null;
+}
+export {
+  getAncestorWithSiblings,
+  getChildrenElements,
+  getElement,
+  getNodeType,
+  getParentElement,
+  getSelfIndex,
+  getSiblingElements,
+  isAncestor
+};

package/dist/esm/dom/hash.js

@@ -0,0 +1,10 @@
+async function sha256Hash(string) {
+  const utf8 = new TextEncoder().encode(string);
+  const hashBuffer = await crypto.subtle.digest("SHA-256", utf8);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray.map((bytes) => bytes.toString(16).padStart(2, "0")).join("");
+  return hashHex;
+}
+export {
+  sha256Hash
+};

package/dist/esm/dom/index.js

@@ -0,0 +1,23 @@
+export * from "./accessibility.js";
+export * from "./actions/index.js";
+export * from "./bounding-box.js";
+export * from "./clipboard.js";
+export * from "./cookie.js";
+export * from "./css-vars.js";
+export * from "./events.js";
+export * from "./focusable.js";
+export * from "./font-size.js";
+export * from "./get-element.js";
+export * from "./hash.js";
+export * from "./keyboard.js";
+export * from "./local-store.js";
+export * from "./media.js";
+export * from "./observers/index.js";
+export * from "./pkce.js";
+export * from "./query-params.js";
+export * from "./random-string.js";
+export * from "./sanitize.js";
+export * from "./session-store.js";
+export * from "./spam-prevention.js";
+export * from "./trap-focus.js";
+export * from "./ui/index.js";

package/dist/esm/dom/keyboard.js

@@ -0,0 +1,22 @@
+function isTab(event) {
+  return !event.shiftKey && event.key === "Tab";
+}
+function isShiftTab(event) {
+  return event.shiftKey && event.key === "Tab";
+}
+function isTabKey(key) {
+  return key === "Tab";
+}
+function isArrowKey(key) {
+  return ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(key);
+}
+function isEscapeKey(key) {
+  return key === "Escape";
+}
+export {
+  isArrowKey,
+  isEscapeKey,
+  isShiftTab,
+  isTab,
+  isTabKey
+};

package/{src → dist/esm}/dom/local-store.js

@@ -1,66 +1,54 @@
-// ========================
-// Local Storage
-// ========================
-
-/**
- * Utility object for managing localStorage operations with JSON support
- * @namespace localStore
- */
-export const localStore = {
+const localStore = {
   /**
    * Retrieves a value from localStorage
    * @param {string} key - The key to retrieve from localStorage
    * @returns {any} The stored value. Returns parsed JSON if the value was stored as JSON. Returns the original string if not JSON, or undefined if key doesn't exist
    */
   get(key) {
-    const value = localStorage.getItem(key)
-    if (!value) return
-
+    const value = localStorage.getItem(key);
+    if (!value) return;
     try {
-      // Returns an object if stored value is JSON
-      return JSON.parse(value)
+      return JSON.parse(value);
     } catch (error) {
-      // Returns plain string if stored value is not JSON
-      return value
+      return value;
     }
   },
-
   /**
    * Stores a value in localStorage
    * @param {string} key - The key to store the value under
    * @param {any} value - The value to store. Objects will be stringified to JSON
    */
   set(key, value) {
-    if (typeof value === 'string') {
-      localStorage.setItem(key, value)
+    if (typeof value === "string") {
+      localStorage.setItem(key, value);
     } else {
-      localStorage.setItem(key, JSON.stringify(value))
+      localStorage.setItem(key, JSON.stringify(value));
     }
   },
-
   /**
    * Stores multiple key-value pairs in localStorage
    * @param {Object|Map} data - An object or Map containing key-value pairs to store
    */
   setMultiple(data) {
     for (const [key, value] of Object.entries(data)) {
-      this.set(key, value)
+      this.set(key, value);
     }
   },
-
   /**
    * Removes a value from localStorage
    * @param {string} key - The key to remove from localStorage
    */
   remove(key) {
-    localStorage.removeItem(key)
+    localStorage.removeItem(key);
   },
-
   /**
    * Removes multiple keys from localStorage
    * @param {string[]} keys - Array of keys to remove from localStorage
    */
   removeMultiple(keys) {
-    keys.forEach(key => this.remove(key))
-  },
-}
+    keys.forEach((key) => this.remove(key));
+  }
+};
+export {
+  localStore
+};

package/dist/esm/dom/media.js

@@ -0,0 +1,32 @@
+async function imagesLoaded(node) {
+  const images = Array.from(node.querySelectorAll("img"));
+  const promises = images.map((img) => {
+    return new Promise((resolve, reject) => {
+      if (img.complete) return resolve();
+      img.onload = resolve;
+      img.onerror = (e) => {
+        reject("Image failed to load");
+      };
+    });
+  });
+  return Promise.all(promises);
+}
+async function videosLoaded(node) {
+  const videos = Array.from(node.querySelectorAll("video"));
+  const promises = videos.map((video) => {
+    return new Promise((resolve, reject) => {
+      if (video.readyState === 4) return resolve();
+      video.onloadedmetadata = resolve;
+      video.onerror = reject;
+    });
+  });
+  return Promise.all(promises);
+}
+async function mediaLoaded(node) {
+  return Promise.all([imagesLoaded(node), videosLoaded(node)]);
+}
+export {
+  imagesLoaded,
+  mediaLoaded,
+  videosLoaded
+};

package/dist/esm/dom/observers/index.js

@@ -0,0 +1,4 @@
+export * from "./intersection-observer.js";
+export * from "./mutation-observer.js";
+export * from "./resize-observer.js";
+export * from "./scroll-observer.js";

package/dist/esm/dom/observers/intersection-observer.js

@@ -0,0 +1,36 @@
+import { dispatchEvent } from "../events.js";
+import { useObserverMethodOnTarget } from "./observer.js";
+function intersectionObserver(target, options = {}) {
+  const { callback, ...opts } = options;
+  const observer = new IntersectionObserver(observerFn, opts);
+  useObserverMethodOnTarget(target, observer, "observe");
+  function observerFn(entries) {
+    for (const entry of entries) {
+      if (callback) callback({ entry, entries, observer });
+      else dispatchEvent(target, "intersect", { entry, entries, observer });
+    }
+  }
+  return {
+    observer,
+    observe(target2) {
+      useObserverMethodOnTarget(target2, observer, "observe", options);
+    },
+    unobserve(target2) {
+      useObserverMethodOnTarget(target2, observer, "unobserve");
+    },
+    takeRecords() {
+      return observer.takeRecords();
+    },
+    disconnect() {
+      const records = observer.takeRecords();
+      observer.disconnect();
+      if (records.length > 0) observerFn(records);
+    },
+    destroy() {
+      observer.disconnect();
+    }
+  };
+}
+export {
+  intersectionObserver
+};

package/dist/esm/dom/observers/mutation-observer.js

@@ -0,0 +1,40 @@
+import { dispatchEvent } from "../events.js";
+import { useObserverMethodOnTarget } from "./observer.js";
+const defaultOptions = {
+  attributes: false,
+  childList: false,
+  subtree: false
+};
+function mutationObserver(target, options) {
+  options = { ...defaultOptions, ...options };
+  const { callback, ...opts } = options;
+  const observer = new MutationObserver(observerFn);
+  if (target === window) target = document.body;
+  useObserverMethodOnTarget(target, observer, "observe", opts);
+  function observerFn(entries) {
+    for (const entry of entries) {
+      if (callback) callback({ entry, entries, observer });
+      else dispatchEvent(target, "mutate", { entry, entries, observer });
+    }
+  }
+  return {
+    observer,
+    observe(target2) {
+      useObserverMethodOnTarget(target2, observer, "observe", options);
+    },
+    takeRecords() {
+      return observer.takeRecords();
+    },
+    disconnect() {
+      const records = observer.takeRecords();
+      observer.disconnect();
+      if (records.length > 0) observerFn(records);
+    },
+    destroy() {
+      observer.disconnect();
+    }
+  };
+}
+export {
+  mutationObserver
+};

package/dist/esm/dom/observers/observer.js

@@ -0,0 +1,15 @@
+import { getNodeType } from "../get-element.js";
+function useObserverMethodOnTarget(target, observer, method = "observe", options = void 0) {
+  const targetType = getNodeType(target);
+  if (targetType === "element") observer[method](target, options);
+  if (targetType === "nodelist") {
+    const elements = Array.from(target);
+    elements.forEach((element) => observer[method](element, options));
+  }
+  if (targetType === "array") {
+    target.forEach((element) => observer[method](element, options));
+  }
+}
+export {
+  useObserverMethodOnTarget
+};

package/dist/esm/dom/observers/resize-observer.js

@@ -0,0 +1,29 @@
+import { dispatchEvent } from "../events.js";
+import { useObserverMethodOnTarget } from "./observer.js";
+function resizeObserver(target, options) {
+  const { callback, ...opts } = options;
+  const observer = new ResizeObserver(observerFn);
+  if (target === window || target === document)
+    target = document.documentElement;
+  useObserverMethodOnTarget(target, observer, "observe", opts);
+  function observerFn(entries) {
+    for (const entry of entries) {
+      if (callback) callback({ entry, entries, observer });
+      else
+        dispatchEvent(entry.target, "resize-obs", { entry, entries, observer });
+    }
+  }
+  return {
+    observe(target2) {
+      useObserverMethodOnTarget(target2, observer, "observe", options);
+    },
+    unobserve(target2) {
+      useObserverMethodOnTarget(target2, observer, "unobserve");
+    },
+    disconnect: (_) => observer.disconnect(),
+    destroy: (_) => observer.disconnect()
+  };
+}
+export {
+  resizeObserver
+};

package/dist/esm/dom/observers/scroll-observer.js

@@ -0,0 +1,95 @@
+import { resizeObserver } from "./resize-observer.js";
+const defaultOptions = {
+  threshold: 0,
+  // Float between 0 to 1.
+  tolerance: 0.1,
+  // Float between 0 to 1. Tolerance for event firing
+  once: false
+  // Only fire threshold callback once
+};
+function getScrollElement(node) {
+  if (node === document || node === window || node === document.documentElement) {
+    return document.documentElement;
+  }
+  return (
+    /** @type {Element} */
+    node
+  );
+}
+function scrollObserver(node, options = {}) {
+  const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } = options;
+  const opts = { ...defaultOptions, ...userOpts };
+  const { threshold, tolerance, once } = opts;
+  let prevScrollDirection = null;
+  let prevScrollTop = 0;
+  let prevScrollPercent = 0;
+  let thresholdFired = false;
+  let rafId = null;
+  const isDocumentScroll = node === document || node === window || node === document.documentElement;
+  const scrollElement = getScrollElement(node);
+  const eventTarget = isDocumentScroll ? window : node;
+  let cachedScrollHeight = 0;
+  let cachedClientHeight = 0;
+  updateCache();
+  const cacheObserver = resizeObserver(scrollElement, {
+    callback: updateCache
+  });
+  eventTarget.addEventListener("scroll", throttledObserve, { passive: true });
+  function throttledObserve() {
+    rafId = requestAnimationFrame(observe);
+  }
+  function updateCache() {
+    cachedScrollHeight = scrollElement.scrollHeight;
+    cachedClientHeight = scrollElement.clientHeight;
+  }
+  function observe() {
+    const scrollTop = scrollElement.scrollTop;
+    if (Math.abs(scrollTop - prevScrollTop) < 1) return;
+    const scrollDirection = scrollTop > prevScrollTop ? "down" : "up";
+    const maxScroll = Math.max(1, cachedScrollHeight - cachedClientHeight);
+    const scrollPercent = Math.min(1, Math.max(0, scrollTop / maxScroll));
+    const thresholdMin = threshold - tolerance / 2;
+    const thresholdMax = threshold + tolerance / 2;
+    const wasInThreshold = prevScrollPercent >= thresholdMin && prevScrollPercent <= thresholdMax;
+    const isInThreshold = scrollPercent >= thresholdMin && scrollPercent <= thresholdMax;
+    const hasEnteredThreshold = !wasInThreshold && isInThreshold && (!once || !thresholdFired);
+    if (hasEnteredThreshold && once) {
+      thresholdFired = true;
+    }
+    const callbackData = {
+      scrollTop,
+      scrollDirection,
+      scrollPercent,
+      directionChanged: scrollDirection !== prevScrollDirection,
+      hasEnteredThreshold,
+      isInThreshold
+    };
+    if (typeof callback === "function") {
+      callback(callbackData);
+    }
+    if (scrollDirection !== prevScrollDirection) {
+      if (scrollDirection === "down" && typeof onScrollDown === "function") {
+        onScrollDown(callbackData);
+      }
+      if (scrollDirection === "up" && typeof onScrollUp === "function") {
+        onScrollUp(callbackData);
+      }
+    }
+    if (hasEnteredThreshold && typeof onEnterThreshold === "function") {
+      onEnterThreshold(callbackData);
+    }
+    prevScrollTop = scrollTop;
+    prevScrollPercent = scrollPercent;
+    prevScrollDirection = scrollDirection;
+  }
+  return {
+    destroy() {
+      eventTarget.removeEventListener("scroll", throttledObserve);
+      if (rafId) cancelAnimationFrame(rafId);
+      cacheObserver.destroy();
+    }
+  };
+}
+export {
+  scrollObserver
+};

package/dist/esm/dom/pkce.js

@@ -0,0 +1,20 @@
+import { randomString } from "./random-string.js";
+async function PKCE() {
+  const codeVerifier = await randomString();
+  const codeChallenge = await getCodeChallenge(codeVerifier);
+  return {
+    state: await randomString(),
+    code_verifier: codeVerifier,
+    code_challenge: codeChallenge,
+    code_challenge_method: "S256"
+  };
+}
+async function getCodeChallenge(verifier) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(verifier);
+  const hashed = await window.crypto.subtle.digest("SHA-256", data);
+  return window.btoa(String.fromCharCode.apply(null, new Uint8Array(hashed))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+export {
+  PKCE
+};

package/dist/esm/dom/query-params.js

@@ -0,0 +1,13 @@
+const queryParams = {
+  get(key) {
+    const searchParams = new URLSearchParams(location.search);
+    return searchParams.get(key);
+  },
+  stringify(params) {
+    const searchParams = new URLSearchParams(location.search);
+    return searchParams.toString();
+  }
+};
+export {
+  queryParams
+};

package/dist/esm/dom/random-string.js

@@ -0,0 +1,12 @@
+function randomString(length = 10) {
+  const firstLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
+  const others = Math.random().toString(36).substring(2, 2 + length - 1);
+  return firstLetter + others;
+}
+function uuid() {
+  return crypto.randomUUID();
+}
+export {
+  randomString,
+  uuid
+};

package/dist/esm/dom/sanitize.js

@@ -0,0 +1,8 @@
+import DOMPurify from "dompurify";
+import { sanitize as sanitizeLib } from "../lib/form/sanitize.js";
+function sanitize(value, options = {}) {
+  return sanitizeLib(value, { sanitizer: DOMPurify.sanitize, ...options });
+}
+export {
+  sanitize
+};

package/dist/esm/dom/session-store.js

@@ -0,0 +1,24 @@
+const sessionStore = {
+  get(key) {
+    const value = sessionStorage.getItem(key);
+    if (!value) return;
+    try {
+      return JSON.parse(value);
+    } catch (error) {
+      return value;
+    }
+  },
+  set(key, value) {
+    if (typeof value === "string") {
+      sessionStorage.setItem(key, value);
+    } else {
+      sessionStorage.setItem(key, JSON.stringify(value));
+    }
+  },
+  remove(key) {
+    sessionStorage.removeItem(key);
+  }
+};
+export {
+  sessionStore
+};

package/dist/esm/dom/spam-prevention.js

@@ -0,0 +1,25 @@
+function preventSpam(form, { honeypotField = "hp", honeypotDuration = 2e3 } = {}) {
+  const startTime = Date.now();
+  let hasInteraction = false;
+  function checkForInteraction() {
+    hasInteraction = true;
+  }
+  const events = ["keydown", "mousemove", "touchstart", "click"];
+  events.forEach((event) => {
+    form.addEventListener(event, checkForInteraction, { once: true });
+  });
+  form.containsSpam = function() {
+    const fillTime = Date.now() - startTime;
+    const isTooFast = fillTime < honeypotDuration;
+    const honeypotInput = form.querySelector(`[name="${honeypotField}"]`);
+    const hasHoneypotValue = honeypotInput?.value?.trim();
+    const noInteraction = !hasInteraction;
+    events.forEach(
+      (event) => form.removeEventListener(event, checkForInteraction)
+    );
+    return isTooFast || !!hasHoneypotValue || noInteraction;
+  };
+}
+export {
+  preventSpam
+};

package/dist/esm/dom/trap-focus.js

@@ -0,0 +1,51 @@
+import { getFocusableElements } from "./focusable.js";
+import { isShiftTab, isTab } from "./keyboard.js";
+function trapFocus({ event, focusables }) {
+  if (event.key !== "Tab") return;
+  if (isTab(event) && document.activeElement === focusables.last) {
+    event.preventDefault();
+    focusables.first.focus();
+  }
+  if (isShiftTab(event) && document.activeElement === focusables.first) {
+    event.preventDefault();
+    focusables.last.focus();
+  }
+}
+function manageFocus({
+  event,
+  triggerNode,
+  contentNode,
+  focusables,
+  tabOutFocus = "next",
+  // 'trigger'
+  onLeave = function() {
+  }
+}) {
+  const activeEl = document.activeElement;
+  if (activeEl === contentNode && isShiftTab(event)) return backFocus();
+  if (activeEl === contentNode && focusables.length === 0 && isTab(event))
+    return nextFocus();
+  if (activeEl === focusables.last && isTab(event)) return nextFocus();
+  if (activeEl === focusables.first && isShiftTab(event)) return backFocus();
+  function backFocus() {
+    event.preventDefault();
+    triggerNode.focus();
+    onLeave("back");
+  }
+  function nextFocus() {
+    if (tabOutFocus === "trigger") triggerNode.focus();
+    if (tabOutFocus === "next") {
+      event.preventDefault();
+      const DOMFocusables = getFocusableElements().keyboard;
+      const index = DOMFocusables.findIndex((e) => e === triggerNode);
+      const next = DOMFocusables[index + 1];
+      if (next) next.focus();
+      else triggerNode.focus();
+    }
+    onLeave("forward");
+  }
+}
+export {
+  manageFocus,
+  trapFocus
+};

package/dist/esm/dom/ui/aria-current.js

@@ -0,0 +1,17 @@
+function markActiveAnchorIn(container, anchorType = "page") {
+  if (!container) return;
+  const { pathname } = window.location;
+  const element = container.querySelector(`[href="${pathname}"]`);
+  if (!element) return;
+  element.setAttribute("aria-current", "page");
+  return element;
+}
+function scrollToElement(element, { scrollBehaviour = "instant", scrollMargin = "3rem" } = {}) {
+  if (!element) return;
+  element.style.scrollMarginTop = scrollMargin;
+  element.scrollIntoView({ behavior: scrollBehaviour });
+}
+export {
+  markActiveAnchorIn,
+  scrollToElement
+};

package/dist/esm/dom/ui/inconsistent-button-fix.js

@@ -0,0 +1,10 @@
+function inconsistentButtonFix() {
+  document.addEventListener("click", (event) => {
+    if (event.target instanceof HTMLButtonElement) {
+      event.target.focus();
+    }
+  });
+}
+export {
+  inconsistentButtonFix
+};

package/dist/esm/dom/ui/index.js

@@ -0,0 +1,4 @@
+export * from "./aria-current.js";
+export * from "./inconsistent-button-fix.js";
+export * from "./scroll-container.js";
+export * from "./traverse-and-scramble.js";