@empathyco/x-components 3.0.0-alpha.7 → 3.0.0-alpha.70

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

@@ -3,8 +3,8 @@
  *
  * @public
  */
-var BaseXAPI = /** @class */ (function () {
-    function BaseXAPI() {
+class BaseXAPI {
+    constructor() {
         /**
          * Flag to check if the initialization was already done.
          *
@@ -12,6 +12,14 @@ var BaseXAPI = /** @class */ (function () {
          */
         this.isXInitialized = false;
     }
+    /**
+     * Tracks that a product was added to cart from PDP.
+     *
+     * @param productId - The product id that was added to cart.
+     */
+    addProductToCart(productId) {
+        this.bus?.emit('UserClickedPDPAddToCart', productId);
+    }
     /**
      * Setter for the {@link XBus}.
      *
@@ -19,17 +27,37 @@ var BaseXAPI = /** @class */ (function () {
      *
      * @internal
      */
-    BaseXAPI.prototype.setBus = function (bus) {
+    setBus(bus) {
         this.bus = bus;
-    };
+    }
     /**
      * Setter for the callback to call in the init method.
      *
      * @param initCallback - The callback to call.
      */
-    BaseXAPI.prototype.setInitCallback = function (initCallback) {
+    setInitCallback(initCallback) {
         this.initCallback = initCallback;
-    };
+    }
+    /**
+     * Setter for the callback to modify the snippet config.
+     *
+     * @param snippetCallback - The callback to call.
+     *
+     * @internal
+     */
+    setSnippetConfigCallback(snippetCallback) {
+        this.snippetCallback = snippetCallback;
+    }
+    /**
+     * Sets or updates the snippet config.
+     *
+     * @param config - A part or all the snippet config.
+     *
+     * @public
+     */
+    setSnippetConfig(config) {
+        this?.snippetCallback(config);
+    }
     /**
      * Searches the query parameter as user query.
      *
@@ -37,30 +65,30 @@ var BaseXAPI = /** @class */ (function () {
      *
      * @public
      */
-    BaseXAPI.prototype.search = function (query) {
-        var _a;
-        // TODO - It should do more things like emit the query was changed out of the normal user flow
-        (_a = this.bus) === null || _a === void 0 ? void 0 : _a.emit('UserAcceptedAQuery', query);
-    };
+    search(query) {
+        if (query) {
+            this.bus?.emit('UserAcceptedAQuery', query);
+        }
+        this.bus?.emit('UserOpenXProgrammatically');
+    }
     /**
      * Initializes the Application passing the {@link SnippetConfig}.
      *
-     * @param config - The config comming from the customer snippet.
+     * @param config - The config coming from the customer snippet.
      *
      * @public
      */
-    BaseXAPI.prototype.init = function (config) {
+    init(config) {
         if (!this.isXInitialized) {
             this.isXInitialized = true;
-            this === null || this === void 0 ? void 0 : this.initCallback(config);
+            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.');
         }
-    };
-    return BaseXAPI;
-}());
+    }
+}
 
 export { BaseXAPI };
 //# sourceMappingURL=base-api.js.map

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 '../../plugins/x-bus.types';\nimport { 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;\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   * Setter for the {@link XBus}.\n   *\n   * @param bus - The {@link XBus} received to emit events.\n   *\n   * @internal\n   */\n  setBus(bus: XBus): 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   * 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    // TODO - It should do more things like emit the query was changed out of the normal user flow\n    this.bus?.emit('UserAcceptedAQuery', query);\n  }\n\n  /**\n   * Initializes the Application passing the {@link SnippetConfig}.\n   *\n   * @param config - The config comming from the customer snippet.\n   *\n   * @public\n   */\n  init(config: SnippetConfig): void {\n    if (!this.isXInitialized) {\n      this.isXInitialized = true;\n      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"],"names":[],"mappings":"AAGA;;;;;;IAKA;;;;;;QAMY,mBAAc,GAAG,KAAK,CAAC;KAiElC;;;;;;;;IAzCC,yBAAM,GAAN,UAAO,GAAS;QACd,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;KAChB;;;;;;IAOD,kCAAe,GAAf,UAAgB,YAA4C;QAC1D,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;KAClC;;;;;;;;IASD,yBAAM,GAAN,UAAO,KAAa;;;QAElB,MAAA,IAAI,CAAC,GAAG,0CAAE,IAAI,CAAC,oBAAoB,EAAE,KAAK,EAAE;KAC7C;;;;;;;;IASD,uBAAI,GAAJ,UAAK,MAAqB;QACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAC,MAAM,EAAE;SAC5B;aAAM;;YAEL,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;SAChF;KACF;IACH,eAAC;AAAD,CAAC;;;;"}
+{"version":3,"file":"base-api.js","sources":["../../../../src/x-installer/api/base-api.ts"],"sourcesContent":["import { XBus } from '../../plugins/x-bus.types';\nimport { 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;\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   * 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 XBus}.\n   *\n   * @param bus - The {@link XBus} received to emit events.\n   *\n   * @internal\n   */\n  setBus(bus: XBus): 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.\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('UserOpenXProgrammatically');\n  }\n\n  /**\n   * Initializes the Application passing the {@link SnippetConfig}.\n   *\n   * @param config - The config coming from the customer snippet.\n   *\n   * @public\n   */\n  init(config: SnippetConfig): void {\n    if (!this.isXInitialized) {\n      this.isXInitialized = true;\n      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"],"names":[],"mappings":"AAGA;;;;;MAKa,QAAQ;IAArB;;;;;;QAMY,mBAAc,GAAG,KAAK,CAAC;KA0GlC;;;;;;IA5EC,gBAAgB,CAAC,SAAkB;QACjC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;KACtD;;;;;;;;IASD,MAAM,CAAC,GAAS;QACd,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;KAChB;;;;;;IAOD,eAAe,CAAC,YAA4C;QAC1D,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;KAClC;;;;;;;;IASD,wBAAwB,CAAC,eAAyD;QAChF,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;KACxC;;;;;;;;IASD,gBAAgB,CAAC,MAA8B;QAC7C,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;KAC/B;;;;;;;;IASD,MAAM,CAAC,KAAc;QACnB,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;SAC7C;QACD,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;KAC7C;;;;;;;;IASD,IAAI,CAAC,MAAqB;QACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;SAC5B;aAAM;;YAEL,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;SAChF;KACF;;;;;"}

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

@@ -1,12 +1,11 @@
-import { __awaiter, __generator, __rest, __assign } from 'tslib';
-import Vue from 'vue';
-import { cleanUndefined } from '../../utils/object.js';
 import { deepMerge } from '@empathyco/x-deep-merge';
+import Vue from 'vue';
 import { BaseXBus } from '../../plugins/x-bus.js';
 import { XPlugin } from '../../plugins/x-plugin.js';
+import { cleanUndefined, forEach } from '../../utils/object.js';
 import { BaseXAPI } from '../api/base-api.js';
 
-var defaultAdapterConfig = {
+const defaultAdapterConfig = {
     env: 'live',
     requestParams: {
         lang: 'es',
@@ -38,11 +37,11 @@ var defaultAdapterConfig = {
  *        2.1 Using the created installer:
  *
  * ```
- *            installer.init(snipetConfig)
+ *            installer.init(snippetConfig)
  * ```
  *
  *        2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or
- *            is not present as the default vlaue is `true`) then this init step can be done with
+ *            is not present as the default value is `true`) then this init step can be done with
  *            the Public API:
  *
  * ```
@@ -84,16 +83,20 @@ var defaultAdapterConfig = {
  *
  * @public
  */
-var XInstaller = /** @class */ (function () {
+class XInstaller {
     /**
      * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also
      * creates the public {@link XAPI}.
      *
+     * @remarks Auto initializes the Vue application if window.initX is defined as a function or
+     * object specifying the {@link SnippetConfig | snippet config}.
+     *
+     *
      * @param options - The {@link InstallXOptions}.
      *
      * @public
      */
-    function XInstaller(options) {
+    constructor(options) {
         this.options = options;
         this.createAPI();
     }
@@ -104,53 +107,49 @@ var XInstaller = /** @class */ (function () {
      *
      * @internal
      */
-    XInstaller.prototype.createAPI = function () {
-        var api = this.options.api;
+    createAPI() {
+        const { api } = this.options;
         if (api !== false) {
-            this.api = api !== null && api !== void 0 ? api : new BaseXAPI();
+            this.api = api ?? new BaseXAPI();
             this.api.setInitCallback(this.init.bind(this));
+            this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));
             window.X = this.api;
         }
-    };
+    }
     /**
-     * Receives the {@link SnippetConfig | snippet config}, installs the plugin and initializes
-     * the Vue application.
+     * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.
      *
-     * @param snippetConfig - The {@link SnippetConfig} that receives from snippet
-     * integration.
+     * @returns The snippet config if it is defined or undefined otherwise.
      *
-     * @returns Object with the {@link XAPI}, the {@link XBus}, the {@link XPlugin} and the Vue App
-     * used in the application.
-     *
-     * @public
+     * @internal
      */
-    XInstaller.prototype.init = function (snippetConfig) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function () {
-            var adapterConfig, bus, pluginOptions, plugin, extraPlugins, app;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        adapterConfig = this.getAdapterConfig(snippetConfig);
-                        this.applyConfigToAdapter(adapterConfig);
-                        bus = this.createBus();
-                        pluginOptions = this.getPluginOptions();
-                        plugin = this.installPlugin(pluginOptions, bus);
-                        return [4 /*yield*/, this.installExtraPlugins(snippetConfig, bus)];
-                    case 1:
-                        extraPlugins = _b.sent();
-                        app = this.createApp(extraPlugins, snippetConfig);
-                        (_a = this.api) === null || _a === void 0 ? void 0 : _a.setBus(bus);
-                        return [2 /*return*/, {
-                                api: this.api,
-                                app: app,
-                                bus: bus,
-                                plugin: plugin
-                            }];
-                }
-            });
-        });
-    };
+    retrieveSnippetConfig() {
+        if (typeof window.initX === 'function') {
+            return window.initX();
+        }
+        else if (typeof window.initX === 'object') {
+            return window.initX;
+        }
+    }
+    async init(snippetConfig = this.retrieveSnippetConfig()) {
+        if (snippetConfig) {
+            const adapterConfig = this.getAdapterConfig(snippetConfig);
+            this.applyConfigToAdapter(adapterConfig);
+            const bus = this.createBus();
+            const pluginOptions = this.getPluginOptions();
+            const plugin = this.installPlugin(pluginOptions, bus);
+            const extraPlugins = await this.installExtraPlugins(snippetConfig, bus);
+            const app = this.createApp(extraPlugins, snippetConfig);
+            this.api?.setBus(bus);
+            return {
+                api: this.api,
+                app,
+                bus,
+                plugin
+            };
+        }
+        return Promise.resolve();
+    }
     /**
      * Creates the Adapter Config object using the {@link SnippetConfig} to do it. It also
      * merges the default configuration.
@@ -161,14 +160,16 @@ var XInstaller = /** @class */ (function () {
      *
      * @internal
      */
-    XInstaller.prototype.getAdapterConfig = function (_a) {
-        var instance = _a.instance, env = _a.env, lang = _a.lang, searchLang = _a.searchLang, scope = _a.scope, consent = _a.consent, currency = _a.currency, documentDirection = _a.documentDirection, extraParams = __rest(_a, ["instance", "env", "lang", "searchLang", "scope", "consent", "currency", "documentDirection"]);
+    getAdapterConfig({ instance, env, lang, searchLang, scope }) {
         return deepMerge(defaultAdapterConfig, cleanUndefined({
-            instance: instance,
-            env: env,
-            requestParams: __assign({ lang: searchLang !== null && searchLang !== void 0 ? searchLang : lang, scope: scope }, extraParams)
+            instance,
+            env,
+            requestParams: {
+                lang: searchLang ?? lang,
+                scope
+            }
         }));
-    };
+    }
     /**
      * Creates the {@link XPluginOptions} object.
      *
@@ -176,16 +177,16 @@ var XInstaller = /** @class */ (function () {
      *
      * @internal
      */
-    XInstaller.prototype.getPluginOptions = function () {
-        var _a = this.options, adapter = _a.adapter, store = _a.store, initialXModules = _a.initialXModules, xModules = _a.xModules, __PRIVATE__xModules = _a.__PRIVATE__xModules;
+    getPluginOptions() {
+        const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;
         return {
-            adapter: adapter,
-            store: store,
-            xModules: xModules,
-            initialXModules: initialXModules,
-            __PRIVATE__xModules: __PRIVATE__xModules
+            adapter,
+            store,
+            xModules,
+            initialXModules,
+            __PRIVATE__xModules
         };
-    };
+    }
     /**
      * It applies the snippet configuration to the Adapter. Not all the parameters are for the Adapter
      * but they appear destructured to not include them in the `extraParams` parameter.
@@ -194,10 +195,9 @@ var XInstaller = /** @class */ (function () {
      *
      * @internal
      */
-    XInstaller.prototype.applyConfigToAdapter = function (adapterConfig) {
-        var _a, _b;
-        (_b = (_a = this.options.adapter).setConfig) === null || _b === void 0 ? void 0 : _b.call(_a, adapterConfig);
-    };
+    applyConfigToAdapter(adapterConfig) {
+        this.options.adapter.setConfig?.(adapterConfig);
+    }
     /**
      * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.
      * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then
@@ -207,10 +207,9 @@ var XInstaller = /** @class */ (function () {
      *
      * @internal
      */
-    XInstaller.prototype.createBus = function () {
-        var _a;
-        return (_a = this.options.bus) !== null && _a !== void 0 ? _a : new BaseXBus();
-    };
+    createBus() {
+        return this.options.bus ?? new BaseXBus();
+    }
     /**
      * This method returns the VueConstructor to use to create the App instance.
      * It returns the `vue` parameter in the {@link InstallXOptions} or if not provided, then
@@ -223,10 +222,9 @@ var XInstaller = /** @class */ (function () {
      *
      * @internal
      */
-    XInstaller.prototype.getVue = function () {
-        var _a;
-        return (_a = this.options.vue) !== null && _a !== void 0 ? _a : Vue;
-    };
+    getVue() {
+        return this.options.vue ?? Vue;
+    }
     /**
      * Creates and install the Vue Plugin. If `plugin` parameter is passed in the
      * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is
@@ -239,13 +237,12 @@ var XInstaller = /** @class */ (function () {
      * @returns PluginObject<XPluginOption> - The plugin instance.
      * @internal
      */
-    XInstaller.prototype.installPlugin = function (pluginOptions, bus) {
-        var _a;
-        var plugin = (_a = this.options.plugin) !== null && _a !== void 0 ? _a : new XPlugin(bus);
-        var vue = this.getVue();
+    installPlugin(pluginOptions, bus) {
+        const plugin = this.options.plugin ?? new XPlugin(bus);
+        const vue = this.getVue();
         vue.use(plugin, pluginOptions);
         return plugin;
-    };
+    }
     /**
      * Install more plugins to Vue defined by the user.
      *
@@ -254,11 +251,10 @@ var XInstaller = /** @class */ (function () {
      * @returns The arguments from the plugins installation to be used in Vue's constructor.
      * @internal
      */
-    XInstaller.prototype.installExtraPlugins = function (snippet, bus) {
-        var _a, _b;
-        var vue = this.getVue();
-        return Promise.resolve((_b = (_a = this.options).installExtraPlugins) === null || _b === void 0 ? void 0 : _b.call(_a, { vue: vue, snippet: snippet, bus: bus }));
-    };
+    installExtraPlugins(snippet, bus) {
+        const vue = this.getVue();
+        return Promise.resolve(this.options.installExtraPlugins?.({ vue, snippet, bus }));
+    }
     /**
      * In the case that the `app` parameter is present in the {@link InstallXOptions}, then a new Vue
      * application is created using that app.
@@ -269,18 +265,24 @@ var XInstaller = /** @class */ (function () {
      *
      * @internal
      */
-    XInstaller.prototype.createApp = function (extraPlugins, snippetConfig) {
-        var _this = this;
+    createApp(extraPlugins, snippetConfig) {
         if (this.options.app !== undefined) {
-            var vue = this.getVue();
-            vue.observable(snippetConfig);
-            return new vue(__assign(__assign(__assign({}, extraPlugins), this.options.vueOptions), { provide: function () {
+            const vue = this.getVue();
+            this.snippetConfig = vue.observable(snippetConfig);
+            return new vue({
+                ...extraPlugins,
+                ...this.options.vueOptions,
+                provide() {
                     return {
-                        snippetConfig: snippetConfig
+                        snippetConfig
                     };
-                }, store: this.options.store, el: this.getMountingTarget(this.options.domElement), render: function (h) { return h(_this.options.app); } }));
+                },
+                store: this.options.store,
+                el: this.getMountingTarget(this.options.domElement),
+                render: h => h(this.options.app)
+            });
         }
-    };
+    }
     /**
      * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in the
      * {@link InstallXOptions} is an Element or a string, then it is used. If it is
@@ -291,11 +293,11 @@ var XInstaller = /** @class */ (function () {
      * @returns The Element to use as mounting point for the Vue App.
      * @internal
      */
-    XInstaller.prototype.getMountingTarget = function (elementOrSelector) {
+    getMountingTarget(elementOrSelector) {
         if (typeof elementOrSelector === 'string') {
-            var target = document.querySelector(elementOrSelector);
+            const target = document.querySelector(elementOrSelector);
             if (!target) {
-                throw Error("XComponents app couldn't be mounted: Element \"" + elementOrSelector + "\" couldn't be found");
+                throw Error(`XComponents app couldn't be mounted: Element "${elementOrSelector}" couldn't be found`);
             }
             return target;
         }
@@ -305,9 +307,20 @@ var XInstaller = /** @class */ (function () {
         else {
             return document.body.appendChild(document.createElement('div'));
         }
-    };
-    return XInstaller;
-}());
+    }
+    /**
+     * It updates all the provided properties from the current snippet config.
+     *
+     * @param snippetConfig - All the properties to be updated in the {@link SnippetConfig}.
+     *
+     * @internal
+     */
+    updateSnippetConfig(snippetConfig) {
+        forEach(snippetConfig, (name, value) => {
+            this.getVue().set(this.snippetConfig, name, value);
+        });
+    }
+}
 
 export { XInstaller };
 //# sourceMappingURL=x-installer.js.map

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 { EmpathyAdapterConfig } from '@empathyco/x-adapter';\nimport { deepMerge } from '@empathyco/x-deep-merge';\nimport Vue, { PluginObject, VueConstructor } from 'vue';\nimport { BaseXBus } from '../../plugins/x-bus';\nimport { XBus } from '../../plugins/x-bus.types';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { cleanUndefined } from '../../utils/object';\nimport { DeepPartial } from '../../utils/types';\nimport { SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { InstallXOptions, VueConstructorPartialArgument } from './types';\n\ndeclare global {\n  interface Window {\n    X?: XAPI;\n  }\n}\n\nconst defaultAdapterConfig: DeepPartial<EmpathyAdapterConfig> = {\n  env: 'live',\n  requestParams: {\n    lang: 'es',\n    scope: 'default'\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(snipetConfig)\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 vlaue is `true`) then this init step can be done with\n *            the Public API:\n *\n * ```\n *            window.X.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 web site. 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 *                   searchLang,\n *                   currency,\n *                   consent,\n *                   documentDirection\n *                 };\n *              };\n * ```\n *\n * ```\n *            window.initX = {\n *                 instance,\n *                 env,\n *                 scope,\n *                 lang,\n *                 searchLang,\n *                 currency,\n *                 consent,\n *                 documentDirection\n *               };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n  private api?: XAPI;\n\n  /**\n   * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n   * creates the public {@link XAPI}.\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      window.X = this.api;\n    }\n  }\n\n  /**\n   * Receives the {@link SnippetConfig | snippet config}, installs the plugin and initializes\n   * the Vue application.\n   *\n   * @param snippetConfig - The {@link SnippetConfig} that receives from snippet\n   * integration.\n   *\n   * @returns Object with the {@link XAPI}, the {@link XBus}, the {@link XPlugin} and the Vue App\n   * used in the application.\n   *\n   * @public\n   */\n  async init(snippetConfig: SnippetConfig): Promise<{\n    app: Vue | undefined;\n    api: XAPI | undefined;\n    bus: XBus;\n    plugin: PluginObject<XPluginOptions>;\n  }> {\n    const adapterConfig = this.getAdapterConfig(snippetConfig);\n    this.applyConfigToAdapter(adapterConfig);\n    const bus = this.createBus();\n    const pluginOptions = this.getPluginOptions();\n    const plugin = this.installPlugin(pluginOptions, bus);\n    const extraPlugins = await this.installExtraPlugins(snippetConfig, bus);\n    const app = this.createApp(extraPlugins, snippetConfig);\n    this.api?.setBus(bus);\n\n    return {\n      api: this.api,\n      app,\n      bus,\n      plugin\n    };\n  }\n\n  /**\n   * Creates the Adapter Config object using the {@link SnippetConfig} to do it. It also\n   * merges the default configuration.\n   *\n   * @param options - The {@link SnippetConfig}.\n   *\n   * @returns The Adapter Config object.\n   *\n   * @internal\n   */\n  protected getAdapterConfig({\n    instance,\n    env,\n    lang,\n    searchLang,\n    scope,\n    consent,\n    currency,\n    documentDirection,\n    ...extraParams\n  }: SnippetConfig): unknown {\n    return deepMerge(\n      defaultAdapterConfig,\n      cleanUndefined<DeepPartial<EmpathyAdapterConfig>>({\n        instance,\n        env,\n        requestParams: {\n          lang: searchLang ?? lang,\n          scope,\n          ...extraParams\n        }\n      })\n    );\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   * It applies the snippet configuration to the Adapter. Not all the parameters are for the Adapter\n   * but they appear destructured to not include them in the `extraParams` parameter.\n   *\n   * @param adapterConfig - The Adapter config object.\n   *\n   * @internal\n   */\n  protected applyConfigToAdapter(adapterConfig: any): void {\n    this.options.adapter.setConfig?.(adapterConfig);\n  }\n\n  /**\n   * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n   * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n   * creates a new instance of {@link BaseXBus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus {\n    return this.options.bus ?? new BaseXBus();\n  }\n\n  /**\n   * This method returns the VueConstructor to use to create the App instance.\n   * It returns the `vue` parameter in the {@link InstallXOptions} or if not provided, then\n   * returns the default Vue.\n   *\n   * @remarks The purpose of this option is mainly the testing. In a test we can use this option\n   * to pass the local vue instance created by `createLocalVue` method.\n   *\n   * @returns VueConstructor - The vue constructor to create the App instance.\n   *\n   * @internal\n   */\n  protected getVue(): VueConstructor {\n    return this.options.vue ?? Vue;\n  }\n\n  /**\n   * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n   * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n   * created and installed.\n   *\n   * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n   * of the plugin.\n   * @param bus - The {@link XBus} to be used to create the XPlugin.\n   *\n   * @returns PluginObject<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(pluginOptions: XPluginOptions, bus: XBus): PluginObject<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus);\n    const vue = this.getVue();\n    vue.use(plugin, pluginOptions);\n    return plugin;\n  }\n\n  /**\n   * Install more plugins to Vue defined by the user.\n   *\n   * @param snippet - The snippet configuration.\n   * @param bus - The events bus used in the application.\n   * @returns The arguments from the plugins installation to be used in Vue's constructor.\n   * @internal\n   */\n  protected installExtraPlugins(\n    snippet: SnippetConfig,\n    bus: XBus\n  ): Promise<VueConstructorPartialArgument> {\n    const vue = this.getVue();\n    return Promise.resolve(this.options.installExtraPlugins?.({ vue, snippet, bus }));\n  }\n\n  /**\n   * In the case that the `app` parameter is present in the {@link InstallXOptions}, then a new Vue\n   * application is created using that app.\n   *\n   * @param extraPlugins - Vue plugins initialisation data.\n   * @param snippetConfig - Configuration from the client snippet.\n   * @returns The Created Vue application or undefined if not created.\n   *\n   * @internal\n   */\n  protected createApp(\n    extraPlugins: VueConstructorPartialArgument,\n    snippetConfig: SnippetConfig\n  ): Vue | undefined {\n    if (this.options.app !== undefined) {\n      const vue = this.getVue();\n      vue.observable(snippetConfig);\n      return new vue({\n        ...extraPlugins,\n        ...this.options.vueOptions,\n        provide() {\n          return {\n            snippetConfig\n          };\n        },\n        store: this.options.store,\n        el: this.getMountingTarget(this.options.domElement),\n        render: h => h(this.options.app)\n      });\n    }\n  }\n\n  /**\n   * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in the\n   * {@link InstallXOptions} is an Element or a string, then it is used. If it is\n   * not present then a new <div> Element is created and append to the body to be used.\n   *\n   * @param elementOrSelector - String or Element used to mount the Vue App.\n   *\n   * @returns The Element to use as mounting point for the Vue App.\n   * @internal\n   */\n  protected getMountingTarget(elementOrSelector?: string | Element): Element {\n    if (typeof elementOrSelector === 'string') {\n      const target = document.querySelector(elementOrSelector);\n      if (!target) {\n        throw Error(\n          `XComponents app couldn't be mounted: Element \"${elementOrSelector}\" couldn't be found`\n        );\n      }\n      return target;\n    } else if (elementOrSelector !== undefined) {\n      return elementOrSelector;\n    } else {\n      return document.body.appendChild(document.createElement('div'));\n    }\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import { EmpathyAdapterConfig } from '@empathyco/x-adapter';\nimport { deepMerge } from '@empathyco/x-deep-merge';\nimport Vue, { PluginObject, VueConstructor } from 'vue';\nimport { BaseXBus } from '../../plugins/x-bus';\nimport { XBus } from '../../plugins/x-bus.types';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { cleanUndefined, forEach } from '../../utils/object';\nimport { DeepPartial } from '../../utils/types';\nimport { SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { InitWrapper, InstallXOptions, VueConstructorPartialArgument } from './types';\n\ndeclare global {\n  interface Window {\n    X?: XAPI;\n    initX?: (() => SnippetConfig) | SnippetConfig;\n  }\n}\n\nconst defaultAdapterConfig: DeepPartial<EmpathyAdapterConfig> = {\n  env: 'live',\n  requestParams: {\n    lang: 'es',\n    scope: 'default'\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.X.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 web site. 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 *                   searchLang,\n *                   currency,\n *                   consent,\n *                   documentDirection\n *                 };\n *              };\n * ```\n *\n * ```\n *            window.initX = {\n *                 instance,\n *                 env,\n *                 scope,\n *                 lang,\n *                 searchLang,\n *                 currency,\n *                 consent,\n *                 documentDirection\n *               };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n  private api?: XAPI;\n\n  /**\n   * The configuration coming from the snippet {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected snippetConfig!: SnippetConfig;\n\n  /**\n   * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n   * creates the public {@link XAPI}.\n   *\n   * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n   * object specifying the {@link SnippetConfig | snippet config}.\n   *\n   *\n   * @param options - The {@link InstallXOptions}.\n   *\n   * @public\n   */\n  public constructor(protected readonly options: InstallXOptions) {\n    this.createAPI();\n  }\n\n  /**\n   * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n   * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n   * creation the value `false` must be passed in the `api` option.\n   *\n   * @internal\n   */\n  protected createAPI(): void {\n    const { api } = this.options;\n    if (api !== false) {\n      this.api = api ?? new BaseXAPI();\n      this.api.setInitCallback(this.init.bind(this));\n      this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n      window.X = this.api;\n    }\n  }\n\n  /**\n   * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n   *\n   * @returns The snippet config if it is defined or undefined otherwise.\n   *\n   * @internal\n   */\n  private retrieveSnippetConfig(): SnippetConfig | undefined {\n    if (typeof window.initX === 'function') {\n      return window.initX();\n    } else if (typeof window.initX === 'object') {\n      return window.initX;\n    }\n  }\n\n  /**\n   * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n   * installs the plugin and initializes the Vue application.\n   *\n   * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n   *\n   * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n   * returns an object with the {@link XAPI}, the {@link XBus}, the {@link XPlugin} and the Vue App\n   * used in the application. Else, a rejected promise is returned.\n   *\n   * @public\n   */\n  init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n  init(): Promise<InitWrapper | void>;\n  async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n    if (snippetConfig) {\n      const adapterConfig = this.getAdapterConfig(snippetConfig);\n      this.applyConfigToAdapter(adapterConfig);\n      const bus = this.createBus();\n      const pluginOptions = this.getPluginOptions();\n      const plugin = this.installPlugin(pluginOptions, bus);\n      const extraPlugins = await this.installExtraPlugins(snippetConfig, bus);\n      const app = this.createApp(extraPlugins, snippetConfig);\n      this.api?.setBus(bus);\n\n      return {\n        api: this.api,\n        app,\n        bus,\n        plugin\n      };\n    }\n\n    return Promise.resolve();\n  }\n\n  /**\n   * Creates the Adapter Config object using the {@link SnippetConfig} to do it. It also\n   * merges the default configuration.\n   *\n   * @param options - The {@link SnippetConfig}.\n   *\n   * @returns The Adapter Config object.\n   *\n   * @internal\n   */\n  protected getAdapterConfig({ instance, env, lang, searchLang, scope }: SnippetConfig): unknown {\n    return deepMerge(\n      defaultAdapterConfig,\n      cleanUndefined<DeepPartial<EmpathyAdapterConfig>>({\n        instance,\n        env,\n        requestParams: {\n          lang: searchLang ?? lang,\n          scope\n        }\n      })\n    );\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   * It applies the snippet configuration to the Adapter. Not all the parameters are for the Adapter\n   * but they appear destructured to not include them in the `extraParams` parameter.\n   *\n   * @param adapterConfig - The Adapter config object.\n   *\n   * @internal\n   */\n  protected applyConfigToAdapter(adapterConfig: any): void {\n    this.options.adapter.setConfig?.(adapterConfig);\n  }\n\n  /**\n   * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n   * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n   * creates a new instance of {@link BaseXBus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus {\n    return this.options.bus ?? new BaseXBus();\n  }\n\n  /**\n   * This method returns the VueConstructor to use to create the App instance.\n   * It returns the `vue` parameter in the {@link InstallXOptions} or if not provided, then\n   * returns the default Vue.\n   *\n   * @remarks The purpose of this option is mainly the testing. In a test we can use this option\n   * to pass the local vue instance created by `createLocalVue` method.\n   *\n   * @returns VueConstructor - The vue constructor to create the App instance.\n   *\n   * @internal\n   */\n  protected getVue(): VueConstructor {\n    return this.options.vue ?? Vue;\n  }\n\n  /**\n   * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n   * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n   * created and installed.\n   *\n   * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n   * of the plugin.\n   * @param bus - The {@link XBus} to be used to create the XPlugin.\n   *\n   * @returns PluginObject<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(pluginOptions: XPluginOptions, bus: XBus): PluginObject<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus);\n    const vue = this.getVue();\n    vue.use(plugin, pluginOptions);\n    return plugin;\n  }\n\n  /**\n   * Install more plugins to Vue defined by the user.\n   *\n   * @param snippet - The snippet configuration.\n   * @param bus - The events bus used in the application.\n   * @returns The arguments from the plugins installation to be used in Vue's constructor.\n   * @internal\n   */\n  protected installExtraPlugins(\n    snippet: SnippetConfig,\n    bus: XBus\n  ): Promise<VueConstructorPartialArgument> {\n    const vue = this.getVue();\n    return Promise.resolve(this.options.installExtraPlugins?.({ vue, snippet, bus }));\n  }\n\n  /**\n   * In the case that the `app` parameter is present in the {@link InstallXOptions}, then a new Vue\n   * application is created using that app.\n   *\n   * @param extraPlugins - Vue plugins initialisation data.\n   * @param snippetConfig - Configuration from the client snippet.\n   * @returns The Created Vue application or undefined if not created.\n   *\n   * @internal\n   */\n  protected createApp(\n    extraPlugins: VueConstructorPartialArgument,\n    snippetConfig: SnippetConfig\n  ): Vue | undefined {\n    if (this.options.app !== undefined) {\n      const vue = this.getVue();\n      this.snippetConfig = vue.observable(snippetConfig);\n      return new vue({\n        ...extraPlugins,\n        ...this.options.vueOptions,\n        provide() {\n          return {\n            snippetConfig\n          };\n        },\n        store: this.options.store,\n        el: this.getMountingTarget(this.options.domElement),\n        render: h => h(this.options.app)\n      });\n    }\n  }\n\n  /**\n   * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in the\n   * {@link InstallXOptions} is an Element or a string, then it is used. If it is\n   * not present then a new <div> Element is created and append to the body to be used.\n   *\n   * @param elementOrSelector - String or Element used to mount the Vue App.\n   *\n   * @returns The Element to use as mounting point for the Vue App.\n   * @internal\n   */\n  protected getMountingTarget(elementOrSelector?: string | Element): Element {\n    if (typeof elementOrSelector === 'string') {\n      const target = document.querySelector(elementOrSelector);\n      if (!target) {\n        throw Error(\n          `XComponents app couldn't be mounted: Element \"${elementOrSelector}\" couldn't be found`\n        );\n      }\n      return target;\n    } else if (elementOrSelector !== undefined) {\n      return elementOrSelector;\n    } else {\n      return document.body.appendChild(document.createElement('div'));\n    }\n  }\n\n  /**\n   * It updates all the provided properties from the current snippet config.\n   *\n   * @param snippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected updateSnippetConfig(snippetConfig: Partial<SnippetConfig>): void {\n    forEach(snippetConfig, (name, value) => {\n      this.getVue().set(this.snippetConfig, name, value);\n    });\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,18 +1,18 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import script from './device-detector.vue_rollup-plugin-vue=script.js';
+import script from './device-detector.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return !_vm.force
     ? _c("GlobalEvents", {
         attrs: { target: "window" },
-        on: { resize: _vm.throttledStoreWindowWidth }
+        on: { resize: _vm.throttledStoreWindowWidth },
       })
     : _vm._e()
 };
@@ -20,13 +20,13 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  var __vue_scope_id__ = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -35,7 +35,7 @@ __vue_render__._withStripped = true;
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -48,5 +48,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=device-detector.vue.js.map

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 Vue from 'vue';\n  import GlobalEvents from 'vue-global-events';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEmit } from '../../../components/decorators/bus.decorators';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\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 detecting 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  @Component({\n    mixins: [xComponentMixin(deviceXModule)],\n    components: {\n      GlobalEvents\n    }\n  })\n  export default class DeviceDetector extends Vue {\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    @Prop({ default: () => ({}) })\n    public readonly breakpoints!: Record<Device, MaxWidth>;\n\n    /**\n     * Forces a device, ignoring the {@link DeviceDetector.breakpoints} prop.\n     *\n     * @public\n     */\n    @Prop()\n    public readonly force?: Device;\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    @Prop({ default: 100 })\n    public readonly throttleMs!: number;\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    protected windowWidthPx: number | null = null;\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    protected throttledStoreWindowWidth = this.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    protected get sortedBreakpoints(): [Device, MaxWidth][] {\n      return Object.entries(this.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    @XEmit('DeviceProvided')\n    public get detectedDevice(): string | null {\n      if (this.force) {\n        return this.force;\n      } else if (this.windowWidthPx === null) {\n        return null;\n      } else {\n        return (\n          this.sortedBreakpoints.find(([, width]) => this.windowWidthPx! <= width)?.[0] ?? null\n        );\n      }\n    }\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    protected storeWindowWidth(): void {\n      this.windowWidthPx = window.innerWidth;\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('throttleMs', { immediate: true })\n    protected updateThrottledStoreWindowWidth(throttleMs: number): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.throttledStoreWindowWidth = throttle(this.storeWindowWidth, throttleMs);\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    mounted(): void {\n      this.storeWindowWidth();\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](./../../api/x-components.devicexevents.md)\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\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\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\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":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 Vue from 'vue';\n  import GlobalEvents from 'vue-global-events';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEmit } from '../../../components/decorators/bus.decorators';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\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 detecting 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  @Component({\n    mixins: [xComponentMixin(deviceXModule)],\n    components: {\n      GlobalEvents\n    }\n  })\n  export default class DeviceDetector extends Vue {\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    @Prop({ default: () => ({}) })\n    public readonly breakpoints!: Record<Device, MaxWidth>;\n\n    /**\n     * Forces a device, ignoring the {@link DeviceDetector.breakpoints} prop.\n     *\n     * @public\n     */\n    @Prop()\n    public readonly force?: Device;\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    @Prop({ default: 100 })\n    public readonly throttleMs!: number;\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    protected windowWidthPx: number | null = null;\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    protected throttledStoreWindowWidth = this.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    protected get sortedBreakpoints(): [Device, MaxWidth][] {\n      return Object.entries(this.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    @XEmit('DeviceProvided')\n    public get detectedDevice(): string | null {\n      if (this.force) {\n        return this.force;\n      } else if (this.windowWidthPx === null) {\n        return null;\n      } else {\n        return (\n          this.sortedBreakpoints.find(([, width]) => this.windowWidthPx! <= width)?.[0] ?? null\n        );\n      }\n    }\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    protected storeWindowWidth(): void {\n      this.windowWidthPx = window.innerWidth;\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('throttleMs', { immediate: true })\n    protected updateThrottledStoreWindowWidth(throttleMs: number): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.throttledStoreWindowWidth = throttle(this.storeWindowWidth, throttleMs);\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    mounted(): void {\n      this.storeWindowWidth();\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](./../../api/x-components.devicexevents.md)\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\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\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\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":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}