@empathyco/x-components 3.0.0-alpha.21 → 3.0.0-alpha.25

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

@@ -9,5 +9,5 @@ Sets the search state `params`<!-- -->.
 <b>Signature:</b>
 
 ```typescript
-setSearchExtraParams: import("../..").Wire<import("../..").Dictionary<unknown>>
+setSearchExtraParams: import("../..").Wire<Dictionary<unknown>>
 ```

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [setSearchQueryFromUrl](./x-components.setsearchqueryfromurl.md)
+
+## setSearchQueryFromUrl variable
+
+Sets the search state `query`<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+setSearchQueryFromUrl: import("../..").Wire<Dictionary<UrlParamValue>>
+```

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

@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [TranslateFromLeft](./x-components.translatefromleft.md)
+
+## TranslateFromLeft class
+
+Renders a transition wrapping the element passed in the default slot and moving it to its desired position.
+
+<b>Signature:</b>
+
+```typescript
+export default class TranslateFromLeft extends Vue 
+```
+<b>Extends:</b> Vue
+

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

@@ -4,7 +4,7 @@
 
 ## TranslateFromRight class
 
-Renders a transition group wrapping the element passed in the default slot and animating it with a scale.
+Renders a transition wrapping the element passed in the default slot and moving it to its desired position.
 
 <b>Signature:</b>
 

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [updateStoreUrl](./x-components.updatestoreurl.md)
+
+## updateStoreUrl variable
+
+Updates the store state from the URL.
+
+<b>Signature:</b>
+
+```typescript
+updateStoreUrl: import("../..").AnyWire
+```

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [updateUrl](./x-components.updateurl.md)
+
+## updateUrl variable
+
+Updates the URL.
+
+<b>Signature:</b>
+
+```typescript
+updateUrl: import("../..").AnyWire
+```

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

@@ -16,5 +16,6 @@ export interface UrlActions
 
 |  Method | Description |
 |  --- | --- |
-|  [updateUrl()](./x-components.urlactions.updateurl.md) | Updates the URL with values from the store. It replaces the current url with a new entry in the browser history. Also returns the params with the custom names provided in the config if present. |
+|  [updateStoreFromUrl()](./x-components.urlactions.updatestorefromurl.md) | Updates the store with values from the URL. |
+|  [updateUrl()](./x-components.urlactions.updateurl.md) | Updates the URL with values from the store. It replaces the current url with a new entry in the browser history. Also returns the params with the custom names provided in the config if any. |
 

package/docs/API-reference/api/x-components.urlactions.updatestorefromurl.md

@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlActions](./x-components.urlactions.md) &gt; [updateStoreFromUrl](./x-components.urlactions.updatestorefromurl.md)
+
+## UrlActions.updateStoreFromUrl() method
+
+Updates the store with values from the URL.
+
+<b>Signature:</b>
+
+```typescript
+updateStoreFromUrl(): void;
+```
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/api/x-components.urlactions.updateurl.md

@@ -4,7 +4,7 @@
 
 ## UrlActions.updateUrl() method
 
-Updates the URL with values from the store. It replaces the current url with a new entry in the browser history. Also returns the params with the custom names provided in the config if present.
+Updates the URL with values from the store. It replaces the current url with a new entry in the browser history. Also returns the params with the custom names provided in the config if any.
 
 <b>Signature:</b>
 

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

@@ -16,6 +16,6 @@ export interface UrlGetters
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [urlMappedParamNames](./x-components.urlgetters.urlmappedparamnames.md) | [Dictionary](./x-components.dictionary.md)<!-- -->&lt;[UrlParamKey](./x-components.urlparamkey.md)<!-- -->&gt; |  |
-|  [urlParams](./x-components.urlgetters.urlparams.md) | [Dictionary](./x-components.dictionary.md)<!-- -->&lt;[UrlParamValue](./x-components.urlparamvalue.md)<!-- -->&gt; |  |
+|  [urlMappedParamNames](./x-components.urlgetters.urlmappedparamnames.md) | [Dictionary](./x-components.dictionary.md)<!-- -->&lt;[UrlParamKey](./x-components.urlparamkey.md) \| string&gt; | All the parameter names with their corresponding key. |
+|  [urlParams](./x-components.urlgetters.urlparams.md) | [Dictionary](./x-components.dictionary.md)<!-- -->&lt;[UrlParamValue](./x-components.urlparamvalue.md)<!-- -->&gt; | The current params in the url. |
 

package/docs/API-reference/api/x-components.urlgetters.urlmappedparamnames.md

@@ -4,8 +4,10 @@
 
 ## UrlGetters.urlMappedParamNames property
 
+All the parameter names with their corresponding key.
+
 <b>Signature:</b>
 
 ```typescript
