@studiometa/js-toolkit 2.7.0 → 2.8.0

package/decorators/withScrolledInView/utils.cjs

@@ -0,0 +1,99 @@
+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))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/decorators/withScrolledInView/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  getEdgeWithOffset: () => getEdgeWithOffset,
+  getEdges: () => getEdges,
+  normalizeOffset: () => normalizeOffset,
+  parseNamedOffset: () => parseNamedOffset
+});
+module.exports = __toCommonJS(utils_exports);
+var import_utils = require("../../utils/index.cjs");
+var units = {
+  px: "px",
+  vh: "vh",
+  vw: "vw",
+  vmin: "vmin",
+  vmax: "vmax",
+  percent: "%"
+};
+var namedOffsets = {
+  start: 0,
+  center: 0.5,
+  end: 1
+};
+function normalizeOffset(offsets) {
+  return offsets.split("/").map((offset) => offset.trim().split(" ").slice(0, 2));
+}
+function parseNamedOffset(offset) {
+  if ((0, import_utils.isNumber)(offset)) {
+    return offset;
+  }
+  if ((0, import_utils.isNumber)(namedOffsets[offset])) {
+    return namedOffsets[offset];
+  }
+  if ((0, import_utils.isNumber)(Number(offset))) {
+    return Number(offset);
+  }
+  if ((0, import_utils.isString)(offset) && offset.endsWith(units.percent)) {
+    return Number.parseFloat(offset) / 100;
+  }
+  return offset;
+}
+function getEdgeWithOffset(start, size, offset) {
+  if ((0, import_utils.isNumber)(offset)) {
+    return start + size * offset;
+  }
+  const parsedNamedOffset = parseNamedOffset(offset);
+  if ((0, import_utils.isNumber)(parsedNamedOffset)) {
+    return start + size * parsedNamedOffset;
+  }
+  if ((0, import_utils.isString)(parsedNamedOffset)) {
+    const parsedOffset = Number.parseFloat(parsedNamedOffset);
+    if (parsedNamedOffset.endsWith(units.px)) {
+      return start + parsedOffset;
+    }
+    if (parsedNamedOffset.endsWith(units.vh)) {
+      return start + parsedOffset * window.innerHeight / 100;
+    }
+    if (parsedNamedOffset.endsWith(units.vw)) {
+      return start + parsedOffset * window.innerWidth / 100;
+    }
+    if (parsedNamedOffset.endsWith(units.vmin)) {
+      return start + parsedOffset * Math.min(window.innerWidth, window.innerHeight) / 100;
+    }
+    if (parsedNamedOffset.endsWith(units.vmax)) {
+      return start + parsedOffset * Math.max(window.innerWidth, window.innerHeight) / 100;
+    }
+  }
+  return start;
+}
+function getEdges(axis, targetSizes, containerSizes, offset) {
+  const sizeKey = axis === "x" ? "width" : "height";
+  const targetStart = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[0][0]);
+  const containerStart = getEdgeWithOffset(0, containerSizes[sizeKey], offset[0][1]);
+  const targetEnd = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[1][0]);
+  const containerEnd = getEdgeWithOffset(0, containerSizes[sizeKey], offset[1][1]);
+  const start = targetStart - containerStart;
+  const end = targetEnd - containerEnd;
+  return [start, end];
+}
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=utils.cjs.map

package/decorators/withScrolledInView/utils.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/decorators/withScrolledInView/utils.ts"],
+  "sourcesContent": ["import { isNumber, isString } from '../../utils/index.js';\nimport type { NormalizedOffset } from './types.js';\n\nconst units = {\n  px: 'px',\n  vh: 'vh',\n  vw: 'vw',\n  vmin: 'vmin',\n  vmax: 'vmax',\n  percent: '%',\n};\n\nconst namedOffsets = {\n  start: 0,\n  center: 0.5,\n  end: 1,\n};\n\n/**\n * Normalize offset input.\n */\nexport function normalizeOffset(offsets: string): NormalizedOffset {\n  return offsets\n    .split('/')\n    .map((offset) => offset.trim().split(' ').slice(0, 2)) as NormalizedOffset;\n}\n\n/**\n * Parse the given offset.\n */\nexport function parseNamedOffset(offset: string | number): string | number {\n  if (isNumber(offset)) {\n    return offset;\n  }\n\n  if (isNumber(namedOffsets[offset])) {\n    return namedOffsets[offset];\n  }\n\n  if (isNumber(Number(offset))) {\n    return Number(offset);\n  }\n\n  if (isString(offset) && offset.endsWith(units.percent)) {\n    return Number.parseFloat(offset) / 100;\n  }\n\n  return offset;\n}\n\n/**\n * Get an edge value given a start, size and offset value.\n */\nexport function getEdgeWithOffset(start: number, size: number, offset: string | number): number {\n  if (isNumber(offset)) {\n    return start + size * offset;\n  }\n\n  const parsedNamedOffset = parseNamedOffset(offset);\n  if (isNumber(parsedNamedOffset)) {\n    return start + size * parsedNamedOffset;\n  }\n\n  if (isString(parsedNamedOffset)) {\n    const parsedOffset = Number.parseFloat(parsedNamedOffset);\n\n    if (parsedNamedOffset.endsWith(units.px)) {\n      return start + parsedOffset;\n    }\n\n    if (parsedNamedOffset.endsWith(units.vh)) {\n      return start + (parsedOffset * window.innerHeight) / 100;\n    }\n\n    if (parsedNamedOffset.endsWith(units.vw)) {\n      return start + (parsedOffset * window.innerWidth) / 100;\n    }\n\n    if (parsedNamedOffset.endsWith(units.vmin)) {\n      return start + (parsedOffset * Math.min(window.innerWidth, window.innerHeight)) / 100;\n    }\n\n    if (parsedNamedOffset.endsWith(units.vmax)) {\n      return start + (parsedOffset * Math.max(window.innerWidth, window.innerHeight)) / 100;\n    }\n  }\n\n  return start;\n}\n\n/**\n * Get starting and ending edges for a given axis, a target sizings, a container sizings and their offset.\n */\nexport function getEdges(axis: 'x' | 'y', targetSizes, containerSizes, offset): [number, number] {\n  const sizeKey = axis === 'x' ? 'width' : 'height';\n  const targetStart = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[0][0]);\n  const containerStart = getEdgeWithOffset(0, containerSizes[sizeKey], offset[0][1]);\n  const targetEnd = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[1][0]);\n  const containerEnd = getEdgeWithOffset(0, containerSizes[sizeKey], offset[1][1]);\n  const start = targetStart - containerStart;\n  const end = targetEnd - containerEnd;\n\n  return [start, end];\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AAGnC,IAAM,QAAQ;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;AAEA,IAAM,eAAe;AAAA,EACnB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAKO,SAAS,gBAAgB,SAAmC;AACjE,SAAO,QACJ,MAAM,GAAG,EACT,IAAI,CAAC,WAAW,OAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;AACzD;AAKO,SAAS,iBAAiB,QAA0C;AACzE,UAAI,uBAAS,MAAM,GAAG;AACpB,WAAO;AAAA,EACT;AAEA,UAAI,uBAAS,aAAa,OAAO,GAAG;AAClC,WAAO,aAAa;AAAA,EACtB;AAEA,UAAI,uBAAS,OAAO,MAAM,CAAC,GAAG;AAC5B,WAAO,OAAO,MAAM;AAAA,EACtB;AAEA,UAAI,uBAAS,MAAM,KAAK,OAAO,SAAS,MAAM,OAAO,GAAG;AACtD,WAAO,OAAO,WAAW,MAAM,IAAI;AAAA,EACrC;AAEA,SAAO;AACT;AAKO,SAAS,kBAAkB,OAAe,MAAc,QAAiC;AAC9F,UAAI,uBAAS,MAAM,GAAG;AACpB,WAAO,QAAQ,OAAO;AAAA,EACxB;AAEA,QAAM,oBAAoB,iBAAiB,MAAM;AACjD,UAAI,uBAAS,iBAAiB,GAAG;AAC/B,WAAO,QAAQ,OAAO;AAAA,EACxB;AAEA,UAAI,uBAAS,iBAAiB,GAAG;AAC/B,UAAM,eAAe,OAAO,WAAW,iBAAiB;AAExD,QAAI,kBAAkB,SAAS,MAAM,EAAE,GAAG;AACxC,aAAO,QAAQ;AAAA,IACjB;AAEA,QAAI,kBAAkB,SAAS,MAAM,EAAE,GAAG;AACxC,aAAO,QAAS,eAAe,OAAO,cAAe;AAAA,IACvD;AAEA,QAAI,kBAAkB,SAAS,MAAM,EAAE,GAAG;AACxC,aAAO,QAAS,eAAe,OAAO,aAAc;AAAA,IACtD;AAEA,QAAI,kBAAkB,SAAS,MAAM,IAAI,GAAG;AAC1C,aAAO,QAAS,eAAe,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAAA,IACpF;AAEA,QAAI,kBAAkB,SAAS,MAAM,IAAI,GAAG;AAC1C,aAAO,QAAS,eAAe,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAAA,IACpF;AAAA,EACF;AAEA,SAAO;AACT;AAKO,SAAS,SAAS,MAAiB,aAAa,gBAAgB,QAA0B;AAC/F,QAAM,UAAU,SAAS,MAAM,UAAU;AACzC,QAAM,cAAc,kBAAkB,YAAY,OAAO,YAAY,UAAU,OAAO,GAAG,EAAE;AAC3F,QAAM,iBAAiB,kBAAkB,GAAG,eAAe,UAAU,OAAO,GAAG,EAAE;AACjF,QAAM,YAAY,kBAAkB,YAAY,OAAO,YAAY,UAAU,OAAO,GAAG,EAAE;AACzF,QAAM,eAAe,kBAAkB,GAAG,eAAe,UAAU,OAAO,GAAG,EAAE;AAC/E,QAAM,QAAQ,cAAc;AAC5B,QAAM,MAAM,YAAY;AAExB,SAAO,CAAC,OAAO,GAAG;AACpB;",
+  "names": []
+}

