@studiometa/js-toolkit 3.0.0-beta.1 → 3.0.0-beta.3

package/Base/managers/RefsManager.js

@@ -31,43 +31,10 @@ function refBelongToInstance(ref, rootElement, name) {
   );
   return firstComponentAncestor === rootElement;
 }
-function __register(that, refName) {
-  const isMultiple = endsWith(refName, "[]");
-  const propName = normalizeRefName(refName);
-  const { name } = that.__base.$options;
-  const attributes = features.get("attributes");
-  const refs = [];
-  const selector = `[${attributes.ref}="${refName}"],[${attributes.ref}="${name}.${refName}"]`;
-  for (const ref of that.__element.querySelectorAll(selector)) {
-    if (refBelongToInstance(ref, that.__element, name)) {
-      refs.push(ref);
-    }
-  }
-  if (isDev && !isMultiple && refs.length > 1) {
-    console.warn(
-      `[${that.__base.$id}]`,
-      `The "${refName}" ref has been found multiple times.`,
-      "Did you forgot to add the `[]` suffix to its name?"
-    );
-  }
-  if (refs.length) {
-    that.__eventsManager.bindRef(refName, refs);
-  }
-  Object.defineProperty(that, camelCase(propName), {
-    // @todo remove usage of non-multiple refs as array
-    value: isMultiple || refs.length > 1 ? refs : refs[0],
-    enumerable: true,
-    configurable: true
-  });
-}
-function __unregister(that, refName) {
-  const propName = normalizeRefName(refName);
-  const refs = isArray(that[propName]) ? that[propName] : [that[propName]];
-  that.__eventsManager.unbindRef(refName, refs);
-}
 class RefsManager extends AbstractManager {
   /**
    * Get refs configuration.
+   * @private
    */
   get __refs() {
     return this.__config.refs ?? [];
@@ -76,13 +43,58 @@ class RefsManager extends AbstractManager {
    * Register all refs.
    */
   registerAll() {
-    for (const refName of this.__refs) __register(this, refName);
+    for (const refName of this.__refs) {
+      this.__register(refName);
+    }
   }
   /**
    * Unregister all refs.
    */
   unregisterAll() {
-    for (const refName of this.__refs) __unregister(this, refName);
+    for (const refName of this.__refs) {
+      this.__unregister(refName);
+    }
+  }
+  /**
+   * Register one ref.
+   * @private
+   */
+  __register(refName) {
+    const isMultiple = endsWith(refName, "[]");
+    const propName = normalizeRefName(refName);
+    const { name } = this.__base.__config;
+    const attributes = features.get("attributes");
+    const refs = [];
+    const selector = `[${attributes.ref}="${refName}"],[${attributes.ref}="${name}.${refName}"]`;
+    for (const ref of this.__element.querySelectorAll(selector)) {
+      if (refBelongToInstance(ref, this.__element, name)) {
+        refs.push(ref);
+      }
+    }
+    if (isDev && !isMultiple && refs.length > 1) {
+      console.warn(
+        `[${this.__base.$id}]`,
+        `The "${refName}" ref has been found multiple times.`,
+        "Did you forgot to add the `[]` suffix to its name?"
+      );
+    }
+    if (refs.length) {
+      this.__eventsManager.bindRef(refName, refs);
+    }
+    Object.defineProperty(this.props, camelCase(propName), {
+      // @todo remove usage of non-multiple refs as array
+      value: isMultiple || refs.length > 1 ? refs : refs[0],
+      enumerable: true,
+      configurable: true
+    });
+  }
+  /**
+   * Unregister one ref.
+   */
+  __unregister(refName) {
+    const propName = normalizeRefName(refName);
+    const refs = this.props[propName];
+    this.__eventsManager.unbindRef(refName, isArray(refs) ? refs : [refs]);
   }
 }
 export {

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 {\n  isDev,\n  isArray,\n  getAncestorWhereUntil,\n  endsWith,\n  startsWith,\n  memo,\n  camelCase,\n} from '../../utils/index.js';\nimport { features } from '../features.js';\n\nconst NORMALIZE_REF_NAME_REGEX = /\\[\\]$/;\nconst NAMESPACED_REF_REGEX = /^(.*\\.)/;\n\n/**\n * Normalize the name of ref.\n */\nexport const normalizeRefName = memo(function normalizeRefName(name: string) {\n  let normalizedName = name;\n\n  if (endsWith(name, '[]')) {\n    normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, '');\n  }\n\n  if (normalizedName.includes('.')) {\n    return normalizedName.replace(NAMESPACED_REF_REGEX, '');\n  }\n\n  return normalizedName;\n});\n\n/**\n * Filter refs belonging to the related Base instance.\n */\nfunction refBelongToInstance(ref: HTMLElement, rootElement: HTMLElement, name: string) {\n  const attributes = features.get('attributes');\n  const isPrefixed = startsWith(ref.getAttribute(attributes.ref), name);\n  const firstComponentAncestor = getAncestorWhereUntil(\n    ref,\n    (el) =>\n      el &&\n      (isPrefixed\n        ? el.getAttribute(attributes.component) === name && el\n        : el.getAttribute(attributes.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 = endsWith(refName, '[]');\n  const propName = normalizeRefName(refName);\n  const { name } = that.__base.$options;\n  const attributes = features.get('attributes');\n  const refs = [] as HTMLElement[];\n  const selector = `[${attributes.ref}=\"${refName}\"],[${attributes.ref}=\"${name}.${refName}\"]`;\n\n  for (const ref of that.__element.querySelectorAll<HTMLElement>(selector)) {\n    if (refBelongToInstance(ref, that.__element, name)) {\n      refs.push(ref);\n    }\n  }\n\n  /* v8 ignore next 7 */\n  if (isDev && !isMultiple && refs.length > 1) {\n    console.warn(\n      `[${that.__base.$id}]`,\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 (refs.length) {\n    that.__eventsManager.bindRef(refName, refs);\n  }\n\n  Object.defineProperty(that, camelCase(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    for (const refName of this.__refs) __register(this, refName);\n  }\n\n  /**\n   * Unregister all refs.\n   */\n  unregisterAll() {\n    for (const refName of this.__refs) __unregister(this, refName);\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AAEzB,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAKtB,MAAM,mBAAmB,KAAK,SAASA,kBAAiB,MAAc;AAC3E,MAAI,iBAAiB;AAErB,MAAI,SAAS,MAAM,IAAI,GAAG;AACxB,qBAAiB,eAAe,QAAQ,0BAA0B,EAAE;AAAA,EACtE;AAEA,MAAI,eAAe,SAAS,GAAG,GAAG;AAChC,WAAO,eAAe,QAAQ,sBAAsB,EAAE;AAAA,EACxD;AAEA,SAAO;AACT,CAAC;AAKD,SAAS,oBAAoB,KAAkB,aAA0B,MAAc;AACrF,QAAM,aAAa,SAAS,IAAI,YAAY;AAC5C,QAAM,aAAa,WAAW,IAAI,aAAa,WAAW,GAAG,GAAG,IAAI;AACpE,QAAM,yBAAyB;AAAA,IAC7B;AAAA,IACA,CAAC,OACC,OACC,aACG,GAAG,aAAa,WAAW,SAAS,MAAM,QAAQ,KAClD,GAAG,aAAa,WAAW,SAAS,MACxC,OAAO;AAAA,IACT,CAAC,OAAO,OAAO;AAAA,EACjB;AAEA,SAAO,2BAA2B;AACpC;AASA,SAAS,WAAW,MAAmB,SAAiB;AACtD,QAAM,aAAa,SAAS,SAAS,IAAI;AACzC,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,EAAE,KAAK,IAAI,KAAK,OAAO;AAC7B,QAAM,aAAa,SAAS,IAAI,YAAY;AAC5C,QAAM,OAAO,CAAC;AACd,QAAM,WAAW,IAAI,WAAW,GAAG,KAAK,OAAO,OAAO,WAAW,GAAG,KAAK,IAAI,IAAI,OAAO;AAExF,aAAW,OAAO,KAAK,UAAU,iBAA8B,QAAQ,GAAG;AACxE,QAAI,oBAAoB,KAAK,KAAK,WAAW,IAAI,GAAG;AAClD,WAAK,KAAK,GAAG;AAAA,IACf;AAAA,EACF;AAGA,MAAI,SAAS,CAAC,cAAc,KAAK,SAAS,GAAG;AAC3C,YAAQ;AAAA,MACN,IAAI,KAAK,OAAO,GAAG;AAAA,MACnB,QAAQ,OAAO;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAEA,MAAI,KAAK,QAAQ;AACf,SAAK,gBAAgB,QAAQ,SAAS,IAAI;AAAA,EAC5C;AAEA,SAAO,eAAe,MAAM,UAAU,QAAQ,GAAG;AAAA;AAAA,IAE/C,OAAO,cAAc,KAAK,SAAS,IAAI,OAAO,KAAK,CAAC;AAAA,IACpD,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB,CAAC;AACH;AAKA,SAAS,aAAa,MAAmB,SAAiB;AACxD,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,OAAO,QAAQ,KAAK,QAAQ,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,KAAK,QAAQ,CAAC;AACvE,OAAK,gBAAgB,UAAU,SAAS,IAAI;AAC9C;AAOO,MAAM,oBAAoB,gBAAgB;AAAA;AAAA;AAAA;AAAA,EAI/C,IAAI,SAAS;AACX,WAAO,KAAK,SAAS,QAAQ,CAAC;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,eAAW,WAAW,KAAK,OAAQ,YAAW,MAAM,OAAO;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB;AACd,eAAW,WAAW,KAAK,OAAQ,cAAa,MAAM,OAAO;AAAA,EAC/D;AACF;",
+  "sourcesContent": ["import { AbstractManager } from './AbstractManager.js';\nimport {\n  isDev,\n  isArray,\n  getAncestorWhereUntil,\n  endsWith,\n  startsWith,\n  memo,\n  camelCase,\n} from '../../utils/index.js';\nimport { features } from '../features.js';\n\nconst NORMALIZE_REF_NAME_REGEX = /\\[\\]$/;\nconst NAMESPACED_REF_REGEX = /^(.*\\.)/;\n\n/**\n * Normalize the name of ref.\n */\nexport const normalizeRefName = memo(function normalizeRefName(name: string) {\n  let normalizedName = name;\n\n  if (endsWith(name, '[]')) {\n    normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, '');\n  }\n\n  if (normalizedName.includes('.')) {\n    return normalizedName.replace(NAMESPACED_REF_REGEX, '');\n  }\n\n  return normalizedName;\n});\n\n/**\n * Filter refs belonging to the related Base instance.\n */\nfunction refBelongToInstance(ref: HTMLElement, rootElement: HTMLElement, name: string) {\n  const attributes = features.get('attributes');\n  const isPrefixed = startsWith(ref.getAttribute(attributes.ref), name);\n  const firstComponentAncestor = getAncestorWhereUntil(\n    ref,\n    (el) =>\n      el &&\n      (isPrefixed\n        ? el.getAttribute(attributes.component) === name && el\n        : el.getAttribute(attributes.component)) &&\n      el !== rootElement,\n    (el) => el === rootElement,\n  );\n\n  return firstComponentAncestor === rootElement;\n}\n\n/**\n * Refs Manager\n *\n * @todo Use `MutationObserver` to automatically update refs?\n */\nexport class RefsManager<T> extends AbstractManager<T> {\n  /**\n   * Get refs configuration.\n   * @private\n   */\n  get __refs() {\n    return this.__config.refs ?? [];\n  }\n\n  /**\n   * Register all refs.\n   */\n  registerAll() {\n    for (const refName of this.__refs) {\n      this.__register(refName);\n    }\n  }\n\n  /**\n   * Unregister all refs.\n   */\n  unregisterAll() {\n    for (const refName of this.__refs) {\n      this.__unregister(refName);\n    }\n  }\n\n  /**\n   * Register one ref.\n   * @private\n   */\n  __register(refName: string) {\n    const isMultiple = endsWith(refName, '[]');\n    const propName = normalizeRefName(refName);\n    const { name } = this.__base.__config;\n    const attributes = features.get('attributes');\n    const refs = [] as HTMLElement[];\n    const selector = `[${attributes.ref}=\"${refName}\"],[${attributes.ref}=\"${name}.${refName}\"]`;\n\n    for (const ref of this.__element.querySelectorAll<HTMLElement>(selector)) {\n      if (refBelongToInstance(ref, this.__element, name)) {\n        refs.push(ref);\n      }\n    }\n\n    /* v8 ignore next 7 */\n    if (isDev && !isMultiple && refs.length > 1) {\n      console.warn(\n        `[${this.__base.$id}]`,\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 (refs.length) {\n      this.__eventsManager.bindRef(refName, refs);\n    }\n\n    Object.defineProperty(this.props, camelCase(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   */\n  __unregister(refName: string) {\n    const propName = normalizeRefName(refName);\n    const refs = this.props[propName];\n    this.__eventsManager.unbindRef(refName, isArray(refs) ? refs : [refs]);\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AAEzB,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAKtB,MAAM,mBAAmB,KAAK,SAASA,kBAAiB,MAAc;AAC3E,MAAI,iBAAiB;AAErB,MAAI,SAAS,MAAM,IAAI,GAAG;AACxB,qBAAiB,eAAe,QAAQ,0BAA0B,EAAE;AAAA,EACtE;AAEA,MAAI,eAAe,SAAS,GAAG,GAAG;AAChC,WAAO,eAAe,QAAQ,sBAAsB,EAAE;AAAA,EACxD;AAEA,SAAO;AACT,CAAC;AAKD,SAAS,oBAAoB,KAAkB,aAA0B,MAAc;AACrF,QAAM,aAAa,SAAS,IAAI,YAAY;AAC5C,QAAM,aAAa,WAAW,IAAI,aAAa,WAAW,GAAG,GAAG,IAAI;AACpE,QAAM,yBAAyB;AAAA,IAC7B;AAAA,IACA,CAAC,OACC,OACC,aACG,GAAG,aAAa,WAAW,SAAS,MAAM,QAAQ,KAClD,GAAG,aAAa,WAAW,SAAS,MACxC,OAAO;AAAA,IACT,CAAC,OAAO,OAAO;AAAA,EACjB;AAEA,SAAO,2BAA2B;AACpC;AAOO,MAAM,oBAAuB,gBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrD,IAAI,SAAS;AACX,WAAO,KAAK,SAAS,QAAQ,CAAC;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,eAAW,WAAW,KAAK,QAAQ;AACjC,WAAK,WAAW,OAAO;AAAA,IACzB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB;AACd,eAAW,WAAW,KAAK,QAAQ;AACjC,WAAK,aAAa,OAAO;AAAA,IAC3B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,SAAiB;AAC1B,UAAM,aAAa,SAAS,SAAS,IAAI;AACzC,UAAM,WAAW,iBAAiB,OAAO;AACzC,UAAM,EAAE,KAAK,IAAI,KAAK,OAAO;AAC7B,UAAM,aAAa,SAAS,IAAI,YAAY;AAC5C,UAAM,OAAO,CAAC;AACd,UAAM,WAAW,IAAI,WAAW,GAAG,KAAK,OAAO,OAAO,WAAW,GAAG,KAAK,IAAI,IAAI,OAAO;AAExF,eAAW,OAAO,KAAK,UAAU,iBAA8B,QAAQ,GAAG;AACxE,UAAI,oBAAoB,KAAK,KAAK,WAAW,IAAI,GAAG;AAClD,aAAK,KAAK,GAAG;AAAA,MACf;AAAA,IACF;AAGA,QAAI,SAAS,CAAC,cAAc,KAAK,SAAS,GAAG;AAC3C,cAAQ;AAAA,QACN,IAAI,KAAK,OAAO,GAAG;AAAA,QACnB,QAAQ,OAAO;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAEA,QAAI,KAAK,QAAQ;AACf,WAAK,gBAAgB,QAAQ,SAAS,IAAI;AAAA,IAC5C;AAEA,WAAO,eAAe,KAAK,OAAO,UAAU,QAAQ,GAAG;AAAA;AAAA,MAErD,OAAO,cAAc,KAAK,SAAS,IAAI,OAAO,KAAK,CAAC;AAAA,MACpD,YAAY;AAAA,MACZ,cAAc;AAAA,IAChB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,aAAa,SAAiB;AAC5B,UAAM,WAAW,iBAAiB,OAAO;AACzC,UAAM,OAAO,KAAK,MAAM,QAAQ;AAChC,SAAK,gBAAgB,UAAU,SAAS,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;AAAA,EACvE;AACF;",
   "names": ["normalizeRefName"]
 }

package/Base/managers/ResponsiveOptionsManager.d.ts

@@ -6,7 +6,7 @@ export type ResponsiveOptionObject = OptionObject & {
 /**
  * Class options to manage options as data attributes on an HTML element.
  */
-export declare class ResponsiveOptionsManager extends OptionsManager {
+export declare class ResponsiveOptionsManager<T> extends OptionsManager<T> {
     /**
      * Get an option value.
      *
@@ -23,4 +23,12 @@ export declare class ResponsiveOptionsManager extends OptionsManager {
      * @param {ResponsiveOptionObject} config The option configuration.
      */
     set(name: string, value: unknown, config: ResponsiveOptionObject): void;
+    /**
+     * Get the currently active responsive name of an option.
+     *
+     * @param   {ResponsiveOptionsManager} that
+     * @param   {string} name The default name of the option.
+     * @returns {string}      The responsive name if one matches the current breakpoint, the default name otherwise.
+     */
+    __getResponsiveName(name: string): string;
 }

package/Base/managers/ResponsiveOptionsManager.js

@@ -2,27 +2,6 @@ import { OptionsManager, __getPropertyName } from "./OptionsManager.js";
 import { useResize } from "../../services/index.js";
 import { isDev } from "../../utils/index.js";
 import { features } from "../features.js";
-function __getResponsiveName(that, name) {
-  const { breakpoint } = useResize().props();
-  if (!breakpoint) {
-    return name;
-  }
-  let responsiveName = name;
-  const propertyName = __getPropertyName(name).toLowerCase();
-  const regex = new RegExp(`${propertyName}:(.+)$`, "i");
-  const attributes = features.get("attributes");
-  const dataOptionRegExp = new RegExp(`^${attributes.option}-`);
-  for (const optionName of that.__element.getAttributeNames()) {
-    if (regex.test(optionName)) {
-      const [, breakpoints] = optionName.match(regex);
-      const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
-      if (isInBreakpoint) {
-        responsiveName = optionName.replace(dataOptionRegExp, "");
-      }
-    }
-  }
-  return responsiveName;
-}
 class ResponsiveOptionsManager extends OptionsManager {
   /**
    * Get an option value.
@@ -35,7 +14,7 @@ class ResponsiveOptionsManager extends OptionsManager {
     if (!config.responsive) {
       return super.get(name, config);
     }
-    return super.get(__getResponsiveName(this, name), config);
+    return super.get(this.__getResponsiveName(name), config);
   }
   /**
    * Set an option value.
@@ -50,8 +29,36 @@ class ResponsiveOptionsManager extends OptionsManager {
       return;
     }
     if (isDev) {
-      console.warn(`[${this.__config.name}]`, "Responsive options are read-only.");
+      console.warn(`[${this.__base.$id}]`, "Responsive options are read-only.");
+    }
+  }
+  /**
+   * Get the currently active responsive name of an option.
+   *
+   * @param   {ResponsiveOptionsManager} that
+   * @param   {string} name The default name of the option.
+   * @returns {string}      The responsive name if one matches the current breakpoint, the default name otherwise.
+   */
+  __getResponsiveName(name) {
+    const { breakpoint } = useResize().props();
+    if (!breakpoint) {
+      return name;
+    }
+    let responsiveName = name;
+    const propertyName = __getPropertyName(name).toLowerCase();
+    const regex = new RegExp(`${propertyName}:(.+)$`, "i");
+    const attributes = features.get("attributes");
+    const dataOptionRegExp = new RegExp(`^${attributes.option}-`);
+    for (const optionName of this.__element.getAttributeNames()) {
+      if (regex.test(optionName)) {
+        const [, breakpoints] = optionName.match(regex);
+        const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
+        if (isInBreakpoint) {
+          responsiveName = optionName.replace(dataOptionRegExp, "");
+        }
+      }
     }
+    return responsiveName;
   }
 }
 export {

package/Base/managers/ResponsiveOptionsManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/ResponsiveOptionsManager.ts"],
-  "sourcesContent": ["import { OptionsManager, __getPropertyName } from './OptionsManager.js';\nimport type { OptionObject } from './OptionsManager.js';\nimport { useResize } from '../../services/index.js';\nimport { isDev } from '../../utils/index.js';\nimport { features } from '../features.js';\n\nexport type ResponsiveOptionObject = OptionObject & { responsive?: boolean };\n\n/**\n * Get the currently active responsive name of an option.\n *\n * @param   {ResponsiveOptionsManager} that\n * @param   {string} name The default name of the option.\n * @returns {string}      The responsive name if one matches the current breakpoint, the default name otherwise.\n */\nfunction __getResponsiveName(that: ResponsiveOptionsManager, name: string) {\n  const { breakpoint } = useResize().props();\n\n  if (!breakpoint) {\n    return name;\n  }\n\n  let responsiveName = name;\n  const propertyName = __getPropertyName(name).toLowerCase();\n  const regex = new RegExp(`${propertyName}:(.+)$`, 'i');\n  const attributes = features.get('attributes');\n  const dataOptionRegExp = new RegExp(`^${attributes.option}-`);\n\n  for (const optionName of that.__element.getAttributeNames()) {\n    if (regex.test(optionName)) {\n      const [, breakpoints] = optionName.match(regex);\n      const isInBreakpoint = breakpoints.split(':').includes(breakpoint);\n      if (isInBreakpoint) {\n        responsiveName = optionName.replace(dataOptionRegExp, '');\n      }\n    }\n  }\n\n  return responsiveName;\n}\n\n/**\n * Class options to manage options as data attributes on an HTML element.\n */\nexport class ResponsiveOptionsManager extends OptionsManager {\n  /**\n   * Get an option value.\n   *\n   * @param   {string} name The option name.\n   * @param   {ResponsiveOptionObject} config The option configuration.\n   * @returns {any}\n   */\n  get(name: string, config: ResponsiveOptionObject) {\n    if (!config.responsive) {\n      return super.get(name, config);\n    }\n\n    return super.get(__getResponsiveName(this, name), config);\n  }\n\n  /**\n   * Set an option value.\n   *\n   * @param {string} name The option name.\n   * @param {any} value The new value.\n   * @param {ResponsiveOptionObject} config The option configuration.\n   */\n  set(name: string, value: unknown, config: ResponsiveOptionObject) {\n    if (!config.responsive) {\n      super.set(name, value, config);\n      return;\n    }\n\n    if (isDev) {\n      console.warn(`[${this.__config.name}]`, 'Responsive options are read-only.');\n    }\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB,yBAAyB;AAElD,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AACtB,SAAS,gBAAgB;AAWzB,SAAS,oBAAoB,MAAgC,MAAc;AACzE,QAAM,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM;AAEzC,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,MAAI,iBAAiB;AACrB,QAAM,eAAe,kBAAkB,IAAI,EAAE,YAAY;AACzD,QAAM,QAAQ,IAAI,OAAO,GAAG,YAAY,UAAU,GAAG;AACrD,QAAM,aAAa,SAAS,IAAI,YAAY;AAC5C,QAAM,mBAAmB,IAAI,OAAO,IAAI,WAAW,MAAM,GAAG;AAE5D,aAAW,cAAc,KAAK,UAAU,kBAAkB,GAAG;AAC3D,QAAI,MAAM,KAAK,UAAU,GAAG;AAC1B,YAAM,CAAC,EAAE,WAAW,IAAI,WAAW,MAAM,KAAK;AAC9C,YAAM,iBAAiB,YAAY,MAAM,GAAG,EAAE,SAAS,UAAU;AACjE,UAAI,gBAAgB;AAClB,yBAAiB,WAAW,QAAQ,kBAAkB,EAAE;AAAA,MAC1D;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAKO,MAAM,iCAAiC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3D,IAAI,MAAc,QAAgC;AAChD,QAAI,CAAC,OAAO,YAAY;AACtB,aAAO,MAAM,IAAI,MAAM,MAAM;AAAA,IAC/B;AAEA,WAAO,MAAM,IAAI,oBAAoB,MAAM,IAAI,GAAG,MAAM;AAAA,EAC1D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,IAAI,MAAc,OAAgB,QAAgC;AAChE,QAAI,CAAC,OAAO,YAAY;AACtB,YAAM,IAAI,MAAM,OAAO,MAAM;AAC7B;AAAA,IACF;AAEA,QAAI,OAAO;AACT,cAAQ,KAAK,IAAI,KAAK,SAAS,IAAI,KAAK,mCAAmC;AAAA,IAC7E;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { OptionsManager, __getPropertyName } from './OptionsManager.js';\nimport type { OptionObject } from './OptionsManager.js';\nimport { useResize } from '../../services/index.js';\nimport { isDev } from '../../utils/index.js';\nimport { features } from '../features.js';\n\nexport type ResponsiveOptionObject = OptionObject & { responsive?: boolean };\n\n/**\n * Class options to manage options as data attributes on an HTML element.\n */\nexport class ResponsiveOptionsManager<T> extends OptionsManager<T> {\n  /**\n   * Get an option value.\n   *\n   * @param   {string} name The option name.\n   * @param   {ResponsiveOptionObject} config The option configuration.\n   * @returns {any}\n   */\n  get(name: string, config: ResponsiveOptionObject) {\n    if (!config.responsive) {\n      return super.get(name, config);\n    }\n\n    return super.get(this.__getResponsiveName(name), config);\n  }\n\n  /**\n   * Set an option value.\n   *\n   * @param {string} name The option name.\n   * @param {any} value The new value.\n   * @param {ResponsiveOptionObject} config The option configuration.\n   */\n  set(name: string, value: unknown, config: ResponsiveOptionObject) {\n    if (!config.responsive) {\n      super.set(name, value, config);\n      return;\n    }\n\n    if (isDev) {\n      console.warn(`[${this.__base.$id}]`, 'Responsive options are read-only.');\n    }\n  }\n\n  /**\n   * Get the currently active responsive name of an option.\n   *\n   * @param   {ResponsiveOptionsManager} that\n   * @param   {string} name The default name of the option.\n   * @returns {string}      The responsive name if one matches the current breakpoint, the default name otherwise.\n   */\n  __getResponsiveName(name: string) {\n    const { breakpoint } = useResize().props();\n\n    if (!breakpoint) {\n      return name;\n    }\n\n    let responsiveName = name;\n    const propertyName = __getPropertyName(name).toLowerCase();\n    const regex = new RegExp(`${propertyName}:(.+)$`, 'i');\n    const attributes = features.get('attributes');\n    const dataOptionRegExp = new RegExp(`^${attributes.option}-`);\n\n    for (const optionName of this.__element.getAttributeNames()) {\n      if (regex.test(optionName)) {\n        const [, breakpoints] = optionName.match(regex);\n        const isInBreakpoint = breakpoints.split(':').includes(breakpoint);\n        if (isInBreakpoint) {\n          responsiveName = optionName.replace(dataOptionRegExp, '');\n        }\n      }\n    }\n\n    return responsiveName;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB,yBAAyB;AAElD,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AACtB,SAAS,gBAAgB;AAOlB,MAAM,iCAAoC,eAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQjE,IAAI,MAAc,QAAgC;AAChD,QAAI,CAAC,OAAO,YAAY;AACtB,aAAO,MAAM,IAAI,MAAM,MAAM;AAAA,IAC/B;AAEA,WAAO,MAAM,IAAI,KAAK,oBAAoB,IAAI,GAAG,MAAM;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,IAAI,MAAc,OAAgB,QAAgC;AAChE,QAAI,CAAC,OAAO,YAAY;AACtB,YAAM,IAAI,MAAM,OAAO,MAAM;AAC7B;AAAA,IACF;AAEA,QAAI,OAAO;AACT,cAAQ,KAAK,IAAI,KAAK,OAAO,GAAG,KAAK,mCAAmC;AAAA,IAC1E;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,oBAAoB,MAAc;AAChC,UAAM,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM;AAEzC,QAAI,CAAC,YAAY;AACf,aAAO;AAAA,IACT;AAEA,QAAI,iBAAiB;AACrB,UAAM,eAAe,kBAAkB,IAAI,EAAE,YAAY;AACzD,UAAM,QAAQ,IAAI,OAAO,GAAG,YAAY,UAAU,GAAG;AACrD,UAAM,aAAa,SAAS,IAAI,YAAY;AAC5C,UAAM,mBAAmB,IAAI,OAAO,IAAI,WAAW,MAAM,GAAG;AAE5D,eAAW,cAAc,KAAK,UAAU,kBAAkB,GAAG;AAC3D,UAAI,MAAM,KAAK,UAAU,GAAG;AAC1B,cAAM,CAAC,EAAE,WAAW,IAAI,WAAW,MAAM,KAAK;AAC9C,cAAM,iBAAiB,YAAY,MAAM,GAAG,EAAE,SAAS,UAAU;AACjE,YAAI,gBAAgB;AAClB,2BAAiB,WAAW,QAAQ,kBAAkB,EAAE;AAAA,QAC1D;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/Base/managers/ServicesManager.d.ts

@@ -1,6 +1,13 @@
 import { usePointer, useRaf, useResize, useScroll, useKey } from '../../services/index.js';
 import type { PointerServiceInterface, RafServiceInterface, ResizeServiceInterface, ScrollServiceInterface, KeyServiceInterface, ServiceInterface } from '../../services/index.js';
 import { AbstractManager } from './AbstractManager.js';
+declare const SERVICES_MAP: {
+    scrolled: typeof useScroll;
+    resized: typeof useResize;
+    ticked: typeof useRaf;
+    moved: typeof usePointer;
+    keyed: typeof useKey;
+};
 type Services = {
     scrolled: ScrollServiceInterface;
     resized: ResizeServiceInterface;
@@ -8,27 +15,19 @@ type Services = {
     moved: PointerServiceInterface;
     keyed: KeyServiceInterface;
 } & Record<string, ServiceInterface<unknown>>;
+type ServiceProps = typeof SERVICES_MAP & Record<string, <T>() => ServiceInterface<T>>;
 type ServiceNames = keyof Services;
 /**
  * Services management for the Base class.
  *
  * @todo Add support for disabled services on mount when the method is defined.
  */
-export declare class ServicesManager extends AbstractManager {
+export declare class ServicesManager extends AbstractManager<ServiceProps> {
     /**
-     * Holder for custom services.
+     * Custom props
+     * @private
      */
-    __customServices: Record<string, <T>() => ServiceInterface<T>>;
-    /**
-     * Get registered services.
-     */
-    get __services(): {
-        scrolled: typeof useScroll;
-        resized: typeof useResize;
-        ticked: typeof useRaf;
-        moved: typeof usePointer;
-        keyed: typeof useKey;
-    };
+    __props: ServiceProps;
     /**
      * Test if the given service is registered.
      */

package/Base/managers/ServicesManager.js

@@ -11,34 +11,28 @@ const SERVICES_MAP = {
 const SERVICE_NAMES = Object.keys(SERVICES_MAP);
 class ServicesManager extends AbstractManager {
   /**
-   * Holder for custom services.
+   * Custom props
+   * @private
    */
-  __customServices = {};
-  /**
-   * Get registered services.
-   */
-  get __services() {
-    return {
-      ...this.__customServices,
-      ...SERVICES_MAP
-    };
-  }
+  __props = {
+    ...SERVICES_MAP
+  };
   /**
    * Test if the given service is registered.
    */
   has(service) {
     if (!((isFunction(this.__base[service]) || // @ts-ignore
-    this.__base.__hasEvent(service)) && this.__services[service])) {
+    this.__base.__hasEvent(service)) && this.props[service])) {
       return false;
     }
-    const { has } = this.__services[service]();
+    const { has } = this.props[service]();
     return has(this.__base.$id);
   }
   /**
    * Get a service props by name.
    */
   get(service) {
-    return this.__services[service]().props();
+    return this.props[service]().props();
   }
   /**
    * Init the given service and bind it to the given instance.
@@ -52,11 +46,11 @@ class ServicesManager extends AbstractManager {
     }
     if (
       // @ts-ignore
-      !(isFunction(this.__base[service]) || this.__base.__hasEvent(service)) || !this.__services[service]
+      !(isFunction(this.__base[service]) || this.__base.__hasEvent(service)) || !this.props[service]
     ) {
       return noop;
     }
-    const serviceInstance = this.__services[service]();
+    const serviceInstance = this.props[service]();
     serviceInstance.add(this.__base.$id, (...args) => this.__base.__callMethod(service, ...args));
     return this.disable.bind(this, service);
   }
@@ -64,7 +58,7 @@ class ServicesManager extends AbstractManager {
    * Enable all services and return methods to disable them.
    */
   enableAll() {
-    return Object.keys(this.__services).map((serviceName) => this.enable(serviceName));
+    return Object.keys(this.props).map((serviceName) => this.enable(serviceName));
   }
   /**
    * Disable all services.
@@ -72,7 +66,7 @@ class ServicesManager extends AbstractManager {
    * @returns {void}
    */
   disableAll() {
-    for (const serviceName of Object.keys(this.__services)) {
+    for (const serviceName of Object.keys(this.props)) {
       this.disable(serviceName);
     }
   }
@@ -80,10 +74,10 @@ class ServicesManager extends AbstractManager {
    * Disable a service.
    */
   disable(service) {
-    if (!this.__services[service]) {
+    if (!this.props[service]) {
       return;
     }
-    const { remove } = this.__services[service]();
+    const { remove } = this.props[service]();
     remove(this.__base.$id);
   }
   /**
@@ -112,7 +106,7 @@ class ServicesManager extends AbstractManager {
    *   The `use...` function for the service.
    */
   register(name, useFunction) {
-    this.__customServices[name] = useFunction;
+    this.props[name] = useFunction;
     this.__base.__addEmits(name);
   }
   /**
@@ -129,7 +123,7 @@ class ServicesManager extends AbstractManager {
       return;
     }
     this.__base.__removeEmits(name);
-    delete this.__customServices[name];
+    delete this.props[name];
   }
 }
 export {

package/Base/managers/ServicesManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/ServicesManager.ts"],
-  "sourcesContent": ["import { usePointer, useRaf, useResize, useScroll, useKey } from '../../services/index.js';\nimport type {\n  PointerServiceInterface,\n  RafServiceInterface,\n  ResizeServiceInterface,\n  ScrollServiceInterface,\n  KeyServiceInterface,\n  ServiceInterface,\n} from '../../services/index.js';\nimport { AbstractManager } from './AbstractManager.js';\nimport { noop, isFunction, isDefined, isDev } from '../../utils/index.js';\n\nconst SERVICES_MAP = {\n  scrolled: useScroll,\n  resized: useResize,\n  ticked: useRaf,\n  moved: usePointer,\n  keyed: useKey,\n};\n\nconst SERVICE_NAMES = Object.keys(SERVICES_MAP);\n\ntype Services = {\n  scrolled: ScrollServiceInterface;\n  resized: ResizeServiceInterface;\n  ticked: RafServiceInterface;\n  moved: PointerServiceInterface;\n  keyed: KeyServiceInterface;\n} & Record<string, ServiceInterface<unknown>>;\n\ntype ServiceNames = keyof Services;\n\n/**\n * Services management for the Base class.\n *\n * @todo Add support for disabled services on mount when the method is defined.\n */\nexport class ServicesManager extends AbstractManager {\n  /**\n   * Holder for custom services.\n   */\n  __customServices: Record<string, <T>() => ServiceInterface<T>> = {};\n\n  /**\n   * Get registered services.\n   */\n  get __services() {\n    return {\n      ...this.__customServices,\n      ...SERVICES_MAP,\n    };\n  }\n\n  /**\n   * Test if the given service is registered.\n   */\n  has(service: ServiceNames | string): boolean {\n    if (\n      !(\n        (isFunction(this.__base[service]) ||\n          // @ts-ignore\n          this.__base.__hasEvent(service)) &&\n        this.__services[service]\n      )\n    ) {\n      return false;\n    }\n\n    const { has } = this.__services[service]();\n    return has(this.__base.$id);\n  }\n\n  /**\n   * Get a service props by name.\n   */\n  get<S extends ServiceNames | string>(service: S): ReturnType<Services[S]['props']> {\n    // @ts-ignore\n    return this.__services[service]().props();\n  }\n\n  /**\n   * Init the given service and bind it to the given instance.\n   *\n   * @param  {ServiceNames} service The name of the service.\n   * @returns {() => void}          A function to unbind the service.\n   */\n  enable(service: ServiceNames): () => void {\n    if (this.has(service)) {\n      return this.disable.bind(this, service);\n    }\n\n    if (\n      // @ts-ignore\n      !(isFunction(this.__base[service]) || this.__base.__hasEvent(service)) ||\n      !this.__services[service]\n    ) {\n      return noop;\n    }\n    const serviceInstance = this.__services[service]();\n\n    serviceInstance.add(this.__base.$id, (...args) => this.__base.__callMethod(service, ...args));\n\n    return this.disable.bind(this, service);\n  }\n\n  /**\n   * Enable all services and return methods to disable them.\n   */\n  enableAll() {\n    return Object.keys(this.__services).map((serviceName) => this.enable(serviceName));\n  }\n\n  /**\n   * Disable all services.\n   *\n   * @returns {void}\n   */\n  disableAll() {\n    for (const serviceName of Object.keys(this.__services)) {\n      this.disable(serviceName);\n    }\n  }\n\n  /**\n   * Disable a service.\n   */\n  disable(service: ServiceNames) {\n    if (!this.__services[service]) {\n      return;\n    }\n\n    const { remove } = this.__services[service]();\n    remove(this.__base.$id);\n  }\n\n  /**\n   * Toggle a service.\n   */\n  toggle(service: ServiceNames, force?: boolean) {\n    if (isDefined(force)) {\n      if (force && !this.has(service)) {\n        this.enable(service);\n      }\n\n      if (!force && this.has(service)) {\n        this.disable(service);\n      }\n    } else if (this.has(service)) {\n      this.disable(service);\n    } else {\n      this.enable(service);\n    }\n  }\n\n  /**\n   * Register a new service to be enabled/disabled.\n   *\n   * @param {string} name\n   *   The name of the service hook.\n   * @param {<T>(...args:unknown[]) => ServiceInterface<T>} useFunction\n   *   The `use...` function for the service.\n   */\n  register(name: string, useFunction: <T>(...args: unknown[]) => ServiceInterface<T>) {\n    this.__customServices[name] = useFunction;\n    this.__base.__addEmits(name);\n  }\n\n  /**\n   * Unregister a new service to be enabled disabled.\n   *\n   * @param {string} name\n   *   The name of the service hook.\n   */\n  unregister(name: string) {\n    if (SERVICE_NAMES.includes(name)) {\n      if (isDev) {\n        throw new Error(`[ServicesManager] The \\`${name}\\` core service can not be unregistered.`);\n      }\n      return;\n    }\n\n    this.__base.__removeEmits(name);\n    delete this.__customServices[name];\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { usePointer, useRaf, useResize, useScroll, useKey } from '../../services/index.js';\nimport type {\n  PointerServiceInterface,\n  RafServiceInterface,\n  ResizeServiceInterface,\n  ScrollServiceInterface,\n  KeyServiceInterface,\n  ServiceInterface,\n} from '../../services/index.js';\nimport { AbstractManager } from './AbstractManager.js';\nimport { noop, isFunction, isDefined, isDev } from '../../utils/index.js';\n\nconst SERVICES_MAP = {\n  scrolled: useScroll,\n  resized: useResize,\n  ticked: useRaf,\n  moved: usePointer,\n  keyed: useKey,\n};\n\nconst SERVICE_NAMES = Object.keys(SERVICES_MAP);\n\ntype Services = {\n  scrolled: ScrollServiceInterface;\n  resized: ResizeServiceInterface;\n  ticked: RafServiceInterface;\n  moved: PointerServiceInterface;\n  keyed: KeyServiceInterface;\n} & Record<string, ServiceInterface<unknown>>;\n\ntype ServiceProps = typeof SERVICES_MAP & Record<string, <T>() => ServiceInterface<T>>;\n\ntype ServiceNames = keyof Services;\n\n/**\n * Services management for the Base class.\n *\n * @todo Add support for disabled services on mount when the method is defined.\n */\nexport class ServicesManager extends AbstractManager<ServiceProps> {\n  /**\n   * Custom props\n   * @private\n   */\n  __props = {\n    ...SERVICES_MAP,\n  } as ServiceProps;\n\n  /**\n   * Test if the given service is registered.\n   */\n  has(service: ServiceNames | string): boolean {\n    if (\n      !(\n        (isFunction(this.__base[service]) ||\n          // @ts-ignore\n          this.__base.__hasEvent(service)) &&\n        this.props[service]\n      )\n    ) {\n      return false;\n    }\n\n    const { has } = this.props[service]();\n    return has(this.__base.$id);\n  }\n\n  /**\n   * Get a service props by name.\n   */\n  get<S extends ServiceNames | string>(service: S): ReturnType<Services[S]['props']> {\n    // @ts-ignore\n    return this.props[service]().props();\n  }\n\n  /**\n   * Init the given service and bind it to the given instance.\n   *\n   * @param  {ServiceNames} service The name of the service.\n   * @returns {() => void}          A function to unbind the service.\n   */\n  enable(service: ServiceNames): () => void {\n    if (this.has(service)) {\n      return this.disable.bind(this, service);\n    }\n\n    if (\n      // @ts-ignore\n      !(isFunction(this.__base[service]) || this.__base.__hasEvent(service)) ||\n      !this.props[service]\n    ) {\n      return noop;\n    }\n    const serviceInstance = this.props[service]();\n\n    serviceInstance.add(this.__base.$id, (...args) => this.__base.__callMethod(service, ...args));\n\n    return this.disable.bind(this, service);\n  }\n\n  /**\n   * Enable all services and return methods to disable them.\n   */\n  enableAll() {\n    return Object.keys(this.props).map((serviceName) => this.enable(serviceName));\n  }\n\n  /**\n   * Disable all services.\n   *\n   * @returns {void}\n   */\n  disableAll() {\n    for (const serviceName of Object.keys(this.props)) {\n      this.disable(serviceName);\n    }\n  }\n\n  /**\n   * Disable a service.\n   */\n  disable(service: ServiceNames) {\n    if (!this.props[service]) {\n      return;\n    }\n\n    const { remove } = this.props[service]();\n    remove(this.__base.$id);\n  }\n\n  /**\n   * Toggle a service.\n   */\n  toggle(service: ServiceNames, force?: boolean) {\n    if (isDefined(force)) {\n      if (force && !this.has(service)) {\n        this.enable(service);\n      }\n\n      if (!force && this.has(service)) {\n        this.disable(service);\n      }\n    } else if (this.has(service)) {\n      this.disable(service);\n    } else {\n      this.enable(service);\n    }\n  }\n\n  /**\n   * Register a new service to be enabled/disabled.\n   *\n   * @param {string} name\n   *   The name of the service hook.\n   * @param {<T>(...args:unknown[]) => ServiceInterface<T>} useFunction\n   *   The `use...` function for the service.\n   */\n  register(name: string, useFunction: <T>(...args: unknown[]) => ServiceInterface<T>) {\n    this.props[name] = useFunction;\n    this.__base.__addEmits(name);\n  }\n\n  /**\n   * Unregister a new service to be enabled disabled.\n   *\n   * @param {string} name\n   *   The name of the service hook.\n   */\n  unregister(name: string) {\n    if (SERVICE_NAMES.includes(name)) {\n      if (isDev) {\n        throw new Error(`[ServicesManager] The \\`${name}\\` core service can not be unregistered.`);\n      }\n      return;\n    }\n\n    this.__base.__removeEmits(name);\n    delete this.props[name];\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/Base/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/utils.ts"],
-  "sourcesContent": ["import { isArray, isDefined, SmartQueue, dashCase } from '../utils/index.js';\nimport type { Base, BaseConfig, BaseConstructor } from './index.js';\nimport { features } from './features.js';\n\nlet queue: SmartQueue;\n\n/**\n * Add a task to the main queue.\n */\nexport function addToQueue(fn: () => unknown) {\n  if (features.get('blocking')) {\n    fn();\n    return;\n  }\n\n  if (!queue) {\n    queue = new SmartQueue();\n  }\n\n  return queue.add(fn);\n}\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 */\nexport function getSelector(nameOrSelector: string): string {\n  const { component } = features.get('attributes');\n  const prefix = features.get('prefix');\n  const key = prefix + component + nameOrSelector;\n\n  if (!selectors.has(key)) {\n    const parts = [\n      // Tag select\n      `${prefix}-${dashCase(nameOrSelector)}`,\n      // Single selector\n      `[${component}=\"${nameOrSelector}\"]`,\n      // Selector in the middle of a list of selectors\n      `[${component}*=\"${separator}${nameOrSelector}${separator}\"]`,\n      // Selector at the end of a list of selectors\n      `[${component}$=\"${separator}${nameOrSelector}\"]`,\n      // Selector at the beginning of a list of selectors\n      `[${component}^=\"${nameOrSelector}${separator}\"]`,\n    ];\n    selectors.set(key, parts.join(','));\n  }\n\n  return selectors.get(key);\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, and if the selector does not\n  // start with an uppercase letter, matching a component's name, try a classic DOM selector.\n  if (elements.length === 0 && nameOrSelector[0] === nameOrSelector[0].toLowerCase()) {\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 */\nexport function getEventTarget(\n  instance: Base,\n  event: string,\n  config: BaseConfig,\n): Base['$el'] {\n  if (eventIsDefinedInConfig(event, config) || eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n}\n\nconst instances = new Set<Base>();\n\n/**\n * Get all mounted instances or the ones from a given component.\n */\nexport function getInstances(): Set<Base>;\nexport function getInstances<T extends BaseConstructor = BaseConstructor>(\n  ctor: T,\n): Set<InstanceType<T>>;\nexport function getInstances<T extends BaseConstructor = BaseConstructor>(\n  ctor?: T,\n): Set<InstanceType<T>> | Set<Base> {\n  if (isDefined(ctor)) {\n    const filteredInstances = new Set<InstanceType<T>>();\n    for (const instance of instances) {\n      if (instance instanceof ctor) {\n        filteredInstances.add(instance as InstanceType<T>);\n      }\n    }\n    return filteredInstances;\n  } else {\n    return new Set(instances);\n  }\n}\n\nexport function addInstance(instance: Base) {\n  instances.add(instance);\n}\n\nexport function deleteInstance(instance: Base) {\n  instances.delete(instance);\n}\n"],
-  "mappings": "AAAA,SAAS,SAAS,WAAW,YAAY,gBAAgB;AAEzD,SAAS,gBAAgB;AAEzB,IAAI;AAKG,SAAS,WAAW,IAAmB;AAC5C,MAAI,SAAS,IAAI,UAAU,GAAG;AAC5B,OAAG;AACH;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,YAAQ,IAAI,WAAW;AAAA,EACzB;AAEA,SAAO,MAAM,IAAI,EAAE;AACrB;AAEA,MAAM,YAAY,oBAAI,IAAI;AAG1B,MAAM,YAAY;AAKX,SAAS,YAAY,gBAAgC;AAC1D,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,YAAY;AAC/C,QAAM,SAAS,SAAS,IAAI,QAAQ;AACpC,QAAM,MAAM,SAAS,YAAY;AAEjC,MAAI,CAAC,UAAU,IAAI,GAAG,GAAG;AACvB,UAAM,QAAQ;AAAA;AAAA,MAEZ,GAAG,MAAM,IAAI,SAAS,cAAc,CAAC;AAAA;AAAA,MAErC,IAAI,SAAS,KAAK,cAAc;AAAA;AAAA,MAEhC,IAAI,SAAS,MAAM,SAAS,GAAG,cAAc,GAAG,SAAS;AAAA;AAAA,MAEzD,IAAI,SAAS,MAAM,SAAS,GAAG,cAAc;AAAA;AAAA,MAE7C,IAAI,SAAS,MAAM,cAAc,GAAG,SAAS;AAAA,IAC/C;AACA,cAAU,IAAI,KAAK,MAAM,KAAK,GAAG,CAAC;AAAA,EACpC;AAEA,SAAO,UAAU,IAAI,GAAG;AAC1B;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,QAAQ;AAAA,EAAC;AAIT,MAAI,SAAS,WAAW,KAAK,eAAe,CAAC,MAAM,eAAe,CAAC,EAAE,YAAY,GAAG;AAClF,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,KAAK,EAAE,CAAC;AACxC;AAKO,SAAS,eACd,UACA,OACA,QACa;AACb,MAAI,uBAAuB,OAAO,MAAM,KAAK,cAAc,OAAO,SAAS,GAAG,GAAG;AAC/E,WAAO,SAAS;AAAA,EAClB;AACF;AAEA,MAAM,YAAY,oBAAI,IAAU;AASzB,SAAS,aACd,MACkC;AAClC,MAAI,UAAU,IAAI,GAAG;AACnB,UAAM,oBAAoB,oBAAI,IAAqB;AACnD,eAAW,YAAY,WAAW;AAChC,UAAI,oBAAoB,MAAM;AAC5B,0BAAkB,IAAI,QAA2B;AAAA,MACnD;AAAA,IACF;AACA,WAAO;AAAA,EACT,OAAO;AACL,WAAO,IAAI,IAAI,SAAS;AAAA,EAC1B;AACF;AAEO,SAAS,YAAY,UAAgB;AAC1C,YAAU,IAAI,QAAQ;AACxB;AAEO,SAAS,eAAe,UAAgB;AAC7C,YAAU,OAAO,QAAQ;AAC3B;",
+  "sourcesContent": ["import { isArray, isDefined, SmartQueue, dashCase } from '../utils/index.js';\nimport type { Base, BaseConfig, BaseConstructor } from './index.js';\nimport { features } from './features.js';\n\nlet queue: SmartQueue;\n\n/**\n * Add a task to the main queue.\n */\nexport function addToQueue(fn: () => unknown) {\n  if (features.get('blocking')) {\n    fn();\n    return;\n  }\n\n  if (!queue) {\n    queue = new SmartQueue();\n  }\n\n  return queue.add(fn);\n}\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 */\nexport function getSelector(nameOrSelector: string): string {\n  const { component } = features.get('attributes');\n  const prefix = features.get('prefix');\n  const key = prefix + component + nameOrSelector;\n\n  if (!selectors.has(key)) {\n    const parts = [\n      // Tag select\n      `${prefix}-${dashCase(nameOrSelector)}`,\n      // Single selector\n      `[${component}=\"${nameOrSelector}\"]`,\n      // Selector in the middle of a list of selectors\n      `[${component}*=\"${separator}${nameOrSelector}${separator}\"]`,\n      // Selector at the end of a list of selectors\n      `[${component}$=\"${separator}${nameOrSelector}\"]`,\n      // Selector at the beginning of a list of selectors\n      `[${component}^=\"${nameOrSelector}${separator}\"]`,\n    ];\n    selectors.set(key, parts.join(','));\n  }\n\n  return selectors.get(key);\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, and if the selector does not\n  // start with an uppercase letter, matching a component's name, try a classic DOM selector.\n  if (elements.length === 0 && nameOrSelector[0] === nameOrSelector[0].toLowerCase()) {\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 */\nexport function getEventTarget(instance: Base, event: string, config: BaseConfig): Base['$el'] {\n  if (eventIsDefinedInConfig(event, config) || eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n}\n\nconst instances = new Set<Base>();\n\n/**\n * Get all mounted instances or the ones from a given component.\n */\nexport function getInstances(): Set<Base>;\nexport function getInstances<T extends BaseConstructor = BaseConstructor>(\n  ctor: T,\n): Set<InstanceType<T>>;\nexport function getInstances<T extends BaseConstructor = BaseConstructor>(\n  ctor?: T,\n): Set<InstanceType<T>> | Set<Base> {\n  if (isDefined(ctor)) {\n    const filteredInstances = new Set<InstanceType<T>>();\n    for (const instance of instances) {\n      if (instance instanceof ctor) {\n        filteredInstances.add(instance as InstanceType<T>);\n      }\n    }\n    return filteredInstances;\n  } else {\n    return new Set(instances);\n  }\n}\n\nexport function addInstance(instance: Base) {\n  instances.add(instance);\n}\n\nexport function deleteInstance(instance: Base) {\n  instances.delete(instance);\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS,WAAW,YAAY,gBAAgB;AAEzD,SAAS,gBAAgB;AAEzB,IAAI;AAKG,SAAS,WAAW,IAAmB;AAC5C,MAAI,SAAS,IAAI,UAAU,GAAG;AAC5B,OAAG;AACH;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,YAAQ,IAAI,WAAW;AAAA,EACzB;AAEA,SAAO,MAAM,IAAI,EAAE;AACrB;AAEA,MAAM,YAAY,oBAAI,IAAI;AAG1B,MAAM,YAAY;AAKX,SAAS,YAAY,gBAAgC;AAC1D,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,YAAY;AAC/C,QAAM,SAAS,SAAS,IAAI,QAAQ;AACpC,QAAM,MAAM,SAAS,YAAY;AAEjC,MAAI,CAAC,UAAU,IAAI,GAAG,GAAG;AACvB,UAAM,QAAQ;AAAA;AAAA,MAEZ,GAAG,MAAM,IAAI,SAAS,cAAc,CAAC;AAAA;AAAA,MAErC,IAAI,SAAS,KAAK,cAAc;AAAA;AAAA,MAEhC,IAAI,SAAS,MAAM,SAAS,GAAG,cAAc,GAAG,SAAS;AAAA;AAAA,MAEzD,IAAI,SAAS,MAAM,SAAS,GAAG,cAAc;AAAA;AAAA,MAE7C,IAAI,SAAS,MAAM,cAAc,GAAG,SAAS;AAAA,IAC/C;AACA,cAAU,IAAI,KAAK,MAAM,KAAK,GAAG,CAAC;AAAA,EACpC;AAEA,SAAO,UAAU,IAAI,GAAG;AAC1B;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,QAAQ;AAAA,EAAC;AAIT,MAAI,SAAS,WAAW,KAAK,eAAe,CAAC,MAAM,eAAe,CAAC,EAAE,YAAY,GAAG;AAClF,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,KAAK,EAAE,CAAC;AACxC;AAKO,SAAS,eAAe,UAAgB,OAAe,QAAiC;AAC7F,MAAI,uBAAuB,OAAO,MAAM,KAAK,cAAc,OAAO,SAAS,GAAG,GAAG;AAC/E,WAAO,SAAS;AAAA,EAClB;AACF;AAEA,MAAM,YAAY,oBAAI,IAAU;AASzB,SAAS,aACd,MACkC;AAClC,MAAI,UAAU,IAAI,GAAG;AACnB,UAAM,oBAAoB,oBAAI,IAAqB;AACnD,eAAW,YAAY,WAAW;AAChC,UAAI,oBAAoB,MAAM;AAC5B,0BAAkB,IAAI,QAA2B;AAAA,MACnD;AAAA,IACF;AACA,WAAO;AAAA,EACT,OAAO;AACL,WAAO,IAAI,IAAI,SAAS;AAAA,EAC1B;AACF;AAEO,SAAS,YAAY,UAAgB;AAC1C,YAAU,IAAI,QAAQ;AACxB;AAEO,SAAS,eAAe,UAAgB;AAC7C,YAAU,OAAO,QAAQ;AAC3B;",
   "names": []
 }

package/decorators/index.d.ts

@@ -7,6 +7,7 @@ export * from './withIntersectionObserver.js';
 export * from './withMountOnMediaQuery.js';
 export * from './withMountWhenInView.js';
 export * from './withMountWhenPrefersMotion.js';
+export * from './withMutation.js';
 export * from './withName.js';
 export * from './withRelativePointer.js';
 export * from './withResponsiveOptions.js';

package/decorators/index.js

@@ -7,6 +7,7 @@ export * from "./withIntersectionObserver.js";
 export * from "./withMountOnMediaQuery.js";
 export * from "./withMountWhenInView.js";
 export * from "./withMountWhenPrefersMotion.js";
+export * from "./withMutation.js";
 export * from "./withName.js";
 export * from "./withRelativePointer.js";
 export * from "./withResponsiveOptions.js";

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 './withMountOnMediaQuery.js';\nexport * from './withMountWhenInView.js';\nexport * from './withMountWhenPrefersMotion.js';\nexport * from './withName.js';\nexport * from './withRelativePointer.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView/index.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "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 './withMountOnMediaQuery.js';\nexport * from './withMountWhenInView.js';\nexport * from './withMountWhenPrefersMotion.js';\nexport * from './withMutation.js';\nexport * from './withName.js';\nexport * from './withRelativePointer.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView/index.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/decorators/withBreakpointObserver.js

@@ -50,9 +50,7 @@ function withBreakpointObserver(BaseClass) {
      */
     static config = {
       ...BaseClass.config,
-      name: `${BaseClass.config.name}WithBreakpointObserver`,
       options: {
-        ...BaseClass.config?.options,
         activeBreakpoints: String,
         inactiveBreakpoints: String
       }

package/decorators/withBreakpointObserver.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withBreakpointObserver.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport type { ResizeServiceProps } from '../services/index.js';\nimport { isDev, startsWith } from '../utils/index.js';\nimport { features } from '../Base/features.js';\n\nexport interface WithBreakpointObserverProps extends BaseProps {\n  $options: {\n    activeBreakpoints?: string;\n    inactiveBreakpoints?: string;\n  };\n}\n\nexport interface WithBreakpointObserverInterface extends BaseInterface {}\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n *\n * @param   {Base<WithBreakpointObserverProps>} instance The component's instance.\n * @param   {string} [breakpoint] The breakpoint to test.\n * @returns {string} The action to trigger.\n */\nfunction testBreakpoints(\n  instance: Base<WithBreakpointObserverProps>,\n  breakpoint: string = useResize().props().breakpoint,\n): string {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  const isInActiveBreakpoint =\n    activeBreakpoints && activeBreakpoints.split(' ').includes(breakpoint);\n  const isInInactiveBreakpoint =\n    inactiveBreakpoints && inactiveBreakpoints.split(' ').includes(breakpoint);\n\n  if (\n    (activeBreakpoints && isInActiveBreakpoint) ||\n    (inactiveBreakpoints && !isInInactiveBreakpoint)\n  ) {\n    return '$mount';\n  }\n\n  return '$destroy';\n}\n\n/**\n * Test if the given instance is configured for breakpoints.\n *\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {boolean} True if configured correctly, false otherwise.\n */\nfunction hasBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): boolean {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  return Boolean(activeBreakpoints || inactiveBreakpoints);\n}\n\n/**\n * Test if the given instance has a conflicting configuration for breakpoints.\n *\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {void}\n */\nfunction testConflictingBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): void {\n  const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;\n  if (activeBreakpoints && inactiveBreakpoints) {\n    throw new Error(\n      `[${name}] Incorrect configuration: the \\`activeBreakpoints\\` and \\`inactiveBreakpoints\\` are not compatible.`,\n    );\n  }\n}\n\n/**\n * Callback triggered when the window is resized.\n */\nfunction createResizeCallback(\n  instance: Base<WithBreakpointObserverProps>,\n): (resizeProps: ResizeServiceProps) => void {\n  return ({ breakpoint }) => {\n    const action = testBreakpoints(instance, breakpoint);\n\n    // Always destroy before mounting\n    if (action === '$destroy' && instance.$isMounted) {\n      instance[action]();\n    } else if (action === '$mount' && !instance.$isMounted) {\n      setTimeout(() => instance[action](), 0);\n    }\n  };\n}\n\n/**\n * Add the current instance to the resize service.\n *\n * @param {string} key      The key for the resize service callback.\n * @param {Base}   instance The instance to observe.\n */\nfunction addToResize(key, instance) {\n  if (isDev) {\n    testConflictingBreakpointConfiguration(instance);\n  }\n\n  const { add, has, props } = useResize();\n\n  if (!has(key)) {\n    const callback = createResizeCallback(instance);\n    add(key, callback);\n    callback(props());\n  }\n}\n\n/**\n * BreakpointObserver class.\n */\nexport function withBreakpointObserver<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithBreakpointObserverInterface, S, WithBreakpointObserverProps> {\n  /**\n   * Class.\n   */\n  class WithBreakpointObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithBreakpointObserverProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithBreakpointObserver`,\n      options: {\n        ...BaseClass.config?.options,\n        activeBreakpoints: String,\n        inactiveBreakpoints: String,\n      },\n    };\n\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const { remove, props } = useResize();\n      const { name } = this.$options;\n\n      // Do nothing if no breakpoint has been defined.\n      // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n      if (!props().breakpoint) {\n        if (isDev) {\n          throw new Error(\n            `[${name}] The \\`BreakpointObserver\\` class requires breakpoints to be defined.`,\n          );\n        }\n        return;\n      }\n\n      const key = `BreakpointObserver-${this.$id}`;\n      const attributes = features.get('attributes');\n\n      // Watch change on the `data-options` attribute to emit the `set:options` event.\n      const mutationObserver = new MutationObserver(([mutation]) => {\n        if (\n          mutation.type === 'attributes' &&\n          startsWith(mutation.attributeName, `${attributes.option}-`)\n        ) {\n          // Stop here silently when no breakpoint configuration given.\n          if (!hasBreakpointConfiguration(this)) {\n            this.$mount();\n            remove(key);\n            return;\n          }\n\n          addToResize(key, this);\n        }\n      });\n      mutationObserver.observe(this.$el, { attributes: true });\n\n      // Stop here silently when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return;\n      }\n\n      addToResize(key, this);\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    async $mount() {\n      // Execute normal behavior when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return super.$mount();\n      }\n\n      const action = testBreakpoints(this);\n      if (action === '$mount') {\n        return super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointObserver;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport type { ResizeServiceProps } from '../services/index.js';\nimport { isDev, startsWith } from '../utils/index.js';\nimport { features } from '../Base/features.js';\n\nexport interface WithBreakpointObserverProps extends BaseProps {\n  $options: {\n    activeBreakpoints?: string;\n    inactiveBreakpoints?: string;\n  };\n}\n\nexport interface WithBreakpointObserverInterface extends BaseInterface {}\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n *\n * @param   {Base<WithBreakpointObserverProps>} instance The component's instance.\n * @param   {string} [breakpoint] The breakpoint to test.\n * @returns {string} The action to trigger.\n */\nfunction testBreakpoints(\n  instance: Base<WithBreakpointObserverProps>,\n  breakpoint: string = useResize().props().breakpoint,\n): string {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  const isInActiveBreakpoint =\n    activeBreakpoints && activeBreakpoints.split(' ').includes(breakpoint);\n  const isInInactiveBreakpoint =\n    inactiveBreakpoints && inactiveBreakpoints.split(' ').includes(breakpoint);\n\n  if (\n    (activeBreakpoints && isInActiveBreakpoint) ||\n    (inactiveBreakpoints && !isInInactiveBreakpoint)\n  ) {\n    return '$mount';\n  }\n\n  return '$destroy';\n}\n\n/**\n * Test if the given instance is configured for breakpoints.\n *\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {boolean} True if configured correctly, false otherwise.\n */\nfunction hasBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): boolean {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  return Boolean(activeBreakpoints || inactiveBreakpoints);\n}\n\n/**\n * Test if the given instance has a conflicting configuration for breakpoints.\n *\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {void}\n */\nfunction testConflictingBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): void {\n  const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;\n  if (activeBreakpoints && inactiveBreakpoints) {\n    throw new Error(\n      `[${name}] Incorrect configuration: the \\`activeBreakpoints\\` and \\`inactiveBreakpoints\\` are not compatible.`,\n    );\n  }\n}\n\n/**\n * Callback triggered when the window is resized.\n */\nfunction createResizeCallback(\n  instance: Base<WithBreakpointObserverProps>,\n): (resizeProps: ResizeServiceProps) => void {\n  return ({ breakpoint }) => {\n    const action = testBreakpoints(instance, breakpoint);\n\n    // Always destroy before mounting\n    if (action === '$destroy' && instance.$isMounted) {\n      instance[action]();\n    } else if (action === '$mount' && !instance.$isMounted) {\n      setTimeout(() => instance[action](), 0);\n    }\n  };\n}\n\n/**\n * Add the current instance to the resize service.\n *\n * @param {string} key      The key for the resize service callback.\n * @param {Base}   instance The instance to observe.\n */\nfunction addToResize(key, instance) {\n  if (isDev) {\n    testConflictingBreakpointConfiguration(instance);\n  }\n\n  const { add, has, props } = useResize();\n\n  if (!has(key)) {\n    const callback = createResizeCallback(instance);\n    add(key, callback);\n    callback(props());\n  }\n}\n\n/**\n * BreakpointObserver class.\n */\nexport function withBreakpointObserver<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithBreakpointObserverInterface, S, WithBreakpointObserverProps> {\n  /**\n   * Class.\n   */\n  class WithBreakpointObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithBreakpointObserverProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      options: {\n        activeBreakpoints: String,\n        inactiveBreakpoints: String,\n      },\n    };\n\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const { remove, props } = useResize();\n      const { name } = this.$options;\n\n      // Do nothing if no breakpoint has been defined.\n      // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n      if (!props().breakpoint) {\n        if (isDev) {\n          throw new Error(\n            `[${name}] The \\`BreakpointObserver\\` class requires breakpoints to be defined.`,\n          );\n        }\n        return;\n      }\n\n      const key = `BreakpointObserver-${this.$id}`;\n      const attributes = features.get('attributes');\n\n      // Watch change on the `data-options` attribute to emit the `set:options` event.\n      const mutationObserver = new MutationObserver(([mutation]) => {\n        if (\n          mutation.type === 'attributes' &&\n          startsWith(mutation.attributeName, `${attributes.option}-`)\n        ) {\n          // Stop here silently when no breakpoint configuration given.\n          if (!hasBreakpointConfiguration(this)) {\n            this.$mount();\n            remove(key);\n            return;\n          }\n\n          addToResize(key, this);\n        }\n      });\n      mutationObserver.observe(this.$el, { attributes: true });\n\n      // Stop here silently when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return;\n      }\n\n      addToResize(key, this);\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    async $mount() {\n      // Execute normal behavior when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return super.$mount();\n      }\n\n      const action = testBreakpoints(this);\n      if (action === '$mount') {\n        return super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointObserver;\n}\n"],
+  "mappings": "AAEA,SAAS,iBAAiB;AAE1B,SAAS,OAAO,kBAAkB;AAClC,SAAS,gBAAgB;AAkBzB,SAAS,gBACP,UACA,aAAqB,UAAU,EAAE,MAAM,EAAE,YACjC;AACR,QAAM,EAAE,mBAAmB,oBAAoB,IAAI,SAAS;AAC5D,QAAM,uBACJ,qBAAqB,kBAAkB,MAAM,GAAG,EAAE,SAAS,UAAU;AACvE,QAAM,yBACJ,uBAAuB,oBAAoB,MAAM,GAAG,EAAE,SAAS,UAAU;AAE3E,MACG,qBAAqB,wBACrB,uBAAuB,CAAC,wBACzB;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAQA,SAAS,2BAA2B,UAAsD;AACxF,QAAM,EAAE,mBAAmB,oBAAoB,IAAI,SAAS;AAC5D,SAAO,QAAQ,qBAAqB,mBAAmB;AACzD;AAQA,SAAS,uCAAuC,UAAmD;AACjG,QAAM,EAAE,mBAAmB,qBAAqB,KAAK,IAAI,SAAS;AAClE,MAAI,qBAAqB,qBAAqB;AAC5C,UAAM,IAAI;AAAA,MACR,IAAI,IAAI;AAAA,IACV;AAAA,EACF;AACF;AAKA,SAAS,qBACP,UAC2C;AAC3C,SAAO,CAAC,EAAE,WAAW,MAAM;AACzB,UAAM,SAAS,gBAAgB,UAAU,UAAU;AAGnD,QAAI,WAAW,cAAc,SAAS,YAAY;AAChD,eAAS,MAAM,EAAE;AAAA,IACnB,WAAW,WAAW,YAAY,CAAC,SAAS,YAAY;AACtD,iBAAW,MAAM,SAAS,MAAM,EAAE,GAAG,CAAC;AAAA,IACxC;AAAA,EACF;AACF;AAQA,SAAS,YAAY,KAAK,UAAU;AAClC,MAAI,OAAO;AACT,2CAAuC,QAAQ;AAAA,EACjD;AAEA,QAAM,EAAE,KAAK,KAAK,MAAM,IAAI,UAAU;AAEtC,MAAI,CAAC,IAAI,GAAG,GAAG;AACb,UAAM,WAAW,qBAAqB,QAAQ;AAC9C,QAAI,KAAK,QAAQ;AACjB,aAAS,MAAM,CAAC;AAAA,EAClB;AACF;AAKO,SAAS,uBACd,WACgF;AAAA,EAIhF,MAAM,+BAAgE,UAEpE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,SAAS;AAAA,QACP,mBAAmB;AAAA,QACnB,qBAAqB;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,YAAM,EAAE,QAAQ,MAAM,IAAI,UAAU;AACpC,YAAM,EAAE,KAAK,IAAI,KAAK;AAItB,UAAI,CAAC,MAAM,EAAE,YAAY;AACvB,YAAI,OAAO;AACT,gBAAM,IAAI;AAAA,YACR,IAAI,IAAI;AAAA,UACV;AAAA,QACF;AACA;AAAA,MACF;AAEA,YAAM,MAAM,sBAAsB,KAAK,GAAG;AAC1C,YAAM,aAAa,SAAS,IAAI,YAAY;AAG5C,YAAM,mBAAmB,IAAI,iBAAiB,CAAC,CAAC,QAAQ,MAAM;AAC5D,YACE,SAAS,SAAS,gBAClB,WAAW,SAAS,eAAe,GAAG,WAAW,MAAM,GAAG,GAC1D;AAEA,cAAI,CAAC,2BAA2B,IAAI,GAAG;AACrC,iBAAK,OAAO;AACZ,mBAAO,GAAG;AACV;AAAA,UACF;AAEA,sBAAY,KAAK,IAAI;AAAA,QACvB;AAAA,MACF,CAAC;AACD,uBAAiB,QAAQ,KAAK,KAAK,EAAE,YAAY,KAAK,CAAC;AAGvD,UAAI,CAAC,2BAA2B,IAAI,GAAG;AACrC;AAAA,MACF;AAEA,kBAAY,KAAK,IAAI;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAM,SAAS;AAEb,UAAI,CAAC,2BAA2B,IAAI,GAAG;AACrC,eAAO,MAAM,OAAO;AAAA,MACtB;AAEA,YAAM,SAAS,gBAAgB,IAAI;AACnC,UAAI,WAAW,UAAU;AACvB,eAAO,MAAM,OAAO;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withDrag.js

@@ -5,7 +5,7 @@ function withDrag(BaseClass, { target = (instance) => instance.$el, ...options }
      * Config.
      */
     static config = {
-      name: `${BaseClass.config.name}WithDrag`,
+      ...BaseClass.config,
       emits: ["dragged"]
     };
     /**

package/decorators/withDrag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withDrag.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { DragServiceOptions, DragServiceProps } from '../services/index.js';\nimport { useDrag } from '../services/index.js';\n\nexport type DragDecoratorOptions = DragServiceOptions & {\n  target?: (this: Base, instance: Base) => HTMLElement;\n};\n\nexport interface WithDragInterface extends BaseInterface {\n  dragged?(props: DragServiceProps): void;\n}\n\n/**\n * Add dragging capabilities to a component.\n */\nexport function withDrag<S extends Base>(\n  BaseClass: typeof Base,\n  { target = (instance) => instance.$el, ...options }: DragDecoratorOptions = {},\n): BaseDecorator<BaseInterface, S> {\n  /**\n   * Class.\n   */\n  class WithDrag<T extends BaseProps = BaseProps> extends BaseClass<T & WithDragInterface> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithDrag`,\n      emits: ['dragged'],\n    };\n\n    /**\n     * Class constructor.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$on('mounted', () => {\n        this.$services.register(\n          'dragged',\n          useDrag.bind(undefined, target.call(this, this), options),\n        );\n        this.$services.enable('dragged');\n      });\n\n      this.$on('destroyed', () => {\n        this.$services.disable('dragged');\n        this.$services.unregister('dragged');\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithDrag;\n}\n"],
-  "mappings": "AAGA,SAAS,eAAe;AAajB,SAAS,SACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,KAAK,GAAG,QAAQ,IAA0B,CAAC,GAC5C;AAAA,EAIjC,MAAM,iBAAkD,UAAiC;AAAA;AAAA;AAAA;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,OAAO,CAAC,SAAS;AAAA,IACnB;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU;AAAA,UACb;AAAA,UACA,QAAQ,KAAK,QAAW,OAAO,KAAK,MAAM,IAAI,GAAG,OAAO;AAAA,QAC1D;AACA,aAAK,UAAU,OAAO,SAAS;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,QAAQ,SAAS;AAChC,aAAK,UAAU,WAAW,SAAS;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { DragServiceOptions, DragServiceProps } from '../services/index.js';\nimport { useDrag } from '../services/index.js';\n\nexport type DragDecoratorOptions = DragServiceOptions & {\n  target?: (this: Base, instance: Base) => HTMLElement;\n};\n\nexport interface WithDragInterface extends BaseInterface {\n  dragged?(props: DragServiceProps): void;\n}\n\n/**\n * Add dragging capabilities to a component.\n */\nexport function withDrag<S extends Base>(\n  BaseClass: typeof Base,\n  { target = (instance) => instance.$el, ...options }: DragDecoratorOptions = {},\n): BaseDecorator<BaseInterface, S> {\n  /**\n   * Class.\n   */\n  class WithDrag<T extends BaseProps = BaseProps> extends BaseClass<T & WithDragInterface> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      emits: ['dragged'],\n    };\n\n    /**\n     * Class constructor.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$on('mounted', () => {\n        this.$services.register(\n          'dragged',\n          useDrag.bind(undefined, target.call(this, this), options),\n        );\n        this.$services.enable('dragged');\n      });\n\n      this.$on('destroyed', () => {\n        this.$services.disable('dragged');\n        this.$services.unregister('dragged');\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithDrag;\n}\n"],
+  "mappings": "AAGA,SAAS,eAAe;AAajB,SAAS,SACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,KAAK,GAAG,QAAQ,IAA0B,CAAC,GAC5C;AAAA,EAIjC,MAAM,iBAAkD,UAAiC;AAAA;AAAA;AAAA;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,OAAO,CAAC,SAAS;AAAA,IACnB;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU;AAAA,UACb;AAAA,UACA,QAAQ,KAAK,QAAW,OAAO,KAAK,MAAM,IAAI,GAAG,OAAO;AAAA,QAC1D;AACA,aAAK,UAAU,OAAO,SAAS;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,QAAQ,SAAS;AAChC,aAAK,UAAU,WAAW,SAAS;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withIntersectionObserver.js

@@ -6,9 +6,7 @@ function withIntersectionObserver(BaseClass, defaultOptions = { threshold: creat
      */
     static config = {
       ...BaseClass.config,
-      name: `${BaseClass.config.name}WithIntersectionObserver`,
       options: {
-        ...BaseClass.config?.options,
         intersectionObserver: Object
       },
       emits: ["intersected"]