-urlMappedParamNames: Dictionary<UrlParamKey>;
+urlMappedParamNames: Dictionary<UrlParamKey | string>;
 ```

package/docs/API-reference/api/x-components.urlgetters.urlparams.md

@@ -4,6 +4,8 @@
 
 ## UrlGetters.urlParams property
 
+The current params in the url.
+
 <b>Signature:</b>
 
 ```typescript

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

@@ -16,5 +16,8 @@ export interface UrlMutations
 
 |  Method | Description |
 |  --- | --- |
-|  [setUrlConfig(config)](./x-components.urlmutations.seturlconfig.md) |  |
+|  [setExtraParams(extraParam)](./x-components.urlmutations.setextraparams.md) | Sets new extra params. |
+|  [setParams(params)](./x-components.urlmutations.setparams.md) | Sets the new params. |
+|  [setQuery(query)](./x-components.urlmutations.setquery.md) | Sets the new query. |
+|  [setUrlConfig(config)](./x-components.urlmutations.seturlconfig.md) | Sets a new url configuration. |
 

package/docs/API-reference/api/x-components.urlmutations.setextraparams.md

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlMutations](./x-components.urlmutations.md) &gt; [setExtraParams](./x-components.urlmutations.setextraparams.md)
+
+## UrlMutations.setExtraParams() method
+
+Sets new extra params.
+
+<b>Signature:</b>
+
+```typescript
+setExtraParams(extraParam: Dictionary<UrlParamValue>): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  extraParam | [Dictionary](./x-components.dictionary.md)<!-- -->&lt;[UrlParamValue](./x-components.urlparamvalue.md)<!-- -->&gt; | The new extra params of the Url. |
+
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/api/x-components.urlmutations.setparams.md

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlMutations](./x-components.urlmutations.md) &gt; [setParams](./x-components.urlmutations.setparams.md)
+
+## UrlMutations.setParams() method
+
+Sets the new params.
+
+<b>Signature:</b>
+
+```typescript
+setParams(params: Record<keyof Params, UrlParamValue>): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  params | Record&lt;keyof [Params](./x-components.params.md)<!-- -->, [UrlParamValue](./x-components.urlparamvalue.md)<!-- -->&gt; | The new params of the Url. |
+
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/api/x-components.urlmutations.setquery.md

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlMutations](./x-components.urlmutations.md) &gt; [setQuery](./x-components.urlmutations.setquery.md)
+
+## UrlMutations.setQuery() method
+
+Sets the new query.
+
+<b>Signature:</b>
+
+```typescript
+setQuery(query: string): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  query | string | The new query of the Url. |
+
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/api/x-components.urlmutations.seturlconfig.md

@@ -4,6 +4,8 @@
 
 ## UrlMutations.setUrlConfig() method
 
+Sets a new url configuration.
+
 <b>Signature:</b>
 
 ```typescript
@@ -14,7 +16,7 @@ setUrlConfig(config: UrlConfig): void;
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  config | [UrlConfig](./x-components.urlconfig.md) |  |
+|  config | [UrlConfig](./x-components.urlconfig.md) | The new config of the Url. |
 
 <b>Returns:</b>
 

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

@@ -9,5 +9,7 @@ The key of the parameter to store in the URL.
 <b>Signature:</b>
 
 ```typescript
-export declare type UrlParamKey = string;
+export declare type UrlParamKey = Extract<keyof Params, string>;
 ```
+<b>References:</b> [Params](./x-components.params.md)
+

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

@@ -18,9 +18,5 @@ export interface UrlState
 |  --- | --- | --- |
 |  [config](./x-components.urlstate.config.md) | [UrlConfig](./x-components.urlconfig.md) |  |
 |  [extraParams](./x-components.urlstate.extraparams.md) | [Dictionary](./x-components.dictionary.md)<!-- -->&lt;[UrlParamValue](./x-components.urlparamvalue.md)<!-- -->&gt; |  |
-|  [filters](./x-components.urlstate.filters.md) | string\[\] |  |
-|  [page](./x-components.urlstate.page.md) | number |  |
-|  [query](./x-components.urlstate.query.md) | string |  |
-|  [relatedTags](./x-components.urlstate.relatedtags.md) | string\[\] |  |
-|  [sort](./x-components.urlstate.sort.md) | string |  |
+|  [params](./x-components.urlstate.params.md) | Record&lt;keyof [Params](./x-components.params.md)<!-- -->, [UrlParamValue](./x-components.urlparamvalue.md)<!-- -->&gt; |  |
 

