@studiometa/js-toolkit 2.11.2 → 2.12.1

package/Base/managers/RefsManager.js

@@ -1,5 +1,12 @@
 import { AbstractManager } from "./AbstractManager.js";
-import { isDev, isArray, isDefined, getAncestorWhereUntil } from "../../utils/index.js";
+import {
+  isDev,
+  isArray,
+  isDefined,
+  getAncestorWhereUntil,
+  endsWith,
+  startsWith
+} from "../../utils/index.js";
 const NORMALIZE_REF_NAME_REGEX = /\[\]$/;
 const NAMESPACED_REF_REGEX = /^(.*\.)/;
 const normalizedRefNamesCache = /* @__PURE__ */ new Map();
@@ -8,7 +15,7 @@ function normalizeRefName(name) {
     return normalizedRefNamesCache.get(name);
   }
   let normalizedName = name;
-  if (name.endsWith("[]")) {
+  if (endsWith(name, "[]")) {
     normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, "");
   }
   if (normalizedName.includes(".")) {
@@ -18,7 +25,7 @@ function normalizeRefName(name) {
   return normalizedName;
 }
 function refBelongToInstance(ref, rootElement, name) {
-  const isPrefixed = ref.dataset.ref.startsWith(name);
+  const isPrefixed = startsWith(ref.dataset.ref, name);
   const firstComponentAncestor = getAncestorWhereUntil(
     ref,
     (el) => el && (isPrefixed ? el.dataset.component === name && el : isDefined(el.dataset.component)) && el !== rootElement,
@@ -27,7 +34,7 @@ function refBelongToInstance(ref, rootElement, name) {
   return firstComponentAncestor === rootElement;
 }
 function __register(that, refName) {
-  const isMultiple = refName.endsWith("[]");
+  const isMultiple = endsWith(refName, "[]");
   const propName = normalizeRefName(refName);
   const { name } = that.__base.$options;
   const refs = Array.from(
@@ -37,6 +44,7 @@ function __register(that, refName) {
   ).filter((ref) => refBelongToInstance(ref, that.__element, name));
   if (isDev && !isMultiple && refs.length > 1) {
     console.warn(
+      // @ts-ignore
       `[${that.__base.$options.name}]`,
       `The "${refName}" ref has been found multiple times.`,
       "Did you forgot to add the `[]` suffix to its name?"
@@ -45,6 +53,7 @@ function __register(that, refName) {
   if (!isMultiple && refs.length <= 1 && !isDefined(refs[0])) {
     if (isDev) {
       console.warn(
+        // @ts-ignore
         `[${that.__base.$options.name}]`,
         `The "${refName}" ref is missing.`,
         `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`
@@ -54,6 +63,7 @@ function __register(that, refName) {
   }
   that.__eventsManager.bindRef(refName, refs);
   Object.defineProperty(that, propName, {
+    // @todo remove usage of non-multiple refs as array
     value: isMultiple || refs.length > 1 ? refs : refs[0],
     enumerable: true,
     configurable: true
@@ -65,14 +75,25 @@ function __unregister(that, refName) {
   that.__eventsManager.unbindRef(refName, refs);
 }
 class RefsManager extends AbstractManager {
+  /**
+   * Get refs configuration.
+   */
   get __refs() {
     return this.__config.refs ?? [];
   }
+  /**
+   * Register all refs.
+   */
   registerAll() {
-    this.__refs.forEach((refName) => __register(this, refName));
+    for (const refName of this.__refs)
+      __register(this, refName);
   }
+  /**
+   * Unregister all refs.
+   */
   unregisterAll() {
-    this.__refs.forEach((refName) => __unregister(this, refName));
+    for (const refName of this.__refs)
+      __unregister(this, refName);
   }
 }
 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 { isDev, isArray, isDefined, getAncestorWhereUntil } from '../../utils/index.js';\n\nconst NORMALIZE_REF_NAME_REGEX = /\\[\\]$/;\nconst NAMESPACED_REF_REGEX = /^(.*\\.)/;\nconst normalizedRefNamesCache = new Map();\n\n/**\n * Normalize the name of ref.\n */\nexport function normalizeRefName(name: string) {\n  if (normalizedRefNamesCache.has(name)) {\n    return normalizedRefNamesCache.get(name);\n  }\n\n  let normalizedName = name;\n\n  if (name.endsWith('[]')) {\n    normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, '');\n  }\n\n  if (normalizedName.includes('.')) {\n    return normalizedName.replace(NAMESPACED_REF_REGEX, '');\n  }\n\n  normalizedRefNamesCache.set(name, normalizedName);\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 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;AACjC,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B,oBAAI,IAAI;AAKjC,SAAS,iBAAiB,MAAc;AAC7C,MAAI,wBAAwB,IAAI,IAAI,GAAG;AACrC,WAAO,wBAAwB,IAAI,IAAI;AAAA,EACzC;AAEA,MAAI,iBAAiB;AAErB,MAAI,KAAK,SAAS,IAAI,GAAG;AACvB,qBAAiB,eAAe,QAAQ,0BAA0B,EAAE;AAAA,EACtE;AAEA,MAAI,eAAe,SAAS,GAAG,GAAG;AAChC,WAAO,eAAe,QAAQ,sBAAsB,EAAE;AAAA,EACxD;AAEA,0BAAwB,IAAI,MAAM,cAAc;AAChD,SAAO;AACT;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;",
+  "sourcesContent": ["import { AbstractManager } from './AbstractManager.js';\nimport {\n  isDev,\n  isArray,\n  isDefined,\n  getAncestorWhereUntil,\n  endsWith,\n  startsWith,\n} from '../../utils/index.js';\n\nconst NORMALIZE_REF_NAME_REGEX = /\\[\\]$/;\nconst NAMESPACED_REF_REGEX = /^(.*\\.)/;\nconst normalizedRefNamesCache = new Map();\n\n/**\n * Normalize the name of ref.\n */\nexport function normalizeRefName(name: string) {\n  if (normalizedRefNamesCache.has(name)) {\n    return normalizedRefNamesCache.get(name);\n  }\n\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  normalizedRefNamesCache.set(name, normalizedName);\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 isPrefixed = startsWith(ref.dataset.ref, 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 = endsWith(refName, '[]');\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    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,OACK;AAEP,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B,oBAAI,IAAI;AAKjC,SAAS,iBAAiB,MAAc;AAC7C,MAAI,wBAAwB,IAAI,IAAI,GAAG;AACrC,WAAO,wBAAwB,IAAI,IAAI;AAAA,EACzC;AAEA,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,0BAAwB,IAAI,MAAM,cAAc;AAChD,SAAO;AACT;AAKA,SAAS,oBAAoB,KAAkB,aAA0B,MAAc;AACrF,QAAM,aAAa,WAAW,IAAI,QAAQ,KAAK,IAAI;AACnD,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,SAAS,SAAS,IAAI;AACzC,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,EAAE,KAAK,IAAI,KAAK,OAAO;AAE7B,QAAM,OAAO,MAAM;AAAA,IACjB,KAAK,UAAU;AAAA,MACb,cAAc,OAAO,iBAAiB,IAAI,IAAI,OAAO;AAAA,IACvD;AAAA,EACF,EAAE,OAAO,CAAC,QAAQ,oBAAoB,KAAK,KAAK,WAAW,IAAI,CAAC;AAEhE,MAAI,SAAS,CAAC,cAAc,KAAK,SAAS,GAAG;AAC3C,YAAQ;AAAA;AAAA,MAEN,IAAI,KAAK,OAAO,SAAS,IAAI;AAAA,MAC7B,QAAQ,OAAO;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAEA,MAAI,CAAC,cAAc,KAAK,UAAU,KAAK,CAAC,UAAU,KAAK,CAAC,CAAC,GAAG;AAC1D,QAAI,OAAO;AACT,cAAQ;AAAA;AAAA,QAEN,IAAI,KAAK,OAAO,SAAS,IAAI;AAAA,QAC7B,QAAQ,OAAO;AAAA,QACf,4BAA4B,OAAO;AAAA,MACrC;AAAA,IACF;AAEA;AAAA,EACF;AAEA,OAAK,gBAAgB,QAAQ,SAAS,IAAI;AAE1C,SAAO,eAAe,MAAM,UAAU;AAAA;AAAA,IAEpC,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;AAAQ,iBAAW,MAAM,OAAO;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB;AACd,eAAW,WAAW,KAAK;AAAQ,mBAAa,MAAM,OAAO;AAAA,EAC/D;AACF;",
   "names": []
 }

package/Base/managers/ResponsiveOptionsManager.cjs

@@ -33,22 +33,38 @@ function __getResponsiveName(that, name) {
   let responsiveName = name;
   const propertyName = (0, import_OptionsManager.__getPropertyName)(name);
   const regex = new RegExp(`${propertyName}:(.+)$`);
-  Object.keys(that.__element.dataset).filter((optionName) => regex.test(optionName)).forEach((optionName) => {
-    const [, breakpoints] = optionName.match(regex);
-    const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
-    if (isInBreakpoint) {
-      responsiveName = optionName.replace(/^option/, "");
+  for (const optionName of Object.keys(that.__element.dataset)) {
+    if (regex.test(optionName)) {
+      const [, breakpoints] = optionName.match(regex);
+      const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
+      if (isInBreakpoint) {
+        responsiveName = optionName.replace(/^option/, "");
+      }
     }
-  });
+  }
   return responsiveName;
 }
 var ResponsiveOptionsManager = class extends import_OptionsManager.OptionsManager {
+  /**
+   * Get an option value.
+   *
+   * @param   {string} name The option name.
+   * @param   {ResponsiveOptionObject} config The option configuration.
+   * @returns {any}
+   */
   get(name, config) {
     if (!config.responsive) {
       return super.get(name, config);
     }
     return super.get(__getResponsiveName(this, name), config);
   }
+  /**
+   * Set an option value.
+   *
+   * @param {string} name The option name.
+   * @param {any} value The new value.
+   * @param {ResponsiveOptionObject} config The option configuration.
+   */
   set(name, value, config) {
     if (!config.responsive) {
       super.set(name, value, config);

package/Base/managers/ResponsiveOptionsManager.cjs.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';\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);\n  const regex = new RegExp(`${propertyName}:(.+)$`);\n\n  Object.keys(that.__element.dataset)\n    .filter((optionName) => regex.test(optionName))\n    .forEach((optionName) => {\n      const [, breakpoints] = optionName.match(regex);\n      const isInBreakpoint = breakpoints.split(':').includes(breakpoint);\n      if (isInBreakpoint) {\n        responsiveName = optionName.replace(/^option/, '');\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;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAkD;AAElD,sBAA0B;AAC1B,mBAAsB;AAWtB,SAAS,oBAAoB,MAAgC,MAAc;AACzE,QAAM,EAAE,WAAW,QAAI,2BAAU,EAAE,MAAM;AAEzC,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,MAAI,iBAAiB;AACrB,QAAM,mBAAe,yCAAkB,IAAI;AAC3C,QAAM,QAAQ,IAAI,OAAO,GAAG,oBAAoB;AAEhD,SAAO,KAAK,KAAK,UAAU,OAAO,EAC/B,OAAO,CAAC,eAAe,MAAM,KAAK,UAAU,CAAC,EAC7C,QAAQ,CAAC,eAAe;AACvB,UAAM,CAAC,EAAE,WAAW,IAAI,WAAW,MAAM,KAAK;AAC9C,UAAM,iBAAiB,YAAY,MAAM,GAAG,EAAE,SAAS,UAAU;AACjE,QAAI,gBAAgB;AAClB,uBAAiB,WAAW,QAAQ,WAAW,EAAE;AAAA,IACnD;AAAA,EACF,CAAC;AAEH,SAAO;AACT;AAKO,IAAM,2BAAN,cAAuC,qCAAe;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,EASA,IAAI,MAAc,OAAgB,QAAgC;AAChE,QAAI,CAAC,OAAO,YAAY;AACtB,YAAM,IAAI,MAAM,OAAO,MAAM;AAC7B;AAAA,IACF;AAEA,QAAI,oBAAO;AACT,cAAQ,KAAK,IAAI,KAAK,SAAS,SAAS,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';\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);\n  const regex = new RegExp(`${propertyName}:(.+)$`);\n\n  for (const optionName of Object.keys(that.__element.dataset)) {\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(/^option/, '');\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;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAkD;AAElD,sBAA0B;AAC1B,mBAAsB;AAWtB,SAAS,oBAAoB,MAAgC,MAAc;AACzE,QAAM,EAAE,WAAW,QAAI,2BAAU,EAAE,MAAM;AAEzC,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,MAAI,iBAAiB;AACrB,QAAM,mBAAe,yCAAkB,IAAI;AAC3C,QAAM,QAAQ,IAAI,OAAO,GAAG,YAAY,QAAQ;AAEhD,aAAW,cAAc,OAAO,KAAK,KAAK,UAAU,OAAO,GAAG;AAC5D,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,WAAW,EAAE;AAAA,MACnD;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAKO,IAAM,2BAAN,cAAuC,qCAAe;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,oBAAO;AACT,cAAQ,KAAK,IAAI,KAAK,SAAS,IAAI,KAAK,mCAAmC;AAAA,IAC7E;AAAA,EACF;AACF;",
   "names": []
 }

package/Base/managers/ResponsiveOptionsManager.js

@@ -9,22 +9,38 @@ function __getResponsiveName(that, name) {
   let responsiveName = name;
   const propertyName = __getPropertyName(name);
   const regex = new RegExp(`${propertyName}:(.+)$`);
-  Object.keys(that.__element.dataset).filter((optionName) => regex.test(optionName)).forEach((optionName) => {
-    const [, breakpoints] = optionName.match(regex);
-    const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
-    if (isInBreakpoint) {
-      responsiveName = optionName.replace(/^option/, "");
+  for (const optionName of Object.keys(that.__element.dataset)) {
+    if (regex.test(optionName)) {
+      const [, breakpoints] = optionName.match(regex);
+      const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
+      if (isInBreakpoint) {
+        responsiveName = optionName.replace(/^option/, "");
+      }
     }
-  });
+  }
   return responsiveName;
 }
 class ResponsiveOptionsManager extends OptionsManager {
+  /**
+   * Get an option value.
+   *
+   * @param   {string} name The option name.
+   * @param   {ResponsiveOptionObject} config The option configuration.
+   * @returns {any}
+   */
   get(name, config) {
     if (!config.responsive) {
       return super.get(name, config);
     }
     return super.get(__getResponsiveName(this, name), config);
   }
+  /**
+   * Set an option value.
+   *
+   * @param {string} name The option name.
+   * @param {any} value The new value.
+   * @param {ResponsiveOptionObject} config The option configuration.
+   */
   set(name, value, config) {
     if (!config.responsive) {
       super.set(name, value, config);

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';\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);\n  const regex = new RegExp(`${propertyName}:(.+)$`);\n\n  Object.keys(that.__element.dataset)\n    .filter((optionName) => regex.test(optionName))\n    .forEach((optionName) => {\n      const [, breakpoints] = optionName.match(regex);\n      const isInBreakpoint = breakpoints.split(':').includes(breakpoint);\n      if (isInBreakpoint) {\n        responsiveName = optionName.replace(/^option/, '');\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;AAWtB,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;AAC3C,QAAM,QAAQ,IAAI,OAAO,GAAG,oBAAoB;AAEhD,SAAO,KAAK,KAAK,UAAU,OAAO,EAC/B,OAAO,CAAC,eAAe,MAAM,KAAK,UAAU,CAAC,EAC7C,QAAQ,CAAC,eAAe;AACvB,UAAM,CAAC,EAAE,WAAW,IAAI,WAAW,MAAM,KAAK;AAC9C,UAAM,iBAAiB,YAAY,MAAM,GAAG,EAAE,SAAS,UAAU;AACjE,QAAI,gBAAgB;AAClB,uBAAiB,WAAW,QAAQ,WAAW,EAAE;AAAA,IACnD;AAAA,EACF,CAAC;AAEH,SAAO;AACT;AAKO,MAAM,iCAAiC,eAAe;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,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,SAAS,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';\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);\n  const regex = new RegExp(`${propertyName}:(.+)$`);\n\n  for (const optionName of Object.keys(that.__element.dataset)) {\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(/^option/, '');\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;AAWtB,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;AAC3C,QAAM,QAAQ,IAAI,OAAO,GAAG,YAAY,QAAQ;AAEhD,aAAW,cAAc,OAAO,KAAK,KAAK,UAAU,OAAO,GAAG;AAC5D,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,WAAW,EAAE;AAAA,MACnD;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;",
   "names": []
 }

package/Base/managers/ServicesManager.cjs

@@ -35,42 +35,75 @@ var SERVICES_MAP = {
 };
 var SERVICE_NAMES = Object.keys(SERVICES_MAP);
 var ServicesManager = class extends import_AbstractManager.AbstractManager {
+  /**
+   * Holder for custom services.
+   */
   __customServices = {};
+  /**
+   * Get registered services.
+   */
   get __services() {
     return {
       ...this.__customServices,
       ...SERVICES_MAP
     };
   }
+  /**
+   * Test if the given service is registered.
+   */
   has(service) {
-    if (!(((0, import_utils.isFunction)(this.__base[service]) || this.__base.__hasEvent(service)) && this.__services[service])) {
+    if (!(((0, import_utils.isFunction)(this.__base[service]) || // @ts-ignore
+    this.__base.__hasEvent(service)) && this.__services[service])) {
       return false;
     }
     const { has } = this.__services[service]();
     return has(this.__base.$id);
   }
+  /**
+   * Get a service props by name.
+   */
   get(service) {
     return this.__services[service]().props();
   }
+  /**
+   * Init the given service and bind it to the given instance.
+   *
+   * @param  {ServiceNames} service The name of the service.
+   * @returns {() => void}          A function to unbind the service.
+   */
   enable(service) {
     if (this.has(service)) {
       return this.disable.bind(this, service);
     }
-    if (!((0, import_utils.isFunction)(this.__base[service]) || this.__base.__hasEvent(service)) || !this.__services[service]) {
+    if (
+      // @ts-ignore
+      !((0, import_utils.isFunction)(this.__base[service]) || this.__base.__hasEvent(service)) || !this.__services[service]
+    ) {
       return import_utils.noop;
     }
     const serviceInstance = this.__services[service]();
     serviceInstance.add(this.__base.$id, (...args) => this.__base.__callMethod(service, ...args));
     return this.disable.bind(this, service);
   }
+  /**
+   * Enable all services and return methods to disable them.
+   */
   enableAll() {
     return Object.keys(this.__services).map((serviceName) => this.enable(serviceName));
   }
+  /**
+   * Disable all services.
+   *
+   * @returns {void}
+   */
   disableAll() {
-    Object.keys(this.__services).forEach((serviceName) => {
+    for (const serviceName of Object.keys(this.__services)) {
       this.disable(serviceName);
-    });
+    }
   }
+  /**
+   * Disable a service.
+   */
   disable(service) {
     if (!this.__services[service]) {
       return;
@@ -78,6 +111,9 @@ var ServicesManager = class extends import_AbstractManager.AbstractManager {
     const { remove } = this.__services[service]();
     remove(this.__base.$id);
   }
+  /**
+   * Toggle a service.
+   */
   toggle(service, force) {
     if ((0, import_utils.isDefined)(force)) {
       if (force && !this.has(service)) {
@@ -92,10 +128,24 @@ var ServicesManager = class extends import_AbstractManager.AbstractManager {
       this.enable(service);
     }
   }
+  /**
+   * Register a new service to be enabled/disabled.
+   *
+   * @param {string} name
+   *   The name of the service hook.
+   * @param {<T>(...args:unknown[]) => ServiceInterface<T>} useFunction
+   *   The `use...` function for the service.
+   */
   register(name, useFunction) {
     this.__customServices[name] = useFunction;
     this.__base.__addEmits(name);
   }
+  /**
+   * Unregister a new service to be enabled disabled.
+   *
+   * @param {string} name
+   *   The name of the service hook.
+   */
   unregister(name) {
     if (SERVICE_NAMES.includes(name)) {
       if (import_utils.isDev) {

package/Base/managers/ServicesManager.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/ServicesManager.ts"],
-  "sourcesContent": ["import { usePointer, useRaf, useResize, useScroll, useKey, useLoad } from '../../services/index.js';\nimport type {\n  PointerServiceInterface,\n  RafServiceInterface,\n  ResizeServiceInterface,\n  ScrollServiceInterface,\n  KeyServiceInterface,\n  LoadServiceInterface,\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  loaded: useLoad,\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  loaded: LoadServiceInterface;\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    Object.keys(this.__services).forEach((serviceName) => {\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": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA0E;AAU1E,6BAAgC;AAChC,mBAAmD;AAEnD,IAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,IAAM,gBAAgB,OAAO,KAAK,YAAY;AAkBvC,IAAM,kBAAN,cAA8B,uCAAgB;AAAA,EAInD,mBAAiE,CAAC;AAAA,EAKlE,IAAI,aAAa;AACf,WAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EAKA,IAAI,SAAyC;AAC3C,QACE,OACG,yBAAW,KAAK,OAAO,QAAQ,KAE9B,KAAK,OAAO,WAAW,OAAO,MAChC,KAAK,WAAW,WAElB;AACA,aAAO;AAAA,IACT;AAEA,UAAM,EAAE,IAAI,IAAI,KAAK,WAAW,SAAS;AACzC,WAAO,IAAI,KAAK,OAAO,GAAG;AAAA,EAC5B;AAAA,EAKA,IAAqC,SAA8C;AAEjF,WAAO,KAAK,WAAW,SAAS,EAAE,MAAM;AAAA,EAC1C;AAAA,EAQA,OAAO,SAAmC;AACxC,QAAI,KAAK,IAAI,OAAO,GAAG;AACrB,aAAO,KAAK,QAAQ,KAAK,MAAM,OAAO;AAAA,IACxC;AAEA,QAEE,MAAE,yBAAW,KAAK,OAAO,QAAQ,KAAK,KAAK,OAAO,WAAW,OAAO,MACpE,CAAC,KAAK,WAAW,UACjB;AACA,aAAO;AAAA,IACT;AACA,UAAM,kBAAkB,KAAK,WAAW,SAAS;AAEjD,oBAAgB,IAAI,KAAK,OAAO,KAAK,IAAI,SAAS,KAAK,OAAO,aAAa,SAAS,GAAG,IAAI,CAAC;AAE5F,WAAO,KAAK,QAAQ,KAAK,MAAM,OAAO;AAAA,EACxC;AAAA,EAKA,YAAY;AACV,WAAO,OAAO,KAAK,KAAK,UAAU,EAAE,IAAI,CAAC,gBAAgB,KAAK,OAAO,WAAW,CAAC;AAAA,EACnF;AAAA,EAOA,aAAa;AACX,WAAO,KAAK,KAAK,UAAU,EAAE,QAAQ,CAAC,gBAAgB;AACpD,WAAK,QAAQ,WAAW;AAAA,IAC1B,CAAC;AAAA,EACH;AAAA,EAKA,QAAQ,SAAuB;AAC7B,QAAI,CAAC,KAAK,WAAW,UAAU;AAC7B;AAAA,IACF;AAEA,UAAM,EAAE,OAAO,IAAI,KAAK,WAAW,SAAS;AAC5C,WAAO,KAAK,OAAO,GAAG;AAAA,EACxB;AAAA,EAKA,OAAO,SAAuB,OAAiB;AAC7C,YAAI,wBAAU,KAAK,GAAG;AACpB,UAAI,SAAS,CAAC,KAAK,IAAI,OAAO,GAAG;AAC/B,aAAK,OAAO,OAAO;AAAA,MACrB;AAEA,UAAI,CAAC,SAAS,KAAK,IAAI,OAAO,GAAG;AAC/B,aAAK,QAAQ,OAAO;AAAA,MACtB;AAAA,IACF,WAAW,KAAK,IAAI,OAAO,GAAG;AAC5B,WAAK,QAAQ,OAAO;AAAA,IACtB,OAAO;AACL,WAAK,OAAO,OAAO;AAAA,IACrB;AAAA,EACF;AAAA,EAUA,SAAS,MAAc,aAA6D;AAClF,SAAK,iBAAiB,QAAQ;AAC9B,SAAK,OAAO,WAAW,IAAI;AAAA,EAC7B;AAAA,EAQA,WAAW,MAAc;AACvB,QAAI,cAAc,SAAS,IAAI,GAAG;AAChC,UAAI,oBAAO;AACT,cAAM,IAAI,MAAM,2BAA2B,8CAA8C;AAAA,MAC3F;AACA;AAAA,IACF;AAEA,SAAK,OAAO,cAAc,IAAI;AAC9B,WAAO,KAAK,iBAAiB;AAAA,EAC/B;AACF;",
+  "sourcesContent": ["import { usePointer, useRaf, useResize, useScroll, useKey, useLoad } from '../../services/index.js';\nimport type {\n  PointerServiceInterface,\n  RafServiceInterface,\n  ResizeServiceInterface,\n  ScrollServiceInterface,\n  KeyServiceInterface,\n  LoadServiceInterface,\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  loaded: useLoad,\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  loaded: LoadServiceInterface;\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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",
   "names": []
 }

package/Base/managers/ServicesManager.js

@@ -11,42 +11,75 @@ const SERVICES_MAP = {
 };
 const SERVICE_NAMES = Object.keys(SERVICES_MAP);
 class ServicesManager extends AbstractManager {
+  /**
+   * Holder for custom services.
+   */
   __customServices = {};
+  /**
+   * Get registered services.
+   */
   get __services() {
     return {
       ...this.__customServices,
       ...SERVICES_MAP
     };
   }
+  /**
+   * Test if the given service is registered.
+   */
   has(service) {
-    if (!((isFunction(this.__base[service]) || this.__base.__hasEvent(service)) && this.__services[service])) {
+    if (!((isFunction(this.__base[service]) || // @ts-ignore
+    this.__base.__hasEvent(service)) && this.__services[service])) {
       return false;
     }
     const { has } = this.__services[service]();
     return has(this.__base.$id);
   }
+  /**
+   * Get a service props by name.
+   */
   get(service) {
     return this.__services[service]().props();
   }
+  /**
+   * Init the given service and bind it to the given instance.
+   *
+   * @param  {ServiceNames} service The name of the service.
+   * @returns {() => void}          A function to unbind the service.
+   */
   enable(service) {
     if (this.has(service)) {
       return this.disable.bind(this, service);
     }
-    if (!(isFunction(this.__base[service]) || this.__base.__hasEvent(service)) || !this.__services[service]) {
+    if (
+      // @ts-ignore
+      !(isFunction(this.__base[service]) || this.__base.__hasEvent(service)) || !this.__services[service]
+    ) {
       return noop;
     }
     const serviceInstance = this.__services[service]();
     serviceInstance.add(this.__base.$id, (...args) => this.__base.__callMethod(service, ...args));
     return this.disable.bind(this, service);
   }
+  /**
+   * Enable all services and return methods to disable them.
+   */
   enableAll() {
     return Object.keys(this.__services).map((serviceName) => this.enable(serviceName));
   }
+  /**
+   * Disable all services.
+   *
+   * @returns {void}
+   */
   disableAll() {
-    Object.keys(this.__services).forEach((serviceName) => {
+    for (const serviceName of Object.keys(this.__services)) {
       this.disable(serviceName);
-    });
+    }
   }
+  /**
+   * Disable a service.
+   */
   disable(service) {
     if (!this.__services[service]) {
       return;
@@ -54,6 +87,9 @@ class ServicesManager extends AbstractManager {
     const { remove } = this.__services[service]();
     remove(this.__base.$id);
   }
+  /**
+   * Toggle a service.
+   */
   toggle(service, force) {
     if (isDefined(force)) {
       if (force && !this.has(service)) {
@@ -68,10 +104,24 @@ class ServicesManager extends AbstractManager {
       this.enable(service);
     }
   }
+  /**
+   * Register a new service to be enabled/disabled.
+   *
+   * @param {string} name
+   *   The name of the service hook.
+   * @param {<T>(...args:unknown[]) => ServiceInterface<T>} useFunction
+   *   The `use...` function for the service.
+   */
   register(name, useFunction) {
     this.__customServices[name] = useFunction;
     this.__base.__addEmits(name);
   }
+  /**
+   * Unregister a new service to be enabled disabled.
+   *
+   * @param {string} name
+   *   The name of the service hook.
+   */
   unregister(name) {
     if (SERVICE_NAMES.includes(name)) {
       if (isDev) {

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, useLoad } from '../../services/index.js';\nimport type {\n  PointerServiceInterface,\n  RafServiceInterface,\n  ResizeServiceInterface,\n  ScrollServiceInterface,\n  KeyServiceInterface,\n  LoadServiceInterface,\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  loaded: useLoad,\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  loaded: LoadServiceInterface;\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    Object.keys(this.__services).forEach((serviceName) => {\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": "AAAA,SAAS,YAAY,QAAQ,WAAW,WAAW,QAAQ,eAAe;AAU1E,SAAS,uBAAuB;AAChC,SAAS,MAAM,YAAY,WAAW,aAAa;AAEnD,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,gBAAgB,OAAO,KAAK,YAAY;AAkBvC,MAAM,wBAAwB,gBAAgB;AAAA,EAInD,mBAAiE,CAAC;AAAA,EAKlE,IAAI,aAAa;AACf,WAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EAKA,IAAI,SAAyC;AAC3C,QACE,GACG,WAAW,KAAK,OAAO,QAAQ,KAE9B,KAAK,OAAO,WAAW,OAAO,MAChC,KAAK,WAAW,WAElB;AACA,aAAO;AAAA,IACT;AAEA,UAAM,EAAE,IAAI,IAAI,KAAK,WAAW,SAAS;AACzC,WAAO,IAAI,KAAK,OAAO,GAAG;AAAA,EAC5B;AAAA,EAKA,IAAqC,SAA8C;AAEjF,WAAO,KAAK,WAAW,SAAS,EAAE,MAAM;AAAA,EAC1C;AAAA,EAQA,OAAO,SAAmC;AACxC,QAAI,KAAK,IAAI,OAAO,GAAG;AACrB,aAAO,KAAK,QAAQ,KAAK,MAAM,OAAO;AAAA,IACxC;AAEA,QAEE,EAAE,WAAW,KAAK,OAAO,QAAQ,KAAK,KAAK,OAAO,WAAW,OAAO,MACpE,CAAC,KAAK,WAAW,UACjB;AACA,aAAO;AAAA,IACT;AACA,UAAM,kBAAkB,KAAK,WAAW,SAAS;AAEjD,oBAAgB,IAAI,KAAK,OAAO,KAAK,IAAI,SAAS,KAAK,OAAO,aAAa,SAAS,GAAG,IAAI,CAAC;AAE5F,WAAO,KAAK,QAAQ,KAAK,MAAM,OAAO;AAAA,EACxC;AAAA,EAKA,YAAY;AACV,WAAO,OAAO,KAAK,KAAK,UAAU,EAAE,IAAI,CAAC,gBAAgB,KAAK,OAAO,WAAW,CAAC;AAAA,EACnF;AAAA,EAOA,aAAa;AACX,WAAO,KAAK,KAAK,UAAU,EAAE,QAAQ,CAAC,gBAAgB;AACpD,WAAK,QAAQ,WAAW;AAAA,IAC1B,CAAC;AAAA,EACH;AAAA,EAKA,QAAQ,SAAuB;AAC7B,QAAI,CAAC,KAAK,WAAW,UAAU;AAC7B;AAAA,IACF;AAEA,UAAM,EAAE,OAAO,IAAI,KAAK,WAAW,SAAS;AAC5C,WAAO,KAAK,OAAO,GAAG;AAAA,EACxB;AAAA,EAKA,OAAO,SAAuB,OAAiB;AAC7C,QAAI,UAAU,KAAK,GAAG;AACpB,UAAI,SAAS,CAAC,KAAK,IAAI,OAAO,GAAG;AAC/B,aAAK,OAAO,OAAO;AAAA,MACrB;AAEA,UAAI,CAAC,SAAS,KAAK,IAAI,OAAO,GAAG;AAC/B,aAAK,QAAQ,OAAO;AAAA,MACtB;AAAA,IACF,WAAW,KAAK,IAAI,OAAO,GAAG;AAC5B,WAAK,QAAQ,OAAO;AAAA,IACtB,OAAO;AACL,WAAK,OAAO,OAAO;AAAA,IACrB;AAAA,EACF;AAAA,EAUA,SAAS,MAAc,aAA6D;AAClF,SAAK,iBAAiB,QAAQ;AAC9B,SAAK,OAAO,WAAW,IAAI;AAAA,EAC7B;AAAA,EAQA,WAAW,MAAc;AACvB,QAAI,cAAc,SAAS,IAAI,GAAG;AAChC,UAAI,OAAO;AACT,cAAM,IAAI,MAAM,2BAA2B,8CAA8C;AAAA,MAC3F;AACA;AAAA,IACF;AAEA,SAAK,OAAO,cAAc,IAAI;AAC9B,WAAO,KAAK,iBAAiB;AAAA,EAC/B;AACF;",
+  "sourcesContent": ["import { usePointer, useRaf, useResize, useScroll, useKey, useLoad } from '../../services/index.js';\nimport type {\n  PointerServiceInterface,\n  RafServiceInterface,\n  ResizeServiceInterface,\n  ScrollServiceInterface,\n  KeyServiceInterface,\n  LoadServiceInterface,\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  loaded: useLoad,\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  loaded: LoadServiceInterface;\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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",
   "names": []
 }

package/Base/utils.cjs

@@ -44,9 +44,13 @@ var separator = " ";
 function getSelector(nameOrSelector) {
   if (!selectors.has(nameOrSelector)) {
     const parts = [
+      // Single selector
       `[data-component="${nameOrSelector}"]`,
+      // Selector in the middle of a list of selectors
       `[data-component*="${separator}${nameOrSelector}${separator}"]`,
+      // Selector at the end of a list of selectors
       `[data-component$="${separator}${nameOrSelector}"]`,
+      // Selector at the beginning of a list of selectors
       `[data-component^="${nameOrSelector}${separator}"]`
     ];
     selectors.set(nameOrSelector, parts.join(","));

package/Base/utils.cjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/utils.ts"],
   "sourcesContent": ["import { isArray, isDefined, isDev, SmartQueue } from '../utils/index.js';\nimport type { Base, BaseConfig } 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): void {\n  if (!features.get('asyncChildren')) {\n    fn();\n    return;\n  }\n\n  if (!queue) {\n    queue = new SmartQueue();\n  }\n\n  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 */\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 *\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;AAAA,mBAAsD;AAEtD,sBAAyB;AAEzB,IAAI;AAKG,SAAS,WAAW,IAAyB;AAClD,MAAI,CAAC,yBAAS,IAAI,eAAe,GAAG;AAClC,OAAG;AACH;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,YAAQ,IAAI,wBAAW;AAAA,EACzB;AAEA,QAAM,IAAI,EAAE;AACd;AAEA,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;AAOO,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;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsD;AAEtD,sBAAyB;AAEzB,IAAI;AAKG,SAAS,WAAW,IAAyB;AAClD,MAAI,CAAC,yBAAS,IAAI,eAAe,GAAG;AAClC,OAAG;AACH;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,YAAQ,IAAI,wBAAW;AAAA,EACzB;AAEA,QAAM,IAAI,EAAE;AACd;AAEA,IAAM,YAAY,oBAAI,IAAI;AAG1B,IAAM,YAAY;AAKlB,SAAS,YAAY,gBAAgC;AACnD,MAAI,CAAC,UAAU,IAAI,cAAc,GAAG;AAClC,UAAM,QAAQ;AAAA;AAAA,MAEZ,oBAAoB,cAAc;AAAA;AAAA,MAElC,qBAAqB,SAAS,GAAG,cAAc,GAAG,SAAS;AAAA;AAAA,MAE3D,qBAAqB,SAAS,GAAG,cAAc;AAAA;AAAA,MAE/C,qBAAqB,cAAc,GAAG,SAAS;AAAA,IACjD;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,QAAQ;AAAA,EAAC;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,KAAK,EAAE,CAAC;AACxC;AAOO,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,IAAI;AAAA,MACf,QAAQ,KAAK;AAAA,MACb,wCAAwC,SAAS,IAAI,YAAY,IAAI;AAAA,IACvE;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/Base/utils.js

@@ -16,9 +16,13 @@ const separator = " ";
 function getSelector(nameOrSelector) {
   if (!selectors.has(nameOrSelector)) {
     const parts = [
+      // Single selector
       `[data-component="${nameOrSelector}"]`,
+      // Selector in the middle of a list of selectors
       `[data-component*="${separator}${nameOrSelector}${separator}"]`,
+      // Selector at the end of a list of selectors
       `[data-component$="${separator}${nameOrSelector}"]`,
+      // Selector at the beginning of a list of selectors
       `[data-component^="${nameOrSelector}${separator}"]`
     ];
     selectors.set(nameOrSelector, parts.join(","));