@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

@@ -9,28 +9,28 @@ The `SortList` component allows user to select the search results order. This co
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: Vue.DefineComponent<{
     items: {
-        type: PropType<string[]>;
+        type: Vue.PropType<string[]>;
         required: true;
     };
     animation: {
-        type: PropType<string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>>;
-        default: () => "ul";
+        type: Vue.PropType<string | typeof Vue>;
+        default: () => string;
     };
 }, {
-    listItems: import("vue").ComputedRef<SortListItem[]>;
-    selectedSort: import("vue").ComputedRef<any>;
-}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    listItems: Vue.ComputedRef<SortListItem[]>;
+    selectedSort: Vue.ComputedRef<any>;
+}, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
-        type: PropType<string[]>;
+        type: Vue.PropType<string[]>;
         required: true;
     };
     animation: {
-        type: PropType<string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>>;
-        default: () => "ul";
+        type: Vue.PropType<string | typeof Vue>;
+        default: () => string;
     };
 }>>, {
-    animation: string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>;
-}>
+    animation: string | typeof Vue;
+}, {}>
 ```

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

@@ -9,30 +9,30 @@ The `SortPickerList` component allows user to select the search results order. T
 **Signature:**
 
 ```typescript
-_default: import("vue").DefineComponent<{
+_default: Vue.DefineComponent<{
     items: {
-        type: PropType<string[]>;
+        type: Vue.PropType<string[]>;
         required: true;
     };
     animation: {
-        type: PropType<string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>>;
-        default: () => "div";
+        type: Vue.PropType<string | typeof Vue>;
+        default: () => string;
     };
     buttonClass: StringConstructor;
 }, {
-    listItems: import("vue").ComputedRef<SortPickerItem[]>;
-    selectedSort: import("vue").ComputedRef<any>;
-}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    listItems: Vue.ComputedRef<SortPickerItem[]>;
+    selectedSort: Vue.ComputedRef<any>;
+}, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
-        type: PropType<string[]>;
+        type: Vue.PropType<string[]>;
         required: true;
     };
     animation: {
-        type: PropType<string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>>;
-        default: () => "div";
+        type: Vue.PropType<string | typeof Vue>;
+        default: () => string;
     };
     buttonClass: StringConstructor;
 }>>, {
-    animation: string | import("vue").VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>;
-}>
+    animation: string | typeof Vue;
+}, {}>
 ```

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

@@ -2,7 +2,7 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [Spellcheck](./x-components.spellcheck.md)
 
-## Spellcheck class
+## Spellcheck variable
 
 The `Spellcheck` component allows to inform the user with a friendly message that he might have misspelled the search query. This message can be set using the default slot of the component, which gives access to the searched query using the `query` scope property, and the spellchecked query proposal, using the `spellcheckedQuery` scope property.
 
@@ -11,14 +11,8 @@ The component will only render itself if the `spellcheckedQuery` property has va
 **Signature:**
 
 ```typescript
-export default class Spellcheck extends Vue 
+_default: import("vue").DefineComponent<{}, {
+    query: import("vue").ComputedRef<any>;
+    spellcheckedQuery: import("vue").ComputedRef<any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [query](./x-components.spellcheck.query.md) |  | string | The query from the search state. |
-|  [spellcheckedQuery](./x-components.spellcheck.spellcheckedquery.md) |  | string | The spellcheckedQuery from the search state. |
-

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

@@ -2,26 +2,16 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [SpellcheckButton](./x-components.spellcheckbutton.md)
 
-## SpellcheckButton class
+## SpellcheckButton variable
 
 A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-components.xeventstypes.useracceptedaquery.md) and [XEventsTypes.UserAcceptedSpellcheckQuery](./x-components.xeventstypes.useracceptedspellcheckquery.md) events, expressing the user intention to set the spellchecked query.
 
 **Signature:**
 
 ```typescript
-export default class SpellcheckButton extends Vue 
+_default: import("vue").DefineComponent<{}, {
+    el: import("vue").Ref<HTMLElement | undefined>;
+    spellcheckedQuery: import("vue").ComputedRef<any>;
+    emitEvents: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [spellcheckedQuery](./x-components.spellcheckbutton.spellcheckedquery.md) |  | string | The spellcheckedQuery from the search state. |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [emitEvents()](./x-components.spellcheckbutton.emitevents.md) | <code>protected</code> | Emits events when the button is clicked. |
-

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

@@ -2,21 +2,47 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [StaggeredFadeAndSlide](./x-components.staggeredfadeandslide.md)
 
-## StaggeredFadeAndSlide class
+## StaggeredFadeAndSlide variable
 
-Renders a transition group wrapping the elements passed in the default slot and animating them with an staggered fade and slide animation.
+Renders a transition group wrapping the elements passed in the default slot and animating them with a staggered fade and slide animation.
 
 **Signature:**
 
 ```typescript
