@studiometa/js-toolkit 3.9.0-beta.0 → 3.9.0-beta.2

package/dist/Base/managers/OptionsManager.d.ts

@@ -0,0 +1,80 @@
+import type { Base } from '../Base.js';
+import type { Options as DeepmergeOptions } from 'deepmerge';
+import { AbstractManager } from './AbstractManager.js';
+export type OptionType = StringConstructor | NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor;
+type ArrayOption = {
+    type: ArrayConstructor;
+    default?: (instance: Base) => unknown[];
+    merge?: boolean | DeepmergeOptions;
+};
+type ObjectOption = {
+    type: ObjectConstructor;
+    default?: (instance: Base) => unknown;
+    merge?: boolean | DeepmergeOptions;
+};
+type StringOption = {
+    type: StringConstructor;
+    default?: string | ((instance: Base) => string);
+};
+type NumberOption = {
+    type: NumberConstructor;
+    default?: number | ((instance: Base) => number);
+};
+type BooleanOption = {
+    type: BooleanConstructor;
+    default?: boolean | ((instance: Base) => boolean);
+};
+export type OptionObject = ArrayOption | ObjectOption | StringOption | NumberOption | BooleanOption;
+export type OptionsSchema = {
+    [name: string]: OptionType | OptionObject;
+};
+export type OptionsInterface = {
+    [optionName: string]: unknown;
+};
+/**
+ * Get a property name.
+ */
+export declare const __getPropertyName: (name: string, prefix?: unknown, optionAttribute?: unknown) => string;
+/**
+ * Class options to manage options as data attributes on an HTML element.
+ *
+ * @todo Use `MutationObserver` to update values? Might be more performant.
+ */
+export declare class OptionsManager<T> extends AbstractManager<T & {
+    name: string;
+    debug: boolean;
+    log: boolean;
+}> {
+    /**
+     * An object to store Array and Object values for reference.
+     *
+     * @private
+     */
+    __values: {};
+    /**
+     * Default props.
+     */
+    __props: T & {
+        name: string;
+        debug: boolean;
+        log: boolean;
+    };
+    /**
+     * Class constructor.
+     */
+    constructor(base: Base);
+    /**
+     * Get an option value.
+     */
+    get(name: string, config: OptionObject): any;
+    /**
+     * Set an option value.
+     */
+    set(name: string, value: unknown, config: OptionObject): void;
+    /**
+     * Register an option.
+     * @private
+     */
+    __register(name: string, config: OptionObject): void;
+}
+export {};

package/dist/Base/managers/OptionsManager.js

@@ -0,0 +1,163 @@
+import deepmerge from "deepmerge";
+import { isArray, isBoolean, isDefined, isDev, isFunction, isObject } from "../../utils/is.js";
+import { memo } from "../../utils/memo.js";
+import { AbstractManager } from "./AbstractManager.js";
+import { features } from "../features.js";
+const types = /* @__PURE__ */ new Set([String, Number, Boolean, Array, Object]);
+const __defaultValues = {
+  String: "",
+  Number: 0,
+  Boolean: false,
+  Array: () => [],
+  Object: () => ({})
+};
+const UPPERCASE_REGEX = /([A-Z])/g;
+const __getPropertyName = memo(function __getPropertyName2(name, prefix = "", optionAttribute = features.get("attributes").option) {
+  return `${optionAttribute}${prefix ? `-${prefix}` : ""}-${name.replaceAll(UPPERCASE_REGEX, "-$1")}`;
+});
+class OptionsManager extends AbstractManager {
+  /**
+   * An object to store Array and Object values for reference.
+   *
+   * @private
+   */
+  __values = {};
+  /**
+   * Default props.
+   */
+  __props = {
+    name: "Base",
+    debug: false,
+    log: false
+  };
+  /**
+   * Class constructor.
+   */
+  constructor(base) {
+    super(base);
+    const schema = this.__config.options || {};
+    this.props.name = this.__config.name;
+    schema.debug = {
+      type: Boolean,
+      default: this.__config.debug ?? false
+    };
+    schema.log = {
+      type: Boolean,
+      default: this.__config.log ?? false
+    };
+    for (const [name, config] of Object.entries(schema)) {
+      this.__register(
+        name,
+        types.has(config) ? { type: config } : config
+      );
+    }
+  }
+  /**
+   * Get an option value.
+   */
+  get(name, config) {
+    const { type } = config;
+    const defaultValue = isFunction(config.default) ? config.default(this.__base) : config.default;
+    const attributes = features.get("attributes");
+    const propertyName = __getPropertyName(name, "", attributes.option);
+    const hasProperty = this.__element.hasAttribute(propertyName);
+    if (type === Boolean) {
+      if (defaultValue) {
+        const negatedPropertyName = __getPropertyName(name, "no", attributes.option);
+        const hasNegatedProperty = this.__element.hasAttribute(negatedPropertyName);
+        return !hasNegatedProperty;
+      }
+      return hasProperty || defaultValue;
+    }
+    const value = this.__element.getAttribute(propertyName);
+    if (type === Number) {
+      return hasProperty ? Number(value) : defaultValue;
+    }
+    if (type === Array || type === Object) {
+      config = type === Array ? config : config;
+      if (!this.__values[name]) {
+        let val = hasProperty ? JSON.parse(value) : defaultValue;
+        if (isDefined(config.merge)) {
+          val = isBoolean(config.merge) ? deepmerge(defaultValue, val) : deepmerge(defaultValue, val, config.merge);
+        }
+        this.__values[name] = val;
+      }
+      return this.__values[name];
+    }
+    return hasProperty ? value : defaultValue;
+  }
+  /**
+   * Set an option value.
+   */
+  set(name, value, config) {
+    const { type, default: defaultValue } = config;
+    const attributes = features.get("attributes");
+    const propertyName = __getPropertyName(name, "", attributes.option);
+    if (value.constructor.name !== type.name) {
+      if (isDev) {
+        const val = isArray(value) || isObject(value) ? JSON.stringify(value) : value;
+        throw new TypeError(
+          `The "${val}" value for the "${name}" option must be of type "${type.name}"`
+        );
+      }
+      return;
+    }
+    switch (type) {
+      case Boolean:
+        if (defaultValue) {
+          const negatedPropertyName = __getPropertyName(name, "no", attributes.option);
+          if (value) {
+            this.__element.removeAttribute(negatedPropertyName);
+          } else {
+            this.__element.setAttribute(negatedPropertyName, "");
+          }
+        } else if (value) {
+          this.__element.setAttribute(propertyName, "");
+        } else {
+          this.__element.removeAttribute(propertyName);
+        }
+        break;
+      case Array:
+      case Object:
+        this.__values[name] = value;
+        break;
+      default:
+        this.__element.setAttribute(propertyName, value);
+    }
+  }
+  /**
+   * Register an option.
+   * @private
+   */
+  __register(name, config) {
+    if (!types.has(config.type)) {
+      if (isDev) {
+        throw new Error(
+          `The "${name}" option has an invalid type. The allowed types are: String, Number, Boolean, Array and Object.`
+        );
+      }
+      return;
+    }
+    config.default = config.default ?? __defaultValues[config.type.name];
+    if ((config.type === Array || config.type === Object) && !isFunction(config.default)) {
+      if (isDev) {
+        throw new Error(
+          `The default value for options of type "${config.type.name}" must be returned by a function.`
+        );
+      }
+      return;
+    }
+    Object.defineProperty(this.props, name, {
+      get: () => this.get(name, config),
+      set: (value) => {
+        this.set(name, value, config);
+      },
+      enumerable: true
+    });
+  }
+}
+export {
+  OptionsManager,
+  __getPropertyName
+};
+//# sourceMappingURL=OptionsManager.js.map

package/dist/Base/managers/OptionsManager.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../packages/js-toolkit/Base/managers/OptionsManager.ts"],
+  "sourcesContent": ["import deepmerge from 'deepmerge';\nimport { isArray, isBoolean, isDefined, isDev, isFunction, isObject } from '../../utils/is.js';\nimport { memo } from '../../utils/memo.js';\nimport type { Base } from '../Base.js';\nimport type { Options as DeepmergeOptions } from 'deepmerge';\nimport { AbstractManager } from './AbstractManager.js';\nimport { features } from '../features.js';\n\nexport type OptionType =\n  | StringConstructor\n  | NumberConstructor\n  | BooleanConstructor\n  | ArrayConstructor\n  | ObjectConstructor;\n\ntype ArrayOption = {\n  type: ArrayConstructor;\n  default?: (instance: Base) => unknown[];\n  merge?: boolean | DeepmergeOptions;\n};\n\ntype ObjectOption = {\n  type: ObjectConstructor;\n  default?: (instance: Base) => unknown;\n  merge?: boolean | DeepmergeOptions;\n};\n\ntype StringOption = {\n  type: StringConstructor;\n  default?: string | ((instance: Base) => string);\n};\n\ntype NumberOption = {\n  type: NumberConstructor;\n  default?: number | ((instance: Base) => number);\n};\n\ntype BooleanOption = {\n  type: BooleanConstructor;\n  default?: boolean | ((instance: Base) => boolean);\n};\n\nexport type OptionObject = ArrayOption | ObjectOption | StringOption | NumberOption | BooleanOption;\nexport type OptionsSchema = { [name: string]: OptionType | OptionObject };\nexport type OptionsInterface = { [optionName: string]: unknown };\n\n/**\n * List of allowed types.\n */\nconst types: Set<OptionType> = new Set([String, Number, Boolean, Array, Object]);\n\n/**\n * The default values to return for each available type.\n */\nconst __defaultValues = {\n  String: '',\n  Number: 0,\n  Boolean: false,\n  Array: () => [],\n  Object: () => ({}),\n};\n\nconst UPPERCASE_REGEX = /([A-Z])/g;\n\n/**\n * Get a property name.\n */\nexport const __getPropertyName = memo(function __getPropertyName(\n  name: string,\n  prefix = '',\n  optionAttribute = features.get('attributes').option,\n) {\n  return `${optionAttribute}${prefix ? `-${prefix}` : ''}-${name.replaceAll(UPPERCASE_REGEX, '-$1')}`;\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<T> extends AbstractManager<\n  T & { name: string; debug: boolean; log: boolean }\n> {\n  /**\n   * An object to store Array and Object values for reference.\n   *\n   * @private\n   */\n  __values = {};\n\n  /**\n   * Default props.\n   */\n  __props = {\n    name: 'Base',\n    debug: false,\n    log: false,\n  } as T & { name: string; debug: boolean; log: boolean };\n\n  /**\n   * Class constructor.\n   */\n  constructor(base: Base) {\n    super(base);\n    const schema: OptionsSchema = this.__config.options || {};\n    this.props.name = this.__config.name;\n\n    schema.debug = {\n      type: Boolean,\n      default: this.__config.debug ?? false,\n    };\n\n    schema.log = {\n      type: Boolean,\n      default: this.__config.log ?? false,\n    };\n\n    for (const [name, config] of Object.entries(schema)) {\n      this.__register(\n        name,\n        types.has(config as OptionType)\n          ? ({ type: config as OptionType } as OptionObject)\n          : (config as OptionObject),\n      );\n    }\n  }\n\n  /**\n   * Get an option value.\n   */\n  get(name: string, config: OptionObject) {\n    const { type } = config;\n    const defaultValue = isFunction(config.default) ? config.default(this.__base) : config.default;\n    const attributes = features.get('attributes');\n    const propertyName = __getPropertyName(name, '', attributes.option);\n    const hasProperty = this.__element.hasAttribute(propertyName);\n\n    if (type === Boolean) {\n      if (defaultValue) {\n        const negatedPropertyName = __getPropertyName(name, 'no', attributes.option);\n        const hasNegatedProperty = this.__element.hasAttribute(negatedPropertyName);\n\n        return !hasNegatedProperty;\n      }\n\n      return hasProperty || defaultValue;\n    }\n\n    const value = this.__element.getAttribute(propertyName);\n\n    if (type === Number) {\n      return hasProperty ? Number(value) : defaultValue;\n    }\n\n    if (type === Array || type === Object) {\n      // eslint-disable-next-line no-param-reassign\n      config = type === Array ? (config as ArrayOption) : (config as ObjectOption);\n\n      if (!this.__values[name]) {\n        let val = hasProperty ? JSON.parse(value) : defaultValue;\n\n        if (isDefined(config.merge)) {\n          val = isBoolean(config.merge)\n            ? deepmerge(defaultValue, val)\n            : deepmerge(defaultValue, val, config.merge);\n        }\n\n        this.__values[name] = val;\n      }\n\n      return this.__values[name];\n    }\n\n    return hasProperty ? value : defaultValue;\n  }\n\n  /**\n   * Set an option value.\n   */\n  set(name: string, value: unknown, config: OptionObject) {\n    const { type, default: defaultValue } = config;\n    const attributes = features.get('attributes');\n    const propertyName = __getPropertyName(name, '', attributes.option);\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      /* v8 ignore next 2 */\n      return;\n    }\n\n    switch (type) {\n      case Boolean:\n        if (defaultValue) {\n          const negatedPropertyName = __getPropertyName(name, 'no', attributes.option);\n\n          if (value) {\n            this.__element.removeAttribute(negatedPropertyName);\n          } else {\n            this.__element.setAttribute(negatedPropertyName, '');\n          }\n        } else if (value) {\n          this.__element.setAttribute(propertyName, '');\n        } else {\n          this.__element.removeAttribute(propertyName);\n        }\n        break;\n      case Array:\n      case Object:\n        this.__values[name] = value;\n        break;\n      default:\n        this.__element.setAttribute(propertyName, value as string);\n    }\n  }\n\n  /**\n   * Register an option.\n   * @private\n   */\n  __register(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      /* v8 ignore next 2 */\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      /* v8 ignore next 2 */\n      return;\n    }\n\n    Object.defineProperty(this.props, name, {\n      get: () => this.get(name, config),\n      set: (value) => {\n        this.set(name, value, config);\n      },\n      enumerable: true,\n    });\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["__getPropertyName"]
+}