package/decorators/withScrolledInView/utils.d.ts

@@ -0,0 +1,17 @@
+import type { NormalizedOffset } from './types.js';
+/**
+ * Normalize offset input.
+ */
+export declare function normalizeOffset(offsets: string): NormalizedOffset;
+/**
+ * Parse the given offset.
+ */
+export declare function parseNamedOffset(offset: string | number): string | number;
+/**
+ * Get an edge value given a start, size and offset value.
+ */
+export declare function getEdgeWithOffset(start: number, size: number, offset: string | number): number;
+/**
+ * Get starting and ending edges for a given axis, a target sizings, a container sizings and their offset.
+ */
+export declare function getEdges(axis: 'x' | 'y', targetSizes: any, containerSizes: any, offset: any): [number, number];

package/decorators/withScrolledInView/utils.js

@@ -0,0 +1,77 @@
+import { isNumber, isString } from "../../utils/index.js";
+const units = {
+  px: "px",
+  vh: "vh",
+  vw: "vw",
+  vmin: "vmin",
+  vmax: "vmax",
+  percent: "%"
+};
+const namedOffsets = {
+  start: 0,
+  center: 0.5,
+  end: 1
+};
+function normalizeOffset(offsets) {
+  return offsets.split("/").map((offset) => offset.trim().split(" ").slice(0, 2));
+}
+function parseNamedOffset(offset) {
+  if (isNumber(offset)) {
+    return offset;
+  }
+  if (isNumber(namedOffsets[offset])) {
+    return namedOffsets[offset];
+  }
+  if (isNumber(Number(offset))) {
+    return Number(offset);
+  }
+  if (isString(offset) && offset.endsWith(units.percent)) {
+    return Number.parseFloat(offset) / 100;
+  }
+  return offset;
+}
+function getEdgeWithOffset(start, size, offset) {
+  if (isNumber(offset)) {
+    return start + size * offset;
+  }
+  const parsedNamedOffset = parseNamedOffset(offset);
+  if (isNumber(parsedNamedOffset)) {
+    return start + size * parsedNamedOffset;
+  }
+  if (isString(parsedNamedOffset)) {
+    const parsedOffset = Number.parseFloat(parsedNamedOffset);
+    if (parsedNamedOffset.endsWith(units.px)) {
+      return start + parsedOffset;
+    }
+    if (parsedNamedOffset.endsWith(units.vh)) {
+      return start + parsedOffset * window.innerHeight / 100;
+    }
+    if (parsedNamedOffset.endsWith(units.vw)) {
+      return start + parsedOffset * window.innerWidth / 100;
+    }
+    if (parsedNamedOffset.endsWith(units.vmin)) {
+      return start + parsedOffset * Math.min(window.innerWidth, window.innerHeight) / 100;
+    }
+    if (parsedNamedOffset.endsWith(units.vmax)) {
+      return start + parsedOffset * Math.max(window.innerWidth, window.innerHeight) / 100;
+    }
+  }
+  return start;
+}
+function getEdges(axis, targetSizes, containerSizes, offset) {
+  const sizeKey = axis === "x" ? "width" : "height";
+  const targetStart = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[0][0]);
+  const containerStart = getEdgeWithOffset(0, containerSizes[sizeKey], offset[0][1]);
+  const targetEnd = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[1][0]);
+  const containerEnd = getEdgeWithOffset(0, containerSizes[sizeKey], offset[1][1]);
+  const start = targetStart - containerStart;
+  const end = targetEnd - containerEnd;
+  return [start, end];
+}
+export {
+  getEdgeWithOffset,
+  getEdges,
+  normalizeOffset,
+  parseNamedOffset
+};
+//# sourceMappingURL=utils.js.map

