@studiometa/js-toolkit 2.7.0 → 2.8.0

package/Base/features.cjs

@@ -22,8 +22,6 @@ __export(features_exports, {
   features: () => features
 });
 module.exports = __toCommonJS(features_exports);
-var features = /* @__PURE__ */ new Map([
-  ["asyncChildren", false]
-]);
+var features = /* @__PURE__ */ new Map([["asyncChildren", false]]);
 if (module.exports.default) module.exports = module.exports.default;
 //# sourceMappingURL=features.cjs.map

package/Base/features.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/features.ts"],
-  "sourcesContent": ["export type Features = Record<'asyncChildren', boolean>;\n\nexport const features = new Map<keyof Features, boolean>([\n  ['asyncChildren', false],\n]);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,IAAM,WAAW,oBAAI,IAA6B;AAAA,EACvD,CAAC,iBAAiB,KAAK;AACzB,CAAC;",
+  "sourcesContent": ["export type Features = Record<'asyncChildren', boolean>;\n\nexport const features = new Map<keyof Features, boolean>([['asyncChildren', false]]);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,IAAM,WAAW,oBAAI,IAA6B,CAAC,CAAC,iBAAiB,KAAK,CAAC,CAAC;",
   "names": []
 }

package/Base/features.d.ts

@@ -1,2 +1,2 @@
-export declare type Features = Record<'asyncChildren', boolean>;
+export type Features = Record<'asyncChildren', boolean>;
 export declare const features: Map<"asyncChildren", boolean>;

package/Base/features.js

@@ -1,6 +1,4 @@
-const features = /* @__PURE__ */ new Map([
-  ["asyncChildren", false]
-]);
+const features = /* @__PURE__ */ new Map([["asyncChildren", false]]);
 export {
   features
 };

package/Base/features.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/features.ts"],
-  "sourcesContent": ["export type Features = Record<'asyncChildren', boolean>;\n\nexport const features = new Map<keyof Features, boolean>([\n  ['asyncChildren', false],\n]);\n"],
-  "mappings": "AAEO,MAAM,WAAW,oBAAI,IAA6B;AAAA,EACvD,CAAC,iBAAiB,KAAK;AACzB,CAAC;",
+  "sourcesContent": ["export type Features = Record<'asyncChildren', boolean>;\n\nexport const features = new Map<keyof Features, boolean>([['asyncChildren', false]]);\n"],
+  "mappings": "AAEO,MAAM,WAAW,oBAAI,IAA6B,CAAC,CAAC,iBAAiB,KAAK,CAAC,CAAC;",
   "names": []
 }

package/Base/index.d.ts

@@ -1,27 +1,27 @@
 import { ChildrenManager, RefsManager, ServicesManager, EventsManager, OptionsManager } from './managers/index.js';