package/dist/Base/managers/RefsManager.js

@@ -0,0 +1,101 @@
+import { getAncestorWhereUntil } from "../../utils/dom/ancestors.js";
+import { isArray, isDev } from "../../utils/is.js";
+import { memo } from "../../utils/memo.js";
+import { camelCase } from "../../utils/string/changeCase.js";
+import { endsWith } from "../../utils/string/endsWith.js";
+import { startsWith } from "../../utils/string/startsWith.js";
+import { AbstractManager } from "./AbstractManager.js";
+import { features } from "../features.js";
+const NORMALIZE_REF_NAME_REGEX = /\[\]$/;
+const NAMESPACED_REF_REGEX = /^(.*\.)/;
+const normalizeRefName = memo(function normalizeRefName2(name) {
+  let normalizedName = name;
+  if (endsWith(name, "[]")) {
+    normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, "");
+  }
+  if (normalizedName.includes(".")) {
+    return normalizedName.replace(NAMESPACED_REF_REGEX, "");
+  }
+  return normalizedName;
+});
+function refBelongToInstance(ref, rootElement, name) {
+  const attributes = features.get("attributes");
+  const isPrefixed = startsWith(ref.getAttribute(attributes.ref), name);
+  const firstComponentAncestor = getAncestorWhereUntil(
+    ref,
+    (el) => el && (isPrefixed ? el.getAttribute(attributes.component) === name && el : el.getAttribute(attributes.component)) && el !== rootElement,
+    (el) => el === rootElement
+  );
+  return firstComponentAncestor === rootElement;
+}
+class RefsManager extends AbstractManager {
+  /**
+   * Get refs configuration.
+   * @private
+   */
+  get __refs() {
+    return this.__config.refs ?? [];
+  }
+  /**
+   * Register all refs.
+   */
+  registerAll() {
+    for (const refName of this.__refs) {
+      this.__register(refName);
+    }
+  }
+  /**
+   * Unregister all refs.
+   */
+  unregisterAll() {
+    for (const refName of this.__refs) {
+      this.__unregister(refName);
+    }
+  }
+  /**
+   * Register one ref.
+   * @private
+   */
+  __register(refName) {
+    const isMultiple = endsWith(refName, "[]");
+    const propName = normalizeRefName(refName);
+    const { name } = this.__base.__config;
+    const attributes = features.get("attributes");
+    const refs = [];
+    const selector = `[${attributes.ref}="${refName}"],[${attributes.ref}="${name}.${refName}"]`;
+    for (const ref of this.__element.querySelectorAll(selector)) {
+      if (refBelongToInstance(ref, this.__element, name)) {
+        refs.push(ref);
+      }
+    }
+    if (isDev && !isMultiple && refs.length > 1) {
+      console.warn(
+        `[${this.__base.$id}]`,
+        `The "${refName}" ref has been found multiple times.`,
+        "Did you forgot to add the `[]` suffix to its name?"
+      );
+    }
+    if (refs.length) {
+      this.__eventsManager.bindRef(refName, refs);
+    }
+    Object.defineProperty(this.props, camelCase(propName), {
+      // @todo remove usage of non-multiple refs as array
+      value: isMultiple || refs.length > 1 ? refs : refs[0],
+      enumerable: true,
+      configurable: true
+    });
+  }
+  /**
+   * Unregister one ref.
+   */
+  __unregister(refName) {
+    const propName = normalizeRefName(refName);
+    const refs = this.props[propName];
+    this.__eventsManager.unbindRef(refName, isArray(refs) ? refs : [refs]);
+  }
+}
+export {
+  RefsManager,
+  normalizeRefName
+};
+//# sourceMappingURL=RefsManager.js.map

