@splendidlabz/utils 1.11.3 → 1.11.5

package/dist/cjs/node/sanitize.cjs

@@ -0,0 +1,65 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/node/sanitize.js
+var sanitize_exports = {};
+__export(sanitize_exports, {
+  sanitize: () => sanitize2
+});
+module.exports = __toCommonJS(sanitize_exports);
+var import_sanitize_html = __toESM(require("sanitize-html"), 1);
+
+// src/lib/form/sanitize.js
+function sanitize(value, options = {}) {
+  const { sanitizer, ...rest } = options;
+  if (!sanitizer) throw new Error("sanitizer function is required");
+  if (typeof value === "string") return sanitizer(value, rest);
+  if (Array.isArray(value)) return sanitizeArray(value, { sanitizer, ...rest });
+  if (value && typeof value === "object") {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, val]) => [
+        key,
+        sanitize(val, { sanitizer, ...rest })
+      ])
+    );
+  }
+  return value;
+}
+function sanitizeArray(arr, { sanitizer, ...rest }) {
+  if (!sanitizer) throw new Error("sanitizer function is required");
+  return arr.map((item) => sanitize(item, { sanitizer, ...rest }));
+}
+
+// src/node/sanitize.js
+function sanitize2(value, options = {}) {
+  return sanitize(value, { sanitizer: import_sanitize_html.default, ...options });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  sanitize
+});

package/dist/cjs/node/uuid.cjs

@@ -0,0 +1,42 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/node/uuid.js
+var uuid_exports = {};
+__export(uuid_exports, {
+  uuid: () => uuid
+});
+module.exports = __toCommonJS(uuid_exports);
+var import_crypto = __toESM(require("crypto"), 1);
+function uuid() {
+  return import_crypto.default.randomUUID();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  uuid
+});

package/dist/esm/dom/accessibility.js

@@ -0,0 +1,26 @@
+function hasAccessibleName(label, labelledBy) {
+  if (label || labelledBy) return true;
+  return false;
+}
+function checkForAccessibleName({
+  name,
+  ariaLabel,
+  ariaLabelledBy,
+  severity = "warn"
+} = {}) {
+  if (ariaLabel || ariaLabelledBy) return true;
+  const message = `${name} is missing an accessible name. Please provide an accessible name with 'aria-label' or 'aria-labelledby'.`;
+  if (severity === "warn") console.warn(message);
+  if (severity === "error") console.error(message);
+  return false;
+}
+function isInvalidAriaPopup(value) {
+  const allowedPopoupValues = ["dialog", "menu", "listbox", "grid", "tree"];
+  if (!allowedPopoupValues.includes(value)) return true;
+  return false;
+}
+export {
+  checkForAccessibleName,
+  hasAccessibleName,
+  isInvalidAriaPopup
+};

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

@@ -0,0 +1,3 @@
+export * from "./masonry.js";
+export * from "./prefer-horizontal-scroll.js";
+export * from "./sticky.js";

package/dist/esm/dom/actions/masonry.js

@@ -0,0 +1,38 @@
+import { getChildrenElements } from "../get-element.js";
+import { mediaLoaded } from "../media.js";
+import { resizeObserver } from "../observers/resize-observer.js";
+async function masonry(node) {
+  if (nativeMasonrySupport(node)) return;
+  const colGap = parseFloat(getComputedStyle(node).columnGap);
+  const items = getChildrenElements(node);
+  node.style.setProperty("row-gap", "1px", "important");
+  node.style.gridAutoRows = "0px";
+  node.updateMasonryLayout = (_) => layout({ colGap, items });
+  try {
+    await mediaLoaded(node);
+  } catch (e) {
+  }
+  layout({ colGap, items });
+  const obs = resizeObserver(node, {
+    async callback(opts) {
+      layout({ colGap, items });
+    }
+  });
+  async function layout({ colGap: colGap2, items: items2 }) {
+    items2.forEach((item) => {
+      const ib = item.getBoundingClientRect();
+      item.style.gridRowEnd = `span ${Math.round(ib.height + colGap2)}`;
+    });
+  }
+  return {
+    destroy() {
+      obs.disconnect();
+    }
+  };
+}
+function nativeMasonrySupport(node) {
+  return getComputedStyle(node).gridTemplateRows === "masonry";
+}
+export {
+  masonry
+};

package/dist/esm/dom/actions/prefer-horizontal-scroll.js

@@ -0,0 +1,90 @@
+import { omitEmpty } from "../../lib/objects/omit-empty.js";
+import { getCSSVar, setCSSVar } from "../css-vars.js";
+import { addListeners, removeListeners } from "../events.js";
+const DEFAULT_OPTIONS = {
+  scrollSnapDelay: 1e3
+};
+function preferHorizontalScroll(node, props = {}) {
+  if (!node.classList.contains("scrollable-prefer-horizontal")) return;
+  const state = {
+    origSnapType: null,
+    currentSnapType: null,
+    snapTimeoutID: null
+  };
+  const options = {
+    ...DEFAULT_OPTIONS,
+    ...omitEmpty({
+      scrollSnapDelay: getCSSVar(node, "--scroll-snap-delay")
+    }),
+    ...omitEmpty(props)
+  };
+  const listeners = [
+    {
+      event: "wheel",
+      node,
+      handler: handleWheel
+    },
+    {
+      event: "pointerenter",
+      node,
+      handler: handlePointerEnter
+    },
+    {
+      event: "pointerleave",
+      node,
+      handler: handlePointerLeave
+    }
+  ];
+  addListeners(listeners);
+  function handleWheel(event) {
+    const direction = event.deltaY > 0 ? "down" : "up";
+    const updatedDelta = event.deltaY;
+    if (isTrackpad(event)) return false;
+    setCSSVar(node, "--snap-type", "none");
+    const scrolledAmount = node.scrollLeft;
+    const scrollWidth = node.scrollWidth;
+    const clientWidth = node.clientWidth;
+    const scrollableAmount = scrollWidth - clientWidth;
+    if (direction === "down" && scrolledAmount < scrollableAmount) {
+      node.scrollLeft += updatedDelta;
+      event.preventDefault();
+    }
+    if (direction === "up" && scrolledAmount > 0) {
+      node.scrollLeft += updatedDelta;
+      event.preventDefault();
+    }
+    const { snapTimeoutID } = state;
+    if (snapTimeoutID) clearTimeout(snapTimeoutID);
+    state.snapTimeoutID = setTimeout((_) => {
+      restoreHijackedState(node, state);
+    }, options.scrollSnapDelay);
+  }
+  function handlePointerEnter(event) {
+    state.origSnapType = getCSSVar(node, "--snap-type") || "proximity";
+  }
+  function handlePointerLeave(event) {
+    restoreHijackedState(node, state);
+  }
+  return {
+    destroy() {
+      removeListeners(listeners);
+    }
+  };
+}
+function restoreHijackedState(node, state) {
+  const scrollLeft = node.scrollLeft;
+  setCSSVar(node, "--snap-type", state.origSnapType);
+  const finalScrollLeft = node.scrollLeft;
+  setCSSVar(node, "--snap-type", "none");
+  node.scrollTo({ left: scrollLeft, behavior: "instant" });
+  node.scrollTo({ left: finalScrollLeft, behavior: "smooth" });
+  setTimeout((_) => {
+    setCSSVar(node, "--snap-type", state.origSnapType);
+  }, 250);
+}
+function isTrackpad(event) {
+  if (event.wheelDeltaY === event.deltaY * -3) return true;
+}
+export {
+  preferHorizontalScroll
+};

package/dist/esm/dom/actions/sticky.js