package/decorators/withScrolledInView/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/decorators/withScrolledInView/utils.ts"],
+  "sourcesContent": ["import { isNumber, isString } from '../../utils/index.js';\nimport type { NormalizedOffset } from './types.js';\n\nconst units = {\n  px: 'px',\n  vh: 'vh',\n  vw: 'vw',\n  vmin: 'vmin',\n  vmax: 'vmax',\n  percent: '%',\n};\n\nconst namedOffsets = {\n  start: 0,\n  center: 0.5,\n  end: 1,\n};\n\n/**\n * Normalize offset input.\n */\nexport function normalizeOffset(offsets: string): NormalizedOffset {\n  return offsets\n    .split('/')\n    .map((offset) => offset.trim().split(' ').slice(0, 2)) as NormalizedOffset;\n}\n\n/**\n * Parse the given offset.\n */\nexport function parseNamedOffset(offset: string | number): string | number {\n  if (isNumber(offset)) {\n    return offset;\n  }\n\n  if (isNumber(namedOffsets[offset])) {\n    return namedOffsets[offset];\n  }\n\n  if (isNumber(Number(offset))) {\n    return Number(offset);\n  }\n\n  if (isString(offset) && offset.endsWith(units.percent)) {\n    return Number.parseFloat(offset) / 100;\n  }\n\n  return offset;\n}\n\n/**\n * Get an edge value given a start, size and offset value.\n */\nexport function getEdgeWithOffset(start: number, size: number, offset: string | number): number {\n  if (isNumber(offset)) {\n    return start + size * offset;\n  }\n\n  const parsedNamedOffset = parseNamedOffset(offset);\n  if (isNumber(parsedNamedOffset)) {\n    return start + size * parsedNamedOffset;\n  }\n\n  if (isString(parsedNamedOffset)) {\n    const parsedOffset = Number.parseFloat(parsedNamedOffset);\n\n    if (parsedNamedOffset.endsWith(units.px)) {\n      return start + parsedOffset;\n    }\n\n    if (parsedNamedOffset.endsWith(units.vh)) {\n      return start + (parsedOffset * window.innerHeight) / 100;\n    }\n\n    if (parsedNamedOffset.endsWith(units.vw)) {\n      return start + (parsedOffset * window.innerWidth) / 100;\n    }\n\n    if (parsedNamedOffset.endsWith(units.vmin)) {\n      return start + (parsedOffset * Math.min(window.innerWidth, window.innerHeight)) / 100;\n    }\n\n    if (parsedNamedOffset.endsWith(units.vmax)) {\n      return start + (parsedOffset * Math.max(window.innerWidth, window.innerHeight)) / 100;\n    }\n  }\n\n  return start;\n}\n\n/**\n * Get starting and ending edges for a given axis, a target sizings, a container sizings and their offset.\n */\nexport function getEdges(axis: 'x' | 'y', targetSizes, containerSizes, offset): [number, number] {\n  const sizeKey = axis === 'x' ? 'width' : 'height';\n  const targetStart = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[0][0]);\n  const containerStart = getEdgeWithOffset(0, containerSizes[sizeKey], offset[0][1]);\n  const targetEnd = getEdgeWithOffset(targetSizes[axis], targetSizes[sizeKey], offset[1][0]);\n  const containerEnd = getEdgeWithOffset(0, containerSizes[sizeKey], offset[1][1]);\n  const start = targetStart - containerStart;\n  const end = targetEnd - containerEnd;\n\n  return [start, end];\n}\n"],
+  "mappings": "AAAA,SAAS,UAAU,gBAAgB;AAGnC,MAAM,QAAQ;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,eAAe;AAAA,EACnB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAKO,SAAS,gBAAgB,SAAmC;AACjE,SAAO,QACJ,MAAM,GAAG,EACT,IAAI,CAAC,WAAW,OAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;AACzD;AAKO,SAAS,iBAAiB,QAA0C;AACzE,MAAI,SAAS,MAAM,GAAG;AACpB,WAAO;AAAA,EACT;AAEA,MAAI,SAAS,aAAa,OAAO,GAAG;AAClC,WAAO,aAAa;AAAA,EACtB;AAEA,MAAI,SAAS,OAAO,MAAM,CAAC,GAAG;AAC5B,WAAO,OAAO,MAAM;AAAA,EACtB;AAEA,MAAI,SAAS,MAAM,KAAK,OAAO,SAAS,MAAM,OAAO,GAAG;AACtD,WAAO,OAAO,WAAW,MAAM,IAAI;AAAA,EACrC;AAEA,SAAO;AACT;AAKO,SAAS,kBAAkB,OAAe,MAAc,QAAiC;AAC9F,MAAI,SAAS,MAAM,GAAG;AACpB,WAAO,QAAQ,OAAO;AAAA,EACxB;AAEA,QAAM,oBAAoB,iBAAiB,MAAM;AACjD,MAAI,SAAS,iBAAiB,GAAG;AAC/B,WAAO,QAAQ,OAAO;AAAA,EACxB;AAEA,MAAI,SAAS,iBAAiB,GAAG;AAC/B,UAAM,eAAe,OAAO,WAAW,iBAAiB;AAExD,QAAI,kBAAkB,SAAS,MAAM,EAAE,GAAG;AACxC,aAAO,QAAQ;AAAA,IACjB;AAEA,QAAI,kBAAkB,SAAS,MAAM,EAAE,GAAG;AACxC,aAAO,QAAS,eAAe,OAAO,cAAe;AAAA,IACvD;AAEA,QAAI,kBAAkB,SAAS,MAAM,EAAE,GAAG;AACxC,aAAO,QAAS,eAAe,OAAO,aAAc;AAAA,IACtD;AAEA,QAAI,kBAAkB,SAAS,MAAM,IAAI,GAAG;AAC1C,aAAO,QAAS,eAAe,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAAA,IACpF;AAEA,QAAI,kBAAkB,SAAS,MAAM,IAAI,GAAG;AAC1C,aAAO,QAAS,eAAe,KAAK,IAAI,OAAO,YAAY,OAAO,WAAW,IAAK;AAAA,IACpF;AAAA,EACF;AAEA,SAAO;AACT;AAKO,SAAS,SAAS,MAAiB,aAAa,gBAAgB,QAA0B;AAC/F,QAAM,UAAU,SAAS,MAAM,UAAU;AACzC,QAAM,cAAc,kBAAkB,YAAY,OAAO,YAAY,UAAU,OAAO,GAAG,EAAE;AAC3F,QAAM,iBAAiB,kBAAkB,GAAG,eAAe,UAAU,OAAO,GAAG,EAAE;AACjF,QAAM,YAAY,kBAAkB,YAAY,OAAO,YAAY,UAAU,OAAO,GAAG,EAAE;AACzF,QAAM,eAAe,kBAAkB,GAAG,eAAe,UAAU,OAAO,GAAG,EAAE;AAC/E,QAAM,QAAQ,cAAc;AAC5B,QAAM,MAAM,YAAY;AAExB,SAAO,CAAC,OAAO,GAAG;AACpB;",
+  "names": []
+}

package/decorators/{withScrolledInView.cjs → withScrolledInView/withScrolledInView.cjs}

@@ -16,14 +16,15 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/decorators/withScrolledInView.ts
+// packages/js-toolkit/decorators/withScrolledInView/withScrolledInView.ts
 var withScrolledInView_exports = {};
 __export(withScrolledInView_exports, {
   withScrolledInView: () => withScrolledInView
 });
 module.exports = __toCommonJS(withScrolledInView_exports);