-export default class StaggeredFadeAndSlide extends StaggeredFadeAndSlide_base 
+__default__: import("vue").DefineComponent<{
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    stagger: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    name: import("vue").ComputedRef<string>;
+    onEnter: (el: Element, done: () => void) => void;
+    onAfterEnter: (el: Element) => void;
+    transitionDurationInMs: string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    stagger: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    appear: boolean;
+    tag: string;
+    stagger: number;
+}, {}>
 ```
-**Extends:** StaggeredFadeAndSlide\_base
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [animationName](./x-components.staggeredfadeandslide.animationname.md) | <code>protected</code> | string | The name of the animation. |
-|  [appear](./x-components.staggeredfadeandslide.appear.md) |  | boolean | Indicates if the transition must be applied on the initial render of the node. |
-

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

@@ -2,31 +2,40 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [Tagging](./x-components.tagging.md)
 
-## Tagging class
+## Tagging variable
 
 This component enables and manages the sending of information to the \[Empathy Tagging API\](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html). It allows you to activate or deactivate the session id management through the `consent` prop.
 
 **Signature:**
 
 ```typescript
-export default class Tagging extends Vue 
+_default: import("vue").DefineComponent<{
+    clickedResultStorageTTLMs: {
+        type: NumberConstructor;
+        default: number;
+    };
+    clickedResultStorageKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    sessionTTLMs: NumberConstructor;
+    queryTaggingDebounceMs: NumberConstructor;
+    consent: BooleanConstructor;
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    clickedResultStorageTTLMs: {
+        type: NumberConstructor;
+        default: number;
+    };
+    clickedResultStorageKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    sessionTTLMs: NumberConstructor;
+    queryTaggingDebounceMs: NumberConstructor;
+    consent: BooleanConstructor;
+}>>, {
+    clickedResultStorageTTLMs: number;
+    clickedResultStorageKey: string;
+    consent: boolean;
+}, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [activeConsent](./x-components.tagging.activeconsent.md) | <code>readonly</code> | boolean | The active consent, selected from the <code>consent</code> prop and the <code>snippetConfig.consent</code> property. False by default. |
-|  [clickedResultStorageKey](./x-components.tagging.clickedresultstoragekey.md) |  | string | The Object key of the [Result](./x-types.result.md) clicked by the user that will be used as id for the storage. By default, the Result url will be used. |
-|  [clickedResultStorageTTLMs](./x-components.tagging.clickedresultstoragettlms.md) |  | number | The TTL in milliseconds for storing the clicked result info. |
-|  [config](./x-components.tagging.config.md) | <code>readonly</code> | [TaggingConfig](./x-components.taggingconfig.md) |  |
-|  [consent?](./x-components.tagging.consent.md) | <code>protected</code> | boolean | _(Optional)_ The consent to be emitted. |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [created()](./x-components.tagging.created.md) |  | To emit the event that PDP is loaded just when the snippet config includes a product id. |
-|  [render()](./x-components.tagging.render.md) |  |  |
-

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

@@ -2,28 +2,15 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [UrlHandler](./x-components.urlhandler.md)
 
-## UrlHandler class
+## UrlHandler variable
 
 This component manages the browser URL parameters to preserve them through reloads and browser history navigation. It allow to configure the default url parameter names using its attributes. This component doesn't render elements to the DOM.
 
 **Signature:**
 
 ```typescript
-export default class UrlHandler extends Vue 
+_default: import("vue").DefineComponent<{}, {
+    onPageShow: (event: PageTransitionEvent) => void;
+    emitEvents: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [initialExtraParams](./x-components.urlhandler.initialextraparams.md) |  | Dictionary&lt;unknown&gt; |  |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [created()](./x-components.urlhandler.created.md) |  | To emit the Url events just when the URL is load, and before the components mounted events and state changes, we do it in the created of this component. |
-|  [updateUrlWithPush(newUrlParams)](./x-components.urlhandler.updateurlwithpush.md) |  | Updates the browser URL with the new [UrlParams](./x-components.urlparams.md) using the history <code>pushState</code> method. |
-|  [updateUrlWithReplace(newUrlParams)](./x-components.urlhandler.updateurlwithreplace.md) |  | Updates the browser URL with the new [UrlParams](./x-components.urlparams.md) using the history <code>replaceState</code> method. |
-

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

@@ -9,11 +9,16 @@ Function which returns the `$x` object from the current component instance.
 **Signature:**
 
 ```typescript
-export declare function use$x(): UseXComponentAPI;
+export declare function use$x(): import("./use-alias-api").UseAliasAPI & {
+    on: <Event_1 extends keyof import("..").XEventsTypes, Metadata extends boolean>(event: Event_1, withMetadata: Metadata) => {
+        subscribe: (callback: (payload: Metadata extends true ? import("@empathyco/x-bus").SubjectPayload<import("@empathyco/x-bus").EventPayload<import("..").XEventsTypes, Event_1>, import("..").WireMetadata> : import("@empathyco/x-bus").EventPayload<import("..").XEventsTypes, Event_1>) => void) => void;
+    };
+    emit: <Event_2 extends keyof import("..").XEventsTypes>(event: Event_2, payload?: import("..").XEventPayload<Event_2> | undefined, metadata?: Omit<import("..").WireMetadata, "moduleName">) => Promise<import("@empathyco/x-bus").EmittedData<import("..").XEventsTypes, Event_2, import("..").WireMetadata>>;
+};
 ```
 **Returns:**
 
-[UseXComponentAPI](./x-components.usexcomponentapi.md)
+import("./use-alias-api").[UseAliasAPI](./x-components.usealiasapi.md) &amp; { on: &lt;Event\_1 extends keyof import("..").[XEventsTypes](./x-components.xeventstypes.md)<!-- -->, Metadata extends boolean&gt;(event: Event\_1, withMetadata: Metadata) =&gt; { subscribe: (callback: (payload: Metadata extends true ? import("@empathyco/x-bus").SubjectPayload&lt;import("@empathyco/x-bus").EventPayload&lt;import("..").[XEventsTypes](./x-components.xeventstypes.md)<!-- -->, Event\_1&gt;, import("..").[WireMetadata](./x-components.wiremetadata.md)<!-- -->&gt; : import("@empathyco/x-bus").EventPayload&lt;import("..").[XEventsTypes](./x-components.xeventstypes.md)<!-- -->, Event\_1&gt;) =&gt; void) =&gt; void; }; emit: &lt;Event\_2 extends keyof import("..").[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt;(event: Event\_2, payload?: import("..").[XEventPayload](./x-components.xeventpayload.md)<!-- -->&lt;Event\_2&gt; \| undefined, metadata?: Omit&lt;import("..").[WireMetadata](./x-components.wiremetadata.md)<!-- -->, "moduleName"&gt;) =&gt; Promise&lt;import("@empathyco/x-bus").EmittedData&lt;import("..").[XEventsTypes](./x-components.xeventstypes.md)<!-- -->, Event\_2, import("..").[WireMetadata](./x-components.wiremetadata.md)<!-- -->&gt;&gt;; }
 
 The `$x` object from the current component instance.
 

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

@@ -0,0 +1,30 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [useCollapseAnimation](./x-components.usecollapseanimation.md)
+
+## useCollapseAnimation() function
+
+Returns parametrized methods to use in a component to allow the collapsing of the provided property.
+
+**Signature:**
+
+```typescript
+export declare function useCollapseAnimation(property: AnimatedProperty): {
+    expand: (element: HTMLElement) => void;
+    cleanUpAnimationStyles: (element: HTMLElement) => void;
+    collapse: (element: HTMLElement) => void;
+};
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  property | AnimatedProperty | The property that will be animated. |
+
+**Returns:**
+
+{ expand: (element: HTMLElement) =&gt; void; cleanUpAnimationStyles: (element: HTMLElement) =&gt; void; collapse: (element: HTMLElement) =&gt; void; }
+
+Composable for the module.
+

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

