@studiometa/js-toolkit 3.0.0-alpha.5 → 3.0.0-alpha.7

package/Base/managers/EventsManager.js

@@ -1,33 +1,9 @@
 import getAllProperties from "../../utils/object/getAllProperties.js";
-import { isArray } from "../../utils/index.js";
-import { getEventTarget, eventIsNative, eventIsDefinedInConfig } from "../utils.js";
+import { dashCase, isArray, pascalCase } from "../../utils/index.js";
+import { getEventTarget } from "../utils.js";
 import { AbstractManager } from "./AbstractManager.js";
 import { normalizeRefName } from "./RefsManager.js";
-const names = /* @__PURE__ */ new Map();
-const normalizeRegex1 = /[A-Z]([A-Z].*)/g;
-const normalizeRegex2 = /[^a-zA-Z\d\s:]/g;
-const normalizeRegex3 = /(^\w|\s+\w)/g;
-function normalizeName(name) {
-  if (!names.has(name)) {
-    names.set(
-      name,
-      name.replaceAll(normalizeRegex1, (c) => c.toLowerCase()).replaceAll(normalizeRegex2, " ").replaceAll(normalizeRegex3, (c) => c.trim().toUpperCase()).trim()
-    );
-  }
-  return names.get(name);
-}
-const eventNames = /* @__PURE__ */ new Map();
-const normalizeEventRegex1 = /[A-Z]/g;
-const normalizeEventRegex2 = /^-/;
-function normalizeEventName(name) {
-  if (!eventNames.has(name)) {
-    eventNames.set(
-      name,
-      name.replaceAll(normalizeEventRegex1, (c) => `-${c.toLowerCase()}`).replace(normalizeEventRegex2, "")
-    );
-  }
-  return eventNames.get(name);
-}
+import { features } from "../features.js";
 const regexes = /* @__PURE__ */ new Map();
 function getRegex(regex) {
   if (!regexes.has(regex)) {
@@ -36,12 +12,12 @@ function getRegex(regex) {
   return regexes.get(regex);
 }
 function getEventNameByMethod(method, name = "") {
-  const regex = getRegex(`^on${normalizeName(name)}([A-Z].*)$`);
+  const regex = getRegex(`^on${pascalCase(name)}([A-Z].*)$`);
   const [, event] = method.match(regex);
-  return normalizeEventName(event);
+  return dashCase(event);
 }
 function getEventMethodsByName(that, name = "") {
-  const regex = getRegex(`^on${normalizeName(name)}[A-Z].*$`);
+  const regex = getRegex(`^on${pascalCase(name)}[A-Z].*$`);
   const key = regex.toString();
   let methods = that.__methodsCache.get(key);
   if (!methods) {
@@ -70,9 +46,12 @@ function manageRef(that, name, elements, mode = "add") {
 function manageChild(that, name, instance, mode = "add") {
   const action = mode === "add" ? "$on" : "$off";
   const methods = getEventMethodsByName(that, name);
+  const config = instance.__config;
   for (const method of methods) {
     const event = getEventNameByMethod(method, name);
-    instance[action](event, that.__childrenHandler);
+    if (getEventTarget(instance, event, config)) {
+      instance[action](event, that.__childrenHandler);
+    }
   }
 }
 const isDocumentRegex = /^onDocument[A-Z][a-z]+/;
@@ -87,19 +66,28 @@ function manageRootElement(that, mode = "add") {
   const { __base: base, __config: config } = that;
   for (const method of methods) {
     let event = getEventNameByMethod(method);
-    if (eventIsDefinedInConfig(event, config) || eventIsNative(event, base.$el)) {
-      const target = getEventTarget(base, event, config);
-      target[modeMethod](event, that.__rootElementHandler);
-    } else if (methodIsGlobal(method)) {
+    if (methodIsGlobal(method)) {
       event = getEventNameByMethod(method, methodIsDocument(method) ? "document" : "window");
       const target = getGlobalEventTarget(method);
       target[modeMethod](
         event,
         methodIsDocument(method) ? that.__documentHandler : that.__windowHandler
       );
+    } else {
+      const target = getEventTarget(base, event, config);
+      target?.[modeMethod](event, that.__rootElementHandler);
     }
   }
 }
+function normalizeParams(params = {}) {
+  return {
+    event: null,
+    args: [],
+    index: 0,
+    target: null,
+    ...params
+  };
+}
 class EventsManager extends AbstractManager {
   __methodsCache = /* @__PURE__ */ new Map();
   /**
@@ -107,13 +95,16 @@ class EventsManager extends AbstractManager {
    */
   __rootElementHandler = {
     handleEvent: (event) => {
-      const normalizedEventName = normalizeName(event.type);
+      const normalizedEventName = pascalCase(event.type);
       const method = `on${normalizedEventName}`;
-      if (event instanceof CustomEvent && isArray(event.detail) && event.detail.length) {
-        this.__base[method](...event.detail, event);
-      } else {
-        this.__base[method](event);
-      }
+      const isCustomEvent = event instanceof CustomEvent;
+      this.__base[method](
+        normalizeParams({
+          event,
+          args: isCustomEvent ? event.detail ?? [] : [],
+          target: isCustomEvent ? this.__base : this.__element
+        })
+      );
     }
   };
   /**
@@ -127,9 +118,9 @@ class EventsManager extends AbstractManager {
      * @returns {void}
      */
     handleEvent: (event) => {
-      const normalizedEventName = normalizeName(event.type);
+      const normalizedEventName = pascalCase(event.type);
       const method = `onDocument${normalizedEventName}`;
-      this.__base[method](event);
+      this.__base[method](normalizeParams({ event, target: document }));
     }
   };
   /**
@@ -143,9 +134,9 @@ class EventsManager extends AbstractManager {
      * @returns {void}
      */
     handleEvent: (event) => {
-      const normalizedEventName = normalizeName(event.type);
+      const normalizedEventName = pascalCase(event.type);
       const method = `onWindow${normalizedEventName}`;
-      this.__base[method](event);
+      this.__base[method](normalizeParams({ event, target: window }));
     }
   };
   /**
@@ -154,15 +145,16 @@ class EventsManager extends AbstractManager {
   __refsHandler = {
     handleEvent: (event) => {
       const ref = event.currentTarget;
-      const refName = normalizeRefName(ref.dataset.ref);
-      const normalizedRefName = normalizeName(refName);
-      const normalizedEventName = normalizeName(event.type);
+      const attributes = features.get("attributes");
+      const refName = normalizeRefName(ref.getAttribute(attributes.ref));
+      const normalizedRefName = pascalCase(refName);
+      const normalizedEventName = pascalCase(event.type);
       const method = `on${normalizedRefName}${normalizedEventName}`;
       let index = 0;
       if (isArray(this.__base.$refs[refName])) {
         index = this.__base.$refs[refName].indexOf(ref);
       }
-      this.__base[method](event, index);
+      this.__base[method](normalizeParams({ event, index, target: ref }));
     }
   };
   /**
@@ -178,12 +170,12 @@ class EventsManager extends AbstractManager {
           (instance) => instance === event.currentTarget || instance.$el === event.currentTarget
         )
       })).find(({ child }) => child);
-      const normalizedChildName = normalizeName(name);
-      const normalizedEventName = normalizeName(event.type);
+      const normalizedChildName = pascalCase(name);
+      const normalizedEventName = pascalCase(event.type);
       const method = `on${normalizedChildName}${normalizedEventName}`;
       const index = [...childrenManager[name]].indexOf(resolvedChild);
       const args = isArray(event.detail) ? event.detail : [];
-      this.__base[method](...args, index, event);
+      this.__base[method](normalizeParams({ event, index, args, target: resolvedChild }));
     }
   };
   /**
@@ -266,8 +258,6 @@ class EventsManager extends AbstractManager {
   }
 }
 export {
-  EventsManager,
-  normalizeEventName,
-  normalizeName
+  EventsManager
 };
 //# sourceMappingURL=EventsManager.js.map

package/Base/managers/EventsManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/EventsManager.ts"],
-  "sourcesContent": ["import type { Base } from '../index.js';\nimport getAllProperties from '../../utils/object/getAllProperties.js';\nimport { isArray } from '../../utils/index.js';\nimport { getEventTarget, eventIsNative, eventIsDefinedInConfig } from '../utils.js';\nimport { AbstractManager } from './AbstractManager.js';\nimport { normalizeRefName } from './RefsManager.js';\n\nconst names = new Map();\nconst normalizeRegex1 = /[A-Z]([A-Z].*)/g;\nconst normalizeRegex2 = /[^a-zA-Z\\d\\s:]/g;\nconst normalizeRegex3 = /(^\\w|\\s+\\w)/g;\n\n/**\n * Normalize the given name to PascalCase, such as:\n *\n * ```\n * sentence case          => SentenceCase\n * lowercase              => Lowercase\n * UPPERCASE              => Uppercase\n * kebab-case             => KebabCase\n * snake_case             => SnakeCase\n * camelCase              => CamelCase\n * PascalCase             => PascalCase\n * .class-selector        => ClassSelector\n * .bem__selector         => BemSelector\n * __id-selector          => IdSelector\n * .complex[class^ =\"__\"] => ComplexClass\n * ```\n *\n * @param {string} name\n * @returns {string}\n */\nexport function normalizeName(name: string): string {\n  if (!names.has(name)) {\n    names.set(\n      name,\n      name\n        .replaceAll(normalizeRegex1, (c) => c.toLowerCase())\n        .replaceAll(normalizeRegex2, ' ')\n        .replaceAll(normalizeRegex3, (c) => c.trim().toUpperCase())\n        .trim(),\n    );\n  }\n\n  return names.get(name);\n}\n\nconst eventNames = new Map();\n\nconst normalizeEventRegex1 = /[A-Z]/g;\nconst normalizeEventRegex2 = /^-/;\n/**\n * Normalize the event names from PascalCase to kebab-case.\n *\n * @param {string} name\n * @returns {string}\n */\nexport function normalizeEventName(name: string): string {\n  if (!eventNames.has(name)) {\n    eventNames.set(\n      name,\n      name\n        .replaceAll(normalizeEventRegex1, (c) => `-${c.toLowerCase()}`)\n        .replace(normalizeEventRegex2, ''),\n    );\n  }\n\n  return eventNames.get(name);\n}\n\nconst regexes = new Map();\n\n/**\n * Get a regex with a cache;\n *\n * @param   {string} regex\n * @returns {RegExp}\n */\nfunction getRegex(regex: string): RegExp {\n  if (!regexes.has(regex)) {\n    regexes.set(regex, new RegExp(regex));\n  }\n\n  return regexes.get(regex);\n}\n\n/**\n * Get the event name from the given method and its tied ref or children name.\n *\n * @param {string} method\n * @param {string} name\n * @returns {string}\n * @private\n */\nfunction getEventNameByMethod(method: string, name = ''): string {\n  const regex = getRegex(`^on${normalizeName(name)}([A-Z].*)$`);\n  const [, event] = method.match(regex);\n  return normalizeEventName(event);\n}\n\n/**\n * Get the base instance methods matching the `onSomething` pattern.\n *\n * @param {EventsManager} that\n * @param {string} [name]\n * @returns {string[]}\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction getEventMethodsByName(that: EventsManager, name = ''): string[] {\n  const regex = getRegex(`^on${normalizeName(name)}[A-Z].*$`);\n  const key = regex.toString();\n\n  let methods = that.__methodsCache.get(key);\n\n  if (!methods) {\n    methods = Array.from(\n      getAllProperties(that.__base, [], (method) => regex.test(method)).reduce(\n        (set, [method]) => set.add(method),\n        new Set(),\n      ),\n    ) as string[];\n    that.__methodsCache.set(key, methods);\n  }\n\n  return methods;\n}\n\n/**\n * Manage a ref event methods.\n *\n * @param {EventsManager} that\n * @param  {string} name\n *   The name of the ref.\n * @param  {HTMLElement[]} elements\n *   The elements of the ref.\n * @param  {'add'|'remove'} [mode]\n *   The action to perform: add or remove the event listeners.\n * @returns {void}\n * @private\n */\nfunction manageRef(\n  // eslint-disable-next-line no-use-before-define\n  that: EventsManager,\n  name: string,\n  elements: HTMLElement[],\n  mode: 'add' | 'remove' = 'add',\n) {\n  const action = `${mode}EventListener`;\n  const methods = getEventMethodsByName(that, name);\n  for (const method of methods) {\n    const event = getEventNameByMethod(method, name);\n    for (const element of elements) {\n      if (element instanceof EventTarget) {\n        element[action](event, that.__refsHandler);\n      }\n    }\n  }\n}\n/**\n * Manage event methods to the given child instance.\n *\n * @param {EventsManager} that\n * @param {string} name\n *   The name of the ref.\n * @param {Base} instance\n *   A base instance.\n * @param {'add'|'remove'} [mode]\n *   The action to perform: add or remove the event listeners.\n * @returns {void}\n * @private\n */\nfunction manageChild(\n  // eslint-disable-next-line no-use-before-define\n  that: EventsManager,\n  name: string,\n  instance: Base,\n  mode: 'add' | 'remove' = 'add',\n) {\n  const action = mode === 'add' ? '$on' : '$off';\n  const methods = getEventMethodsByName(that, name);\n  for (const method of methods) {\n    const event = getEventNameByMethod(method, name);\n    instance[action](event, that.__childrenHandler);\n  }\n}\n\nconst isDocumentRegex = /^onDocument[A-Z][a-z]+/;\nconst isWindowRegex = /^onWindow[A-Z][a-z]+/;\nconst methodIsDocument = (method) => isDocumentRegex.test(method);\nconst methodIsWindow = (method) => isWindowRegex.test(method);\nconst methodIsGlobal = (method) => methodIsWindow(method) || methodIsDocument(method);\nconst getGlobalEventTarget = (method) => (methodIsDocument(method) ? document : window);\n\n/**\n * Manage event methods on the root element.\n *\n * @param {EventsManager} that\n * @param {'add'|'remove'} [mode]\n *   The action to perform: add or remove the event listeners, defaults to 'add'.\n * @returns {void}\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction manageRootElement(that: EventsManager, mode: 'add' | 'remove' = 'add') {\n  const modeMethod = `${mode}EventListener`;\n  const methods = getEventMethodsByName(that);\n\n  const { __base: base, __config: config } = that;\n\n  for (const method of methods) {\n    let event = getEventNameByMethod(method);\n\n    if (eventIsDefinedInConfig(event, config) || eventIsNative(event, base.$el)) {\n      const target = getEventTarget(base, event, config);\n      target[modeMethod](event, that.__rootElementHandler);\n    } else if (methodIsGlobal(method)) {\n      event = getEventNameByMethod(method, methodIsDocument(method) ? 'document' : 'window');\n      const target = getGlobalEventTarget(method);\n      target[modeMethod](\n        event,\n        methodIsDocument(method) ? that.__documentHandler : that.__windowHandler,\n      );\n    }\n  }\n}\n\n/**\n * Event management class.\n *\n * @todo Prevent binding of `onChildOrRefEvent` to the root element\n * @todo Use event delegation?\n */\nexport class EventsManager extends AbstractManager {\n  __methodsCache: Map<string, string[]> = new Map();\n\n  /**\n   * Event listener object for the root element.\n   */\n  __rootElementHandler: EventListenerObject = {\n    handleEvent: (event: Event | CustomEvent) => {\n      const normalizedEventName = normalizeName(event.type);\n      const method = `on${normalizedEventName}`;\n\n      if (event instanceof CustomEvent && isArray(event.detail) && event.detail.length) {\n        this.__base[method](...event.detail, event);\n      } else {\n        this.__base[method](event);\n      }\n    },\n  };\n\n  /**\n   * Event listener object for the root element.\n   *\n   * @type {EventListenerObject}\n   */\n  __documentHandler = {\n    /**\n     * @param   {Event|CustomEvent} event\n     * @returns {void}\n     */\n    handleEvent: (event) => {\n      const normalizedEventName = normalizeName(event.type);\n      const method = `onDocument${normalizedEventName}`;\n\n      this.__base[method](event);\n    },\n  };\n\n  /**\n   * Event listener object for the root element.\n   *\n   * @type {EventListenerObject}\n   */\n  __windowHandler = {\n    /**\n     * @param   {Event|CustomEvent} event\n     * @returns {void}\n     */\n    handleEvent: (event) => {\n      const normalizedEventName = normalizeName(event.type);\n      const method = `onWindow${normalizedEventName}`;\n\n      this.__base[method](event);\n    },\n  };\n\n  /**\n   * Event listener object for the refs.\n   */\n  __refsHandler: EventListenerObject = {\n    handleEvent: (event) => {\n      const ref = event.currentTarget as HTMLElement;\n      const refName = normalizeRefName(ref.dataset.ref);\n\n      const normalizedRefName = normalizeName(refName);\n      const normalizedEventName = normalizeName(event.type);\n      const method = `on${normalizedRefName}${normalizedEventName}`;\n\n      let index = 0;\n      if (isArray(this.__base.$refs[refName])) {\n        index = (this.__base.$refs[refName] as HTMLElement[]).indexOf(ref);\n      }\n\n      this.__base[method](event, index);\n    },\n  };\n\n  /**\n   * Event listener object for the children.\n   */\n  __childrenHandler: EventListenerObject = {\n    handleEvent: (event: CustomEvent) => {\n      const childrenManager = this.__base.$children;\n\n      // @todo handle async child components\n      const { name, child: resolvedChild } = childrenManager.registeredNames\n        .map((childName) => ({\n          name: childName,\n          child: [...childrenManager[childName]].find(\n            // @ts-ignore\n            (instance) => instance === event.currentTarget || instance.$el === event.currentTarget,\n          ),\n        }))\n        .find(({ child }) => child);\n\n      const normalizedChildName = normalizeName(name);\n      const normalizedEventName = normalizeName(event.type);\n      const method = `on${normalizedChildName}${normalizedEventName}`;\n\n      const index = [...childrenManager[name]].indexOf(resolvedChild);\n\n      const args = isArray(event.detail) ? event.detail : [];\n      this.__base[method](...args, index, event);\n    },\n  };\n\n  /**\n   * Class constructor.\n   */\n  constructor(base: Base) {\n    super(base);\n\n    this.__hideProperties([\n      '__methodsCache',\n      '__rootElementHandler',\n      '__refsHandler',\n      '__childrenHandler',\n      '__documentHandler',\n      '__windowHandler',\n    ]);\n  }\n\n  /**\n   * Bind event methods to the given ref elements.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {HTMLElement[]} elements\n   *   The elements of the ref.\n   * @returns {void}\n   */\n  bindRef(name: string, elements: HTMLElement[]) {\n    manageRef(this, name, elements);\n  }\n\n  /**\n   * Bind event methods to the given ref elements.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {HTMLElement[]} elements\n   *   The elements of the ref.\n   * @returns {void}\n   */\n  unbindRef(name: string, elements: HTMLElement[]) {\n    manageRef(this, name, elements, 'remove');\n  }\n\n  /**\n   * Bind event methods to the given child instance.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {Base} instance\n   *   A base instance.\n   * @returns {void}\n   */\n  bindChild(name: string, instance: Base) {\n    manageChild(this, name, instance);\n  }\n\n  /**\n   * Unbind event methods to the given child instance.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {Base} instance\n   *   A base instance.\n   * @returns {void}\n   */\n  unbindChild(name: string, instance: Base) {\n    manageChild(this, name, instance, 'remove');\n  }\n\n  /**\n   * Bind event methods on the root element.\n   *\n   * @returns {void}\n   */\n  bindRootElement() {\n    manageRootElement(this);\n  }\n\n  /**\n   * Unbind event method from the root element.\n   *\n   * @returns {void}\n   */\n  unbindRootElement() {\n    manageRootElement(this, 'remove');\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Base } from '../index.js';\nimport getAllProperties from '../../utils/object/getAllProperties.js';\nimport { dashCase, isArray, pascalCase } from '../../utils/index.js';\nimport { getEventTarget, eventIsNative, eventIsDefinedInConfig } from '../utils.js';\nimport { AbstractManager } from './AbstractManager.js';\nimport { normalizeRefName } from './RefsManager.js';\nimport { features } from '../features.js';\n\nconst regexes = new Map();\n\n/**\n * Get a regex with a cache;\n *\n * @param   {string} regex\n * @returns {RegExp}\n */\nfunction getRegex(regex: string): RegExp {\n  if (!regexes.has(regex)) {\n    regexes.set(regex, new RegExp(regex));\n  }\n\n  return regexes.get(regex);\n}\n\n/**\n * Get the event name from the given method and its tied ref or children name.\n *\n * @param {string} method\n * @param {string} name\n * @returns {string}\n * @private\n */\nfunction getEventNameByMethod(method: string, name = ''): string {\n  const regex = getRegex(`^on${pascalCase(name)}([A-Z].*)$`);\n  const [, event] = method.match(regex);\n  return dashCase(event);\n}\n\n/**\n * Get the base instance methods matching the `onSomething` pattern.\n *\n * @param {EventsManager} that\n * @param {string} [name]\n * @returns {string[]}\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction getEventMethodsByName(that: EventsManager, name = ''): string[] {\n  const regex = getRegex(`^on${pascalCase(name)}[A-Z].*$`);\n  const key = regex.toString();\n\n  let methods = that.__methodsCache.get(key);\n\n  if (!methods) {\n    methods = Array.from(\n      getAllProperties(that.__base, [], (method) => regex.test(method)).reduce(\n        (set, [method]) => set.add(method),\n        new Set(),\n      ),\n    ) as string[];\n    that.__methodsCache.set(key, methods);\n  }\n\n  return methods;\n}\n\n/**\n * Manage a ref event methods.\n *\n * @param {EventsManager} that\n * @param  {string} name\n *   The name of the ref.\n * @param  {HTMLElement[]} elements\n *   The elements of the ref.\n * @param  {'add'|'remove'} [mode]\n *   The action to perform: add or remove the event listeners.\n * @returns {void}\n * @private\n */\nfunction manageRef(\n  // eslint-disable-next-line no-use-before-define\n  that: EventsManager,\n  name: string,\n  elements: HTMLElement[],\n  mode: 'add' | 'remove' = 'add',\n) {\n  const action = `${mode}EventListener`;\n  const methods = getEventMethodsByName(that, name);\n  for (const method of methods) {\n    const event = getEventNameByMethod(method, name);\n    for (const element of elements) {\n      if (element instanceof EventTarget) {\n        element[action](event, that.__refsHandler);\n      }\n    }\n  }\n}\n/**\n * Manage event methods to the given child instance.\n *\n * @param {EventsManager} that\n * @param {string} name\n *   The name of the ref.\n * @param {Base} instance\n *   A base instance.\n * @param {'add'|'remove'} [mode]\n *   The action to perform: add or remove the event listeners.\n * @returns {void}\n * @private\n */\nfunction manageChild(\n  // eslint-disable-next-line no-use-before-define\n  that: EventsManager,\n  name: string,\n  instance: Base,\n  mode: 'add' | 'remove' = 'add',\n) {\n  const action = mode === 'add' ? '$on' : '$off';\n  const methods = getEventMethodsByName(that, name);\n  const config = instance.__config;\n  for (const method of methods) {\n    const event = getEventNameByMethod(method, name);\n    if (getEventTarget(instance, event, config)) {\n      instance[action](event, that.__childrenHandler);\n    }\n  }\n}\n\nconst isDocumentRegex = /^onDocument[A-Z][a-z]+/;\nconst isWindowRegex = /^onWindow[A-Z][a-z]+/;\nconst methodIsDocument = (method) => isDocumentRegex.test(method);\nconst methodIsWindow = (method) => isWindowRegex.test(method);\nconst methodIsGlobal = (method) => methodIsWindow(method) || methodIsDocument(method);\nconst getGlobalEventTarget = (method) => (methodIsDocument(method) ? document : window);\n\n/**\n * Manage event methods on the root element.\n *\n * @param {EventsManager} that\n * @param {'add'|'remove'} [mode]\n *   The action to perform: add or remove the event listeners, defaults to 'add'.\n * @returns {void}\n * @private\n */\n// eslint-disable-next-line no-use-before-define\nfunction manageRootElement(that: EventsManager, mode: 'add' | 'remove' = 'add') {\n  const modeMethod = `${mode}EventListener`;\n  const methods = getEventMethodsByName(that);\n\n  const { __base: base, __config: config } = that;\n\n  for (const method of methods) {\n    let event = getEventNameByMethod(method);\n\n    if (methodIsGlobal(method)) {\n      event = getEventNameByMethod(method, methodIsDocument(method) ? 'document' : 'window');\n      const target = getGlobalEventTarget(method);\n      target[modeMethod](\n        event,\n        methodIsDocument(method) ? that.__documentHandler : that.__windowHandler,\n      );\n    } else {\n      const target = getEventTarget(base, event, config);\n      target?.[modeMethod](event, that.__rootElementHandler);\n    }\n  }\n}\n\nexport type EventManagerCallbackParams = {\n  event: Event | null;\n  args: Array<any>;\n  index: number;\n  target: Element | Base | Promise<Base> | typeof window | typeof document | null;\n};\n\n/**\n * Normalize `on...` method params.\n */\nfunction normalizeParams(\n  params: Partial<EventManagerCallbackParams> = {},\n): EventManagerCallbackParams {\n  return {\n    event: null,\n    args: [],\n    index: 0,\n    target: null,\n    ...params,\n  };\n}\n\n/**\n * Event management class.\n *\n * @todo Prevent binding of `onChildOrRefEvent` to the root element\n * @todo Use event delegation?\n */\nexport class EventsManager extends AbstractManager {\n  __methodsCache: Map<string, string[]> = new Map();\n\n  /**\n   * Event listener object for the root element.\n   */\n  __rootElementHandler: EventListenerObject = {\n    handleEvent: (event: Event | CustomEvent) => {\n      const normalizedEventName = pascalCase(event.type);\n      const method = `on${normalizedEventName}`;\n      const isCustomEvent = event instanceof CustomEvent;\n\n      this.__base[method](\n        normalizeParams({\n          event,\n          args: isCustomEvent ? event.detail ?? [] : [],\n          target: isCustomEvent ? this.__base : this.__element,\n        }),\n      );\n    },\n  };\n\n  /**\n   * Event listener object for the root element.\n   *\n   * @type {EventListenerObject}\n   */\n  __documentHandler = {\n    /**\n     * @param   {Event|CustomEvent} event\n     * @returns {void}\n     */\n    handleEvent: (event) => {\n      const normalizedEventName = pascalCase(event.type);\n      const method = `onDocument${normalizedEventName}`;\n\n      this.__base[method](normalizeParams({ event, target: document }));\n    },\n  };\n\n  /**\n   * Event listener object for the root element.\n   *\n   * @type {EventListenerObject}\n   */\n  __windowHandler = {\n    /**\n     * @param   {Event|CustomEvent} event\n     * @returns {void}\n     */\n    handleEvent: (event) => {\n      const normalizedEventName = pascalCase(event.type);\n      const method = `onWindow${normalizedEventName}`;\n\n      this.__base[method](normalizeParams({ event, target: window }));\n    },\n  };\n\n  /**\n   * Event listener object for the refs.\n   */\n  __refsHandler: EventListenerObject = {\n    handleEvent: (event) => {\n      const ref = event.currentTarget as HTMLElement;\n      const attributes = features.get('attributes');\n      const refName = normalizeRefName(ref.getAttribute(attributes.ref));\n\n      const normalizedRefName = pascalCase(refName);\n      const normalizedEventName = pascalCase(event.type);\n      const method = `on${normalizedRefName}${normalizedEventName}`;\n\n      let index = 0;\n      if (isArray(this.__base.$refs[refName])) {\n        index = (this.__base.$refs[refName] as HTMLElement[]).indexOf(ref);\n      }\n\n      this.__base[method](normalizeParams({ event, index, target: ref }));\n    },\n  };\n\n  /**\n   * Event listener object for the children.\n   */\n  __childrenHandler: EventListenerObject = {\n    handleEvent: (event: CustomEvent) => {\n      const childrenManager = this.__base.$children;\n\n      // @todo handle async child components\n      const { name, child: resolvedChild } = childrenManager.registeredNames\n        .map((childName) => ({\n          name: childName,\n          child: [...childrenManager[childName]].find(\n            // @ts-ignore\n            (instance) => instance === event.currentTarget || instance.$el === event.currentTarget,\n          ),\n        }))\n        .find(({ child }) => child);\n\n      const normalizedChildName = pascalCase(name);\n      const normalizedEventName = pascalCase(event.type);\n      const method = `on${normalizedChildName}${normalizedEventName}`;\n\n      const index = [...childrenManager[name]].indexOf(resolvedChild);\n\n      const args = isArray(event.detail) ? event.detail : [];\n      this.__base[method](normalizeParams({ event, index, args, target: resolvedChild }));\n    },\n  };\n\n  /**\n   * Class constructor.\n   */\n  constructor(base: Base) {\n    super(base);\n\n    this.__hideProperties([\n      '__methodsCache',\n      '__rootElementHandler',\n      '__refsHandler',\n      '__childrenHandler',\n      '__documentHandler',\n      '__windowHandler',\n    ]);\n  }\n\n  /**\n   * Bind event methods to the given ref elements.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {HTMLElement[]} elements\n   *   The elements of the ref.\n   * @returns {void}\n   */\n  bindRef(name: string, elements: HTMLElement[]) {\n    manageRef(this, name, elements);\n  }\n\n  /**\n   * Bind event methods to the given ref elements.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {HTMLElement[]} elements\n   *   The elements of the ref.\n   * @returns {void}\n   */\n  unbindRef(name: string, elements: HTMLElement[]) {\n    manageRef(this, name, elements, 'remove');\n  }\n\n  /**\n   * Bind event methods to the given child instance.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {Base} instance\n   *   A base instance.\n   * @returns {void}\n   */\n  bindChild(name: string, instance: Base) {\n    manageChild(this, name, instance);\n  }\n\n  /**\n   * Unbind event methods to the given child instance.\n   *\n   * @param {string} name\n   *   The name of the ref.\n   * @param {Base} instance\n   *   A base instance.\n   * @returns {void}\n   */\n  unbindChild(name: string, instance: Base) {\n    manageChild(this, name, instance, 'remove');\n  }\n\n  /**\n   * Bind event methods on the root element.\n   *\n   * @returns {void}\n   */\n  bindRootElement() {\n    manageRootElement(this);\n  }\n\n  /**\n   * Unbind event method from the root element.\n   *\n   * @returns {void}\n   */\n  unbindRootElement() {\n    manageRootElement(this, 'remove');\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/Base/managers/OptionsManager.d.ts

@@ -34,7 +34,7 @@ export type OptionsInterface = {
 /**
  * Get a property name.
  */
-export declare function __getPropertyName(name: string, prefix?: string): string;
+export declare const __getPropertyName: (name: string, prefix?: unknown) => string;
 /**
  * Class options to manage options as data attributes on an HTML element.
  *

package/Base/managers/OptionsManager.js

@@ -1,6 +1,15 @@
 import deepmerge from "deepmerge";
 import { AbstractManager } from "./AbstractManager.js";
-import { isDev, isFunction, isDefined, isBoolean, isArray, isObject } from "../../utils/index.js";
+import {
+  isDev,
+  isFunction,
+  isDefined,
+  isBoolean,
+  isArray,
+  isObject,
+  memo
+} from "../../utils/index.js";
+import { features } from "../features.js";
 const types = /* @__PURE__ */ new Set([String, Number, Boolean, Array, Object]);
 const __defaultValues = {
   String: "",
@@ -9,16 +18,12 @@ const __defaultValues = {
   Array: () => [],
   Object: () => ({})
 };
-const __propertyNameCache = /* @__PURE__ */ new Map();
-function __getPropertyName(name, prefix = "") {
-  const key = name + prefix;
-  if (__propertyNameCache.has(key)) {
-    return __propertyNameCache.get(key);
-  }
-  const propertyName = `option${prefix}${name.replace(/^\w/, (c) => c.toUpperCase())}`;
-  __propertyNameCache.set(key, propertyName);
+const UPPERCASE_REGEX = /([A-Z])/g;
+const __getPropertyName = memo(function __getPropertyName2(name, prefix = "") {
+  const attributes = features.get("attributes");
+  const propertyName = `${attributes.option}${prefix ? `-${prefix}` : ""}-${name.replaceAll(UPPERCASE_REGEX, "-$1")}`;
   return propertyName;
-}
+});
 function __register(that, name, config) {
   if (!types.has(config.type)) {
     if (isDev) {
@@ -95,16 +100,16 @@ class OptionsManager extends AbstractManager {
     const { type } = config;
     const defaultValue = isFunction(config.default) ? config.default(this.__base) : config.default;
     const propertyName = __getPropertyName(name);
-    const hasProperty = isDefined(this.__element.dataset[propertyName]);
+    const hasProperty = this.__element.hasAttribute(propertyName);
     if (type === Boolean) {
       if (defaultValue) {
-        const negatedPropertyName = __getPropertyName(name, "No");
-        const hasNegatedProperty = isDefined(this.__element.dataset[negatedPropertyName]);
+        const negatedPropertyName = __getPropertyName(name, "no");
+        const hasNegatedProperty = this.__element.hasAttribute(negatedPropertyName);
         return !hasNegatedProperty;
       }
       return hasProperty || defaultValue;
     }
-    const value = this.__element.dataset[propertyName];
+    const value = this.__element.getAttribute(propertyName);
     if (type === Number) {
       return hasProperty ? Number(value) : defaultValue;
     }
@@ -139,16 +144,16 @@ class OptionsManager extends AbstractManager {
     switch (type) {
       case Boolean:
         if (defaultValue) {
-          const negatedPropertyName = __getPropertyName(name, "No");
+          const negatedPropertyName = __getPropertyName(name, "no");
           if (value) {
-            delete this.__element.dataset[negatedPropertyName];
+            this.__element.removeAttribute(negatedPropertyName);
           } else {
-            this.__element.dataset[negatedPropertyName] = "";
+            this.__element.setAttribute(negatedPropertyName, "");
           }
         } else if (value) {
-          this.__element.dataset[propertyName] = "";
+          this.__element.setAttribute(propertyName, "");
         } else {
-          delete this.__element.dataset[propertyName];
+          this.__element.removeAttribute(propertyName);
         }
         break;
       case Array:
@@ -156,7 +161,7 @@ class OptionsManager extends AbstractManager {
         this.__values[name] = value;
         break;
       default:
-        this.__element.dataset[propertyName] = value;
+        this.__element.setAttribute(propertyName, value);
     }
   }
 }

package/Base/managers/OptionsManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/OptionsManager.ts"],
-  "sourcesContent": ["import deepmerge from 'deepmerge';\nimport type { Options as DeepmergeOptions } from 'deepmerge';\nimport { AbstractManager } from './AbstractManager.js';\nimport { isDev, isFunction, isDefined, isBoolean, isArray, isObject } from '../../utils/index.js';\nimport type { Base } from '../index.js';\n\ntype OptionType =\n  | StringConstructor\n  | NumberConstructor\n  | BooleanConstructor\n  | ArrayConstructor\n  | ObjectConstructor;\n\ntype ArrayOption = {\n  type: ArrayConstructor;\n  default?: (instance: Base) => unknown[];\n  merge?: boolean | DeepmergeOptions;\n};\n\ntype ObjectOption = {\n  type: ObjectConstructor;\n  default?: (instance: Base) => unknown;\n  merge?: boolean | DeepmergeOptions;\n};\n\ntype StringOption = {\n  type: StringConstructor;\n  default?: string | ((instance: Base) => string);\n};\n\ntype NumberOption = {\n  type: NumberConstructor;\n  default?: number | ((instance: Base) => number);\n};\n\ntype BooleanOption = {\n  type: BooleanConstructor;\n  default?: boolean | ((instance: Base) => boolean);\n};\n\nexport type OptionObject = ArrayOption | ObjectOption | StringOption | NumberOption | BooleanOption;\nexport type OptionsSchema = { [name: string]: OptionType | OptionObject };\nexport type OptionsInterface = { [optionName: string]: unknown };\n\n/**\n * List of allowed types.\n */\nconst types: Set<OptionType> = new Set([String, Number, Boolean, Array, Object]);\n\n/**\n * The default values to return for each available type.\n */\nconst __defaultValues = {\n  String: '',\n  Number: 0,\n  Boolean: false,\n  Array: () => [],\n  Object: () => ({}),\n};\n\n/**\n * Property name cache.\n */\nconst __propertyNameCache: Map<string, string> = new Map();\n\n/**\n * Get a property name.\n */\nexport function __getPropertyName(name: string, prefix = '') {\n  const key = name + prefix;\n\n  if (__propertyNameCache.has(key)) {\n    return __propertyNameCache.get(key);\n  }\n\n  const propertyName = `option${prefix}${name.replace(/^\\w/, (c) => c.toUpperCase())}`;\n  __propertyNameCache.set(key, propertyName);\n  return propertyName;\n}\n\n/**\n * Register an option.\n *\n * @param  {OptionsManager} that\n * @param  {string} name\n * @param  {OptionObject} config\n * @returns {void}\n * @private\n */\nfunction __register(that: OptionsManager, name: string, config: OptionObject) {\n  if (!types.has(config.type)) {\n    if (isDev) {\n      throw new Error(\n        `The \"${name}\" option has an invalid type. The allowed types are: String, Number, Boolean, Array and Object.`,\n      );\n    }\n    return;\n  }\n\n  config.default = config.default ?? __defaultValues[config.type.name];\n\n  if ((config.type === Array || config.type === Object) && !isFunction(config.default)) {\n    if (isDev) {\n      throw new Error(\n        `The default value for options of type \"${config.type.name}\" must be returned by a function.`,\n      );\n    }\n    return;\n  }\n\n  Object.defineProperty(that, name, {\n    get: () => that.get(name, config),\n    set: (value) => {\n      that.set(name, value, config);\n    },\n    enumerable: true,\n  });\n}\n\n/**\n * Class options to manage options as data attributes on an HTML element.\n *\n * @todo Use `MutationObserver` to update values? Might be more performant.\n */\nexport class OptionsManager extends AbstractManager {\n  /**\n   * An object to store Array and Object values for reference.\n   *\n   * @private\n   */\n  __values = {};\n\n  /**\n   * Default value for the name property.\n   */\n  name = 'Base';\n\n  /**\n   * Default value for the debug property.\n   */\n  debug = false;\n\n  /**\n   * Default value for the log property.\n   */\n  log = false;\n\n  /**\n   * Class constructor.\n   */\n  constructor(base: Base) {\n    super(base);\n\n    this.__hideProperties(['__values', '__defaultValues']);\n    const schema: OptionsSchema = this.__config.options || {};\n    this.name = this.__config.name;\n\n    schema.debug = {\n      type: Boolean,\n      default: this.__config.debug ?? false,\n    };\n\n    schema.log = {\n      type: Boolean,\n      default: this.__config.log ?? false,\n    };\n\n    for (const [name, config] of Object.entries(schema)) {\n      __register(\n        this,\n        name,\n        types.has(config as OptionType)\n          ? ({ type: config as OptionType } as OptionObject)\n          : (config as OptionObject),\n      );\n    }\n  }\n\n  /**\n   * Get an option value.\n   */\n  get(name: string, config: OptionObject) {\n    const { type } = config;\n    const defaultValue = isFunction(config.default) ? config.default(this.__base) : config.default;\n    const propertyName = __getPropertyName(name);\n    const hasProperty = isDefined(this.__element.dataset[propertyName]);\n\n    if (type === Boolean) {\n      if (defaultValue) {\n        const negatedPropertyName = __getPropertyName(name, 'No');\n        const hasNegatedProperty = isDefined(this.__element.dataset[negatedPropertyName]);\n\n        return !hasNegatedProperty;\n      }\n\n      return hasProperty || defaultValue;\n    }\n\n    const value = this.__element.dataset[propertyName];\n\n    if (type === Number) {\n      return hasProperty ? Number(value) : defaultValue;\n    }\n\n    if (type === Array || type === Object) {\n      // eslint-disable-next-line no-param-reassign\n      config = type === Array ? (config as ArrayOption) : (config as ObjectOption);\n\n      if (!this.__values[name]) {\n        let val = hasProperty ? JSON.parse(value) : defaultValue;\n\n        if (isDefined(config.merge)) {\n          val = isBoolean(config.merge)\n            ? deepmerge(defaultValue, val)\n            : deepmerge(defaultValue, val, config.merge);\n        }\n\n        this.__values[name] = val;\n      }\n\n      return this.__values[name];\n    }\n\n    return hasProperty ? value : defaultValue;\n  }\n\n  /**\n   * Set an option value.\n   */\n  set(name: string, value: unknown, config: OptionObject) {\n    const { type, default: defaultValue } = config;\n    const propertyName = __getPropertyName(name);\n\n    if (value.constructor.name !== type.name) {\n      if (isDev) {\n        const val = isArray(value) || isObject(value) ? JSON.stringify(value) : value;\n        throw new TypeError(\n          `The \"${val}\" value for the \"${name}\" option must be of type \"${type.name}\"`,\n        );\n      }\n      return;\n    }\n\n    switch (type) {\n      case Boolean:\n        if (defaultValue) {\n          const negatedPropertyName = __getPropertyName(name, 'No');\n\n          if (value) {\n            delete this.__element.dataset[negatedPropertyName];\n          } else {\n            this.__element.dataset[negatedPropertyName] = '';\n          }\n        } else if (value) {\n          this.__element.dataset[propertyName] = '';\n        } else {\n          delete this.__element.dataset[propertyName];\n        }\n        break;\n      case Array:\n      case Object:\n        this.__values[name] = value;\n        break;\n      default:\n        this.__element.dataset[propertyName] = value as string;\n    }\n  }\n}\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import deepmerge from 'deepmerge';\nimport type { Options as DeepmergeOptions } from 'deepmerge';\nimport { AbstractManager } from './AbstractManager.js';\nimport {\n  isDev,\n  isFunction,\n  isDefined,\n  isBoolean,\n  isArray,\n  isObject,\n  memo,\n} from '../../utils/index.js';\nimport type { Base } from '../index.js';\nimport { features } from '../features.js';\n\ntype OptionType =\n  | StringConstructor\n  | NumberConstructor\n  | BooleanConstructor\n  | ArrayConstructor\n  | ObjectConstructor;\n\ntype ArrayOption = {\n  type: ArrayConstructor;\n  default?: (instance: Base) => unknown[];\n  merge?: boolean | DeepmergeOptions;\n};\n\ntype ObjectOption = {\n  type: ObjectConstructor;\n  default?: (instance: Base) => unknown;\n  merge?: boolean | DeepmergeOptions;\n};\n\ntype StringOption = {\n  type: StringConstructor;\n  default?: string | ((instance: Base) => string);\n};\n\ntype NumberOption = {\n  type: NumberConstructor;\n  default?: number | ((instance: Base) => number);\n};\n\ntype BooleanOption = {\n  type: BooleanConstructor;\n  default?: boolean | ((instance: Base) => boolean);\n};\n\nexport type OptionObject = ArrayOption | ObjectOption | StringOption | NumberOption | BooleanOption;\nexport type OptionsSchema = { [name: string]: OptionType | OptionObject };\nexport type OptionsInterface = { [optionName: string]: unknown };\n\n/**\n * List of allowed types.\n */\nconst types: Set<OptionType> = new Set([String, Number, Boolean, Array, Object]);\n\n/**\n * The default values to return for each available type.\n */\nconst __defaultValues = {\n  String: '',\n  Number: 0,\n  Boolean: false,\n  Array: () => [],\n  Object: () => ({}),\n};\n\nconst UPPERCASE_REGEX = /([A-Z])/g;\n\n/**\n * Get a property name.\n */\nexport const __getPropertyName = memo(function __getPropertyName(name: string, prefix = '') {\n  const attributes = features.get('attributes');\n  const propertyName = `${attributes.option}${prefix ? `-${prefix}` : ''}-${name.replaceAll(UPPERCASE_REGEX, '-$1')}`;\n  return propertyName;\n});\n\n/**\n * Register an option.\n *\n * @param  {OptionsManager} that\n * @param  {string} name\n * @param  {OptionObject} config\n * @returns {void}\n * @private\n */\nfunction __register(that: OptionsManager, name: string, config: OptionObject) {\n  if (!types.has(config.type)) {\n    if (isDev) {\n      throw new Error(\n        `The \"${name}\" option has an invalid type. The allowed types are: String, Number, Boolean, Array and Object.`,\n      );\n    }\n    return;\n  }\n\n  config.default = config.default ?? __defaultValues[config.type.name];\n\n  if ((config.type === Array || config.type === Object) && !isFunction(config.default)) {\n    if (isDev) {\n      throw new Error(\n        `The default value for options of type \"${config.type.name}\" must be returned by a function.`,\n      );\n    }\n    return;\n  }\n\n  Object.defineProperty(that, name, {\n    get: () => that.get(name, config),\n    set: (value) => {\n      that.set(name, value, config);\n    },\n    enumerable: true,\n  });\n}\n\n/**\n * Class options to manage options as data attributes on an HTML element.\n *\n * @todo Use `MutationObserver` to update values? Might be more performant.\n */\nexport class OptionsManager extends AbstractManager {\n  /**\n   * An object to store Array and Object values for reference.\n   *\n   * @private\n   */\n  __values = {};\n\n  /**\n   * Default value for the name property.\n   */\n  name = 'Base';\n\n  /**\n   * Default value for the debug property.\n   */\n  debug = false;\n\n  /**\n   * Default value for the log property.\n   */\n  log = false;\n\n  /**\n   * Class constructor.\n   */\n  constructor(base: Base) {\n    super(base);\n\n    this.__hideProperties(['__values', '__defaultValues']);\n    const schema: OptionsSchema = this.__config.options || {};\n    this.name = this.__config.name;\n\n    schema.debug = {\n      type: Boolean,\n      default: this.__config.debug ?? false,\n    };\n\n    schema.log = {\n      type: Boolean,\n      default: this.__config.log ?? false,\n    };\n\n    for (const [name, config] of Object.entries(schema)) {\n      __register(\n        this,\n        name,\n        types.has(config as OptionType)\n          ? ({ type: config as OptionType } as OptionObject)\n          : (config as OptionObject),\n      );\n    }\n  }\n\n  /**\n   * Get an option value.\n   */\n  get(name: string, config: OptionObject) {\n    const { type } = config;\n    const defaultValue = isFunction(config.default) ? config.default(this.__base) : config.default;\n    const propertyName = __getPropertyName(name);\n    const hasProperty = this.__element.hasAttribute(propertyName);\n\n    if (type === Boolean) {\n      if (defaultValue) {\n        const negatedPropertyName = __getPropertyName(name, 'no');\n        const hasNegatedProperty = this.__element.hasAttribute(negatedPropertyName);\n\n        return !hasNegatedProperty;\n      }\n\n      return hasProperty || defaultValue;\n    }\n\n    const value = this.__element.getAttribute(propertyName);\n\n    if (type === Number) {\n      return hasProperty ? Number(value) : defaultValue;\n    }\n\n    if (type === Array || type === Object) {\n      // eslint-disable-next-line no-param-reassign\n      config = type === Array ? (config as ArrayOption) : (config as ObjectOption);\n\n      if (!this.__values[name]) {\n        let val = hasProperty ? JSON.parse(value) : defaultValue;\n\n        if (isDefined(config.merge)) {\n          val = isBoolean(config.merge)\n            ? deepmerge(defaultValue, val)\n            : deepmerge(defaultValue, val, config.merge);\n        }\n\n        this.__values[name] = val;\n      }\n\n      return this.__values[name];\n    }\n\n    return hasProperty ? value : defaultValue;\n  }\n\n  /**\n   * Set an option value.\n   */\n  set(name: string, value: unknown, config: OptionObject) {\n    const { type, default: defaultValue } = config;\n    const propertyName = __getPropertyName(name);\n\n    if (value.constructor.name !== type.name) {\n      if (isDev) {\n        const val = isArray(value) || isObject(value) ? JSON.stringify(value) : value;\n        throw new TypeError(\n          `The \"${val}\" value for the \"${name}\" option must be of type \"${type.name}\"`,\n        );\n      }\n      return;\n    }\n\n    switch (type) {\n      case Boolean:\n        if (defaultValue) {\n          const negatedPropertyName = __getPropertyName(name, 'no');\n\n          if (value) {\n            this.__element.removeAttribute(negatedPropertyName);\n          } else {\n            this.__element.setAttribute(negatedPropertyName, '');\n          }\n        } else if (value) {\n          this.__element.setAttribute(propertyName, '');\n        } else {\n          this.__element.removeAttribute(propertyName);\n        }\n        break;\n      case Array:\n      case Object:\n        this.__values[name] = value;\n        break;\n      default:\n        this.__element.setAttribute(propertyName, value as string);\n    }\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["__getPropertyName"]
 }

package/Base/managers/RefsManager.d.ts

@@ -2,7 +2,7 @@ import { AbstractManager } from './AbstractManager.js';
 /**
  * Normalize the name of ref.
  */
-export declare function normalizeRefName(name: string): any;
+export declare const normalizeRefName: (name: string) => string;
 /**
  * Refs Manager
  *

package/Base/managers/RefsManager.js

@@ -2,18 +2,16 @@ import { AbstractManager } from "./AbstractManager.js";
 import {
   isDev,
   isArray,
-  isDefined,
   getAncestorWhereUntil,
   endsWith,
-  startsWith
+  startsWith,
+  memo,
+  camelCase
 } from "../../utils/index.js";
+import { features } from "../features.js";
 const NORMALIZE_REF_NAME_REGEX = /\[\]$/;
 const NAMESPACED_REF_REGEX = /^(.*\.)/;
-const normalizedRefNamesCache = /* @__PURE__ */ new Map();
-function normalizeRefName(name) {
-  if (normalizedRefNamesCache.has(name)) {
-    return normalizedRefNamesCache.get(name);
-  }
+const normalizeRefName = memo(function normalizeRefName2(name) {
   let normalizedName = name;
   if (endsWith(name, "[]")) {
     normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, "");
@@ -21,14 +19,14 @@ function normalizeRefName(name) {
   if (normalizedName.includes(".")) {
     return normalizedName.replace(NAMESPACED_REF_REGEX, "");
   }
-  normalizedRefNamesCache.set(name, normalizedName);
   return normalizedName;
-}
+});
 function refBelongToInstance(ref, rootElement, name) {
-  const isPrefixed = startsWith(ref.dataset.ref, name);
+  const attributes = features.get("attributes");
+  const isPrefixed = startsWith(ref.getAttribute(attributes.ref), name);
   const firstComponentAncestor = getAncestorWhereUntil(
     ref,
-    (el) => el && (isPrefixed ? el.dataset.component === name && el : isDefined(el.dataset.component)) && el !== rootElement,
+    (el) => el && (isPrefixed ? el.getAttribute(attributes.component) === name && el : el.getAttribute(attributes.component)) && el !== rootElement,
     (el) => el === rootElement
   );
   return firstComponentAncestor === rootElement;
@@ -37,32 +35,23 @@ function __register(that, refName) {
   const isMultiple = endsWith(refName, "[]");
   const propName = normalizeRefName(refName);
   const { name } = that.__base.$options;
+  const attributes = features.get("attributes");
   const refs = Array.from(
     that.__element.querySelectorAll(
-      `[data-ref="${refName}"],[data-ref="${name}.${refName}"]`
+      `[${attributes.ref}="${refName}"],[${attributes.ref}="${name}.${refName}"]`
     )
   ).filter((ref) => refBelongToInstance(ref, that.__element, name));
   if (isDev && !isMultiple && refs.length > 1) {
     console.warn(
-      // @ts-ignore
-      `[${that.__base.$options.name}]`,
+      `[${that.__base.$id}]`,
       `The "${refName}" ref has been found multiple times.`,
       "Did you forgot to add the `[]` suffix to its name?"
     );
   }
-  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?`
-      );
-    }
-    return;
+  if (refs.length) {
+    that.__eventsManager.bindRef(refName, refs);
   }
-  that.__eventsManager.bindRef(refName, refs);
-  Object.defineProperty(that, propName, {
+  Object.defineProperty(that, camelCase(propName), {
     // @todo remove usage of non-multiple refs as array
     value: isMultiple || refs.length > 1 ? refs : refs[0],
     enumerable: true,

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  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,OAAQ,YAAW,MAAM,OAAO;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB;AACd,eAAW,WAAW,KAAK,OAAQ,cAAa,MAAM,OAAO;AAAA,EAC/D;AACF;",
-  "names": []
+  "sourcesContent": ["import { AbstractManager } from './AbstractManager.js';\nimport {\n  isDev,\n  isArray,\n  isDefined,\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\n  const refs = Array.from(\n    that.__element.querySelectorAll<HTMLElement>(\n      `[${attributes.ref}=\"${refName}\"],[${attributes.ref}=\"${name}.${refName}\"]`,\n    ),\n  ).filter((ref) => refBelongToInstance(ref, that.__element, name));\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,EAEA;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;AAE5C,QAAM,OAAO,MAAM;AAAA,IACjB,KAAK,UAAU;AAAA,MACb,IAAI,WAAW,GAAG,KAAK,OAAO,OAAO,WAAW,GAAG,KAAK,IAAI,IAAI,OAAO;AAAA,IACzE;AAAA,EACF,EAAE,OAAO,CAAC,QAAQ,oBAAoB,KAAK,KAAK,WAAW,IAAI,CAAC;AAGhE,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;",
+  "names": ["normalizeRefName"]
 }

package/Base/managers/ResponsiveOptionsManager.js

@@ -1,20 +1,23 @@
 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);
-  const regex = new RegExp(`${propertyName}:(.+)$`);
-  for (const optionName of Object.keys(that.__element.dataset)) {
+  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(/^option/, "");
+        responsiveName = optionName.replace(dataOptionRegExp, "");
       }
     }
   }

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  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;",
+  "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;",
   "names": []
 }