-var import_withMountWhenInView = require("./withMountWhenInView.cjs");
-var import_utils = require("../utils/index.cjs");
+var import_withMountWhenInView = require("../withMountWhenInView.cjs");
+var import_utils = require("../../utils/index.cjs");
+var import_utils2 = require("./utils.cjs");
 var scheduler = (0, import_utils.useScheduler)(["update", "render"]);
 function updateProps(props, dampFactor, dampPrecision, axis = "x") {
   props.current[axis] = (0, import_utils.clamp)(
@@ -60,6 +61,10 @@ function withScrolledInView(BaseClass, options = {}) {
         dampPrecision: {
           type: Number,
           default: 1e-3
+        },
+        offset: {
+          type: String,
+          default: "start end / end start"
         }
       }
     };
@@ -117,7 +122,7 @@ function withScrolledInView(BaseClass, options = {}) {
         },
         ticked: () => {
           const dampFactor = this.dampFactor ?? this.$options.dampFactor;
-          const dampPrecision = this.dampFactor ?? this.$options.dampFactor;
+          const dampPrecision = this.dampPrecision ?? this.$options.dampPrecision;
           updateProps(this.__props, dampFactor, dampPrecision, "x");
           updateProps(this.__props, dampFactor, dampPrecision, "y");
           if (this.__props.dampedCurrent.x === this.__props.current.x && this.__props.dampedCurrent.y === this.__props.current.y) {
@@ -171,13 +176,20 @@ function withScrolledInView(BaseClass, options = {}) {
       }
     }
     __setProps() {
-      const sizes = options.useOffsetSizes ? (0, import_utils.getOffsetSizes)(this.$el) : this.$el.getBoundingClientRect();
-      const yEnd = sizes.y + window.pageYOffset + sizes.height;
-      const yStart = yEnd - window.innerHeight - sizes.height;
+      const targetSizes = options.useOffsetSizes ? (0, import_utils.getOffsetSizes)(this.$el) : this.$el.getBoundingClientRect();
+      targetSizes.y += window.pageYOffset;
+      targetSizes.x += window.pageXOffset;
+      const containerSizes = {
+        x: 0,
+        y: 0,
+        height: window.innerHeight,
+        width: window.innerWidth
+      };
+      const offset = (0, import_utils2.normalizeOffset)(this.$options.offset);
+      const [yStart, yEnd] = (0, import_utils2.getEdges)("y", targetSizes, containerSizes, offset);
       const yCurrent = (0, import_utils.clamp)(window.pageYOffset, yStart, yEnd);
       const yProgress = (0, import_utils.clamp01)((yCurrent - yStart) / (yEnd - yStart));
-      const xEnd = sizes.x + window.pageXOffset + sizes.width;
-      const xStart = xEnd - window.innerWidth - sizes.width;
+      const [xStart, xEnd] = (0, import_utils2.getEdges)("x", targetSizes, containerSizes, offset);
       const xCurrent = (0, import_utils.clamp)(window.pageXOffset, xStart, xEnd);
       const xProgress = (0, import_utils.clamp01)((xCurrent - xStart) / (xEnd - xStart));
       this.__props.start.x = xStart;

package/decorators/withScrolledInView/withScrolledInView.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/decorators/withScrolledInView/withScrolledInView.ts"],
+  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../../Base/index.js';\nimport type {\n  RafServiceProps,\n  ScrollServiceProps,\n  ResizeServiceProps,\n} from '../../services/index.js';\nimport { withMountWhenInView } from '../withMountWhenInView.js';\nimport {\n  damp,\n  clamp,\n  clamp01,\n  getOffsetSizes,\n  isFunction,\n  useScheduler,\n} from '../../utils/index.js';\nimport { normalizeOffset, getEdges } from './utils.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport interface WithScrolledInViewProps extends BaseProps {\n  $options: {\n    dampFactor: number;\n    dampPrecision: number;\n    offset: string;\n  };\n}\n\nexport type ScrollInViewProps = {\n  start: {\n    x: number;\n    y: number;\n  };\n  end: {\n    x: number;\n    y: number;\n  };\n  current: {\n    x: number;\n    y: number;\n  };\n  dampedCurrent: {\n    x: number;\n    y: number;\n  };\n  progress: {\n    x: number;\n    y: number;\n  };\n  dampedProgress: {\n    x: number;\n    y: number;\n  };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n  useOffsetSizes?: boolean;\n};\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n): void {\n  props.current[axis] = clamp(\n    axis === 'x' ? window.pageXOffset : window.pageYOffset,\n    props.start[axis],\n    props.end[axis],\n  );\n  props.dampedCurrent[axis] = damp(\n    props.current[axis],\n    props.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  props.progress[axis] = clamp01(\n    (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n  props.dampedProgress[axis] = clamp01(\n    (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n  /**\n   * @private\n   * @type {ScrollInViewProps}\n   */\n  __props: ScrollInViewProps;\n  dampFactor?: number;\n  dampPrecision?: number;\n  mounted(): void;\n  resized(props: ResizeServiceProps): void;\n  scrolled(props: ScrollServiceProps): void;\n  ticked(props: RafServiceProps): void;\n  destroyed(): void;\n  /**\n   * @private\n   */\n  __setProps(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n  /**\n   * Class.\n   */\n  class WithScrolledInView<T extends BaseProps = BaseProps> extends withMountWhenInView(\n    BaseClass,\n    options,\n  )<T & WithScrolledInViewProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      emits: ['scrolledInView'],\n      options: {\n        dampFactor: {\n          type: Number,\n          default: 0.1,\n        },\n        dampPrecision: {\n          type: Number,\n          default: 0.001,\n        },\n        offset: {\n          type: String,\n          default: 'start end / end start',\n        },\n      },\n    };\n\n    __props: ScrollInViewProps = {\n      start: {\n        x: 0,\n        y: 0,\n      },\n      end: {\n        x: 0,\n        y: 0,\n      },\n      current: {\n        x: 0,\n        y: 0,\n      },\n      dampedCurrent: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      dampedProgress: {\n        x: 0,\n        y: 0,\n      },\n    };\n\n    /**\n     * Factor used for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampFactor?: number = null;\n\n    /**\n     * Precision for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampPrecision?: number = null;\n\n    /**\n     * Bind listeners.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const render = () => {\n        scheduler.update(() => {\n          // @ts-ignore\n          const renderFn = this.__callMethod('scrolledInView', this.__props);\n          if (isFunction(renderFn)) {\n            scheduler.render(() => {\n              renderFn(this.__props);\n            });\n          }\n        });\n      };\n\n      const delegate = {\n        handleEvent(event) {\n          delegate[event.type](event.detail[0]);\n        },\n        resized: () => {\n          this.__setProps();\n        },\n        scrolled: (props) => {\n          if ((!this.$services.has('ticked') && props.changed.y) || props.changed.x) {\n            this.$services.enable('ticked');\n          }\n        },\n        ticked: () => {\n          const dampFactor = this.dampFactor ?? this.$options.dampFactor;\n          const dampPrecision = this.dampPrecision ?? this.$options.dampPrecision;\n\n          updateProps(this.__props, dampFactor, dampPrecision, 'x');\n          updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n          if (\n            this.__props.dampedCurrent.x === this.__props.current.x &&\n            this.__props.dampedCurrent.y === this.__props.current.y\n          ) {\n            this.$services.disable('ticked');\n          }\n\n          render();\n        },\n      };\n\n      this.$on('before-mounted', () => {\n        this.$on('resized', delegate);\n        this.$on('scrolled', delegate);\n        this.$on('ticked', delegate);\n      });\n\n      this.$on('mounted', () => {\n        this.__setProps();\n      });\n\n      this.$on('destroyed', () => {\n        this.$off('resized', delegate);\n        this.$off('scrolled', delegate);\n        this.$off('ticked', delegate);\n\n        // Clamp damped values to their final value and trigger one last render on destroy\n        this.__props.dampedCurrent.x = this.__props.current.x;\n        this.__props.dampedCurrent.y = this.__props.current.y;\n        this.__props.dampedProgress.x = this.__props.progress.x;\n        this.__props.dampedProgress.y = this.__props.progress.y;\n        render();\n      });\n    }\n\n    /**\n     * Mounted hook.\n     */\n    mounted() {\n      // @ts-ignore\n      if (isFunction(super.mounted)) {\n        // @ts-ignore\n        super.mounted();\n      }\n    }\n\n    /**\n     * Resized hook.\n     */\n    resized(props: ResizeServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.resized)) {\n        // @ts-ignore\n        super.resized(props);\n      }\n    }\n\n    /**\n     * Scrolled hook.\n     */\n    scrolled(props: ScrollServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.scrolled)) {\n        // @ts-ignore\n        super.scrolled(props);\n      }\n    }\n\n    /**\n     * Ticked hook.\n     */\n    ticked(props: RafServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.ticked)) {\n        // @ts-ignore\n        super.ticked(props);\n      }\n    }\n\n    /**\n     * Destroyed hook.\n     */\n    destroyed() {\n      // @ts-ignore\n      if (isFunction(super.destroyed)) {\n        // @ts-ignore\n        super.destroyed();\n      }\n    }\n\n    /**\n     * Set the decorator props.\n     */\n    __setProps() {\n      const targetSizes = options.useOffsetSizes\n        ? getOffsetSizes(this.$el)\n        : this.$el.getBoundingClientRect();\n\n      targetSizes.y += window.pageYOffset;\n      targetSizes.x += window.pageXOffset;\n\n      const containerSizes = {\n        x: 0,\n        y: 0,\n        height: window.innerHeight,\n        width: window.innerWidth,\n      };\n\n      const offset = normalizeOffset(this.$options.offset);\n\n      // Y axis\n      const [yStart, yEnd] = getEdges('y', targetSizes, containerSizes, offset);\n      const yCurrent = clamp(window.pageYOffset, yStart, yEnd);\n      const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));\n      // X axis\n      const [xStart, xEnd] = getEdges('x', targetSizes, containerSizes, offset);\n      const xCurrent = clamp(window.pageXOffset, xStart, xEnd);\n      const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n      this.__props.start.x = xStart;\n      this.__props.start.y = yStart;\n      this.__props.end.x = xEnd;\n      this.__props.end.y = yEnd;\n      this.__props.current.x = xCurrent;\n      this.__props.current.y = yCurrent;\n      this.__props.dampedCurrent.x = damp(\n        xCurrent,\n        this.__props.dampedCurrent.x,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.dampedCurrent.y = damp(\n        yCurrent,\n        this.__props.dampedCurrent.y,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.progress.x = xProgress;\n      this.__props.progress.y = yProgress;\n      this.__props.dampedProgress.x = clamp01(\n        (this.__props.dampedCurrent.x - xStart) / (xEnd - xStart),\n      );\n      this.__props.dampedProgress.y = clamp01(\n        (this.__props.dampedCurrent.y - yStart) / (yEnd - yStart),\n      );\n    }\n  }\n\n  // @ts-ignore\n  return WithScrolledInView;\n}\n"],
+  "mappings": "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",
+  "names": ["import_utils"]
+}

package/decorators/{withScrolledInView.d.ts → withScrolledInView/withScrolledInView.d.ts}

@@ -1,13 +1,14 @@
-import type { BaseInterface, BaseDecorator } from '../Base/types.js';
-import type { Base, BaseProps } from '../Base/index.js';
-import type { RafServiceProps, ScrollServiceProps, ResizeServiceProps } from '../services/index.js';
+import type { BaseInterface, BaseDecorator } from '../../Base/types.js';
+import type { Base, BaseProps } from '../../Base/index.js';
+import type { RafServiceProps, ScrollServiceProps, ResizeServiceProps } from '../../services/index.js';
 export interface WithScrolledInViewProps extends BaseProps {
     $options: {
         dampFactor: number;
         dampPrecision: number;
+        offset: string;
     };
 }
-export declare type ScrollInViewProps = {
+export type ScrollInViewProps = {
     start: {
         x: number;
         y: number;
@@ -33,7 +34,7 @@ export declare type ScrollInViewProps = {
         y: number;
     };
 };
-export declare type WithScrolledInViewOptions = IntersectionObserverInit & {
+export type WithScrolledInViewOptions = IntersectionObserverInit & {
     useOffsetSizes?: boolean;
 };
 export interface WithScrolledInViewInterface extends BaseInterface {

package/decorators/{withScrolledInView.js → withScrolledInView/withScrolledInView.js}

@@ -1,5 +1,13 @@
-import { withMountWhenInView } from "./withMountWhenInView.js";
-import { damp, clamp, clamp01, getOffsetSizes, isFunction, useScheduler } from "../utils/index.js";
+import { withMountWhenInView } from "../withMountWhenInView.js";
+import {
+  damp,
+  clamp,
+  clamp01,
+  getOffsetSizes,
+  isFunction,
+  useScheduler
+} from "../../utils/index.js";
+import { normalizeOffset, getEdges } from "./utils.js";
 const scheduler = useScheduler(["update", "render"]);
 function updateProps(props, dampFactor, dampPrecision, axis = "x") {
   props.current[axis] = clamp(
@@ -36,6 +44,10 @@ function withScrolledInView(BaseClass, options = {}) {
         dampPrecision: {
           type: Number,
           default: 1e-3
+        },
+        offset: {
+          type: String,
+          default: "start end / end start"
         }
       }
     };
@@ -93,7 +105,7 @@ function withScrolledInView(BaseClass, options = {}) {
         },
         ticked: () => {
           const dampFactor = this.dampFactor ?? this.$options.dampFactor;
-          const dampPrecision = this.dampFactor ?? this.$options.dampFactor;
+          const dampPrecision = this.dampPrecision ?? this.$options.dampPrecision;
           updateProps(this.__props, dampFactor, dampPrecision, "x");
           updateProps(this.__props, dampFactor, dampPrecision, "y");
           if (this.__props.dampedCurrent.x === this.__props.current.x && this.__props.dampedCurrent.y === this.__props.current.y) {
@@ -147,13 +159,20 @@ function withScrolledInView(BaseClass, options = {}) {
       }
     }
     __setProps() {
-      const sizes = options.useOffsetSizes ? getOffsetSizes(this.$el) : this.$el.getBoundingClientRect();
-      const yEnd = sizes.y + window.pageYOffset + sizes.height;
-      const yStart = yEnd - window.innerHeight - sizes.height;
+      const targetSizes = options.useOffsetSizes ? getOffsetSizes(this.$el) : this.$el.getBoundingClientRect();
+      targetSizes.y += window.pageYOffset;
+      targetSizes.x += window.pageXOffset;
+      const containerSizes = {
+        x: 0,
+        y: 0,
+        height: window.innerHeight,
+        width: window.innerWidth
+      };
+      const offset = normalizeOffset(this.$options.offset);
+      const [yStart, yEnd] = getEdges("y", targetSizes, containerSizes, offset);
       const yCurrent = clamp(window.pageYOffset, yStart, yEnd);
       const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));
-      const xEnd = sizes.x + window.pageXOffset + sizes.width;
-      const xStart = xEnd - window.innerWidth - sizes.width;
+      const [xStart, xEnd] = getEdges("x", targetSizes, containerSizes, offset);
       const xCurrent = clamp(window.pageXOffset, xStart, xEnd);
       const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));
       this.__props.start.x = xStart;

package/decorators/withScrolledInView/withScrolledInView.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/decorators/withScrolledInView/withScrolledInView.ts"],
+  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../../Base/index.js';\nimport type {\n  RafServiceProps,\n  ScrollServiceProps,\n  ResizeServiceProps,\n} from '../../services/index.js';\nimport { withMountWhenInView } from '../withMountWhenInView.js';\nimport {\n  damp,\n  clamp,\n  clamp01,\n  getOffsetSizes,\n  isFunction,\n  useScheduler,\n} from '../../utils/index.js';\nimport { normalizeOffset, getEdges } from './utils.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport interface WithScrolledInViewProps extends BaseProps {\n  $options: {\n    dampFactor: number;\n    dampPrecision: number;\n    offset: string;\n  };\n}\n\nexport type ScrollInViewProps = {\n  start: {\n    x: number;\n    y: number;\n  };\n  end: {\n    x: number;\n    y: number;\n  };\n  current: {\n    x: number;\n    y: number;\n  };\n  dampedCurrent: {\n    x: number;\n    y: number;\n  };\n  progress: {\n    x: number;\n    y: number;\n  };\n  dampedProgress: {\n    x: number;\n    y: number;\n  };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n  useOffsetSizes?: boolean;\n};\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n): void {\n  props.current[axis] = clamp(\n    axis === 'x' ? window.pageXOffset : window.pageYOffset,\n    props.start[axis],\n    props.end[axis],\n  );\n  props.dampedCurrent[axis] = damp(\n    props.current[axis],\n    props.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  props.progress[axis] = clamp01(\n    (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n  props.dampedProgress[axis] = clamp01(\n    (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n  /**\n   * @private\n   * @type {ScrollInViewProps}\n   */\n  __props: ScrollInViewProps;\n  dampFactor?: number;\n  dampPrecision?: number;\n  mounted(): void;\n  resized(props: ResizeServiceProps): void;\n  scrolled(props: ScrollServiceProps): void;\n  ticked(props: RafServiceProps): void;\n  destroyed(): void;\n  /**\n   * @private\n   */\n  __setProps(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n  /**\n   * Class.\n   */\n  class WithScrolledInView<T extends BaseProps = BaseProps> extends withMountWhenInView(\n    BaseClass,\n    options,\n  )<T & WithScrolledInViewProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      emits: ['scrolledInView'],\n      options: {\n        dampFactor: {\n          type: Number,\n          default: 0.1,\n        },\n        dampPrecision: {\n          type: Number,\n          default: 0.001,\n        },\n        offset: {\n          type: String,\n          default: 'start end / end start',\n        },\n      },\n    };\n\n    __props: ScrollInViewProps = {\n      start: {\n        x: 0,\n        y: 0,\n      },\n      end: {\n        x: 0,\n        y: 0,\n      },\n      current: {\n        x: 0,\n        y: 0,\n      },\n      dampedCurrent: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      dampedProgress: {\n        x: 0,\n        y: 0,\n      },\n    };\n\n    /**\n     * Factor used for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampFactor?: number = null;\n\n    /**\n     * Precision for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampPrecision?: number = null;\n\n    /**\n     * Bind listeners.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const render = () => {\n        scheduler.update(() => {\n          // @ts-ignore\n          const renderFn = this.__callMethod('scrolledInView', this.__props);\n          if (isFunction(renderFn)) {\n            scheduler.render(() => {\n              renderFn(this.__props);\n            });\n          }\n        });\n      };\n\n      const delegate = {\n        handleEvent(event) {\n          delegate[event.type](event.detail[0]);\n        },\n        resized: () => {\n          this.__setProps();\n        },\n        scrolled: (props) => {\n          if ((!this.$services.has('ticked') && props.changed.y) || props.changed.x) {\n            this.$services.enable('ticked');\n          }\n        },\n        ticked: () => {\n          const dampFactor = this.dampFactor ?? this.$options.dampFactor;\n          const dampPrecision = this.dampPrecision ?? this.$options.dampPrecision;\n\n          updateProps(this.__props, dampFactor, dampPrecision, 'x');\n          updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n          if (\n            this.__props.dampedCurrent.x === this.__props.current.x &&\n            this.__props.dampedCurrent.y === this.__props.current.y\n          ) {\n            this.$services.disable('ticked');\n          }\n\n          render();\n        },\n      };\n\n      this.$on('before-mounted', () => {\n        this.$on('resized', delegate);\n        this.$on('scrolled', delegate);\n        this.$on('ticked', delegate);\n      });\n\n      this.$on('mounted', () => {\n        this.__setProps();\n      });\n\n      this.$on('destroyed', () => {\n        this.$off('resized', delegate);\n        this.$off('scrolled', delegate);\n        this.$off('ticked', delegate);\n\n        // Clamp damped values to their final value and trigger one last render on destroy\n        this.__props.dampedCurrent.x = this.__props.current.x;\n        this.__props.dampedCurrent.y = this.__props.current.y;\n        this.__props.dampedProgress.x = this.__props.progress.x;\n        this.__props.dampedProgress.y = this.__props.progress.y;\n        render();\n      });\n    }\n\n    /**\n     * Mounted hook.\n     */\n    mounted() {\n      // @ts-ignore\n      if (isFunction(super.mounted)) {\n        // @ts-ignore\n        super.mounted();\n      }\n    }\n\n    /**\n     * Resized hook.\n     */\n    resized(props: ResizeServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.resized)) {\n        // @ts-ignore\n        super.resized(props);\n      }\n    }\n\n    /**\n     * Scrolled hook.\n     */\n    scrolled(props: ScrollServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.scrolled)) {\n        // @ts-ignore\n        super.scrolled(props);\n      }\n    }\n\n    /**\n     * Ticked hook.\n     */\n    ticked(props: RafServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.ticked)) {\n        // @ts-ignore\n        super.ticked(props);\n      }\n    }\n\n    /**\n     * Destroyed hook.\n     */\n    destroyed() {\n      // @ts-ignore\n      if (isFunction(super.destroyed)) {\n        // @ts-ignore\n        super.destroyed();\n      }\n    }\n\n    /**\n     * Set the decorator props.\n     */\n    __setProps() {\n      const targetSizes = options.useOffsetSizes\n        ? getOffsetSizes(this.$el)\n        : this.$el.getBoundingClientRect();\n\n      targetSizes.y += window.pageYOffset;\n      targetSizes.x += window.pageXOffset;\n\n      const containerSizes = {\n        x: 0,\n        y: 0,\n        height: window.innerHeight,\n        width: window.innerWidth,\n      };\n\n      const offset = normalizeOffset(this.$options.offset);\n\n      // Y axis\n      const [yStart, yEnd] = getEdges('y', targetSizes, containerSizes, offset);\n      const yCurrent = clamp(window.pageYOffset, yStart, yEnd);\n      const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));\n      // X axis\n      const [xStart, xEnd] = getEdges('x', targetSizes, containerSizes, offset);\n      const xCurrent = clamp(window.pageXOffset, xStart, xEnd);\n      const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n      this.__props.start.x = xStart;\n      this.__props.start.y = yStart;\n      this.__props.end.x = xEnd;\n      this.__props.end.y = yEnd;\n      this.__props.current.x = xCurrent;\n      this.__props.current.y = yCurrent;\n      this.__props.dampedCurrent.x = damp(\n        xCurrent,\n        this.__props.dampedCurrent.x,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.dampedCurrent.y = damp(\n        yCurrent,\n        this.__props.dampedCurrent.y,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.progress.x = xProgress;\n      this.__props.progress.y = yProgress;\n      this.__props.dampedProgress.x = clamp01(\n        (this.__props.dampedCurrent.x - xStart) / (xEnd - xStart),\n      );\n      this.__props.dampedProgress.y = clamp01(\n        (this.__props.dampedCurrent.y - yStart) / (yEnd - yStart),\n      );\n    }\n  }\n\n  // @ts-ignore\n  return WithScrolledInView;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/helpers/createApp.d.ts

@@ -1,6 +1,6 @@
 import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';
 import type { Features } from '../Base/features.js';
-export declare type CreateAppOptions = {
+export type CreateAppOptions = {
     root: HTMLElement;
     features: Features;
 };

package/helpers/getClosestParent.cjs

@@ -29,19 +29,11 @@ __export(getClosestParent_exports, {
 });
 module.exports = __toCommonJS(getClosestParent_exports);
 var import_getInstanceFromElement = __toESM(require("./getInstanceFromElement.cjs"), 1);
-function walkAncestorsWhile(element, condition, limit = 1e3) {
-  let parent = element.parentElement;
-  let count = 0;
-  while (parent && condition(parent) && count < limit) {
-    parent = parent.parentElement;
-    count += 1;
-  }
-  return parent;
-}
+var import_utils = require("../utils/index.cjs");
 function getClosestParent(childInstance, ParentConstructor) {
-  const parentEl = walkAncestorsWhile(
+  const parentEl = (0, import_utils.getAncestorWhere)(
     childInstance.$el,
-    (element) => !(0, import_getInstanceFromElement.default)(element, ParentConstructor)
+    (element) => element && (0, import_getInstanceFromElement.default)(element, ParentConstructor) !== null
   );
   return parentEl ? (0, import_getInstanceFromElement.default)(parentEl, ParentConstructor) : null;
 }

package/helpers/getClosestParent.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/getClosestParent.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport getInstanceFromElement from './getInstanceFromElement.js';\n\n/**\n * Walk through an element ancestors while the given condition is true with a\n * limit of 1000 iteration to avoid infinite loops.\n */\nfunction walkAncestorsWhile(\n  element: HTMLElement,\n  condition: (element: HTMLElement) => boolean,\n  limit = 1000,\n): HTMLElement | null {\n  let parent = element.parentElement;\n  let count = 0;\n\n  while (parent && condition(parent) && count < limit) {\n    parent = parent.parentElement;\n    count += 1;\n  }\n\n  return parent;\n}\n\n/**\n * Get the closest parent of a component.\n */\nexport default function getClosestParent<T extends BaseConstructor>(\n  childInstance: Base,\n  ParentConstructor: T,\n) {\n  const parentEl = walkAncestorsWhile(\n    childInstance.$el,\n    (element) => !getInstanceFromElement(element, ParentConstructor),\n  );\n\n  return parentEl ? getInstanceFromElement(parentEl, ParentConstructor) : null;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oCAAmC;AAMnC,SAAS,mBACP,SACA,WACA,QAAQ,KACY;AACpB,MAAI,SAAS,QAAQ;AACrB,MAAI,QAAQ;AAEZ,SAAO,UAAU,UAAU,MAAM,KAAK,QAAQ,OAAO;AACnD,aAAS,OAAO;AAChB,aAAS;AAAA,EACX;AAEA,SAAO;AACT;AAKe,SAAR,iBACL,eACA,mBACA;AACA,QAAM,WAAW;AAAA,IACf,cAAc;AAAA,IACd,CAAC,YAAY,KAAC,8BAAAA,SAAuB,SAAS,iBAAiB;AAAA,EACjE;AAEA,SAAO,eAAW,8BAAAA,SAAuB,UAAU,iBAAiB,IAAI;AAC1E;",
+  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport getInstanceFromElement from './getInstanceFromElement.js';\nimport { getAncestorWhere } from '../utils/index.js';\n\n/**\n * Get the closest parent of a component.\n */\nexport default function getClosestParent<T extends BaseConstructor>(\n  childInstance: Base,\n  ParentConstructor: T,\n) {\n  const parentEl = getAncestorWhere(\n    childInstance.$el,\n    (element) => element && getInstanceFromElement(element, ParentConstructor) !== null,\n  );\n\n  return parentEl ? getInstanceFromElement(parentEl, ParentConstructor) : null;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oCAAmC;AACnC,mBAAiC;AAKlB,SAAR,iBACL,eACA,mBACA;AACA,QAAM,eAAW;AAAA,IACf,cAAc;AAAA,IACd,CAAC,YAAY,eAAW,8BAAAA,SAAuB,SAAS,iBAAiB,MAAM;AAAA,EACjF;AAEA,SAAO,eAAW,8BAAAA,SAAuB,UAAU,iBAAiB,IAAI;AAC1E;",
   "names": ["getInstanceFromElement"]
 }

package/helpers/getClosestParent.js

@@ -1,17 +1,9 @@
 import getInstanceFromElement from "./getInstanceFromElement.js";
-function walkAncestorsWhile(element, condition, limit = 1e3) {
-  let parent = element.parentElement;
-  let count = 0;
-  while (parent && condition(parent) && count < limit) {
-    parent = parent.parentElement;
-    count += 1;
-  }
-  return parent;
-}
+import { getAncestorWhere } from "../utils/index.js";
 function getClosestParent(childInstance, ParentConstructor) {
-  const parentEl = walkAncestorsWhile(
+  const parentEl = getAncestorWhere(
     childInstance.$el,
-    (element) => !getInstanceFromElement(element, ParentConstructor)
+    (element) => element && getInstanceFromElement(element, ParentConstructor) !== null
   );
   return parentEl ? getInstanceFromElement(parentEl, ParentConstructor) : null;
 }

package/helpers/getClosestParent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/getClosestParent.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport getInstanceFromElement from './getInstanceFromElement.js';\n\n/**\n * Walk through an element ancestors while the given condition is true with a\n * limit of 1000 iteration to avoid infinite loops.\n */\nfunction walkAncestorsWhile(\n  element: HTMLElement,\n  condition: (element: HTMLElement) => boolean,\n  limit = 1000,\n): HTMLElement | null {\n  let parent = element.parentElement;\n  let count = 0;\n\n  while (parent && condition(parent) && count < limit) {\n    parent = parent.parentElement;\n    count += 1;\n  }\n\n  return parent;\n}\n\n/**\n * Get the closest parent of a component.\n */\nexport default function getClosestParent<T extends BaseConstructor>(\n  childInstance: Base,\n  ParentConstructor: T,\n) {\n  const parentEl = walkAncestorsWhile(\n    childInstance.$el,\n    (element) => !getInstanceFromElement(element, ParentConstructor),\n  );\n\n  return parentEl ? getInstanceFromElement(parentEl, ParentConstructor) : null;\n}\n"],
-  "mappings": "AACA,OAAO,4BAA4B;AAMnC,SAAS,mBACP,SACA,WACA,QAAQ,KACY;AACpB,MAAI,SAAS,QAAQ;AACrB,MAAI,QAAQ;AAEZ,SAAO,UAAU,UAAU,MAAM,KAAK,QAAQ,OAAO;AACnD,aAAS,OAAO;AAChB,aAAS;AAAA,EACX;AAEA,SAAO;AACT;AAKe,SAAR,iBACL,eACA,mBACA;AACA,QAAM,WAAW;AAAA,IACf,cAAc;AAAA,IACd,CAAC,YAAY,CAAC,uBAAuB,SAAS,iBAAiB;AAAA,EACjE;AAEA,SAAO,WAAW,uBAAuB,UAAU,iBAAiB,IAAI;AAC1E;",
+  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport getInstanceFromElement from './getInstanceFromElement.js';\nimport { getAncestorWhere } from '../utils/index.js';\n\n/**\n * Get the closest parent of a component.\n */\nexport default function getClosestParent<T extends BaseConstructor>(\n  childInstance: Base,\n  ParentConstructor: T,\n) {\n  const parentEl = getAncestorWhere(\n    childInstance.$el,\n    (element) => element && getInstanceFromElement(element, ParentConstructor) !== null,\n  );\n\n  return parentEl ? getInstanceFromElement(parentEl, ParentConstructor) : null;\n}\n"],
+  "mappings": "AACA,OAAO,4BAA4B;AACnC,SAAS,wBAAwB;AAKlB,SAAR,iBACL,eACA,mBACA;AACA,QAAM,WAAW;AAAA,IACf,cAAc;AAAA,IACd,CAAC,YAAY,WAAW,uBAAuB,SAAS,iBAAiB,MAAM;AAAA,EACjF;AAEA,SAAO,WAAW,uBAAuB,UAAU,iBAAiB,IAAI;AAC1E;",
   "names": []
 }

package/helpers/importWhenIdle.d.ts

@@ -1,5 +1,5 @@
 import type { BaseConstructor } from '../Base/index.js';
-declare type ImportWhenIdleOptions = {
+type ImportWhenIdleOptions = {
     timeout?: number;
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"
@@ -41,7 +41,7 @@
     "toolkit"
   ],
   "dependencies": {
-    "@motionone/easing": "^10.14.0",
+    "@motionone/easing": "^10.15.1",
     "deepmerge": "^4.2.2"
   },
   "devDependencies": {

package/services/drag.d.ts

@@ -1,6 +1,6 @@
 import type { ServiceInterface } from './index.js';
-export declare type DragService = ServiceInterface<DragServiceProps>;
-declare type DragLifecycle = 'start' | 'drag' | 'drop' | 'inertia' | 'stop';
+export type DragService = ServiceInterface<DragServiceProps>;
+type DragLifecycle = 'start' | 'drag' | 'drop' | 'inertia' | 'stop';
 export interface DragServiceProps {
     /**
      * The current mode of the dragging logic.

package/services/index.d.ts

@@ -23,13 +23,13 @@ export interface ServiceInterface<T> {
      */
     props(): T;
 }
-export declare type DragServiceInterface = ServiceInterface<DragServiceProps>;
-export declare type KeyServiceInterface = ServiceInterface<KeyServiceProps>;
-export declare type LoadServiceInterface = ServiceInterface<LoadServiceProps>;
-export declare type PointerServiceInterface = ServiceInterface<PointerServiceProps>;
-export declare type RafServiceInterface = ServiceInterface<RafServiceProps>;
-export declare type ResizeServiceInterface = ServiceInterface<ResizeServiceProps>;
-export declare type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;
+export type DragServiceInterface = ServiceInterface<DragServiceProps>;
+export type KeyServiceInterface = ServiceInterface<KeyServiceProps>;
+export type LoadServiceInterface = ServiceInterface<LoadServiceProps>;
+export type PointerServiceInterface = ServiceInterface<PointerServiceProps>;
+export type RafServiceInterface = ServiceInterface<RafServiceProps>;
+export type ResizeServiceInterface = ServiceInterface<ResizeServiceProps>;
+export type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;
 export type { DragServiceProps, KeyServiceProps, LoadServiceProps, PointerServiceProps, RafServiceProps, ResizeServiceProps, ScrollServiceProps, };
 export { default as useDrag } from './drag.js';
 export { default as useKey } from './key.js';

package/services/key.d.ts

@@ -1,5 +1,5 @@
 import type { ServiceInterface } from './index.js';
-export declare type KeyService = ServiceInterface<KeyServiceProps>;
+export type KeyService = ServiceInterface<KeyServiceProps>;
 export interface KeyServiceProps {
     event: KeyboardEvent;
     triggered: number;

package/services/load.d.ts

@@ -1,5 +1,5 @@
 import type { ServiceInterface } from './index.js';
-export declare type LoadService = ServiceInterface<LoadServiceProps>;
+export type LoadService = ServiceInterface<LoadServiceProps>;
 export interface LoadServiceProps {
     time: DOMHighResTimeStamp;
 }

package/services/pointer.d.ts

@@ -1,5 +1,5 @@
 import type { ServiceInterface } from './index.js';
-export declare type PointerService = ServiceInterface<PointerServiceProps>;
+export type PointerService = ServiceInterface<PointerServiceProps>;
 export interface PointerServiceProps {
     event: MouseEvent | TouchEvent;
     isDown: boolean;