@studiometa/js-toolkit 2.6.0 → 2.6.3

package/decorators/withScrolledInView.js

@@ -1,9 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 import { withMountWhenInView } from "./withMountWhenInView.js";
 import { damp, clamp, clamp01, getOffsetSizes, isFunction, useScheduler } from "../utils/index.js";
 const scheduler = useScheduler(["update", "render"]);
@@ -28,36 +22,50 @@ function updateProps(props, dampFactor, dampPrecision, axis = "x") {
 }
 function withScrolledInView(BaseClass, options = {}) {
   class WithScrolledInView extends withMountWhenInView(BaseClass, options) {
-    constructor(element) {
-      super(element);
-      __publicField(this, "__props", {
-        start: {
-          x: 0,
-          y: 0
-        },
-        end: {
-          x: 0,
-          y: 0
-        },
-        current: {
-          x: 0,
-          y: 0
+    static config = {
+      name: `${BaseClass.config.name}WithMountWhenInView`,
+      emits: ["scrolledInView"],
+      options: {
+        dampFactor: {
+          type: Number,
+          default: 0.1
         },
-        dampedCurrent: {
-          x: 0,
-          y: 0
-        },
-        progress: {
-          x: 0,
-          y: 0
-        },
-        dampedProgress: {
-          x: 0,
-          y: 0
+        dampPrecision: {
+          type: Number,
+          default: 1e-3
         }
-      });
-      __publicField(this, "dampFactor", null);
-      __publicField(this, "dampPrecision", null);
+      }
+    };
+    __props = {
+      start: {
+        x: 0,
+        y: 0
+      },
+      end: {
+        x: 0,
+        y: 0
+      },
+      current: {
+        x: 0,
+        y: 0
+      },
+      dampedCurrent: {
+        x: 0,
+        y: 0
+      },
+      progress: {
+        x: 0,
+        y: 0
+      },
+      dampedProgress: {
+        x: 0,
+        y: 0
+      }
+    };
+    dampFactor = null;
+    dampPrecision = null;
+    constructor(element) {
+      super(element);
       const render = () => {
         scheduler.update(() => {
           const renderFn = this.__callMethod("scrolledInView", this.__props);
@@ -81,9 +89,8 @@ function withScrolledInView(BaseClass, options = {}) {
           }
         },
         ticked: () => {
-          var _a, _b;
-          const dampFactor = (_a = this.dampFactor) != null ? _a : this.$options.dampFactor;
-          const dampPrecision = (_b = this.dampFactor) != null ? _b : this.$options.dampFactor;
+          const dampFactor = this.dampFactor ?? this.$options.dampFactor;
+          const dampPrecision = this.dampFactor ?? this.$options.dampFactor;
           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) {
@@ -174,22 +181,9 @@ function withScrolledInView(BaseClass, options = {}) {
       );
     }
   }
-  __publicField(WithScrolledInView, "config", {
-    name: `${BaseClass.config.name}WithMountWhenInView`,
-    emits: ["scrolledInView"],
-    options: {
-      dampFactor: {
-        type: Number,
-        default: 0.1
-      },
-      dampPrecision: {
-        type: Number,
-        default: 1e-3
-      }
-    }
-  });
   return WithScrolledInView;
 }
 export {
   withScrolledInView
 };
+//# sourceMappingURL=withScrolledInView.js.map

package/decorators/withScrolledInView.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/decorators/withScrolledInView.ts"],
+  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { RafServiceProps, ScrollServiceProps, ResizeServiceProps } from '../services/index.js';\nimport { withMountWhenInView } from './withMountWhenInView.js';\nimport { damp, clamp, clamp01, getOffsetSizes, isFunction, useScheduler } from '../utils/index.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport interface WithScrolledInViewProps extends BaseProps {\n  $options: {\n    dampFactor: number;\n    dampPrecision: number;\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<\n    T extends BaseProps = BaseProps,\n  > extends withMountWhenInView(BaseClass, options)<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      },\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.dampFactor ?? this.$options.dampFactor;\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 sizes = options.useOffsetSizes\n        ? getOffsetSizes(this.$el)\n        : this.$el.getBoundingClientRect();\n\n      // Y axis\n      const yEnd = sizes.y + window.pageYOffset + sizes.height;\n      const yStart = yEnd - window.innerHeight - sizes.height;\n      const yCurrent = clamp(window.pageYOffset, yStart, yEnd);\n      const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));\n\n      // X axis\n      const xEnd = sizes.x + window.pageXOffset + sizes.width;\n      const xStart = xEnd - window.innerWidth - sizes.width;\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/decorators/withVue2.cjs

@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 
 // packages/js-toolkit/decorators/withVue2.ts
 var withVue2_exports = {};
@@ -29,13 +24,17 @@ __export(withVue2_exports, {
 module.exports = __toCommonJS(withVue2_exports);
 var import_utils = require("../utils/index.cjs");
 function withVue2(BaseClass, VueCtor) {
-  var _a, _b;
   class WithVue2 extends BaseClass {
+    static config = {
+      ...BaseClass.config,
+      name: `${BaseClass.config.name}WithVue`,
+      refs: [...BaseClass.config?.refs ?? [], "vue"]
+    };
+    $vue;
+    static vueConfig;
     constructor(element) {
-      var _a2;
       super(element);
-      __publicField(this, "$vue");
-      const vueConfig = (_a2 = this.vueConfig) != null ? _a2 : this.constructor.vueConfig;
+      const vueConfig = this.vueConfig ?? this.constructor.vueConfig;
       if (!vueConfig) {
         if (import_utils.isDev) {
           throw new Error("[withVue] You must define a `vueConfig` object.");
@@ -60,12 +59,7 @@ function withVue2(BaseClass, VueCtor) {
       });
     }
   }
-  __publicField(WithVue2, "config", {
-    ...BaseClass.config,
-    name: `${BaseClass.config.name}WithVue`,
-    refs: [...(_b = (_a = BaseClass.config) == null ? void 0 : _a.refs) != null ? _b : [], "vue"]
-  });
-  __publicField(WithVue2, "vueConfig");
   return WithVue2;
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=withVue2.cjs.map

package/decorators/withVue2.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/decorators/withVue2.ts"],
+  "sourcesContent": ["import type Vue from 'vue';\nimport type { ComponentOptions, VueConstructor } from 'vue';\nimport type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConfig, BaseProps } from '../Base/index.js';\nimport { isDev, isFunction } from '../utils/index.js';\n\nexport interface WithVue2Props extends BaseProps {\n  $refs: {\n    vue: HTMLElement;\n  };\n}\n\nexport interface WithVue2Interface extends BaseInterface {\n  $vue: Vue;\n}\n\n/**\n * withVue decorator.\n */\nexport function withVue2<S extends Base, T extends Vue = Vue>(\n  BaseClass: typeof Base,\n  VueCtor: VueConstructor,\n): BaseDecorator<WithVue2Interface, S, WithVue2Props> {\n  type VueConfig = ComponentOptions<T> & {\n    render: ComponentOptions<T>['render'];\n  };\n\n  /**\n   * Class.\n   */\n  class WithVue2 extends BaseClass {\n    static config:BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithVue`,\n      refs: [...(BaseClass.config?.refs ?? []), 'vue'],\n    };\n\n    $vue: Vue;\n\n    /**\n     * Vue app configuration.\n     */\n    static vueConfig: VueConfig;\n\n    constructor(element: HTMLElement) {\n      super(element);\n\n      // @ts-ignore\n      const vueConfig: VueConfig = this.vueConfig ?? this.constructor.vueConfig;\n\n      if (!vueConfig) {\n        if (isDev) {\n          throw new Error('[withVue] You must define a `vueConfig` object.');\n        }\n        return;\n      }\n\n      if (!isFunction(vueConfig.render)) {\n        if (isDev) {\n          throw new Error('[withVue] You must define a `render` function in vueConfig.');\n        }\n        return;\n      }\n\n      this.$vue = new VueCtor(vueConfig);\n\n      this.$on('mounted', () => {\n        if (!(this.$refs.vue instanceof HTMLElement)) {\n          throw new Error('[withVue] The `vue` refs must be a single HTMLElement.');\n        }\n\n        this.$vue.$mount(this.$refs.vue);\n      });\n\n      this.$on('destroyed', () => {\n        this.$vue.$destroy();\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithVue2;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAkC;AAe3B,SAAS,SACd,WACA,SACoD;AAQpD,QAAM,iBAAiB,UAAU;AAAA,IAC/B,OAAO,SAAoB;AAAA,MACzB,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,MAAM,CAAC,GAAI,UAAU,QAAQ,QAAQ,CAAC,GAAI,KAAK;AAAA,IACjD;AAAA,IAEA;AAAA,IAKA,OAAO;AAAA,IAEP,YAAY,SAAsB;AAChC,YAAM,OAAO;AAGb,YAAM,YAAuB,KAAK,aAAa,KAAK,YAAY;AAEhE,UAAI,CAAC,WAAW;AACd,YAAI,oBAAO;AACT,gBAAM,IAAI,MAAM,iDAAiD;AAAA,QACnE;AACA;AAAA,MACF;AAEA,UAAI,KAAC,yBAAW,UAAU,MAAM,GAAG;AACjC,YAAI,oBAAO;AACT,gBAAM,IAAI,MAAM,6DAA6D;AAAA,QAC/E;AACA;AAAA,MACF;AAEA,WAAK,OAAO,IAAI,QAAQ,SAAS;AAEjC,WAAK,IAAI,WAAW,MAAM;AACxB,YAAI,EAAE,KAAK,MAAM,eAAe,cAAc;AAC5C,gBAAM,IAAI,MAAM,wDAAwD;AAAA,QAC1E;AAEA,aAAK,KAAK,OAAO,KAAK,MAAM,GAAG;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,KAAK,SAAS;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
+  "names": []
+}

package/decorators/withVue2.js

@@ -1,18 +1,16 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 import { isDev, isFunction } from "../utils/index.js";
 function withVue2(BaseClass, VueCtor) {
-  var _a, _b;
   class WithVue2 extends BaseClass {
+    static config = {
+      ...BaseClass.config,
+      name: `${BaseClass.config.name}WithVue`,
+      refs: [...BaseClass.config?.refs ?? [], "vue"]
+    };
+    $vue;
+    static vueConfig;
     constructor(element) {
-      var _a2;
       super(element);
-      __publicField(this, "$vue");
-      const vueConfig = (_a2 = this.vueConfig) != null ? _a2 : this.constructor.vueConfig;
+      const vueConfig = this.vueConfig ?? this.constructor.vueConfig;
       if (!vueConfig) {
         if (isDev) {
           throw new Error("[withVue] You must define a `vueConfig` object.");
@@ -37,14 +35,9 @@ function withVue2(BaseClass, VueCtor) {
       });
     }
   }
-  __publicField(WithVue2, "config", {
-    ...BaseClass.config,
-    name: `${BaseClass.config.name}WithVue`,
-    refs: [...(_b = (_a = BaseClass.config) == null ? void 0 : _a.refs) != null ? _b : [], "vue"]
-  });
-  __publicField(WithVue2, "vueConfig");
   return WithVue2;
 }
 export {
   withVue2
 };
+//# sourceMappingURL=withVue2.js.map

package/decorators/withVue2.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/decorators/withVue2.ts"],
+  "sourcesContent": ["import type Vue from 'vue';\nimport type { ComponentOptions, VueConstructor } from 'vue';\nimport type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConfig, BaseProps } from '../Base/index.js';\nimport { isDev, isFunction } from '../utils/index.js';\n\nexport interface WithVue2Props extends BaseProps {\n  $refs: {\n    vue: HTMLElement;\n  };\n}\n\nexport interface WithVue2Interface extends BaseInterface {\n  $vue: Vue;\n}\n\n/**\n * withVue decorator.\n */\nexport function withVue2<S extends Base, T extends Vue = Vue>(\n  BaseClass: typeof Base,\n  VueCtor: VueConstructor,\n): BaseDecorator<WithVue2Interface, S, WithVue2Props> {\n  type VueConfig = ComponentOptions<T> & {\n    render: ComponentOptions<T>['render'];\n  };\n\n  /**\n   * Class.\n   */\n  class WithVue2 extends BaseClass {\n    static config:BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithVue`,\n      refs: [...(BaseClass.config?.refs ?? []), 'vue'],\n    };\n\n    $vue: Vue;\n\n    /**\n     * Vue app configuration.\n     */\n    static vueConfig: VueConfig;\n\n    constructor(element: HTMLElement) {\n      super(element);\n\n      // @ts-ignore\n      const vueConfig: VueConfig = this.vueConfig ?? this.constructor.vueConfig;\n\n      if (!vueConfig) {\n        if (isDev) {\n          throw new Error('[withVue] You must define a `vueConfig` object.');\n        }\n        return;\n      }\n\n      if (!isFunction(vueConfig.render)) {\n        if (isDev) {\n          throw new Error('[withVue] You must define a `render` function in vueConfig.');\n        }\n        return;\n      }\n\n      this.$vue = new VueCtor(vueConfig);\n\n      this.$on('mounted', () => {\n        if (!(this.$refs.vue instanceof HTMLElement)) {\n          throw new Error('[withVue] The `vue` refs must be a single HTMLElement.');\n        }\n\n        this.$vue.$mount(this.$refs.vue);\n      });\n\n      this.$on('destroyed', () => {\n        this.$vue.$destroy();\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithVue2;\n}\n"],
+  "mappings": "AAIA,SAAS,OAAO,kBAAkB;AAe3B,SAAS,SACd,WACA,SACoD;AAQpD,QAAM,iBAAiB,UAAU;AAAA,IAC/B,OAAO,SAAoB;AAAA,MACzB,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,MAAM,CAAC,GAAI,UAAU,QAAQ,QAAQ,CAAC,GAAI,KAAK;AAAA,IACjD;AAAA,IAEA;AAAA,IAKA,OAAO;AAAA,IAEP,YAAY,SAAsB;AAChC,YAAM,OAAO;AAGb,YAAM,YAAuB,KAAK,aAAa,KAAK,YAAY;AAEhE,UAAI,CAAC,WAAW;AACd,YAAI,OAAO;AACT,gBAAM,IAAI,MAAM,iDAAiD;AAAA,QACnE;AACA;AAAA,MACF;AAEA,UAAI,CAAC,WAAW,UAAU,MAAM,GAAG;AACjC,YAAI,OAAO;AACT,gBAAM,IAAI,MAAM,6DAA6D;AAAA,QAC/E;AACA;AAAA,MACF;AAEA,WAAK,OAAO,IAAI,QAAQ,SAAS;AAEjC,WAAK,IAAI,WAAW,MAAM;AACxB,YAAI,EAAE,KAAK,MAAM,eAAe,cAAc;AAC5C,gBAAM,IAAI,MAAM,wDAAwD;AAAA,QAC1E;AAEA,aAAK,KAAK,OAAO,KAAK,MAAM,GAAG;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,KAAK,SAAS;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
+  "names": []
+}

package/helpers/createApp.cjs

@@ -50,3 +50,4 @@ function createApp(App, rootElement = document.body) {
   };
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=createApp.cjs.map

package/helpers/createApp.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/createApp.ts"],
+  "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\n\n/**\n * Instantiate and mount the given component on the given root element when the page has been loaded\n * and return a function to use the app instance when it is ready.\n */\nexport default function createApp<\n  S extends BaseConstructor<Base>,\n  T extends BaseProps = BaseProps,\n>(App: S, rootElement: HTMLElement = document.body): () => Promise<S & Base<T>> {\n  let isLoaded = document.readyState === 'complete';\n  let app: S & Base<T>;\n\n  if (!isLoaded) {\n    document.addEventListener('readystatechange', () => {\n      if (document.readyState === 'complete') {\n        app = (new App(rootElement) as S & Base<T>).$mount();\n        isLoaded = true;\n      }\n    });\n  } else {\n    app = (new App(rootElement) as S & Base<T>).$mount();\n  }\n\n  const promise:Promise<S & Base<T>> = new Promise((resolve) => {\n    document.addEventListener('readystatechange', () => {\n      if (document.readyState === 'complete') {\n        setTimeout(() => resolve(app), 0);\n      }\n    });\n  });\n\n  return function useApp() {\n    if (isLoaded) {\n      return Promise.resolve(app);\n    }\n\n    return promise;\n  };\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMe,SAAR,UAGL,KAAQ,cAA2B,SAAS,MAAkC;AAC9E,MAAI,WAAW,SAAS,eAAe;AACvC,MAAI;AAEJ,MAAI,CAAC,UAAU;AACb,aAAS,iBAAiB,oBAAoB,MAAM;AAClD,UAAI,SAAS,eAAe,YAAY;AACtC,cAAO,IAAI,IAAI,WAAW,EAAkB,OAAO;AACnD,mBAAW;AAAA,MACb;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,UAAO,IAAI,IAAI,WAAW,EAAkB,OAAO;AAAA,EACrD;AAEA,QAAM,UAA+B,IAAI,QAAQ,CAAC,YAAY;AAC5D,aAAS,iBAAiB,oBAAoB,MAAM;AAClD,UAAI,SAAS,eAAe,YAAY;AACtC,mBAAW,MAAM,QAAQ,GAAG,GAAG,CAAC;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,SAAO,SAAS,SAAS;AACvB,QAAI,UAAU;AACZ,aAAO,QAAQ,QAAQ,GAAG;AAAA,IAC5B;AAEA,WAAO;AAAA,EACT;AACF;",
+  "names": []
+}

package/helpers/createApp.js

@@ -28,3 +28,4 @@ function createApp(App, rootElement = document.body) {
 export {
   createApp as default
 };
+//# sourceMappingURL=createApp.js.map

package/helpers/createApp.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/createApp.ts"],
+  "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\n\n/**\n * Instantiate and mount the given component on the given root element when the page has been loaded\n * and return a function to use the app instance when it is ready.\n */\nexport default function createApp<\n  S extends BaseConstructor<Base>,\n  T extends BaseProps = BaseProps,\n>(App: S, rootElement: HTMLElement = document.body): () => Promise<S & Base<T>> {\n  let isLoaded = document.readyState === 'complete';\n  let app: S & Base<T>;\n\n  if (!isLoaded) {\n    document.addEventListener('readystatechange', () => {\n      if (document.readyState === 'complete') {\n        app = (new App(rootElement) as S & Base<T>).$mount();\n        isLoaded = true;\n      }\n    });\n  } else {\n    app = (new App(rootElement) as S & Base<T>).$mount();\n  }\n\n  const promise:Promise<S & Base<T>> = new Promise((resolve) => {\n    document.addEventListener('readystatechange', () => {\n      if (document.readyState === 'complete') {\n        setTimeout(() => resolve(app), 0);\n      }\n    });\n  });\n\n  return function useApp() {\n    if (isLoaded) {\n      return Promise.resolve(app);\n    }\n\n    return promise;\n  };\n}\n"],
+  "mappings": "AAMe,SAAR,UAGL,KAAQ,cAA2B,SAAS,MAAkC;AAC9E,MAAI,WAAW,SAAS,eAAe;AACvC,MAAI;AAEJ,MAAI,CAAC,UAAU;AACb,aAAS,iBAAiB,oBAAoB,MAAM;AAClD,UAAI,SAAS,eAAe,YAAY;AACtC,cAAO,IAAI,IAAI,WAAW,EAAkB,OAAO;AACnD,mBAAW;AAAA,MACb;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,UAAO,IAAI,IAAI,WAAW,EAAkB,OAAO;AAAA,EACrD;AAEA,QAAM,UAA+B,IAAI,QAAQ,CAAC,YAAY;AAC5D,aAAS,iBAAiB,oBAAoB,MAAM;AAClD,UAAI,SAAS,eAAe,YAAY;AACtC,mBAAW,MAAM,QAAQ,GAAG,GAAG,CAAC;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,SAAO,SAAS,SAAS;AACvB,QAAI,UAAU;AACZ,aAAO,QAAQ,QAAQ,GAAG;AAAA,IAC5B;AAEA,WAAO;AAAA,EACT;AACF;",
+  "names": []
+}

package/helpers/getClosestParent.cjs

@@ -46,3 +46,4 @@ function getClosestParent(childInstance, ParentConstructor) {
   return parentEl ? (0, import_getInstanceFromElement.default)(parentEl, ParentConstructor) : null;
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=getClosestParent.cjs.map

package/helpers/getClosestParent.cjs.map

@@ -0,0 +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>(childInstance:Base, ParentConstructor:T) {\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,iBAA6D,eAAoB,mBAAqB;AAC3G,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;",
+  "names": ["getInstanceFromElement"]
+}

package/helpers/getClosestParent.js

@@ -18,3 +18,4 @@ function getClosestParent(childInstance, ParentConstructor) {
 export {
   getClosestParent as default
 };
+//# sourceMappingURL=getClosestParent.js.map

package/helpers/getClosestParent.js.map

@@ -0,0 +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>(childInstance:Base, ParentConstructor:T) {\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,iBAA6D,eAAoB,mBAAqB;AAC3G,QAAM,WAAW;AAAA,IACf,cAAc;AAAA,IACd,CAAC,YAAY,CAAC,uBAAuB,SAAS,iBAAiB;AAAA,EACjE;AAEA,SAAO,WAAW,uBAAuB,UAAU,iBAAiB,IAAI;AAC1E;",
+  "names": []
+}

package/helpers/getDirectChildren.cjs

@@ -44,3 +44,4 @@ function isDirectChild(parentInstance, parentName, childrenName, childInstance)
   return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=getDirectChildren.cjs.map

package/helpers/getDirectChildren.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/getDirectChildren.ts"],
+  "sourcesContent": ["import { Base, BaseProps } from '../Base/index.js';\nimport { isArray } from '../utils/index.js';\n\n/**\n * Get direct children from a parent when working with nested components.\n *\n * @template {Base} T\n * @param   {Base} parentInstance\n * @param   {string} parentName\n * @param   {string} childrenName\n * @returns {T[]}\n */\nexport function getDirectChildren<T extends Base = Base>(\n  parentInstance: Base,\n  parentName: string,\n  childrenName: string,\n): T[] {\n  const children = parentInstance.$children[childrenName] as Base<BaseProps>[];\n  const nestedParents = parentInstance.$children[parentName] as Base<BaseProps>[];\n\n  if (!isArray(children)) {\n    return [];\n  }\n\n  if (!isArray(nestedParents) || nestedParents.length <= 0) {\n    return children as T[];\n  }\n\n  return [...children].filter((child) =>\n    [...nestedParents].every((nestedParent) => {\n      const nestedChildren = nestedParent.$children[childrenName] as Base<BaseProps>[];\n      /* istanbul ignore next */\n      return isArray(nestedChildren) ? !nestedChildren.includes(child) : true;\n    }),\n  ) as T[];\n}\n\n/**\n * Test if a component instance is a direct child from the given component.\n *\n * @param   {Base}    parentInstance\n * @param   {string}  parentName\n * @param   {string}  childrenName\n * @param   {Base}    childInstance\n * @returns {boolean}\n */\nexport function isDirectChild(parentInstance, parentName, childrenName, childInstance) {\n  return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwB;AAWjB,SAAS,kBACd,gBACA,YACA,cACK;AACL,QAAM,WAAW,eAAe,UAAU;AAC1C,QAAM,gBAAgB,eAAe,UAAU;AAE/C,MAAI,KAAC,sBAAQ,QAAQ,GAAG;AACtB,WAAO,CAAC;AAAA,EACV;AAEA,MAAI,KAAC,sBAAQ,aAAa,KAAK,cAAc,UAAU,GAAG;AACxD,WAAO;AAAA,EACT;AAEA,SAAO,CAAC,GAAG,QAAQ,EAAE;AAAA,IAAO,CAAC,UAC3B,CAAC,GAAG,aAAa,EAAE,MAAM,CAAC,iBAAiB;AACzC,YAAM,iBAAiB,aAAa,UAAU;AAE9C,iBAAO,sBAAQ,cAAc,IAAI,CAAC,eAAe,SAAS,KAAK,IAAI;AAAA,IACrE,CAAC;AAAA,EACH;AACF;AAWO,SAAS,cAAc,gBAAgB,YAAY,cAAc,eAAe;AACrF,SAAO,kBAAkB,gBAAgB,YAAY,YAAY,EAAE,SAAS,aAAa;AAC3F;",
+  "names": []
+}

package/helpers/getDirectChildren.js

@@ -22,3 +22,4 @@ export {
   getDirectChildren,
   isDirectChild
 };
+//# sourceMappingURL=getDirectChildren.js.map

package/helpers/getDirectChildren.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/getDirectChildren.ts"],
+  "sourcesContent": ["import { Base, BaseProps } from '../Base/index.js';\nimport { isArray } from '../utils/index.js';\n\n/**\n * Get direct children from a parent when working with nested components.\n *\n * @template {Base} T\n * @param   {Base} parentInstance\n * @param   {string} parentName\n * @param   {string} childrenName\n * @returns {T[]}\n */\nexport function getDirectChildren<T extends Base = Base>(\n  parentInstance: Base,\n  parentName: string,\n  childrenName: string,\n): T[] {\n  const children = parentInstance.$children[childrenName] as Base<BaseProps>[];\n  const nestedParents = parentInstance.$children[parentName] as Base<BaseProps>[];\n\n  if (!isArray(children)) {\n    return [];\n  }\n\n  if (!isArray(nestedParents) || nestedParents.length <= 0) {\n    return children as T[];\n  }\n\n  return [...children].filter((child) =>\n    [...nestedParents].every((nestedParent) => {\n      const nestedChildren = nestedParent.$children[childrenName] as Base<BaseProps>[];\n      /* istanbul ignore next */\n      return isArray(nestedChildren) ? !nestedChildren.includes(child) : true;\n    }),\n  ) as T[];\n}\n\n/**\n * Test if a component instance is a direct child from the given component.\n *\n * @param   {Base}    parentInstance\n * @param   {string}  parentName\n * @param   {string}  childrenName\n * @param   {Base}    childInstance\n * @returns {boolean}\n */\nexport function isDirectChild(parentInstance, parentName, childrenName, childInstance) {\n  return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);\n}\n"],
+  "mappings": "AACA,SAAS,eAAe;AAWjB,SAAS,kBACd,gBACA,YACA,cACK;AACL,QAAM,WAAW,eAAe,UAAU;AAC1C,QAAM,gBAAgB,eAAe,UAAU;AAE/C,MAAI,CAAC,QAAQ,QAAQ,GAAG;AACtB,WAAO,CAAC;AAAA,EACV;AAEA,MAAI,CAAC,QAAQ,aAAa,KAAK,cAAc,UAAU,GAAG;AACxD,WAAO;AAAA,EACT;AAEA,SAAO,CAAC,GAAG,QAAQ,EAAE;AAAA,IAAO,CAAC,UAC3B,CAAC,GAAG,aAAa,EAAE,MAAM,CAAC,iBAAiB;AACzC,YAAM,iBAAiB,aAAa,UAAU;AAE9C,aAAO,QAAQ,cAAc,IAAI,CAAC,eAAe,SAAS,KAAK,IAAI;AAAA,IACrE,CAAC;AAAA,EACH;AACF;AAWO,SAAS,cAAc,gBAAgB,YAAY,cAAc,eAAe;AACrF,SAAO,kBAAkB,gBAAgB,YAAY,YAAY,EAAE,SAAS,aAAa;AAC3F;",
+  "names": []
+}

package/helpers/getInstanceFromElement.cjs

@@ -29,3 +29,4 @@ function getInstanceFromElement(element, Constructor) {
   return element.__base__.get(Constructor);
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=getInstanceFromElement.cjs.map

package/helpers/getInstanceFromElement.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/getInstanceFromElement.ts"],
+  "sourcesContent": ["import type { BaseConstructor, BaseEl } from '../Base/index.js';\n\n/**\n * Get a component instance from a DOM element.\n */\nexport default function getInstanceFromElement<T extends BaseConstructor>(\n  element: BaseEl,\n  Constructor: T,\n):InstanceType<T> | null {\n  if (!element.__base__ || !element.__base__.has(Constructor)) {\n    return null;\n  }\n\n  return element.__base__.get(Constructor) as InstanceType<T>;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKe,SAAR,uBACL,SACA,aACuB;AACvB,MAAI,CAAC,QAAQ,YAAY,CAAC,QAAQ,SAAS,IAAI,WAAW,GAAG;AAC3D,WAAO;AAAA,EACT;AAEA,SAAO,QAAQ,SAAS,IAAI,WAAW;AACzC;",
+  "names": []
+}

package/helpers/getInstanceFromElement.js

@@ -7,3 +7,4 @@ function getInstanceFromElement(element, Constructor) {
 export {
   getInstanceFromElement as default
 };
+//# sourceMappingURL=getInstanceFromElement.js.map

package/helpers/getInstanceFromElement.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/getInstanceFromElement.ts"],
+  "sourcesContent": ["import type { BaseConstructor, BaseEl } from '../Base/index.js';\n\n/**\n * Get a component instance from a DOM element.\n */\nexport default function getInstanceFromElement<T extends BaseConstructor>(\n  element: BaseEl,\n  Constructor: T,\n):InstanceType<T> | null {\n  if (!element.__base__ || !element.__base__.has(Constructor)) {\n    return null;\n  }\n\n  return element.__base__.get(Constructor) as InstanceType<T>;\n}\n"],
+  "mappings": "AAKe,SAAR,uBACL,SACA,aACuB;AACvB,MAAI,CAAC,QAAQ,YAAY,CAAC,QAAQ,SAAS,IAAI,WAAW,GAAG;AAC3D,WAAO;AAAA,EACT;AAEA,SAAO,QAAQ,SAAS,IAAI,WAAW;AACzC;",
+  "names": []
+}

package/helpers/importOnInteraction.cjs

@@ -34,7 +34,7 @@ function importOnInteraction(fn, nameOrSelectorOrElement, events, parent) {
     });
   };
   return new Promise((resolve) => {
-    const elements = (0, import_utils.getTargetElements)(nameOrSelectorOrElement, parent == null ? void 0 : parent.$el);
+    const elements = (0, import_utils.getTargetElements)(nameOrSelectorOrElement, parent?.$el);
     const eventListenerOptions = {
       capture: true,
       passive: true,
@@ -51,3 +51,4 @@ function importOnInteraction(fn, nameOrSelectorOrElement, events, parent) {
   });
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=importOnInteraction.cjs.map

package/helpers/importOnInteraction.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/importOnInteraction.ts"],
+  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getTargetElements } from './utils.js';\nimport { isString } from '../utils/index.js';\n\n/**\n * Import a component on an interaction.\n *\n * @template {BaseConstructor} [T=BaseConstructor]\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {string|string[]} events\n *   The events to listen to to trigger the import.\n * @param {Base} [parent]\n *   The parent component.\n * @returns {Promise<InstanceType<T>>}\n */\nexport default function importOnInteraction<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default:T }>,\n  nameOrSelectorOrElement:string | HTMLElement | HTMLElement[],\n  events:string | string[],\n  parent?: Base,\n):Promise<T> {\n  const normalizedEvents = isString(events) ? [events] : events;\n\n  let ResolvedClass;\n\n  const resolver = (resolve) => {\n    fn().then((module) => {\n      ResolvedClass = 'default' in module ? module.default : module;\n      resolve(ResolvedClass);\n    });\n  };\n\n  return new Promise((resolve) => {\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    const eventListenerOptions = {\n      capture: true,\n      passive: true,\n      once: true,\n    };\n    const handler = () => {\n      resolver(resolve);\n    };\n\n    elements.forEach((element) => {\n      normalizedEvents.forEach((event) => {\n        element.addEventListener(event, handler, eventListenerOptions);\n      });\n    });\n  });\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAClC,IAAAA,gBAAyB;AAgBV,SAAR,oBACL,IACA,yBACA,QACA,QACW;AACX,QAAM,uBAAmB,wBAAS,MAAM,IAAI,CAAC,MAAM,IAAI;AAEvD,MAAI;AAEJ,QAAM,WAAW,CAAC,YAAY;AAC5B,OAAG,EAAE,KAAK,CAACC,YAAW;AACpB,sBAAgB,aAAaA,UAASA,QAAO,UAAUA;AACvD,cAAQ,aAAa;AAAA,IACvB,CAAC;AAAA,EACH;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,eAAW,gCAAkB,yBAAyB,QAAQ,GAAG;AACvE,UAAM,uBAAuB;AAAA,MAC3B,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AACA,UAAM,UAAU,MAAM;AACpB,eAAS,OAAO;AAAA,IAClB;AAEA,aAAS,QAAQ,CAAC,YAAY;AAC5B,uBAAiB,QAAQ,CAAC,UAAU;AAClC,gBAAQ,iBAAiB,OAAO,SAAS,oBAAoB;AAAA,MAC/D,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;",
+  "names": ["import_utils", "module"]
+}

package/helpers/importOnInteraction.js

@@ -10,7 +10,7 @@ function importOnInteraction(fn, nameOrSelectorOrElement, events, parent) {
     });
   };
   return new Promise((resolve) => {
-    const elements = getTargetElements(nameOrSelectorOrElement, parent == null ? void 0 : parent.$el);
+    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);
     const eventListenerOptions = {
       capture: true,
       passive: true,
@@ -29,3 +29,4 @@ function importOnInteraction(fn, nameOrSelectorOrElement, events, parent) {
 export {
   importOnInteraction as default
 };
+//# sourceMappingURL=importOnInteraction.js.map

package/helpers/importOnInteraction.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/importOnInteraction.ts"],
+  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getTargetElements } from './utils.js';\nimport { isString } from '../utils/index.js';\n\n/**\n * Import a component on an interaction.\n *\n * @template {BaseConstructor} [T=BaseConstructor]\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {string|string[]} events\n *   The events to listen to to trigger the import.\n * @param {Base} [parent]\n *   The parent component.\n * @returns {Promise<InstanceType<T>>}\n */\nexport default function importOnInteraction<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default:T }>,\n  nameOrSelectorOrElement:string | HTMLElement | HTMLElement[],\n  events:string | string[],\n  parent?: Base,\n):Promise<T> {\n  const normalizedEvents = isString(events) ? [events] : events;\n\n  let ResolvedClass;\n\n  const resolver = (resolve) => {\n    fn().then((module) => {\n      ResolvedClass = 'default' in module ? module.default : module;\n      resolve(ResolvedClass);\n    });\n  };\n\n  return new Promise((resolve) => {\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    const eventListenerOptions = {\n      capture: true,\n      passive: true,\n      once: true,\n    };\n    const handler = () => {\n      resolver(resolve);\n    };\n\n    elements.forEach((element) => {\n      normalizedEvents.forEach((event) => {\n        element.addEventListener(event, handler, eventListenerOptions);\n      });\n    });\n  });\n}\n"],
+  "mappings": "AACA,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AAgBV,SAAR,oBACL,IACA,yBACA,QACA,QACW;AACX,QAAM,mBAAmB,SAAS,MAAM,IAAI,CAAC,MAAM,IAAI;AAEvD,MAAI;AAEJ,QAAM,WAAW,CAAC,YAAY;AAC5B,OAAG,EAAE,KAAK,CAAC,WAAW;AACpB,sBAAgB,aAAa,SAAS,OAAO,UAAU;AACvD,cAAQ,aAAa;AAAA,IACvB,CAAC;AAAA,EACH;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,WAAW,kBAAkB,yBAAyB,QAAQ,GAAG;AACvE,UAAM,uBAAuB;AAAA,MAC3B,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AACA,UAAM,UAAU,MAAM;AACpB,eAAS,OAAO;AAAA,IAClB;AAEA,aAAS,QAAQ,CAAC,YAAY;AAC5B,uBAAiB,QAAQ,CAAC,UAAU;AAClC,gBAAQ,iBAAiB,OAAO,SAAS,oBAAoB;AAAA,MAC/D,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;",
+  "names": []
+}

package/helpers/importWhenIdle.cjs

@@ -48,3 +48,4 @@ function importWhenIdle(fn, { timeout = 1 } = {}) {
   });
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=importWhenIdle.cjs.map

package/helpers/importWhenIdle.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/importWhenIdle.ts"],
+  "sourcesContent": ["import type { BaseConstructor } from '../Base/index.js';\n\ntype ImportWhenIdleOptions = {\n  timeout?: number;\n};\n\n/**\n * Import a component when user is idle.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {ImportWhenIdleOptions} [options]\n *   The time to wait before triggering the callback if never idle.\n * @returns {Promise<T>}\n */\nexport default function importWhenIdle<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  { timeout = 1 }: ImportWhenIdleOptions = {},\n):Promise<T> {\n  let ResolvedClass;\n\n  const resolver = (resolve) => {\n    fn().then((module) => {\n      ResolvedClass = 'default' in module ? module.default : module;\n      resolve(ResolvedClass);\n    });\n  };\n\n  return new Promise((resolve) => {\n    if (!('requestIdleCallback' in window)) {\n      setTimeout(() => {\n        resolver(resolve);\n      }, timeout);\n    } else {\n      window.requestIdleCallback(\n        () => {\n          setTimeout(() => {\n            resolver(resolve);\n          }, 0);\n        },\n        { timeout },\n      );\n    }\n  });\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBe,SAAR,eACL,IACA,EAAE,UAAU,EAAE,IAA2B,CAAC,GAC/B;AACX,MAAI;AAEJ,QAAM,WAAW,CAAC,YAAY;AAC5B,OAAG,EAAE,KAAK,CAACA,YAAW;AACpB,sBAAgB,aAAaA,UAASA,QAAO,UAAUA;AACvD,cAAQ,aAAa;AAAA,IACvB,CAAC;AAAA,EACH;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,QAAI,EAAE,yBAAyB,SAAS;AACtC,iBAAW,MAAM;AACf,iBAAS,OAAO;AAAA,MAClB,GAAG,OAAO;AAAA,IACZ,OAAO;AACL,aAAO;AAAA,QACL,MAAM;AACJ,qBAAW,MAAM;AACf,qBAAS,OAAO;AAAA,UAClB,GAAG,CAAC;AAAA,QACN;AAAA,QACA,EAAE,QAAQ;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
+  "names": ["module"]
+}

package/helpers/importWhenIdle.js

@@ -26,3 +26,4 @@ function importWhenIdle(fn, { timeout = 1 } = {}) {
 export {
   importWhenIdle as default
 };
+//# sourceMappingURL=importWhenIdle.js.map

package/helpers/importWhenIdle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/importWhenIdle.ts"],
+  "sourcesContent": ["import type { BaseConstructor } from '../Base/index.js';\n\ntype ImportWhenIdleOptions = {\n  timeout?: number;\n};\n\n/**\n * Import a component when user is idle.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {ImportWhenIdleOptions} [options]\n *   The time to wait before triggering the callback if never idle.\n * @returns {Promise<T>}\n */\nexport default function importWhenIdle<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  { timeout = 1 }: ImportWhenIdleOptions = {},\n):Promise<T> {\n  let ResolvedClass;\n\n  const resolver = (resolve) => {\n    fn().then((module) => {\n      ResolvedClass = 'default' in module ? module.default : module;\n      resolve(ResolvedClass);\n    });\n  };\n\n  return new Promise((resolve) => {\n    if (!('requestIdleCallback' in window)) {\n      setTimeout(() => {\n        resolver(resolve);\n      }, timeout);\n    } else {\n      window.requestIdleCallback(\n        () => {\n          setTimeout(() => {\n            resolver(resolve);\n          }, 0);\n        },\n        { timeout },\n      );\n    }\n  });\n}\n"],
+  "mappings": "AAgBe,SAAR,eACL,IACA,EAAE,UAAU,EAAE,IAA2B,CAAC,GAC/B;AACX,MAAI;AAEJ,QAAM,WAAW,CAAC,YAAY;AAC5B,OAAG,EAAE,KAAK,CAAC,WAAW;AACpB,sBAAgB,aAAa,SAAS,OAAO,UAAU;AACvD,cAAQ,aAAa;AAAA,IACvB,CAAC;AAAA,EACH;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,QAAI,EAAE,yBAAyB,SAAS;AACtC,iBAAW,MAAM;AACf,iBAAS,OAAO;AAAA,MAClB,GAAG,OAAO;AAAA,IACZ,OAAO;AACL,aAAO;AAAA,QACL,MAAM;AACJ,qBAAW,MAAM;AACf,qBAAS,OAAO;AAAA,UAClB,GAAG,CAAC;AAAA,QACN;AAAA,QACA,EAAE,QAAQ;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
+  "names": []
+}

package/helpers/importWhenVisible.cjs

@@ -44,8 +44,9 @@ function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions
         }, 0);
       }
     }, observerOptions);
-    const elements = (0, import_utils.getTargetElements)(nameOrSelectorOrElement, parent == null ? void 0 : parent.$el);
+    const elements = (0, import_utils.getTargetElements)(nameOrSelectorOrElement, parent?.$el);
     elements.forEach((element) => observer.observe(element));
   });
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=importWhenVisible.cjs.map

package/helpers/importWhenVisible.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/importWhenVisible.ts"],
+  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getTargetElements } from './utils.js';\nimport { isFunction } from '../utils/index.js';\n\n/**\n * Import a component when it is visible.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {Base} [parent]\n *   The parent component.\n * @param {IntersectionObserverInit} [observerOptions]\n *   Options for the `IntersectionObserver` instance.\n * @returns {Promise<T>}\n */\nexport default function importWhenVisible<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],\n  parent?: Base,\n  observerOptions: IntersectionObserverInit = {},\n): Promise<T> {\n  let ResolvedClass;\n\n  const resolver = (resolve, cb) => {\n    fn().then((module) => {\n      ResolvedClass = 'default' in module ? module.default : module;\n      resolve(ResolvedClass);\n\n      if (isFunction(cb)) {\n        cb();\n      }\n    });\n  };\n\n  return new Promise((resolve) => {\n    const observer = new IntersectionObserver((entries) => {\n      const someEntriesAreVisible = entries.some((entry) => entry.isIntersecting);\n      if (someEntriesAreVisible) {\n        setTimeout(() => {\n          resolver(resolve, () => observer.disconnect());\n        }, 0);\n      }\n    }, observerOptions);\n\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    elements.forEach((element) => observer.observe(element));\n  });\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAClC,IAAAA,gBAA2B;AAgBZ,SAAR,kBACL,IACA,yBACA,QACA,kBAA4C,CAAC,GACjC;AACZ,MAAI;AAEJ,QAAM,WAAW,CAAC,SAAS,OAAO;AAChC,OAAG,EAAE,KAAK,CAACC,YAAW;AACpB,sBAAgB,aAAaA,UAASA,QAAO,UAAUA;AACvD,cAAQ,aAAa;AAErB,cAAI,0BAAW,EAAE,GAAG;AAClB,WAAG;AAAA,MACL;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACrD,YAAM,wBAAwB,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc;AAC1E,UAAI,uBAAuB;AACzB,mBAAW,MAAM;AACf,mBAAS,SAAS,MAAM,SAAS,WAAW,CAAC;AAAA,QAC/C,GAAG,CAAC;AAAA,MACN;AAAA,IACF,GAAG,eAAe;AAElB,UAAM,eAAW,gCAAkB,yBAAyB,QAAQ,GAAG;AACvE,aAAS,QAAQ,CAAC,YAAY,SAAS,QAAQ,OAAO,CAAC;AAAA,EACzD,CAAC;AACH;",
+  "names": ["import_utils", "module"]
+}

package/helpers/importWhenVisible.js

@@ -20,10 +20,11 @@ function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions
         }, 0);
       }
     }, observerOptions);
-    const elements = getTargetElements(nameOrSelectorOrElement, parent == null ? void 0 : parent.$el);
+    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);
     elements.forEach((element) => observer.observe(element));
   });
 }
 export {
   importWhenVisible as default
 };
+//# sourceMappingURL=importWhenVisible.js.map

package/helpers/importWhenVisible.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/importWhenVisible.ts"],
+  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getTargetElements } from './utils.js';\nimport { isFunction } from '../utils/index.js';\n\n/**\n * Import a component when it is visible.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {Base} [parent]\n *   The parent component.\n * @param {IntersectionObserverInit} [observerOptions]\n *   Options for the `IntersectionObserver` instance.\n * @returns {Promise<T>}\n */\nexport default function importWhenVisible<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],\n  parent?: Base,\n  observerOptions: IntersectionObserverInit = {},\n): Promise<T> {\n  let ResolvedClass;\n\n  const resolver = (resolve, cb) => {\n    fn().then((module) => {\n      ResolvedClass = 'default' in module ? module.default : module;\n      resolve(ResolvedClass);\n\n      if (isFunction(cb)) {\n        cb();\n      }\n    });\n  };\n\n  return new Promise((resolve) => {\n    const observer = new IntersectionObserver((entries) => {\n      const someEntriesAreVisible = entries.some((entry) => entry.isIntersecting);\n      if (someEntriesAreVisible) {\n        setTimeout(() => {\n          resolver(resolve, () => observer.disconnect());\n        }, 0);\n      }\n    }, observerOptions);\n\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    elements.forEach((element) => observer.observe(element));\n  });\n}\n"],
+  "mappings": "AACA,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAgBZ,SAAR,kBACL,IACA,yBACA,QACA,kBAA4C,CAAC,GACjC;AACZ,MAAI;AAEJ,QAAM,WAAW,CAAC,SAAS,OAAO;AAChC,OAAG,EAAE,KAAK,CAAC,WAAW;AACpB,sBAAgB,aAAa,SAAS,OAAO,UAAU;AACvD,cAAQ,aAAa;AAErB,UAAI,WAAW,EAAE,GAAG;AAClB,WAAG;AAAA,MACL;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACrD,YAAM,wBAAwB,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc;AAC1E,UAAI,uBAAuB;AACzB,mBAAW,MAAM;AACf,mBAAS,SAAS,MAAM,SAAS,WAAW,CAAC;AAAA,QAC/C,GAAG,CAAC;AAAA,MACN;AAAA,IACF,GAAG,eAAe;AAElB,UAAM,WAAW,kBAAkB,yBAAyB,QAAQ,GAAG;AACvE,aAAS,QAAQ,CAAC,YAAY,SAAS,QAAQ,OAAO,CAAC;AAAA,EACzD,CAAC;AACH;",
+  "names": []
+}