@@ -0,0 +1,28 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [useDebounce](./x-components.usedebounce.md)
+
+## useDebounce() function
+
+Composable which wraps the function passed as parameter into a debounced function and returns it. It also cancels the debounced function when component is unmounted.
+
+**Signature:**
+
+```typescript
+export declare function useDebounce<Params extends any[]>(fn: (...args: Params) => void, debounceTimeInMs: number, debounceOptions?: DebounceOptions): import("../utils/types").DebouncedFunction<Params>;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  fn | (...args: Params) =&gt; void | Function to be debounced. |
+|  debounceTimeInMs | number | Time of debounce in ms. |
+|  debounceOptions | [DebounceOptions](./x-components.debounceoptions.md) | _(Optional)_ The options for the debounce strategy. |
+
+**Returns:**
+
+import("../utils/types").[DebouncedFunction](./x-components.debouncedfunction.md)<!-- -->&lt;Params&gt;
+
+Debounced function obtained from `fn` parameter.
+

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

@@ -0,0 +1,28 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [useDisableAnimation](./x-components.usedisableanimation.md)
+
+## useDisableAnimation() function
+
+Composable to ease disabling animations.
+
+**Signature:**
+
+```typescript
+export declare function useDisableAnimation(animationName: string): {
+    name: import("vue").ComputedRef<string>;
+};
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  animationName | string | The name of the animation. |
+
+**Returns:**
+
+{ name: import("vue").ComputedRef&lt;string&gt;; }
+
+Composable with the computed name of the animation.
+

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

@@ -0,0 +1,34 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [useFacets](./x-components.usefacets.md)
+
+## useFacets() function
+
+Composable to share Facets logic.
+
+**Signature:**
+
+```typescript
+export declare function useFacets(props: {
+    facetsIds?: Array<Facet['id']>;
+    alwaysVisible?: boolean;
+}): {
+    selectedFiltersByFacet: ComputedRef<FiltersByFacet>;
+    selectedFilters: ComputedRef<Filter[]>;
+    hasSelectedFilters: ComputedRef<boolean>;
+    isVisible: ComputedRef<boolean>;
+};
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  props | { facetsIds?: Array&lt;Facet\['id'\]&gt;; alwaysVisible?: boolean; } | Composable props. |
+
+**Returns:**
+
+{ selectedFiltersByFacet: ComputedRef&lt;[FiltersByFacet](./x-components.filtersbyfacet.md)<!-- -->&gt;; selectedFilters: ComputedRef&lt;Filter\[\]&gt;; hasSelectedFilters: ComputedRef&lt;boolean&gt;; isVisible: ComputedRef&lt;boolean&gt;; }
+
+Composable.
+

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

@@ -0,0 +1,29 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [useFiltersInjection](./x-components.usefiltersinjection.md)
+
+## useFiltersInjection() function
+
+Composable to share filters injection logic.
+
+**Signature:**
+
+```typescript
+export declare function useFiltersInjection(props: {
+    filters?: Filter[];
+    parentId?: Filter['id'];
+}): import("vue").ComputedRef<Filter[]>;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  props | { filters?: Filter\[\]; parentId?: Filter\['id'\]; } | Composable props. |
+
+**Returns:**
+
+import("vue").ComputedRef&lt;Filter\[\]&gt;
+
+An array of filters.
+

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

