@empathyco/x-components 3.0.0-alpha.3 → 3.0.0-alpha.300

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

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

@@ -0,0 +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 Vue, { PluginObject, VueConstructor } from 'vue';\nimport { BaseXBus } from '../../plugins/x-bus';\nimport { XBus } from '../../plugins/x-bus.types';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { InitWrapper, InstallXOptions, VueConstructorPartialArgument } from './types';\n\ndeclare global {\n  interface Window {\n    InterfaceX?: XAPI;\n    initX?: (() => SnippetConfig) | SnippetConfig;\n  }\n}\n\n/**\n * The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n *\n * This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n *\n * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n *\n * @example The way to use this class is the next:\n *    1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n *\n * ```\n *        const installer = new XInstaller(installXOptions)\n * ```\n *\n *    2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n *       There are 3 different ways to do this:\n *\n *        2.1 Using the created installer:\n *\n * ```\n *            installer.init(snippetConfig)\n * ```\n *\n *        2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n *            is not present as the default value is `true`) then this init step can be done with\n *            the Public API:\n *\n * ```\n *            window.InterfaceX.init(snippetConfig)\n * ```\n *\n *        2.3 When the script of the project build is loaded it searches for a global `initX`\n *            variable that the customer must have in their website. This variable can be a\n *            function that returns the {@link SnippetConfig} or an object that contains the\n *            {@link SnippetConfig} itself:\n *\n * ```\n *            window.initX = function() {\n *                 return {\n *                   instance,\n *                   env,\n *                   scope,\n *                   lang,\n *                   uiLang,\n *                   currency,\n *                   consent,\n *                   documentDirection\n *                 };\n *              };\n * ```\n *\n * ```\n *            window.initX = {\n *                 instance,\n *                 env,\n *                 scope,\n *                 lang,\n *                 uiLang,\n *                 currency,\n *                 consent,\n *                 documentDirection\n *               };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n  private api?: XAPI;\n\n  /**\n   * The configuration coming from the snippet {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected snippetConfig?: NormalisedSnippetConfig;\n\n  /**\n   * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n   * creates the public {@link XAPI}.\n   *\n   * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n   * object specifying the {@link SnippetConfig | snippet config}.\n   *\n   *\n   * @param options - The {@link InstallXOptions}.\n   *\n   * @public\n   */\n  public constructor(protected readonly options: InstallXOptions) {\n    this.createAPI();\n  }\n\n  /**\n   * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n   * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n   * creation the value `false` must be passed in the `api` option.\n   *\n   * @internal\n   */\n  protected createAPI(): void {\n    const { api } = this.options;\n    if (api !== false) {\n      this.api = api ?? new BaseXAPI();\n      this.api.setInitCallback(this.init.bind(this));\n      this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n      window.InterfaceX = this.api;\n    }\n  }\n\n  /**\n   * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n   *\n   * @returns The snippet config if it is defined or undefined otherwise.\n   *\n   * @internal\n   */\n  private retrieveSnippetConfig(): SnippetConfig | undefined {\n    if (typeof window.initX === 'function') {\n      return window.initX();\n    } else if (typeof window.initX === 'object') {\n      return window.initX;\n    }\n  }\n\n  /**\n   * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n   * installs the plugin and initializes the Vue application.\n   *\n   * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n   *\n   * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n   * returns an object with the {@link XAPI}, the {@link XBus}, the {@link XPlugin} and the Vue App\n   * used in the application. Else, a rejected promise is returned.\n   *\n   * @public\n   */\n  init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n  init(): Promise<InitWrapper | void>;\n  async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n    if (snippetConfig) {\n      this.snippetConfig = this.normaliseSnippetConfig(snippetConfig);\n      const bus = this.createBus();\n      const pluginOptions = this.getPluginOptions();\n      const plugin = this.installPlugin(pluginOptions, bus);\n      const extraPlugins = await this.installExtraPlugins(bus);\n      const app = this.createApp(extraPlugins);\n      this.api?.setBus(bus);\n\n      return {\n        api: this.api,\n        app,\n        bus,\n        plugin\n      };\n    }\n\n    return Promise.resolve();\n  }\n\n  /**\n   * Creates the {@link XPluginOptions} object.\n   *\n   * @returns The {@link XPluginOptions} object.\n   *\n   * @internal\n   */\n  protected getPluginOptions(): XPluginOptions {\n    const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;\n    return {\n      adapter,\n      store,\n      xModules,\n      initialXModules,\n      __PRIVATE__xModules\n    };\n  }\n\n  /**\n   * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n   * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n   * creates a new instance of {@link BaseXBus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus {\n    return this.options.bus ?? new BaseXBus();\n  }\n\n  /**\n   * This method returns the VueConstructor to use to create the App instance.\n   * It returns the `vue` parameter in the {@link InstallXOptions} or if not provided, then\n   * returns the default Vue.\n   *\n   * @remarks The purpose of this option is mainly the testing. In a test we can use this option\n   * to pass the local vue instance created by `createLocalVue` method.\n   *\n   * @returns VueConstructor - The vue constructor to create the App instance.\n   *\n   * @internal\n   */\n  protected getVue(): VueConstructor {\n    return this.options.vue ?? Vue;\n  }\n\n  /**\n   * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n   * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n   * created and installed.\n   *\n   * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n   * of the plugin.\n   * @param bus - The {@link XBus} to be used to create the XPlugin.\n   *\n   * @returns PluginObject<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(pluginOptions: XPluginOptions, bus: XBus): PluginObject<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus);\n    const vue = this.getVue();\n    vue.use(plugin, pluginOptions);\n    return plugin;\n  }\n\n  /**\n   * Install more plugins to Vue defined by the user.\n   *\n   * @param bus - The events bus used in the application.\n   * @returns The arguments from the plugins installation to be used in Vue's constructor.\n   * @internal\n   */\n  protected installExtraPlugins(bus: XBus): Promise<VueConstructorPartialArgument> {\n    const vue = this.getVue();\n    return Promise.resolve(\n      this.options.installExtraPlugins?.({ vue, snippet: this.snippetConfig!, bus })\n    );\n  }\n\n  /**\n   * In the case that the `app` parameter is present in the {@link InstallXOptions}, then a new Vue\n   * application is created using that app.\n   *\n   * @param extraPlugins - Vue plugins initialisation data.\n   * @returns The Created Vue application or undefined if not created.\n   *\n   * @internal\n   */\n  protected createApp(extraPlugins: VueConstructorPartialArgument): Vue | undefined {\n    if (this.options.app !== undefined) {\n      const vue = this.getVue();\n      const app = new vue({\n        ...extraPlugins,\n        ...this.options.vueOptions,\n        provide: {\n          snippetConfig: (this.snippetConfig = vue.observable(this.snippetConfig))\n        },\n        store: this.options.store,\n        el: this.getMountingTarget(this.options.domElement),\n        render: h => h(this.options.app)\n      });\n      this.options.onCreateApp?.(app);\n      return app;\n    }\n  }\n\n  protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig;\n  protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>;\n  /**\n   * Transforms the snippet configuration.\n   * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n   *\n   * @param snippetConfig - The snippet config to normalise.\n   * @returns The normalised version of the given snippet config.\n   * @internal\n   */\n  protected normaliseSnippetConfig(\n    snippetConfig: SnippetConfig | Partial<SnippetConfig>\n  ): NormalisedSnippetConfig | Partial<SnippetConfig> {\n    if (snippetConfig.lang) {\n      snippetConfig.uiLang ??= snippetConfig.lang;\n    }\n    return snippetConfig;\n  }\n\n  /**\n   * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n   * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n   * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n   * returns an Element or element selector to use.\n   * If it is not present, a new <div> Element is created and appended to the body.\n   *\n   * @param domElement - {@link InstallXOptions.domElement | Element, string or function} Used\n   * to mount the Vue Application.\n   *\n   * @returns The Element to use as mounting target for the Vue Application.\n   * @internal\n   */\n  protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element {\n    if (isFunction(domElement)) {\n      domElement = domElement(this.snippetConfig!);\n    }\n    if (typeof domElement === 'string') {\n      const target = document.querySelector(domElement);\n      if (!target) {\n        throw Error(\n          `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`\n        );\n      }\n      return target;\n    }\n    return domElement ?? document.body.appendChild(document.createElement('div'));\n  }\n\n  /**\n   * It updates all the provided properties from the current snippet config.\n   *\n   * @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n    if (!this.snippetConfig) {\n      return;\n    }\n    forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n      this.getVue().set(this.snippetConfig!, name, value);\n    });\n  }\n}\n"],"names":[],"mappings":";;;;;;AAiBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEG;MACU,UAAU,CAAA;AAUrB;;;;;;;;;;;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,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;YACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,sBAAsB,CAAC,aAAa,CAAC,CAAC;AAChE,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;YACtD,MAAM,YAAY,GAAG,MAAM,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;YACzD,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;AACzC,YAAA,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;YAEtB,OAAO;gBACL,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,GAAG;gBACH,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;QACjB,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,IAAI,QAAQ,EAAE,CAAC;KAC3C;AAED;;;;;;;;;;;AAWG;IACO,MAAM,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC;KAChC;AAED;;;;;;;;;;;AAWG;IACO,aAAa,CAAC,aAA6B,EAAE,GAAS,EAAA;AAC9D,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI,OAAO,CAAC,GAAG,CAAC,CAAC;AACvD,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;AAC1B,QAAA,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAC/B,QAAA,OAAO,MAAM,CAAC;KACf;AAED;;;;;;AAMG;AACO,IAAA,mBAAmB,CAAC,GAAS,EAAA;AACrC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC1B,OAAO,OAAO,CAAC,OAAO,CACpB,IAAI,CAAC,OAAO,CAAC,mBAAmB,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,aAAc,EAAE,GAAG,EAAE,CAAC,CAC/E,CAAC;KACH;AAED;;;;;;;;AAQG;AACO,IAAA,SAAS,CAAC,YAA2C,EAAA;AAC7D,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,KAAK,SAAS,EAAE;AAClC,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;AAC1B,YAAA,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC;AAClB,gBAAA,GAAG,YAAY;AACf,gBAAA,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU;AAC1B,gBAAA,OAAO,EAAE;AACP,oBAAA,aAAa,GAAG,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACzE,iBAAA;AACD,gBAAA,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;gBACzB,EAAE,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;AACnD,gBAAA,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;AACjC,aAAA,CAAC,CAAC;YACH,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC,CAAC;AAChC,YAAA,OAAO,GAAG,CAAC;AACZ,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,MAAM,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,aAAc,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AACtD,SAAC,CAAC,CAAC;KACJ;AACF;;;;"}

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

@@ -0,0 +1,52 @@
+import script from './device-detector.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+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 },
+      })
+    : _vm._e()
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };
+//# sourceMappingURL=device-detector.vue.js.map

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

@@ -0,0 +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":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/device/components/device-detector.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,122 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import GlobalEvents from 'vue-global-events';
+import { Prop, Watch, Component } from 'vue-property-decorator';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { XEmit } from '../../../components/decorators/bus.decorators.js';
+import { throttle } from '../../../utils/throttle.js';
+import { deviceXModule } from '../x-module.js';
+
+/**
+ * This component helps detecting or setting a device, that can be used later to create
+ * different layouts optimized for different devices. This detected device is available under
+ * the {@link XComponentAliasAPI.device} property.
+ *
+ * @public
+ */
+let DeviceDetector = class DeviceDetector extends Vue {
+    constructor() {
+        super(...arguments);
+        /**
+         * The width in pixels of the window where the app is being rendered.
+         *
+         * @internal
+         */
+        this.windowWidthPx = null;
+        /**
+         * Throttled version of {@link DeviceDetector.storeWindowWidth} function.
+         *
+         * @internal
+         */
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        this.throttledStoreWindowWidth = this.storeWindowWidth;
+    }
+    /**
+     * List of each of the entries of the breakpoints sorted from the smallest to the biggest
+     * max width.
+     *
+     * @returns A list of the breakpoints sorted by its max width in ascending order.
+     *
+     * @internal
+     */
+    get sortedBreakpoints() {
+        return Object.entries(this.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth);
+    }
+    /**
+     * The device detected by this component, or the value provided in {@link DeviceDetector.force}
+     * prop.
+     *
+     * @returns The detected device, or the value provided in {@link DeviceDetector.force}
+     * prop.
+     *
+     * @internal
+     */
+    get detectedDevice() {
+        if (this.force) {
+            return this.force;
+        }
+        else if (this.windowWidthPx === null) {
+            return null;
+        }
+        else {
+            return (this.sortedBreakpoints.find(([, width]) => this.windowWidthPx <= width)?.[0] ?? null);
+        }
+    }
+    /**
+     * Stores the window width in {@link DeviceDetector.windowWidthPx}.
+     *
+     * @internal
+     */
+    storeWindowWidth() {
+        this.windowWidthPx = window.innerWidth;
+    }
+    /**
+     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at
+     * {@link DeviceDetector.throttleMs}.
+     *
+     * @param throttleMs - The new duration in milliseconds for the throttle.
+     *
+     * @internal
+     */
+    updateThrottledStoreWindowWidth(throttleMs) {
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        this.throttledStoreWindowWidth = throttle(this.storeWindowWidth, throttleMs);
+    }
+    /**
+     * Initialises the store window width.
+     *
+     * @remarks This is done this way to ensure SSR compatibility.
+     *
+     * @internal
+     */
+    mounted() {
+        this.storeWindowWidth();
+    }
+};
+__decorate([
+    Prop({ default: () => ({}) })
+], DeviceDetector.prototype, "breakpoints", void 0);
+__decorate([
+    Prop()
+], DeviceDetector.prototype, "force", void 0);
+__decorate([
+    Prop({ default: 100 })
+], DeviceDetector.prototype, "throttleMs", void 0);
+__decorate([
+    XEmit('DeviceProvided')
+], DeviceDetector.prototype, "detectedDevice", null);
+__decorate([
+    Watch('throttleMs', { immediate: true })
+], DeviceDetector.prototype, "updateThrottledStoreWindowWidth", null);
+DeviceDetector = __decorate([
+    Component({
+        mixins: [xComponentMixin(deviceXModule)],
+        components: {
+            GlobalEvents
+        }
+    })
+], DeviceDetector);
+var script = DeviceDetector;
+
+export { script as default };
+//# sourceMappingURL=device-detector.vue_rollup-plugin-vue_script.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"device-detector.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\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"],"names":[],"mappings":";;;;;;;;;AAkBE;;;;;;AAMG;AAOY,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,GAAG,CAAA;AAAhC,IAAA,WAAA,GAAA;;AA0Bb;;;;AAIG;QACO,IAAa,CAAA,aAAA,GAAkB,IAAI,CAAC;AAE9C;;;;AAIG;;AAEO,QAAA,IAAA,CAAA,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,CAAC;KAqE7D;AAnEC;;;;;;;AAOG;AACH,IAAA,IAAc,iBAAiB,GAAA;AAC7B,QAAA,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC,CAAC;KAC3F;AAED;;;;;;;;AAQG;AAEH,IAAA,IAAW,cAAc,GAAA;QACvB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAC;AACnB,SAAA;AAAM,aAAA,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;AACtC,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;AAAM,aAAA;AACL,YAAA,QACE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC,aAAc,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,EACrF;AACH,SAAA;KACF;AAED;;;;AAIG;IACO,gBAAgB,GAAA;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC;KACxC;AAED;;;;;;;AAOG;AAEO,IAAA,+BAA+B,CAAC,UAAkB,EAAA;;QAE1D,IAAI,CAAC,yBAAyB,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;KAC9E;AAED;;;;;;AAMG;IACH,OAAO,GAAA;QACL,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;CACF,CAAA;AApGC,UAAA,CAAA;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AACyB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQvD,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACwB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ/B,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;AACa,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuCpC,UAAA,CAAA;IADC,KAAK,CAAC,gBAAgB,CAAC;AAWvB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,CAAA;AAoBD,UAAA,CAAA;IADC,KAAK,CAAC,YAAY,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAIxC,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,iCAAA,EAAA,IAAA,CAAA,CAAA;AAhGkB,cAAc,GAAA,UAAA,CAAA;AANlC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;AACxC,QAAA,UAAU,EAAE;YACV,YAAY;AACb,SAAA;KACF,CAAC;AACmB,CAAA,EAAA,cAAc,CA4GlC,CAAA;aA5GoB,cAAc;;;;"}

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

@@ -0,0 +1,12 @@
+import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
+import { deviceXStoreModule } from './module.js';
+
+/**
+ * {@link StoreEmitters} For the device module.
+ *
+ * @internal
+ */
+const deviceEmitters = createStoreEmitters(deviceXStoreModule, {});
+
+export { deviceEmitters };
+//# sourceMappingURL=emitters.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,20 @@
+/**
+ * {@link XStoreModule} For the device module.
+ *
+ * @internal
+ */
+const deviceXStoreModule = {
+    state: () => ({
+        name: null
+    }),
+    getters: {},
+    mutations: {
+        setName(state, name) {
+            state.name = name;
+        }
+    },
+    actions: {}
+};
+
+export { deviceXStoreModule };
+//# sourceMappingURL=module.js.map

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

@@ -0,0 +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;;;;;"}

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

@@ -0,0 +1,28 @@
+import { namespacedWireCommit } from '../../wiring/namespaced-wires.factory.js';
+import { createWiring } from '../../wiring/wiring.utils.js';
+
+/**
+ * WireCommit for {@link DeviceXModule}.
+ *
+ * @internal
+ */
+const wireCommit = namespacedWireCommit('device');
+/**
+ * Sets the device of the {@link DeviceXModule}.
+ *
+ * @public
+ */
+const setName = wireCommit('setName');
+/**
+ * Wiring configuration for the {@link DeviceXModule | device module}.
+ *
+ * @internal
+ */
+const deviceWiring = createWiring({
+    DeviceProvided: {
+        setName
+    }
+});
+
+export { deviceWiring, setName };
+//# sourceMappingURL=wiring.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,19 @@
+import { deviceEmitters } from './store/emitters.js';
+import { deviceXStoreModule } from './store/module.js';
+import { deviceWiring } from './wiring.js';
+
+/**
+ * Device {@link XModule} implementation. This module is auto-registered as soon as you
+ * import any component from the `device` entry point.
+ *
+ * @public
+ */
+const deviceXModule = {
+    name: 'device',
+    storeModule: deviceXStoreModule,
+    storeEmitters: deviceEmitters,
+    wiring: deviceWiring
+};
+
+export { deviceXModule };
+//# sourceMappingURL=x-module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/device/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\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"],"names":[],"mappings":";;;;AAaA;;;;;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;;;;;"}