package/dist/Base/managers/RefsManager.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../packages/js-toolkit/Base/managers/RefsManager.ts"],
+  "sourcesContent": ["import { getAncestorWhereUntil } from '../../utils/dom/ancestors.js';\nimport { isArray, isDev } from '../../utils/is.js';\nimport { memo } from '../../utils/memo.js';\nimport { camelCase } from '../../utils/string/changeCase.js';\nimport { endsWith } from '../../utils/string/endsWith.js';\nimport { startsWith } from '../../utils/string/startsWith.js';\nimport { AbstractManager } from './AbstractManager.js';\nimport { features } from '../features.js';\n\nconst NORMALIZE_REF_NAME_REGEX = /\\[\\]$/;\nconst NAMESPACED_REF_REGEX = /^(.*\\.)/;\n\n/**\n * Normalize the name of ref.\n */\nexport const normalizeRefName = memo(function normalizeRefName(name: string) {\n  let normalizedName = name;\n\n  if (endsWith(name, '[]')) {\n    normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, '');\n  }\n\n  if (normalizedName.includes('.')) {\n    return normalizedName.replace(NAMESPACED_REF_REGEX, '');\n  }\n\n  return normalizedName;\n});\n\n/**\n * Filter refs belonging to the related Base instance.\n */\nfunction refBelongToInstance(ref: HTMLElement, rootElement: HTMLElement, name: string) {\n  const attributes = features.get('attributes');\n  const isPrefixed = startsWith(ref.getAttribute(attributes.ref), name);\n  const firstComponentAncestor = getAncestorWhereUntil(\n    ref,\n    (el) =>\n      el &&\n      (isPrefixed\n        ? el.getAttribute(attributes.component) === name && el\n        : el.getAttribute(attributes.component)) &&\n      el !== rootElement,\n    (el) => el === rootElement,\n  );\n\n  return firstComponentAncestor === rootElement;\n}\n\n/**\n * Refs Manager\n *\n * @todo Use `MutationObserver` to automatically update refs?\n */\nexport class RefsManager<T> extends AbstractManager<T> {\n  /**\n   * Get refs configuration.\n   * @private\n   */\n  get __refs() {\n    return this.__config.refs ?? [];\n  }\n\n  /**\n   * Register all refs.\n   */\n  registerAll() {\n    for (const refName of this.__refs) {\n      this.__register(refName);\n    }\n  }\n\n  /**\n   * Unregister all refs.\n   */\n  unregisterAll() {\n    for (const refName of this.__refs) {\n      this.__unregister(refName);\n    }\n  }\n\n  /**\n   * Register one ref.\n   * @private\n   */\n  __register(refName: string) {\n    const isMultiple = endsWith(refName, '[]');\n    const propName = normalizeRefName(refName);\n    const { name } = this.__base.__config;\n    const attributes = features.get('attributes');\n    const refs = [] as HTMLElement[];\n    const selector = `[${attributes.ref}=\"${refName}\"],[${attributes.ref}=\"${name}.${refName}\"]`;\n\n    for (const ref of this.__element.querySelectorAll<HTMLElement>(selector)) {\n      if (refBelongToInstance(ref, this.__element, name)) {\n        refs.push(ref);\n      }\n    }\n\n    /* v8 ignore next 7 */\n    if (isDev && !isMultiple && refs.length > 1) {\n      console.warn(\n        `[${this.__base.$id}]`,\n        `The \"${refName}\" ref has been found multiple times.`,\n        'Did you forgot to add the `[]` suffix to its name?',\n      );\n    }\n\n    if (refs.length) {\n      this.__eventsManager.bindRef(refName, refs);\n    }\n\n    Object.defineProperty(this.props, camelCase(propName), {\n      // @todo remove usage of non-multiple refs as array\n      value: isMultiple || refs.length > 1 ? refs : refs[0],\n      enumerable: true,\n      configurable: true,\n    });\n  }\n\n  /**\n   * Unregister one ref.\n   */\n  __unregister(refName: string) {\n    const propName = normalizeRefName(refName);\n    const refs = this.props[propName];\n    this.__eventsManager.unbindRef(refName, isArray(refs) ? refs : [refs]);\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,6BAA6B;AACtC,SAAS,SAAS,aAAa;AAC/B,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAEzB,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAKtB,MAAM,mBAAmB,KAAK,SAASA,kBAAiB,MAAc;AAC3E,MAAI,iBAAiB;AAErB,MAAI,SAAS,MAAM,IAAI,GAAG;AACxB,qBAAiB,eAAe,QAAQ,0BAA0B,EAAE;AAAA,EACtE;AAEA,MAAI,eAAe,SAAS,GAAG,GAAG;AAChC,WAAO,eAAe,QAAQ,sBAAsB,EAAE;AAAA,EACxD;AAEA,SAAO;AACT,CAAC;AAKD,SAAS,oBAAoB,KAAkB,aAA0B,MAAc;AACrF,QAAM,aAAa,SAAS,IAAI,YAAY;AAC5C,QAAM,aAAa,WAAW,IAAI,aAAa,WAAW,GAAG,GAAG,IAAI;AACpE,QAAM,yBAAyB;AAAA,IAC7B;AAAA,IACA,CAAC,OACC,OACC,aACG,GAAG,aAAa,WAAW,SAAS,MAAM,QAAQ,KAClD,GAAG,aAAa,WAAW,SAAS,MACxC,OAAO;AAAA,IACT,CAAC,OAAO,OAAO;AAAA,EACjB;AAEA,SAAO,2BAA2B;AACpC;AAOO,MAAM,oBAAuB,gBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrD,IAAI,SAAS;AACX,WAAO,KAAK,SAAS,QAAQ,CAAC;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,eAAW,WAAW,KAAK,QAAQ;AACjC,WAAK,WAAW,OAAO;AAAA,IACzB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB;AACd,eAAW,WAAW,KAAK,QAAQ;AACjC,WAAK,aAAa,OAAO;AAAA,IAC3B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,SAAiB;AAC1B,UAAM,aAAa,SAAS,SAAS,IAAI;AACzC,UAAM,WAAW,iBAAiB,OAAO;AACzC,UAAM,EAAE,KAAK,IAAI,KAAK,OAAO;AAC7B,UAAM,aAAa,SAAS,IAAI,YAAY;AAC5C,UAAM,OAAO,CAAC;AACd,UAAM,WAAW,IAAI,WAAW,GAAG,KAAK,OAAO,OAAO,WAAW,GAAG,KAAK,IAAI,IAAI,OAAO;AAExF,eAAW,OAAO,KAAK,UAAU,iBAA8B,QAAQ,GAAG;AACxE,UAAI,oBAAoB,KAAK,KAAK,WAAW,IAAI,GAAG;AAClD,aAAK,KAAK,GAAG;AAAA,MACf;AAAA,IACF;AAGA,QAAI,SAAS,CAAC,cAAc,KAAK,SAAS,GAAG;AAC3C,cAAQ;AAAA,QACN,IAAI,KAAK,OAAO,GAAG;AAAA,QACnB,QAAQ,OAAO;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAEA,QAAI,KAAK,QAAQ;AACf,WAAK,gBAAgB,QAAQ,SAAS,IAAI;AAAA,IAC5C;AAEA,WAAO,eAAe,KAAK,OAAO,UAAU,QAAQ,GAAG;AAAA;AAAA,MAErD,OAAO,cAAc,KAAK,SAAS,IAAI,OAAO,KAAK,CAAC;AAAA,MACpD,YAAY;AAAA,MACZ,cAAc;AAAA,IAChB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,aAAa,SAAiB;AAC5B,UAAM,WAAW,iBAAiB,OAAO;AACzC,UAAM,OAAO,KAAK,MAAM,QAAQ;AAChC,SAAK,gBAAgB,UAAU,SAAS,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;AAAA,EACvE;AACF;",
+  "names": ["normalizeRefName"]
+}

