@splendidlabz/utils 1.11.2 → 1.11.4

package/dist/cjs/dom/accessibility.cjs

@@ -15,6 +15,8 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/dom/accessibility.js
 var accessibility_exports = {};
 __export(accessibility_exports, {
   checkForAccessibleName: () => checkForAccessibleName,

package/dist/cjs/dom/actions/index.cjs

@@ -2,6 +2,10 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 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))
@@ -10,16 +14,397 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/dom/actions/index.js
 var actions_exports = {};
+__export(actions_exports, {
+  masonry: () => masonry,
+  preferHorizontalScroll: () => preferHorizontalScroll,
+  sticky: () => sticky
+});
 module.exports = __toCommonJS(actions_exports);
-__reExport(actions_exports, require("./masonry.js"), module.exports);
-__reExport(actions_exports, require("./prefer-horizontal-scroll.js"), module.exports);
-__reExport(actions_exports, require("./sticky.js"), module.exports);
+
+// src/dom/get-element.js
+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);
+}
+
+// src/dom/media.js
+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)]);
+}
+
+// src/dom/events.js
+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
+    })
+  );
+}
+
+// src/dom/observers/observer.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));
+  }
+}
+
+// src/dom/observers/resize-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()
+  };
+}
+
+// src/dom/actions/masonry.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";
+}
+
+// src/lib/objects/omit-empty.js
+function omitEmpty(obj, shallow = false) {
+  if (typeof obj !== "object" || obj === null) return obj;
+  if (obj instanceof Date) return obj;
+  const result = Array.isArray(obj) ? [] : {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (value === null || value === void 0 || value === "" || typeof value === "object" && !(value instanceof Date) && Object.keys(value).length === 0) {
+      continue;
+    }
+    result[key] = shallow ? value : omitEmpty(value);
+  }
+  return result;
+}
+
+// src/dom/css-vars.js
+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);
+}
+
+// src/dom/actions/prefer-horizontal-scroll.js
+var 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;
+}
+
+// src/dom/bounding-box.js
+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
+  };
+}
+
+// src/dom/ui/scroll-container.js
+function findScrollContainer(element, direction = "both") {
+  if (!element) return;
+  let parent = element.parentElement;
+  while (parent) {
+    const { overflow, overflowX, overflowY } = getComputedStyle(parent);
+    if (direction === "both") {
+      if (overflow.includes("auto") || overflow.includes("scroll"))
+        return parent;
+    }
+    if (direction === "horizontal") {
+      if (overflowX === "auto" || overflowX === "scroll") return parent;
+    }
+    if (direction === "vertical") {
+      if (overflowY === "auto" || overflowY === "scroll") return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return document.documentElement;
+}
+
+// src/dom/actions/sticky.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)
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ...require("./masonry.js"),
-  ...require("./prefer-horizontal-scroll.js"),
-  ...require("./sticky.js")
+  masonry,
+  preferHorizontalScroll,
+  sticky
 });

package/dist/cjs/dom/actions/masonry.cjs

@@ -15,27 +15,118 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/dom/actions/masonry.js
 var masonry_exports = {};
 __export(masonry_exports, {
   masonry: () => masonry
 });
 module.exports = __toCommonJS(masonry_exports);