-export declare type BaseEl = HTMLElement & {
+export type BaseEl = HTMLElement & {
     __base__?: WeakMap<BaseConstructor, Base | 'terminated'>;
 };
-export declare type BaseConstructor<T extends Base = Base> = {
+export type BaseConstructor<T extends Base = Base> = {
     new (...args: any[]): T;
     prototype: Base;
 } & Pick<typeof Base, keyof typeof Base>;
-export declare type BaseAsyncConstructor<T extends Base = Base> = (Base: any) => Promise<BaseConstructor<T> | {
+export type BaseAsyncConstructor<T extends Base = Base> = (Base: any) => Promise<BaseConstructor<T> | {
     default: BaseConstructor<T>;
 }>;
-export declare type BaseOptions = {
+export type BaseOptions = {
     [name: string]: unknown;
 };
-export declare type BaseRefs = {
+export type BaseRefs = {
     [name: string]: HTMLElement | HTMLElement[];
 };
-export declare type BaseChildren = {
+export type BaseChildren = {
     [nameOrSelector: string]: Base[] | Promise<Base>[];
 };
-export declare type BaseConfigComponents = {
+export type BaseConfigComponents = {
     [nameOrSelector: string]: BaseConstructor | BaseAsyncConstructor;
 };
-export declare type BaseConfig = {
+export type BaseConfig = {
     name: string;
     debug?: boolean;
     log?: boolean;
@@ -30,14 +30,14 @@ export declare type BaseConfig = {
     components?: BaseConfigComponents;
     options?: import('./managers/OptionsManager').OptionsSchema;
 };
-export declare type BaseProps = {
+export type BaseProps = {
     $el?: HTMLElement;
     $options?: BaseOptions;
     $refs?: BaseRefs;
     $children?: BaseChildren;
     $parent?: Base;
 };
-export declare type Managers = {
+export type Managers = {
     ChildrenManager: typeof ChildrenManager;
     EventsManager: typeof EventsManager;
     OptionsManager: typeof OptionsManager;

package/Base/managers/OptionsManager.d.ts

@@ -1,34 +1,34 @@
 import type { Options as DeepmergeOptions } from 'deepmerge';
 import { AbstractManager } from './AbstractManager.js';
 import type { Base } from '../index.js';
-declare type OptionType = StringConstructor | NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor;
-declare type ArrayOption = {
+type OptionType = StringConstructor | NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor;
+type ArrayOption = {
     type: ArrayConstructor;
     default?: () => unknown[];
     merge?: boolean | DeepmergeOptions;
 };
-declare type ObjectOption = {
+type ObjectOption = {
     type: ObjectConstructor;
     default?: () => unknown;
     merge?: boolean | DeepmergeOptions;
 };
-declare type StringOption = {
+type StringOption = {
     type: StringConstructor;
     default?: string;
 };
-declare type NumberOption = {
+type NumberOption = {
     type: NumberConstructor;
     default?: number;
 };
-declare type BooleanOption = {
+type BooleanOption = {
     type: BooleanConstructor;
     default?: boolean;
 };
-export declare type OptionObject = ArrayOption | ObjectOption | StringOption | NumberOption | BooleanOption;
-export declare type OptionsSchema = {
+export type OptionObject = ArrayOption | ObjectOption | StringOption | NumberOption | BooleanOption;
+export type OptionsSchema = {
     [name: string]: OptionType | OptionObject;
 };
-export declare type OptionsInterface = {
+export type OptionsInterface = {
     [optionName: string]: unknown;
 };
 /**

package/Base/managers/RefsManager.cjs

@@ -29,19 +29,24 @@ var NORMALIZE_REF_NAME_REGEX = /\[\]$/;
 function normalizeRefName(name) {
   return name.endsWith("[]") ? name.replace(NORMALIZE_REF_NAME_REGEX, "") : name;
 }
-function __filterRefsBelongingToInstance(that, ref) {
-  let ancestor = ref.parentElement;
-  while (ancestor && !(0, import_utils.isDefined)(ancestor.dataset.component)) {
-    ancestor = ancestor.parentElement;
-  }
-  return ancestor === null || ancestor === that.__element;
+function refBelongToInstance(ref, rootElement, name) {
+  const isPrefixed = ref.dataset.ref.startsWith(name);
+  const firstComponentAncestor = (0, import_utils.getAncestorWhereUntil)(
+    ref,
+    (el) => el && (isPrefixed ? el.dataset.component === name && el : (0, import_utils.isDefined)(el.dataset.component)) && el !== rootElement,
+    (el) => el === rootElement
+  );
+  return firstComponentAncestor === rootElement;
 }
 function __register(that, refName) {
   const isMultiple = refName.endsWith("[]");
   const propName = normalizeRefName(refName);
+  const { name } = that.__base.$options;
   const refs = Array.from(
-    that.__element.querySelectorAll(`[data-ref="${refName}"]`)
-  ).filter((ref) => __filterRefsBelongingToInstance(that, ref));
+    that.__element.querySelectorAll(
+      `[data-ref="${refName}"],[data-ref="${name}.${refName}"]`
+    )
+  ).filter((ref) => refBelongToInstance(ref, that.__element, name));
   if (import_utils.isDev && !isMultiple && refs.length > 1) {
     console.warn(
       `[${that.__base.$options.name}]`,

package/Base/managers/RefsManager.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/RefsManager.ts"],
-  "sourcesContent": ["import { AbstractManager } from './AbstractManager.js';\nimport { isDev, isArray, isDefined } from '../../utils/index.js';\n\nconst NORMALIZE_REF_NAME_REGEX = /\\[\\]$/;\n/**\n * Normalize the name of ref.\n */\nexport function normalizeRefName(name: string) {\n  return name.endsWith('[]') ? name.replace(NORMALIZE_REF_NAME_REGEX, '') : name;\n}\n\n/**\n * Filter refs belonging to the related Base instance.\n */\nfunction __filterRefsBelongingToInstance(that: RefsManager, ref: HTMLElement) {\n  let ancestor = ref.parentElement;\n\n  while (ancestor && !isDefined(ancestor.dataset.component)) {\n    ancestor = ancestor.parentElement;\n  }\n\n  return ancestor === null || ancestor === that.__element;\n}\n\n/**\n * Register one ref.\n *\n * @param {RefsManager} that\n * @param {string} refName The ref name.\n * @private\n */\nfunction __register(that: RefsManager, refName: string) {\n  const isMultiple = refName.endsWith('[]');\n  const propName = normalizeRefName(refName);\n\n  const refs = Array.from(\n    that.__element.querySelectorAll<HTMLElement>(`[data-ref=\"${refName}\"]`),\n  ).filter((ref) => __filterRefsBelongingToInstance(that, ref));\n\n  if (isDev && !isMultiple && refs.length > 1) {\n    console.warn(\n      // @ts-ignore\n      `[${that.__base.$options.name}]`,\n      `The \"${refName}\" ref has been found multiple times.`,\n      'Did you forgot to add the `[]` suffix to its name?',\n    );\n  }\n\n  if (!isMultiple && refs.length <= 1 && !isDefined(refs[0])) {\n    if (isDev) {\n      console.warn(\n        // @ts-ignore\n        `[${that.__base.$options.name}]`,\n        `The \"${refName}\" ref is missing.`,\n        `Is there an \\`[data-ref=\"${refName}\"]\\` element in the component's scope?`,\n      );\n    }\n\n    return;\n  }\n\n  that.__eventsManager.bindRef(refName, refs);\n\n  Object.defineProperty(that, propName, {\n    // @todo remove usage of non-multiple refs as array\n    value: isMultiple || refs.length > 1 ? refs : refs[0],\n    enumerable: true,\n    configurable: true,\n  });\n}\n\n/**\n * Unregister one ref.\n */\nfunction __unregister(that: RefsManager, refName: string) {\n  const propName = normalizeRefName(refName);\n  const refs = isArray(that[propName]) ? that[propName] : [that[propName]];\n  that.__eventsManager.unbindRef(refName, refs);\n}\n\n/**\n * Refs Manager\n *\n * @todo Use `MutationObserver` to automatically update refs?\n */\nexport class RefsManager extends AbstractManager {\n  /**\n   * Get refs configuration.\n   */\n  get __refs() {\n    return this.__config.refs ?? [];\n  }\n\n  /**\n   * Register all refs.\n   */\n  registerAll() {\n    this.__refs.forEach((refName) => __register(this, refName));\n  }\n\n  /**\n   * Unregister all refs.\n   */\n  unregisterAll() {\n    this.__refs.forEach((refName) => __unregister(this, refName));\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAgC;AAChC,mBAA0C;AAE1C,IAAM,2BAA2B;AAI1B,SAAS,iBAAiB,MAAc;AAC7C,SAAO,KAAK,SAAS,IAAI,IAAI,KAAK,QAAQ,0BAA0B,EAAE,IAAI;AAC5E;AAKA,SAAS,gCAAgC,MAAmB,KAAkB;AAC5E,MAAI,WAAW,IAAI;AAEnB,SAAO,YAAY,KAAC,wBAAU,SAAS,QAAQ,SAAS,GAAG;AACzD,eAAW,SAAS;AAAA,EACtB;AAEA,SAAO,aAAa,QAAQ,aAAa,KAAK;AAChD;AASA,SAAS,WAAW,MAAmB,SAAiB;AACtD,QAAM,aAAa,QAAQ,SAAS,IAAI;AACxC,QAAM,WAAW,iBAAiB,OAAO;AAEzC,QAAM,OAAO,MAAM;AAAA,IACjB,KAAK,UAAU,iBAA8B,cAAc,WAAW;AAAA,EACxE,EAAE,OAAO,CAAC,QAAQ,gCAAgC,MAAM,GAAG,CAAC;AAE5D,MAAI,sBAAS,CAAC,cAAc,KAAK,SAAS,GAAG;AAC3C,YAAQ;AAAA,MAEN,IAAI,KAAK,OAAO,SAAS;AAAA,MACzB,QAAQ;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,MAAI,CAAC,cAAc,KAAK,UAAU,KAAK,KAAC,wBAAU,KAAK,EAAE,GAAG;AAC1D,QAAI,oBAAO;AACT,cAAQ;AAAA,QAEN,IAAI,KAAK,OAAO,SAAS;AAAA,QACzB,QAAQ;AAAA,QACR,4BAA4B;AAAA,MAC9B;AAAA,IACF;AAEA;AAAA,EACF;AAEA,OAAK,gBAAgB,QAAQ,SAAS,IAAI;AAE1C,SAAO,eAAe,MAAM,UAAU;AAAA,IAEpC,OAAO,cAAc,KAAK,SAAS,IAAI,OAAO,KAAK;AAAA,IACnD,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB,CAAC;AACH;AAKA,SAAS,aAAa,MAAmB,SAAiB;AACxD,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,WAAO,sBAAQ,KAAK,SAAS,IAAI,KAAK,YAAY,CAAC,KAAK,SAAS;AACvE,OAAK,gBAAgB,UAAU,SAAS,IAAI;AAC9C;AAOO,IAAM,cAAN,cAA0B,uCAAgB;AAAA,EAI/C,IAAI,SAAS;AACX,WAAO,KAAK,SAAS,QAAQ,CAAC;AAAA,EAChC;AAAA,EAKA,cAAc;AACZ,SAAK,OAAO,QAAQ,CAAC,YAAY,WAAW,MAAM,OAAO,CAAC;AAAA,EAC5D;AAAA,EAKA,gBAAgB;AACd,SAAK,OAAO,QAAQ,CAAC,YAAY,aAAa,MAAM,OAAO,CAAC;AAAA,EAC9D;AACF;",
+  "sourcesContent": ["import { AbstractManager } from './AbstractManager.js';\nimport { isDev, isArray, isDefined, getAncestorWhereUntil } from '../../utils/index.js';\n\nconst NORMALIZE_REF_NAME_REGEX = /\\[\\]$/;\n\n/**\n * Normalize the name of ref.\n */\nexport function normalizeRefName(name: string) {\n  return name.endsWith('[]') ? name.replace(NORMALIZE_REF_NAME_REGEX, '') : name;\n}\n\n/**\n * Filter refs belonging to the related Base instance.\n */\nfunction refBelongToInstance(ref: HTMLElement, rootElement: HTMLElement, name: string) {\n  const isPrefixed = ref.dataset.ref.startsWith(name);\n  const firstComponentAncestor = getAncestorWhereUntil(\n    ref,\n    (el) =>\n      el &&\n      (isPrefixed ? el.dataset.component === name && el : isDefined(el.dataset.component)) &&\n      el !== rootElement,\n    (el) => el === rootElement,\n  );\n\n  return firstComponentAncestor === rootElement;\n}\n\n/**\n * Register one ref.\n *\n * @param {RefsManager} that\n * @param {string} refName The ref name.\n * @private\n */\nfunction __register(that: RefsManager, refName: string) {\n  const isMultiple = refName.endsWith('[]');\n  const propName = normalizeRefName(refName);\n  const { name } = that.__base.$options;\n\n  const refs = Array.from(\n    that.__element.querySelectorAll<HTMLElement>(\n      `[data-ref=\"${refName}\"],[data-ref=\"${name}.${refName}\"]`,\n    ),\n  ).filter((ref) => refBelongToInstance(ref, that.__element, name));\n\n  if (isDev && !isMultiple && refs.length > 1) {\n    console.warn(\n      // @ts-ignore\n      `[${that.__base.$options.name}]`,\n      `The \"${refName}\" ref has been found multiple times.`,\n      'Did you forgot to add the `[]` suffix to its name?',\n    );\n  }\n\n  if (!isMultiple && refs.length <= 1 && !isDefined(refs[0])) {\n    if (isDev) {\n      console.warn(\n        // @ts-ignore\n        `[${that.__base.$options.name}]`,\n        `The \"${refName}\" ref is missing.`,\n        `Is there an \\`[data-ref=\"${refName}\"]\\` element in the component's scope?`,\n      );\n    }\n\n    return;\n  }\n\n  that.__eventsManager.bindRef(refName, refs);\n\n  Object.defineProperty(that, propName, {\n    // @todo remove usage of non-multiple refs as array\n    value: isMultiple || refs.length > 1 ? refs : refs[0],\n    enumerable: true,\n    configurable: true,\n  });\n}\n\n/**\n * Unregister one ref.\n */\nfunction __unregister(that: RefsManager, refName: string) {\n  const propName = normalizeRefName(refName);\n  const refs = isArray(that[propName]) ? that[propName] : [that[propName]];\n  that.__eventsManager.unbindRef(refName, refs);\n}\n\n/**\n * Refs Manager\n *\n * @todo Use `MutationObserver` to automatically update refs?\n */\nexport class RefsManager extends AbstractManager {\n  /**\n   * Get refs configuration.\n   */\n  get __refs() {\n    return this.__config.refs ?? [];\n  }\n\n  /**\n   * Register all refs.\n   */\n  registerAll() {\n    this.__refs.forEach((refName) => __register(this, refName));\n  }\n\n  /**\n   * Unregister all refs.\n   */\n  unregisterAll() {\n    this.__refs.forEach((refName) => __unregister(this, refName));\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAgC;AAChC,mBAAiE;AAEjE,IAAM,2BAA2B;AAK1B,SAAS,iBAAiB,MAAc;AAC7C,SAAO,KAAK,SAAS,IAAI,IAAI,KAAK,QAAQ,0BAA0B,EAAE,IAAI;AAC5E;AAKA,SAAS,oBAAoB,KAAkB,aAA0B,MAAc;AACrF,QAAM,aAAa,IAAI,QAAQ,IAAI,WAAW,IAAI;AAClD,QAAM,6BAAyB;AAAA,IAC7B;AAAA,IACA,CAAC,OACC,OACC,aAAa,GAAG,QAAQ,cAAc,QAAQ,SAAK,wBAAU,GAAG,QAAQ,SAAS,MAClF,OAAO;AAAA,IACT,CAAC,OAAO,OAAO;AAAA,EACjB;AAEA,SAAO,2BAA2B;AACpC;AASA,SAAS,WAAW,MAAmB,SAAiB;AACtD,QAAM,aAAa,QAAQ,SAAS,IAAI;AACxC,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,EAAE,KAAK,IAAI,KAAK,OAAO;AAE7B,QAAM,OAAO,MAAM;AAAA,IACjB,KAAK,UAAU;AAAA,MACb,cAAc,wBAAwB,QAAQ;AAAA,IAChD;AAAA,EACF,EAAE,OAAO,CAAC,QAAQ,oBAAoB,KAAK,KAAK,WAAW,IAAI,CAAC;AAEhE,MAAI,sBAAS,CAAC,cAAc,KAAK,SAAS,GAAG;AAC3C,YAAQ;AAAA,MAEN,IAAI,KAAK,OAAO,SAAS;AAAA,MACzB,QAAQ;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,MAAI,CAAC,cAAc,KAAK,UAAU,KAAK,KAAC,wBAAU,KAAK,EAAE,GAAG;AAC1D,QAAI,oBAAO;AACT,cAAQ;AAAA,QAEN,IAAI,KAAK,OAAO,SAAS;AAAA,QACzB,QAAQ;AAAA,QACR,4BAA4B;AAAA,MAC9B;AAAA,IACF;AAEA;AAAA,EACF;AAEA,OAAK,gBAAgB,QAAQ,SAAS,IAAI;AAE1C,SAAO,eAAe,MAAM,UAAU;AAAA,IAEpC,OAAO,cAAc,KAAK,SAAS,IAAI,OAAO,KAAK;AAAA,IACnD,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB,CAAC;AACH;AAKA,SAAS,aAAa,MAAmB,SAAiB;AACxD,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,WAAO,sBAAQ,KAAK,SAAS,IAAI,KAAK,YAAY,CAAC,KAAK,SAAS;AACvE,OAAK,gBAAgB,UAAU,SAAS,IAAI;AAC9C;AAOO,IAAM,cAAN,cAA0B,uCAAgB;AAAA,EAI/C,IAAI,SAAS;AACX,WAAO,KAAK,SAAS,QAAQ,CAAC;AAAA,EAChC;AAAA,EAKA,cAAc;AACZ,SAAK,OAAO,QAAQ,CAAC,YAAY,WAAW,MAAM,OAAO,CAAC;AAAA,EAC5D;AAAA,EAKA,gBAAgB;AACd,SAAK,OAAO,QAAQ,CAAC,YAAY,aAAa,MAAM,OAAO,CAAC;AAAA,EAC9D;AACF;",
   "names": []
 }

package/Base/managers/RefsManager.js

@@ -1,22 +1,27 @@
 import { AbstractManager } from "./AbstractManager.js";
-import { isDev, isArray, isDefined } from "../../utils/index.js";
+import { isDev, isArray, isDefined, getAncestorWhereUntil } from "../../utils/index.js";
 const NORMALIZE_REF_NAME_REGEX = /\[\]$/;
 function normalizeRefName(name) {
   return name.endsWith("[]") ? name.replace(NORMALIZE_REF_NAME_REGEX, "") : name;
 }
-function __filterRefsBelongingToInstance(that, ref) {
-  let ancestor = ref.parentElement;
-  while (ancestor && !isDefined(ancestor.dataset.component)) {
-    ancestor = ancestor.parentElement;
-  }
-  return ancestor === null || ancestor === that.__element;
+function refBelongToInstance(ref, rootElement, name) {
+  const isPrefixed = ref.dataset.ref.startsWith(name);
+  const firstComponentAncestor = getAncestorWhereUntil(
+    ref,
+    (el) => el && (isPrefixed ? el.dataset.component === name && el : isDefined(el.dataset.component)) && el !== rootElement,
+    (el) => el === rootElement
+  );
+  return firstComponentAncestor === rootElement;
 }
 function __register(that, refName) {
   const isMultiple = refName.endsWith("[]");
   const propName = normalizeRefName(refName);
+  const { name } = that.__base.$options;
   const refs = Array.from(
-    that.__element.querySelectorAll(`[data-ref="${refName}"]`)
-  ).filter((ref) => __filterRefsBelongingToInstance(that, ref));
+    that.__element.querySelectorAll(
+      `[data-ref="${refName}"],[data-ref="${name}.${refName}"]`
+    )
+  ).filter((ref) => refBelongToInstance(ref, that.__element, name));
   if (isDev && !isMultiple && refs.length > 1) {
     console.warn(
       `[${that.__base.$options.name}]`,

package/Base/managers/RefsManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/RefsManager.ts"],
-  "sourcesContent": ["import { AbstractManager } from './AbstractManager.js';\nimport { isDev, isArray, isDefined } from '../../utils/index.js';\n\nconst NORMALIZE_REF_NAME_REGEX = /\\[\\]$/;\n/**\n * Normalize the name of ref.\n */\nexport function normalizeRefName(name: string) {\n  return name.endsWith('[]') ? name.replace(NORMALIZE_REF_NAME_REGEX, '') : name;\n}\n\n/**\n * Filter refs belonging to the related Base instance.\n */\nfunction __filterRefsBelongingToInstance(that: RefsManager, ref: HTMLElement) {\n  let ancestor = ref.parentElement;\n\n  while (ancestor && !isDefined(ancestor.dataset.component)) {\n    ancestor = ancestor.parentElement;\n  }\n\n  return ancestor === null || ancestor === that.__element;\n}\n\n/**\n * Register one ref.\n *\n * @param {RefsManager} that\n * @param {string} refName The ref name.\n * @private\n */\nfunction __register(that: RefsManager, refName: string) {\n  const isMultiple = refName.endsWith('[]');\n  const propName = normalizeRefName(refName);\n\n  const refs = Array.from(\n    that.__element.querySelectorAll<HTMLElement>(`[data-ref=\"${refName}\"]`),\n  ).filter((ref) => __filterRefsBelongingToInstance(that, ref));\n\n  if (isDev && !isMultiple && refs.length > 1) {\n    console.warn(\n      // @ts-ignore\n      `[${that.__base.$options.name}]`,\n      `The \"${refName}\" ref has been found multiple times.`,\n      'Did you forgot to add the `[]` suffix to its name?',\n    );\n  }\n\n  if (!isMultiple && refs.length <= 1 && !isDefined(refs[0])) {\n    if (isDev) {\n      console.warn(\n        // @ts-ignore\n        `[${that.__base.$options.name}]`,\n        `The \"${refName}\" ref is missing.`,\n        `Is there an \\`[data-ref=\"${refName}\"]\\` element in the component's scope?`,\n      );\n    }\n\n    return;\n  }\n\n  that.__eventsManager.bindRef(refName, refs);\n\n  Object.defineProperty(that, propName, {\n    // @todo remove usage of non-multiple refs as array\n    value: isMultiple || refs.length > 1 ? refs : refs[0],\n    enumerable: true,\n    configurable: true,\n  });\n}\n\n/**\n * Unregister one ref.\n */\nfunction __unregister(that: RefsManager, refName: string) {\n  const propName = normalizeRefName(refName);\n  const refs = isArray(that[propName]) ? that[propName] : [that[propName]];\n  that.__eventsManager.unbindRef(refName, refs);\n}\n\n/**\n * Refs Manager\n *\n * @todo Use `MutationObserver` to automatically update refs?\n */\nexport class RefsManager extends AbstractManager {\n  /**\n   * Get refs configuration.\n   */\n  get __refs() {\n    return this.__config.refs ?? [];\n  }\n\n  /**\n   * Register all refs.\n   */\n  registerAll() {\n    this.__refs.forEach((refName) => __register(this, refName));\n  }\n\n  /**\n   * Unregister all refs.\n   */\n  unregisterAll() {\n    this.__refs.forEach((refName) => __unregister(this, refName));\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,OAAO,SAAS,iBAAiB;AAE1C,MAAM,2BAA2B;AAI1B,SAAS,iBAAiB,MAAc;AAC7C,SAAO,KAAK,SAAS,IAAI,IAAI,KAAK,QAAQ,0BAA0B,EAAE,IAAI;AAC5E;AAKA,SAAS,gCAAgC,MAAmB,KAAkB;AAC5E,MAAI,WAAW,IAAI;AAEnB,SAAO,YAAY,CAAC,UAAU,SAAS,QAAQ,SAAS,GAAG;AACzD,eAAW,SAAS;AAAA,EACtB;AAEA,SAAO,aAAa,QAAQ,aAAa,KAAK;AAChD;AASA,SAAS,WAAW,MAAmB,SAAiB;AACtD,QAAM,aAAa,QAAQ,SAAS,IAAI;AACxC,QAAM,WAAW,iBAAiB,OAAO;AAEzC,QAAM,OAAO,MAAM;AAAA,IACjB,KAAK,UAAU,iBAA8B,cAAc,WAAW;AAAA,EACxE,EAAE,OAAO,CAAC,QAAQ,gCAAgC,MAAM,GAAG,CAAC;AAE5D,MAAI,SAAS,CAAC,cAAc,KAAK,SAAS,GAAG;AAC3C,YAAQ;AAAA,MAEN,IAAI,KAAK,OAAO,SAAS;AAAA,MACzB,QAAQ;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,MAAI,CAAC,cAAc,KAAK,UAAU,KAAK,CAAC,UAAU,KAAK,EAAE,GAAG;AAC1D,QAAI,OAAO;AACT,cAAQ;AAAA,QAEN,IAAI,KAAK,OAAO,SAAS;AAAA,QACzB,QAAQ;AAAA,QACR,4BAA4B;AAAA,MAC9B;AAAA,IACF;AAEA;AAAA,EACF;AAEA,OAAK,gBAAgB,QAAQ,SAAS,IAAI;AAE1C,SAAO,eAAe,MAAM,UAAU;AAAA,IAEpC,OAAO,cAAc,KAAK,SAAS,IAAI,OAAO,KAAK;AAAA,IACnD,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB,CAAC;AACH;AAKA,SAAS,aAAa,MAAmB,SAAiB;AACxD,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,OAAO,QAAQ,KAAK,SAAS,IAAI,KAAK,YAAY,CAAC,KAAK,SAAS;AACvE,OAAK,gBAAgB,UAAU,SAAS,IAAI;AAC9C;AAOO,MAAM,oBAAoB,gBAAgB;AAAA,EAI/C,IAAI,SAAS;AACX,WAAO,KAAK,SAAS,QAAQ,CAAC;AAAA,EAChC;AAAA,EAKA,cAAc;AACZ,SAAK,OAAO,QAAQ,CAAC,YAAY,WAAW,MAAM,OAAO,CAAC;AAAA,EAC5D;AAAA,EAKA,gBAAgB;AACd,SAAK,OAAO,QAAQ,CAAC,YAAY,aAAa,MAAM,OAAO,CAAC;AAAA,EAC9D;AACF;",
+  "sourcesContent": ["import { AbstractManager } from './AbstractManager.js';\nimport { isDev, isArray, isDefined, getAncestorWhereUntil } from '../../utils/index.js';\n\nconst NORMALIZE_REF_NAME_REGEX = /\\[\\]$/;\n\n/**\n * Normalize the name of ref.\n */\nexport function normalizeRefName(name: string) {\n  return name.endsWith('[]') ? name.replace(NORMALIZE_REF_NAME_REGEX, '') : name;\n}\n\n/**\n * Filter refs belonging to the related Base instance.\n */\nfunction refBelongToInstance(ref: HTMLElement, rootElement: HTMLElement, name: string) {\n  const isPrefixed = ref.dataset.ref.startsWith(name);\n  const firstComponentAncestor = getAncestorWhereUntil(\n    ref,\n    (el) =>\n      el &&\n      (isPrefixed ? el.dataset.component === name && el : isDefined(el.dataset.component)) &&\n      el !== rootElement,\n    (el) => el === rootElement,\n  );\n\n  return firstComponentAncestor === rootElement;\n}\n\n/**\n * Register one ref.\n *\n * @param {RefsManager} that\n * @param {string} refName The ref name.\n * @private\n */\nfunction __register(that: RefsManager, refName: string) {\n  const isMultiple = refName.endsWith('[]');\n  const propName = normalizeRefName(refName);\n  const { name } = that.__base.$options;\n\n  const refs = Array.from(\n    that.__element.querySelectorAll<HTMLElement>(\n      `[data-ref=\"${refName}\"],[data-ref=\"${name}.${refName}\"]`,\n    ),\n  ).filter((ref) => refBelongToInstance(ref, that.__element, name));\n\n  if (isDev && !isMultiple && refs.length > 1) {\n    console.warn(\n      // @ts-ignore\n      `[${that.__base.$options.name}]`,\n      `The \"${refName}\" ref has been found multiple times.`,\n      'Did you forgot to add the `[]` suffix to its name?',\n    );\n  }\n\n  if (!isMultiple && refs.length <= 1 && !isDefined(refs[0])) {\n    if (isDev) {\n      console.warn(\n        // @ts-ignore\n        `[${that.__base.$options.name}]`,\n        `The \"${refName}\" ref is missing.`,\n        `Is there an \\`[data-ref=\"${refName}\"]\\` element in the component's scope?`,\n      );\n    }\n\n    return;\n  }\n\n  that.__eventsManager.bindRef(refName, refs);\n\n  Object.defineProperty(that, propName, {\n    // @todo remove usage of non-multiple refs as array\n    value: isMultiple || refs.length > 1 ? refs : refs[0],\n    enumerable: true,\n    configurable: true,\n  });\n}\n\n/**\n * Unregister one ref.\n */\nfunction __unregister(that: RefsManager, refName: string) {\n  const propName = normalizeRefName(refName);\n  const refs = isArray(that[propName]) ? that[propName] : [that[propName]];\n  that.__eventsManager.unbindRef(refName, refs);\n}\n\n/**\n * Refs Manager\n *\n * @todo Use `MutationObserver` to automatically update refs?\n */\nexport class RefsManager extends AbstractManager {\n  /**\n   * Get refs configuration.\n   */\n  get __refs() {\n    return this.__config.refs ?? [];\n  }\n\n  /**\n   * Register all refs.\n   */\n  registerAll() {\n    this.__refs.forEach((refName) => __register(this, refName));\n  }\n\n  /**\n   * Unregister all refs.\n   */\n  unregisterAll() {\n    this.__refs.forEach((refName) => __unregister(this, refName));\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,OAAO,SAAS,WAAW,6BAA6B;AAEjE,MAAM,2BAA2B;AAK1B,SAAS,iBAAiB,MAAc;AAC7C,SAAO,KAAK,SAAS,IAAI,IAAI,KAAK,QAAQ,0BAA0B,EAAE,IAAI;AAC5E;AAKA,SAAS,oBAAoB,KAAkB,aAA0B,MAAc;AACrF,QAAM,aAAa,IAAI,QAAQ,IAAI,WAAW,IAAI;AAClD,QAAM,yBAAyB;AAAA,IAC7B;AAAA,IACA,CAAC,OACC,OACC,aAAa,GAAG,QAAQ,cAAc,QAAQ,KAAK,UAAU,GAAG,QAAQ,SAAS,MAClF,OAAO;AAAA,IACT,CAAC,OAAO,OAAO;AAAA,EACjB;AAEA,SAAO,2BAA2B;AACpC;AASA,SAAS,WAAW,MAAmB,SAAiB;AACtD,QAAM,aAAa,QAAQ,SAAS,IAAI;AACxC,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,EAAE,KAAK,IAAI,KAAK,OAAO;AAE7B,QAAM,OAAO,MAAM;AAAA,IACjB,KAAK,UAAU;AAAA,MACb,cAAc,wBAAwB,QAAQ;AAAA,IAChD;AAAA,EACF,EAAE,OAAO,CAAC,QAAQ,oBAAoB,KAAK,KAAK,WAAW,IAAI,CAAC;AAEhE,MAAI,SAAS,CAAC,cAAc,KAAK,SAAS,GAAG;AAC3C,YAAQ;AAAA,MAEN,IAAI,KAAK,OAAO,SAAS;AAAA,MACzB,QAAQ;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,MAAI,CAAC,cAAc,KAAK,UAAU,KAAK,CAAC,UAAU,KAAK,EAAE,GAAG;AAC1D,QAAI,OAAO;AACT,cAAQ;AAAA,QAEN,IAAI,KAAK,OAAO,SAAS;AAAA,QACzB,QAAQ;AAAA,QACR,4BAA4B;AAAA,MAC9B;AAAA,IACF;AAEA;AAAA,EACF;AAEA,OAAK,gBAAgB,QAAQ,SAAS,IAAI;AAE1C,SAAO,eAAe,MAAM,UAAU;AAAA,IAEpC,OAAO,cAAc,KAAK,SAAS,IAAI,OAAO,KAAK;AAAA,IACnD,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB,CAAC;AACH;AAKA,SAAS,aAAa,MAAmB,SAAiB;AACxD,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,OAAO,QAAQ,KAAK,SAAS,IAAI,KAAK,YAAY,CAAC,KAAK,SAAS;AACvE,OAAK,gBAAgB,UAAU,SAAS,IAAI;AAC9C;AAOO,MAAM,oBAAoB,gBAAgB;AAAA,EAI/C,IAAI,SAAS;AACX,WAAO,KAAK,SAAS,QAAQ,CAAC;AAAA,EAChC;AAAA,EAKA,cAAc;AACZ,SAAK,OAAO,QAAQ,CAAC,YAAY,WAAW,MAAM,OAAO,CAAC;AAAA,EAC5D;AAAA,EAKA,gBAAgB;AACd,SAAK,OAAO,QAAQ,CAAC,YAAY,aAAa,MAAM,OAAO,CAAC;AAAA,EAC9D;AACF;",
   "names": []
 }

package/Base/managers/ResponsiveOptionsManager.d.ts

@@ -1,6 +1,6 @@
 import { OptionsManager } from './OptionsManager.js';
 import type { OptionObject } from './OptionsManager.js';
-export declare type ResponsiveOptionObject = OptionObject & {
+export type ResponsiveOptionObject = OptionObject & {
     responsive?: boolean;
 };
 /**

package/Base/managers/ServicesManager.d.ts

@@ -1,7 +1,7 @@
 import { usePointer, useRaf, useResize, useScroll, useKey, useLoad } from '../../services/index.js';
 import type { PointerServiceInterface, RafServiceInterface, ResizeServiceInterface, ScrollServiceInterface, KeyServiceInterface, LoadServiceInterface, ServiceInterface } from '../../services/index.js';
 import { AbstractManager } from './AbstractManager.js';
-declare type Services = {
+type Services = {
     scrolled: ScrollServiceInterface;
     resized: ResizeServiceInterface;
     ticked: RafServiceInterface;
@@ -9,7 +9,7 @@ declare type Services = {
     keyed: KeyServiceInterface;
     loaded: LoadServiceInterface;
 } & Record<string, ServiceInterface<unknown>>;
-declare type ServiceNames = keyof Services;
+type ServiceNames = keyof Services;
 /**
  * Services management for the Base class.
  *

package/Base/types.d.ts

@@ -42,6 +42,6 @@ export interface BaseInterface {
      */
     scrolled?(props: ScrollServiceProps): void;
 }
-export declare type BaseDecorator<S extends BaseInterface, T extends Base, U extends BaseProps = BaseProps> = {
+export type BaseDecorator<S extends BaseInterface, T extends Base, U extends BaseProps = BaseProps> = {
     new <W extends BaseProps = BaseProps>(...args: unknown[]): S & T & Base<W & U>;
 } & Partial<Pick<T, keyof T>> & Pick<typeof Base, keyof typeof Base>;

package/Base/utils.cjs

@@ -26,8 +26,22 @@ __export(utils_exports, {
 });
 module.exports = __toCommonJS(utils_exports);
 var import_utils = require("../utils/index.cjs");
+var selectors = /* @__PURE__ */ new Map();
+var separator = " ";
+function getSelector(nameOrSelector) {
+  if (!selectors.has(nameOrSelector)) {
+    const parts = [
+      `[data-component="${nameOrSelector}"]`,
+      `[data-component*="${separator}${nameOrSelector}${separator}"]`,
+      `[data-component$="${separator}${nameOrSelector}"]`,
+      `[data-component^="${nameOrSelector}${separator}"]`
+    ];
+    selectors.set(nameOrSelector, parts.join(","));
+  }
+  return selectors.get(nameOrSelector);
+}
 function getComponentElements(nameOrSelector, element = document) {
-  const selector = `[data-component="${nameOrSelector}"]`;
+  const selector = getSelector(nameOrSelector);
   let elements = [];
   try {
     elements = Array.from(element.querySelectorAll(selector));

package/Base/utils.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/utils.ts"],
-  "sourcesContent": ["import { isArray, isDefined, isDev } from '../utils/index.js';\nimport type { Base, BaseConfig } from './index.js';\n\n/**\n * Get a list of elements based on the name of a component.\n *\n * @param {string} nameOrSelector\n *   The name or selector to used for this component.\n * @param {HTMLElement|Document} element\n *   The root element on which to query the selector, defaults to `document`.\n * @returns {Array<HTMLElement>}\n *   A list of elements on which the component should be mounted.\n */\nexport function getComponentElements(\n  nameOrSelector: string,\n  element: HTMLElement | Document = document,\n): HTMLElement[] {\n  const selector = `[data-component=\"${nameOrSelector}\"]`;\n  let elements = [];\n\n  try {\n    elements = Array.from(element.querySelectorAll(selector));\n    // eslint-disable-next-line no-empty\n  } catch {}\n\n  // If no child component found with the default selector, try a classic DOM selector\n  if (elements.length === 0) {\n    elements = Array.from(element.querySelectorAll(nameOrSelector));\n  }\n\n  return elements;\n}\n\n/**\n * Test if an event is defined in the given config.\n */\nexport function eventIsDefinedInConfig(event: string, config: BaseConfig): boolean {\n  return isArray(config.emits) && config.emits.includes(event);\n}\n\n/**\n * Test if an event can be used on the given element.\n */\nexport function eventIsNative(event: string, element: HTMLElement): boolean {\n  return isDefined(element[`on${event}`]);\n}\n\n/**\n * Get the target of a given event.\n * @todo Return false in v3 if event is not defined or not native to prevent adding a listener.\n */\nexport function getEventTarget(\n  instance: Base,\n  event: string,\n  config: BaseConfig,\n): Base | Base['$el'] {\n  if (eventIsDefinedInConfig(event, config)) {\n    return instance;\n  }\n\n  if (eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n\n  if (isDev) {\n    console.warn(\n      `[${config.name}]`,\n      `The \"${event}\" event is missing from the configuration and is not a native`,\n      `event for the root element of type \\`${instance.$el.constructor.name}\\`.`,\n    );\n  }\n\n  // @todo v3 return false or null\n  return instance;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAanC,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,oBAAoB;AACrC,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAE;AAAA,EAAO;AAGT,MAAI,SAAS,WAAW,GAAG;AACzB,eAAW,MAAM,KAAK,QAAQ,iBAAiB,cAAc,CAAC;AAAA,EAChE;AAEA,SAAO;AACT;AAKO,SAAS,uBAAuB,OAAe,QAA6B;AACjF,aAAO,sBAAQ,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,KAAK;AAC7D;AAKO,SAAS,cAAc,OAAe,SAA+B;AAC1E,aAAO,wBAAU,QAAQ,KAAK,QAAQ;AACxC;AAMO,SAAS,eACd,UACA,OACA,QACoB;AACpB,MAAI,uBAAuB,OAAO,MAAM,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,SAAS,GAAG,GAAG;AACtC,WAAO,SAAS;AAAA,EAClB;AAEA,MAAI,oBAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO;AAAA,MACX,QAAQ;AAAA,MACR,wCAAwC,SAAS,IAAI,YAAY;AAAA,IACnE;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { isArray, isDefined, isDev } from '../utils/index.js';\nimport type { Base, BaseConfig } from './index.js';\n\nconst selectors = new Map();\n\n// Separator used for multi-component declaration in `data-component` attributeS.\nconst separator = ' ';\n\n/**\n * Get the selector for a given component.\n */\nfunction getSelector(nameOrSelector: string): string {\n  if (!selectors.has(nameOrSelector)) {\n    const parts = [\n      // Single selector\n      `[data-component=\"${nameOrSelector}\"]`,\n      // Selector in the middle of a list of selectors\n      `[data-component*=\"${separator}${nameOrSelector}${separator}\"]`,\n      // Selector at the end of a list of selectors\n      `[data-component$=\"${separator}${nameOrSelector}\"]`,\n      // Selector at the beginning of a list of selectors\n      `[data-component^=\"${nameOrSelector}${separator}\"]`,\n    ];\n    selectors.set(nameOrSelector, parts.join(','));\n  }\n\n  return selectors.get(nameOrSelector);\n}\n\n/**\n * Get a list of elements based on the name of a component.\n *\n * @param {string} nameOrSelector\n *   The name or selector to used for this component.\n * @param {HTMLElement|Document} element\n *   The root element on which to query the selector, defaults to `document`.\n * @returns {Array<HTMLElement>}\n *   A list of elements on which the component should be mounted.\n */\nexport function getComponentElements(\n  nameOrSelector: string,\n  element: HTMLElement | Document = document,\n): HTMLElement[] {\n  const selector = getSelector(nameOrSelector);\n  let elements = [];\n\n  try {\n    elements = Array.from(element.querySelectorAll(selector));\n    // eslint-disable-next-line no-empty\n  } catch {}\n\n  // If no child component found with the default selector, try a classic DOM selector\n  if (elements.length === 0) {\n    elements = Array.from(element.querySelectorAll(nameOrSelector));\n  }\n\n  return elements;\n}\n\n/**\n * Test if an event is defined in the given config.\n */\nexport function eventIsDefinedInConfig(event: string, config: BaseConfig): boolean {\n  return isArray(config.emits) && config.emits.includes(event);\n}\n\n/**\n * Test if an event can be used on the given element.\n */\nexport function eventIsNative(event: string, element: HTMLElement): boolean {\n  return isDefined(element[`on${event}`]);\n}\n\n/**\n * Get the target of a given event.\n * @todo Return false in v3 if event is not defined or not native to prevent adding a listener.\n */\nexport function getEventTarget(\n  instance: Base,\n  event: string,\n  config: BaseConfig,\n): Base | Base['$el'] {\n  if (eventIsDefinedInConfig(event, config)) {\n    return instance;\n  }\n\n  if (eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n\n  if (isDev) {\n    console.warn(\n      `[${config.name}]`,\n      `The \"${event}\" event is missing from the configuration and is not a native`,\n      `event for the root element of type \\`${instance.$el.constructor.name}\\`.`,\n    );\n  }\n\n  // @todo v3 return false or null\n  return instance;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAG1C,IAAM,YAAY,oBAAI,IAAI;AAG1B,IAAM,YAAY;AAKlB,SAAS,YAAY,gBAAgC;AACnD,MAAI,CAAC,UAAU,IAAI,cAAc,GAAG;AAClC,UAAM,QAAQ;AAAA,MAEZ,oBAAoB;AAAA,MAEpB,qBAAqB,YAAY,iBAAiB;AAAA,MAElD,qBAAqB,YAAY;AAAA,MAEjC,qBAAqB,iBAAiB;AAAA,IACxC;AACA,cAAU,IAAI,gBAAgB,MAAM,KAAK,GAAG,CAAC;AAAA,EAC/C;AAEA,SAAO,UAAU,IAAI,cAAc;AACrC;AAYO,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,YAAY,cAAc;AAC3C,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAE;AAAA,EAAO;AAGT,MAAI,SAAS,WAAW,GAAG;AACzB,eAAW,MAAM,KAAK,QAAQ,iBAAiB,cAAc,CAAC;AAAA,EAChE;AAEA,SAAO;AACT;AAKO,SAAS,uBAAuB,OAAe,QAA6B;AACjF,aAAO,sBAAQ,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,KAAK;AAC7D;AAKO,SAAS,cAAc,OAAe,SAA+B;AAC1E,aAAO,wBAAU,QAAQ,KAAK,QAAQ;AACxC;AAMO,SAAS,eACd,UACA,OACA,QACoB;AACpB,MAAI,uBAAuB,OAAO,MAAM,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,SAAS,GAAG,GAAG;AACtC,WAAO,SAAS;AAAA,EAClB;AAEA,MAAI,oBAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO;AAAA,MACX,QAAQ;AAAA,MACR,wCAAwC,SAAS,IAAI,YAAY;AAAA,IACnE;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/Base/utils.js

@@ -1,6 +1,20 @@
 import { isArray, isDefined, isDev } from "../utils/index.js";
+const selectors = /* @__PURE__ */ new Map();
+const separator = " ";
+function getSelector(nameOrSelector) {
+  if (!selectors.has(nameOrSelector)) {
+    const parts = [
+      `[data-component="${nameOrSelector}"]`,
+      `[data-component*="${separator}${nameOrSelector}${separator}"]`,
+      `[data-component$="${separator}${nameOrSelector}"]`,
+      `[data-component^="${nameOrSelector}${separator}"]`
+    ];
+    selectors.set(nameOrSelector, parts.join(","));
+  }
+  return selectors.get(nameOrSelector);
+}
 function getComponentElements(nameOrSelector, element = document) {
-  const selector = `[data-component="${nameOrSelector}"]`;
+  const selector = getSelector(nameOrSelector);
   let elements = [];
   try {
     elements = Array.from(element.querySelectorAll(selector));

package/Base/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/utils.ts"],
-  "sourcesContent": ["import { isArray, isDefined, isDev } from '../utils/index.js';\nimport type { Base, BaseConfig } from './index.js';\n\n/**\n * Get a list of elements based on the name of a component.\n *\n * @param {string} nameOrSelector\n *   The name or selector to used for this component.\n * @param {HTMLElement|Document} element\n *   The root element on which to query the selector, defaults to `document`.\n * @returns {Array<HTMLElement>}\n *   A list of elements on which the component should be mounted.\n */\nexport function getComponentElements(\n  nameOrSelector: string,\n  element: HTMLElement | Document = document,\n): HTMLElement[] {\n  const selector = `[data-component=\"${nameOrSelector}\"]`;\n  let elements = [];\n\n  try {\n    elements = Array.from(element.querySelectorAll(selector));\n    // eslint-disable-next-line no-empty\n  } catch {}\n\n  // If no child component found with the default selector, try a classic DOM selector\n  if (elements.length === 0) {\n    elements = Array.from(element.querySelectorAll(nameOrSelector));\n  }\n\n  return elements;\n}\n\n/**\n * Test if an event is defined in the given config.\n */\nexport function eventIsDefinedInConfig(event: string, config: BaseConfig): boolean {\n  return isArray(config.emits) && config.emits.includes(event);\n}\n\n/**\n * Test if an event can be used on the given element.\n */\nexport function eventIsNative(event: string, element: HTMLElement): boolean {\n  return isDefined(element[`on${event}`]);\n}\n\n/**\n * Get the target of a given event.\n * @todo Return false in v3 if event is not defined or not native to prevent adding a listener.\n */\nexport function getEventTarget(\n  instance: Base,\n  event: string,\n  config: BaseConfig,\n): Base | Base['$el'] {\n  if (eventIsDefinedInConfig(event, config)) {\n    return instance;\n  }\n\n  if (eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n\n  if (isDev) {\n    console.warn(\n      `[${config.name}]`,\n      `The \"${event}\" event is missing from the configuration and is not a native`,\n      `event for the root element of type \\`${instance.$el.constructor.name}\\`.`,\n    );\n  }\n\n  // @todo v3 return false or null\n  return instance;\n}\n"],
-  "mappings": "AAAA,SAAS,SAAS,WAAW,aAAa;AAanC,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,oBAAoB;AACrC,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAE;AAAA,EAAO;AAGT,MAAI,SAAS,WAAW,GAAG;AACzB,eAAW,MAAM,KAAK,QAAQ,iBAAiB,cAAc,CAAC;AAAA,EAChE;AAEA,SAAO;AACT;AAKO,SAAS,uBAAuB,OAAe,QAA6B;AACjF,SAAO,QAAQ,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,KAAK;AAC7D;AAKO,SAAS,cAAc,OAAe,SAA+B;AAC1E,SAAO,UAAU,QAAQ,KAAK,QAAQ;AACxC;AAMO,SAAS,eACd,UACA,OACA,QACoB;AACpB,MAAI,uBAAuB,OAAO,MAAM,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,SAAS,GAAG,GAAG;AACtC,WAAO,SAAS;AAAA,EAClB;AAEA,MAAI,OAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO;AAAA,MACX,QAAQ;AAAA,MACR,wCAAwC,SAAS,IAAI,YAAY;AAAA,IACnE;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { isArray, isDefined, isDev } from '../utils/index.js';\nimport type { Base, BaseConfig } from './index.js';\n\nconst selectors = new Map();\n\n// Separator used for multi-component declaration in `data-component` attributeS.\nconst separator = ' ';\n\n/**\n * Get the selector for a given component.\n */\nfunction getSelector(nameOrSelector: string): string {\n  if (!selectors.has(nameOrSelector)) {\n    const parts = [\n      // Single selector\n      `[data-component=\"${nameOrSelector}\"]`,\n      // Selector in the middle of a list of selectors\n      `[data-component*=\"${separator}${nameOrSelector}${separator}\"]`,\n      // Selector at the end of a list of selectors\n      `[data-component$=\"${separator}${nameOrSelector}\"]`,\n      // Selector at the beginning of a list of selectors\n      `[data-component^=\"${nameOrSelector}${separator}\"]`,\n    ];\n    selectors.set(nameOrSelector, parts.join(','));\n  }\n\n  return selectors.get(nameOrSelector);\n}\n\n/**\n * Get a list of elements based on the name of a component.\n *\n * @param {string} nameOrSelector\n *   The name or selector to used for this component.\n * @param {HTMLElement|Document} element\n *   The root element on which to query the selector, defaults to `document`.\n * @returns {Array<HTMLElement>}\n *   A list of elements on which the component should be mounted.\n */\nexport function getComponentElements(\n  nameOrSelector: string,\n  element: HTMLElement | Document = document,\n): HTMLElement[] {\n  const selector = getSelector(nameOrSelector);\n  let elements = [];\n\n  try {\n    elements = Array.from(element.querySelectorAll(selector));\n    // eslint-disable-next-line no-empty\n  } catch {}\n\n  // If no child component found with the default selector, try a classic DOM selector\n  if (elements.length === 0) {\n    elements = Array.from(element.querySelectorAll(nameOrSelector));\n  }\n\n  return elements;\n}\n\n/**\n * Test if an event is defined in the given config.\n */\nexport function eventIsDefinedInConfig(event: string, config: BaseConfig): boolean {\n  return isArray(config.emits) && config.emits.includes(event);\n}\n\n/**\n * Test if an event can be used on the given element.\n */\nexport function eventIsNative(event: string, element: HTMLElement): boolean {\n  return isDefined(element[`on${event}`]);\n}\n\n/**\n * Get the target of a given event.\n * @todo Return false in v3 if event is not defined or not native to prevent adding a listener.\n */\nexport function getEventTarget(\n  instance: Base,\n  event: string,\n  config: BaseConfig,\n): Base | Base['$el'] {\n  if (eventIsDefinedInConfig(event, config)) {\n    return instance;\n  }\n\n  if (eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n\n  if (isDev) {\n    console.warn(\n      `[${config.name}]`,\n      `The \"${event}\" event is missing from the configuration and is not a native`,\n      `event for the root element of type \\`${instance.$el.constructor.name}\\`.`,\n    );\n  }\n\n  // @todo v3 return false or null\n  return instance;\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS,WAAW,aAAa;AAG1C,MAAM,YAAY,oBAAI,IAAI;AAG1B,MAAM,YAAY;AAKlB,SAAS,YAAY,gBAAgC;AACnD,MAAI,CAAC,UAAU,IAAI,cAAc,GAAG;AAClC,UAAM,QAAQ;AAAA,MAEZ,oBAAoB;AAAA,MAEpB,qBAAqB,YAAY,iBAAiB;AAAA,MAElD,qBAAqB,YAAY;AAAA,MAEjC,qBAAqB,iBAAiB;AAAA,IACxC;AACA,cAAU,IAAI,gBAAgB,MAAM,KAAK,GAAG,CAAC;AAAA,EAC/C;AAEA,SAAO,UAAU,IAAI,cAAc;AACrC;AAYO,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,YAAY,cAAc;AAC3C,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAE;AAAA,EAAO;AAGT,MAAI,SAAS,WAAW,GAAG;AACzB,eAAW,MAAM,KAAK,QAAQ,iBAAiB,cAAc,CAAC;AAAA,EAChE;AAEA,SAAO;AACT;AAKO,SAAS,uBAAuB,OAAe,QAA6B;AACjF,SAAO,QAAQ,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,KAAK;AAC7D;AAKO,SAAS,cAAc,OAAe,SAA+B;AAC1E,SAAO,UAAU,QAAQ,KAAK,QAAQ;AACxC;AAMO,SAAS,eACd,UACA,OACA,QACoB;AACpB,MAAI,uBAAuB,OAAO,MAAM,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,SAAS,GAAG,GAAG;AACtC,WAAO,SAAS;AAAA,EAClB;AAEA,MAAI,OAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO;AAAA,MACX,QAAQ;AAAA,MACR,wCAAwC,SAAS,IAAI,YAAY;AAAA,IACnE;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/index.cjs

@@ -24,7 +24,7 @@ __reExport(decorators_exports, require("./withFreezedOptions.cjs"), module.expor
 __reExport(decorators_exports, require("./withIntersectionObserver.cjs"), module.exports);
 __reExport(decorators_exports, require("./withMountWhenInView.cjs"), module.exports);
 __reExport(decorators_exports, require("./withResponsiveOptions.cjs"), module.exports);
-__reExport(decorators_exports, require("./withScrolledInView.cjs"), module.exports);
+__reExport(decorators_exports, require("./withScrolledInView/index.cjs"), module.exports);
 __reExport(decorators_exports, require("./withVue2.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;
 //# sourceMappingURL=index.cjs.map

package/decorators/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/index.ts"],
-  "sourcesContent": ["export * from './withBreakpointManager.js';\nexport * from './withBreakpointObserver.js';\nexport * from './withDrag.js';\nexport * from './withExtraConfig.js';\nexport * from './withFreezedOptions.js';\nexport * from './withIntersectionObserver.js';\nexport * from './withMountWhenInView.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView.js';\nexport * from './withVue2.js';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,wCAAd;AACA,+BAAc,yCADd;AAEA,+BAAc,2BAFd;AAGA,+BAAc,kCAHd;AAIA,+BAAc,qCAJd;AAKA,+BAAc,2CALd;AAMA,+BAAc,sCANd;AAOA,+BAAc,wCAPd;AAQA,+BAAc,qCARd;AASA,+BAAc,2BATd;",
+  "sourcesContent": ["export * from './withBreakpointManager.js';\nexport * from './withBreakpointObserver.js';\nexport * from './withDrag.js';\nexport * from './withExtraConfig.js';\nexport * from './withFreezedOptions.js';\nexport * from './withIntersectionObserver.js';\nexport * from './withMountWhenInView.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView/index.js';\nexport * from './withVue2.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,wCAAd;AACA,+BAAc,yCADd;AAEA,+BAAc,2BAFd;AAGA,+BAAc,kCAHd;AAIA,+BAAc,qCAJd;AAKA,+BAAc,2CALd;AAMA,+BAAc,sCANd;AAOA,+BAAc,wCAPd;AAQA,+BAAc,2CARd;AASA,+BAAc,2BATd;",
   "names": []
 }

package/decorators/index.d.ts

@@ -6,5 +6,5 @@ export * from './withFreezedOptions.js';
 export * from './withIntersectionObserver.js';
 export * from './withMountWhenInView.js';
 export * from './withResponsiveOptions.js';
-export * from './withScrolledInView.js';
+export * from './withScrolledInView/index.js';
 export * from './withVue2.js';

package/decorators/index.js

@@ -6,6 +6,6 @@ export * from "./withFreezedOptions.js";
 export * from "./withIntersectionObserver.js";
 export * from "./withMountWhenInView.js";
 export * from "./withResponsiveOptions.js";
-export * from "./withScrolledInView.js";
+export * from "./withScrolledInView/index.js";
 export * from "./withVue2.js";
 //# sourceMappingURL=index.js.map

package/decorators/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/index.ts"],
-  "sourcesContent": ["export * from './withBreakpointManager.js';\nexport * from './withBreakpointObserver.js';\nexport * from './withDrag.js';\nexport * from './withExtraConfig.js';\nexport * from './withFreezedOptions.js';\nexport * from './withIntersectionObserver.js';\nexport * from './withMountWhenInView.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView.js';\nexport * from './withVue2.js';\n"],
+  "sourcesContent": ["export * from './withBreakpointManager.js';\nexport * from './withBreakpointObserver.js';\nexport * from './withDrag.js';\nexport * from './withExtraConfig.js';\nexport * from './withFreezedOptions.js';\nexport * from './withIntersectionObserver.js';\nexport * from './withMountWhenInView.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView/index.js';\nexport * from './withVue2.js';\n"],
   "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/decorators/withDrag.d.ts

@@ -1,7 +1,7 @@
 import type { BaseDecorator, BaseInterface } from '../Base/types.js';
 import type { Base } from '../Base/index.js';
 import type { DragServiceOptions, DragServiceProps } from '../services/drag.js';
-export declare type DragDecoratorOptions = DragServiceOptions & {
+export type DragDecoratorOptions = DragServiceOptions & {
     target?: (this: Base, instance: Base) => HTMLElement;
 };
 export interface WithDragInterface extends BaseInterface {

package/decorators/withScrolledInView/index.cjs

@@ -0,0 +1,22 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/decorators/withScrolledInView/index.ts
+var withScrolledInView_exports = {};
+module.exports = __toCommonJS(withScrolledInView_exports);
+__reExport(withScrolledInView_exports, require("./withScrolledInView.cjs"), module.exports);
+__reExport(withScrolledInView_exports, require("./types.cjs"), module.exports);
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=index.cjs.map

package/decorators/withScrolledInView/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/decorators/withScrolledInView/index.ts"],
+  "sourcesContent": ["export * from './withScrolledInView.js';\nexport * from './types.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,uCAAc,qCAAd;AACA,uCAAc,wBADd;",
+  "names": []
+}

package/decorators/withScrolledInView/index.d.ts

@@ -0,0 +1,2 @@
+export * from './withScrolledInView.js';
+export * from './types.js';

package/decorators/withScrolledInView/index.js

@@ -0,0 +1,3 @@
+export * from "./withScrolledInView.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/decorators/withScrolledInView/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/decorators/withScrolledInView/index.ts"],
+  "sourcesContent": ["export * from './withScrolledInView.js';\nexport * from './types.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;",
+  "names": []
+}

package/decorators/withScrolledInView/types.cjs

@@ -0,0 +1,19 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=types.cjs.map

package/decorators/withScrolledInView/types.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/js-toolkit/decorators/withScrolledInView/types.ts"],
+  "sourcesContent": ["export type OffsetValue = 'start' | 'center' | 'end' | string | number;\n\nexport type NormalizedOffset = [[OffsetValue, OffsetValue], [OffsetValue, OffsetValue]];\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/decorators/withScrolledInView/types.d.ts

@@ -0,0 +1,2 @@
+export type OffsetValue = 'start' | 'center' | 'end' | string | number;
+export type NormalizedOffset = [[OffsetValue, OffsetValue], [OffsetValue, OffsetValue]];

package/decorators/withScrolledInView/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/decorators/withScrolledInView/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}