package/dist/Base/managers/ResponsiveOptionsManager.d.ts

@@ -0,0 +1,33 @@
+import { type OptionObject, OptionsManager } from './OptionsManager.js';
+export type ResponsiveOptionObject = OptionObject & {
+    responsive?: boolean;
+};
+/**
+ * Class options to manage options as data attributes on an HTML element.
+ */
+export declare class ResponsiveOptionsManager<T> extends OptionsManager<T> {
+    /**
+     * Get an option value.
+     *
+     * @param  {string} name The option name.
+     * @param  {ResponsiveOptionObject} config The option configuration.
+     * @return {any}
+     */
+    get(name: string, config: ResponsiveOptionObject): any;
+    /**
+     * Set an option value.
+     *
+     * @param {string} name The option name.
+     * @param {any} value The new value.
+     * @param {ResponsiveOptionObject} config The option configuration.
+     */
+    set(name: string, value: unknown, config: ResponsiveOptionObject): void;
+    /**
+     * Get the currently active responsive name of an option.
+     *
+     * @param  {ResponsiveOptionsManager} that
+     * @param  {string} name The default name of the option.
+     * @return {string}      The responsive name if one matches the current breakpoint, the default name otherwise.
+     */
+    __getResponsiveName(name: string): string;
+}

package/dist/Base/managers/ResponsiveOptionsManager.js

