@empathyco/x-components 6.0.0-alpha.60 → 6.0.0-alpha.62

package/js/wiring/wiring.utils.js

@@ -27,7 +27,7 @@ function createWiring(wiring) {
 function getStateAndGettersFromModule(state, getters, moduleName) {
     return {
         state: state.x[moduleName],
-        getters: getGettersProxy(getters, moduleName)
+        getters: getGettersProxy(getters, moduleName),
     };
 }
 

package/js/wiring/wiring.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"wiring.utils.js","sources":["../../../src/wiring/wiring.utils.ts"],"sourcesContent":["import { Dictionary } from '@empathyco/x-utils';\nimport { RootXStoreState, StoreModuleStateAndGetters } from '../store/store.types';\nimport { getGettersProxy } from '../store/utils/getters-proxy.utils';\nimport { ExtractState, XModuleName } from '../x-modules/x-modules.types';\nimport { Wiring } from './wiring.types';\n\n/**\n * Util function to generate type-safe wiring.\n * If TypeScript ever accepts the PR about generic type inference this function can be removed.\n *\n * @param wiring - The wiring to create.\n * @returns Type-safe wiring.\n *\n * @public\n */\nexport function createWiring<T extends Partial<Wiring>>(wiring: T): T {\n  return wiring;\n}\n\n/**\n * Returns an object with the getters and state of a module of store defined by the moduleName\n * parameter.\n *\n * @param state - The Vuex store State.\n * @param getters - The Vuex store Getters.\n * @param moduleName - The {@link XModuleName} of the module.\n * @returns The {@link StoreModuleStateAndGetters} with the Getters and the State of the\n * {@link XStoreModule | Store Module} defined by moduleName.\n *\n * @public\n */\nexport function getStateAndGettersFromModule<ModuleName extends XModuleName>(\n  state: RootXStoreState,\n  getters: Dictionary,\n  moduleName: ModuleName\n): StoreModuleStateAndGetters<ModuleName> {\n  return {\n    state: state.x[moduleName] as unknown as ExtractState<ModuleName>,\n    getters: getGettersProxy(getters, moduleName)\n  };\n}\n"],"names":[],"mappings":";;AAMA;;;;;;;;AAQG;AACG,SAAU,YAAY,CAA4B,MAAS,EAAA;AAC/D,IAAA,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;;;;;;;;;AAWG;SACa,4BAA4B,CAC1C,KAAsB,EACtB,OAAmB,EACnB,UAAsB,EAAA;IAEtB,OAAO;AACL,QAAA,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,CAAwC;AACjE,QAAA,OAAO,EAAE,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;KAC9C,CAAC;AACJ;;;;"}
+{"version":3,"file":"wiring.utils.js","sources":["../../../src/wiring/wiring.utils.ts"],"sourcesContent":["import type { Dictionary } from '@empathyco/x-utils'\nimport type { RootXStoreState, StoreModuleStateAndGetters } from '../store/store.types'\nimport type { ExtractState, XModuleName } from '../x-modules/x-modules.types'\nimport type { Wiring } from './wiring.types'\nimport { getGettersProxy } from '../store/utils/getters-proxy.utils'\n\n/**\n * Util function to generate type-safe wiring.\n * If TypeScript ever accepts the PR about generic type inference this function can be removed.\n *\n * @param wiring - The wiring to create.\n * @returns Type-safe wiring.\n *\n * @public\n */\nexport function createWiring<T extends Partial<Wiring>>(wiring: T): T {\n  return wiring\n}\n\n/**\n * Returns an object with the getters and state of a module of store defined by the moduleName\n * parameter.\n *\n * @param state - The Vuex store State.\n * @param getters - The Vuex store Getters.\n * @param moduleName - The {@link XModuleName} of the module.\n * @returns The {@link StoreModuleStateAndGetters} with the Getters and the State of the\n * {@link XStoreModule | Store Module} defined by moduleName.\n *\n * @public\n */\nexport function getStateAndGettersFromModule<ModuleName extends XModuleName>(\n  state: RootXStoreState,\n  getters: Dictionary,\n  moduleName: ModuleName,\n): StoreModuleStateAndGetters<ModuleName> {\n  return {\n    state: state.x[moduleName] as unknown as ExtractState<ModuleName>,\n    getters: getGettersProxy(getters, moduleName),\n  }\n}\n"],"names":[],"mappings":";;AAMA;;;;;;;;AAQG;AACG,SAAU,YAAY,CAA4B,MAAS,EAAA;AAC/D,IAAA,OAAO,MAAM,CAAA;AACf,CAAC;AAED;;;;;;;;;;;AAWG;SACa,4BAA4B,CAC1C,KAAsB,EACtB,OAAmB,EACnB,UAAsB,EAAA;IAEtB,OAAO;AACL,QAAA,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,CAAwC;AACjE,QAAA,OAAO,EAAE,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;KAC9C,CAAA;AACH;;;;"}

package/js/x-installer/api/base-api.js