package/helpers/index.cjs

@@ -42,3 +42,4 @@ var import_importOnInteraction = __toESM(require("./importOnInteraction.cjs"), 1
 var import_importWhenIdle = __toESM(require("./importWhenIdle.cjs"), 1);
 var import_importWhenVisible = __toESM(require("./importWhenVisible.cjs"), 1);
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/helpers/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/index.ts"],
+  "sourcesContent": ["export * from './getDirectChildren.js';\nexport { default as createApp } from './createApp.js';\nexport { default as getClosestParent } from './getClosestParent.js';\nexport { default as getInstanceFromElement } from './getInstanceFromElement.js';\nexport { default as importOnInteraction } from './importOnInteraction.js';\nexport { default as importWhenIdle } from './importWhenIdle.js';\nexport { default as importWhenVisible } from './importWhenVisible.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAc,oCAAd;AACA,uBAAqC;AACrC,8BAA4C;AAC5C,oCAAkD;AAClD,iCAA+C;AAC/C,4BAA0C;AAC1C,+BAA6C;",
+  "names": []
+}

package/helpers/index.js

@@ -13,3 +13,4 @@ export {
   default6 as importWhenIdle,
   default7 as importWhenVisible
 };
+//# sourceMappingURL=index.js.map

package/helpers/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/index.ts"],
+  "sourcesContent": ["export * from './getDirectChildren.js';\nexport { default as createApp } from './createApp.js';\nexport { default as getClosestParent } from './getClosestParent.js';\nexport { default as getInstanceFromElement } from './getInstanceFromElement.js';\nexport { default as importOnInteraction } from './importOnInteraction.js';\nexport { default as importWhenIdle } from './importWhenIdle.js';\nexport { default as importWhenVisible } from './importWhenVisible.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,SAAoB,WAAXA,gBAA4B;AACrC,SAAoB,WAAXA,gBAAmC;AAC5C,SAAoB,WAAXA,gBAAyC;AAClD,SAAoB,WAAXA,gBAAsC;AAC/C,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAoC;",
+  "names": ["default"]
+}

package/helpers/utils.cjs

@@ -34,3 +34,4 @@ function getTargetElements(nameOrSelectorOrElement, context) {
   return nameOrSelectorOrElement;
 }
 if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=utils.cjs.map