package/docs/API-reference/api/x-components.urlstate.params.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlState](./x-components.urlstate.md) &gt; [params](./x-components.urlstate.params.md)
+
+## UrlState.params property
+
+<b>Signature:</b>
+
+```typescript
+params: Record<keyof Params, UrlParamValue>;
+```

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

@@ -21,6 +21,7 @@ export interface UrlXEvents
 |  [ExtraParamsLoadedFromUrl](./x-components.urlxevents.extraparamsloadedfromurl.md) | string\[\] | Extra params has been loaded from the URL. \* Payload: The extra params array. |
 |  [FiltersLoadedFromUrl](./x-components.urlxevents.filtersloadedfromurl.md) | string\[\] | Filters has been loaded from the URL. \* Payload: The filters array. |
 |  [PageLoadedFromUrl](./x-components.urlxevents.pageloadedfromurl.md) | string | Page has been loaded from the URL. \* Payload: The page number. |
+|  [ParamsLoadedFromUrl](./x-components.urlxevents.paramsloadedfromurl.md) | [UrlGetters](./x-components.urlgetters.md)<!-- -->\['urlParams'\] | Url loaded from the url changed. \* Payload: The new URL params. |
 |  [QueryLoadedFromUrl](./x-components.urlxevents.queryloadedfromurl.md) | string | Query has been loaded from the URL. \* Payload: The query string. |
 |  [RelatedTagsLoadedFromUrl](./x-components.urlxevents.relatedtagsloadedfromurl.md) | string\[\] | Related tags has been loaded from the URL. \* Payload: The related tag array. |
 |  [SortLoadedFromUrl](./x-components.urlxevents.sortloadedfromurl.md) | string | Sort has been loaded from the URL. \* Payload: The sort string. |

package/docs/API-reference/api/x-components.urlxevents.paramsloadedfromurl.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlXEvents](./x-components.urlxevents.md) &gt; [ParamsLoadedFromUrl](./x-components.urlxevents.paramsloadedfromurl.md)
+
+## UrlXEvents.ParamsLoadedFromUrl property
+
+Url loaded from the url changed. \* Payload: The new URL params.
+
+<b>Signature:</b>
+
+```typescript
+ParamsLoadedFromUrl: UrlGetters['urlParams'];
+```

package/docs/API-reference/api/x-types.banner.md

@@ -9,9 +9,9 @@ A banner is an image with a title, that when clicked redirect the user to an URL
 <b>Signature:</b>
 
 ```typescript
-export interface Banner extends NamedModel, Identifiable 
+export interface Banner extends NamedModel<'Banner'>, Identifiable 
 ```
-<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->, [Identifiable](./x-types.identifiable.md)
+<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->&lt;'Banner'&gt;, [Identifiable](./x-types.identifiable.md)
 
 ## Properties
 

package/docs/API-reference/api/x-types.historyquery.md

@@ -9,9 +9,9 @@ Represents a query that has been made by the user.
 <b>Signature:</b>
 
 ```typescript
-export interface HistoryQuery extends Previewable, NamedModel 
+export interface HistoryQuery extends Previewable, NamedModel<'HistoryQuery'> 
 ```
-<b>Extends:</b> [Previewable](./x-types.previewable.md)<!-- -->, [NamedModel](./x-types.namedmodel.md)
+<b>Extends:</b> [Previewable](./x-types.previewable.md)<!-- -->, [NamedModel](./x-types.namedmodel.md)<!-- -->&lt;'HistoryQuery'&gt;
 
 ## Properties
 

package/docs/API-reference/api/x-types.nextqueries.md

@@ -9,9 +9,9 @@ A group of next queries.
 <b>Signature:</b>
 
 ```typescript
-export interface NextQueries extends NamedModel, Identifiable 
+export interface NextQueries extends NamedModel<'NextQueries'>, Identifiable 
 ```
-<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->, [Identifiable](./x-types.identifiable.md)
+<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->&lt;'NextQueries'&gt;, [Identifiable](./x-types.identifiable.md)
 
 ## Properties
 

package/docs/API-reference/api/x-types.nextquery.md

