@empathyco/x-components 3.0.0-alpha.49 → 3.0.0-alpha.52

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.52](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.51...@empathyco/x-components@3.0.0-alpha.52) (2022-02-07)
+
+### Documentation
+
+- fix multiple broken links
+  ([226a2e5](https://github.com/empathyco/x/commit/226a2e54a4ed8832c7c47d26254e85c301913d98)),
+  closes [EX-5035](https://searchbroker.atlassian.net/browse/EX-5035)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.51](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.50...@empathyco/x-components@3.0.0-alpha.51) (2022-02-04)
+
+### Code Refactoring
+
+- change to the top of the wiring the ParamsLoadedFromUrl event.
+  ([26634c8](https://github.com/empathyco/x/commit/26634c8010bc4d2e795caceefc622c6329fad72c)),
+  closes [EX-5327](https://searchbroker.atlassian.net/browse/EX-5327)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.50](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.49...@empathyco/x-components@3.0.0-alpha.50) (2022-02-04)
+
+### Features
+
+- **design-system:** change curated tag toke values to reuse default ones.
+  ([2fd261a](https://github.com/empathyco/x/commit/2fd261ae54ec3de8eabdbcd5611bf5e1416d37f8)),
+  closes [EX-5354](https://searchbroker.atlassian.net/browse/EX-5354)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.49](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.48...@empathyco/x-components@3.0.0-alpha.49) (2022-02-03)
 
 ### Continuous Integration

package/design-system/default-theme.css

@@ -2076,12 +2076,12 @@
   --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
   --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
   --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated: var(--x-color-base-neutral-100);
-  --x-color-border-tag-default-curated: var(--x-color-text-tag-default);
-  --x-color-text-tag-default-curated: var(--x-color-text-default);
-  --x-color-background-tag-default-curated-selected: var(--x-color-base-neutral-95);
-  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
   --x-size-border-width-tag-default: var(--x-size-border-width-base);
   --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
   --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
@@ -2104,14 +2104,16 @@
   --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
   --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
   --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated: var(--x-font-family-text);
-  --x-size-font-tag-default-curated: var(--x-size-font-text);
-  --x-size-line-height-tag-default-curated: var(--x-size-line-height-text);
-  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-text);
-  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-curated-selected: var(--x-number-font-weight-tag-default); }
+  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-default-selected
+  ); }
 
 @use 'sass:string';
 [dir="ltr"] .x-tag {
@@ -2253,12 +2255,12 @@
   --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
   --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
   --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated: var(--x-color-base-neutral-100);
-  --x-color-border-tag-default-curated: var(--x-color-text-tag-default);
-  --x-color-text-tag-default-curated: var(--x-color-text-default);
-  --x-color-background-tag-default-curated-selected: var(--x-color-base-neutral-95);
-  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
   --x-size-border-width-tag-default: var(--x-size-border-width-base);
   --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
   --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
@@ -2281,14 +2283,16 @@
   --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
   --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
   --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated: var(--x-font-family-text);
-  --x-size-font-tag-default-curated: var(--x-size-font-text);
-  --x-size-line-height-tag-default-curated: var(--x-size-line-height-text);
-  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-text);
-  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-curated-selected: var(--x-number-font-weight-tag-default); }
+  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-default-selected
+  ); }
 
 :root {
   --x-color-text-default: var(--x-color-base-neutral-10);

package/design-system/full-theme.css

@@ -3394,12 +3394,12 @@
   --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
   --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
   --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated: var(--x-color-base-neutral-100);
-  --x-color-border-tag-default-curated: var(--x-color-text-tag-default);
-  --x-color-text-tag-default-curated: var(--x-color-text-default);
-  --x-color-background-tag-default-curated-selected: var(--x-color-base-neutral-95);
-  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
   --x-size-border-width-tag-default: var(--x-size-border-width-base);
   --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
   --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
@@ -3422,14 +3422,16 @@
   --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
   --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
   --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated: var(--x-font-family-text);
-  --x-size-font-tag-default-curated: var(--x-size-font-text);
-  --x-size-line-height-tag-default-curated: var(--x-size-line-height-text);
-  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-text);
-  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-curated-selected: var(--x-number-font-weight-tag-default); }
+  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-default-selected
+  ); }
 
 .x-tag--ghost.x-tag,
 .x-tag--ghost .x-tag {

package/design-system/tag-default.css

@@ -5,12 +5,12 @@
   --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
   --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
   --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated: var(--x-color-base-neutral-100);
-  --x-color-border-tag-default-curated: var(--x-color-text-tag-default);
-  --x-color-text-tag-default-curated: var(--x-color-text-default);
-  --x-color-background-tag-default-curated-selected: var(--x-color-base-neutral-95);
-  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
   --x-size-border-width-tag-default: var(--x-size-border-width-base);
   --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
   --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
@@ -33,14 +33,16 @@
   --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
   --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
   --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated: var(--x-font-family-text);
-  --x-size-font-tag-default-curated: var(--x-size-font-text);
-  --x-size-line-height-tag-default-curated: var(--x-size-line-height-text);
-  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-text);
-  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-curated-selected: var(--x-number-font-weight-tag-default); }
+  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-default-selected
+  ); }
 
 @use 'sass:string';
 [dir="ltr"] .x-tag {

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

@@ -128,7 +128,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [SpellcheckButton](./x-components.spellcheckbutton.md) | 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. |
 |  [StaggeredFadeAndSlide](./x-components.staggeredfadeandslide.md) | Renders a transition group wrapping the elements passed in the default slot and animating them with an staggered fade and slide animation. |
 |  [StaggeringTransitionGroup](./x-components.staggeringtransitiongroup.md) | A replacement component for Vue's transition-group, that also adds the option to stagger the animations. |
-|  [Tagging](./x-components.tagging.md) | This component enables and manages the sending of information to the [Empathy Tagging API](https://empathy.co/docs/tagging-api/)<!-- -->. It allows to enable or disable the session id management through the <code>consent</code> prop. |
+|  [Tagging](./x-components.tagging.md) | 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 to enable or disable the session id management through the <code>consent</code> prop. |
 |  [TranslateFromLeft](./x-components.translatefromleft.md) | Renders a transition wrapping the element passed in the default slot and moving it to its desired position. |
 |  [TranslateFromRight](./x-components.translatefromright.md) | Renders a transition wrapping the element passed in the default slot and moving it to its desired position. |
 |  [UrlHandler](./x-components.urlhandler.md) | This component manage the browser URL parameters to perserve 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. |

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

@@ -4,7 +4,7 @@
 
 ## Tagging class
 
-This component enables and manages the sending of information to the [Empathy Tagging API](https://empathy.co/docs/tagging-api/)<!-- -->. It allows to enable or disable the session id management through the `consent` prop.
+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 to enable or disable the session id management through the `consent` prop.
 
 <b>Signature:</b>
 

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

@@ -7,8 +7,9 @@ title: Tagging
 # Tagging
 
 This component enables and manages the sending of information to the
-{@link https://empathy.co/docs/tagging-api/ | Empathy Tagging API}. It allows to enable or
-disable the session id management through the `consent` prop.
+{@link https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html |
+Empathy Tagging API}. It allows to enable or disable the session id management through the
+`consent` prop.
 
 ## Props
 

package/docs/build-search-ui/README.md

@@ -22,12 +22,11 @@ Start building your search and discovery experience in a few simple steps:
 
 :::
 
-- **Discover more about the
-  [Interface X ecosystem](/develop-empathy-platform/build-search-ui/README.md#the-interface-x-ecosystem)**
-  and how Interface X works.
-- **[Integrate the Interface X Components](/develop-empathy-platform/build-search-ui/README.md#integrate-x-components)**
-  in your store web application.
-- **[Use & configure the Interface X Components](/develop-empathy-platform/build-search-ui/README.md#use-configure-the-x-components)**
+- **Discover more about the [Interface X ecosystem](#the-interface-x-ecosystem)** and how
+  Interface X works.
+- **[Integrate the Interface X Components](#integrate-interface-x-components)** in your store web
+  application.
+- **[Use and configure the Interface X Components](#use-and-configure-the-interface-x-components)**
   in your project.
 
 <!-- 3. Style your UI. 4. Translate your search experience-->
@@ -43,7 +42,7 @@ numerous components to choose from, and the catalog evolves quickly with new exp
 Check out the **[open source project in GitHub](https://github.com/empathyco/x)**.
 
 Interested in learning more about how Interface&nbsp;X works? Discover more about its
-**[architecture](/develop-empathy-platform/build-search-ui/x-architecture/)**.
+**[architecture](./x-architecture/README.md)**.
 
 ## Integrate Interface X Components
 
@@ -54,7 +53,11 @@ You can use the X&nbsp;Components in a project in two ways:
 - integrating the individual **Interface&nbsp;X&nbsp;Components** library in your Vue project for a
   more custom approach.
 
-::: note You can use Empathy Search API, Elasticsearch, or Solr endpoints with both approaches. :::
+::: note
+
+You can use Empathy Search API, Elasticsearch, or Solr endpoints with both approaches.
+
+:::
 
 ##### Integration via Interface X Archetype project
 
@@ -90,7 +93,7 @@ go if you like to look under the hood!
 To get started with the X Components library, check out
 **[Integrate Interface X Components in your Vue application](web-x-components-integration-guide.md)**.
 
-## Use & configure the Interface X Components
+## Use and configure the Interface X Components
 
 Using the Interface&nbsp;X&nbsp;Components is a piece of cake! Just import and register the
 component, include it in your template, and you’re ready to go! What’s more, each component offers

package/docs/build-search-ui/web-archetype-development-guide.md

@@ -24,6 +24,8 @@ requires knowledge of JavaScript and Vue.js.
 
 To integrate Interface X Archetype as a search UI layer, you need:
 
+<br/>
+
 - **Empathy Search API** (or any search API that you use to retrieve search data).
 - **Empathy Search Adapter** to communicate with the Empathy Search API (or any search adapter to
   connect with the search API you are using).
@@ -97,9 +99,13 @@ npm install
 npm run serve
 ```
 
-::: interact For a full list of the project dependencies, check the
+::: interact
+
+For a full list of the project dependencies, check the
 [`package.json`](https://github.com/empathyco/x-archetype/blob/main/package.json) file in the
-Interface&nbsp;X&nbsp;Archetype repository. :::
+Interface&nbsp;X&nbsp;Archetype repository.
+
+:::
 
 ## 3. Configure the search adapter
 
@@ -112,14 +118,19 @@ the configuration according to the search features you use in your project.
 Export the required search adapter with your configuration as you will need it for the search
 [xPlugin configuration](web-archetype-integration-guide.md#_4-configure-the-plugin).
 
-::: interact For detailed information about other configuration options in the Empathy Search
-Adapter, go to the
-[x-adapter repository](https://github.com/empathyco/x/tree/main/packages/search-adapter). :::
+::: interact
+
+For detailed information about other configuration options in the Empathy Search Adapter, go to the
+[x-adapter repository](https://github.com/empathyco/x/tree/main/packages/search-adapter).
+
+:::
+
+::: note
 
-::: note Although you configure the values for the `instance`, `language`, `scope`, and `endpoint`
-options when integrating the project, you can still change these values when the project is
-deployed. Use the `/x-archetype/public/snippet-script.js` file to perform hot changes for `lang`,
-`store`, `device`, and `catalog` parameters.
+Although you configure the values for the `instance`, `language`, `scope`, and `endpoint` options
+when integrating the project, you can still change these values when the project is deployed. Use
+the `/x-archetype/public/snippet-script.js` file to perform hot changes for `lang`, `store`,
+`device`, and `catalog` parameters.
 
 For example, you may configure the adapter to use EN as `lang` so that when you search, the results
 are displayed in English. However, if you want to deploy the application in Spain, you want the

package/docs/build-search-ui/web-archetype-integration-guide.md

@@ -168,7 +168,7 @@ language, the currency, inform whether the user has given us his consent to proc
 | scope                 | `string`                                                                             |          | The context name where the search interface is being executed. I.e. `mobile`, `mobile-app`, `tablet`, `desktop`                                                                                                                                                                                 |
 | lang                  | `string`                                                                             |    ✅    | The language to use. By default this lang is used for both the front-end and the API requests                                                                                                                                                                                                   |
 | searchLang            | `string`                                                                             |          | A language to use only for the API requests                                                                                                                                                                                                                                                     |
-| consent               | `boolean`                                                                            |    ✅    | Whether the user has allowed to process its personal data or not. X-Components do not track or process any personal data. This parameter is used to generate a unique session id                                                                                                                |
+| consent               | `boolean`                                                                            |    ✅    | Used to let X know whether the user has accepted the usage of cookies and therefore the sessionId can be used and sent to the Search and Tagging API. If this parameter is configured with false value, then the sessionId in not generated nor sent to the Tagging API. No consent means the wisdom of the crowd signals (Related Tags, Next Queries, etc.) will not be inferred from that session. This parameter should be set to true as soon as the user accepts the usage of Customer cookies but note that Empathy not uses any cookie in its libraries, although we tie the cookie acceptance to the sessionID generation in Local Storage. If accepting the cookies does not trigger a page reload, please consider using `window.initX.consent = true` to update the consent parameter so that the current session is tracked already.                                                                                                                |
 | documentDirection     | `'ltr'` | `'rtl'`                                                               |          | The writing direction that the X Components should use                                                                                                                                                                                                                                          |
 | currency              | `string`                                                                             |    ✅    | The currency identifier. Used to configure how prices are shown                                                                                                                                                                                                                                 |
 | callbacks             | `Record<XEventName, (payload: XEventPayload<Event>, metadata: WireMetadata) => void` |          | A record of callbacks where the key is the event to listen, and the value is the callback to be executed whenever the event is emitted. For example, to listen to the `UserAcceptedAQuery` event: `{ UserAcceptedAQuery({ eventPayload }) { console.log('UserAcceptedAQuery', eventPayload); }` |
@@ -177,8 +177,8 @@ language, the currency, inform whether the user has given us his consent to proc
 
 ## X API
 
-The X API allows your website to communicate with Interface&X. It is a set of utilities that helps
-to integrate Interface&X into your website.
+The X API allows your website to communicate with Interface X. It is a set of utilities that helps
+to integrate Interface X into your website.
 
 | Function | Parameters                                                                     | Description                                                 |
 | -------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------- |

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

@@ -54,9 +54,13 @@ Alternatively, you can **globally** register components in Vue directly in the `
 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. :::
+::: 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';
@@ -113,8 +117,12 @@ The search-box module contains these components:
 - `SearchButton`
 - `ClearSearchInput`
 
-::: interact Learn more about the
-[Search Box UI](/explore-empathy-platform/experience-search-&-discovery/search-box.md) :::
+::: interact
+
+Learn more about the
+[Search Box UI](/explore-empathy-platform/experience-search-&-discovery/search-box.md)
+
+:::
 
 ### Importing the components from the search-box module
 

package/docs/build-search-ui/web-x-components-integration-guide.md

@@ -13,9 +13,11 @@ tags:
 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.
 
-::: interact If you are looking to use the ready-to-go project Interface X Archetype as
-your starting point, see
-**[Interface X Archetype Development](/develop-empathy-platform/build-search-ui/web-archetypedevelopment-guide.md)**.
+::: 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)**.
+
 :::
 
 For this tutorial, the Empathy Search API is used, but you can use any search API. This step-by-step
@@ -28,6 +30,8 @@ You can find the X Components library in the
 
 To integrate the X Components in a frontend UI, you need:
 
+<br/>
+
 - **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`
@@ -72,12 +76,15 @@ npm install --save @empathyco/x-components @empathyco/x-types @empathyco/x-adapt
 
 ## 2. Configure the search adapter
 
-::: warning If you are using the Empathy search API and the Empathy Search Adapter (`x-adapter`),
-make sure you have imported the `reflect-metadata` polyfill before executing any code of the search
-adapter. :::
+::: warning
+
+If you are using the Empathy search API and the Empathy Search Adapter (`x-adapter`), make sure you
+have imported the `reflect-metadata` polyfill before executing any code of the search adapter.
+
+:::
 
 Next, construct the search adapter. You will need the search adapter in the
-[xPlugin configuration](#_3-configure-the-xplugin).
+[xPlugin configuration](#3-configure-the-plugin).
 
 Empathy Search Adapter is a library for making it easier to consume search APIs. The project
 contains two main parts: an **implementation** to consume the Empathy Search API, and an
@@ -101,7 +108,11 @@ export const adapter = new EmpathyAdapterBuilder()
   .build();
 ```
 
-::: warning If you do not use the Empathy Search API, you need to build your own adapter. :::
+::: warning
+
+If you do not use the Empathy Search API, you need to build your own adapter.
+
+:::
 
 For more information, see
 [Using the Empathy Search Adapter](https://github.com/empathyco/x/tree/main/packages/search-adapter).
@@ -128,24 +139,24 @@ Then, **configure** the xPlugin. It has two key options you need to configure:
 1. **Adapter**: A search adapter is required to connect and communicate with the search API. Here
    you’re using the `EmpathyAdapterBuilder` to communicate specifically with the Empathy Search API.
    If you are not using the Empathy Search API, you need to build your own adapter. See
-   [Configure the search adapter](#_2-configure-the-search-adapter).
+   [Configure the search adapter](#2-configure-the-search-adapter).
 
-::: develop
+   ::: develop
 
-When using your own adapter, remember to configure the `instance`, `language`, `scope`, and
-`endpoint` methods.
+   When using your own adapter, remember to configure the `instance`, `language`, `scope`, and
+   `endpoint` methods.
 
-:::
+   :::
 
 2. **Store**: The Vuex store. If you use a store for Vuex, you need to provide the store you’re
    currently using for your project to the Vue instance.
 
-::: warning
+   ::: warning
 
-If you don’t provide any parameters for the `store`, a default store is created automatically. Leave
-the `store` blank **only if you’re not using any store** for Vuex.
+   If you don’t provide any parameters for the `store`, a default store is created automatically.
+   Leave the `store` blank **only if you’re not using any store** for Vuex.
 
-:::
+   :::
 
 ## 4. Install and initialize the plugin
 

package/docs/build-search-ui/x-architecture/README.md

@@ -56,7 +56,8 @@ The API adapter can be customised and extended to meet the client requirements.
 element that can be changed and adjusted to the specific client API, even when using other search
 services not based on the Empathy search API.
 
-::: note Architecture patterns  
+::: note Architecture patterns
+
 If you’re already experienced in the Vue universe, you’ll find the Interface X architecture
 somewhat familiar. Although the [ViewModel layer](https://012.vuejs.org/guide/#Introduction) of the
 **MVVM pattern** sprinkles traces all over the presentation tier, the Interface X architecture is
@@ -65,7 +66,9 @@ basically inspired by the
 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. :::
+develop, and configure each tier separately and independently.
+
+:::
 
 ## Technical stack
 
@@ -121,8 +124,10 @@ building component-based UIs, Vue meets all the requirements:
 - Improved performance out of the box
 - Seamless maintenance. Framework or library-agnostic
 
-::: note  
+::: note
+
 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
-layer.  
+layer.
+
 :::

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

@@ -69,6 +69,11 @@ var setFiltersFromUrl = mapWire(wireFacetsService('select'), function (_a) {
  * @internal
  */
 var facetsWiring = createWiring({
+    ParamsLoadedFromUrl: {
+        // TODO: move this logic to Facets Service
+        clearAllFiltersWire: clearAllFiltersWire,
+        setFiltersFromUrl: setFiltersFromUrl
+    },
     FacetsChanged: {
         updateFacetsGroupWithSearchFacetsWire: updateFacetsGroupWithSearchFacetsWire
     },
@@ -92,11 +97,6 @@ var facetsWiring = createWiring({
     },
     UserClearedQuery: {
         clearAllFiltersWire: clearAllFiltersWire
-    },
-    ParamsLoadedFromUrl: {
-        // TODO: move this logic to Facets Service
-        clearAllFiltersWire: clearAllFiltersWire,
-        setFiltersFromUrl: setFiltersFromUrl
     }
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/facets/wiring.ts"],"sourcesContent":["import { Facet } from '@empathyco/x-types';\nimport { UrlParams } from '../../types/url-params';\nimport { createRawFilters } from '../../utils/filters';\nimport { wireService, wireServiceWithoutPayload } from '../../wiring/wires.factory';\nimport { mapWire } from '../../wiring/wires.operators';\nimport { createWiring } from '../../wiring/wiring.utils';\nimport { DefaultFacetsService } from './service/facets.service';\n\n/**\n * Wires factory for {@link DefaultFacetsService}.\n */\nconst wireFacetsService = wireService(DefaultFacetsService.instance);\n\n/**\n * Wires without payload factory for {@link DefaultFacetsService}.\n */\nconst wireFacetsServiceWithoutPayload = wireServiceWithoutPayload(DefaultFacetsService.instance);\n\n/**\n * Saves the facets contained in the `search` group, removing the previous ones, and keeping the\n * previous filters selected state.\n *\n * @public\n */\nconst updateFacetsGroupWithSearchFacetsWire = mapWire(\n  wireFacetsService('updateFacets'),\n  (facets: Facet[]) => ({\n    facets,\n    id: 'search'\n  })\n);\n\n/**\n * Saves the facets contained in the group, removing the previous ones, and keeping the new filters\n * selected state.\n *\n * @public\n */\nconst setFacetsGroupWire = wireFacetsService('setFacets');\n\n/**\n * Toggles the selected state of a filter.\n *\n * @public\n */\nconst toggleFilterWire = wireFacetsService('toggle');\n\n/**\n * Deselects all the filters. Optionally, it can accept a list of facets ids as payload, and it will\n * only deselect the filters from those facets.\n *\n * @public\n */\nconst clearFiltersWire = wireFacetsService('clearFilters');\n\n/**\n * Deselects all selected filters.\n *\n * @public\n */\nconst clearAllFiltersWire = wireFacetsServiceWithoutPayload('clearFilters');\n\n/**\n * Selects the filter passed by payload.\n *\n * @public\n */\nconst selectFilterWire = wireFacetsService('select');\n\n/**\n * Saves the params from the url.\n *\n * @public\n */\nconst setFiltersFromUrl = mapWire(wireFacetsService('select'), ({ filter }: UrlParams) =>\n  createRawFilters(filter)\n);\n\n/**\n * Wiring configuration for the {@link FacetsXModule | facets module}.\n *\n * @internal\n */\nexport const facetsWiring = createWiring({\n  FacetsChanged: {\n    updateFacetsGroupWithSearchFacetsWire\n  },\n  FacetsGroupProvided: {\n    setFacetsGroupWire\n  },\n  UserChangedExtraParams: {\n    clearAllFiltersWire\n  },\n  UserClickedAFilter: {\n    toggleFilterWire\n  },\n  UserClickedClearAllFilters: {\n    clearFiltersWire\n  },\n  UserModifiedEditableNumberRangeFilter: {\n    selectFilterWire\n  },\n  UserClickedAllFilter: {\n    clearFiltersWire\n  },\n  UserClearedQuery: {\n    clearAllFiltersWire\n  },\n  ParamsLoadedFromUrl: {\n    // TODO: move this logic to Facets Service\n    clearAllFiltersWire,\n    setFiltersFromUrl\n  }\n});\n"],"names":[],"mappings":";;;;;;AAQA;;;AAGA,IAAM,iBAAiB,GAAG,WAAW,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;AAErE;;;AAGA,IAAM,+BAA+B,GAAG,yBAAyB,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;AAEjG;;;;;;AAMA,IAAM,qCAAqC,GAAG,OAAO,CACnD,iBAAiB,CAAC,cAAc,CAAC,EACjC,UAAC,MAAe,IAAK,QAAC;IACpB,MAAM,QAAA;IACN,EAAE,EAAE,QAAQ;CACb,IAAC,CACH,CAAC;AAEF;;;;;;AAMA,IAAM,kBAAkB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAE1D;;;;;AAKA,IAAM,gBAAgB,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AAErD;;;;;;AAMA,IAAM,gBAAgB,GAAG,iBAAiB,CAAC,cAAc,CAAC,CAAC;AAE3D;;;;;AAKA,IAAM,mBAAmB,GAAG,+BAA+B,CAAC,cAAc,CAAC,CAAC;AAE5E;;;;;AAKA,IAAM,gBAAgB,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AAErD;;;;;AAKA,IAAM,iBAAiB,GAAG,OAAO,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,UAAC,EAAqB;QAAnB,MAAM,YAAA;IACtE,OAAA,gBAAgB,CAAC,MAAM,CAAC;AAAxB,CAAwB,CACzB,CAAC;AAEF;;;;;IAKa,YAAY,GAAG,YAAY,CAAC;IACvC,aAAa,EAAE;QACb,qCAAqC,uCAAA;KACtC;IACD,mBAAmB,EAAE;QACnB,kBAAkB,oBAAA;KACnB;IACD,sBAAsB,EAAE;QACtB,mBAAmB,qBAAA;KACpB;IACD,kBAAkB,EAAE;QAClB,gBAAgB,kBAAA;KACjB;IACD,0BAA0B,EAAE;QAC1B,gBAAgB,kBAAA;KACjB;IACD,qCAAqC,EAAE;QACrC,gBAAgB,kBAAA;KACjB;IACD,oBAAoB,EAAE;QACpB,gBAAgB,kBAAA;KACjB;IACD,gBAAgB,EAAE;QAChB,mBAAmB,qBAAA;KACpB;IACD,mBAAmB,EAAE;;QAEnB,mBAAmB,qBAAA;QACnB,iBAAiB,mBAAA;KAClB;CACF;;;;"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/facets/wiring.ts"],"sourcesContent":["import { Facet } from '@empathyco/x-types';\nimport { UrlParams } from '../../types/url-params';\nimport { createRawFilters } from '../../utils/filters';\nimport { wireService, wireServiceWithoutPayload } from '../../wiring/wires.factory';\nimport { mapWire } from '../../wiring/wires.operators';\nimport { createWiring } from '../../wiring/wiring.utils';\nimport { DefaultFacetsService } from './service/facets.service';\n\n/**\n * Wires factory for {@link DefaultFacetsService}.\n */\nconst wireFacetsService = wireService(DefaultFacetsService.instance);\n\n/**\n * Wires without payload factory for {@link DefaultFacetsService}.\n */\nconst wireFacetsServiceWithoutPayload = wireServiceWithoutPayload(DefaultFacetsService.instance);\n\n/**\n * Saves the facets contained in the `search` group, removing the previous ones, and keeping the\n * previous filters selected state.\n *\n * @public\n */\nconst updateFacetsGroupWithSearchFacetsWire = mapWire(\n  wireFacetsService('updateFacets'),\n  (facets: Facet[]) => ({\n    facets,\n    id: 'search'\n  })\n);\n\n/**\n * Saves the facets contained in the group, removing the previous ones, and keeping the new filters\n * selected state.\n *\n * @public\n */\nconst setFacetsGroupWire = wireFacetsService('setFacets');\n\n/**\n * Toggles the selected state of a filter.\n *\n * @public\n */\nconst toggleFilterWire = wireFacetsService('toggle');\n\n/**\n * Deselects all the filters. Optionally, it can accept a list of facets ids as payload, and it will\n * only deselect the filters from those facets.\n *\n * @public\n */\nconst clearFiltersWire = wireFacetsService('clearFilters');\n\n/**\n * Deselects all selected filters.\n *\n * @public\n */\nconst clearAllFiltersWire = wireFacetsServiceWithoutPayload('clearFilters');\n\n/**\n * Selects the filter passed by payload.\n *\n * @public\n */\nconst selectFilterWire = wireFacetsService('select');\n\n/**\n * Saves the params from the url.\n *\n * @public\n */\nconst setFiltersFromUrl = mapWire(wireFacetsService('select'), ({ filter }: UrlParams) =>\n  createRawFilters(filter)\n);\n\n/**\n * Wiring configuration for the {@link FacetsXModule | facets module}.\n *\n * @internal\n */\nexport const facetsWiring = createWiring({\n  ParamsLoadedFromUrl: {\n    // TODO: move this logic to Facets Service\n    clearAllFiltersWire,\n    setFiltersFromUrl\n  },\n  FacetsChanged: {\n    updateFacetsGroupWithSearchFacetsWire\n  },\n  FacetsGroupProvided: {\n    setFacetsGroupWire\n  },\n  UserChangedExtraParams: {\n    clearAllFiltersWire\n  },\n  UserClickedAFilter: {\n    toggleFilterWire\n  },\n  UserClickedClearAllFilters: {\n    clearFiltersWire\n  },\n  UserModifiedEditableNumberRangeFilter: {\n    selectFilterWire\n  },\n  UserClickedAllFilter: {\n    clearFiltersWire\n  },\n  UserClearedQuery: {\n    clearAllFiltersWire\n  }\n});\n"],"names":[],"mappings":";;;;;;AAQA;;;AAGA,IAAM,iBAAiB,GAAG,WAAW,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;AAErE;;;AAGA,IAAM,+BAA+B,GAAG,yBAAyB,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;AAEjG;;;;;;AAMA,IAAM,qCAAqC,GAAG,OAAO,CACnD,iBAAiB,CAAC,cAAc,CAAC,EACjC,UAAC,MAAe,IAAK,QAAC;IACpB,MAAM,QAAA;IACN,EAAE,EAAE,QAAQ;CACb,IAAC,CACH,CAAC;AAEF;;;;;;AAMA,IAAM,kBAAkB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAE1D;;;;;AAKA,IAAM,gBAAgB,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AAErD;;;;;;AAMA,IAAM,gBAAgB,GAAG,iBAAiB,CAAC,cAAc,CAAC,CAAC;AAE3D;;;;;AAKA,IAAM,mBAAmB,GAAG,+BAA+B,CAAC,cAAc,CAAC,CAAC;AAE5E;;;;;AAKA,IAAM,gBAAgB,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AAErD;;;;;AAKA,IAAM,iBAAiB,GAAG,OAAO,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,UAAC,EAAqB;QAAnB,MAAM,YAAA;IACtE,OAAA,gBAAgB,CAAC,MAAM,CAAC;AAAxB,CAAwB,CACzB,CAAC;AAEF;;;;;IAKa,YAAY,GAAG,YAAY,CAAC;IACvC,mBAAmB,EAAE;;QAEnB,mBAAmB,qBAAA;QACnB,iBAAiB,mBAAA;KAClB;IACD,aAAa,EAAE;QACb,qCAAqC,uCAAA;KACtC;IACD,mBAAmB,EAAE;QACnB,kBAAkB,oBAAA;KACnB;IACD,sBAAsB,EAAE;QACtB,mBAAmB,qBAAA;KACpB;IACD,kBAAkB,EAAE;QAClB,gBAAgB,kBAAA;KACjB;IACD,0BAA0B,EAAE;QAC1B,gBAAgB,kBAAA;KACjB;IACD,qCAAqC,EAAE;QACrC,gBAAgB,kBAAA;KACjB;IACD,oBAAoB,EAAE;QACpB,gBAAgB,kBAAA;KACjB;IACD,gBAAgB,EAAE;QAChB,mBAAmB,qBAAA;KACpB;CACF;;;;"}

package/js/x-modules/history-queries/wiring.js

@@ -86,6 +86,9 @@ var moduleDebounce = namespacedDebounce(moduleName);
  * @internal
  */
 var historyQueriesWiring = createWiring({
+    ParamsLoadedFromUrl: {
+        setUrlParams: setUrlParams
+    },
     HistoryQueriesQueryChanged: {
         refreshHistoryQueriesSession: refreshHistoryQueriesSession
     },
@@ -110,9 +113,6 @@ var historyQueriesWiring = createWiring({
     },
     UserPressedRemoveHistoryQuery: {
         removeHistoryQuery: removeHistoryQuery
-    },
-    ParamsLoadedFromUrl: {
-        setUrlParams: setUrlParams
     }
 });