@@ -0,0 +1,70 @@
+import { boundingBoxRelativeToAncestor } from "../bounding-box.js";
+import { resizeObserver } from "../observers/resize-observer.js";
+import { findScrollContainer } from "../ui/scroll-container.js";
+function sticky(node, props = {}) {
+  const scrollContainer = findScrollContainer(node);
+  let stickyTBLR = getComputedTBLR(node);
+  const obs = resizeObserver(node, {
+    callback: ({ entry }) => {
+      stickyTBLR = getComputedTBLR(node);
+      isSticking();
+      scrollContainer === document.documentElement ? window.addEventListener("scroll", scrollEventListener) : scrollContainer.addEventListener("scroll", scrollEventListener);
+    }
+  });
+  function scrollEventListener(event) {
+    isSticking();
+  }
+  function isSticking() {
+    const { top, bottom, left, right } = stickyTBLR;
+    const relativeRect = boundingBoxRelativeToAncestor({
+      element: node,
+      ancestorElement: scrollContainer
+    });
+    if (!isNaN(top)) {
+      if (relativeRect.top - top <= 1) {
+        node.classList.add("sticking");
+      } else {
+        node.classList.remove("sticking");
+      }
+    }
+    if (!isNaN(bottom)) {
+      if (relativeRect.bottom + bottom >= -1) {
+        node.classList.add("sticking");
+      } else {
+        node.classList.remove("sticking");
+      }
+    }
+    if (!isNaN(left)) {
+      if (relativeRect.left - left <= 1) {
+        node.classList.add("sticking");
+      } else {
+        node.classList.remove("sticking");
+      }
+    }
+    if (!isNaN(right)) {
+      if (relativeRect.right + right >= -1) {
+        node.classList.add("sticking");
+      } else {
+        node.classList.remove("sticking");
+      }
+    }
+  }
+  return {
+    destroy() {
+      obs.disconnect();
+      scrollContainer.removeEventListener("scroll", scrollEventListener);
+    }
+  };
+}
+function getComputedTBLR(element) {
+  const style = getComputedStyle(element);
+  return {
+    top: parseFloat(style.top),
+    bottom: parseFloat(style.bottom),
+    left: parseFloat(style.left),
+    right: parseFloat(style.right)
+  };
+}
+export {
+  sticky
+};

package/dist/esm/dom/bounding-box.js

@@ -0,0 +1,44 @@
+function boundingBox(element, { containsPadding = true } = {}) {
+  const box = element.getBoundingClientRect();
+  const ret = {};
+  for (const prop in box) ret[prop] = box[prop];
+  if (!containsPadding) {
+    const style = getComputedStyle(element);
+    const paddingTop = parseFloat(style.paddingTop);
+    const paddingRight = parseFloat(style.paddingRight);
+    const paddingBottom = parseFloat(style.paddingBottom);
+    const paddingLeft = parseFloat(style.paddingLeft);
+    ret.x = ret.x + paddingLeft;
+    ret.y = ret.y + paddingTop;
+    ret.width = ret.width - paddingLeft - paddingRight;
+    ret.height = ret.height - paddingTop - paddingBottom;
+    ret.top = ret.top + paddingTop;
+    ret.bottom = ret.bottom - paddingBottom;
+    ret.right = ret.right - paddingRight;
+    ret.left = ret.left + paddingLeft;
+  }
+  ret.xCenter = (ret.left + ret.right) / 2;
+  ret.yCenter = (ret.top + ret.bottom) / 2;
+  return ret;
+}
+function boundingBoxRelativeToAncestor({ element, ancestorElement }) {
+  ancestorElement = ancestorElement || element.parentElement;
+  const box = boundingBox(element);
+  const ancestorBox = boundingBox(ancestorElement, {
+    containsPadding: false
+  });
+  return {
+    top: box.top - ancestorBox.top,
+    right: box.right - ancestorBox.right,
+    bottom: box.bottom - ancestorBox.bottom,
+    left: box.left - ancestorBox.left,
+    width: box.width,
+    height: box.height,
+    xCenter: (box.left + box.right) / 2 - ancestorBox.left,
+    yCenter: (box.top + box.bottom) / 2 - ancestorBox.top
+  };
+}
+export {
+  boundingBox,
+  boundingBoxRelativeToAncestor
+};

