@empathyco/x-components 3.0.0-alpha.221 → 3.0.0-alpha.222

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.222](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.221...@empathyco/x-components@3.0.0-alpha.222) (2022-11-10)
+
+### Features
+
+- **x-plugin:** Add function as possible value of `domElement` in InstallXOptions.(#836)
+  ([99a96ef](https://github.com/empathyco/x/commit/99a96ef2303f27b656835253203bc73758a337ae))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.221](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.220...@empathyco/x-components@3.0.0-alpha.221) (2022-11-10)
 
 ### Features

package/design-system/full-theme.css

@@ -2866,6 +2866,10 @@
 .x-picture--zoom .x-picture__image:hover {
   transform: scale(var(--x-number-zoom-scale-picture));
 }
+:root {
+  --x-number-zoom-scale-picture: 1.1;
+  --x-number-zoom-duration-picture: 0.3s;
+}
 .x-progress-bar {
   display: inline-block;
   overflow: hidden;
@@ -7288,8 +7292,3 @@
 .x-normal-case {
   text-transform: none;
 }
-
-:root {
-  --x-number-zoom-scale-picture: 1.1;
-  --x-number-zoom-duration-picture: 0.3s;
-}

package/docs/API-reference/api/x-components.installxoptions.domelement.md

@@ -4,10 +4,10 @@
 
 ## InstallXOptions.domElement property
 
-An Element \| string to indicate the HTML element that will contain the Vue application. If string selector is passed and the element doesn't exits, the [XInstaller](./x-components.xinstaller.md) will create it.
+An Element \| string \| function to indicate the HTML element that will contain the Vue application. If it isn't passed, the [XInstaller](./x-components.xinstaller.md) will create the target element.
 
 <b>Signature:</b>
 
 ```typescript
-domElement?: Element | string;
+domElement?: Element | string | ((snippetConfig: NormalisedSnippetConfig) => Element | string);
 ```

package/docs/API-reference/api/x-components.installxoptions.md

@@ -20,7 +20,7 @@ export interface InstallXOptions<API extends XAPI = XAPI> extends XPluginOptions
 |  [api?](./x-components.installxoptions.api.md) | API \| false | <i>(Optional)</i> The API to expose globally. If is not passed the default [BaseXAPI](./x-components.basexapi.md) will be used. If a <code>false</code> value is passed then the API is not created. |
 |  [app?](./x-components.installxoptions.app.md) | VueConstructor \| ComponentOptions&lt;Vue&gt; | <i>(Optional)</i> The Vue component used as root of the application. If it is not passed, no Vue Application is initialized, only plugin installed. |
 |  [bus?](./x-components.installxoptions.bus.md) | [XBus](./x-components.xbus.md) | <i>(Optional)</i> The [XBus](./x-components.xbus.md) used in the [XPlugin](./x-components.xplugin.md)<!-- -->. If not passed an instance of [BaseXBus](./x-components.basexbus.md) will be used. |
-|  [domElement?](./x-components.installxoptions.domelement.md) | Element \| string | <i>(Optional)</i> An Element \| string to indicate the HTML element that will contain the Vue application. If string selector is passed and the element doesn't exits, the [XInstaller](./x-components.xinstaller.md) will create it. |
+|  [domElement?](./x-components.installxoptions.domelement.md) | Element \| string \| ((snippetConfig: [NormalisedSnippetConfig](./x-components.normalisedsnippetconfig.md)<!-- -->) =&gt; Element \| string) | <i>(Optional)</i> An Element \| string \| function to indicate the HTML element that will contain the Vue application. If it isn't passed, the [XInstaller](./x-components.xinstaller.md) will create the target element. |
 |  [onCreateApp?](./x-components.installxoptions.oncreateapp.md) | (app: Vue) =&gt; void | <i>(Optional)</i> Callback to invoke after instantiating the app. |
 |  [plugin?](./x-components.installxoptions.plugin.md) | PluginObject&lt;[XPluginOptions](./x-components.xpluginoptions.md)<!-- -->&gt; | <i>(Optional)</i> The XPlugin which will be installed. If not passed, an instance of [XPlugin](./x-components.xplugin.md) will be installed. |
 |  [vue?](./x-components.installxoptions.vue.md) | VueConstructor | <i>(Optional)</i> The Vue instance used to install the plugin and to create the Application. If not passed the default Vue instance is used. This can be useful to use the <code>localVue</code> in the unit tests. |

package/js/x-installer/x-installer/x-installer.js

@@ -1,4 +1,4 @@
-import { forEach } from '@empathyco/x-utils';
+import { isFunction, forEach } from '@empathyco/x-utils';
 import Vue from 'vue';
 import { BaseXBus } from '../../plugins/x-bus.js';
 import { XPlugin } from '../../plugins/x-plugin.js';
@@ -255,29 +255,30 @@ class XInstaller {
         return snippetConfig;
     }
     /**
-     * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in the
-     * {@link InstallXOptions} is an Element or a string, then it is used. If it is
-     * not present then a new <div> Element is created and append to the body to be used.
+     * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in
+     * the {@link InstallXOptions} is an Element or an element selector, then this will be used.
+     * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which
+     * returns an Element or element selector to use.
+     * If it is not present, a new <div> Element is created and appended to the body.
      *
-     * @param elementOrSelector - String or Element used to mount the Vue App.
+     * @param domElement - {@link InstallXOptions.domElement | Element, string or function} Used
+     * to mount the Vue Application.
      *
-     * @returns The Element to use as mounting point for the Vue App.
+     * @returns The Element to use as mounting target for the Vue Application.
      * @internal
      */
-    getMountingTarget(elementOrSelector) {
-        if (typeof elementOrSelector === 'string') {
-            const target = document.querySelector(elementOrSelector);
+    getMountingTarget(domElement) {
+        if (isFunction(domElement)) {
+            domElement = domElement(this.snippetConfig);
+        }
+        if (typeof domElement === 'string') {
+            const target = document.querySelector(domElement);
             if (!target) {
-                throw Error(`XComponents app couldn't be mounted: Element "${elementOrSelector}" couldn't be found`);
+                throw Error(`XComponents app couldn't be mounted: Element "${domElement}" couldn't be found`);
             }
             return target;
         }
-        else if (elementOrSelector !== undefined) {
-            return elementOrSelector;
-        }
-        else {
-            return document.body.appendChild(document.createElement('div'));
-        }
+        return domElement ?? document.body.appendChild(document.createElement('div'));
     }
     /**
      * It updates all the provided properties from the current snippet config.

package/js/x-installer/x-installer/x-installer.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import { forEach } from '@empathyco/x-utils';\nimport Vue, { PluginObject, VueConstructor } from 'vue';\nimport { BaseXBus } from '../../plugins/x-bus';\nimport { XBus } from '../../plugins/x-bus.types';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { InitWrapper, InstallXOptions, VueConstructorPartialArgument } from './types';\n\ndeclare global {\n  interface Window {\n    InterfaceX?: XAPI;\n    initX?: (() => SnippetConfig) | SnippetConfig;\n  }\n}\n\n/**\n * The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n *\n * This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n *\n * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n *\n * @example The way to use this class is the next:\n *    1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n *\n * ```\n *        const installer = new XInstaller(installXOptions)\n * ```\n *\n *    2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n *       There are 3 different ways to do this:\n *\n *        2.1 Using the created installer:\n *\n * ```\n *            installer.init(snippetConfig)\n * ```\n *\n *        2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n *            is not present as the default value is `true`) then this init step can be done with\n *            the Public API:\n *\n * ```\n *            window.InterfaceX.init(snippetConfig)\n * ```\n *\n *        2.3 When the script of the project build is loaded it searches for a global `initX`\n *            variable that the customer must have in their website. This variable can be a\n *            function that returns the {@link SnippetConfig} or an object that contains the\n *            {@link SnippetConfig} itself:\n *\n * ```\n *            window.initX = function() {\n *                 return {\n *                   instance,\n *                   env,\n *                   scope,\n *                   lang,\n *                   uiLang,\n *                   currency,\n *                   consent,\n *                   documentDirection\n *                 };\n *              };\n * ```\n *\n * ```\n *            window.initX = {\n *                 instance,\n *                 env,\n *                 scope,\n *                 lang,\n *                 uiLang,\n *                 currency,\n *                 consent,\n *                 documentDirection\n *               };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n  private api?: XAPI;\n\n  /**\n   * The configuration coming from the snippet {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected snippetConfig?: NormalisedSnippetConfig;\n\n  /**\n   * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n   * creates the public {@link XAPI}.\n   *\n   * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n   * object specifying the {@link SnippetConfig | snippet config}.\n   *\n   *\n   * @param options - The {@link InstallXOptions}.\n   *\n   * @public\n   */\n  public constructor(protected readonly options: InstallXOptions) {\n    this.createAPI();\n  }\n\n  /**\n   * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n   * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n   * creation the value `false` must be passed in the `api` option.\n   *\n   * @internal\n   */\n  protected createAPI(): void {\n    const { api } = this.options;\n    if (api !== false) {\n      this.api = api ?? new BaseXAPI();\n      this.api.setInitCallback(this.init.bind(this));\n      this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n      window.InterfaceX = this.api;\n    }\n  }\n\n  /**\n   * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n   *\n   * @returns The snippet config if it is defined or undefined otherwise.\n   *\n   * @internal\n   */\n  private retrieveSnippetConfig(): SnippetConfig | undefined {\n    if (typeof window.initX === 'function') {\n      return window.initX();\n    } else if (typeof window.initX === 'object') {\n      return window.initX;\n    }\n  }\n\n  /**\n   * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n   * installs the plugin and initializes the Vue application.\n   *\n   * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n   *\n   * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n   * returns an object with the {@link XAPI}, the {@link XBus}, the {@link XPlugin} and the Vue App\n   * used in the application. Else, a rejected promise is returned.\n   *\n   * @public\n   */\n  init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n  init(): Promise<InitWrapper | void>;\n  async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n    if (snippetConfig) {\n      this.snippetConfig = this.normaliseSnippetConfig(snippetConfig);\n      const bus = this.createBus();\n      const pluginOptions = this.getPluginOptions();\n      const plugin = this.installPlugin(pluginOptions, bus);\n      const extraPlugins = await this.installExtraPlugins(bus);\n      const app = this.createApp(extraPlugins);\n      this.api?.setBus(bus);\n\n      return {\n        api: this.api,\n        app,\n        bus,\n        plugin\n      };\n    }\n\n    return Promise.resolve();\n  }\n\n  /**\n   * Creates the {@link XPluginOptions} object.\n   *\n   * @returns The {@link XPluginOptions} object.\n   *\n   * @internal\n   */\n  protected getPluginOptions(): XPluginOptions {\n    const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;\n    return {\n      adapter,\n      store,\n      xModules,\n      initialXModules,\n      __PRIVATE__xModules\n    };\n  }\n\n  /**\n   * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n   * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n   * creates a new instance of {@link BaseXBus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus {\n    return this.options.bus ?? new BaseXBus();\n  }\n\n  /**\n   * This method returns the VueConstructor to use to create the App instance.\n   * It returns the `vue` parameter in the {@link InstallXOptions} or if not provided, then\n   * returns the default Vue.\n   *\n   * @remarks The purpose of this option is mainly the testing. In a test we can use this option\n   * to pass the local vue instance created by `createLocalVue` method.\n   *\n   * @returns VueConstructor - The vue constructor to create the App instance.\n   *\n   * @internal\n   */\n  protected getVue(): VueConstructor {\n    return this.options.vue ?? Vue;\n  }\n\n  /**\n   * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n   * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n   * created and installed.\n   *\n   * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n   * of the plugin.\n   * @param bus - The {@link XBus} to be used to create the XPlugin.\n   *\n   * @returns PluginObject<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(pluginOptions: XPluginOptions, bus: XBus): PluginObject<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus);\n    const vue = this.getVue();\n    vue.use(plugin, pluginOptions);\n    return plugin;\n  }\n\n  /**\n   * Install more plugins to Vue defined by the user.\n   *\n   * @param bus - The events bus used in the application.\n   * @returns The arguments from the plugins installation to be used in Vue's constructor.\n   * @internal\n   */\n  protected installExtraPlugins(bus: XBus): Promise<VueConstructorPartialArgument> {\n    const vue = this.getVue();\n    return Promise.resolve(\n      this.options.installExtraPlugins?.({ vue, snippet: this.snippetConfig!, bus })\n    );\n  }\n\n  /**\n   * In the case that the `app` parameter is present in the {@link InstallXOptions}, then a new Vue\n   * application is created using that app.\n   *\n   * @param extraPlugins - Vue plugins initialisation data.\n   * @returns The Created Vue application or undefined if not created.\n   *\n   * @internal\n   */\n  protected createApp(extraPlugins: VueConstructorPartialArgument): Vue | undefined {\n    if (this.options.app !== undefined) {\n      const vue = this.getVue();\n      const app = new vue({\n        ...extraPlugins,\n        ...this.options.vueOptions,\n        provide: {\n          snippetConfig: (this.snippetConfig = vue.observable(this.snippetConfig))\n        },\n        store: this.options.store,\n        el: this.getMountingTarget(this.options.domElement),\n        render: h => h(this.options.app)\n      });\n      this.options.onCreateApp?.(app);\n      return app;\n    }\n  }\n\n  protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig;\n  protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>;\n  /**\n   * Transforms the snippet configuration.\n   * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n   *\n   * @param snippetConfig - The snippet config to normalise.\n   * @returns The normalised version of the given snippet config.\n   * @internal\n   */\n  protected normaliseSnippetConfig(\n    snippetConfig: SnippetConfig | Partial<SnippetConfig>\n  ): NormalisedSnippetConfig | Partial<SnippetConfig> {\n    if (snippetConfig.lang) {\n      snippetConfig.uiLang ??= snippetConfig.lang;\n    }\n    return snippetConfig;\n  }\n\n  /**\n   * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in the\n   * {@link InstallXOptions} is an Element or a string, then it is used. If it is\n   * not present then a new <div> Element is created and append to the body to be used.\n   *\n   * @param elementOrSelector - String or Element used to mount the Vue App.\n   *\n   * @returns The Element to use as mounting point for the Vue App.\n   * @internal\n   */\n  protected getMountingTarget(elementOrSelector?: string | Element): Element {\n    if (typeof elementOrSelector === 'string') {\n      const target = document.querySelector(elementOrSelector);\n      if (!target) {\n        throw Error(\n          `XComponents app couldn't be mounted: Element \"${elementOrSelector}\" couldn't be found`\n        );\n      }\n      return target;\n    } else if (elementOrSelector !== undefined) {\n      return elementOrSelector;\n    } else {\n      return document.body.appendChild(document.createElement('div'));\n    }\n  }\n\n  /**\n   * It updates all the provided properties from the current snippet config.\n   *\n   * @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n    if (!this.snippetConfig) {\n      return;\n    }\n    forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n      this.getVue().set(this.snippetConfig!, name, value);\n    });\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import { forEach, isFunction } from '@empathyco/x-utils';\nimport Vue, { PluginObject, VueConstructor } from 'vue';\nimport { BaseXBus } from '../../plugins/x-bus';\nimport { XBus } from '../../plugins/x-bus.types';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { InitWrapper, InstallXOptions, VueConstructorPartialArgument } from './types';\n\ndeclare global {\n  interface Window {\n    InterfaceX?: XAPI;\n    initX?: (() => SnippetConfig) | SnippetConfig;\n  }\n}\n\n/**\n * The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n *\n * This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n *\n * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n *\n * @example The way to use this class is the next:\n *    1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n *\n * ```\n *        const installer = new XInstaller(installXOptions)\n * ```\n *\n *    2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n *       There are 3 different ways to do this:\n *\n *        2.1 Using the created installer:\n *\n * ```\n *            installer.init(snippetConfig)\n * ```\n *\n *        2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n *            is not present as the default value is `true`) then this init step can be done with\n *            the Public API:\n *\n * ```\n *            window.InterfaceX.init(snippetConfig)\n * ```\n *\n *        2.3 When the script of the project build is loaded it searches for a global `initX`\n *            variable that the customer must have in their website. This variable can be a\n *            function that returns the {@link SnippetConfig} or an object that contains the\n *            {@link SnippetConfig} itself:\n *\n * ```\n *            window.initX = function() {\n *                 return {\n *                   instance,\n *                   env,\n *                   scope,\n *                   lang,\n *                   uiLang,\n *                   currency,\n *                   consent,\n *                   documentDirection\n *                 };\n *              };\n * ```\n *\n * ```\n *            window.initX = {\n *                 instance,\n *                 env,\n *                 scope,\n *                 lang,\n *                 uiLang,\n *                 currency,\n *                 consent,\n *                 documentDirection\n *               };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n  private api?: XAPI;\n\n  /**\n   * The configuration coming from the snippet {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected snippetConfig?: NormalisedSnippetConfig;\n\n  /**\n   * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n   * creates the public {@link XAPI}.\n   *\n   * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n   * object specifying the {@link SnippetConfig | snippet config}.\n   *\n   *\n   * @param options - The {@link InstallXOptions}.\n   *\n   * @public\n   */\n  public constructor(protected readonly options: InstallXOptions) {\n    this.createAPI();\n  }\n\n  /**\n   * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n   * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n   * creation the value `false` must be passed in the `api` option.\n   *\n   * @internal\n   */\n  protected createAPI(): void {\n    const { api } = this.options;\n    if (api !== false) {\n      this.api = api ?? new BaseXAPI();\n      this.api.setInitCallback(this.init.bind(this));\n      this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n      window.InterfaceX = this.api;\n    }\n  }\n\n  /**\n   * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n   *\n   * @returns The snippet config if it is defined or undefined otherwise.\n   *\n   * @internal\n   */\n  private retrieveSnippetConfig(): SnippetConfig | undefined {\n    if (typeof window.initX === 'function') {\n      return window.initX();\n    } else if (typeof window.initX === 'object') {\n      return window.initX;\n    }\n  }\n\n  /**\n   * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n   * installs the plugin and initializes the Vue application.\n   *\n   * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n   *\n   * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n   * returns an object with the {@link XAPI}, the {@link XBus}, the {@link XPlugin} and the Vue App\n   * used in the application. Else, a rejected promise is returned.\n   *\n   * @public\n   */\n  init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n  init(): Promise<InitWrapper | void>;\n  async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n    if (snippetConfig) {\n      this.snippetConfig = this.normaliseSnippetConfig(snippetConfig);\n      const bus = this.createBus();\n      const pluginOptions = this.getPluginOptions();\n      const plugin = this.installPlugin(pluginOptions, bus);\n      const extraPlugins = await this.installExtraPlugins(bus);\n      const app = this.createApp(extraPlugins);\n      this.api?.setBus(bus);\n\n      return {\n        api: this.api,\n        app,\n        bus,\n        plugin\n      };\n    }\n\n    return Promise.resolve();\n  }\n\n  /**\n   * Creates the {@link XPluginOptions} object.\n   *\n   * @returns The {@link XPluginOptions} object.\n   *\n   * @internal\n   */\n  protected getPluginOptions(): XPluginOptions {\n    const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;\n    return {\n      adapter,\n      store,\n      xModules,\n      initialXModules,\n      __PRIVATE__xModules\n    };\n  }\n\n  /**\n   * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n   * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n   * creates a new instance of {@link BaseXBus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus {\n    return this.options.bus ?? new BaseXBus();\n  }\n\n  /**\n   * This method returns the VueConstructor to use to create the App instance.\n   * It returns the `vue` parameter in the {@link InstallXOptions} or if not provided, then\n   * returns the default Vue.\n   *\n   * @remarks The purpose of this option is mainly the testing. In a test we can use this option\n   * to pass the local vue instance created by `createLocalVue` method.\n   *\n   * @returns VueConstructor - The vue constructor to create the App instance.\n   *\n   * @internal\n   */\n  protected getVue(): VueConstructor {\n    return this.options.vue ?? Vue;\n  }\n\n  /**\n   * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n   * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n   * created and installed.\n   *\n   * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n   * of the plugin.\n   * @param bus - The {@link XBus} to be used to create the XPlugin.\n   *\n   * @returns PluginObject<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(pluginOptions: XPluginOptions, bus: XBus): PluginObject<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus);\n    const vue = this.getVue();\n    vue.use(plugin, pluginOptions);\n    return plugin;\n  }\n\n  /**\n   * Install more plugins to Vue defined by the user.\n   *\n   * @param bus - The events bus used in the application.\n   * @returns The arguments from the plugins installation to be used in Vue's constructor.\n   * @internal\n   */\n  protected installExtraPlugins(bus: XBus): Promise<VueConstructorPartialArgument> {\n    const vue = this.getVue();\n    return Promise.resolve(\n      this.options.installExtraPlugins?.({ vue, snippet: this.snippetConfig!, bus })\n    );\n  }\n\n  /**\n   * In the case that the `app` parameter is present in the {@link InstallXOptions}, then a new Vue\n   * application is created using that app.\n   *\n   * @param extraPlugins - Vue plugins initialisation data.\n   * @returns The Created Vue application or undefined if not created.\n   *\n   * @internal\n   */\n  protected createApp(extraPlugins: VueConstructorPartialArgument): Vue | undefined {\n    if (this.options.app !== undefined) {\n      const vue = this.getVue();\n      const app = new vue({\n        ...extraPlugins,\n        ...this.options.vueOptions,\n        provide: {\n          snippetConfig: (this.snippetConfig = vue.observable(this.snippetConfig))\n        },\n        store: this.options.store,\n        el: this.getMountingTarget(this.options.domElement),\n        render: h => h(this.options.app)\n      });\n      this.options.onCreateApp?.(app);\n      return app;\n    }\n  }\n\n  protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig;\n  protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>;\n  /**\n   * Transforms the snippet configuration.\n   * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n   *\n   * @param snippetConfig - The snippet config to normalise.\n   * @returns The normalised version of the given snippet config.\n   * @internal\n   */\n  protected normaliseSnippetConfig(\n    snippetConfig: SnippetConfig | Partial<SnippetConfig>\n  ): NormalisedSnippetConfig | Partial<SnippetConfig> {\n    if (snippetConfig.lang) {\n      snippetConfig.uiLang ??= snippetConfig.lang;\n    }\n    return snippetConfig;\n  }\n\n  /**\n   * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n   * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n   * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n   * returns an Element or element selector to use.\n   * If it is not present, a new <div> Element is created and appended to the body.\n   *\n   * @param domElement - {@link InstallXOptions.domElement | Element, string or function} Used\n   * to mount the Vue Application.\n   *\n   * @returns The Element to use as mounting target for the Vue Application.\n   * @internal\n   */\n  protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element {\n    if (isFunction(domElement)) {\n      domElement = domElement(this.snippetConfig!);\n    }\n    if (typeof domElement === 'string') {\n      const target = document.querySelector(domElement);\n      if (!target) {\n        throw Error(\n          `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`\n        );\n      }\n      return target;\n    }\n    return domElement ?? document.body.appendChild(document.createElement('div'));\n  }\n\n  /**\n   * It updates all the provided properties from the current snippet config.\n   *\n   * @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n    if (!this.snippetConfig) {\n      return;\n    }\n    forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n      this.getVue().set(this.snippetConfig!, name, value);\n    });\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.221",
+  "version": "3.0.0-alpha.222",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -135,5 +135,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "319245fcf4df5b0a1227bfe336527928f3159a46"
+  "gitHead": "3a41e63e2cc9611d146378335f892b5e85200435"
 }

package/report/x-components.api.json

@@ -23091,7 +23091,7 @@
             {
               "kind": "PropertySignature",
               "canonicalReference": "@empathyco/x-components!InstallXOptions#domElement:member",
-              "docComment": "/**\n * An Element | string to indicate the HTML element that will contain the Vue application. If string selector is passed and the element doesn't exits, the {@link XInstaller} will create it.\n */\n",
+              "docComment": "/**\n * An Element | string | function to indicate the HTML element that will contain the Vue application. If it isn't passed, the {@link XInstaller} will create the target element.\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -23104,7 +23104,25 @@
                 },
                 {
                   "kind": "Content",
-                  "text": " | string"
+                  "text": " | string | ((snippetConfig: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "NormalisedSnippetConfig",
+                  "canonicalReference": "@empathyco/x-components!NormalisedSnippetConfig:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ") => "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Element",
+                  "canonicalReference": "!Element:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": " | string)"
                 },
                 {
                   "kind": "Content",
@@ -23116,7 +23134,7 @@
               "name": "domElement",
               "propertyTypeTokenRange": {
                 "startIndex": 1,
-                "endIndex": 3
+                "endIndex": 7
               }
             },
             {

package/report/x-components.api.md

@@ -2252,7 +2252,7 @@ export interface InstallXOptions<API extends XAPI = XAPI> extends XPluginOptions
     api?: API | false;
     app?: VueConstructor | ComponentOptions<Vue>;
     bus?: XBus;
-    domElement?: Element | string;
+    domElement?: Element | string | ((snippetConfig: NormalisedSnippetConfig) => Element | string);
     installExtraPlugins?(options: ExtraPluginsOptions): VueConstructorPartialArgument | Promise<VueConstructorPartialArgument>;
     onCreateApp?: (app: Vue) => void;
     plugin?: PluginObject<XPluginOptions>;
@@ -5345,7 +5345,7 @@ export class XInstaller {
     // @internal
     protected createBus(): XBus;
     // @internal
-    protected getMountingTarget(elementOrSelector?: string | Element): Element;
+    protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element;
     // @internal
     protected getPluginOptions(): XPluginOptions;
     // @internal

package/types/x-installer/x-installer/types.d.ts

@@ -25,11 +25,10 @@ export interface InstallXOptions<API extends XAPI = XAPI> extends XPluginOptions
      */
     bus?: XBus;
     /**
-     * An Element | string to indicate the HTML element that will contain the Vue
-     * application. If string selector is passed and the element doesn't exits, the
-     * {@link XInstaller} will create it.
+     * An Element | string | function to indicate the HTML element that will contain the Vue
+     * application. If it isn't passed, the {@link XInstaller} will create the target element.
      */
-    domElement?: Element | string;
+    domElement?: Element | string | ((snippetConfig: NormalisedSnippetConfig) => Element | string);
     /**
      * The XPlugin which will be installed. If not passed, an instance of {@link XPlugin} will be
      * installed.

package/types/x-installer/x-installer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/x-installer/x-installer/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,WAAW,eAAe,CAAC,GAAG,SAAS,IAAI,GAAG,IAAI,CAAE,SAAQ,cAAc;IAC9E;;;OAGG;IACH,GAAG,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,KAAK,CAAC;IAClB;;;OAGG;IACH,GAAG,CAAC,EAAE,IAAI,CAAC;IACX;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IACtC;;;;OAIG;IACH,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,6BAA6B,CAAC;IAE3C;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC;;;;;;;OAOG;IACH,mBAAmB,CAAC,CAClB,OAAO,EAAE,mBAAmB,GAC3B,6BAA6B,GAAG,OAAO,CAAC,6BAA6B,CAAC,CAAC;CAC3E;AAED;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,2CAA2C;IAC3C,GAAG,EAAE,cAAc,CAAC;IACpB,sFAAsF;IACtF,GAAG,EAAE,IAAI,CAAC;IACV;;;OAGG;IACH,OAAO,EAAE,uBAAuB,CAAC;CAClC;AAED;;;;GAIG;AACH,oBAAY,6BAA6B,GAAG,OAAO,CAAC,qBAAqB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAE9F;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,gDAAgD;IAChD,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,2CAA2C;IAC3C,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,oDAAoD;IACpD,GAAG,EAAE,IAAI,CAAC;IACV,8CAA8C;IAC9C,MAAM,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;CACtC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/x-installer/x-installer/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,WAAW,eAAe,CAAC,GAAG,SAAS,IAAI,GAAG,IAAI,CAAE,SAAQ,cAAc;IAC9E;;;OAGG;IACH,GAAG,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,KAAK,CAAC;IAClB;;;OAGG;IACH,GAAG,CAAC,EAAE,IAAI,CAAC;IACX;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,CAAC,CAAC,aAAa,EAAE,uBAAuB,KAAK,OAAO,GAAG,MAAM,CAAC,CAAC;IAC/F;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IACtC;;;;OAIG;IACH,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,6BAA6B,CAAC;IAE3C;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC;;;;;;;OAOG;IACH,mBAAmB,CAAC,CAClB,OAAO,EAAE,mBAAmB,GAC3B,6BAA6B,GAAG,OAAO,CAAC,6BAA6B,CAAC,CAAC;CAC3E;AAED;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,2CAA2C;IAC3C,GAAG,EAAE,cAAc,CAAC;IACpB,sFAAsF;IACtF,GAAG,EAAE,IAAI,CAAC;IACV;;;OAGG;IACH,OAAO,EAAE,uBAAuB,CAAC;CAClC;AAED;;;;GAIG;AACH,oBAAY,6BAA6B,GAAG,OAAO,CAAC,qBAAqB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAE9F;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,gDAAgD;IAChD,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,2CAA2C;IAC3C,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,oDAAoD;IACpD,GAAG,EAAE,IAAI,CAAC;IACV,8CAA8C;IAC9C,MAAM,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;CACtC"}

package/types/x-installer/x-installer/x-installer.d.ts

@@ -197,16 +197,19 @@ export declare class XInstaller {
     protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig;
     protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>;
     /**
-     * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in the
-     * {@link InstallXOptions} is an Element or a string, then it is used. If it is
-     * not present then a new <div> Element is created and append to the body to be used.
+     * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in
+     * the {@link InstallXOptions} is an Element or an element selector, then this will be used.
+     * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which
+     * returns an Element or element selector to use.
+     * If it is not present, a new <div> Element is created and appended to the body.
      *
-     * @param elementOrSelector - String or Element used to mount the Vue App.
+     * @param domElement - {@link InstallXOptions.domElement | Element, string or function} Used
+     * to mount the Vue Application.
      *
-     * @returns The Element to use as mounting point for the Vue App.
+     * @returns The Element to use as mounting target for the Vue Application.
      * @internal
      */
-    protected getMountingTarget(elementOrSelector?: string | Element): Element;
+    protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element;
     /**
      * It updates all the provided properties from the current snippet config.
      *

package/types/x-installer/x-installer/x-installer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"x-installer.d.ts","sourceRoot":"","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,EAAE,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAExD,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEhF,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAC;AAEtF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE,IAAI,CAAC;QAClB,KAAK,CAAC,EAAE,CAAC,MAAM,aAAa,CAAC,GAAG,aAAa,CAAC;KAC/C;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,qBAAa,UAAU;IAsBF,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,eAAe;IArB9D,OAAO,CAAC,GAAG,CAAC,CAAO;IAEnB;;;;OAIG;IACH,SAAS,CAAC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IAElD;;;;;;;;;;;OAWG;gBACmC,OAAO,EAAE,eAAe;IAI9D;;;;;;OAMG;IACH,SAAS,CAAC,SAAS,IAAI,IAAI;IAU3B;;;;;;OAMG;IACH,OAAO,CAAC,qBAAqB;IAQ7B;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC;IACxD,IAAI,IAAI,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;IAsBnC;;;;;;OAMG;IACH,SAAS,CAAC,gBAAgB,IAAI,cAAc;IAW5C;;;;;;;;OAQG;IACH,SAAS,CAAC,SAAS,IAAI,IAAI;IAI3B;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,MAAM,IAAI,cAAc;IAIlC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,aAAa,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,EAAE,IAAI,GAAG,YAAY,CAAC,cAAc,CAAC;IAO/F;;;;;;OAMG;IACH,SAAS,CAAC,mBAAmB,CAAC,GAAG,EAAE,IAAI,GAAG,OAAO,CAAC,6BAA6B,CAAC;IAOhF;;;;;;;;OAQG;IACH,SAAS,CAAC,SAAS,CAAC,YAAY,EAAE,6BAA6B,GAAG,GAAG,GAAG,SAAS;IAkBjF,SAAS,CAAC,sBAAsB,CAAC,aAAa,EAAE,aAAa,GAAG,uBAAuB;IACvF,SAAS,CAAC,sBAAsB,CAAC,aAAa,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,OAAO,CAAC,aAAa,CAAC;IAkB/F;;;;;;;;;OASG;IACH,SAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO;IAgB1E;;;;;;OAMG;IACH,SAAS,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI;CAQ9E"}
+{"version":3,"file":"x-installer.d.ts","sourceRoot":"","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,EAAE,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAExD,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEhF,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAC;AAEtF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE,IAAI,CAAC;QAClB,KAAK,CAAC,EAAE,CAAC,MAAM,aAAa,CAAC,GAAG,aAAa,CAAC;KAC/C;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,qBAAa,UAAU;IAsBF,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,eAAe;IArB9D,OAAO,CAAC,GAAG,CAAC,CAAO;IAEnB;;;;OAIG;IACH,SAAS,CAAC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IAElD;;;;;;;;;;;OAWG;gBACmC,OAAO,EAAE,eAAe;IAI9D;;;;;;OAMG;IACH,SAAS,CAAC,SAAS,IAAI,IAAI;IAU3B;;;;;;OAMG;IACH,OAAO,CAAC,qBAAqB;IAQ7B;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC;IACxD,IAAI,IAAI,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;IAsBnC;;;;;;OAMG;IACH,SAAS,CAAC,gBAAgB,IAAI,cAAc;IAW5C;;;;;;;;OAQG;IACH,SAAS,CAAC,SAAS,IAAI,IAAI;IAI3B;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,MAAM,IAAI,cAAc;IAIlC;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,aAAa,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,EAAE,IAAI,GAAG,YAAY,CAAC,cAAc,CAAC;IAO/F;;;;;;OAMG;IACH,SAAS,CAAC,mBAAmB,CAAC,GAAG,EAAE,IAAI,GAAG,OAAO,CAAC,6BAA6B,CAAC;IAOhF;;;;;;;;OAQG;IACH,SAAS,CAAC,SAAS,CAAC,YAAY,EAAE,6BAA6B,GAAG,GAAG,GAAG,SAAS;IAkBjF,SAAS,CAAC,sBAAsB,CAAC,aAAa,EAAE,aAAa,GAAG,uBAAuB;IACvF,SAAS,CAAC,sBAAsB,CAAC,aAAa,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,OAAO,CAAC,aAAa,CAAC;IAkB/F;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,OAAO;IAgBhF;;;;;;OAMG;IACH,SAAS,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI;CAQ9E"}