@@ -0,0 +1,67 @@
+import { useResize } from "../../services/ResizeService.js";
+import { isDev } from "../../utils/is.js";
+import { __getPropertyName, OptionsManager } from "./OptionsManager.js";
+import { features } from "../features.js";
+class ResponsiveOptionsManager extends OptionsManager {
+  /**
+   * Get an option value.
+   *
+   * @param  {string} name The option name.
+   * @param  {ResponsiveOptionObject} config The option configuration.
+   * @return {any}
+   */
+  get(name, config) {
+    if (!config.responsive) {
+      return super.get(name, config);
+    }
+    return super.get(this.__getResponsiveName(name), config);
+  }
+  /**
+   * Set an option value.
+   *
+   * @param {string} name The option name.
+   * @param {any} value The new value.
+   * @param {ResponsiveOptionObject} config The option configuration.
+   */
+  set(name, value, config) {
+    if (!config.responsive) {
+      super.set(name, value, config);
+      return;
+    }
+    if (isDev) {
+      console.warn(`[${this.__base.$id}]`, "Responsive options are read-only.");
+    }
+  }
+  /**
+   * Get the currently active responsive name of an option.
+   *
+   * @param  {ResponsiveOptionsManager} that
+   * @param  {string} name The default name of the option.
+   * @return {string}      The responsive name if one matches the current breakpoint, the default name otherwise.
+   */
+  __getResponsiveName(name) {
+    const { breakpoint } = useResize().props();
+    if (!breakpoint) {
+      return name;
+    }
+    let responsiveName = name;
+    const propertyName = __getPropertyName(name).toLowerCase();
+    const regex = new RegExp(`${propertyName}:(.+)$`, "i");
+    const attributes = features.get("attributes");
+    const dataOptionRegExp = new RegExp(`^${attributes.option}-`);
+    for (const optionName of this.__element.getAttributeNames()) {
+      if (regex.test(optionName)) {
+        const [, breakpoints] = optionName.match(regex);
+        const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
+        if (isInBreakpoint) {
+          responsiveName = optionName.replace(dataOptionRegExp, "");
+        }
+      }
+    }
+    return responsiveName;
+  }
+}
+export {
+  ResponsiveOptionsManager
+};
+//# sourceMappingURL=ResponsiveOptionsManager.js.map