package/dist/esm/dom/clipboard.js

@@ -0,0 +1,12 @@
+function copyRichText(element) {
+  const range = document.createRange();
+  range.selectNode(element);
+  const selection = window.getSelection();
+  selection.removeAllRanges();
+  selection.addRange(range);
+  document.execCommand("copy");
+  selection.removeAllRanges();
+}
+export {
+  copyRichText
+};

package/dist/esm/dom/cookie.js

@@ -0,0 +1,31 @@
+const cookies = {
+  get(name) {
+    return getCookie(name);
+  },
+  set(name, value, days) {
+    setCookie(name, value, days);
+  }
+};
+function getCookie(name) {
+  const match = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
+  if (!match) return null;
+  const decoded = decodeURIComponent(match[2]);
+  try {
+    return JSON.parse(decoded);
+  } catch (e) {
+    return decoded;
+  }
+}
+function setCookie(name, value, days) {
+  let expires = "";
+  if (days) {
+    const date = /* @__PURE__ */ new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1e3);
+    expires = "; expires=" + date.toUTCString();
+  }
+  document.cookie = name + "=" + (value || "") + expires + "; path=/";
+}
+export {
+  cookies,
+  getCookie
+};

package/dist/esm/dom/css-vars.js

@@ -0,0 +1,21 @@
+import { getElement } from "./get-element.js";
+function getCSSValue(element, prop) {
+  return getCSSVar(element, prop);
+}
+function setCSSValue(element, prop, value) {
+  setCSSVar(element, prop, value);
+}
+function getCSSVar(element, prop) {
+  element = getElement(element);
+  return getComputedStyle(element).getPropertyValue(prop);
+}
+function setCSSVar(element, prop, value) {
+  element = getElement(element);
+  element.style.setProperty(prop, value);
+}
+export {
+  getCSSValue,
+  getCSSVar,
+  setCSSValue,
+  setCSSVar
+};

package/dist/esm/dom/events.js

@@ -0,0 +1,31 @@
+function addListeners(listeners) {
+  listeners.forEach(({ node, event, handler }) => {
+    node.addEventListener(event, handler);
+  });
+}
+function removeListeners(listeners) {
+  listeners.forEach(({ node, event, handler }) => {
+    node.removeEventListener(event, handler);
+  });
+}
+function dispatchEvent(node, eventName, detail, options = {}) {
+  node.dispatchEvent(
+    new CustomEvent(eventName, {
+      ...options,
+      detail
+    })
+  );
+}
+function updateEvent(event, updates) {
+  const { type, ...rest } = event;
+  return new CustomEvent(event.type, {
+    ...rest,
+    ...updates
+  });
+}
+export {
+  addListeners,
+  dispatchEvent,
+  removeListeners,
+  updateEvent
+};

package/dist/esm/dom/focusable.js

