@studiometa/js-toolkit 2.10.2 → 2.11.2

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?: () => unknown[];\n  merge?: boolean | DeepmergeOptions;\n};\n\ntype ObjectOption = {\n  type: ObjectConstructor;\n  default?: () => unknown;\n  merge?: boolean | DeepmergeOptions;\n};\n\ntype StringOption = {\n  type: StringConstructor;\n  default?: string;\n};\n\ntype NumberOption = {\n  type: NumberConstructor;\n  default?: number;\n};\n\ntype BooleanOption = {\n  type: BooleanConstructor;\n  default?: 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   * @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    Object.entries(schema).forEach(([name, config]) => {\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, default: defaultValue } = config;\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) : config.default();\n\n        if (isDefined(config.merge)) {\n          val = isBoolean(config.merge)\n            ? deepmerge(config.default(), val)\n            : deepmerge(config.default(), 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": "AAAA,OAAO,eAAe;AAEtB,SAAS,uBAAuB;AAChC,SAAS,OAAO,YAAY,WAAW,WAAW,SAAS,gBAAgB;AA4C3E,MAAM,QAAyB,oBAAI,IAAI,CAAC,QAAQ,QAAQ,SAAS,OAAO,MAAM,CAAC;AAK/E,MAAM,kBAAkB;AAAA,EACtB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO,MAAM,CAAC;AAAA,EACd,QAAQ,OAAO,CAAC;AAClB;AAKA,MAAM,sBAA2C,oBAAI,IAAI;AAKlD,SAAS,kBAAkB,MAAc,SAAS,IAAI;AAC3D,QAAM,MAAM,OAAO;AAEnB,MAAI,oBAAoB,IAAI,GAAG,GAAG;AAChC,WAAO,oBAAoB,IAAI,GAAG;AAAA,EACpC;AAEA,QAAM,eAAe,SAAS,SAAS,KAAK,QAAQ,OAAO,CAAC,MAAM,EAAE,YAAY,CAAC;AACjF,sBAAoB,IAAI,KAAK,YAAY;AACzC,SAAO;AACT;AAWA,SAAS,WAAW,MAAsB,MAAc,QAAsB;AAC5E,MAAI,CAAC,MAAM,IAAI,OAAO,IAAI,GAAG;AAC3B,QAAI,OAAO;AACT,YAAM,IAAI;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,IACF;AACA;AAAA,EACF;AAEA,SAAO,UAAU,OAAO,WAAW,gBAAgB,OAAO,KAAK;AAE/D,OAAK,OAAO,SAAS,SAAS,OAAO,SAAS,WAAW,CAAC,WAAW,OAAO,OAAO,GAAG;AACpF,QAAI,OAAO;AACT,YAAM,IAAI;AAAA,QACR,0CAA0C,OAAO,KAAK;AAAA,MACxD;AAAA,IACF;AACA;AAAA,EACF;AAEA,SAAO,eAAe,MAAM,MAAM;AAAA,IAChC,KAAK,MAAM,KAAK,IAAI,MAAM,MAAM;AAAA,IAChC,KAAK,CAAC,UAAU;AACd,WAAK,IAAI,MAAM,OAAO,MAAM;AAAA,IAC9B;AAAA,IACA,YAAY;AAAA,EACd,CAAC;AACH;AAOO,MAAM,uBAAuB,gBAAgB;AAAA,EAKlD,WAAW,CAAC;AAAA,EAKZ,OAAO;AAAA,EAKP,QAAQ;AAAA,EAKR,MAAM;AAAA,EAKN,YAAY,MAAY;AACtB,UAAM,IAAI;AAEV,SAAK,iBAAiB,CAAC,YAAY,iBAAiB,CAAC;AACrD,UAAM,SAAwB,KAAK,SAAS,WAAW,CAAC;AACxD,SAAK,OAAO,KAAK,SAAS;AAE1B,WAAO,QAAQ;AAAA,MACb,MAAM;AAAA,MACN,SAAS,KAAK,SAAS,SAAS;AAAA,IAClC;AAEA,WAAO,MAAM;AAAA,MACX,MAAM;AAAA,MACN,SAAS,KAAK,SAAS,OAAO;AAAA,IAChC;AAEA,WAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,MAAM,MAAM,MAAM;AACjD;AAAA,QACE;AAAA,QACA;AAAA,QACA,MAAM,IAAI,MAAoB,IACzB,EAAE,MAAM,OAAqB,IAC7B;AAAA,MACP;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAKA,IAAI,MAAc,QAAsB;AACtC,UAAM,EAAE,MAAM,SAAS,aAAa,IAAI;AACxC,UAAM,eAAe,kBAAkB,IAAI;AAC3C,UAAM,cAAc,UAAU,KAAK,UAAU,QAAQ,aAAa;AAElE,QAAI,SAAS,SAAS;AACpB,UAAI,cAAc;AAChB,cAAM,sBAAsB,kBAAkB,MAAM,IAAI;AACxD,cAAM,qBAAqB,UAAU,KAAK,UAAU,QAAQ,oBAAoB;AAEhF,eAAO,CAAC;AAAA,MACV;AAEA,aAAO,eAAe;AAAA,IACxB;AAEA,UAAM,QAAQ,KAAK,UAAU,QAAQ;AAErC,QAAI,SAAS,QAAQ;AACnB,aAAO,cAAc,OAAO,KAAK,IAAI;AAAA,IACvC;AAEA,QAAI,SAAS,SAAS,SAAS,QAAQ;AAErC,eAAS,SAAS,QAAS,SAA0B;AAErD,UAAI,CAAC,KAAK,SAAS,OAAO;AACxB,YAAI,MAAM,cAAc,KAAK,MAAM,KAAK,IAAI,OAAO,QAAQ;AAE3D,YAAI,UAAU,OAAO,KAAK,GAAG;AAC3B,gBAAM,UAAU,OAAO,KAAK,IACxB,UAAU,OAAO,QAAQ,GAAG,GAAG,IAC/B,UAAU,OAAO,QAAQ,GAAG,KAAK,OAAO,KAAK;AAAA,QACnD;AAEA,aAAK,SAAS,QAAQ;AAAA,MACxB;AAEA,aAAO,KAAK,SAAS;AAAA,IACvB;AAEA,WAAO,cAAc,QAAQ;AAAA,EAC/B;AAAA,EAKA,IAAI,MAAc,OAAgB,QAAsB;AACtD,UAAM,EAAE,MAAM,SAAS,aAAa,IAAI;AACxC,UAAM,eAAe,kBAAkB,IAAI;AAE3C,QAAI,MAAM,YAAY,SAAS,KAAK,MAAM;AACxC,UAAI,OAAO;AACT,cAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,KAAK,IAAI,KAAK,UAAU,KAAK,IAAI;AACxE,cAAM,IAAI;AAAA,UACR,QAAQ,uBAAuB,iCAAiC,KAAK;AAAA,QACvE;AAAA,MACF;AACA;AAAA,IACF;AAEA,YAAQ,MAAM;AAAA,MACZ,KAAK;AACH,YAAI,cAAc;AAChB,gBAAM,sBAAsB,kBAAkB,MAAM,IAAI;AAExD,cAAI,OAAO;AACT,mBAAO,KAAK,UAAU,QAAQ;AAAA,UAChC,OAAO;AACL,iBAAK,UAAU,QAAQ,uBAAuB;AAAA,UAChD;AAAA,QACF,WAAW,OAAO;AAChB,eAAK,UAAU,QAAQ,gBAAgB;AAAA,QACzC,OAAO;AACL,iBAAO,KAAK,UAAU,QAAQ;AAAA,QAChC;AACA;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,aAAK,SAAS,QAAQ;AACtB;AAAA,MACF;AACE,aAAK,UAAU,QAAQ,gBAAgB;AAAA,IAC3C;AAAA,EACF;AACF;",
+  "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?: () => unknown[];\n  merge?: boolean | DeepmergeOptions;\n};\n\ntype ObjectOption = {\n  type: ObjectConstructor;\n  default?: () => unknown;\n  merge?: boolean | DeepmergeOptions;\n};\n\ntype StringOption = {\n  type: StringConstructor;\n  default?: string;\n};\n\ntype NumberOption = {\n  type: NumberConstructor;\n  default?: number;\n};\n\ntype BooleanOption = {\n  type: BooleanConstructor;\n  default?: 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    Object.entries(schema).forEach(([name, config]) => {\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, default: defaultValue } = config;\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) : config.default();\n\n        if (isDefined(config.merge)) {\n          val = isBoolean(config.merge)\n            ? deepmerge(config.default(), val)\n            : deepmerge(config.default(), 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": []
 }

package/Base/managers/RefsManager.cjs

@@ -26,8 +26,21 @@ module.exports = __toCommonJS(RefsManager_exports);
 var import_AbstractManager = require("./AbstractManager.cjs");
 var import_utils = require("../../utils/index.cjs");
 var NORMALIZE_REF_NAME_REGEX = /\[\]$/;
+var NAMESPACED_REF_REGEX = /^(.*\.)/;
+var normalizedRefNamesCache = /* @__PURE__ */ new Map();
 function normalizeRefName(name) {
-  return name.endsWith("[]") ? name.replace(NORMALIZE_REF_NAME_REGEX, "") : name;
+  if (normalizedRefNamesCache.has(name)) {
+    return normalizedRefNamesCache.get(name);
+  }
+  let normalizedName = name;
+  if (name.endsWith("[]")) {
+    normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, "");
+  }
+  if (normalizedName.includes(".")) {
+    return normalizedName.replace(NAMESPACED_REF_REGEX, "");
+  }
+  normalizedRefNamesCache.set(name, normalizedName);
+  return normalizedName;
 }
 function refBelongToInstance(ref, rootElement, name) {
   const isPrefixed = ref.dataset.ref.startsWith(name);

package/Base/managers/RefsManager.cjs.map

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

package/Base/managers/RefsManager.d.ts

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

package/Base/managers/RefsManager.js

@@ -1,8 +1,21 @@
 import { AbstractManager } from "./AbstractManager.js";
 import { isDev, isArray, isDefined, getAncestorWhereUntil } from "../../utils/index.js";
 const NORMALIZE_REF_NAME_REGEX = /\[\]$/;
+const NAMESPACED_REF_REGEX = /^(.*\.)/;
+const normalizedRefNamesCache = /* @__PURE__ */ new Map();
 function normalizeRefName(name) {
-  return name.endsWith("[]") ? name.replace(NORMALIZE_REF_NAME_REGEX, "") : name;
+  if (normalizedRefNamesCache.has(name)) {
+    return normalizedRefNamesCache.get(name);
+  }
+  let normalizedName = name;
+  if (name.endsWith("[]")) {
+    normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, "");
+  }
+  if (normalizedName.includes(".")) {
+    return normalizedName.replace(NAMESPACED_REF_REGEX, "");
+  }
+  normalizedRefNamesCache.set(name, normalizedName);
+  return normalizedName;
 }
 function refBelongToInstance(ref, rootElement, name) {
   const isPrefixed = ref.dataset.ref.startsWith(name);

package/Base/managers/RefsManager.js.map

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

package/Base/utils.cjs.map

@@ -1,7 +1,7 @@
 {
   "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 * @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;AAMO,SAAS,eACd,UACA,OACA,QACoB;AACpB,MAAI,uBAAuB,OAAO,MAAM,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,SAAS,GAAG,GAAG;AACtC,WAAO,SAAS;AAAA,EAClB;AAEA,MAAI,oBAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO;AAAA,MACX,QAAQ;AAAA,MACR,wCAAwC,SAAS,IAAI,YAAY;AAAA,IACnE;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { isArray, isDefined, isDev, 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;",
   "names": []
 }

package/Base/utils.d.ts

@@ -24,6 +24,7 @@ export declare function eventIsDefinedInConfig(event: string, config: BaseConfig
 export declare function eventIsNative(event: string, element: HTMLElement): boolean;
 /**
  * Get the target of a given event.
+ *
  * @todo Return false in v3 if event is not defined or not native to prevent adding a listener.
  */
 export declare function getEventTarget(instance: Base, event: string, config: BaseConfig): Base | Base['$el'];

package/Base/utils.js.map

@@ -1,7 +1,7 @@
 {
   "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 * @todo Return false in v3 if event is not defined or not native to prevent adding a listener.\n */\nexport function getEventTarget(\n  instance: Base,\n  event: string,\n  config: BaseConfig,\n): Base | Base['$el'] {\n  if (eventIsDefinedInConfig(event, config)) {\n    return instance;\n  }\n\n  if (eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n\n  if (isDev) {\n    console.warn(\n      `[${config.name}]`,\n      `The \"${event}\" event is missing from the configuration and is not a native`,\n      `event for the root element of type \\`${instance.$el.constructor.name}\\`.`,\n    );\n  }\n\n  // @todo v3 return false or null\n  return instance;\n}\n"],
-  "mappings": "AAAA,SAAS,SAAS,WAAW,OAAO,kBAAkB;AAEtD,SAAS,gBAAgB;AAEzB,IAAI;AAKG,SAAS,WAAW,IAAyB;AAClD,MAAI,CAAC,SAAS,IAAI,eAAe,GAAG;AAClC,OAAG;AACH;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,YAAQ,IAAI,WAAW;AAAA,EACzB;AAEA,QAAM,IAAI,EAAE;AACd;AAEA,MAAM,YAAY,oBAAI,IAAI;AAG1B,MAAM,YAAY;AAKlB,SAAS,YAAY,gBAAgC;AACnD,MAAI,CAAC,UAAU,IAAI,cAAc,GAAG;AAClC,UAAM,QAAQ;AAAA,MAEZ,oBAAoB;AAAA,MAEpB,qBAAqB,YAAY,iBAAiB;AAAA,MAElD,qBAAqB,YAAY;AAAA,MAEjC,qBAAqB,iBAAiB;AAAA,IACxC;AACA,cAAU,IAAI,gBAAgB,MAAM,KAAK,GAAG,CAAC;AAAA,EAC/C;AAEA,SAAO,UAAU,IAAI,cAAc;AACrC;AAYO,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,YAAY,cAAc;AAC3C,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAE;AAAA,EAAO;AAGT,MAAI,SAAS,WAAW,GAAG;AACzB,eAAW,MAAM,KAAK,QAAQ,iBAAiB,cAAc,CAAC;AAAA,EAChE;AAEA,SAAO;AACT;AAKO,SAAS,uBAAuB,OAAe,QAA6B;AACjF,SAAO,QAAQ,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,KAAK;AAC7D;AAKO,SAAS,cAAc,OAAe,SAA+B;AAC1E,SAAO,UAAU,QAAQ,KAAK,QAAQ;AACxC;AAMO,SAAS,eACd,UACA,OACA,QACoB;AACpB,MAAI,uBAAuB,OAAO,MAAM,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,SAAS,GAAG,GAAG;AACtC,WAAO,SAAS;AAAA,EAClB;AAEA,MAAI,OAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO;AAAA,MACX,QAAQ;AAAA,MACR,wCAAwC,SAAS,IAAI,YAAY;AAAA,IACnE;AAAA,EACF;AAGA,SAAO;AACT;",
+  "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,SAAS,SAAS,WAAW,OAAO,kBAAkB;AAEtD,SAAS,gBAAgB;AAEzB,IAAI;AAKG,SAAS,WAAW,IAAyB;AAClD,MAAI,CAAC,SAAS,IAAI,eAAe,GAAG;AAClC,OAAG;AACH;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,YAAQ,IAAI,WAAW;AAAA,EACzB;AAEA,QAAM,IAAI,EAAE;AACd;AAEA,MAAM,YAAY,oBAAI,IAAI;AAG1B,MAAM,YAAY;AAKlB,SAAS,YAAY,gBAAgC;AACnD,MAAI,CAAC,UAAU,IAAI,cAAc,GAAG;AAClC,UAAM,QAAQ;AAAA,MAEZ,oBAAoB;AAAA,MAEpB,qBAAqB,YAAY,iBAAiB;AAAA,MAElD,qBAAqB,YAAY;AAAA,MAEjC,qBAAqB,iBAAiB;AAAA,IACxC;AACA,cAAU,IAAI,gBAAgB,MAAM,KAAK,GAAG,CAAC;AAAA,EAC/C;AAEA,SAAO,UAAU,IAAI,cAAc;AACrC;AAYO,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,YAAY,cAAc;AAC3C,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAE;AAAA,EAAO;AAGT,MAAI,SAAS,WAAW,GAAG;AACzB,eAAW,MAAM,KAAK,QAAQ,iBAAiB,cAAc,CAAC;AAAA,EAChE;AAEA,SAAO;AACT;AAKO,SAAS,uBAAuB,OAAe,QAA6B;AACjF,SAAO,QAAQ,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,KAAK;AAC7D;AAKO,SAAS,cAAc,OAAe,SAA+B;AAC1E,SAAO,UAAU,QAAQ,KAAK,QAAQ;AACxC;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,OAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO;AAAA,MACX,QAAQ;AAAA,MACR,wCAAwC,SAAS,IAAI,YAAY;AAAA,IACnE;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/index.cjs

@@ -22,11 +22,12 @@ __reExport(decorators_exports, require("./withDrag.cjs"), module.exports);
 __reExport(decorators_exports, require("./withExtraConfig.cjs"), module.exports);
 __reExport(decorators_exports, require("./withFreezedOptions.cjs"), module.exports);
 __reExport(decorators_exports, require("./withIntersectionObserver.cjs"), module.exports);
+__reExport(decorators_exports, require("./withMountOnMediaQuery.cjs"), module.exports);
 __reExport(decorators_exports, require("./withMountWhenInView.cjs"), module.exports);
+__reExport(decorators_exports, require("./withMountWhenPrefersMotion.cjs"), module.exports);
+__reExport(decorators_exports, require("./withRelativePointer.cjs"), module.exports);
 __reExport(decorators_exports, require("./withResponsiveOptions.cjs"), module.exports);
 __reExport(decorators_exports, require("./withScrolledInView/index.cjs"), module.exports);
 __reExport(decorators_exports, require("./withVue2.cjs"), module.exports);
-__reExport(decorators_exports, require("./withMountOnMediaQuery.cjs"), module.exports);
-__reExport(decorators_exports, require("./withMountWhenPrefersMotion.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;
 //# sourceMappingURL=index.cjs.map

package/decorators/index.cjs.map

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

package/decorators/index.d.ts

@@ -4,9 +4,10 @@ export * from './withDrag.js';
 export * from './withExtraConfig.js';
 export * from './withFreezedOptions.js';
 export * from './withIntersectionObserver.js';
+export * from './withMountOnMediaQuery.js';
 export * from './withMountWhenInView.js';
+export * from './withMountWhenPrefersMotion.js';
+export * from './withRelativePointer.js';
 export * from './withResponsiveOptions.js';
 export * from './withScrolledInView/index.js';
 export * from './withVue2.js';
-export * from './withMountOnMediaQuery.js';
-export * from './withMountWhenPrefersMotion.js';

package/decorators/index.js

@@ -4,10 +4,11 @@ export * from "./withDrag.js";
 export * from "./withExtraConfig.js";
 export * from "./withFreezedOptions.js";
 export * from "./withIntersectionObserver.js";
+export * from "./withMountOnMediaQuery.js";
 export * from "./withMountWhenInView.js";
+export * from "./withMountWhenPrefersMotion.js";
+export * from "./withRelativePointer.js";
 export * from "./withResponsiveOptions.js";
 export * from "./withScrolledInView/index.js";
 export * from "./withVue2.js";
-export * from "./withMountOnMediaQuery.js";
-export * from "./withMountWhenPrefersMotion.js";
 //# sourceMappingURL=index.js.map

package/decorators/index.js.map

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

package/decorators/withBreakpointObserver.cjs.map

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

package/decorators/withBreakpointObserver.js.map

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

package/decorators/withFreezedOptions.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withFreezedOptions.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseOptions } from '../Base/index.js';\n\nexport interface WithFreezedOptionsInterface extends BaseInterface {\n  readonly $options: Readonly<BaseOptions>;\n}\n\n/**\n * Freeze the `$options` property to improve performance.\n */\nexport function withFreezedOptions<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithFreezedOptionsInterface, S> {\n  /**\n   * Class.\n   */\n  class WithFreezedOptions<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Hold freezed options\n     * @private\n     */\n    __freezedOptions;\n\n    /**\n     * Lazyly freeze the `$options` property.\n     */\n    get $options() {\n      if (!this.__freezedOptions) {\n        Object.defineProperty(this, '__freezedOptions', {\n          value: Object.freeze({ ...super.$options }),\n          enumerable: false,\n          configurable: true,\n        });\n      }\n\n      return this.__freezedOptions;\n    }\n  }\n\n  // @ts-ignore\n  return WithFreezedOptions;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,SAAS,mBACd,WAC+C;AAI/C,QAAM,2BAA4D,UAAa;AAAA,IAK7E;AAAA,IAKA,IAAI,WAAW;AACb,UAAI,CAAC,KAAK,kBAAkB;AAC1B,eAAO,eAAe,MAAM,oBAAoB;AAAA,UAC9C,OAAO,OAAO,OAAO,EAAE,GAAG,MAAM,SAAS,CAAC;AAAA,UAC1C,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB,CAAC;AAAA,MACH;AAEA,aAAO,KAAK;AAAA,IACd;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseOptions } from '../Base/index.js';\n\nexport interface WithFreezedOptionsInterface extends BaseInterface {\n  readonly $options: Readonly<BaseOptions>;\n}\n\n/**\n * Freeze the `$options` property to improve performance.\n */\nexport function withFreezedOptions<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithFreezedOptionsInterface, S> {\n  /**\n   * Class.\n   */\n  class WithFreezedOptions<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Hold freezed options\n     *\n     * @private\n     */\n    __freezedOptions;\n\n    /**\n     * Lazyly freeze the `$options` property.\n     */\n    get $options() {\n      if (!this.__freezedOptions) {\n        Object.defineProperty(this, '__freezedOptions', {\n          value: Object.freeze({ ...super.$options }),\n          enumerable: false,\n          configurable: true,\n        });\n      }\n\n      return this.__freezedOptions;\n    }\n  }\n\n  // @ts-ignore\n  return WithFreezedOptions;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,SAAS,mBACd,WAC+C;AAI/C,QAAM,2BAA4D,UAAa;AAAA,IAM7E;AAAA,IAKA,IAAI,WAAW;AACb,UAAI,CAAC,KAAK,kBAAkB;AAC1B,eAAO,eAAe,MAAM,oBAAoB;AAAA,UAC9C,OAAO,OAAO,OAAO,EAAE,GAAG,MAAM,SAAS,CAAC;AAAA,UAC1C,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB,CAAC;AAAA,MACH;AAEA,aAAO,KAAK;AAAA,IACd;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withFreezedOptions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withFreezedOptions.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseOptions } from '../Base/index.js';\n\nexport interface WithFreezedOptionsInterface extends BaseInterface {\n  readonly $options: Readonly<BaseOptions>;\n}\n\n/**\n * Freeze the `$options` property to improve performance.\n */\nexport function withFreezedOptions<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithFreezedOptionsInterface, S> {\n  /**\n   * Class.\n   */\n  class WithFreezedOptions<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Hold freezed options\n     * @private\n     */\n    __freezedOptions;\n\n    /**\n     * Lazyly freeze the `$options` property.\n     */\n    get $options() {\n      if (!this.__freezedOptions) {\n        Object.defineProperty(this, '__freezedOptions', {\n          value: Object.freeze({ ...super.$options }),\n          enumerable: false,\n          configurable: true,\n        });\n      }\n\n      return this.__freezedOptions;\n    }\n  }\n\n  // @ts-ignore\n  return WithFreezedOptions;\n}\n"],
-  "mappings": "AAUO,SAAS,mBACd,WAC+C;AAI/C,QAAM,2BAA4D,UAAa;AAAA,IAK7E;AAAA,IAKA,IAAI,WAAW;AACb,UAAI,CAAC,KAAK,kBAAkB;AAC1B,eAAO,eAAe,MAAM,oBAAoB;AAAA,UAC9C,OAAO,OAAO,OAAO,EAAE,GAAG,MAAM,SAAS,CAAC;AAAA,UAC1C,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB,CAAC;AAAA,MACH;AAEA,aAAO,KAAK;AAAA,IACd;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseOptions } from '../Base/index.js';\n\nexport interface WithFreezedOptionsInterface extends BaseInterface {\n  readonly $options: Readonly<BaseOptions>;\n}\n\n/**\n * Freeze the `$options` property to improve performance.\n */\nexport function withFreezedOptions<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithFreezedOptionsInterface, S> {\n  /**\n   * Class.\n   */\n  class WithFreezedOptions<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Hold freezed options\n     *\n     * @private\n     */\n    __freezedOptions;\n\n    /**\n     * Lazyly freeze the `$options` property.\n     */\n    get $options() {\n      if (!this.__freezedOptions) {\n        Object.defineProperty(this, '__freezedOptions', {\n          value: Object.freeze({ ...super.$options }),\n          enumerable: false,\n          configurable: true,\n        });\n      }\n\n      return this.__freezedOptions;\n    }\n  }\n\n  // @ts-ignore\n  return WithFreezedOptions;\n}\n"],
+  "mappings": "AAUO,SAAS,mBACd,WAC+C;AAI/C,QAAM,2BAA4D,UAAa;AAAA,IAM7E;AAAA,IAKA,IAAI,WAAW;AACb,UAAI,CAAC,KAAK,kBAAkB;AAC1B,eAAO,eAAe,MAAM,oBAAoB;AAAA,UAC9C,OAAO,OAAO,OAAO,EAAE,GAAG,MAAM,SAAS,CAAC;AAAA,UAC1C,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB,CAAC;AAAA,MACH;AAEA,aAAO,KAAK;AAAA,IACd;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withIntersectionObserver.cjs

@@ -23,7 +23,7 @@ __export(withIntersectionObserver_exports, {
 });
 module.exports = __toCommonJS(withIntersectionObserver_exports);
 function createArrayOfNumber(length) {
-  return [...new Array(length + 1)].map((val, index) => index / length);
+  return new Array(length + 1).fill(length).map((val, index) => index / length);
 }
 function withIntersectionObserver(BaseClass, defaultOptions = { threshold: createArrayOfNumber(100) }) {
   class WithIntersectionObserver extends BaseClass {

package/decorators/withIntersectionObserver.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withIntersectionObserver.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithIntersectionObserverProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n  $observer: IntersectionObserver;\n  intersected(entries: IntersectionObserverEntry[]): void;\n}\n\nexport interface WithIntersectionObserverInterface extends BaseInterface {\n  $observer: IntersectionObserver;\n}\n\n/**\n * Create an array of number between 0 and 1 from the given length.\n */\nfunction createArrayOfNumber(length: number): number[] {\n  return [...new Array(length + 1)].map((val, index) => index / length);\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withIntersectionObserver<S extends Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: createArrayOfNumber(100) },\n): BaseDecorator<WithIntersectionObserverInterface, S, WithIntersectionObserverProps> {\n  /**\n   * Class.\n   */\n  class WithIntersectionObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithIntersectionObserverProps\n  > {\n    /**\n     * Config\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithIntersectionObserver`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        intersectionObserver: Object,\n      },\n      emits: ['intersected'],\n    };\n\n    /**\n     * Intersection observer instance.\n     */\n    $observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$observer = new IntersectionObserver(\n        (entries) => {\n          this.__callMethod('intersected', entries);\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options.intersectionObserver as IntersectionObserverInit),\n        },\n      );\n\n      this.$on('mounted', () => {\n        this.$observer.observe(this.$el);\n      });\n\n      this.$on('destroyed', () => {\n        this.$observer.unobserve(this.$el);\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithIntersectionObserver;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA,SAAS,oBAAoB,QAA0B;AACrD,SAAO,CAAC,GAAG,IAAI,MAAM,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,UAAU,QAAQ,MAAM;AACtE;AAKO,SAAS,yBACd,WAEA,iBAA2C,EAAE,WAAW,oBAAoB,GAAG,EAAE,GACG;AAIpF,QAAM,iCAAkE,UAEtE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,sBAAsB;AAAA,MACxB;AAAA,MACA,OAAO,CAAC,aAAa;AAAA,IACvB;AAAA,IAKA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,YAAY,IAAI;AAAA,QACnB,CAAC,YAAY;AACX,eAAK,aAAa,eAAe,OAAO;AAAA,QAC1C;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SAAS;AAAA,QACpB;AAAA,MACF;AAEA,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU,QAAQ,KAAK,GAAG;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,UAAU,KAAK,GAAG;AAAA,MACnC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithIntersectionObserverProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n  $observer: IntersectionObserver;\n  intersected(entries: IntersectionObserverEntry[]): void;\n}\n\nexport interface WithIntersectionObserverInterface extends BaseInterface {\n  $observer: IntersectionObserver;\n}\n\n/**\n * Create an array of number between 0 and 1 from the given length.\n */\nfunction createArrayOfNumber(length: number): number[] {\n  return new Array(length + 1).fill(length).map((val, index) => index / length);\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withIntersectionObserver<S extends Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: createArrayOfNumber(100) },\n): BaseDecorator<WithIntersectionObserverInterface, S, WithIntersectionObserverProps> {\n  /**\n   * Class.\n   */\n  class WithIntersectionObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithIntersectionObserverProps\n  > {\n    /**\n     * Config\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithIntersectionObserver`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        intersectionObserver: Object,\n      },\n      emits: ['intersected'],\n    };\n\n    /**\n     * Intersection observer instance.\n     */\n    $observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$observer = new IntersectionObserver(\n        (entries) => {\n          this.__callMethod('intersected', entries);\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options.intersectionObserver as IntersectionObserverInit),\n        },\n      );\n\n      this.$on('mounted', () => {\n        this.$observer.observe(this.$el);\n      });\n\n      this.$on('destroyed', () => {\n        this.$observer.unobserve(this.$el);\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithIntersectionObserver;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA,SAAS,oBAAoB,QAA0B;AACrD,SAAO,IAAI,MAAM,SAAS,CAAC,EAAE,KAAK,MAAM,EAAE,IAAI,CAAC,KAAK,UAAU,QAAQ,MAAM;AAC9E;AAKO,SAAS,yBACd,WAEA,iBAA2C,EAAE,WAAW,oBAAoB,GAAG,EAAE,GACG;AAIpF,QAAM,iCAAkE,UAEtE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,sBAAsB;AAAA,MACxB;AAAA,MACA,OAAO,CAAC,aAAa;AAAA,IACvB;AAAA,IAKA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,YAAY,IAAI;AAAA,QACnB,CAAC,YAAY;AACX,eAAK,aAAa,eAAe,OAAO;AAAA,QAC1C;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SAAS;AAAA,QACpB;AAAA,MACF;AAEA,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU,QAAQ,KAAK,GAAG;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,UAAU,KAAK,GAAG;AAAA,MACnC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withIntersectionObserver.js

@@ -1,5 +1,5 @@
 function createArrayOfNumber(length) {
-  return [...new Array(length + 1)].map((val, index) => index / length);
+  return new Array(length + 1).fill(length).map((val, index) => index / length);
 }
 function withIntersectionObserver(BaseClass, defaultOptions = { threshold: createArrayOfNumber(100) }) {
   class WithIntersectionObserver extends BaseClass {

package/decorators/withIntersectionObserver.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withIntersectionObserver.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithIntersectionObserverProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n  $observer: IntersectionObserver;\n  intersected(entries: IntersectionObserverEntry[]): void;\n}\n\nexport interface WithIntersectionObserverInterface extends BaseInterface {\n  $observer: IntersectionObserver;\n}\n\n/**\n * Create an array of number between 0 and 1 from the given length.\n */\nfunction createArrayOfNumber(length: number): number[] {\n  return [...new Array(length + 1)].map((val, index) => index / length);\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withIntersectionObserver<S extends Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: createArrayOfNumber(100) },\n): BaseDecorator<WithIntersectionObserverInterface, S, WithIntersectionObserverProps> {\n  /**\n   * Class.\n   */\n  class WithIntersectionObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithIntersectionObserverProps\n  > {\n    /**\n     * Config\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithIntersectionObserver`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        intersectionObserver: Object,\n      },\n      emits: ['intersected'],\n    };\n\n    /**\n     * Intersection observer instance.\n     */\n    $observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$observer = new IntersectionObserver(\n        (entries) => {\n          this.__callMethod('intersected', entries);\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options.intersectionObserver as IntersectionObserverInit),\n        },\n      );\n\n      this.$on('mounted', () => {\n        this.$observer.observe(this.$el);\n      });\n\n      this.$on('destroyed', () => {\n        this.$observer.unobserve(this.$el);\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithIntersectionObserver;\n}\n"],
-  "mappings": "AAkBA,SAAS,oBAAoB,QAA0B;AACrD,SAAO,CAAC,GAAG,IAAI,MAAM,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,UAAU,QAAQ,MAAM;AACtE;AAKO,SAAS,yBACd,WAEA,iBAA2C,EAAE,WAAW,oBAAoB,GAAG,EAAE,GACG;AAIpF,QAAM,iCAAkE,UAEtE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,sBAAsB;AAAA,MACxB;AAAA,MACA,OAAO,CAAC,aAAa;AAAA,IACvB;AAAA,IAKA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,YAAY,IAAI;AAAA,QACnB,CAAC,YAAY;AACX,eAAK,aAAa,eAAe,OAAO;AAAA,QAC1C;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SAAS;AAAA,QACpB;AAAA,MACF;AAEA,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU,QAAQ,KAAK,GAAG;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,UAAU,KAAK,GAAG;AAAA,MACnC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithIntersectionObserverProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n  $observer: IntersectionObserver;\n  intersected(entries: IntersectionObserverEntry[]): void;\n}\n\nexport interface WithIntersectionObserverInterface extends BaseInterface {\n  $observer: IntersectionObserver;\n}\n\n/**\n * Create an array of number between 0 and 1 from the given length.\n */\nfunction createArrayOfNumber(length: number): number[] {\n  return new Array(length + 1).fill(length).map((val, index) => index / length);\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withIntersectionObserver<S extends Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: createArrayOfNumber(100) },\n): BaseDecorator<WithIntersectionObserverInterface, S, WithIntersectionObserverProps> {\n  /**\n   * Class.\n   */\n  class WithIntersectionObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithIntersectionObserverProps\n  > {\n    /**\n     * Config\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithIntersectionObserver`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        intersectionObserver: Object,\n      },\n      emits: ['intersected'],\n    };\n\n    /**\n     * Intersection observer instance.\n     */\n    $observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$observer = new IntersectionObserver(\n        (entries) => {\n          this.__callMethod('intersected', entries);\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options.intersectionObserver as IntersectionObserverInit),\n        },\n      );\n\n      this.$on('mounted', () => {\n        this.$observer.observe(this.$el);\n      });\n\n      this.$on('destroyed', () => {\n        this.$observer.unobserve(this.$el);\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithIntersectionObserver;\n}\n"],
+  "mappings": "AAkBA,SAAS,oBAAoB,QAA0B;AACrD,SAAO,IAAI,MAAM,SAAS,CAAC,EAAE,KAAK,MAAM,EAAE,IAAI,CAAC,KAAK,UAAU,QAAQ,MAAM;AAC9E;AAKO,SAAS,yBACd,WAEA,iBAA2C,EAAE,WAAW,oBAAoB,GAAG,EAAE,GACG;AAIpF,QAAM,iCAAkE,UAEtE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,sBAAsB;AAAA,MACxB;AAAA,MACA,OAAO,CAAC,aAAa;AAAA,IACvB;AAAA,IAKA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,YAAY,IAAI;AAAA,QACnB,CAAC,YAAY;AACX,eAAK,aAAa,eAAe,OAAO;AAAA,QAC1C;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SAAS;AAAA,QACpB;AAAA,MACF;AAEA,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU,QAAQ,KAAK,GAAG;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,UAAU,KAAK,GAAG;AAAA,MACnC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withMountOnMediaQuery.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withMountOnMediaQuery.ts"],
-  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { isDev } from '../utils/is.js';\n\nexport interface withMountOnMediaQueryProps extends BaseProps {\n  $options: {\n    media: string;\n  };\n}\n\nexport interface withMountOnMediaQueryInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __matches: boolean;\n  $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountOnMediaQuery<S extends Base = Base>(\n  BaseClass: typeof Base,\n  media,\n): BaseDecorator<withMountOnMediaQueryInterface, S, withMountOnMediaQueryProps> {\n  /**\n   * Class.\n   */\n  class WithMountOnMediaQuery<T extends BaseProps = BaseProps> extends BaseClass<\n    T & withMountOnMediaQueryProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}withMountOnMediaQuery`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        media: String,\n      },\n    };\n\n    /**\n     * Is the media query matches?\n     * @private\n     */\n    __matches = false;\n\n    /**\n     * Listen for media query changes when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      if (isDev && !this.$options.media && !media) {\n        this.$warn(\n          'Missing either \"$options.media\" or \"media\" argument in withMountOnMediaQuery decorator.',\n        );\n        return;\n      }\n\n      const mediaQueryList = window.matchMedia(this.$options.media || media);\n\n      // Set initial value\n      this.__matches = mediaQueryList.matches;\n\n      const changeHandler = (event: MediaQueryListEvent) => {\n        this.__matches = event.matches;\n\n        if (event.matches && !this.$isMounted) {\n          this.$mount();\n        } else if (this.$isMounted) {\n          setTimeout(() => this.$destroy());\n        }\n      };\n\n      // Start listening for changes\n      mediaQueryList.addEventListener('change', changeHandler);\n\n      this.$on('terminated', () => {\n        mediaQueryList.removeEventListener('change', changeHandler);\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    $mount() {\n      if (this.__matches) {\n        super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountOnMediaQuery;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gBAAsB;AAmBf,SAAS,sBACd,WACA,OAC8E;AAI9E,QAAM,8BAA+D,UAEnE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IAMA,YAAY;AAAA,IAOZ,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,mBAAS,CAAC,KAAK,SAAS,SAAS,CAAC,OAAO;AAC3C,aAAK;AAAA,UACH;AAAA,QACF;AACA;AAAA,MACF;AAEA,YAAM,iBAAiB,OAAO,WAAW,KAAK,SAAS,SAAS,KAAK;AAGrE,WAAK,YAAY,eAAe;AAEhC,YAAM,gBAAgB,CAAC,UAA+B;AACpD,aAAK,YAAY,MAAM;AAEvB,YAAI,MAAM,WAAW,CAAC,KAAK,YAAY;AACrC,eAAK,OAAO;AAAA,QACd,WAAW,KAAK,YAAY;AAC1B,qBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,QAClC;AAAA,MACF;AAGA,qBAAe,iBAAiB,UAAU,aAAa;AAEvD,WAAK,IAAI,cAAc,MAAM;AAC3B,uBAAe,oBAAoB,UAAU,aAAa;AAAA,MAC5D,CAAC;AAAA,IACH;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,WAAW;AAClB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { isDev } from '../utils/is.js';\n\nexport interface withMountOnMediaQueryProps extends BaseProps {\n  $options: {\n    media: string;\n  };\n}\n\nexport interface withMountOnMediaQueryInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __matches: boolean;\n  $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountOnMediaQuery<S extends Base = Base>(\n  BaseClass: typeof Base,\n  media,\n): BaseDecorator<withMountOnMediaQueryInterface, S, withMountOnMediaQueryProps> {\n  /**\n   * Class.\n   */\n  class WithMountOnMediaQuery<T extends BaseProps = BaseProps> extends BaseClass<\n    T & withMountOnMediaQueryProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}withMountOnMediaQuery`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        media: String,\n      },\n    };\n\n    /**\n     * Is the media query matches?\n     *\n     * @private\n     */\n    __matches = false;\n\n    /**\n     * Listen for media query changes when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      if (isDev && !this.$options.media && !media) {\n        this.$warn(\n          'Missing either \"$options.media\" or \"media\" argument in withMountOnMediaQuery decorator.',\n        );\n        return;\n      }\n\n      const mediaQueryList = window.matchMedia(this.$options.media || media);\n\n      // Set initial value\n      this.__matches = mediaQueryList.matches;\n\n      const changeHandler = (event: MediaQueryListEvent) => {\n        this.__matches = event.matches;\n\n        if (event.matches && !this.$isMounted) {\n          this.$mount();\n        } else if (this.$isMounted) {\n          setTimeout(() => this.$destroy());\n        }\n      };\n\n      // Start listening for changes\n      mediaQueryList.addEventListener('change', changeHandler);\n\n      this.$on('terminated', () => {\n        mediaQueryList.removeEventListener('change', changeHandler);\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    $mount() {\n      if (this.__matches) {\n        super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountOnMediaQuery;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gBAAsB;AAmBf,SAAS,sBACd,WACA,OAC8E;AAI9E,QAAM,8BAA+D,UAEnE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IAOA,YAAY;AAAA,IAOZ,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,mBAAS,CAAC,KAAK,SAAS,SAAS,CAAC,OAAO;AAC3C,aAAK;AAAA,UACH;AAAA,QACF;AACA;AAAA,MACF;AAEA,YAAM,iBAAiB,OAAO,WAAW,KAAK,SAAS,SAAS,KAAK;AAGrE,WAAK,YAAY,eAAe;AAEhC,YAAM,gBAAgB,CAAC,UAA+B;AACpD,aAAK,YAAY,MAAM;AAEvB,YAAI,MAAM,WAAW,CAAC,KAAK,YAAY;AACrC,eAAK,OAAO;AAAA,QACd,WAAW,KAAK,YAAY;AAC1B,qBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,QAClC;AAAA,MACF;AAGA,qBAAe,iBAAiB,UAAU,aAAa;AAEvD,WAAK,IAAI,cAAc,MAAM;AAC3B,uBAAe,oBAAoB,UAAU,aAAa;AAAA,MAC5D,CAAC;AAAA,IACH;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,WAAW;AAClB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withMountOnMediaQuery.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withMountOnMediaQuery.ts"],
-  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { isDev } from '../utils/is.js';\n\nexport interface withMountOnMediaQueryProps extends BaseProps {\n  $options: {\n    media: string;\n  };\n}\n\nexport interface withMountOnMediaQueryInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __matches: boolean;\n  $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountOnMediaQuery<S extends Base = Base>(\n  BaseClass: typeof Base,\n  media,\n): BaseDecorator<withMountOnMediaQueryInterface, S, withMountOnMediaQueryProps> {\n  /**\n   * Class.\n   */\n  class WithMountOnMediaQuery<T extends BaseProps = BaseProps> extends BaseClass<\n    T & withMountOnMediaQueryProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}withMountOnMediaQuery`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        media: String,\n      },\n    };\n\n    /**\n     * Is the media query matches?\n     * @private\n     */\n    __matches = false;\n\n    /**\n     * Listen for media query changes when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      if (isDev && !this.$options.media && !media) {\n        this.$warn(\n          'Missing either \"$options.media\" or \"media\" argument in withMountOnMediaQuery decorator.',\n        );\n        return;\n      }\n\n      const mediaQueryList = window.matchMedia(this.$options.media || media);\n\n      // Set initial value\n      this.__matches = mediaQueryList.matches;\n\n      const changeHandler = (event: MediaQueryListEvent) => {\n        this.__matches = event.matches;\n\n        if (event.matches && !this.$isMounted) {\n          this.$mount();\n        } else if (this.$isMounted) {\n          setTimeout(() => this.$destroy());\n        }\n      };\n\n      // Start listening for changes\n      mediaQueryList.addEventListener('change', changeHandler);\n\n      this.$on('terminated', () => {\n        mediaQueryList.removeEventListener('change', changeHandler);\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    $mount() {\n      if (this.__matches) {\n        super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountOnMediaQuery;\n}\n"],
-  "mappings": "AAEA,SAAS,aAAa;AAmBf,SAAS,sBACd,WACA,OAC8E;AAI9E,QAAM,8BAA+D,UAEnE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IAMA,YAAY;AAAA,IAOZ,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,SAAS,CAAC,KAAK,SAAS,SAAS,CAAC,OAAO;AAC3C,aAAK;AAAA,UACH;AAAA,QACF;AACA;AAAA,MACF;AAEA,YAAM,iBAAiB,OAAO,WAAW,KAAK,SAAS,SAAS,KAAK;AAGrE,WAAK,YAAY,eAAe;AAEhC,YAAM,gBAAgB,CAAC,UAA+B;AACpD,aAAK,YAAY,MAAM;AAEvB,YAAI,MAAM,WAAW,CAAC,KAAK,YAAY;AACrC,eAAK,OAAO;AAAA,QACd,WAAW,KAAK,YAAY;AAC1B,qBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,QAClC;AAAA,MACF;AAGA,qBAAe,iBAAiB,UAAU,aAAa;AAEvD,WAAK,IAAI,cAAc,MAAM;AAC3B,uBAAe,oBAAoB,UAAU,aAAa;AAAA,MAC5D,CAAC;AAAA,IACH;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,WAAW;AAClB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { isDev } from '../utils/is.js';\n\nexport interface withMountOnMediaQueryProps extends BaseProps {\n  $options: {\n    media: string;\n  };\n}\n\nexport interface withMountOnMediaQueryInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __matches: boolean;\n  $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountOnMediaQuery<S extends Base = Base>(\n  BaseClass: typeof Base,\n  media,\n): BaseDecorator<withMountOnMediaQueryInterface, S, withMountOnMediaQueryProps> {\n  /**\n   * Class.\n   */\n  class WithMountOnMediaQuery<T extends BaseProps = BaseProps> extends BaseClass<\n    T & withMountOnMediaQueryProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}withMountOnMediaQuery`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        media: String,\n      },\n    };\n\n    /**\n     * Is the media query matches?\n     *\n     * @private\n     */\n    __matches = false;\n\n    /**\n     * Listen for media query changes when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      if (isDev && !this.$options.media && !media) {\n        this.$warn(\n          'Missing either \"$options.media\" or \"media\" argument in withMountOnMediaQuery decorator.',\n        );\n        return;\n      }\n\n      const mediaQueryList = window.matchMedia(this.$options.media || media);\n\n      // Set initial value\n      this.__matches = mediaQueryList.matches;\n\n      const changeHandler = (event: MediaQueryListEvent) => {\n        this.__matches = event.matches;\n\n        if (event.matches && !this.$isMounted) {\n          this.$mount();\n        } else if (this.$isMounted) {\n          setTimeout(() => this.$destroy());\n        }\n      };\n\n      // Start listening for changes\n      mediaQueryList.addEventListener('change', changeHandler);\n\n      this.$on('terminated', () => {\n        mediaQueryList.removeEventListener('change', changeHandler);\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    $mount() {\n      if (this.__matches) {\n        super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountOnMediaQuery;\n}\n"],
+  "mappings": "AAEA,SAAS,aAAa;AAmBf,SAAS,sBACd,WACA,OAC8E;AAI9E,QAAM,8BAA+D,UAEnE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IAOA,YAAY;AAAA,IAOZ,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,SAAS,CAAC,KAAK,SAAS,SAAS,CAAC,OAAO;AAC3C,aAAK;AAAA,UACH;AAAA,QACF;AACA;AAAA,MACF;AAEA,YAAM,iBAAiB,OAAO,WAAW,KAAK,SAAS,SAAS,KAAK;AAGrE,WAAK,YAAY,eAAe;AAEhC,YAAM,gBAAgB,CAAC,UAA+B;AACpD,aAAK,YAAY,MAAM;AAEvB,YAAI,MAAM,WAAW,CAAC,KAAK,YAAY;AACrC,eAAK,OAAO;AAAA,QACd,WAAW,KAAK,YAAY;AAC1B,qBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,QAClC;AAAA,MACF;AAGA,qBAAe,iBAAiB,UAAU,aAAa;AAEvD,WAAK,IAAI,cAAc,MAAM;AAC3B,uBAAe,oBAAoB,UAAU,aAAa;AAAA,MAC5D,CAAC;AAAA,IACH;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,WAAW;AAClB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }