@empathyco/x-components 3.0.0-alpha.86 → 3.0.0-alpha.89

package/docs/build-search-ui/web-how-to-use-x-components-guide.md

@@ -1,41 +1,49 @@
 ---
-title: Use & configure Interface X Components in your project
+title: How to use and configure Interface X Components in your project
 tags:
   - configuration
   - x configuration
   - x component configuration
+  - use x components
+  - how to
 ---
 
-# Use and configure Interface X Components in your project
+# How to use and configure Interface X Components in your project
 
 Interface X Components are like building blocks that you pick up and mix to craft your
 search UI experiences. The goal of using components is to include only the components you want,
-wherever you want. So, **just import the components, register, and go!**
+wherever you want.
 
 Once you’ve installed the
-[dependencies and the xPlugin](web-x-components-integration-guide.md#1-install-the-dependencies),
+[dependencies and the xPlugin](web-x-components-development-guide.md#1-install-the-dependencies),
 you’re ready to use X Components in your project.
 
+##### Steps to use X Components in your project:
+
+1. **Import and register** X Components from a module.
+
+2. **Configure the X Components behavior** to customize the search and discovery experience.
+
 ## 1. Import and register the X Components
 
 Many of the X Components are distributed into modules to make them easier to manage. So you
 need to indicate from which module you’re importing each component as appropriate.
 
 For example, the `search-box` module contains the `SearchInput`, `SearchButton`, and
-`ClearSearchInput` components.
-
-### Import and register components from a module
+`ClearSearchInput` components. See
+[Using the search box components](#example-using-the-search-box-components) for an example on how to
+import and register the Search box components in a project.
 
 When importing the components, you can register each component **locally for each Vue instance** as
 you go.
 
 ```typescript
-//Import each component you'd like to use, before you register it.
+//Import every component you'd like to use.
 import { ComponentA } from './Module1';
 import { ComponentB } from './Module1';
 import { ComponentC } from './Module1';
 
-//Locally register each component.
+//Register the components locally.
 export default {
   components: {
     ComponentA,
@@ -48,33 +56,11 @@ export default {
 //The components are now ready to be used inside your template.
 ```
 
-### Import and register components globally
-
-Alternatively, you can **globally** register components in Vue directly in the `main.js` file if you
-plan on using a component more than once in your app. By registering the components globally, you
-can use them in the template of any root Vue instance you create afterwards.
-
-::: develop
-
-Although you can register components globally, it should be done with caution as **it may impact
-future performance**. Remember if you register the components globally, the entire X Component
-module is loaded and registered each time this code line is run.
-
-:::
-
-```typescript
-import { ComponentA, ComponentB, ComponentC } from './ModuleA';
-
-Vue.component('ComponentAName', ComponentA);
-Vue.component('ComponentBName', ComponentB);
-Vue.component('ComponentCName', ComponentC);
-```
-
 ## 2. Configure the X Components
 
 You can configure some behaviors for each component to customize the search experience.
 
-To provide different project-specific behaviors, you can use:
+To provide different project-specific behaviors, you use:
 
 - **Props**: custom attributes to pass data into a component. It modifies the behavior or the
   properties in a component.
@@ -94,15 +80,20 @@ To provide different project-specific behaviors, you can use:
 
 You can pass the configuration attributes documented in the
 [UI Reference](/develop-empathy-platform/ui-reference/) for the Interface X Components.
+Combine components at your ease and use resource modules such as **modals**, **panels**, and
+**animations**. You also use
+**[base components](/develop-empathy-platform/ui-reference/components/base-components/)**, i.e.
+standard Vue components that don’t have any dependencies with the X Components. Use them as a
+foundation to build other components.
 
-You can combine components at your ease and use resource modules such as modals, panels, and
-animations. You can also use base components, i.e. standard Vue components that don’t have any
-dependencies with the X Components. Use them as a foundation to build other components.
+::: develop Next steps
 
 Your components are ready to go, but you can provide your search UI with a friendly and fancy style
 and layout. For more information, see
 [Design tokens](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md).
 
+:::
+
 <!--If you want to support multiple languages, you can use the [x-translation](https://github.com/empathyco/x/tree/main/packages/x-translations) library to manage localization options.-->
 
 ## Example: Using the search box components
@@ -111,7 +102,7 @@ To build your search UI, you need to provide at least a search field that allows
 query. Additionally, you can include a button to trigger the search and a button to delete the input
 query.
 
-The search-box module contains these components:
+The `search-box` module contains these components:
 
 - `SearchInput`
 - `SearchButton`
@@ -130,7 +121,7 @@ For this purpose, you need to import the `SearchInput`, `SearchButton`, and `Cle
 components from the `search-box` module to the desired app component. Then, register them and
 include them in the template.
 
-First, import and locally register the components.
+First, **import and locally register** the components.
 
 ```vue
 //Import the components from the corresponding module.

package/docs/build-search-ui/{x-architecture/README.md → web-x-architecture.md}

@@ -64,9 +64,9 @@ somewhat familiar. Although the [ViewModel layer](https://012.vuejs.org/guide/#I
 basically inspired by the
 [**Flux pattern**](https://vuex.vuejs.org/#what-is-a-state-management-pattern) behind the state. As
 the X Components emit events that dispatch actions in the business logic tier, these actions
-can commit mutations to modify the state of the store.  
-To sum up, the design of Interface X takes advantage of the MVVM and Flux patterns to design,
-develop, and configure each tier separately and independently.
+can commit mutations to modify the state of the store. To sum up, the design of Interface X
+takes advantage of the MVVM and Flux patterns to design, develop, and configure each tier separately
+and independently.
 
 :::
 
@@ -76,55 +76,7 @@ develop, and configure each tier separately and independently.
 - JavaScript + [TypeScript](https://www.typescriptlang.org/) languages
 - [RxJS](https://rxjs.dev/) for the wiring configuration logic
 
-**The story so far**  
-Not long ago, exploring alternative options for the architecture design and technical stack became a
-must. There were several design challenges that needed to be overcome to make the frontend service
-easier to configure:
-
-- Improve reusability and performance that were hindered by the logic in components and the bundle
-  size
-- Facilitate setup by solving synchronicity and extendability problems
-- Provide easier maintenance over time, reducing regression issues
-
-After studying different approaches to build fast and reusable components, **Vue.js** (also Vue)
-seemed to be the best fit for the technical requirements and the level of abstraction required.
-
-Revamping the architecture and technical stack has helped the former frontend services to evolve
-into the latest Interface X application. Now, all the required **attributes and design
-principles** are combined to make the solution easy to implement, change, test, and reuse:
-
-- **Flexible**. Make changes to any element without impacting the rest of the app. For example, you
-  can modify a visual component without impacting the business logic.
-- **Customizable & extensible**. Add new custom components andor features.
-- **Lightweight**. The bundle includes only the modules you want. You’ll get only the code you
-  really need.
-- **Incremental**. The modules interact and communicate automatically with each other. The more
-  modules you use, the more features you get.
-- **Easy-to-integrate**. Install the library as an NPM dependency in Vue and React projects.
-  Interface X can be used in any webpage, as long as it is integrated as an isolated search layer.
-
-**Why Vue?**  
-Due to the flexibility required, using a library for the presentation layer instead of a
-full-fledged framework is the best choice. Among the state-of-the-art technologies available for
-building component-based UIs, Vue meets all the requirements:
-
-- Lightweight, flexible, and stand-alone library
-- Easy to learn and use with a user-friendly template syntax
-- Smooth dynamic components and composition creation
-- Outperformance with reactive approach, proxies, and interceptors
-- Out-of-the-box solution, allowing you to focus just on developing features
-- Small bundle size with no dependencies
-
-**How does Vue meet the design challenges?**
-
-- Stateless components. Centralised management through the Vuex library reduces the logic in
-  components.
-- Smooth setups. Dynamic component creation helps to track the modified data and re-render only the
-  required components.
-- Improved performance out of the box
-- Seamless maintenance. Framework or library-agnostic
-
-::: note
+::: develop
 
 Interface X can potentially be integrated in commerce shops built with React. In any case,
 Interface X can be used in any webpage, as long as it is integrated as an isolated search

package/docs/build-search-ui/{web-x-components-integration-guide.md → web-x-components-development-guide.md}

@@ -1,22 +1,24 @@
 ---
-title: Integrate Interface X Components in your Vue application
+title: Develop using the Interface X Components library
 tags:
   - integration
   - interface x components integration
   - web integration
   - x integration
   - interface x
+  - x components library
 ---
 
-# Integrate Interface X Components in your Vue application
+# Develop using the Interface X Components library
 
 In this tutorial, you’ll learn the basics to integrate the Interface X Components library
-in your own project to craft enticing Vue search experiences for your shop in a matter of minutes.
+in your own project to craft enticing Vue search experiences for your commerce store in a matter of
+minutes.
 
 ::: interact
 
 If you are looking to use the ready-to-go project Interface X Archetype as your starting
-point, see **[Interface X Archetype Development](web-archetype-development-guide.md)**.
+point, see **[Develop using Interface X Archetype](web-archetype-development-guide.md)**.
 
 :::
 
@@ -35,7 +37,7 @@ To integrate the X Components in a frontend UI, you need:
 - **Empathy Search API** to retrieve search data (or any other search API)
 - A **search adapter** to communicate with the search API. You can use the Empathy Adapter and
   configure it with the `EmpathyAdapterBuilder`
-- You must be working on a **Vue** project, or on a **React** project using the
+- Your commerce store built on a **Vue** project, or on a **React** project using the
   [React Wrapper](https://github.com/empathyco/x/tree/main/packages/react-wrapper).
 
 :::
@@ -170,37 +172,32 @@ Finally, the last step is to install and initialize the xPlugin. You need to do
 Vue.use(xPlugin, { adapter, store });
 ```
 
----
-
-### Next steps
-
-Watch how our frontend Team Lead, [Iván Tajes](https://github.com/tajespasarela), integrates the
-Interface X Components in a project from scratch.
-
-<VideoContent
-title="Want to learn more?"
-source="/assets/media/videos/How-to-use-X-components-in-a-real-project.mp4"
-poster="/assets/media/videos/How-to-use-X-components-in-a-real-project.jpeg"
-:links="[
-  {
-    title:'Architecture',
-    path:'/develop-empathy-platform/build-search-ui/x-architecture/'
-  },
-  {
-    title:'UI reference',
-    path:'/develop-empathy-platform/ui-reference/'
-  }
-]">
+::: develop Next steps
 
 Once you have integrated the Interface&nbsp;X&nbsp;Components in your project, you're ready to start
 building your search and discovery UI:
 
-- Change the configuration of the [X Components](web-how-to-use-x-components-guide.md) or create new
-  ones.
+- Change the **configuration of the [X Components](web-how-to-use-x-components-guide.md)** or create
+  new ones.
 - Adapt the
-  [design system](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md)
+  **[design system](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md)**
   to your branding.
 
-</VideoContent>
+:::
 
 <!-- Manage [internationalization options](https://github.com/empathyco/x/tree/main/packages/x-translations) to support different languages.-->
+
+</br>
+
+---
+
+</br>
+<VideoContent
+source="/assets/media/videos/How-to-use-X-components-in-a-real-project.mp4"
+poster="/assets/media/videos/How-to-use-X-components-in-a-real-project.jpeg"
+>
+
+Watch how our frontend Team Lead, [Iván Tajes](https://github.com/tajespasarela), integrates the
+Interface&nbsp;X&nbsp;Components in a project from scratch.
+
+</VideoContent>

package/identifier-results/index.js

@@ -2,7 +2,7 @@ export { default as IdentifierResult } from '../js/x-modules/identifier-results/
 export { default as IdentifierResults } from '../js/x-modules/identifier-results/components/identifier-results.vue.js';
 export { cancelFetchAndSaveIdentifierResults, fetchAndSaveIdentifierResults } from '../js/x-modules/identifier-results/store/actions/fetch-and-save-identifier-results.action.js';
 export { fetchIdentifierResults } from '../js/x-modules/identifier-results/store/actions/fetch-identifier-results.action.js';
-export { saveOrigin } from '../js/x-modules/identifier-results/store/actions/save-origin.action.js';
+export { saveOrigin as saveIdentifierResultsOrigin } from '../js/x-modules/identifier-results/store/actions/save-origin.action.js';
 export { saveQuery } from '../js/x-modules/identifier-results/store/actions/save-query.action.js';
 export { identifierResultsEmitters } from '../js/x-modules/identifier-results/store/emitters.js';
 export { identifierDetectionRegexp } from '../js/x-modules/identifier-results/store/getters/identifier-detection-regexp.getter.js';

package/js/components/decorators/injection.decorators.js.map

@@ -1 +1 @@
-{"version":3,"file":"injection.decorators.js","sources":["../../../../src/components/decorators/injection.decorators.ts"],"sourcesContent":["import Vue, { ComponentOptions } from 'vue';\nimport { createDecorator } from 'vue-class-component';\nimport { arrayToObject } from '../../utils/array';\nimport { DecoratorFor } from '../../utils/types';\n\n/**\n * The type of the Vue Component provide configuration, narrowed to the object type.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/ban-types\ntype ProvideObjectConfig = Exclude<ComponentOptions<Vue>['provide'], (() => object) | undefined>;\n\n/**\n * The type of the Vue Component inject configuration, narrowed to the object type.\n *\n * @internal\n */\ntype InjectObjectConfig = Exclude<ComponentOptions<Vue>['inject'], string[] | undefined>;\n\n/**\n * Type of the key passed to {@link XProvide} and {@link XInject} to be type-safe. With this type\n * you can declare the type of the injected value directly in the injection key.\n *\n * @example\n * `const myKey: XInjectKey<Filter> = 'myFilter';`\n * `@XInject(myKey)`\n *\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\nexport interface XInjectKey<Type> extends String {}\n\n/**\n * The union type for the different functions in this module.\n *\n * @internal\n */\ntype AnyInjectKey<Type> = XInjectKey<Type> | string;\n\n/**\n * Generates a provide function that returns an object with the injectable value returned in a\n * getter to keep its reactivity, using the default\n * {@link https://vuejs.org/v2/api/#provide-inject | Vue inject}. It overrides the provide key if\n * the parent provides the same key.\n *\n * @remarks The decorated property needs to be public for type inference to work.\n *\n * @param provideKey - The key used to provide. This key can be a 'string' or a 'XInject<Type>'.\n * This last type is to support type-safe injection. When this decorator is used, it is possible\n * to specify the type of the injected value. Take a look to the example below.\n * @returns Decorator with the provide configuration.\n *\n * @example\n * Type unsafe injection (but allowed):\n *     \\@XProvide('myKey')\n *\n * Type safe injection (recommended):\n *     const myKey: XInjectKey<Date> = 'myKey';\n *     \\@XProvide(myKey)\n *\n * This last one, you are specifying that the injected value with the key 'myKey' has the Date\n * type.\n *\n * @public\n */\nexport function XProvide<Type>(provideKey: AnyInjectKey<Type>): DecoratorFor<Type> {\n  return createDecorator((options, componentKey) => {\n    const previousProvide = options.provide;\n    options.provide = function <ComponentInstance extends Vue>(this: ComponentInstance) {\n      const previousProvideObject = getPreviousProvideObject(previousProvide, this);\n      const newProvideObject = getNewProvideObject(provideKey, componentKey, this);\n      return Object.assign(previousProvideObject, newProvideObject);\n    };\n  });\n}\n\n/**\n * Generates an inject configuration object to inject a value provided by {@link XProvide}.\n * This function injects the value into a private property of the component instance using the\n * default {@link https://vuejs.org/v2/api/#provide-inject | Vue inject}. This private property\n * is named as the decorated property but prefixed with `_x-inject_`.\n *\n * Why is this private property necessary? Well, the {@link XProvide} decorator, provides an object\n * with the shape \\{ value: any \\} being that value a getter to keep reactivity of the injected\n * value. This private property is to \"shortcut\" that object and directly inject the value itself.\n * Otherwise, you should access to the actual value using `.value`.\n *\n * The final step is done by a computed property. This has the same name as the decorated property.\n * This computed returns the inner value getter of the injected object. This way the decorated\n * property has finally the initial injected value.\n *\n * @remarks The decorated property needs to be public for type inference to work.\n *\n * @param injectKey - The key used to inject. This key can be a 'string' or a 'XInject<Type>'.\n * This last type is to support type-safe injection. When this decorator is used, it is possible\n * to specify the type of the injected value. Take a look to the example below.\n * @returns Decorator with the provide configuration.\n *\n * @param defaultValue - The default value to use if there is not value provided.\n *\n * @example\n * Type unsafe injection (but allowed):\n *     \\@XInject('myKey')\n *\n * Type safe injection (recommended):\n *     const myKey: XInjectKey<Date> = 'myKey';\n *     \\@XInject(myKey)\n *\n * @public\n */\nexport function XInject<Type>(\n  injectKey: AnyInjectKey<Type>,\n  defaultValue?: Type\n): DecoratorFor<Type> {\n  return createDecorator((options, componentKey) => {\n    const privateComponentKey = `_x-inject_${componentKey}`;\n    const previousInjectObject = getPreviousInjectObject(options.inject);\n    const newInjectObject = getNewInjectObject(injectKey, privateComponentKey, defaultValue);\n    options.inject = Object.assign(previousInjectObject, newInjectObject);\n    const computedToPrivateProperty = getComputedProperty(componentKey, privateComponentKey);\n    options.computed = Object.assign(options.computed ?? {}, computedToPrivateProperty);\n  });\n}\n\n/**\n * This function receives the previous provide of the component instance.\n * If the provide is a function, then returns it as an object invoking it with the component\n * instance.\n * If the provide is an object then it is returned directly.\n * If the provide is undefined, then an empty object returned.\n *\n * @param previousProvide - The {@link ComponentOptions.provide } configuration that exist before\n * applying this decorator.\n * @param componentInstance - A Vue Component instance to invoke the provide function.\n *\n * @returns {@link ProvideObjectConfig} With the provide configuration as an object.\n */\nfunction getPreviousProvideObject<ComponentInstance extends Vue>(\n  previousProvide: ComponentOptions<Vue>['provide'],\n  componentInstance: ComponentInstance\n): ProvideObjectConfig {\n  if (isProvideFunction(previousProvide)) {\n    return previousProvide.call(componentInstance);\n  } else {\n    return previousProvide ?? {};\n  }\n}\n\n/**\n * This function creates a new provide configuration, wrapping the value to provide inside a getter\n * called `value`. This is done to keep the reactivity of the injected value.\n *\n * @param provideKey - The key of the provide value.\n * @param componentKey - The name of the property decorated with {@link XProvide}.\n * @param componentInstance - The {@link Vue} instance of the component to invoke the provide\n * function.\n *\n * @returns {@link ProvideObjectConfig} The object with the key of the provideKey and the `value`\n * getter.\n */\nfunction getNewProvideObject<ComponentInstance extends Vue>(\n  provideKey: AnyInjectKey<unknown>,\n  componentKey: string,\n  componentInstance: ComponentInstance\n): ProvideObjectConfig {\n  return {\n    [provideKey as string]: {\n      get value() {\n        return componentInstance[componentKey as keyof ComponentInstance];\n      }\n    }\n  };\n}\n\n/**\n * This function returns the previous inject config as an object. This will be used to merge it with\n * the new inject configuration.\n * If the previous inject config of the component instance is an Array, then it converts it into an\n * object.\n * If the previous inject config of the component instance is an object, then it returns it\n * directly.\n * If the previous inject config of the component instance is undefined, then an empty object is\n * returned.\n *\n * @param previousInject - The previous inject configuration of the component instance.\n *\n * @returns {@link InjectObjectConfig} The object with the previous inject config in form of object.\n */\nfunction getPreviousInjectObject(\n  previousInject: ComponentOptions<Vue>['inject']\n): InjectObjectConfig {\n  if (Array.isArray(previousInject)) {\n    return arrayToObject(previousInject);\n  } else {\n    return previousInject ?? {};\n  }\n}\n\n/**\n * This function returns the new inject configuration. This will be merged with the previous inject\n * configuration.\n * It returns an object with the key and a string if no `defaultValue` is passed. Otherwise it\n * returns an object with `from` and `default` keys.\n *\n * @param injectKey - The key of the injected value.\n * @param componentKey - The name of the component key where the value will be injected.\n * @param defaultValue - The default value of the injection if the `injectKey` has no provide.\n *\n * @returns The object with the inject configuration.\n */\nfunction getNewInjectObject<DefaultValue>(\n  injectKey: AnyInjectKey<unknown>,\n  componentKey: string,\n  defaultValue?: DefaultValue\n): InjectObjectConfig {\n  return { [componentKey]: { from: injectKey as string, default: { value: defaultValue } } };\n}\n\n/**\n * This function returns the computed configuration for bypass the `value` of the provide\n * of {@link XProvide}. This will be used to override the property decorated with {@link XInject}\n * with the computed.\n *\n * @param computedKey - The key used for the computed.\n * @param privateComponentKey - The \"private\" component property where the value is actually\n * injected.\n *\n * @returns The computed config to assign/merge with the component options.\n */\nfunction getComputedProperty(\n  computedKey: string,\n  privateComponentKey: string\n): ComponentOptions<Vue>['computed'] {\n  return {\n    [computedKey]: function (): unknown {\n      return (this as unknown as Record<string, { value: unknown }>)[privateComponentKey].value;\n    }\n  };\n}\n\n/**\n * Type guard to check if a provide configuration is a function.\n *\n * @param provide - The provide configuration.\n * @returns A boolean indicating if the passed provide is a function.\n */\nfunction isProvideFunction(\n  provide: ComponentOptions<Vue>['provide']\n): provide is (this: Vue) => ProvideObjectConfig {\n  return typeof provide === 'function';\n}\n"],"names":[],"mappings":";;;AAwCA;;;;;;;;;;;;;;;;;;;;;;;;;;SA0BgB,QAAQ,CAAO,UAA8B;IAC3D,OAAO,eAAe,CAAC,CAAC,OAAO,EAAE,YAAY;QAC3C,MAAM,eAAe,GAAG,OAAO,CAAC,OAAO,CAAC;QACxC,OAAO,CAAC,OAAO,GAAG;YAChB,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;YAC9E,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,UAAU,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;YAC7E,OAAO,MAAM,CAAC,MAAM,CAAC,qBAAqB,EAAE,gBAAgB,CAAC,CAAC;SAC/D,CAAC;KACH,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAkCgB,OAAO,CACrB,SAA6B,EAC7B,YAAmB;IAEnB,OAAO,eAAe,CAAC,CAAC,OAAO,EAAE,YAAY;QAC3C,MAAM,mBAAmB,GAAG,aAAa,YAAY,EAAE,CAAC;QACxD,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACrE,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,mBAAmB,EAAE,YAAY,CAAC,CAAC;QACzF,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,oBAAoB,EAAE,eAAe,CAAC,CAAC;QACtE,MAAM,yBAAyB,GAAG,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAC;QACzF,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,EAAE,yBAAyB,CAAC,CAAC;KACrF,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;;;;AAaA,SAAS,wBAAwB,CAC/B,eAAiD,EACjD,iBAAoC;IAEpC,IAAI,iBAAiB,CAAC,eAAe,CAAC,EAAE;QACtC,OAAO,eAAe,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAChD;SAAM;QACL,OAAO,eAAe,IAAI,EAAE,CAAC;KAC9B;AACH,CAAC;AAED;;;;;;;;;;;;AAYA,SAAS,mBAAmB,CAC1B,UAAiC,EACjC,YAAoB,EACpB,iBAAoC;IAEpC,OAAO;QACL,CAAC,UAAoB,GAAG;YACtB,IAAI,KAAK;gBACP,OAAO,iBAAiB,CAAC,YAAuC,CAAC,CAAC;aACnE;SACF;KACF,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;AAcA,SAAS,uBAAuB,CAC9B,cAA+C;IAE/C,IAAI,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;QACjC,OAAO,aAAa,CAAC,cAAc,CAAC,CAAC;KACtC;SAAM;QACL,OAAO,cAAc,IAAI,EAAE,CAAC;KAC7B;AACH,CAAC;AAED;;;;;;;;;;;;AAYA,SAAS,kBAAkB,CACzB,SAAgC,EAChC,YAAoB,EACpB,YAA2B;IAE3B,OAAO,EAAE,CAAC,YAAY,GAAG,EAAE,IAAI,EAAE,SAAmB,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;AAC7F,CAAC;AAED;;;;;;;;;;;AAWA,SAAS,mBAAmB,CAC1B,WAAmB,EACnB,mBAA2B;IAE3B,OAAO;QACL,CAAC,WAAW,GAAG;YACb,OAAQ,IAAsD,CAAC,mBAAmB,CAAC,CAAC,KAAK,CAAC;SAC3F;KACF,CAAC;AACJ,CAAC;AAED;;;;;;AAMA,SAAS,iBAAiB,CACxB,OAAyC;IAEzC,OAAO,OAAO,OAAO,KAAK,UAAU,CAAC;AACvC;;;;"}
+{"version":3,"file":"injection.decorators.js","sources":["../../../../src/components/decorators/injection.decorators.ts"],"sourcesContent":["import Vue, { ComponentOptions } from 'vue';\nimport { createDecorator } from 'vue-class-component';\nimport { arrayToObject } from '../../utils/array';\nimport { DecoratorFor } from '../../utils/types';\n\n/**\n * The type of the Vue Component provide configuration, narrowed to the object type.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/ban-types\ntype ProvideObjectConfig = Exclude<ComponentOptions<Vue>['provide'], (() => object) | undefined>;\n\n/**\n * The type of the Vue Component inject configuration, narrowed to the object type.\n *\n * @internal\n */\ntype InjectObjectConfig = Exclude<ComponentOptions<Vue>['inject'], string[] | undefined>;\n\n/**\n * Type of the key passed to {@link XProvide} and {@link XInject} to be type-safe. With this type\n * you can declare the type of the injected value directly in the injection key.\n *\n * @example\n * `const myKey: XInjectKey<Filter> = 'myFilter';`\n * `@XInject(myKey)`\n *\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport interface XInjectKey<Type> extends String {}\n\n/**\n * The union type for the different functions in this module.\n *\n * @internal\n */\ntype AnyInjectKey<Type> = XInjectKey<Type> | string;\n\n/**\n * Generates a provide function that returns an object with the injectable value returned in a\n * getter to keep its reactivity, using the default\n * {@link https://vuejs.org/v2/api/#provide-inject | Vue inject}. It overrides the provide key if\n * the parent provides the same key.\n *\n * @remarks The decorated property needs to be public for type inference to work.\n *\n * @param provideKey - The key used to provide. This key can be a 'string' or a 'XInject<Type>'.\n * This last type is to support type-safe injection. When this decorator is used, it is possible\n * to specify the type of the injected value. Take a look to the example below.\n * @returns Decorator with the provide configuration.\n *\n * @example\n * Type unsafe injection (but allowed):\n *     \\@XProvide('myKey')\n *\n * Type safe injection (recommended):\n *     const myKey: XInjectKey<Date> = 'myKey';\n *     \\@XProvide(myKey)\n *\n * This last one, you are specifying that the injected value with the key 'myKey' has the Date\n * type.\n *\n * @public\n */\nexport function XProvide<Type>(provideKey: AnyInjectKey<Type>): DecoratorFor<Type> {\n  return createDecorator((options, componentKey) => {\n    const previousProvide = options.provide;\n    options.provide = function <ComponentInstance extends Vue>(this: ComponentInstance) {\n      const previousProvideObject = getPreviousProvideObject(previousProvide, this);\n      const newProvideObject = getNewProvideObject(provideKey, componentKey, this);\n      return Object.assign(previousProvideObject, newProvideObject);\n    };\n  });\n}\n\n/**\n * Generates an inject configuration object to inject a value provided by {@link XProvide}.\n * This function injects the value into a private property of the component instance using the\n * default {@link https://vuejs.org/v2/api/#provide-inject | Vue inject}. This private property\n * is named as the decorated property but prefixed with `_x-inject_`.\n *\n * Why is this private property necessary? Well, the {@link XProvide} decorator, provides an object\n * with the shape \\{ value: any \\} being that value a getter to keep reactivity of the injected\n * value. This private property is to \"shortcut\" that object and directly inject the value itself.\n * Otherwise, you should access to the actual value using `.value`.\n *\n * The final step is done by a computed property. This has the same name as the decorated property.\n * This computed returns the inner value getter of the injected object. This way the decorated\n * property has finally the initial injected value.\n *\n * @remarks The decorated property needs to be public for type inference to work.\n *\n * @param injectKey - The key used to inject. This key can be a 'string' or a 'XInject<Type>'.\n * This last type is to support type-safe injection. When this decorator is used, it is possible\n * to specify the type of the injected value. Take a look to the example below.\n * @returns Decorator with the provide configuration.\n *\n * @param defaultValue - The default value to use if there is not value provided.\n *\n * @example\n * Type unsafe injection (but allowed):\n *     \\@XInject('myKey')\n *\n * Type safe injection (recommended):\n *     const myKey: XInjectKey<Date> = 'myKey';\n *     \\@XInject(myKey)\n *\n * @public\n */\nexport function XInject<Type>(\n  injectKey: AnyInjectKey<Type>,\n  defaultValue?: Type\n): DecoratorFor<Type> {\n  return createDecorator((options, componentKey) => {\n    const privateComponentKey = `_x-inject_${componentKey}`;\n    const previousInjectObject = getPreviousInjectObject(options.inject);\n    const newInjectObject = getNewInjectObject(injectKey, privateComponentKey, defaultValue);\n    options.inject = Object.assign(previousInjectObject, newInjectObject);\n    const computedToPrivateProperty = getComputedProperty(componentKey, privateComponentKey);\n    options.computed = Object.assign(options.computed ?? {}, computedToPrivateProperty);\n  });\n}\n\n/**\n * This function receives the previous provide of the component instance.\n * If the provide is a function, then returns it as an object invoking it with the component\n * instance.\n * If the provide is an object then it is returned directly.\n * If the provide is undefined, then an empty object returned.\n *\n * @param previousProvide - The {@link ComponentOptions.provide } configuration that exist before\n * applying this decorator.\n * @param componentInstance - A Vue Component instance to invoke the provide function.\n *\n * @returns {@link ProvideObjectConfig} With the provide configuration as an object.\n */\nfunction getPreviousProvideObject<ComponentInstance extends Vue>(\n  previousProvide: ComponentOptions<Vue>['provide'],\n  componentInstance: ComponentInstance\n): ProvideObjectConfig {\n  if (isProvideFunction(previousProvide)) {\n    return previousProvide.call(componentInstance);\n  } else {\n    return previousProvide ?? {};\n  }\n}\n\n/**\n * This function creates a new provide configuration, wrapping the value to provide inside a getter\n * called `value`. This is done to keep the reactivity of the injected value.\n *\n * @param provideKey - The key of the provide value.\n * @param componentKey - The name of the property decorated with {@link XProvide}.\n * @param componentInstance - The {@link Vue} instance of the component to invoke the provide\n * function.\n *\n * @returns {@link ProvideObjectConfig} The object with the key of the provideKey and the `value`\n * getter.\n */\nfunction getNewProvideObject<ComponentInstance extends Vue>(\n  provideKey: AnyInjectKey<unknown>,\n  componentKey: string,\n  componentInstance: ComponentInstance\n): ProvideObjectConfig {\n  return {\n    [provideKey as string]: {\n      get value() {\n        return componentInstance[componentKey as keyof ComponentInstance];\n      }\n    }\n  };\n}\n\n/**\n * This function returns the previous inject config as an object. This will be used to merge it with\n * the new inject configuration.\n * If the previous inject config of the component instance is an Array, then it converts it into an\n * object.\n * If the previous inject config of the component instance is an object, then it returns it\n * directly.\n * If the previous inject config of the component instance is undefined, then an empty object is\n * returned.\n *\n * @param previousInject - The previous inject configuration of the component instance.\n *\n * @returns {@link InjectObjectConfig} The object with the previous inject config in form of object.\n */\nfunction getPreviousInjectObject(\n  previousInject: ComponentOptions<Vue>['inject']\n): InjectObjectConfig {\n  if (Array.isArray(previousInject)) {\n    return arrayToObject(previousInject);\n  } else {\n    return previousInject ?? {};\n  }\n}\n\n/**\n * This function returns the new inject configuration. This will be merged with the previous inject\n * configuration.\n * It returns an object with the key and a string if no `defaultValue` is passed. Otherwise it\n * returns an object with `from` and `default` keys.\n *\n * @param injectKey - The key of the injected value.\n * @param componentKey - The name of the component key where the value will be injected.\n * @param defaultValue - The default value of the injection if the `injectKey` has no provide.\n *\n * @returns The object with the inject configuration.\n */\nfunction getNewInjectObject<DefaultValue>(\n  injectKey: AnyInjectKey<unknown>,\n  componentKey: string,\n  defaultValue?: DefaultValue\n): InjectObjectConfig {\n  return { [componentKey]: { from: injectKey as string, default: { value: defaultValue } } };\n}\n\n/**\n * This function returns the computed configuration for bypass the `value` of the provide\n * of {@link XProvide}. This will be used to override the property decorated with {@link XInject}\n * with the computed.\n *\n * @param computedKey - The key used for the computed.\n * @param privateComponentKey - The \"private\" component property where the value is actually\n * injected.\n *\n * @returns The computed config to assign/merge with the component options.\n */\nfunction getComputedProperty(\n  computedKey: string,\n  privateComponentKey: string\n): ComponentOptions<Vue>['computed'] {\n  return {\n    [computedKey]: function (): unknown {\n      return (this as unknown as Record<string, { value: unknown }>)[privateComponentKey].value;\n    }\n  };\n}\n\n/**\n * Type guard to check if a provide configuration is a function.\n *\n * @param provide - The provide configuration.\n * @returns A boolean indicating if the passed provide is a function.\n */\nfunction isProvideFunction(\n  provide: ComponentOptions<Vue>['provide']\n): provide is (this: Vue) => ProvideObjectConfig {\n  return typeof provide === 'function';\n}\n"],"names":[],"mappings":";;;AAwCA;;;;;;;;;;;;;;;;;;;;;;;;;;SA0BgB,QAAQ,CAAO,UAA8B;IAC3D,OAAO,eAAe,CAAC,CAAC,OAAO,EAAE,YAAY;QAC3C,MAAM,eAAe,GAAG,OAAO,CAAC,OAAO,CAAC;QACxC,OAAO,CAAC,OAAO,GAAG;YAChB,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;YAC9E,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,UAAU,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;YAC7E,OAAO,MAAM,CAAC,MAAM,CAAC,qBAAqB,EAAE,gBAAgB,CAAC,CAAC;SAC/D,CAAC;KACH,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAkCgB,OAAO,CACrB,SAA6B,EAC7B,YAAmB;IAEnB,OAAO,eAAe,CAAC,CAAC,OAAO,EAAE,YAAY;QAC3C,MAAM,mBAAmB,GAAG,aAAa,YAAY,EAAE,CAAC;QACxD,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACrE,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,mBAAmB,EAAE,YAAY,CAAC,CAAC;QACzF,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,oBAAoB,EAAE,eAAe,CAAC,CAAC;QACtE,MAAM,yBAAyB,GAAG,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAC;QACzF,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,EAAE,yBAAyB,CAAC,CAAC;KACrF,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;;;;;AAaA,SAAS,wBAAwB,CAC/B,eAAiD,EACjD,iBAAoC;IAEpC,IAAI,iBAAiB,CAAC,eAAe,CAAC,EAAE;QACtC,OAAO,eAAe,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAChD;SAAM;QACL,OAAO,eAAe,IAAI,EAAE,CAAC;KAC9B;AACH,CAAC;AAED;;;;;;;;;;;;AAYA,SAAS,mBAAmB,CAC1B,UAAiC,EACjC,YAAoB,EACpB,iBAAoC;IAEpC,OAAO;QACL,CAAC,UAAoB,GAAG;YACtB,IAAI,KAAK;gBACP,OAAO,iBAAiB,CAAC,YAAuC,CAAC,CAAC;aACnE;SACF;KACF,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;AAcA,SAAS,uBAAuB,CAC9B,cAA+C;IAE/C,IAAI,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;QACjC,OAAO,aAAa,CAAC,cAAc,CAAC,CAAC;KACtC;SAAM;QACL,OAAO,cAAc,IAAI,EAAE,CAAC;KAC7B;AACH,CAAC;AAED;;;;;;;;;;;;AAYA,SAAS,kBAAkB,CACzB,SAAgC,EAChC,YAAoB,EACpB,YAA2B;IAE3B,OAAO,EAAE,CAAC,YAAY,GAAG,EAAE,IAAI,EAAE,SAAmB,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;AAC7F,CAAC;AAED;;;;;;;;;;;AAWA,SAAS,mBAAmB,CAC1B,WAAmB,EACnB,mBAA2B;IAE3B,OAAO;QACL,CAAC,WAAW,GAAG;YACb,OAAQ,IAAsD,CAAC,mBAAmB,CAAC,CAAC,KAAK,CAAC;SAC3F;KACF,CAAC;AACJ,CAAC;AAED;;;;;;AAMA,SAAS,iBAAiB,CACxB,OAAyC;IAEzC,OAAO,OAAO,OAAO,KAAK,UAAU,CAAC;AACvC;;;;"}

package/js/index.js

@@ -221,7 +221,7 @@ export { default as IdentifierResult } from './x-modules/identifier-results/comp
 export { default as IdentifierResults } from './x-modules/identifier-results/components/identifier-results.vue.js';
 export { cancelFetchAndSaveIdentifierResults, fetchAndSaveIdentifierResults } from './x-modules/identifier-results/store/actions/fetch-and-save-identifier-results.action.js';
 export { fetchIdentifierResults } from './x-modules/identifier-results/store/actions/fetch-identifier-results.action.js';
-export { saveOrigin } from './x-modules/identifier-results/store/actions/save-origin.action.js';
+export { saveOrigin as saveIdentifierResultsOrigin } from './x-modules/identifier-results/store/actions/save-origin.action.js';
 export { saveQuery } from './x-modules/identifier-results/store/actions/save-query.action.js';
 export { identifierResultsEmitters } from './x-modules/identifier-results/store/emitters.js';
 export { identifierDetectionRegexp } from './x-modules/identifier-results/store/getters/identifier-detection-regexp.getter.js';
@@ -309,11 +309,16 @@ export { default as Spellcheck } from './x-modules/search/components/spellcheck.
 export { default as SpellcheckButton } from './x-modules/search/components/spellcheck-button.vue.js';
 export { cancelFetchAndSaveSearchResponse, fetchAndSaveSearchResponse } from './x-modules/search/store/actions/fetch-and-save-search-response.action.js';
 export { fetchSearchResponse } from './x-modules/search/store/actions/fetch-search-response.action.js';
+export { increasePageAppendingResults } from './x-modules/search/store/actions/increase-page-apending-results.action.js';
+export { resetState } from './x-modules/search/store/actions/reset-state.action.js';
+export { saveOrigin as saveSearchOrigin } from './x-modules/search/store/actions/save-origin.action.js';
+export { saveSearchResponse } from './x-modules/search/store/actions/save-search-response.action.js';
+export { setUrlParams as setSearchUrlParams } from './x-modules/search/store/actions/set-url-params.action.js';
 export { searchEmitters } from './x-modules/search/store/emitters.js';
 export { request as searchRequest } from './x-modules/search/store/getters/request.getter.js';
 export { query as searchQuery } from './x-modules/search/store/getters/query.getter.js';
 export { searchXStoreModule } from './x-modules/search/store/module.js';
-export { cancelFetchAndSaveSearchResponseWire, fetchAndSaveSearchResponseWire, increasePageAppendingResults, resetAppending, resetSpellcheckQuery, resetStateWire, saveOriginWire, searchWiring, setPageSize, setRelatedTags, setSearchExtraParams, setSearchPage, setSearchQuery, setSelectedFilters, setSort, setUrlParams } from './x-modules/search/wiring.js';
+export { cancelFetchAndSaveSearchResponseWire, fetchAndSaveSearchResponseWire, increasePageAppendingResultsWire, resetAppending, resetSpellcheckQuery, resetStateWire, saveOriginWire, searchWiring, setRelatedTags, setSearchExtraParams, setSearchPage, setSearchQuery, setSelectedFilters, setSort, setUrlParams } from './x-modules/search/wiring.js';
 export { searchXModule } from './x-modules/search/x-module.js';
 export { default as ClearSearchInput } from './x-modules/search-box/components/clear-search-input.vue.js';
 export { default as SearchButton } from './x-modules/search-box/components/search-button.vue.js';

package/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/plugins/x-plugin.mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-plugin.mixin.js","sources":["../../../src/plugins/x-plugin.mixin.ts"],"sourcesContent":["import Vue, { ComponentOptions } from 'vue';\nimport { Store } from 'vuex';\nimport { getXComponentXModuleName, isXComponent } from '../components/x-component.utils';\nimport { RootXStoreState } from '../store/store.types';\nimport { XEvent, XEventPayload } from '../wiring/events.types';\nimport { WireMetadata } from '../wiring/wiring.types';\nimport { FeatureLocation } from '../types/origin';\nimport { XModuleName } from '../x-modules/x-modules.types';\nimport { XBus } from './x-bus.types';\nimport { getAliasAPI } from './x-plugin.alias';\nimport { XComponentAPI, XComponentBusAPI } from './x-plugin.types';\n\ndeclare module 'vue/types/vue' {\n  export interface Vue {\n    $x: XComponentAPI;\n  }\n}\n\ndeclare module 'vue/types/options' {\n  export interface ComponentOptions<V, Data, Methods, Computed, PropsDef, Props> {\n    xModule?: XModuleName;\n  }\n}\n\ninterface PrivateExtendedVueComponent extends Vue {\n  $location?: FeatureLocation;\n  $store: Store<{ x: Partial<RootXStoreState['x']> }>;\n  xComponent: Vue | undefined;\n}\n\n/**\n * Vue global mixin that adds a `$x` object to every component with the {@link XComponentAPI}.\n *\n * @remarks It adds an injection property `origin` which value is included in the metadata of each\n * event emitted with `$x.emit`.\n *\n * @param bus - The {@link XBus} to use inside the components for emitting events.\n * @returns Mixin options which registers the component as X-Component and the $x.\n * @internal\n */\nexport const createXComponentAPIMixin = (\n  bus: XBus\n): ComponentOptions<Vue> & ThisType<PrivateExtendedVueComponent> => ({\n  inject: {\n    $location: {\n      from: 'location',\n      default: undefined\n    }\n  },\n  beforeCreate(this: PrivateExtendedVueComponent) {\n    this.xComponent = getRootXComponent(this);\n    const aliasAPI = getAliasAPI(this);\n    const busAPI = getBusAPI(bus, this);\n    this.$x = Object.assign(aliasAPI, busAPI);\n  }\n});\n\n/**\n * Creates an object containing the API related to the {@link XBus}.\n *\n * @param bus - The global {@link XBus}.\n * @param component - The component instance.\n *\n * @returns An object containing the {@link XComponentBusAPI}.\n * @internal\n */\nexport function getBusAPI(bus: XBus, component: PrivateExtendedVueComponent): XComponentBusAPI {\n  return {\n    emit: <Event extends XEvent>(\n      event: Event,\n      payload?: XEventPayload<Event>,\n      metadata: Omit<WireMetadata, 'moduleName'> = {}\n    ) => {\n      bus.emit(event, payload as any, createWireMetadata(component, metadata));\n      component.xComponent?.$emit(event, payload);\n    },\n    on: bus.on.bind(bus)\n  };\n}\n\n/**\n * Creates a wire metadata object based on the component and the provided metadata.\n *\n * @param component - The component this metadata belongs to.\n * @param metadata - Additional metadata emitted by the component.\n * @returns A {@link WireMetadata} object.\n * @internal\n */\nfunction createWireMetadata(\n  component: PrivateExtendedVueComponent,\n  metadata: Partial<WireMetadata>\n): WireMetadata {\n  return {\n    moduleName: getXComponentXModuleName(component.xComponent),\n    location: component.$location,\n    ...metadata\n  };\n}\n\n/**\n * Given a component, finds the root XComponent in the ancestors hierarchy.\n *\n * @param component - The component to find its root XComponent.\n * @returns The root XComponent or undefined if it has not.\n * @public\n */\nexport function getRootXComponent(component: Vue): Vue | undefined {\n  let xComponent: Vue | undefined;\n  while (component !== undefined && component !== null) {\n    if (isXComponent(component)) {\n      xComponent = component;\n    }\n    component = component.$parent;\n  }\n  return xComponent;\n}\n"],"names":[],"mappings":";;;AA8BA;;;;;;;;;;MAUa,wBAAwB,GAAG,CACtC,GAAS,MAC0D;IACnE,MAAM,EAAE;QACN,SAAS,EAAE;YACT,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;SACnB;KACF;IACD,YAAY;QACV,IAAI,CAAC,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QACnC,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;KAC3C;CACF,EAAE;AAEH;;;;;;;;;SASgB,SAAS,CAAC,GAAS,EAAE,SAAsC;IACzE,OAAO;QACL,IAAI,EAAE,CACJ,KAAY,EACZ,OAA8B,EAC9B,WAA6C,EAAE;YAE/C,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,OAAc,EAAE,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;YACzE,SAAS,CAAC,UAAU,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;SAC7C;QACD,EAAE,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC;KACrB,CAAC;AACJ,CAAC;AAED;;;;;;;;AAQA,SAAS,kBAAkB,CACzB,SAAsC,EACtC,QAA+B;IAE/B,OAAO;QACL,UAAU,EAAE,wBAAwB,CAAC,SAAS,CAAC,UAAU,CAAC;QAC1D,QAAQ,EAAE,SAAS,CAAC,SAAS;QAC7B,GAAG,QAAQ;KACZ,CAAC;AACJ,CAAC;AAED;;;;;;;SAOgB,iBAAiB,CAAC,SAAc;IAC9C,IAAI,UAA2B,CAAC;IAChC,OAAO,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,IAAI,EAAE;QACpD,IAAI,YAAY,CAAC,SAAS,CAAC,EAAE;YAC3B,UAAU,GAAG,SAAS,CAAC;SACxB;QACD,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC;KAC/B;IACD,OAAO,UAAU,CAAC;AACpB;;;;"}
+{"version":3,"file":"x-plugin.mixin.js","sources":["../../../src/plugins/x-plugin.mixin.ts"],"sourcesContent":["import Vue, { ComponentOptions } from 'vue';\nimport { Store } from 'vuex';\nimport { getXComponentXModuleName, isXComponent } from '../components/x-component.utils';\nimport { RootXStoreState } from '../store/store.types';\nimport { XEvent, XEventPayload } from '../wiring/events.types';\nimport { WireMetadata } from '../wiring/wiring.types';\nimport { FeatureLocation } from '../types/origin';\nimport { XModuleName } from '../x-modules/x-modules.types';\nimport { XBus } from './x-bus.types';\nimport { getAliasAPI } from './x-plugin.alias';\nimport { XComponentAPI, XComponentBusAPI } from './x-plugin.types';\n\ndeclare module 'vue/types/vue' {\n  export interface Vue {\n    $x: XComponentAPI;\n  }\n}\n\ndeclare module 'vue/types/options' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  export interface ComponentOptions<V, Data, Methods, Computed, PropsDef, Props> {\n    xModule?: XModuleName;\n  }\n}\n\ninterface PrivateExtendedVueComponent extends Vue {\n  $location?: FeatureLocation;\n  $store: Store<{ x: Partial<RootXStoreState['x']> }>;\n  xComponent: Vue | undefined;\n}\n\n/**\n * Vue global mixin that adds a `$x` object to every component with the {@link XComponentAPI}.\n *\n * @remarks It adds an injection property `origin` which value is included in the metadata of each\n * event emitted with `$x.emit`.\n *\n * @param bus - The {@link XBus} to use inside the components for emitting events.\n * @returns Mixin options which registers the component as X-Component and the $x.\n * @internal\n */\nexport const createXComponentAPIMixin = (\n  bus: XBus\n): ComponentOptions<Vue> & ThisType<PrivateExtendedVueComponent> => ({\n  inject: {\n    $location: {\n      from: 'location',\n      default: undefined\n    }\n  },\n  beforeCreate(this: PrivateExtendedVueComponent) {\n    this.xComponent = getRootXComponent(this);\n    const aliasAPI = getAliasAPI(this);\n    const busAPI = getBusAPI(bus, this);\n    this.$x = Object.assign(aliasAPI, busAPI);\n  }\n});\n\n/**\n * Creates an object containing the API related to the {@link XBus}.\n *\n * @param bus - The global {@link XBus}.\n * @param component - The component instance.\n *\n * @returns An object containing the {@link XComponentBusAPI}.\n * @internal\n */\nexport function getBusAPI(bus: XBus, component: PrivateExtendedVueComponent): XComponentBusAPI {\n  return {\n    emit: <Event extends XEvent>(\n      event: Event,\n      payload?: XEventPayload<Event>,\n      metadata: Omit<WireMetadata, 'moduleName'> = {}\n    ) => {\n      bus.emit(event, payload as any, createWireMetadata(component, metadata));\n      component.xComponent?.$emit(event, payload);\n    },\n    on: bus.on.bind(bus)\n  };\n}\n\n/**\n * Creates a wire metadata object based on the component and the provided metadata.\n *\n * @param component - The component this metadata belongs to.\n * @param metadata - Additional metadata emitted by the component.\n * @returns A {@link WireMetadata} object.\n * @internal\n */\nfunction createWireMetadata(\n  component: PrivateExtendedVueComponent,\n  metadata: Partial<WireMetadata>\n): WireMetadata {\n  return {\n    moduleName: getXComponentXModuleName(component.xComponent),\n    location: component.$location,\n    ...metadata\n  };\n}\n\n/**\n * Given a component, finds the root XComponent in the ancestors hierarchy.\n *\n * @param component - The component to find its root XComponent.\n * @returns The root XComponent or undefined if it has not.\n * @public\n */\nexport function getRootXComponent(component: Vue): Vue | undefined {\n  let xComponent: Vue | undefined;\n  while (component !== undefined && component !== null) {\n    if (isXComponent(component)) {\n      xComponent = component;\n    }\n    component = component.$parent;\n  }\n  return xComponent;\n}\n"],"names":[],"mappings":";;;AA+BA;;;;;;;;;;MAUa,wBAAwB,GAAG,CACtC,GAAS,MAC0D;IACnE,MAAM,EAAE;QACN,SAAS,EAAE;YACT,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;SACnB;KACF;IACD,YAAY;QACV,IAAI,CAAC,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QACnC,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;KAC3C;CACF,EAAE;AAEH;;;;;;;;;SASgB,SAAS,CAAC,GAAS,EAAE,SAAsC;IACzE,OAAO;QACL,IAAI,EAAE,CACJ,KAAY,EACZ,OAA8B,EAC9B,WAA6C,EAAE;YAE/C,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,OAAc,EAAE,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;YACzE,SAAS,CAAC,UAAU,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;SAC7C;QACD,EAAE,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC;KACrB,CAAC;AACJ,CAAC;AAED;;;;;;;;AAQA,SAAS,kBAAkB,CACzB,SAAsC,EACtC,QAA+B;IAE/B,OAAO;QACL,UAAU,EAAE,wBAAwB,CAAC,SAAS,CAAC,UAAU,CAAC;QAC1D,QAAQ,EAAE,SAAS,CAAC,SAAS;QAC7B,GAAG,QAAQ;KACZ,CAAC;AACJ,CAAC;AAED;;;;;;;SAOgB,iBAAiB,CAAC,SAAc;IAC9C,IAAI,UAA2B,CAAC;IAChC,OAAO,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,IAAI,EAAE;QACpD,IAAI,YAAY,CAAC,SAAS,CAAC,EAAE;YAC3B,UAAU,GAAG,SAAS,CAAC;SACxB;QACD,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC;KAC/B;IACD,OAAO,UAAU,CAAC;AACpB;;;;"}

package/js/store/utils/fetch-and-save-action.utils.js

@@ -8,7 +8,9 @@ import { cancellablePromise, CancelSymbol } from '../../utils/cancellable-promis
  * @public
  * @returns An action to fetch and save some data, and an action to cancel the last request.
  */
-function createFetchAndSaveActions({ fetch, onSuccess, onError, onCancel }) {
+function createFetchAndSaveActions({ fetch, onSuccess, 
+// eslint-disable-next-line no-console
+onError = console.error, onCancel }) {
     let cancelPreviousRequest;
     /**
      * Called asynchronously after a response has been received.
@@ -44,7 +46,7 @@ function createFetchAndSaveActions({ fetch, onSuccess, onError, onCancel }) {
     function handleError(context, error) {
         if (error !== CancelSymbol) {
             context.commit('setStatus', 'error');
-            onError?.(error);
+            onError(error);
         }
     }
     // eslint-disable-next-line

package/js/store/utils/fetch-and-save-action.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"fetch-and-save-action.utils.js","sources":["../../../../src/store/utils/fetch-and-save-action.utils.ts"],"sourcesContent":["import { cancellablePromise, CancelSymbol } from '../../utils/cancellable-promise';\nimport { XActionContext } from '../actions.types';\nimport { StatusMutations, StatusState } from './status-store.utils';\n\n/**\n * Utility to create an action that requests and save some data asynchronously, with the\n * option to cancel the request at any moment. This factory provides with the standard flow\n * for requesting, cancelling, handling errors for a module, while also taking care of its status.\n *\n * @public\n * @returns An action to fetch and save some data, and an action to cancel the last request.\n */\nexport function createFetchAndSaveActions<\n  // Using `object` type to ensure no actions/getters can be used.\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  Context extends XActionContext<StatusState, object, StatusMutations, object>,\n  Request,\n  Response\n>({\n  fetch,\n  onSuccess,\n  onError,\n  onCancel\n}: FetchAndSaveHooks<Context, Request, Response>): FetchAndSaveActions<Context, Request> {\n  let cancelPreviousRequest: undefined | (() => void);\n\n  /**\n   * Called asynchronously after a response has been received.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param response - The fetch response.\n   * @returns A Promise that resolves after handling the response.\n   */\n  function handleResponse(context: Context, response: Response): Promise<void> {\n    return Promise.resolve(onSuccess(context, response)).then(() => {\n      context.commit('setStatus', 'success');\n    });\n  }\n\n  /**\n   * Called immediately after a request has been cancelled.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   */\n  function handleCancel(context: Context): void {\n    cancelPreviousRequest = undefined;\n    context.commit('setStatus', 'success');\n    onCancel?.();\n  }\n\n  /**\n   * Called asynchronously whenever an error happens in the fetch and save flow.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param error - The error information.\n   */\n  function handleError(context: Context, error: unknown): void {\n    if (error !== CancelSymbol) {\n      context.commit('setStatus', 'error');\n      onError?.(error);\n    }\n  }\n\n  // eslint-disable-next-line\n  /** @see FetchAndSaveActions.fetchAndSave */\n  function fetchAndSave(context: Context, request: Request): Promise<void> {\n    cancelPrevious();\n    context.commit('setStatus', 'loading');\n    const { promise, cancel } = cancellablePromise(fetch(context, request), () => {\n      handleCancel(context);\n    });\n\n    cancelPreviousRequest = cancel;\n    return promise\n      .then(response => handleResponse(context, response))\n      .catch(error => handleError(context, error));\n  }\n\n  // eslint-disable-next-line\n  /** @see FetchAndSaveActions.cancelPrevious */\n  function cancelPrevious(): void {\n    cancelPreviousRequest?.();\n  }\n\n  return {\n    fetchAndSave,\n    cancelPrevious\n  };\n}\n\n/**\n * Options to use with the {@link createFetchAndSaveActions} factory.\n *\n * @public\n */\nexport interface FetchAndSaveHooks<\n  // Using `object` type to ensure no actions/getters can be used.\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  Context extends XActionContext<StatusState, object, StatusMutations, object>,\n  Request,\n  Response\n> {\n  /**\n   * Retrieves and returns asynchronously some data.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param request - The request object used for fetching.\n   * @returns A Promise resolved with the response of the fetch request.\n   */\n  fetch(context: Context, request: Request): Promise<Response>;\n  /**\n   * Asynchronous callback executed when the {@link FetchAndSaveHooks.fetch} is\n   * performed successfully.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param response - The data returned by {@link FetchAndSaveHooks.fetch}.\n   */\n  onSuccess(context: Context, response: Response): void;\n  /**\n   * Asynchronous callback executed when either the {@link FetchAndSaveHooks.fetch}\n   * or {@link FetchAndSaveHooks.onSuccess} methods fail.\n   *\n   * @param error - The error that triggered this callback.\n   */\n  onError?(error: unknown): void;\n  /**\n   * Synchronous callback executed when the request is cancelled. This can happen mainly for two\n   * reasons:\n   * - The {@link FetchAndSaveActions.cancelPrevious} action is dispatched.\n   * - A new {@link FetchAndSaveActions.fetchAndSave} is dispatched before the previous one was\n   * resolved.\n   */\n  onCancel?(): void;\n}\n\n/**\n * Actions returned from the {@link createFetchAndSaveActions}.\n *\n * @public\n */\nexport interface FetchAndSaveActions<\n  // Using `object` type to ensure no actions/getters can be used.\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  Context extends XActionContext<StatusState, object, StatusMutations, object>,\n  Request\n> {\n  /**\n   * Action that requests and saves the response.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @returns A promise that resolves after saving the response.\n   */\n  fetchAndSave: (context: Context, request: Request) => void | Promise<void>;\n  /**\n   * Action that cancels the previous request call if it stills in progress.\n   */\n  cancelPrevious: () => void;\n}\n"],"names":[],"mappings":";;AAIA;;;;;;;;SAQgB,yBAAyB,CAMvC,EACA,KAAK,EACL,SAAS,EACT,OAAO,EACP,QAAQ,EACsC;IAC9C,IAAI,qBAA+C,CAAC;;;;;;;;;IAUpD,SAAS,cAAc,CAAC,OAAgB,EAAE,QAAkB;QAC1D,OAAO,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;YACxD,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;SACxC,CAAC,CAAC;KACJ;;;;;;;IAQD,SAAS,YAAY,CAAC,OAAgB;QACpC,qBAAqB,GAAG,SAAS,CAAC;QAClC,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACvC,QAAQ,IAAI,CAAC;KACd;;;;;;;;IASD,SAAS,WAAW,CAAC,OAAgB,EAAE,KAAc;QACnD,IAAI,KAAK,KAAK,YAAY,EAAE;YAC1B,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;YACrC,OAAO,GAAG,KAAK,CAAC,CAAC;SAClB;KACF;;;IAID,SAAS,YAAY,CAAC,OAAgB,EAAE,OAAgB;QACtD,cAAc,EAAE,CAAC;QACjB,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACvC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,kBAAkB,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE;YACtE,YAAY,CAAC,OAAO,CAAC,CAAC;SACvB,CAAC,CAAC;QAEH,qBAAqB,GAAG,MAAM,CAAC;QAC/B,OAAO,OAAO;aACX,IAAI,CAAC,QAAQ,IAAI,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;aACnD,KAAK,CAAC,KAAK,IAAI,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;KAChD;;;IAID,SAAS,cAAc;QACrB,qBAAqB,IAAI,CAAC;KAC3B;IAED,OAAO;QACL,YAAY;QACZ,cAAc;KACf,CAAC;AACJ;;;;"}
+{"version":3,"file":"fetch-and-save-action.utils.js","sources":["../../../../src/store/utils/fetch-and-save-action.utils.ts"],"sourcesContent":["import { cancellablePromise, CancelSymbol } from '../../utils/cancellable-promise';\nimport { XActionContext } from '../actions.types';\nimport { StatusMutations, StatusState } from './status-store.utils';\n\n/**\n * Utility to create an action that requests and save some data asynchronously, with the\n * option to cancel the request at any moment. This factory provides with the standard flow\n * for requesting, cancelling, handling errors for a module, while also taking care of its status.\n *\n * @public\n * @returns An action to fetch and save some data, and an action to cancel the last request.\n */\nexport function createFetchAndSaveActions<\n  // Using `object` type to ensure no actions/getters can be used.\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  Context extends XActionContext<StatusState, object, StatusMutations, object>,\n  Request,\n  Response\n>({\n  fetch,\n  onSuccess,\n  // eslint-disable-next-line no-console\n  onError = console.error,\n  onCancel\n}: FetchAndSaveHooks<Context, Request, Response>): FetchAndSaveActions<Context, Request> {\n  let cancelPreviousRequest: undefined | (() => void);\n\n  /**\n   * Called asynchronously after a response has been received.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param response - The fetch response.\n   * @returns A Promise that resolves after handling the response.\n   */\n  function handleResponse(context: Context, response: Response): Promise<void> {\n    return Promise.resolve(onSuccess(context, response)).then(() => {\n      context.commit('setStatus', 'success');\n    });\n  }\n\n  /**\n   * Called immediately after a request has been cancelled.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   */\n  function handleCancel(context: Context): void {\n    cancelPreviousRequest = undefined;\n    context.commit('setStatus', 'success');\n    onCancel?.();\n  }\n\n  /**\n   * Called asynchronously whenever an error happens in the fetch and save flow.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param error - The error information.\n   */\n  function handleError(context: Context, error: unknown): void {\n    if (error !== CancelSymbol) {\n      context.commit('setStatus', 'error');\n      onError(error);\n    }\n  }\n\n  // eslint-disable-next-line\n  /** @see FetchAndSaveActions.fetchAndSave */\n  function fetchAndSave(context: Context, request: Request): Promise<void> {\n    cancelPrevious();\n    context.commit('setStatus', 'loading');\n    const { promise, cancel } = cancellablePromise(fetch(context, request), () => {\n      handleCancel(context);\n    });\n\n    cancelPreviousRequest = cancel;\n    return promise\n      .then(response => handleResponse(context, response))\n      .catch(error => handleError(context, error));\n  }\n\n  // eslint-disable-next-line\n  /** @see FetchAndSaveActions.cancelPrevious */\n  function cancelPrevious(): void {\n    cancelPreviousRequest?.();\n  }\n\n  return {\n    fetchAndSave,\n    cancelPrevious\n  };\n}\n\n/**\n * Options to use with the {@link createFetchAndSaveActions} factory.\n *\n * @public\n */\nexport interface FetchAndSaveHooks<\n  // Using `object` type to ensure no actions/getters can be used.\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  Context extends XActionContext<StatusState, object, StatusMutations, object>,\n  Request,\n  Response\n> {\n  /**\n   * Retrieves and returns asynchronously some data.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param request - The request object used for fetching.\n   * @returns A Promise resolved with the response of the fetch request.\n   */\n  fetch(context: Context, request: Request): Promise<Response>;\n  /**\n   * Asynchronous callback executed when the {@link FetchAndSaveHooks.fetch} is\n   * performed successfully.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @param response - The data returned by {@link FetchAndSaveHooks.fetch}.\n   */\n  onSuccess(context: Context, response: Response): void;\n  /**\n   * Asynchronous callback executed when either the {@link FetchAndSaveHooks.fetch}\n   * or {@link FetchAndSaveHooks.onSuccess} methods fail.\n   *\n   * @param error - The error that triggered this callback.\n   */\n  onError?(error: unknown): void;\n  /**\n   * Synchronous callback executed when the request is cancelled. This can happen mainly for two\n   * reasons:\n   * - The {@link FetchAndSaveActions.cancelPrevious} action is dispatched.\n   * - A new {@link FetchAndSaveActions.fetchAndSave} is dispatched before the previous one was\n   * resolved.\n   */\n  onCancel?(): void;\n}\n\n/**\n * Actions returned from the {@link createFetchAndSaveActions}.\n *\n * @public\n */\nexport interface FetchAndSaveActions<\n  // Using `object` type to ensure no actions/getters can be used.\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  Context extends XActionContext<StatusState, object, StatusMutations, object>,\n  Request\n> {\n  /**\n   * Action that requests and saves the response.\n   *\n   * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the\n   * actions, provided by Vuex.\n   * @returns A promise that resolves after saving the response.\n   */\n  fetchAndSave: (context: Context, request: Request) => void | Promise<void>;\n  /**\n   * Action that cancels the previous request call if it stills in progress.\n   */\n  cancelPrevious: () => void;\n}\n"],"names":[],"mappings":";;AAIA;;;;;;;;SAQgB,yBAAyB,CAMvC,EACA,KAAK,EACL,SAAS;AACT;AACA,OAAO,GAAG,OAAO,CAAC,KAAK,EACvB,QAAQ,EACsC;IAC9C,IAAI,qBAA+C,CAAC;;;;;;;;;IAUpD,SAAS,cAAc,CAAC,OAAgB,EAAE,QAAkB;QAC1D,OAAO,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;YACxD,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;SACxC,CAAC,CAAC;KACJ;;;;;;;IAQD,SAAS,YAAY,CAAC,OAAgB;QACpC,qBAAqB,GAAG,SAAS,CAAC;QAClC,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACvC,QAAQ,IAAI,CAAC;KACd;;;;;;;;IASD,SAAS,WAAW,CAAC,OAAgB,EAAE,KAAc;QACnD,IAAI,KAAK,KAAK,YAAY,EAAE;YAC1B,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;YACrC,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;KACF;;;IAID,SAAS,YAAY,CAAC,OAAgB,EAAE,OAAgB;QACtD,cAAc,EAAE,CAAC;QACjB,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACvC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,kBAAkB,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE;YACtE,YAAY,CAAC,OAAO,CAAC,CAAC;SACvB,CAAC,CAAC;QAEH,qBAAqB,GAAG,MAAM,CAAC;QAC/B,OAAO,OAAO;aACX,IAAI,CAAC,QAAQ,IAAI,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;aACnD,KAAK,CAAC,KAAK,IAAI,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;KAChD;;;IAID,SAAS,cAAc;QACrB,qBAAqB,IAAI,CAAC;KAC3B;IAED,OAAO;QACL,YAAY;QACZ,cAAc;KACf,CAAC;AACJ;;;;"}

package/js/store/utils/store-emitters.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"store-emitters.utils.js","sources":["../../../../src/store/utils/store-emitters.utils.ts"],"sourcesContent":["import { Dictionary } from '@empathyco/x-utils';\nimport { WatchOptions } from 'vue';\nimport { Returns } from '../../utils/types';\nimport { XEvent, XEventPayload } from '../../wiring/events.types';\nimport { AnyXStoreModule } from '../store.types';\n\n/**\n * Selects a part of the store state or getters (AKA \"getter\" inside\n * {@link https://vuex.vuejs.org/ | Vuex} watchers).\n *\n * @param ReturnType - The type of the state or getters property selected.\n * @param State - The type of the state of the {@link XModule} where this selector is used.\n * @param Getters - The type of the getters of the {@link XModule} where this selector is used.\n * @public\n */\nexport type SimpleStateSelector<\n  ReturnType,\n  State extends Dictionary,\n  Getters extends Dictionary\n> = (state: State, getters: Getters) => ReturnType;\n\n/**\n * Composition type of {@link SimpleStateSelector} which allows to indicate if the state selector\n * should be executed in first instance (first assignment of values). Selector is the\n * {@link SimpleStateSelector} and immediate flags if the selector should be executed when it is\n * initialized for first time.\n *\n * @param ReturnType - The type of the state or getters property selected.\n * @param State - The type of the state of the {@link XModule} where this selector is used.\n * @param Getters - The type of the getters of the {@link XModule} where this selector is used.\n * @public\n */\nexport interface StateSelector<ReturnType, State extends Dictionary, Getters extends Dictionary>\n  extends WatchOptions {\n  selector: SimpleStateSelector<ReturnType, State, Getters>;\n  /**\n   * Checks if the value of the selector has changed.\n   *\n   * @remarks\n   * This function exist because Vue will not stop reactivity propagation if the observed variable\n   * is an `object`, an `Array`, or the `deep` mode has been enabled.\n   *\n   * @param newValue - The new value.\n   * @param oldValue - The old value.\n   * @returns True if the value has really changed.\n   */\n  filter?(newValue: ReturnType, oldValue: ReturnType): boolean;\n}\n\n/**\n * Dictionary where the key is a {@link XEvent}, and the value is {@link SimpleStateSelector} or\n * {@link StateSelector}. This {@link SimpleStateSelector} or {@link StateSelector} can only\n * access the state and getters from the {@link XStoreModule} passed as param type. This\n * dictionary is used to emits a {@link XEvent} when the part of the store selected by\n * {@link SimpleStateSelector} changes.\n *\n * @param StoreModule - The store module that these store emitters will be able to access.\n * @public\n */\nexport type StoreEmitters<StoreModule extends AnyXStoreModule> = {\n  [Event in XEvent]?:\n    | SimpleStateSelector<\n        XEventPayload<Event>,\n        ReturnType<StoreModule['state']>,\n        Returns<StoreModule['getters']>\n      >\n    | StateSelector<\n        XEventPayload<Event>,\n        ReturnType<StoreModule['state']>,\n        Returns<StoreModule['getters']>\n      >;\n};\n/**\n * Alias for any simple state selector.\n *\n * @public\n */\nexport type AnySimpleStateSelector = SimpleStateSelector<any, any, any>;\n/**\n * Alias for any state selector.\n *\n * @public\n */\nexport type AnyStateSelector = StateSelector<any, any, any>;\n/**\n * Alias for any store emitters.\n *\n * @public\n */\nexport type AnyStoreEmitters = StoreEmitters<AnyXStoreModule>;\n\n/**\n * Helper function for creating type-safe {@link StoreEmitters}.\n *\n * @param storeModule - The store module that the emitters will be associated to.\n * @param emitters - The {@link StoreEmitters} to create.\n * @returns A type-safe function for storeEmitters.\n * @public\n */\nexport function createStoreEmitters<\n  Module extends AnyXStoreModule,\n  Emitters extends StoreEmitters<Module>\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\n>(storeModule: Module, emitters: Emitters): Emitters {\n  return emitters;\n}\n"],"names":[],"mappings":"AA2FA;;;;;;;;SAQgB,mBAAmB,CAIjC,WAAmB,EAAE,QAAkB;IACvC,OAAO,QAAQ,CAAC;AAClB;;;;"}
+{"version":3,"file":"store-emitters.utils.js","sources":["../../../../src/store/utils/store-emitters.utils.ts"],"sourcesContent":["import { Dictionary } from '@empathyco/x-utils';\nimport { WatchOptions } from 'vue';\nimport { Returns } from '../../utils/types';\nimport { XEvent, XEventPayload } from '../../wiring/events.types';\nimport { AnyXStoreModule } from '../store.types';\n\n/**\n * Selects a part of the store state or getters (AKA \"getter\" inside\n * {@link https://vuex.vuejs.org/ | Vuex} watchers).\n *\n * @param ReturnType - The type of the state or getters property selected.\n * @param State - The type of the state of the {@link XModule} where this selector is used.\n * @param Getters - The type of the getters of the {@link XModule} where this selector is used.\n * @public\n */\nexport type SimpleStateSelector<\n  ReturnType,\n  State extends Dictionary,\n  Getters extends Dictionary\n> = (state: State, getters: Getters) => ReturnType;\n\n/**\n * Composition type of {@link SimpleStateSelector} which allows to indicate if the state selector\n * should be executed in first instance (first assignment of values). Selector is the\n * {@link SimpleStateSelector} and immediate flags if the selector should be executed when it is\n * initialized for first time.\n *\n * @param ReturnType - The type of the state or getters property selected.\n * @param State - The type of the state of the {@link XModule} where this selector is used.\n * @param Getters - The type of the getters of the {@link XModule} where this selector is used.\n * @public\n */\nexport interface StateSelector<ReturnType, State extends Dictionary, Getters extends Dictionary>\n  extends WatchOptions {\n  selector: SimpleStateSelector<ReturnType, State, Getters>;\n  /**\n   * Checks if the value of the selector has changed.\n   *\n   * @remarks\n   * This function exist because Vue will not stop reactivity propagation if the observed variable\n   * is an `object`, an `Array`, or the `deep` mode has been enabled.\n   *\n   * @param newValue - The new value.\n   * @param oldValue - The old value.\n   * @returns True if the value has really changed.\n   */\n  filter?(newValue: ReturnType, oldValue: ReturnType): boolean;\n}\n\n/**\n * Dictionary where the key is a {@link XEvent}, and the value is {@link SimpleStateSelector} or\n * {@link StateSelector}. This {@link SimpleStateSelector} or {@link StateSelector} can only\n * access the state and getters from the {@link XStoreModule} passed as param type. This\n * dictionary is used to emits a {@link XEvent} when the part of the store selected by\n * {@link SimpleStateSelector} changes.\n *\n * @param StoreModule - The store module that these store emitters will be able to access.\n * @public\n */\nexport type StoreEmitters<StoreModule extends AnyXStoreModule> = {\n  [Event in XEvent]?:\n    | SimpleStateSelector<\n        XEventPayload<Event>,\n        ReturnType<StoreModule['state']>,\n        Returns<StoreModule['getters']>\n      >\n    | StateSelector<\n        XEventPayload<Event>,\n        ReturnType<StoreModule['state']>,\n        Returns<StoreModule['getters']>\n      >;\n};\n/**\n * Alias for any simple state selector.\n *\n * @public\n */\nexport type AnySimpleStateSelector = SimpleStateSelector<any, any, any>;\n/**\n * Alias for any state selector.\n *\n * @public\n */\nexport type AnyStateSelector = StateSelector<any, any, any>;\n/**\n * Alias for any store emitters.\n *\n * @public\n */\nexport type AnyStoreEmitters = StoreEmitters<AnyXStoreModule>;\n\n/**\n * Helper function for creating type-safe {@link StoreEmitters}.\n *\n * @param storeModule - The store module that the emitters will be associated to.\n * @param emitters - The {@link StoreEmitters} to create.\n * @returns A type-safe function for storeEmitters.\n * @public\n */\nexport function createStoreEmitters<\n  Module extends AnyXStoreModule,\n  Emitters extends StoreEmitters<Module>\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n>(storeModule: Module, emitters: Emitters): Emitters {\n  return emitters;\n}\n"],"names":[],"mappings":"AA2FA;;;;;;;;SAQgB,mBAAmB,CAIjC,WAAmB,EAAE,QAAkB;IACvC,OAAO,QAAQ,CAAC;AAClB;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div\n      v-if=\"isOpen\"\n      @mousedown.prevent\n      @focusin=\"open\"\n      @focusout=\"close\"\n      class=\"x-empathize\"\n      data-test=\"empathize\"\n    >\n      <!-- @slot (Required) Modal container content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import Component from 'vue-class-component';\n  import { Prop } from 'vue-property-decorator';\n  import { XOn } from '../../../components/decorators/bus.decorators';\n  import { Debounce } from '../../../components/decorators/debounce.decorators';\n  import { NoElement } from '../../../components/no-element';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { WireMetadata, XEvent } from '../../../wiring';\n  import { empathizeXModule } from '../x-module';\n\n  /**\n   * Component containing the empathize. It has a required slot to define its content and two props\n   * to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(empathizeXModule)]\n  })\n  export default class Empathize extends Vue {\n    /**\n     * Animation component that will be used to animate the empathize.\n     *\n     * @public\n     */\n    @Prop({ default: () => NoElement })\n    protected animation!: Vue;\n\n    /**\n     * Array of {@link XEvent | xEvents} to open the empathize.\n     *\n     * @public\n     */\n    @Prop({ default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'] })\n    protected eventsToOpenEmpathize!: XEvent[];\n\n    /**\n     * Array of {@link XEvent | xEvents} to close the empathize.\n     *\n     * @public\n     */\n    @Prop({\n      default: () => [\n        'UserClosedEmpathize',\n        'UserSelectedASuggestion',\n        'UserPressedEnter',\n        'UserBlurredSearchBox'\n      ]\n    })\n    protected eventsToCloseEmpathize!: XEvent[];\n\n    /**\n     * The modal container is open.\n     *\n     * @internal\n     */\n    protected isOpen = false;\n\n    /**\n     * Open empathize. This method will be executed on any event in\n     * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root element.\n     *\n     * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n     * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n     *\n     * @internal\n     */\n    @XOn(component => (component as Empathize).eventsToOpenEmpathize)\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\n    open(payload: unknown, metadata: WireMetadata): void {\n      this.changeOpenState(true, metadata);\n    }\n\n    /**\n     * Close empathize. This method will be executed on any event in\n     * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n     * element.\n     *\n     * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n     * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n     *\n     * @internal\n     */\n    @XOn(component => (component as Empathize).eventsToCloseEmpathize)\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\n    close(payload: unknown, metadata: WireMetadata): void {\n      this.changeOpenState(false, metadata);\n    }\n\n    /**\n     * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpenState`\n     * parameter. Also emits the {@link XEvent | XEvents} `EmpathizeOpened` or `EmpathizeClosed` if\n     * the state really changes.\n     *\n     * @param newOpenState - The new state to assign to {@link Empathize.isOpen}.\n     * @param metadata - The {@link WireMetadata} to emit the {@link XEvent | XEvents}. If is\n     * undefined, a this component is used as source of info for the metadata.\n     *\n     * @internal\n     */\n    @Debounce(0)\n    changeOpenState(newOpenState: boolean, metadata: WireMetadata): void {\n      if (this.isOpen !== newOpenState) {\n        this.isOpen = newOpenState;\n        this.$x.emit(\n          this.isOpen ? 'EmpathizeOpened' : 'EmpathizeClosed',\n          undefined,\n          metadata ?? { moduleName: 'empathize', target: this.$el }\n        );\n      }\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n  'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n  <template #default>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions/>\n      <PopularSearches/>\n      <HistoryQueries/>\n    </BaseKeyboardNavigation>\n  </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n  :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n  :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n  <template #default>\n    Please, type a query in the Search Box.\n  </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n  <template #default>\n    <PopularSearches/>\n  </template>\n</Empathize>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `EmpathizeOpened`: the event is emitted after receiving an event to change the state `isOpen` to\n  `true`. The event payload is undefined and can have a metadata with the module and the element\n  that emitted it.\n- `EmpathizeClosed`: the event is emitted after receiving an event to change the state `isOpen` to\n  `false`. The event payload is undefined and can have a metadata with the module and the element\n  that emitted it.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div\n      v-if=\"isOpen\"\n      @mousedown.prevent\n      @focusin=\"open\"\n      @focusout=\"close\"\n      class=\"x-empathize\"\n      data-test=\"empathize\"\n    >\n      <!-- @slot (Required) Modal container content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import Component from 'vue-class-component';\n  import { Prop } from 'vue-property-decorator';\n  import { XOn } from '../../../components/decorators/bus.decorators';\n  import { Debounce } from '../../../components/decorators/debounce.decorators';\n  import { NoElement } from '../../../components/no-element';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { WireMetadata, XEvent } from '../../../wiring';\n  import { empathizeXModule } from '../x-module';\n\n  /**\n   * Component containing the empathize. It has a required slot to define its content and two props\n   * to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(empathizeXModule)]\n  })\n  export default class Empathize extends Vue {\n    /**\n     * Animation component that will be used to animate the empathize.\n     *\n     * @public\n     */\n    @Prop({ default: () => NoElement })\n    protected animation!: Vue;\n\n    /**\n     * Array of {@link XEvent | xEvents} to open the empathize.\n     *\n     * @public\n     */\n    @Prop({ default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'] })\n    protected eventsToOpenEmpathize!: XEvent[];\n\n    /**\n     * Array of {@link XEvent | xEvents} to close the empathize.\n     *\n     * @public\n     */\n    @Prop({\n      default: () => [\n        'UserClosedEmpathize',\n        'UserSelectedASuggestion',\n        'UserPressedEnter',\n        'UserBlurredSearchBox'\n      ]\n    })\n    protected eventsToCloseEmpathize!: XEvent[];\n\n    /**\n     * The modal container is open.\n     *\n     * @internal\n     */\n    protected isOpen = false;\n\n    /**\n     * Open empathize. This method will be executed on any event in\n     * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root element.\n     *\n     * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n     * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n     *\n     * @internal\n     */\n    @XOn(component => (component as Empathize).eventsToOpenEmpathize)\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    open(payload: unknown, metadata: WireMetadata): void {\n      this.changeOpenState(true, metadata);\n    }\n\n    /**\n     * Close empathize. This method will be executed on any event in\n     * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n     * element.\n     *\n     * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n     * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n     *\n     * @internal\n     */\n    @XOn(component => (component as Empathize).eventsToCloseEmpathize)\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    close(payload: unknown, metadata: WireMetadata): void {\n      this.changeOpenState(false, metadata);\n    }\n\n    /**\n     * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpenState`\n     * parameter. Also emits the {@link XEvent | XEvents} `EmpathizeOpened` or `EmpathizeClosed` if\n     * the state really changes.\n     *\n     * @param newOpenState - The new state to assign to {@link Empathize.isOpen}.\n     * @param metadata - The {@link WireMetadata} to emit the {@link XEvent | XEvents}. If is\n     * undefined, a this component is used as source of info for the metadata.\n     *\n     * @internal\n     */\n    @Debounce(0)\n    changeOpenState(newOpenState: boolean, metadata: WireMetadata): void {\n      if (this.isOpen !== newOpenState) {\n        this.isOpen = newOpenState;\n        this.$x.emit(\n          this.isOpen ? 'EmpathizeOpened' : 'EmpathizeClosed',\n          undefined,\n          metadata ?? { moduleName: 'empathize', target: this.$el }\n        );\n      }\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n  'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n  <template #default>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions/>\n      <PopularSearches/>\n      <HistoryQueries/>\n    </BaseKeyboardNavigation>\n  </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n  :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n  :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n  <template #default>\n    Please, type a query in the Search Box.\n  </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n  <template #default>\n    <PopularSearches/>\n  </template>\n</Empathize>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `EmpathizeOpened`: the event is emitted after receiving an event to change the state `isOpen` to\n  `true`. The event payload is undefined and can have a metadata with the module and the element\n  that emitted it.\n- `EmpathizeClosed`: the event is emitted after receiving an event to change the state `isOpen` to\n  `false`. The event payload is undefined and can have a metadata with the module and the element\n  that emitted it.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -33,7 +33,7 @@ let Empathize = class Empathize extends Vue {
      *
      * @internal
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     open(payload, metadata) {
         this.changeOpenState(true, metadata);
     }
@@ -47,7 +47,7 @@ let Empathize = class Empathize extends Vue {
      *
      * @internal
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     close(payload, metadata) {
         this.changeOpenState(false, metadata);
     }

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

@@ -1 +1 @@
-{"version":3,"file":"empathize.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport Component from 'vue-class-component';\nimport { Prop } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { Debounce } from '../../../components/decorators/debounce.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { WireMetadata, XEvent } from '../../../wiring';\nimport { empathizeXModule } from '../x-module';\n\n/**\n * Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(empathizeXModule)]\n})\nexport default class Empathize extends Vue {\n  /**\n   * Animation component that will be used to animate the empathize.\n   *\n   * @public\n   */\n  @Prop({ default: () => NoElement })\n  protected animation!: Vue;\n\n  /**\n   * Array of {@link XEvent | xEvents} to open the empathize.\n   *\n   * @public\n   */\n  @Prop({ default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'] })\n  protected eventsToOpenEmpathize!: XEvent[];\n\n  /**\n   * Array of {@link XEvent | xEvents} to close the empathize.\n   *\n   * @public\n   */\n  @Prop({\n    default: () => [\n      'UserClosedEmpathize',\n      'UserSelectedASuggestion',\n      'UserPressedEnter',\n      'UserBlurredSearchBox'\n    ]\n  })\n  protected eventsToCloseEmpathize!: XEvent[];\n\n  /**\n   * The modal container is open.\n   *\n   * @internal\n   */\n  protected isOpen = false;\n\n  /**\n   * Open empathize. This method will be executed on any event in\n   * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root element.\n   *\n   * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n   * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n   *\n   * @internal\n   */\n  @XOn(component => (component as Empathize).eventsToOpenEmpathize)\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\n  open(payload: unknown, metadata: WireMetadata): void {\n    this.changeOpenState(true, metadata);\n  }\n\n  /**\n   * Close empathize. This method will be executed on any event in\n   * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n   * element.\n   *\n   * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n   * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n   *\n   * @internal\n   */\n  @XOn(component => (component as Empathize).eventsToCloseEmpathize)\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental\n  close(payload: unknown, metadata: WireMetadata): void {\n    this.changeOpenState(false, metadata);\n  }\n\n  /**\n   * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpenState`\n   * parameter. Also emits the {@link XEvent | XEvents} `EmpathizeOpened` or `EmpathizeClosed` if\n   * the state really changes.\n   *\n   * @param newOpenState - The new state to assign to {@link Empathize.isOpen}.\n   * @param metadata - The {@link WireMetadata} to emit the {@link XEvent | XEvents}. If is\n   * undefined, a this component is used as source of info for the metadata.\n   *\n   * @internal\n   */\n  @Debounce(0)\n  changeOpenState(newOpenState: boolean, metadata: WireMetadata): void {\n    if (this.isOpen !== newOpenState) {\n      this.isOpen = newOpenState;\n      this.$x.emit(\n        this.isOpen ? 'EmpathizeOpened' : 'EmpathizeClosed',\n        undefined,\n        metadata ?? { moduleName: 'empathize', target: this.$el }\n      );\n    }\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;;;;AASA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,GAAG;IAA1C;;;;;;;QAqCY,WAAM,GAAG,KAAK,CAAC;KAuD1B;;;;;;;;;;;IA1CC,IAAI,CAAC,OAAgB,EAAE,QAAsB;QAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KACtC;;;;;;;;;;;;IAcD,KAAK,CAAC,OAAgB,EAAE,QAAsB;QAC5C,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;KACvC;;;;;;;;;;;;IAcD,eAAe,CAAC,YAAqB,EAAE,QAAsB;QAC3D,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,EAAE;YAChC,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;YAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,iBAAiB,EACnD,SAAS,EACT,QAAQ,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,CAC1D,CAAC;SACH;KACF;CACF,CAAA;AArFC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;4CACT;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,CAAC,EAAE,CAAC;wDACrD;AAe3C;IARC,IAAI,CAAC;QACJ,OAAO,EAAE,MAAM;YACb,qBAAqB;YACrB,yBAAyB;YACzB,kBAAkB;YAClB,sBAAsB;SACvB;KACF,CAAC;yDAC0C;AAoB5C;IAFC,GAAG,CAAC,SAAS,IAAK,SAAuB,CAAC,qBAAqB,CAAC;qCAIhE;AAcD;IAFC,GAAG,CAAC,SAAS,IAAK,SAAuB,CAAC,sBAAsB,CAAC;sCAIjE;AAcD;IADC,QAAQ,CAAC,CAAC,CAAC;gDAUX;AA3FkB,SAAS;IAH7B,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;KAC5C,CAAC;GACmB,SAAS,CA4F7B;aA5FoB,SAAS;;;;"}
+{"version":3,"file":"empathize.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport Component from 'vue-class-component';\nimport { Prop } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { Debounce } from '../../../components/decorators/debounce.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { WireMetadata, XEvent } from '../../../wiring';\nimport { empathizeXModule } from '../x-module';\n\n/**\n * Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(empathizeXModule)]\n})\nexport default class Empathize extends Vue {\n  /**\n   * Animation component that will be used to animate the empathize.\n   *\n   * @public\n   */\n  @Prop({ default: () => NoElement })\n  protected animation!: Vue;\n\n  /**\n   * Array of {@link XEvent | xEvents} to open the empathize.\n   *\n   * @public\n   */\n  @Prop({ default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'] })\n  protected eventsToOpenEmpathize!: XEvent[];\n\n  /**\n   * Array of {@link XEvent | xEvents} to close the empathize.\n   *\n   * @public\n   */\n  @Prop({\n    default: () => [\n      'UserClosedEmpathize',\n      'UserSelectedASuggestion',\n      'UserPressedEnter',\n      'UserBlurredSearchBox'\n    ]\n  })\n  protected eventsToCloseEmpathize!: XEvent[];\n\n  /**\n   * The modal container is open.\n   *\n   * @internal\n   */\n  protected isOpen = false;\n\n  /**\n   * Open empathize. This method will be executed on any event in\n   * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root element.\n   *\n   * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n   * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n   *\n   * @internal\n   */\n  @XOn(component => (component as Empathize).eventsToOpenEmpathize)\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  open(payload: unknown, metadata: WireMetadata): void {\n    this.changeOpenState(true, metadata);\n  }\n\n  /**\n   * Close empathize. This method will be executed on any event in\n   * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n   * element.\n   *\n   * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n   * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n   *\n   * @internal\n   */\n  @XOn(component => (component as Empathize).eventsToCloseEmpathize)\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  close(payload: unknown, metadata: WireMetadata): void {\n    this.changeOpenState(false, metadata);\n  }\n\n  /**\n   * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpenState`\n   * parameter. Also emits the {@link XEvent | XEvents} `EmpathizeOpened` or `EmpathizeClosed` if\n   * the state really changes.\n   *\n   * @param newOpenState - The new state to assign to {@link Empathize.isOpen}.\n   * @param metadata - The {@link WireMetadata} to emit the {@link XEvent | XEvents}. If is\n   * undefined, a this component is used as source of info for the metadata.\n   *\n   * @internal\n   */\n  @Debounce(0)\n  changeOpenState(newOpenState: boolean, metadata: WireMetadata): void {\n    if (this.isOpen !== newOpenState) {\n      this.isOpen = newOpenState;\n      this.$x.emit(\n        this.isOpen ? 'EmpathizeOpened' : 'EmpathizeClosed',\n        undefined,\n        metadata ?? { moduleName: 'empathize', target: this.$el }\n      );\n    }\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;;;;AASA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,GAAG;IAA1C;;;;;;;QAqCY,WAAM,GAAG,KAAK,CAAC;KAuD1B;;;;;;;;;;;IA1CC,IAAI,CAAC,OAAgB,EAAE,QAAsB;QAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KACtC;;;;;;;;;;;;IAcD,KAAK,CAAC,OAAgB,EAAE,QAAsB;QAC5C,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;KACvC;;;;;;;;;;;;IAcD,eAAe,CAAC,YAAqB,EAAE,QAAsB;QAC3D,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,EAAE;YAChC,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;YAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,iBAAiB,EACnD,SAAS,EACT,QAAQ,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,CAC1D,CAAC;SACH;KACF;CACF,CAAA;AArFC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;4CACT;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,CAAC,EAAE,CAAC;wDACrD;AAe3C;IARC,IAAI,CAAC;QACJ,OAAO,EAAE,MAAM;YACb,qBAAqB;YACrB,yBAAyB;YACzB,kBAAkB;YAClB,sBAAsB;SACvB;KACF,CAAC;yDAC0C;AAoB5C;IAFC,GAAG,CAAC,SAAS,IAAK,SAAuB,CAAC,qBAAqB,CAAC;qCAIhE;AAcD;IAFC,GAAG,CAAC,SAAS,IAAK,SAAuB,CAAC,sBAAsB,CAAC;sCAIjE;AAcD;IADC,QAAQ,CAAC,CAAC,CAAC;gDAUX;AA3FkB,SAAS;IAH7B,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;KAC5C,CAAC;GACmB,SAAS,CA4F7B;aA5FoB,SAAS;;;;"}