@@ -0,0 +1,36 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [useScroll](./x-components.usescroll.md)
+
+## useScroll() function
+
+Composable to share Scroll logic.
+
+**Signature:**
+
+```typescript
+export declare function useScroll(props: {
+    distanceToBottom: number;
+    firstElementThresholdPx: number;
+    throttleMs: number;
+    resetOnChange: boolean;
+    resetOn: XEvent | XEvent[];
+}, { emit }: SetupContext<any>, scrollEl: Ref<HTMLElement | undefined>): {
+    throttledStoreScrollData: import("vue").ComputedRef<import("../..").ThrottleFunction<[]>>;
+};
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  props | { distanceToBottom: number; firstElementThresholdPx: number; throttleMs: number; resetOnChange: boolean; resetOn: [XEvent](./x-components.xevent.md) \| [XEvent](./x-components.xevent.md)<!-- -->\[\]; } | Composable props. |
+|  { emit } | SetupContext&lt;any&gt; |  |
+|  scrollEl | Ref&lt;HTMLElement \| undefined&gt; | The scrolling container reference. |
+
+**Returns:**
+
+{ throttledStoreScrollData: import("vue").ComputedRef&lt;import("../..").[ThrottleFunction](./x-components.throttlefunction.md)<!-- -->&lt;\[\]&gt;&gt;; }
+
+A throttled version of the function to store the scroll data.
+

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

@@ -0,0 +1,28 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [useXBus](./x-components.usexbus.md)
+
+## useXBus() function
+
+Composable which injects the current location, returns the `on` and `emit` functions using the bus and applying component metadata. Also unsubscribe from events when components is unmounted.
+
+**Signature:**
+
+```typescript
+export declare function useXBus(): {
+    on: <Event_1 extends keyof XEventsTypes, Metadata extends boolean>(event: Event_1, withMetadata: Metadata) => {
+        subscribe: (callback: (payload: Metadata extends true ? SubjectPayload<EventPayload<XEventsTypes, Event_1>, WireMetadata> : EventPayload<XEventsTypes, Event_1>) => void) => void;
+    };
+    emit: <Event_2 extends keyof XEventsTypes>(event: Event_2, payload?: XEventPayload<Event_2> | undefined, metadata?: Omit<WireMetadata, 'moduleName'>) => Promise<import("@empathyco/x-bus").EmittedData<XEventsTypes, Event_2, WireMetadata>>;
+};
+```
+**Returns:**
+
+{ on: &lt;Event\_1 extends keyof [XEventsTypes](./x-components.xeventstypes.md)<!-- -->, Metadata extends boolean&gt;(event: Event\_1, withMetadata: Metadata) =&gt; { subscribe: (callback: (payload: Metadata extends true ? SubjectPayload&lt;EventPayload&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->, Event\_1&gt;, [WireMetadata](./x-components.wiremetadata.md)<!-- -->&gt; : EventPayload&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->, Event\_1&gt;) =&gt; void) =&gt; void; }; emit: &lt;Event\_2 extends keyof [XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt;(event: Event\_2, payload?: [XEventPayload](./x-components.xeventpayload.md)<!-- -->&lt;Event\_2&gt; \| undefined, metadata?: Omit&lt;[WireMetadata](./x-components.wiremetadata.md)<!-- -->, 'moduleName'&gt;) =&gt; Promise&lt;import("@empathyco/x-bus").EmittedData&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->, Event\_2, [WireMetadata](./x-components.wiremetadata.md)<!-- -->&gt;&gt;; }
+
+An object with the `on` and `emit` functions.
+
+## Remarks
+
+This composable tries to use the `XPlugin` bus and catches the exception thrown by the `XPlugin` if it was not instantiated and uses the default `xBus` as fallback.
+

package/docs/API-reference/api/x-components.wiremetadata.component.md

@@ -9,5 +9,5 @@ The component instance that triggered the event emission.
 **Signature:**
 
 ```typescript