package/dist/Base/managers/ResponsiveOptionsManager.js.map

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

package/dist/Base/managers/ServicesManager.d.ts

@@ -0,0 +1,85 @@
+import type { ServiceInterface } from '../../services/AbstractService.js';
+import { type KeyServiceInterface, useKey } from '../../services/KeyService.js';
+import { type PointerServiceInterface, usePointer } from '../../services/PointerService.js';
+import { type RafServiceInterface, useRaf } from '../../services/RafService.js';
+import { type ResizeServiceInterface, useResize } from '../../services/ResizeService.js';
+import { type ScrollServiceInterface, useScroll } from '../../services/ScrollService.js';
+import { AbstractManager } from './AbstractManager.js';
+declare const SERVICES_MAP: {
+    scrolled: typeof useScroll;
+    resized: typeof useResize;
+    ticked: typeof useRaf;
+    moved: typeof usePointer;
+    keyed: typeof useKey;
+};
+type Services = {
+    scrolled: ScrollServiceInterface;
+    resized: ResizeServiceInterface;
+    ticked: RafServiceInterface;
+    moved: PointerServiceInterface;
+    keyed: KeyServiceInterface;
+} & Record<string, ServiceInterface<unknown>>;
+type ServiceProps = typeof SERVICES_MAP & Record<string, <T>() => ServiceInterface<T>>;
+type ServiceNames = keyof Services;
+/**
+ * Services management for the Base class.
+ *
+ * @todo Add support for disabled services on mount when the method is defined.
+ */
+export declare class ServicesManager extends AbstractManager<ServiceProps> {
+    /**
+     * Custom props
+     * @private
+     */
+    __props: ServiceProps;
+    /**
+     * Test if the given service is registered.
+     */
+    has(service: ServiceNames | string): boolean;
+    /**
+     * Get a service props by name.
+     */
+    get<S extends ServiceNames | string>(service: S): ReturnType<Services[S]['props']>;
+    /**
+     * Init the given service and bind it to the given instance.
+     *
+     * @param  {ServiceNames} service The name of the service.
+     * @return {() => void}          A function to unbind the service.
+     */
+    enable(service: ServiceNames): () => void;
+    /**
+     * Enable all services and return methods to disable them.
+     */
+    enableAll(): (() => void)[];
+    /**
+     * Disable all services.
+     *
+     * @return {void}
+     */
+    disableAll(): void;
+    /**
+     * Disable a service.
+     */
+    disable(service: ServiceNames): void;
+    /**
+     * Toggle a service.
+     */
+    toggle(service: ServiceNames, force?: boolean): void;
+    /**
+     * Register a new service to be enabled/disabled.
+     *
+     * @param {string} name
+     *   The name of the service hook.
+     * @param {<T>(...args:unknown[]) => ServiceInterface<T>} useFunction
+     *   The `use...` function for the service.
+     */
+    register(name: string, useFunction: <T>(...args: unknown[]) => ServiceInterface<T>): void;
+    /**
+     * Unregister a new service to be enabled disabled.
+     *
+     * @param {string} name
+     *   The name of the service hook.
+     */
+    unregister(name: string): void;
+}
+export {};