@@ -9,7 +9,7 @@ A next query is a suggestion of a new query that the user may be interested afte
 <b>Signature:</b>
 
 ```typescript
-export interface NextQuery extends NamedModel, Required<Previewable> 
+export interface NextQuery extends NamedModel<'NextQuery'>, Required<Previewable> 
 ```
-<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->, Required&lt;[Previewable](./x-types.previewable.md)<!-- -->&gt;
+<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->&lt;'NextQuery'&gt;, Required&lt;[Previewable](./x-types.previewable.md)<!-- -->&gt;
 

package/docs/API-reference/api/x-types.promoted.md

@@ -9,9 +9,9 @@ A promoted is an image with a title, that when clicked redirect the user to an U
 <b>Signature:</b>
 
 ```typescript
-export interface Promoted extends NamedModel, Identifiable 
+export interface Promoted extends NamedModel<'Promoted'>, Identifiable 
 ```
-<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->, [Identifiable](./x-types.identifiable.md)
+<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->&lt;'Promoted'&gt;, [Identifiable](./x-types.identifiable.md)
 
 ## Properties
 

package/docs/API-reference/api/x-types.relatedtag.md

@@ -9,9 +9,9 @@ A related tag is just a term that refines the current query.
 <b>Signature:</b>
 
 ```typescript
-export interface RelatedTag extends NamedModel, Previewable 
+export interface RelatedTag extends NamedModel<'RelatedTag'>, Previewable 
 ```
-<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->, [Previewable](./x-types.previewable.md)
+<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->&lt;'RelatedTag'&gt;, [Previewable](./x-types.previewable.md)
 
 ## Properties
 

package/docs/API-reference/api/x-types.result.md

@@ -9,9 +9,9 @@ A search result.
 <b>Signature:</b>
 
 ```typescript
-export interface Result extends NamedModel, Identifiable 
+export interface Result extends NamedModel<'Result'>, Identifiable 
 ```
-<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->, [Identifiable](./x-types.identifiable.md)
+<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->&lt;'Result'&gt;, [Identifiable](./x-types.identifiable.md)
 
 ## Properties
 

package/docs/API-reference/api/x-types.suggestion.md

@@ -9,9 +9,9 @@ A suggestion represents a query that has been proposed to the user, due of being
 <b>Signature:</b>
 
 ```typescript
-export interface Suggestion extends NamedModel, Previewable 
+export interface Suggestion extends NamedModel<'QuerySuggestion' | 'PopularSearch'>, Previewable 
 ```
-<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->, [Previewable](./x-types.previewable.md)
+<b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->&lt;'QuerySuggestion' \| 'PopularSearch'&gt;, [Previewable](./x-types.previewable.md)
 
 ## Properties
 

package/docs/API-reference/components/common/animations/x-components.cross-fade.md

@@ -0,0 +1,30 @@
+---
+id: x-components.x-components.cross-fade
+title: Cross Fade
+sidebar_label: Cross Fade
+---
+# CrossFade
+
+> Renders a transition wrapping the element passed in the default slo. The transition
+> fades between the two toggled elements at the same time.
+
+## Slots
+
+| Name                 | Description                                 | Bindings<br />(name - type - description) |
+| -------------------- | ------------------------------------------- | ----------------------------------------- |
+| <code>default</code> | (Required) to add content to the transition | None                                      |
+
+---
+
+# Example
+
+The `CrossFade` component is intended to be used as animation to wrap an element with v-if or v-show
+and animate it. The animation fades the new element into the previous one.
+
+Wrapping a component:
+
+```vue
+<CrossFade>
+  <ComponentOrElement v-if="open"/>
+</CrossFade>
+```

package/docs/API-reference/components/common/animations/x-components.translate-from-left.md

@@ -0,0 +1,30 @@
+---
+id: x-components.x-components.translate-from-left
+title: Translate From Left
+sidebar_label: Translate From Left
+---
+# TranslateFromLeft
+
+> Renders a transition wrapping the element passed in the default slot and moving it to its
+> desired position.
+
+## Slots
+
+| Name                 | Description                                 | Bindings<br />(name - type - description) |
+| -------------------- | ------------------------------------------- | ----------------------------------------- |
+| <code>default</code> | (Required) to add content to the transition | None                                      |
+
+---
+
+# Example
+
+The `TranslateFromRight` component is intended to be used as animation to wrap an element with v-if
+or v-show and animate it. The animation translates the item from/to left 100%.
+
+Wrapping a component:
+
+```vue
+<TranslateFromLeft>
+  <ComponentOrElement v-if="open"/>
+</TranslateFromLeft>
+```