-component?: Vue;
+component?: Component;
 ```

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

@@ -16,7 +16,7 @@ export interface WireMetadata
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [component?](./x-components.wiremetadata.component.md) |  | Vue | _(Optional)_ The component instance that triggered the event emission. |
+|  [component?](./x-components.wiremetadata.component.md) |  | Component | _(Optional)_ The component instance that triggered the event emission. |
 |  [feature?](./x-components.wiremetadata.feature.md) |  | [QueryFeature](./x-components.queryfeature.md) \| [ResultFeature](./x-components.resultfeature.md) | _(Optional)_ The [QueryFeature](./x-components.queryfeature.md) that originated the event. |
 |  [id?](./x-components.wiremetadata.id.md) |  | string | _(Optional)_ The id of the component origin. |
 |  [ignoreInModules?](./x-components.wiremetadata.ignoreinmodules.md) |  | [XModuleName](./x-components.xmodulename.md)<!-- -->\[\] | _(Optional)_ The event can be ignored if it is received in the wiring of the modules in the array. |

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

@@ -50,6 +50,6 @@ Aside from common events, this interface also extends the different XModule's XE
 |  [UserOpenXProgrammatically](./x-components.xeventstypes.useropenxprogrammatically.md) |  | void | The user opened X programmatically. Payload: none. |
 |  [UserPressedArrowKey](./x-components.xeventstypes.userpressedarrowkey.md) |  | [ArrowKey](./x-components.arrowkey.md) | The user pressed an [arrow key](./x-components.arrowkey.md) with the focus on the search-box. Payload: the pressed [arrow key](./x-components.arrowkey.md)<!-- -->. |
 |  [UserReachedEmpathizeTop](./x-components.xeventstypes.userreachedempathizetop.md) |  | void | The user has reached the top of the empathize and keeps navigating in that direction. Payload: none. |
-|  [UserSelectedAResultVariant](./x-components.xeventstypes.userselectedaresultvariant.md) |  | { result: Result; variant: ResultVariant; level: number; } | The user selected a result variant. Payload: And object containing the result, the selected variant and the level of the selected variant. |
+|  [UserSelectedAResultVariant](./x-components.xeventstypes.userselectedaresultvariant.md) |  | { result: Result; variant: ResultVariant; level: number; queryPreviewHash: ComputedRef&lt;string&gt; \| null; } | The user selected a result variant. Payload: And object containing the result, the selected variant, the level of the selected variant and the query preview hash. |
 |  [UserSelectedASuggestion](./x-components.xeventstypes.userselectedasuggestion.md) |  | Suggestion | User selected any kind of suggestion (query-suggestion, popular-search...) Payload: The [suggestion](./x-types.suggestion.md) that the user selected. |
 

package/docs/API-reference/api/x-components.xeventstypes.userselectedaresultvariant.md

@@ -4,7 +4,7 @@
 
 ## XEventsTypes.UserSelectedAResultVariant property
 
-The user selected a result variant. Payload: And object containing the result, the selected variant and the level of the selected variant.
+The user selected a result variant. Payload: And object containing the result, the selected variant, the level of the selected variant and the query preview hash.
 
 **Signature:**
 
@@ -13,5 +13,6 @@ UserSelectedAResultVariant: {
         result: Result;
         variant: ResultVariant;
         level: number;
+        queryPreviewHash: ComputedRef<string> | null;
     };
 ```

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

@@ -4,7 +4,7 @@
 
 ## XInjectKey interface
 
-Type of the key passed to [XProvide()](./x-components.xprovide.md) and [XInject()](./x-components.xinject.md) to be type-safe. With this type you can declare the type of the injected value directly in the injection key.
+Type of the key passed to `provide` and `inject` to be type-safe. With this type you can declare the type of the injected value directly in the injection key.
 
 **Signature:**
 
@@ -15,5 +15,5 @@ export interface XInjectKey<Type> extends String
 
 ## Example
 
-`const myKey: XInjectKey<Filter> = 'myFilter';` `@XInject(myKey)`
+`const myKey: XInjectKey<Filter> = 'myFilter';` `inject(myKey)`
 

package/docs/API-reference/api/x-components.xinstaller.init.md

@@ -22,5 +22,5 @@ init(snippetConfig: SnippetConfig): Promise<InitWrapper>;
 
 Promise&lt;[InitWrapper](./x-components.initwrapper.md)<!-- -->&gt;
 
-If [snippet config](./x-components.snippetconfig.md) is passed or configured in window.initX, returns an object with the [XAPI](./x-components.xapi.md)<!-- -->, the , the [XPlugin](./x-components.xplugin.md) and the Vue App used in the application. Else, a rejected promise is returned.
+If [snippet config](./x-components.snippetconfig.md) is passed or configured in window.initX, returns an object with the [XAPI](./x-components.xapi.md)<!-- -->, the , the [XPlugin](./x-components.xplugin.md) and the Vue application instance. Else, a rejected promise is returned.
 

package/docs/API-reference/components/common/animations/x-components.no-animation.md

@@ -0,0 +1,10 @@
+---
+
+title: NoAnimation
+
+---
+
+# NoAnimation
+
+Component to be used as `default` for animation props together with dynamic components
+`<component :is="animation">` in the template.