-var import_get_element = require("../get-element.js");
-var import_media = require("../media.js");
-var import_resize_observer = require("../observers/resize-observer.js");
+
+// src/dom/get-element.js
+function getNodeType(node) {
+  if (node instanceof Element) return "element";
+  if (node instanceof NodeList) return "nodelist";
+  if (Array.isArray(node)) return "array";
+}
+function getChildrenElements(node) {
+  let children = node.children;
+  if (children[0]?.nodeName === "ASTRO-SLOT") children = children[0].children;
+  return Array.from(children);
+}
+
+// src/dom/media.js
+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)]);
+}
+
+// src/dom/events.js
+function dispatchEvent(node, eventName, detail, options = {}) {
+  node.dispatchEvent(
+    new CustomEvent(eventName, {
+      ...options,
+      detail
+    })
+  );
+}
+
+// src/dom/observers/observer.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));
+  }
+}
+
+// src/dom/observers/resize-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()
+  };
+}
+
+// src/dom/actions/masonry.js
 async function masonry(node) {
   if (nativeMasonrySupport(node)) return;
   const colGap = parseFloat(getComputedStyle(node).columnGap);
-  const items = (0, import_get_element.getChildrenElements)(node);
+  const items = getChildrenElements(node);
   node.style.setProperty("row-gap", "1px", "important");
   node.style.gridAutoRows = "0px";
   node.updateMasonryLayout = (_) => layout({ colGap, items });
   try {
-    await (0, import_media.mediaLoaded)(node);
+    await mediaLoaded(node);
   } catch (e) {
   }
   layout({ colGap, items });
-  const obs = (0, import_resize_observer.resizeObserver)(node, {
+  const obs = resizeObserver(node, {
     async callback(opts) {
       layout({ colGap, items });
     }

package/dist/cjs/dom/actions/prefer-horizontal-scroll.cjs

@@ -15,15 +15,59 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/dom/actions/prefer-horizontal-scroll.js
 var prefer_horizontal_scroll_exports = {};
 __export(prefer_horizontal_scroll_exports, {
   preferHorizontalScroll: () => preferHorizontalScroll
 });
 module.exports = __toCommonJS(prefer_horizontal_scroll_exports);
-var import_omit_empty = require("../../lib/objects/omit-empty.js");
-var import_css_vars = require("../css-vars.js");
-var import_events = require("../events.js");
-const DEFAULT_OPTIONS = {
+
+// src/lib/objects/omit-empty.js
+function omitEmpty(obj, shallow = false) {
+  if (typeof obj !== "object" || obj === null) return obj;
+  if (obj instanceof Date) return obj;
+  const result = Array.isArray(obj) ? [] : {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (value === null || value === void 0 || value === "" || typeof value === "object" && !(value instanceof Date) && Object.keys(value).length === 0) {
+      continue;
+    }
+    result[key] = shallow ? value : omitEmpty(value);
+  }
+  return result;
+}
+
+// src/dom/get-element.js
+function getElement(selector) {
+  if (!selector) return;
+  if (selector instanceof Element) return selector;
+  return document.querySelector(selector);
+}
+
+// src/dom/css-vars.js
+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);
+}
+
+// src/dom/events.js
+function addListeners(listeners) {
+  listeners.forEach(({ node, event, handler }) => {
+    node.addEventListener(event, handler);
+  });
+}
+function removeListeners(listeners) {
+  listeners.forEach(({ node, event, handler }) => {
+    node.removeEventListener(event, handler);
+  });
+}
+
+// src/dom/actions/prefer-horizontal-scroll.js
+var DEFAULT_OPTIONS = {
   scrollSnapDelay: 1e3
 };
 function preferHorizontalScroll(node, props = {}) {
@@ -35,10 +79,10 @@ function preferHorizontalScroll(node, props = {}) {
   };
   const options = {
     ...DEFAULT_OPTIONS,
-    ...(0, import_omit_empty.omitEmpty)({
-      scrollSnapDelay: (0, import_css_vars.getCSSVar)(node, "--scroll-snap-delay")
+    ...omitEmpty({
+      scrollSnapDelay: getCSSVar(node, "--scroll-snap-delay")
     }),
-    ...(0, import_omit_empty.omitEmpty)(props)
+    ...omitEmpty(props)
   };
   const listeners = [
     {
@@ -57,12 +101,12 @@ function preferHorizontalScroll(node, props = {}) {
       handler: handlePointerLeave
     }
   ];
-  (0, import_events.addListeners)(listeners);
+  addListeners(listeners);
   function handleWheel(event) {
     const direction = event.deltaY > 0 ? "down" : "up";
     const updatedDelta = event.deltaY;
     if (isTrackpad(event)) return false;
-    (0, import_css_vars.setCSSVar)(node, "--snap-type", "none");
+    setCSSVar(node, "--snap-type", "none");
     const scrolledAmount = node.scrollLeft;
     const scrollWidth = node.scrollWidth;
     const clientWidth = node.clientWidth;
@@ -82,26 +126,26 @@ function preferHorizontalScroll(node, props = {}) {
     }, options.scrollSnapDelay);
   }
   function handlePointerEnter(event) {
-    state.origSnapType = (0, import_css_vars.getCSSVar)(node, "--snap-type") || "proximity";
+    state.origSnapType = getCSSVar(node, "--snap-type") || "proximity";
   }
   function handlePointerLeave(event) {
     restoreHijackedState(node, state);
   }
   return {
     destroy() {
-      (0, import_events.removeListeners)(listeners);
+      removeListeners(listeners);
     }
   };
 }
 function restoreHijackedState(node, state) {
   const scrollLeft = node.scrollLeft;
-  (0, import_css_vars.setCSSVar)(node, "--snap-type", state.origSnapType);
+  setCSSVar(node, "--snap-type", state.origSnapType);
   const finalScrollLeft = node.scrollLeft;
-  (0, import_css_vars.setCSSVar)(node, "--snap-type", "none");
+  setCSSVar(node, "--snap-type", "none");
   node.scrollTo({ left: scrollLeft, behavior: "instant" });
   node.scrollTo({ left: finalScrollLeft, behavior: "smooth" });
   setTimeout((_) => {
-    (0, import_css_vars.setCSSVar)(node, "--snap-type", state.origSnapType);
+    setCSSVar(node, "--snap-type", state.origSnapType);
   }, 250);
 }
 function isTrackpad(event) {