@studiometa/js-toolkit 2.0.0-rc.2 → 2.1.0

package/Base/managers/RefsManager.cjs

@@ -1,8 +1,9 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -15,85 +16,60 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 
 // packages/js-toolkit/Base/managers/RefsManager.js
 var RefsManager_exports = {};
 __export(RefsManager_exports, {
-  default: () => RefsManager
+  default: () => RefsManager,
+  normalizeRefName: () => normalizeRefName
 });
 module.exports = __toCommonJS(RefsManager_exports);
-var RefsManager = class {
-  constructor(base, element, refs, eventsManager) {
-    __publicField(this, "__element");
-    __publicField(this, "__refs");
-    __publicField(this, "__base");
-    __publicField(this, "__eventsManager");
-    Object.defineProperties(this, {
-      __element: {
-        enumerable: false,
-        writable: false,
-        value: element
-      },
-      __refs: {
-        enumerable: false,
-        writable: false,
-        value: refs
-      },
-      __base: {
-        enumerable: false,
-        writable: false,
-        value: base
-      },
-      __eventsManager: {
-        enumerable: false,
-        writable: false,
-        value: eventsManager
-      }
-    });
-  }
-  registerAll() {
-    this.__refs.forEach((refName) => this.__register(refName));
+var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
+function normalizeRefName(name) {
+  return name.endsWith("[]") ? name.replace(/\[\]$/, "") : name;
+}
+function __filterRefsBelongingToInstance(that, ref) {
+  let ancestor = ref.parentElement;
+  while (ancestor && ancestor.dataset.component === void 0) {
+    ancestor = ancestor.parentElement;
   }
-  unregisterAll() {
-    this.__refs.forEach((refName) => this.__unregister(refName));
+  return ancestor === null || ancestor === that.__element;
+}
+function __register(that, refName) {
+  const isMultiple = refName.endsWith("[]");
+  const propName = normalizeRefName(refName);
+  const refs = Array.from(that.__element.querySelectorAll(`[data-ref="${refName}"]`)).filter((ref) => __filterRefsBelongingToInstance(that, ref));
+  if (!isMultiple && refs.length > 1) {
+    console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref has been found multiple times.`, "Did you forgot to add the `[]` suffix to its name?");
   }
-  __register(refName) {
-    const isMultiple = refName.endsWith("[]");
-    const propName = RefsManager.normalizeRefName(refName);
-    const refs = Array.from(this.__element.querySelectorAll(`[data-ref="${refName}"]`)).filter((ref) => this.__filterRefsBelongingToInstance(ref));
-    if (!isMultiple && refs.length > 1) {
-      console.warn(`[${this.__base.$options.name}]`, `The "${refName}" ref has been found multiple times.`, "Did you forgot to add the `[]` suffix to its name?");
-    }
-    if (!isMultiple && refs.length <= 1 && refs[0] === void 0) {
-      console.warn(`[${this.__base.$options.name}]`, `The "${refName}" ref is missing.`, `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`);
-      return;
-    }
-    this.__eventsManager.bindRef(refName, refs);
-    Object.defineProperty(this, propName, {
-      value: isMultiple || refs.length > 1 ? refs : refs[0],
-      enumerable: true,
-      configurable: true
-    });
+  if (!isMultiple && refs.length <= 1 && refs[0] === void 0) {
+    console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref is missing.`, `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`);
+    return;
   }
-  __unregister(refName) {
-    const propName = RefsManager.normalizeRefName(refName);
-    const refs = Array.isArray(this[propName]) ? this[propName] : [this[propName]];
-    this.__eventsManager.unbindRef(refName, refs);
+  that.__eventsManager.bindRef(refName, refs);
+  Object.defineProperty(that, propName, {
+    value: isMultiple || refs.length > 1 ? refs : refs[0],
+    enumerable: true,
+    configurable: true
+  });
+}
+function __unregister(that, refName) {
+  const propName = normalizeRefName(refName);
+  const refs = Array.isArray(that[propName]) ? that[propName] : [that[propName]];
+  that.__eventsManager.unbindRef(refName, refs);
+}
+var RefsManager = class extends import_AbstractManager.default {
+  get __refs() {
+    var _a;
+    return (_a = this.__config.refs) != null ? _a : [];
   }
-  static normalizeRefName(name) {
-    return name.endsWith("[]") ? name.replace(/\[\]$/, "") : name;
+  registerAll() {
+    this.__refs.forEach((refName) => __register(this, refName));
   }
-  __filterRefsBelongingToInstance(ref) {
-    let ancestor = ref.parentElement;
-    while (ancestor && ancestor.dataset.component === void 0) {
-      ancestor = ancestor.parentElement;
-    }
-    return ancestor === null || ancestor === this.__element;
+  unregisterAll() {
+    this.__refs.forEach((refName) => __unregister(this, refName));
   }
 };
 if (module.exports.default) module.exports = module.exports.default;

package/Base/managers/RefsManager.d.ts

@@ -1,86 +1,32 @@
 /**
- * @typedef {import('../index.js').default} Base
- * @typedef {import('./EventsManager.js').default} EventsManager
+ * Normalize the name of ref.
+ *
+ * @param {string} name The original name.
+ * @returns {string}     The normalized name.
  */
+export function normalizeRefName(name: string): string;
 /**
  * Refs Manager
  *
  * @todo Use `MutationObserver` to automatically update refs?
  */
-export default class RefsManager {
-    /**
-     * Normalize the name of ref.
-     *
-     * @param {string} name The original name.
-     * @return {string}     The normalized name.
-     */
-    static normalizeRefName(name: string): string;
-    /**
-     * Class constructor.
-     *
-     * @param {Base} base
-     *   The base instance tied to this manager.
-     * @param {HTMLElement} element
-     *   The root element of a Base component.
-     * @param {string[]} refs
-     *   The list of refs of this component.
-     * @param {EventsManager} eventsManager
-     */
-    constructor(base: Base, element: HTMLElement, refs: string[], eventsManager: EventsManager);
-    /**
-     * @type {HTMLElement}
-     * @private
-     */
-    private __element;
-    /**
-     * @type {string[]}
-     * @private
-     */
-    private __refs;
+export default class RefsManager extends AbstractManager {
     /**
-     * @type {Base}
-     * @private
+     * Get refs configuration.
+     * @returns {string[]}
      */
-    private __base;
-    /**
-     * @type {EventsManager}
-     * @private
-     */
-    private __eventsManager;
+    get __refs(): string[];
     /**
      * Register all refs.
      *
-     * @return {void}
+     * @returns {void}
      */
     registerAll(): void;
     /**
      * Unregister all refs.
      *
-     * @return {void}
+     * @returns {void}
      */
     unregisterAll(): void;
-    /**
-     * Register one ref.
-     *
-     * @param {string} refName The ref name.
-     * @private
-     */
-    private __register;
-    /**
-     * Unregister one ref.
-     *
-     * @param {string} refName The ref name.
-     * @private
-     */
-    private __unregister;
-    /**
-     * Filter refs belonging to the related Base instance.
-     *
-     * @param {HTMLElement} ref The ref to test.
-     * @return {boolean}
-     * @private
-     */
-    private __filterRefsBelongingToInstance;
 }
-export type Base = import('../index.js').default;
-export type EventsManager = import('./EventsManager.js').default;
+import AbstractManager from "./AbstractManager.js";

package/Base/managers/RefsManager.js

@@ -1,78 +1,50 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class RefsManager {
-  constructor(base, element, refs, eventsManager) {
-    __publicField(this, "__element");
-    __publicField(this, "__refs");
-    __publicField(this, "__base");
-    __publicField(this, "__eventsManager");
-    Object.defineProperties(this, {
-      __element: {
-        enumerable: false,
-        writable: false,
-        value: element
-      },
-      __refs: {
-        enumerable: false,
-        writable: false,
-        value: refs
-      },
-      __base: {
-        enumerable: false,
-        writable: false,
-        value: base
-      },
-      __eventsManager: {
-        enumerable: false,
-        writable: false,
-        value: eventsManager
-      }
-    });
-  }
-  registerAll() {
-    this.__refs.forEach((refName) => this.__register(refName));
+import AbstractManager from "./AbstractManager.js";
+function normalizeRefName(name) {
+  return name.endsWith("[]") ? name.replace(/\[\]$/, "") : name;
+}
+function __filterRefsBelongingToInstance(that, ref) {
+  let ancestor = ref.parentElement;
+  while (ancestor && ancestor.dataset.component === void 0) {
+    ancestor = ancestor.parentElement;
   }
-  unregisterAll() {
-    this.__refs.forEach((refName) => this.__unregister(refName));
+  return ancestor === null || ancestor === that.__element;
+}
+function __register(that, refName) {
+  const isMultiple = refName.endsWith("[]");
+  const propName = normalizeRefName(refName);
+  const refs = Array.from(that.__element.querySelectorAll(`[data-ref="${refName}"]`)).filter((ref) => __filterRefsBelongingToInstance(that, ref));
+  if (!isMultiple && refs.length > 1) {
+    console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref has been found multiple times.`, "Did you forgot to add the `[]` suffix to its name?");
   }
-  __register(refName) {
-    const isMultiple = refName.endsWith("[]");
-    const propName = RefsManager.normalizeRefName(refName);
-    const refs = Array.from(this.__element.querySelectorAll(`[data-ref="${refName}"]`)).filter((ref) => this.__filterRefsBelongingToInstance(ref));
-    if (!isMultiple && refs.length > 1) {
-      console.warn(`[${this.__base.$options.name}]`, `The "${refName}" ref has been found multiple times.`, "Did you forgot to add the `[]` suffix to its name?");
-    }
-    if (!isMultiple && refs.length <= 1 && refs[0] === void 0) {
-      console.warn(`[${this.__base.$options.name}]`, `The "${refName}" ref is missing.`, `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`);
-      return;
-    }
-    this.__eventsManager.bindRef(refName, refs);
-    Object.defineProperty(this, propName, {
-      value: isMultiple || refs.length > 1 ? refs : refs[0],
-      enumerable: true,
-      configurable: true
-    });
+  if (!isMultiple && refs.length <= 1 && refs[0] === void 0) {
+    console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref is missing.`, `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`);
+    return;
   }
-  __unregister(refName) {
-    const propName = RefsManager.normalizeRefName(refName);
-    const refs = Array.isArray(this[propName]) ? this[propName] : [this[propName]];
-    this.__eventsManager.unbindRef(refName, refs);
+  that.__eventsManager.bindRef(refName, refs);
+  Object.defineProperty(that, propName, {
+    value: isMultiple || refs.length > 1 ? refs : refs[0],
+    enumerable: true,
+    configurable: true
+  });
+}
+function __unregister(that, refName) {
+  const propName = normalizeRefName(refName);
+  const refs = Array.isArray(that[propName]) ? that[propName] : [that[propName]];
+  that.__eventsManager.unbindRef(refName, refs);
+}
+class RefsManager extends AbstractManager {
+  get __refs() {
+    var _a;
+    return (_a = this.__config.refs) != null ? _a : [];
   }
-  static normalizeRefName(name) {
-    return name.endsWith("[]") ? name.replace(/\[\]$/, "") : name;
+  registerAll() {
+    this.__refs.forEach((refName) => __register(this, refName));
   }
-  __filterRefsBelongingToInstance(ref) {
-    let ancestor = ref.parentElement;
-    while (ancestor && ancestor.dataset.component === void 0) {
-      ancestor = ancestor.parentElement;
-    }
-    return ancestor === null || ancestor === this.__element;
+  unregisterAll() {
+    this.__refs.forEach((refName) => __unregister(this, refName));
   }
 }
 export {
-  RefsManager as default
+  RefsManager as default,
+  normalizeRefName
 };

package/Base/managers/ResponsiveOptionsManager.cjs

@@ -0,0 +1,62 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/Base/managers/ResponsiveOptionsManager.js
+var ResponsiveOptionsManager_exports = {};
+__export(ResponsiveOptionsManager_exports, {
+  default: () => ResponsiveOptionsManager
+});
+module.exports = __toCommonJS(ResponsiveOptionsManager_exports);
+var import_OptionsManager = __toESM(require("./OptionsManager.cjs"), 1);
+var import_services = require("../../services/index.cjs");
+function __getResponsiveName(that, name) {
+  const { breakpoint } = (0, import_services.useResize)().props();
+  if (!breakpoint) {
+    return name;
+  }
+  let responsiveName = name;
+  const propertyName = (0, import_OptionsManager.__getPropertyName)(name);
+  const regex = new RegExp(`${propertyName}:(.+)$`);
+  Object.keys(that.__element.dataset).filter((optionName) => regex.test(optionName)).forEach((optionName) => {
+    const [, breakpoints] = optionName.match(regex);
+    const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
+    if (isInBreakpoint) {
+      responsiveName = optionName.replace(/^option/, "");
+    }
+  });
+  return responsiveName;
+}
+var ResponsiveOptionsManager = class extends import_OptionsManager.default {
+  get(name, config) {
+    if (!config.responsive) {
+      return super.get(name, config);
+    }
+    return super.get(__getResponsiveName(this, name), config);
+  }
+  set(name, value, config) {
+    if (!config.responsive) {
+      super.set(name, value, config);
+      return;
+    }
+    console.warn(`[${this.__config.name}]`, "Responsive options are read-only.");
+  }
+};
+if (module.exports.default) module.exports = module.exports.default;

package/Base/managers/ResponsiveOptionsManager.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Class options to manage options as data attributes on an HTML element.
+ */
+export default class ResponsiveOptionsManager extends OptionsManager {
+    /**
+     * Get an option value.
+     *
+     * @param   {string} name The option name.
+     * @param   {ResponsiveOptionObject} config The option configuration.
+     * @returns {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: any, config: ResponsiveOptionObject): void;
+}
+export type OptionObject = import('./OptionsManager.js').OptionObject;
+export type ResponsiveOptionObject = OptionObject & {
+    responsive?: boolean;
+};
+import OptionsManager from "./OptionsManager.js";

package/Base/managers/ResponsiveOptionsManager.js

@@ -0,0 +1,37 @@
+import OptionsManager, { __getPropertyName } from "./OptionsManager.js";
+import { useResize } from "../../services/index.js";
+function __getResponsiveName(that, name) {
+  const { breakpoint } = useResize().props();
+  if (!breakpoint) {
+    return name;
+  }
+  let responsiveName = name;
+  const propertyName = __getPropertyName(name);
+  const regex = new RegExp(`${propertyName}:(.+)$`);
+  Object.keys(that.__element.dataset).filter((optionName) => regex.test(optionName)).forEach((optionName) => {
+    const [, breakpoints] = optionName.match(regex);
+    const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
+    if (isInBreakpoint) {
+      responsiveName = optionName.replace(/^option/, "");
+    }
+  });
+  return responsiveName;
+}
+class ResponsiveOptionsManager extends OptionsManager {
+  get(name, config) {
+    if (!config.responsive) {
+      return super.get(name, config);
+    }
+    return super.get(__getResponsiveName(this, name), config);
+  }
+  set(name, value, config) {
+    if (!config.responsive) {
+      super.set(name, value, config);
+      return;
+    }
+    console.warn(`[${this.__config.name}]`, "Responsive options are read-only.");
+  }
+}
+export {
+  ResponsiveOptionsManager as default
+};

package/Base/managers/ServicesManager.cjs

@@ -36,6 +36,7 @@ var import_resize = __toESM(require("../../services/resize.cjs"), 1);
 var import_scroll = __toESM(require("../../services/scroll.cjs"), 1);
 var import_key = __toESM(require("../../services/key.cjs"), 1);
 var import_load = __toESM(require("../../services/load.cjs"), 1);
+var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
 var import_utils = require("../utils.cjs");
 var SERVICES_MAP = {
   scrolled: import_scroll.default,
@@ -46,17 +47,10 @@ var SERVICES_MAP = {
   loaded: import_load.default
 };
 var SERVICE_NAMES = Object.keys(SERVICES_MAP);
-var ServicesManager = class {
-  constructor(instance) {
-    __publicField(this, "__base");
+var ServicesManager = class extends import_AbstractManager.default {
+  constructor() {
+    super(...arguments);
     __publicField(this, "__customServices", {});
-    Object.defineProperties(this, {
-      __base: {
-        enumerable: false,
-        writable: false,
-        value: instance
-      }
-    });
   }
   get __services() {
     return {
@@ -71,6 +65,9 @@ var ServicesManager = class {
     const { has } = this.__services[service]();
     return has(this.__base.$id);
   }
+  get(service) {
+    return this.__services[service]().props();
+  }
   enable(service) {
     if (this.has(service)) {
       return this.disable.bind(this, service);

package/Base/managers/ServicesManager.d.ts

@@ -7,63 +7,59 @@
  *
  * @todo Add support for disabled services on mount when the method is defined.
  */
-export default class ServicesManager {
-    /**
-     * Class constructor.
-     * @param {Base} instance The Base instance.
-     */
-    constructor(instance: Base);
-    /**
-     * @type {Base}
-     * @private
-     */
-    private __base;
+export default class ServicesManager extends AbstractManager {
     /**
      * @type {Record<string, () => ServiceInterface>}
      */
     __customServices: Record<string, () => ServiceInterface>;
     /**
-     * @return {Record<string, () => ServiceInterface>}
+     * @returns {Record<string, () => ServiceInterface>}
      */
     get __services(): Record<string, () => ServiceInterface>;
     /**
      * Test if the given service is registered.
      *
      * @param  {ServiceName} service The name of the service.
-     * @return {Boolean}
+     * @returns {boolean}
      */
     has(service: ServiceName): boolean;
+    /**
+     * Get a service props by name.
+     * @param   {ServiceName} service The name of the service.
+     * @returns {ReturnType<ServiceInterface['props']>}
+     */
+    get(service: ServiceName): ReturnType<ServiceInterface['props']>;
     /**
      * Init the given service and bind it to the given instance.
      *
      * @param  {ServiceName} service The name of the service.
-     * @return {() => void}          A function to unbind the service.
+     * @returns {() => void}          A function to unbind the service.
      */
     enable(service: ServiceName): () => void;
     /**
      * Enable all services and return methods to disable them.
      *
-     * @return {Function[]}
+     * @returns {Function[]}
      */
     enableAll(): Function[];
     /**
      * Disable all services.
      *
-     * @return {void}
+     * @returns {void}
      */
     disableAll(): void;
     /**
      * Disable a service.
      *
-     * @param  {String} service  The name of the service.
-     * @return {void}
+     * @param  {string} service  The name of the service.
+     * @returns {void}
      */
     disable(service: string): void;
     /**
      * Toggle a service.
      * @param  {string}  service    The name of the service.
      * @param  {boolean} [force] The state to force.
-     * @return {void}
+     * @returns {void}
      */
     toggle(service: string, force?: boolean): void;
     /**
@@ -95,6 +91,7 @@ export type ServiceName = keyof {
     keyed: typeof useKey;
     loaded: typeof useLoad;
 } | string;
+import AbstractManager from "./AbstractManager.js";
 declare namespace SERVICES_MAP {
     export { useScroll as scrolled };
     export { useResize as resized };

package/Base/managers/ServicesManager.js

@@ -10,6 +10,7 @@ import useResize from "../../services/resize.js";
 import useScroll from "../../services/scroll.js";
 import useKey from "../../services/key.js";
 import useLoad from "../../services/load.js";
+import AbstractManager from "./AbstractManager.js";
 import { hasMethod } from "../utils.js";
 const SERVICES_MAP = {
   scrolled: useScroll,
@@ -20,17 +21,10 @@ const SERVICES_MAP = {
   loaded: useLoad
 };
 const SERVICE_NAMES = Object.keys(SERVICES_MAP);
-class ServicesManager {
-  constructor(instance) {
-    __publicField(this, "__base");
+class ServicesManager extends AbstractManager {
+  constructor() {
+    super(...arguments);
     __publicField(this, "__customServices", {});
-    Object.defineProperties(this, {
-      __base: {
-        enumerable: false,
-        writable: false,
-        value: instance
-      }
-    });
   }
   get __services() {
     return {
@@ -45,6 +39,9 @@ class ServicesManager {
     const { has } = this.__services[service]();
     return has(this.__base.$id);
   }
+  get(service) {
+    return this.__services[service]().props();
+  }
   enable(service) {
     if (this.has(service)) {
       return this.disable.bind(this, service);

package/Base/utils.d.ts

@@ -5,18 +5,18 @@
  * Test if an object has a method.
  *
  * @param  {Object}  obj  The object to test
- * @param  {String}  name The method's name
- * @return {Boolean}
+ * @param  {string}  name The method's name
+ * @returns {boolean}
  */
 export function hasMethod(obj: any, name: string): boolean;
 /**
  * Get a list of elements based on the name of a component.
  *
- * @param {String} nameOrSelector
+ * @param {string} nameOrSelector
  *   The name or selector to used for this component.
  * @param {HTMLElement|Document} element
  *   The root element on which to query the selector, defaults to `document`.
- * @return {Array<HTMLElement>}
+ * @returns {Array<HTMLElement>}
  *   A list of elements on which the component should be mounted.
  */
 export function getComponentElements(nameOrSelector: string, element?: HTMLElement | Document): Array<HTMLElement>;