@@ -0,0 +1,117 @@
+function getFocusableElements(container = document.body) {
+  return {
+    /**
+     * Gets the number of keyboard focusable elements.
+     * This is useful for checking if there are any focusable elements
+     * before attempting to focus them.
+     * 
+     * @returns {number} The number of keyboard focusable elements
+     */
+    get length() {
+      return this.keyboard.length;
+    },
+    /**
+     * Gets all focusable elements within the container that are visible and enabled.
+     * This includes elements that can be focused via mouse or programmatically,
+     * but may not be keyboard focusable.
+     * 
+     * Elements are considered focusable if they:
+     * - Are not disabled
+     * - Are not hidden
+     * - Are not display:none
+     * 
+     * @returns {HTMLElement[]} Array of focusable elements that are visible and enabled
+     */
+    get all() {
+      const elements = Array.from(
+        container.querySelectorAll(
+          `a, 
+            button, 
+            input, 
+            textarea, 
+            select, 
+            details, 
+            iframe, 
+            embed, 
+            object, 
+            summary, 
+            dialog, 
+            audio[controls], 
+            video[controls], 
+            [contenteditable], 
+            [tabindex]
+          `
+        )
+      );
+      return elements.filter((el) => {
+        if (el.hasAttribute("disabled")) return false;
+        if (el.hasAttribute("hidden")) return false;
+        if (window.getComputedStyle(el).display === "none") return false;
+        return true;
+      });
+    },
+    /**
+     * Gets elements that can be focused via keyboard (tabIndex > -1).
+     * These are the elements that will be focused when using the Tab key.
+     * 
+     * @returns {HTMLElement[]} Array of keyboard focusable elements
+     */
+    get keyboard() {
+      return this.all.filter((el) => el instanceof HTMLElement && el.tabIndex > -1);
+    },
+    /**
+     * Alias for keyboard focusable elements.
+     * This is provided for semantic clarity in certain contexts.
+     * 
+     * @returns {HTMLElement[]} Array of keyboard focusable elements
+     */
+    get keyboardOnly() {
+      return this.keyboard;
+    },
+    /**
+     * Gets the first keyboard focusable element.
+     * This is useful for setting initial focus when opening a modal or dialog.
+     * 
+     * @returns {HTMLElement|null} The first focusable element or null if none exist
+     */
+    get first() {
+      return this.keyboard[0] || null;
+    },
+    /**
+     * Gets the last keyboard focusable element.
+     * This is useful for focus trapping when using Shift+Tab.
+     * 
+     * @returns {HTMLElement|null} The last focusable element or null if none exist
+     */
+    get last() {
+      return this.keyboard[this.length - 1] || null;
+    },
+    /**
+     * Gets the next focusable element after the given index.
+     * This is useful for implementing custom tab order or focus management.
+     * 
+     * @param {number} index - The current element's index in the keyboard focusable array
+     * @returns {HTMLElement|null} The next focusable element or null if none exists
+     */
+    next(index) {
+      return this.keyboard[index + 1] || null;
+    },
+    /**
+     * Gets the previous focusable element before the given index.
+     * This is useful for implementing custom tab order or focus management.
+     * 
+     * @param {number} index - The current element's index in the keyboard focusable array
+     * @returns {HTMLElement|null} The previous focusable element or null if none exists
+     */
+    prev(index) {
+      return this.keyboard[index - 1] || null;
+    }
+  };
+}
+function Focusable(container = document.body) {
+  return getFocusableElements(container);
+}
+export {
+  Focusable,
+  getFocusableElements
+};

package/dist/esm/dom/font-size.js

@@ -0,0 +1,40 @@
+import { splitUnit } from "../lib/numbers/index.js";
+function getUnit(value) {
+  const [, unit] = splitUnit(value);
+  return unit;
+}
+function rem(multiple = 1) {
+  const value = parseFloat(getComputedStyle(document.body)["font-size"]);
+  return Math.round(value * multiple);
+}
+function em(element = document.body, multiple = 1) {
+  const value = parseFloat(getComputedStyle(element)["font-size"]);
+  return Math.round(value * multiple);
+}
+function rlh(multiple = 1) {
+  const lineHeight = parseFloat(getComputedStyle(document.body)["line-height"]);
+  return Math.round(lineHeight * multiple);
+}
+function lh(element = document.body, multiple = 1) {
+  const lineHeight = getComputedStyle(element)["line-height"];
+  const value = parseFloat(lineHeight);
+  return Math.round(value * multiple);
+}
+function toPx(value, element = null) {
+  const [numeric, unit] = splitUnit(value);
+  let finalValue = 0;
+  if (unit === "rem") finalValue = rem(numeric);
+  if (unit === "em") finalValue = em(element, numeric);
+  if (unit === "lh") finalValue = lh(element, numeric);
+  if (unit === "px") finalValue = numeric;
+  if (!unit) finalValue = numeric;
+  return finalValue;
+}
+export {
+  em,
+  getUnit,
+  lh,
+  rem,
+  rlh,
+  toPx
+};