package/docs/API-reference/components/common/animations/x-components.translate-from-right.md

@@ -5,8 +5,8 @@ sidebar_label: Translate From Right
 ---
 # TranslateFromRight
 
-> Renders a transition group wrapping the element passed in the default slot and animating
-> it with a scale.
+> Renders a transition wrapping the element passed in the default slot and moving it to its
+> desired position.
 
 ## Slots
 
@@ -16,9 +16,10 @@ sidebar_label: Translate From Right
 
 ---
 
-#Example
-The CollapseTop component is intended to be used as animation to wrap an element with
-v-if or v-show and animate it. The animation consists on translate the item from/to right 100%.
+# Example
+
+The `TranslateFromRight` component is intended to be used as animation to wrap an element with v-if
+or v-show and animate it. The animation translates the item from/to right 100%.
 
 Used wrapping a component:
 

package/docs/API-reference/components/common/result/x-components.base-result-image.md

@@ -9,9 +9,10 @@ sidebar_label: Base Result Image
 
 ## Props
 
-| Name                | Description                                                             | Type                | Default       |
-| ------------------- | ----------------------------------------------------------------------- | ------------------- | ------------- |
-| <code>result</code> | (Required) The {@link @empathyco/x-types#Result \| result} information. | <code>Result</code> | <code></code> |
+| Name                   | Description                                                                                                   | Type                | Default                      |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------- |
+| <code>animation</code> | Animation to use when switching between the placeholder, the loaded image, or the failed<br />image fallback. | <code>union</code>  | <code>() => NoElement</code> |
+| <code>result</code>    | (Required) The {@link @empathyco/x-types#Result \| result} information.                                       | <code>Result</code> | <code></code>                |
 
 ## Slots
 
@@ -22,12 +23,12 @@ sidebar_label: Base Result Image
 
 ---
 
-#Examples
+# Examples
 
 ## Basic example
 
-This component is for the result image. It may be part of
-the search result page, recommendations or other section which needs to include results.
+This component is for the result image. It may be part of the search result page, recommendations or
+other section which needs to include results.
 
 The result prop is required. It will render a `<img/>` with the result image:
 

package/docs/API-reference/components/url/x-components.url-handler.md

@@ -0,0 +1,86 @@
+---
+id: x-components.x-components.url-handler
+title: Url Handler
+sidebar_label: Url Handler
+---
+# url-handler
+
+---
+
+## Events
+
+This component emits the following events:
+
+- [`UrlConfigProvided`](./../../api/x-components.urlxevents.urlconfigprovided.md)
+- [`DocumentLoaded`](./../../api/x-components.urlxevents.documentloaded.md)
+- [`DocumentHistoryChanged`](./../../api/x-components.urlxevents.documenthistorychanged.md)
+- [`ParamsLoadedFromUrl`](./../../api/x-components.urlxevents.paramsloadedfromurl.md)
+- [`UserOpenXProgrammatically`](./../../api/x-components.xeventstypes.useropenxprotrammaticaaly.md)
+
+## See it in action
+
+This component doesn't render elements to the DOM, but serves as a way to easily change the default
+url parameter names.
+
+_Try to make some requests and take a look to the url!_
+
+```vue
+<template>
+  <UrlHandler />
+</template>
+
+<script>
+import { UrlHandler } from "@empathyco/x-components/url-handler";
+
+export default {
+  name: "UrlHandlerDemo",
+  components: {
+    UrlHandler
+  }
+};
+</script>
+```
+
+### Play with props
+
+In this example, the `UrlHandler` component changes the following query parameter names:
+
+- `query` to be `ebq`.
+- `page` to be `p`.
+- `filters` to be `f`
+- `sort` to be `s`
+
+_Try to make some requests and take a look to the url!_
+
+```vue
+<template>
+  <UrlHandler :query="query" :page="page" :filters="filters" :sort="sort" />
+</template>
+
+<script>
+import { UrlHandler } from "@empathyco/x-components/url-handler";
+
+export default {
+  name: "UrlHandlerDemo",
+  components: {
+    UrlHandler
+  },
+  data() {
+    return {
+      query: "ebq",
+      page: "p",
+      filters: "f",
+      sort: "s"
+    };
+  }
+};
+</script>
+```
+
+### Play with events
+
+The `UrlHandler` will emit a `UrlConfigProvided` event, with the new url param names if they are
+provided.
+
+It also emits the `DocumentLoaded` when the page is loaded and the `DocumentHistoryChanged` when the
+url changes.