@@ -18,12 +18,12 @@ class BaseXAPI {
      * @param productId - The product id that was added to cart.
      */
     addProductToCart(productId) {
-        this.bus?.emit('UserClickedPDPAddToCart', productId);
+        void this.bus?.emit('UserClickedPDPAddToCart', productId);
     }
     /**
-     * Setter for the {@link @empathyco/x-bus#XBus}.
+     * Setter for the XBus.
      *
-     * @param bus - The {@link @empathyco/x-bus#XBus} received to emit events.
+     * @param bus - The XBus received to emit events.
      *
      * @internal
      */
@@ -77,9 +77,9 @@ class BaseXAPI {
      */
     search(query) {
         if (query) {
-            this.bus?.emit('UserAcceptedAQuery', query);
+            void this.bus?.emit('UserAcceptedAQuery', query);
         }
-        this.bus?.emit('UserClickedOpenX');
+        void this.bus?.emit('UserClickedOpenX');
     }
     /**
      * Initializes the Application passing the {@link SnippetConfig}.
@@ -96,7 +96,6 @@ class BaseXAPI {
             await this?.initCallback(config);
         }
         else {
-            //eslint-disable-next-line no-console
             console.warn('We know X is awesome, but you only need to initialize it once.');
         }
     }
@@ -106,7 +105,7 @@ class BaseXAPI {
      * @public
      */
     close() {
-        this.bus?.emit('UserClickedCloseX');
+        void this.bus?.emit('UserClickedCloseX');
     }
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"base-api.js","sources":["../../../../src/x-installer/api/base-api.ts"],"sourcesContent":["import { XBus } from '@empathyco/x-bus';\nimport { WireMetadata, XEventsTypes } from '../../wiring/index';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from './api.types';\n\n/**\n * Default implementation for {@link XAPI}.\n *\n * @public\n */\nexport class BaseXAPI implements XAPI {\n  /**\n   * Flag to check if the initialization was already done.\n   *\n   * @internal\n   */\n  protected isXInitialized = false;\n\n  /**\n   * Bus for emitting and listening events.\n   *\n   * @internal\n   */\n  protected bus!: XBus<XEventsTypes, WireMetadata>;\n\n  /**\n   * The callback to call from the init method. The logic of initialization is out of this API\n   * since this API is just a facade.\n   *\n   * @internal\n   */\n  protected initCallback!: (config: SnippetConfig) => any;\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  public getSnippetConfig!: () => SnippetConfig;\n\n  /**\n   * Callback that allows to update the snippet config. The logic of initialization is out of this\n   * API since this API is just a facade.\n   *\n   * @internal\n   */\n  protected snippetCallback!: (config: Partial<SnippetConfig>) => void;\n\n  /**\n   * Tracks that a product was added to cart from PDP.\n   *\n   * @param productId - The product id that was added to cart.\n   */\n  addProductToCart(productId?: string): void {\n    this.bus?.emit('UserClickedPDPAddToCart', productId);\n  }\n\n  /**\n   * Setter for the {@link @empathyco/x-bus#XBus}.\n   *\n   * @param bus - The {@link @empathyco/x-bus#XBus} received to emit events.\n   *\n   * @internal\n   */\n  setBus(bus: XBus<XEventsTypes, WireMetadata>): void {\n    this.bus = bus;\n  }\n\n  /**\n   * Setter for the callback to call in the init method.\n   *\n   * @param initCallback - The callback to call.\n   */\n  setInitCallback(initCallback: (config: SnippetConfig) => any): void {\n    this.initCallback = initCallback;\n  }\n\n  /**\n   * Setter for the callback to modify the snippet config.\n   *\n   * @param snippetCallback - The callback to call.\n   *\n   * @internal\n   */\n  setSnippetConfigCallback(snippetCallback: (config: Partial<SnippetConfig>) => void): void {\n    this.snippetCallback = snippetCallback;\n  }\n\n  /**\n   * Sets or updates the snippet config getter.\n   *\n   * @param snippetConfigGetter - A function that returns the snippet config.\n   *\n   * @internal\n   */\n  setSnippetConfigGetter(snippetConfigGetter: () => NormalisedSnippetConfig): void {\n    this.getSnippetConfig = snippetConfigGetter;\n  }\n\n  /**\n   * Sets or updates the snippet config.\n   *\n   * @param config - A part or all the snippet config.\n   *\n   * @public\n   */\n  setSnippetConfig(config: Partial<SnippetConfig>): void {\n    this?.snippetCallback(config);\n  }\n\n  /**\n   * Searches the query parameter as user query.\n   *\n   * @param query - Query to be searched.\n   *\n   * @public\n   */\n  search(query?: string): void {\n    if (query) {\n      this.bus?.emit('UserAcceptedAQuery', query);\n    }\n    this.bus?.emit('UserClickedOpenX');\n  }\n\n  /**\n   * Initializes the Application passing the {@link SnippetConfig}.\n   *\n   * @param config - The config coming from the customer snippet.\n   *\n   * @returns A promise that will be resolved once x components are initialized.\n   *\n   * @public\n   */\n  async init(config: SnippetConfig): Promise<void> {\n    if (!this.isXInitialized) {\n      this.isXInitialized = true;\n      await this?.initCallback(config);\n    } else {\n      //eslint-disable-next-line no-console\n      console.warn('We know X is awesome, but you only need to initialize it once.');\n    }\n  }\n\n  /**\n   * Closes the Application.\n   *\n   * @public\n   */\n  close(): void {\n    this.bus?.emit('UserClickedCloseX');\n  }\n}\n"],"names":[],"mappings":"AAIA;;;;AAIG;MACU,QAAQ,CAAA;AAArB,IAAA,WAAA,GAAA;AACE;;;;AAIG;QACO,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;KAyIlC;AAvGC;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,SAAkB,EAAA;QACjC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;KACtD;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,GAAqC,EAAA;AAC1C,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;KAChB;AAED;;;;AAIG;AACH,IAAA,eAAe,CAAC,YAA4C,EAAA;AAC1D,QAAA,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;KAClC;AAED;;;;;;AAMG;AACH,IAAA,wBAAwB,CAAC,eAAyD,EAAA;AAChF,QAAA,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;KACxC;AAED;;;;;;AAMG;AACH,IAAA,sBAAsB,CAAC,mBAAkD,EAAA;AACvE,QAAA,IAAI,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;KAC7C;AAED;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,MAA8B,EAAA;AAC7C,QAAA,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;KAC/B;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,KAAc,EAAA;AACnB,QAAA,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;AAC7C,SAAA;AACD,QAAA,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACpC;AAED;;;;;;;;AAQG;IACH,MAAM,IAAI,CAAC,MAAqB,EAAA;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACxB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;AAC3B,YAAA,MAAM,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;AAClC,SAAA;AAAM,aAAA;;AAEL,YAAA,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;AAChF,SAAA;KACF;AAED;;;;AAIG;IACH,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACrC;AACF;;;;"}
+{"version":3,"file":"base-api.js","sources":["../../../../src/x-installer/api/base-api.ts"],"sourcesContent":["import type { XBus } from '@empathyco/x-bus'\nimport type { WireMetadata, XEventsTypes } from '../../wiring/index'\nimport type { NormalisedSnippetConfig, SnippetConfig, XAPI } from './api.types'\n\n/**\n * Default implementation for {@link XAPI}.\n *\n * @public\n */\nexport class BaseXAPI implements XAPI {\n  /**\n   * Flag to check if the initialization was already done.\n   *\n   * @internal\n   */\n  protected isXInitialized = false\n\n  /**\n   * Bus for emitting and listening events.\n   *\n   * @internal\n   */\n  protected bus!: XBus<XEventsTypes, WireMetadata>\n\n  /**\n   * The callback to call from the init method. The logic of initialization is out of this API\n   * since this API is just a facade.\n   *\n   * @internal\n   */\n  protected initCallback!: (config: SnippetConfig) => any\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  public getSnippetConfig!: () => SnippetConfig\n\n  /**\n   * Callback that allows to update the snippet config. The logic of initialization is out of this\n   * API since this API is just a facade.\n   *\n   * @internal\n   */\n  protected snippetCallback!: (config: Partial<SnippetConfig>) => void\n\n  /**\n   * Tracks that a product was added to cart from PDP.\n   *\n   * @param productId - The product id that was added to cart.\n   */\n  addProductToCart(productId?: string): void {\n    void this.bus?.emit('UserClickedPDPAddToCart', productId)\n  }\n\n  /**\n   * Setter for the XBus.\n   *\n   * @param bus - The XBus received to emit events.\n   *\n   * @internal\n   */\n  setBus(bus: XBus<XEventsTypes, WireMetadata>): void {\n    this.bus = bus\n  }\n\n  /**\n   * Setter for the callback to call in the init method.\n   *\n   * @param initCallback - The callback to call.\n   */\n  setInitCallback(initCallback: (config: SnippetConfig) => any): void {\n    this.initCallback = initCallback\n  }\n\n  /**\n   * Setter for the callback to modify the snippet config.\n   *\n   * @param snippetCallback - The callback to call.\n   *\n   * @internal\n   */\n  setSnippetConfigCallback(snippetCallback: (config: Partial<SnippetConfig>) => void): void {\n    this.snippetCallback = snippetCallback\n  }\n\n  /**\n   * Sets or updates the snippet config getter.\n   *\n   * @param snippetConfigGetter - A function that returns the snippet config.\n   *\n   * @internal\n   */\n  setSnippetConfigGetter(snippetConfigGetter: () => NormalisedSnippetConfig): void {\n    this.getSnippetConfig = snippetConfigGetter\n  }\n\n  /**\n   * Sets or updates the snippet config.\n   *\n   * @param config - A part or all the snippet config.\n   *\n   * @public\n   */\n  setSnippetConfig(config: Partial<SnippetConfig>): void {\n    this?.snippetCallback(config)\n  }\n\n  /**\n   * Searches the query parameter as user query.\n   *\n   * @param query - Query to be searched.\n   *\n   * @public\n   */\n  search(query?: string): void {\n    if (query) {\n      void this.bus?.emit('UserAcceptedAQuery', query)\n    }\n    void this.bus?.emit('UserClickedOpenX')\n  }\n\n  /**\n   * Initializes the Application passing the {@link SnippetConfig}.\n   *\n   * @param config - The config coming from the customer snippet.\n   *\n   * @returns A promise that will be resolved once x components are initialized.\n   *\n   * @public\n   */\n  async init(config: SnippetConfig): Promise<void> {\n    if (!this.isXInitialized) {\n      this.isXInitialized = true\n      await this?.initCallback(config)\n    } else {\n      console.warn('We know X is awesome, but you only need to initialize it once.')\n    }\n  }\n\n  /**\n   * Closes the Application.\n   *\n   * @public\n   */\n  close(): void {\n    void this.bus?.emit('UserClickedCloseX')\n  }\n}\n"],"names":[],"mappings":"AAIA;;;;AAIG;MACU,QAAQ,CAAA;AAArB,IAAA,WAAA,GAAA;AACE;;;;AAIG;QACO,IAAc,CAAA,cAAA,GAAG,KAAK,CAAA;KAwIjC;AAtGC;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,SAAkB,EAAA;QACjC,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAA;KAC1D;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,GAAqC,EAAA;AAC1C,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;KACf;AAED;;;;AAIG;AACH,IAAA,eAAe,CAAC,YAA4C,EAAA;AAC1D,QAAA,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;KACjC;AAED;;;;;;AAMG;AACH,IAAA,wBAAwB,CAAC,eAAyD,EAAA;AAChF,QAAA,IAAI,CAAC,eAAe,GAAG,eAAe,CAAA;KACvC;AAED;;;;;;AAMG;AACH,IAAA,sBAAsB,CAAC,mBAAkD,EAAA;AACvE,QAAA,IAAI,CAAC,gBAAgB,GAAG,mBAAmB,CAAA;KAC5C;AAED;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,MAA8B,EAAA;AAC7C,QAAA,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;KAC9B;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,KAAc,EAAA;AACnB,QAAA,IAAI,KAAK,EAAE;YACT,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAA;AACjD,SAAA;QACD,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAA;KACxC;AAED;;;;;;;;AAQG;IACH,MAAM,IAAI,CAAC,MAAqB,EAAA;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACxB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;AAC1B,YAAA,MAAM,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;AACjC,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAA;AAC/E,SAAA;KACF;AAED;;;;AAIG;IACH,KAAK,GAAA;QACH,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAA;KACzC;AACF;;;;"}

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

@@ -1,8 +1,8 @@
 import { isFunction, forEach } from '@empathyco/x-utils';
 import { reactive, createApp } from 'vue';
+import { bus } from '../../plugins/x-bus.js';
 import { XPlugin } from '../../plugins/x-plugin.js';
 import { BaseXAPI } from '../api/base-api.js';
-import { bus } from '../../plugins/x-bus.js';
 
 /**
  * The purpose of this class is to offer a quick way to initialize the XComponents in a setup
@@ -103,6 +103,7 @@ class XInstaller {
         const { api } = this.options;
         if (api !== false) {
             this.api = api ?? new BaseXAPI();
+            // eslint-disable-next-line ts/no-misused-promises
             this.api.setInitCallback(this.init.bind(this));
             this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));
             this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this));
@@ -138,7 +139,7 @@ class XInstaller {
                 api: this.api,
                 app: this.app,
                 bus,
-                plugin
+                plugin,
             };
         }
         return Promise.resolve();
@@ -157,7 +158,7 @@ class XInstaller {
             store,
             xModules,
             initialXModules,
-            __PRIVATE__xModules
+            __PRIVATE__xModules,
         };
     }
     /**
@@ -179,7 +180,7 @@ class XInstaller {
      *
      * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method
      * of the plugin.
-     * @param bus - The {@link @empathyco/x-bus#XBus} to be used to create the XPlugin.
+     * @param bus - The XBus to be used to create the XPlugin.
      *
      * @returns Plugin<XPluginOption> - The plugin instance.
      * @internal
@@ -197,7 +198,7 @@ class XInstaller {
      * @returns An empty promise.
      * @internal
      */
-    installExtraPlugins(bus) {
+    async installExtraPlugins(bus) {
         return Promise.resolve(this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig, bus }));
     }
     /**
@@ -247,7 +248,7 @@ class XInstaller {
         if (typeof domElement === 'string') {
             const target = document.querySelector(domElement);
             if (!target) {
-                throw Error(`XComponents app couldn't be mounted: Element "${domElement}" couldn't be found`);
+                throw new Error(`XComponents app couldn't be mounted: Element "${domElement}" couldn't be found`);
             }
             return target;
         }

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, isFunction } from '@empathyco/x-utils';\nimport { App, createApp, reactive, Plugin } from 'vue';\nimport { XBus } from '@empathyco/x-bus';\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 { WireMetadata, XEventsTypes } from '../../wiring/index';\nimport { bus } from '../../plugins/x-bus';\nimport { InitWrapper, InstallXOptions } 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 app!: App;\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      this.api.setSnippetConfigGetter(this.getSnippetConfig.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 @empathyco/x-bus#XBus}, the {@link XPlugin}\n   * and the Vue application instance. 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 = reactive(this.normaliseSnippetConfig(snippetConfig));\n      this.createApp();\n      const bus = this.createBus();\n      const pluginOptions = this.getPluginOptions();\n      const plugin = this.installPlugin(pluginOptions, bus);\n      await this.installExtraPlugins(bus);\n      this.api?.setBus(bus);\n      this.app.mount(this.getMountingTarget(this.options.domElement));\n\n      return {\n        api: this.api,\n        app: this.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 @empathyco/x-bus#XPriorityBus | bus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus<XEventsTypes, WireMetadata> {\n    return this.options.bus ?? bus;\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 @empathyco/x-bus#XBus} to be used to create the XPlugin.\n   *\n   * @returns Plugin<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(\n    pluginOptions: XPluginOptions,\n    bus: XBus<XEventsTypes, WireMetadata>\n  ): Plugin<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus);\n    this.app.use(plugin, pluginOptions);\n    return plugin;\n  }\n\n  /**\n   * Runs the installExtraPlugins callback defined in the {@link InstallXOptions}\n   * to allow the user to install more plugins to the App.\n   *\n   * @param bus - The events bus used in the application.\n   * @returns An empty promise.\n   * @internal\n   */\n  protected installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {\n    return Promise.resolve(\n      this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus })\n    );\n  }\n\n  /**\n   * In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},\n   * then a new Vue application is created using that component as root.\n   *\n   * @internal\n   */\n  protected createApp(): void {\n    if (this.options.rootComponent !== undefined) {\n      this.app = createApp(this.options.rootComponent);\n      this.app.provide('snippetConfig', this.snippetConfig);\n      this.options.onCreateApp?.(this.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, ShadowRoot, string or function\n   * used to mount the Vue Application.\n   *\n   * @returns The Element or ShadowRoot to use as mounting target for the Vue Application.\n   * @internal\n   */\n  protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element | ShadowRoot {\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.snippetConfig![name] = value;\n    });\n  }\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  protected getSnippetConfig(): NormalisedSnippetConfig {\n    return this.snippetConfig!;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAkBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEG;MACU,UAAU,CAAA;AAWrB;;;;;;;;;;;AAWG;AACH,IAAA,WAAA,CAAsC,OAAwB,EAAA;QAAxB,IAAO,CAAA,OAAA,GAAP,OAAO,CAAiB;QAC5D,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;AAED;;;;;;AAMG;IACO,SAAS,GAAA;AACjB,QAAA,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,GAAG,KAAK,KAAK,EAAE;YACjB,IAAI,CAAC,GAAG,GAAG,GAAG,IAAI,IAAI,QAAQ,EAAE,CAAC;AACjC,YAAA,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/C,YAAA,IAAI,CAAC,GAAG,CAAC,wBAAwB,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACvE,YAAA,IAAI,CAAC,GAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAClE,YAAA,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC;AAC9B,SAAA;KACF;AAED;;;;;;AAMG;IACK,qBAAqB,GAAA;AAC3B,QAAA,IAAI,OAAO,MAAM,CAAC,KAAK,KAAK,UAAU,EAAE;AACtC,YAAA,OAAO,MAAM,CAAC,KAAK,EAAE,CAAC;AACvB,SAAA;AAAM,aAAA,IAAI,OAAO,MAAM,CAAC,KAAK,KAAK,QAAQ,EAAE;YAC3C,OAAO,MAAM,CAAC,KAAK,CAAC;AACrB,SAAA;KACF;IAgBD,MAAM,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,EAAE,EAAA;AACrD,QAAA,IAAI,aAAa,EAAE;AACjB,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC;YAC1E,IAAI,CAAC,SAAS,EAAE,CAAC;AACjB,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;AAC7B,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC;AACtD,YAAA,MAAM,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;AACpC,YAAA,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;AACtB,YAAA,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;YAEhE,OAAO;gBACL,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,GAAG;gBACH,MAAM;aACP,CAAC;AACH,SAAA;AAED,QAAA,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;KAC1B;AAED;;;;;;AAMG;IACO,gBAAgB,GAAA;AACxB,QAAA,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;QACxF,OAAO;YACL,OAAO;YACP,KAAK;YACL,QAAQ;YACR,eAAe;YACf,mBAAmB;SACpB,CAAC;KACH;AAED;;;;;;;;AAQG;IACO,SAAS,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC;KAChC;AAED;;;;;;;;;;;AAWG;IACO,aAAa,CACrB,aAA6B,EAC7B,GAAqC,EAAA;AAErC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI,OAAO,CAAC,GAAG,CAAC,CAAC;QACvD,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AACpC,QAAA,OAAO,MAAM,CAAC;KACf;AAED;;;;;;;AAOG;AACO,IAAA,mBAAmB,CAAC,GAAqC,EAAA;AACjE,QAAA,OAAO,OAAO,CAAC,OAAO,CACpB,IAAI,CAAC,OAAO,CAAC,mBAAmB,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,aAAc,EAAE,GAAG,EAAE,CAAC,CACzF,CAAC;KACH;AAED;;;;;AAKG;IACO,SAAS,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,KAAK,SAAS,EAAE;YAC5C,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YACjD,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,eAAe,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YACtD,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;AACtC,SAAA;KACF;AAID;;;;;;;AAOG;AACO,IAAA,sBAAsB,CAC9B,aAAqD,EAAA;QAErD,IAAI,aAAa,CAAC,IAAI,EAAE;YACtB,aAAa,CAAC,MAAM,KAApB,aAAa,CAAC,MAAM,GAAK,aAAa,CAAC,IAAI,CAAC,CAAA;AAC7C,SAAA;AACD,QAAA,OAAO,aAAa,CAAC;KACtB;AAED;;;;;;;;;;;;AAYG;AACO,IAAA,iBAAiB,CAAC,UAA0C,EAAA;AACpE,QAAA,IAAI,UAAU,CAAC,UAAU,CAAC,EAAE;AAC1B,YAAA,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,aAAc,CAAC,CAAC;AAC9C,SAAA;AACD,QAAA,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;YAClC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAClD,IAAI,CAAC,MAAM,EAAE;AACX,gBAAA,MAAM,KAAK,CACT,CAAA,8CAAA,EAAiD,UAAU,CAAA,mBAAA,CAAqB,CACjF,CAAC;AACH,aAAA;AACD,YAAA,OAAO,MAAM,CAAC;AACf,SAAA;AACD,QAAA,OAAO,UAAU,IAAI,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;KAC/E;AAED;;;;;;AAMG;AACO,IAAA,mBAAmB,CAAC,gBAAwC,EAAA;AACpE,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO;AACR,SAAA;AACD,QAAA,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAI;AACrE,YAAA,IAAI,CAAC,aAAc,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;AACpC,SAAC,CAAC,CAAC;KACJ;AAED;;;;;;AAMG;IACO,gBAAgB,GAAA;QACxB,OAAO,IAAI,CAAC,aAAc,CAAC;KAC5B;AACF;;;;"}
+{"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import type { XBus } from '@empathyco/x-bus'\nimport type { App, Plugin } from 'vue'\nimport type { XPluginOptions } from '../../plugins/x-plugin.types'\nimport type { WireMetadata, XEventsTypes } from '../../wiring/index'\nimport type { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types'\nimport type { InitWrapper, InstallXOptions } from './types'\nimport { forEach, isFunction } from '@empathyco/x-utils'\nimport { createApp, reactive } from 'vue'\nimport { bus } from '../../plugins/x-bus'\nimport { XPlugin } from '../../plugins/x-plugin'\nimport { BaseXAPI } from '../api/base-api'\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 app!: App\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      // eslint-disable-next-line ts/no-misused-promises\n      this.api.setInitCallback(this.init.bind(this))\n      this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this))\n      this.api.setSnippetConfigGetter(this.getSnippetConfig.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 XBus, the {@link XPlugin}\n   * and the Vue application instance. 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 = reactive(this.normaliseSnippetConfig(snippetConfig))\n      this.createApp()\n      const bus = this.createBus()\n      const pluginOptions = this.getPluginOptions()\n      const plugin = this.installPlugin(pluginOptions, bus)\n      await this.installExtraPlugins(bus)\n      this.api?.setBus(bus)\n      this.app.mount(this.getMountingTarget(this.options.domElement))\n\n      return {\n        api: this.api,\n        app: this.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 @empathyco/x-bus#XPriorityBus | bus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus<XEventsTypes, WireMetadata> {\n    return this.options.bus ?? bus\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 XBus to be used to create the XPlugin.\n   *\n   * @returns Plugin<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(\n    pluginOptions: XPluginOptions,\n    bus: XBus<XEventsTypes, WireMetadata>,\n  ): Plugin<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus)\n    this.app.use(plugin, pluginOptions)\n    return plugin\n  }\n\n  /**\n   * Runs the installExtraPlugins callback defined in the {@link InstallXOptions}\n   * to allow the user to install more plugins to the App.\n   *\n   * @param bus - The events bus used in the application.\n   * @returns An empty promise.\n   * @internal\n   */\n  protected async installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {\n    return Promise.resolve(\n      this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus }),\n    )\n  }\n\n  /**\n   * In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},\n   * then a new Vue application is created using that component as root.\n   *\n   * @internal\n   */\n  protected createApp(): void {\n    if (this.options.rootComponent !== undefined) {\n      this.app = createApp(this.options.rootComponent)\n      this.app.provide('snippetConfig', this.snippetConfig)\n      this.options.onCreateApp?.(this.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, ShadowRoot, string or function\n   * used to mount the Vue Application.\n   *\n   * @returns The Element or ShadowRoot to use as mounting target for the Vue Application.\n   * @internal\n   */\n  protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element | ShadowRoot {\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 new 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.snippetConfig![name] = value\n    })\n  }\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  protected getSnippetConfig(): NormalisedSnippetConfig {\n    return this.snippetConfig!\n  }\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/device/components/device-detector.vue.js

@@ -6,8 +6,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_GlobalEvents = resolveComponent("GlobalEvents");
   return !_ctx.force ? (openBlock(), createBlock(_component_GlobalEvents, {
     key: 0,
-    onResize: _ctx.throttledStoreWindowWidth,
-    target: "window"
+    target: "window",
+    onResize: _ctx.throttledStoreWindowWidth
   }, null, 8, ["onResize"])) : createCommentVNode("v-if", true);
 }
 var deviceDetector = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/js/x-modules/device/components/device-detector.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onMounted, PropType, Ref, ref, watch } from 'vue';\n  import { GlobalEvents } from 'vue-global-events';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps to detect or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'DeviceDetector',\n    xModule: deviceXModule.name,\n    components: { GlobalEvents },\n    props: {\n      /**\n       * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n       * the max width in pixels for that device.\n       *\n       * @public\n       */\n      breakpoints: {\n        type: Object as PropType<Record<Device, MaxWidth>>,\n        default: () => ({})\n      },\n      /**\n       * Forces a device, ignoring the breakpoints prop.\n       *\n       * @public\n       */\n      force: String as PropType<Device>,\n\n      /**\n       * Time in milliseconds to throttle the resize events used to detect the device.\n       *\n       * @public\n       */\n      throttleMs: {\n        type: Number,\n        default: 100\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * The width in pixels of the window where the app is being rendered.\n       *\n       * @internal\n       */\n      const windowWidthPx: Ref<number | null> = ref(null);\n\n      /**\n       * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n       *\n       * @internal\n       */\n      const storeWindowWidth = (): void => {\n        windowWidthPx.value = window.innerWidth;\n      };\n\n      /**\n       * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n       *\n       * @internal\n       */\n      let throttledStoreWindowWidth = storeWindowWidth;\n\n      /**\n       * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n       * max width.\n       *\n       * @returns A list of the breakpoints sorted by its max width in ascending order.\n       *\n       * @internal\n       */\n      const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n        Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth)\n      );\n\n      /**\n       * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @internal\n       */\n      const detectedDevice = computed((): string | null => {\n        if (props.force) {\n          return props.force;\n        } else if (windowWidthPx.value === null) {\n          return null;\n        } else {\n          return (\n            sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n          );\n        }\n      });\n\n      watch(\n        detectedDevice,\n        device => {\n          xBus.emit('DeviceProvided', device);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n       * {@link DeviceDetector.throttleMs}.\n       *\n       * @param throttleMs - The new duration in milliseconds for the throttle.\n       *\n       * @internal\n       */\n      watch(\n        () => props.throttleMs,\n        throttleMs => {\n          throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Initialises the store window width.\n       *\n       * @remarks This is done this way to ensure SSR compatibility.\n       *\n       * @internal\n       */\n      onMounted(() => {\n        storeWindowWidth();\n      });\n\n      return {\n        throttledStoreWindowWidth\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        device: 'unknown',\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    },\n    methods: {\n      storeDevice(device) {\n        this.device = device;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_createCommentVNode"],"mappings":";;;;;AAC4B,EAAA,MAAA,uBAAA,GAAAA,gBAAA,CAAA,cAAA,CAAA,CAAA;AAD5B,EAAA,OAAA,CAAA,IAAA,CAAA,KAAA,IAAAC,SAAA,EACgE,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IAAE,GAAA,EAAA,CAAA;AAAA,IAAA,QAAA,EAAA,IAAA,CAAA,yBAAA;AADlE,IAAA,MAAA,EAAA,QAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" target=\"window\" @resize=\"throttledStoreWindowWidth\" />\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, Ref } from 'vue'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport { GlobalEvents } from 'vue-global-events'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { throttle } from '../../../utils/throttle'\nimport { deviceXModule } from '../x-module'\n\n/** Alias just to improve code readiness. */\ntype Device = string\n/** Alias just to improve code readiness. */\ntype MaxWidth = number\n\n/**\n * This component helps to detect or setting a device, that can be used later to create\n * different layouts optimized for different devices. This detected device is available under\n * the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'DeviceDetector',\n  xModule: deviceXModule.name,\n  components: { GlobalEvents },\n  props: {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    breakpoints: {\n      type: Object as PropType<Record<Device, MaxWidth>>,\n      default: () => ({}),\n    },\n    /**\n     * Forces a device, ignoring the breakpoints prop.\n     *\n     * @public\n     */\n    force: String as PropType<Device>,\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    throttleMs: {\n      type: Number,\n      default: 100,\n    },\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    const windowWidthPx: Ref<number | null> = ref(null)\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    const storeWindowWidth = (): void => {\n      windowWidthPx.value = window.innerWidth\n    }\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    let throttledStoreWindowWidth = storeWindowWidth\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n      Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth),\n    )\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    const detectedDevice = computed((): string | null => {\n      if (props.force) {\n        return props.force\n      } else if (windowWidthPx.value === null) {\n        return null\n      } else {\n        return (\n          sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n        )\n      }\n    })\n\n    watch(\n      detectedDevice,\n      device => {\n        xBus.emit('DeviceProvided', device)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    watch(\n      () => props.throttleMs,\n      throttleMs => {\n        throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    onMounted(() => {\n      storeWindowWidth()\n    })\n\n    return {\n      throttledStoreWindowWidth,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      device: 'unknown',\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n  methods: {\n    storeDevice(device) {\n      this.device = device\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_createCommentVNode"],"mappings":";;;;;AAC4B,EAAA,MAAA,uBAAA,GAAAA,gBAAA,CAAA,cAAA,CAAA,CAAA;AAD5B,EAAA,OAAA,CAAA,IAAA,CAAA,KAAA,IAAAC,SAAA,EAC6C,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IAAE,GAAA,EAAA,CAAA;AAAA,IAAA,MAAA,EAAA,QAAA;AAD/C,IAAA,QAAA,EAAA,IAAA,CAAA,yBAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/device/components/device-detector.vue2.js

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed, watch, onMounted } from 'vue';
 import { GlobalEvents } from 'vue-global-events';
+import { useXBus } from '../../../composables/use-x-bus.js';
 import { throttle } from '../../../utils/throttle.js';
 import { deviceXModule } from '../x-module.js';
-import { useXBus } from '../../../composables/use-x-bus.js';
 
 /**
  * This component helps to detect or setting a device, that can be used later to create
@@ -24,7 +24,7 @@ var _sfc_main = defineComponent({
          */
         breakpoints: {
             type: Object,
-            default: () => ({})
+            default: () => ({}),
         },
         /**
          * Forces a device, ignoring the breakpoints prop.
@@ -39,8 +39,8 @@ var _sfc_main = defineComponent({
          */
         throttleMs: {
             type: Number,
-            default: 100
-        }
+            default: 100,
+        },
     },
     setup(props) {
         const xBus = useXBus();
@@ -118,9 +118,9 @@ var _sfc_main = defineComponent({
             storeWindowWidth();
         });
         return {
-            throttledStoreWindowWidth
+            throttledStoreWindowWidth,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/device/components/device-detector.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-detector.vue2.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onMounted, PropType, Ref, ref, watch } from 'vue';\n  import { GlobalEvents } from 'vue-global-events';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps to detect or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'DeviceDetector',\n    xModule: deviceXModule.name,\n    components: { GlobalEvents },\n    props: {\n      /**\n       * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n       * the max width in pixels for that device.\n       *\n       * @public\n       */\n      breakpoints: {\n        type: Object as PropType<Record<Device, MaxWidth>>,\n        default: () => ({})\n      },\n      /**\n       * Forces a device, ignoring the breakpoints prop.\n       *\n       * @public\n       */\n      force: String as PropType<Device>,\n\n      /**\n       * Time in milliseconds to throttle the resize events used to detect the device.\n       *\n       * @public\n       */\n      throttleMs: {\n        type: Number,\n        default: 100\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * The width in pixels of the window where the app is being rendered.\n       *\n       * @internal\n       */\n      const windowWidthPx: Ref<number | null> = ref(null);\n\n      /**\n       * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n       *\n       * @internal\n       */\n      const storeWindowWidth = (): void => {\n        windowWidthPx.value = window.innerWidth;\n      };\n\n      /**\n       * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n       *\n       * @internal\n       */\n      let throttledStoreWindowWidth = storeWindowWidth;\n\n      /**\n       * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n       * max width.\n       *\n       * @returns A list of the breakpoints sorted by its max width in ascending order.\n       *\n       * @internal\n       */\n      const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n        Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth)\n      );\n\n      /**\n       * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @internal\n       */\n      const detectedDevice = computed((): string | null => {\n        if (props.force) {\n          return props.force;\n        } else if (windowWidthPx.value === null) {\n          return null;\n        } else {\n          return (\n            sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n          );\n        }\n      });\n\n      watch(\n        detectedDevice,\n        device => {\n          xBus.emit('DeviceProvided', device);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n       * {@link DeviceDetector.throttleMs}.\n       *\n       * @param throttleMs - The new duration in milliseconds for the throttle.\n       *\n       * @internal\n       */\n      watch(\n        () => props.throttleMs,\n        throttleMs => {\n          throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Initialises the store window width.\n       *\n       * @remarks This is done this way to ensure SSR compatibility.\n       *\n       * @internal\n       */\n      onMounted(() => {\n        storeWindowWidth();\n      });\n\n      return {\n        throttledStoreWindowWidth\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        device: 'unknown',\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    },\n    methods: {\n      storeDevice(device) {\n        this.device = device;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAgBE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;AACL;;;;;AAKE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,MAA4C;AAClD,YAAA,OAAO,EAAE,OAAO,EAAE,CAAA;AACnB,SAAA;AACD;;;;AAIE;AACF,QAAA,KAAK,EAAE,MAA0B;AAEjC;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAE;AACb,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;;AAIE;AACF,QAAA,MAAM,aAAa,GAAuB,GAAG,CAAC,IAAI,CAAC,CAAA;AAEnD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAY;AACnC,YAAA,aAAa,CAAC,KAAM,GAAE,MAAM,CAAC,UAAU,CAAA;AACzC,SAAC,CAAA;AAED;;;;AAIE;QACF,IAAI,yBAAwB,GAAI,gBAAgB,CAAA;AAEhD;;;;;;;AAOE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAK,GAAI,MAAM,CAAA,CACnF,CAAA;AAED;;;;;;;;AAQE;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAqB;YACnD,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,KAAK,CAAC,KAAK,CAAA;AACpB,aAAA;AAAO,iBAAA,IAAI,aAAa,CAAC,KAAM,KAAI,IAAI,EAAE;AACvC,gBAAA,OAAO,IAAI,CAAA;AACX,aAAA;AAAK,iBAAA;AACL,gBAAA,QACE,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,aAAa,CAAC,KAAK,IAAK,KAAK,CAAC,GAAG,CAAC,CAAA,IAAK,IAAG,EACvF;AACH,aAAA;AACF,SAAC,CAAC,CAAA;AAEF,QAAA,KAAK,CACH,cAAc,EACd,MAAK,IAAK;AACR,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAA;AACrC,SAAC,EACD,EAAE,SAAS,EAAE,IAAK,EAAA,CACnB,CAAA;AAED;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,KAAK,CAAC,UAAU,EACtB,UAAW,IAAG;AACZ,YAAA,yBAAwB,GAAI,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;AACpE,SAAC,EACD,EAAE,SAAS,EAAE,IAAK,EAAA,CACnB,CAAA;AAED;;;;;;AAME;QACF,SAAS,CAAC,MAAM;AACd,YAAA,gBAAgB,EAAE,CAAA;AACpB,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,yBAAwB;SACzB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"device-detector.vue2.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" target=\"window\" @resize=\"throttledStoreWindowWidth\" />\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, Ref } from 'vue'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport { GlobalEvents } from 'vue-global-events'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { throttle } from '../../../utils/throttle'\nimport { deviceXModule } from '../x-module'\n\n/** Alias just to improve code readiness. */\ntype Device = string\n/** Alias just to improve code readiness. */\ntype MaxWidth = number\n\n/**\n * This component helps to detect or setting a device, that can be used later to create\n * different layouts optimized for different devices. This detected device is available under\n * the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'DeviceDetector',\n  xModule: deviceXModule.name,\n  components: { GlobalEvents },\n  props: {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    breakpoints: {\n      type: Object as PropType<Record<Device, MaxWidth>>,\n      default: () => ({}),\n    },\n    /**\n     * Forces a device, ignoring the breakpoints prop.\n     *\n     * @public\n     */\n    force: String as PropType<Device>,\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    throttleMs: {\n      type: Number,\n      default: 100,\n    },\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    const windowWidthPx: Ref<number | null> = ref(null)\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    const storeWindowWidth = (): void => {\n      windowWidthPx.value = window.innerWidth\n    }\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    let throttledStoreWindowWidth = storeWindowWidth\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n      Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth),\n    )\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    const detectedDevice = computed((): string | null => {\n      if (props.force) {\n        return props.force\n      } else if (windowWidthPx.value === null) {\n        return null\n      } else {\n        return (\n          sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n        )\n      }\n    })\n\n    watch(\n      detectedDevice,\n      device => {\n        xBus.emit('DeviceProvided', device)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    watch(\n      () => props.throttleMs,\n      throttleMs => {\n        throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    onMounted(() => {\n      storeWindowWidth()\n    })\n\n    return {\n      throttledStoreWindowWidth,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      device: 'unknown',\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n  methods: {\n    storeDevice(device) {\n      this.device = device\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAiBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;AACL;;;;;AAKE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,MAA4C;AAClD,YAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACpB,SAAA;AACD;;;;AAIE;AACF,QAAA,KAAK,EAAE,MAA0B;AAEjC;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;AAErB;;;;AAIE;AACF,QAAA,MAAM,aAAa,GAAuB,GAAG,CAAC,IAAI,CAAA,CAAA;AAElD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAY;AACnC,YAAA,aAAa,CAAC,KAAM,GAAE,MAAM,CAAC,UAAS,CAAA;AACxC,SAAA,CAAA;AAEA;;;;AAIE;QACF,IAAI,4BAA4B,gBAAe,CAAA;AAE/C;;;;;;;AAOE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAO,GAAE,MAAM,CAAC,CACrF,CAAA;AAEA;;;;;;;;AAQE;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAqB;YACnD,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,KAAK,CAAC,KAAI,CAAA;AACnB,aAAA;AAAO,iBAAA,IAAI,aAAa,CAAC,KAAM,KAAI,IAAI,EAAE;AACvC,gBAAA,OAAO,IAAG,CAAA;AACV,aAAA;AAAK,iBAAA;AACL,gBAAA,QACE,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,aAAa,CAAC,KAAK,IAAK,KAAK,CAAC,GAAG,CAAC,CAAA,IAAK,IAAG,EACxF;AACF,aAAA;AACF,SAAC,CAAA,CAAA;AAED,QAAA,KAAK,CACH,cAAc,EACd,MAAK,IAAK;AACR,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAA,CAAA;AACpC,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;AAEA;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,KAAK,CAAC,UAAU,EACtB,UAAW,IAAG;AACZ,YAAA,yBAAwB,GAAI,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAA,CAAA;AACnE,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;AAEA;;;;;;AAME;QACF,SAAS,CAAC,MAAM;AACd,YAAA,gBAAgB,EAAC,CAAA;AACnB,SAAC,CAAA,CAAA;QAED,OAAO;YACL,yBAAyB;SAC3B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/device/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/device/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { deviceXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the device module.\n *\n * @internal\n */\nexport const deviceEmitters = createStoreEmitters(deviceXStoreModule, {});\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/device/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store'\nimport { deviceXStoreModule } from './module'\n\n/**\n * {@link StoreEmitters} For the device module.\n *\n * @internal\n */\nexport const deviceEmitters = createStoreEmitters(deviceXStoreModule, {})\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}

package/js/x-modules/device/store/module.js

@@ -5,15 +5,15 @@
  */
 const deviceXStoreModule = {
     state: () => ({
-        name: null
+        name: null,
     }),
     getters: {},
     mutations: {
         setName(state, name) {
             state.name = name;
-        }
+        },
     },
-    actions: {}
+    actions: {},
 };
 
 export { deviceXStoreModule };

package/js/x-modules/device/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/device/store/module.ts"],"sourcesContent":["import { DeviceXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the device module.\n *\n * @internal\n */\nexport const deviceXStoreModule: DeviceXStoreModule = {\n  state: () => ({\n    name: null\n  }),\n  getters: {},\n  mutations: {\n    setName(state, name) {\n      state.name = name;\n    }\n  },\n  actions: {}\n};\n"],"names":[],"mappings":"AAEA;;;;AAIG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,IAAI,EAAE,IAAI;KACX,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,OAAO,CAAC,KAAK,EAAE,IAAI,EAAA;AACjB,YAAA,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;SACnB;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/device/store/module.ts"],"sourcesContent":["import type { DeviceXStoreModule } from './types'\n\n/**\n * {@link XStoreModule} For the device module.\n *\n * @internal\n */\nexport const deviceXStoreModule: DeviceXStoreModule = {\n  state: () => ({\n    name: null,\n  }),\n  getters: {},\n  mutations: {\n    setName(state, name) {\n      state.name = name\n    },\n  },\n  actions: {},\n}\n"],"names":[],"mappings":"AAEA;;;;AAIG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,IAAI,EAAE,IAAI;KACX,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,OAAO,CAAC,KAAK,EAAE,IAAI,EAAA;AACjB,YAAA,KAAK,CAAC,IAAI,GAAG,IAAI,CAAA;SAClB;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}

package/js/x-modules/device/wiring.js

@@ -20,8 +20,8 @@ const setName = wireCommit('setName');
  */
 const deviceWiring = createWiring({
     DeviceProvided: {
-        setName
-    }
+        setName,
+    },
 });
 
 export { deviceWiring, setName };

package/js/x-modules/device/wiring.js.map

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/device/wiring.ts"],"sourcesContent":["import { namespacedWireCommit } from '../../wiring/namespaced-wires.factory';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * WireCommit for {@link DeviceXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit('device');\n\n/**\n * Sets the device of the {@link DeviceXModule}.\n *\n * @public\n */\nexport const setName = wireCommit('setName');\n\n/**\n * Wiring configuration for the {@link DeviceXModule | device module}.\n *\n * @internal\n */\nexport const deviceWiring = createWiring({\n  DeviceProvided: {\n    setName\n  }\n});\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;AAElD;;;;AAIG;MACU,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE;AAE7C;;;;AAIG;AACI,MAAM,YAAY,GAAG,YAAY,CAAC;AACvC,IAAA,cAAc,EAAE;QACd,OAAO;AACR,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/device/wiring.ts"],"sourcesContent":["import { namespacedWireCommit } from '../../wiring/namespaced-wires.factory'\nimport { createWiring } from '../../wiring/wiring.utils'\n\n/**\n * WireCommit for {@link DeviceXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit('device')\n\n/**\n * Sets the device of the {@link DeviceXModule}.\n *\n * @public\n */\nexport const setName = wireCommit('setName')\n\n/**\n * Wiring configuration for the {@link DeviceXModule | device module}.\n *\n * @internal\n */\nexport const deviceWiring = createWiring({\n  DeviceProvided: {\n    setName,\n  },\n})\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAA;AAEjD;;;;AAIG;MACU,OAAO,GAAG,UAAU,CAAC,SAAS,EAAC;AAE5C;;;;AAIG;AACI,MAAM,YAAY,GAAG,YAAY,CAAC;AACvC,IAAA,cAAc,EAAE;QACd,OAAO;AACR,KAAA;AACF,CAAA;;;;"}

package/js/x-modules/device/x-module.js

@@ -13,7 +13,7 @@ const deviceXModule = {
     name: 'device',
     storeModule: deviceXStoreModule,
     storeEmitters: deviceEmitters,
-    wiring: deviceWiring
+    wiring: deviceWiring,
 };
 XPlugin.registerXModule(deviceXModule);
 

package/js/x-modules/device/x-module.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/device/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { deviceEmitters } from './store/emitters';\nimport { deviceXStoreModule } from './store/module';\nimport { DeviceXStoreModule } from './store/types';\nimport { deviceWiring } from './wiring';\n\n/**\n * Device {@link XModule} alias.\n *\n * @public\n */\nexport type DeviceXModule = XModule<DeviceXStoreModule>;\n\n/**\n * Device {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `device` entry point.\n *\n * @public\n */\nexport const deviceXModule: DeviceXModule = {\n  name: 'device',\n  storeModule: deviceXStoreModule,\n  storeEmitters: deviceEmitters,\n  wiring: deviceWiring\n};\n\nXPlugin.registerXModule(deviceXModule);\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,aAAa,GAAkB;AAC1C,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,WAAW,EAAE,kBAAkB;AAC/B,IAAA,aAAa,EAAE,cAAc;AAC7B,IAAA,MAAM,EAAE,YAAY;EACpB;AAEF,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/device/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { DeviceXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins/x-plugin'\nimport { deviceEmitters } from './store/emitters'\nimport { deviceXStoreModule } from './store/module'\nimport { deviceWiring } from './wiring'\n\n/**\n * Device {@link XModule} alias.\n *\n * @public\n */\nexport type DeviceXModule = XModule<DeviceXStoreModule>\n\n/**\n * Device {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `device` entry point.\n *\n * @public\n */\nexport const deviceXModule: DeviceXModule = {\n  name: 'device',\n  storeModule: deviceXStoreModule,\n  storeEmitters: deviceEmitters,\n  wiring: deviceWiring,\n}\n\nXPlugin.registerXModule(deviceXModule)\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,aAAa,GAAkB;AAC1C,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,WAAW,EAAE,kBAAkB;AAC/B,IAAA,aAAa,EAAE,cAAc;AAC7B,IAAA,MAAM,EAAE,YAAY;EACrB;AAED,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC;;;;"}

package/js/x-modules/empathize/components/empathize.vue.js

@@ -9,12 +9,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "div",
         {
           ref: "empathizeRef",
+          class: "x-empathize",
+          "data-test": "empathize",
           onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
           }, ["prevent"])),
           onFocusin: _cache[1] || (_cache[1] = (...args) => _ctx.open && _ctx.open(...args)),
-          onFocusout: _cache[2] || (_cache[2] = (...args) => _ctx.close && _ctx.close(...args)),
-          class: "x-empathize",
-          "data-test": "empathize"
+          onFocusout: _cache[2] || (_cache[2] = (...args) => _ctx.close && _ctx.close(...args))
         },
         [
           renderSlot(_ctx.$slots, "default")

package/js/x-modules/empathize/components/empathize.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div\n      v-show=\"isOpen && hasContent\"\n      ref=\"empathizeRef\"\n      @mousedown.prevent\n      @focusin=\"open\"\n      @focusout=\"close\"\n      class=\"x-empathize\"\n      data-test=\"empathize\"\n    >\n      <!-- @slot (Required) Modal container content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType, ref, computed } from 'vue';\n  import { NoAnimation } from '../../../components';\n  import { use$x, useDebounce } from '../../../composables';\n  import { AnimationProp } from '../../../types';\n  import { XEvent } from '../../../wiring';\n  import { empathizeXModule } from '../x-module';\n  import { getActiveElement } from '../../../utils/html';\n\n  /**\n   * Component containing the empathize. It has a required slot to define its content and two props\n   * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Empathize',\n    xModule: empathizeXModule.name,\n    props: {\n      /** Array of {@link XEvent} to open the empathize. */\n      eventsToOpenEmpathize: {\n        type: Array as PropType<XEvent[]>,\n        default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']\n      },\n      /** Array of {@link XEvent} to close the empathize. */\n      eventsToCloseEmpathize: {\n        type: Array as PropType<XEvent[]>,\n        default: () => [\n          'UserClosedEmpathize',\n          'UserSelectedASuggestion',\n          'UserPressedEnterKey',\n          'UserBlurredSearchBox'\n        ]\n      },\n      /** Animation component that will be used to animate the empathize. */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const empathizeRef = ref<HTMLDivElement>();\n\n      const isOpen = ref(false);\n      const hasContent = computed(() => !!empathizeRef.value?.children?.length);\n\n      /**\n       * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`\n       * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if\n       * the state really changes.\n       *\n       * @param newOpen - The new open state to assign to {@link Empathize.isOpen}.\n       */\n      const changeOpen = useDebounce((newOpen: boolean) => {\n        if (isOpen.value !== newOpen) {\n          isOpen.value = newOpen;\n          const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed';\n          $x.emit(empathizeEvent, undefined, { target: empathizeRef.value });\n        }\n      }, 0);\n\n      /**\n       * Open empathize. This method will be executed on any event in\n       * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root\n       * element.\n       */\n      function open() {\n        if (hasContent.value) {\n          changeOpen(true);\n        }\n      }\n\n      /**\n       * Close empathize. This method will be executed on any event in\n       * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n       * element.\n       */\n      function close() {\n        const activeElement = getActiveElement();\n        if (!empathizeRef.value?.contains(activeElement)) {\n          changeOpen(false);\n        }\n      }\n\n      props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));\n      props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));\n\n      return {\n        close,\n        empathizeRef,\n        hasContent,\n        isOpen,\n        open\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `true`. The event\n  payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `false`. The event\n  payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n  'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n  <template #default>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions/>\n      <PopularSearches/>\n      <HistoryQueries/>\n    </BaseKeyboardNavigation>\n  </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n  :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n  :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n  <template #default>\n    Please, type a query in the Search Box.\n  </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n  <template #default>\n    <PopularSearches/>\n  </template>\n</Empathize>\n```\n</docs>\n"],"names":["_createBlock","_resolveDynamicComponent","_withCtx","_withDirectives","_createElementVNode","_withModifiers","isOpen","hasContent"],"mappings":";;;;SAAA,WAaU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;sBAXNA,WAWM,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EATAC,OAAc,CAAA,MAAA;AAAA,MACRC,cAAA,CAAAC,kBAAA;AAAA,QAAA,KAAA;AAAA,QALhB;AAAA,UAMO,GAAA,EAAA,cAAA;AAAA,UACA,aAAQ,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,MAAA;AAAA,WAAA,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;AAAA,UACX,WAAM,MAAa,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UACnB,UAAA,EAAS,OAAC,CAAW,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,KAAA,IAAA,IAAA,CAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,KAAA,EAAA,aAAA;UAGrB,WAAQ,EAAA,WAAA;AAAA,SAAA;;qBATAC,IAAUC,CAAAA,MAAAA,EAAAA,SAAAA,CAAAA;AAAAA,SAAAA;;;;;AAHxB,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div\n      v-show=\"isOpen && hasContent\"\n      ref=\"empathizeRef\"\n      class=\"x-empathize\"\n      data-test=\"empathize\"\n      @mousedown.prevent\n      @focusin=\"open\"\n      @focusout=\"close\"\n    >\n      <!-- @slot (Required) Modal container content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { XEvent } from '../../../wiring'\nimport { computed, defineComponent, ref } from 'vue'\nimport { NoAnimation } from '../../../components'\nimport { use$x, useDebounce } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { getActiveElement } from '../../../utils/html'\nimport { empathizeXModule } from '../x-module'\n\n/**\n * Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Empathize',\n  xModule: empathizeXModule.name,\n  props: {\n    /** Array of {@link XEvent} to open the empathize. */\n    eventsToOpenEmpathize: {\n      type: Array as PropType<XEvent[]>,\n      default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'],\n    },\n    /** Array of {@link XEvent} to close the empathize. */\n    eventsToCloseEmpathize: {\n      type: Array as PropType<XEvent[]>,\n      default: () => [\n        'UserClosedEmpathize',\n        'UserSelectedASuggestion',\n        'UserPressedEnterKey',\n        'UserBlurredSearchBox',\n      ],\n    },\n    /** Animation component that will be used to animate the empathize. */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const empathizeRef = ref<HTMLDivElement>()\n\n    const isOpen = ref(false)\n    const hasContent = computed(() => !!empathizeRef.value?.children?.length)\n\n    /**\n     * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`\n     * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if\n     * the state really changes.\n     *\n     * @param newOpen - The new open state to assign to {@link Empathize.isOpen}.\n     */\n    const changeOpen = useDebounce((newOpen: boolean) => {\n      if (isOpen.value !== newOpen) {\n        isOpen.value = newOpen\n        const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed'\n        $x.emit(empathizeEvent, undefined, { target: empathizeRef.value })\n      }\n    }, 0)\n\n    /**\n     * Open empathize. This method will be executed on any event in\n     * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root\n     * element.\n     */\n    function open() {\n      if (hasContent.value) {\n        changeOpen(true)\n      }\n    }\n\n    /**\n     * Close empathize. This method will be executed on any event in\n     * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n     * element.\n     */\n    function close() {\n      const activeElement = getActiveElement()\n      if (!empathizeRef.value?.contains(activeElement)) {\n        changeOpen(false)\n      }\n    }\n\n    props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open))\n    props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close))\n\n    return {\n      close,\n      empathizeRef,\n      hasContent,\n      isOpen,\n      open,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `true`. The event\n  payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `false`. The event\n  payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n  'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n  <template #default>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions/>\n      <PopularSearches/>\n      <HistoryQueries/>\n    </BaseKeyboardNavigation>\n  </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n  :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n  :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n  <template #default>\n    Please, type a query in the Search Box.\n  </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n  <template #default>\n    <PopularSearches/>\n  </template>\n</Empathize>\n```\n</docs>\n"],"names":["_createBlock","_resolveDynamicComponent","_withCtx","_withDirectives","_createElementVNode","_withModifiers","isOpen","hasContent"],"mappings":";;;;SAAA,WAaU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;sBAXNA,WAWM,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EATAC,OAAc,CAAA,MAAA;AAAA,MACZC,cAAA,CAAAC,kBAAA;AAAA,QAAa,KAAA;AAAA,QAAA;AAAA,UACnB,GAAA,EAAA,cAAA;AAAA,UACC,KAAA,EAAA,aAAA;AAAA,UACA,WAAO,EAAA,WAAA;AAAA,UACP,aAAQ,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,MAAA;AAAA,WAAA,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;AAAA,UAAA,SAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,CAAA;UAGX,UAAQ,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,KAAA,IAAA,IAAA,CAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,SAAA;;qBATAC,IAAUC,CAAAA,MAAAA,EAAAA,SAAAA,CAAAA;AAAAA,SAAAA;;;;;AAHxB,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}