@empathyco/x-components 3.0.0-alpha.159 → 3.0.0-alpha.161

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 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.161](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.160...@empathyco/x-components@3.0.0-alpha.161) (2022-08-26)
+
+### Features
+
+- **components:** variants auto selection (#679)
+  ([c1c8664](https://github.com/empathyco/x/commit/c1c866481ae8866fec4fd9e2dd5389fcba00e62b)),
+  closes [EX-6878](https://searchbroker.atlassian.net/browse/EX-6878)
+
+# 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.160](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.159...@empathyco/x-components@3.0.0-alpha.160) (2022-08-25)
+
+### Features
+
+- **components:** merge a variant with the result (#667)
+  ([553d0e5](https://github.com/empathyco/x/commit/553d0e5de8ef5468eb673246f39fbeb826301fa1)),
+  closes [EX-6762](https://searchbroker.atlassian.net/browse/EX-6762)
+
+# 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.159](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.158...@empathyco/x-components@3.0.0-alpha.159) (2022-08-24)
 
 ### Documentation

package/core/index.js

@@ -98,6 +98,8 @@ export { default as BaseResultPreviousPrice } from '../js/components/result/base
 export { default as BaseFallbackImage } from '../js/components/result/base-result-fallback-image.vue.js';
 export { default as BasePlaceholderImage } from '../js/components/result/base-result-placeholder-image.vue.js';
 export { default as BaseResultRating } from '../js/components/result/base-result-rating.vue.js';
+export { default as ResultVariantsProvider } from '../js/components/result/result-variants-provider.vue.js';
+export { default as ResultVariantSelector } from '../js/components/result/result-variant-selector.vue.js';
 export { default as BaseScroll } from '../js/components/scroll/base-scroll.vue.js';
 export { default as ScrollMixin } from '../js/components/scroll/scroll.mixin.js';
 export { default as BaseSuggestion } from '../js/components/suggestions/base-suggestion.vue.js';
@@ -118,7 +120,7 @@ export { default as SlidingPanel } from '../js/components/sliding-panel.vue.js';
 export { default as SnippetCallbacks } from '../js/components/snippet-callbacks.vue.js';
 export { XEmit, XOn } from '../js/components/decorators/bus.decorators.js';
 export { Debounce } from '../js/components/decorators/debounce.decorators.js';
-export { LIST_ITEMS_KEY, QUERY_KEY } from '../js/components/decorators/injection.consts.js';
+export { LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from '../js/components/decorators/injection.consts.js';
 export { XInject, XProvide } from '../js/components/decorators/injection.decorators.js';
 export { Getter, State } from '../js/components/decorators/store.decorators.js';
 export { ItemsListInjectionMixin } from '../js/components/items-list-injection.mixin.js';

package/core/index.js.map

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

package/design-system/full-theme.css

@@ -1310,47 +1310,6 @@
 [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
   margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
 }
-.x-input-group--line .x-input-group,
-.x-input-group--line.x-input-group {
-  --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
-  --x-size-border-width-right-input-group-default: var(
-    --x-size-border-width-right-input-group-line
-  );
-  --x-size-border-width-bottom-input-group-default: var(
-    --x-size-border-width-bottom-input-group-line
-  );
-  --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
-}
-.x-input-group--line .x-input-group > *:not(.x-input-group__action),
-.x-input-group--line.x-input-group > *:not(.x-input-group__action) {
-  --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
-  --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
-}
-[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
-}
-[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
-}
-[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-left: calc(
-      var(--x-size-border-width-inline-input-group-line) * -1
-    ) !important;
-}
-[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-right: calc(
-      var(--x-size-border-width-inline-input-group-line) * -1
-    ) !important;
-}
-.x-input-group--line .x-input-group > .x-input-group__action,
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
-  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
-}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -1394,6 +1353,47 @@
   );
   --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
 }
+.x-input-group--line .x-input-group,
+.x-input-group--line.x-input-group {
+  --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
+  --x-size-border-width-right-input-group-default: var(
+    --x-size-border-width-right-input-group-line
+  );
+  --x-size-border-width-bottom-input-group-default: var(
+    --x-size-border-width-bottom-input-group-line
+  );
+  --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
+}
+.x-input-group--line .x-input-group > *:not(.x-input-group__action),
+.x-input-group--line.x-input-group > *:not(.x-input-group__action) {
+  --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
+  --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
+}
+[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
+}
+[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
+}
+[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-left: calc(
+      var(--x-size-border-width-inline-input-group-line) * -1
+    ) !important;
+}
+[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-right: calc(
+      var(--x-size-border-width-inline-input-group-line) * -1
+    ) !important;
+}
+.x-input-group--line .x-input-group > .x-input-group__action,
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
+  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
+}
 :root {
   --x-size-padding-left-input-group-line: 0;
   --x-size-padding-right-input-group-line: 0;
@@ -1560,13 +1560,6 @@
   --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-pill);
   --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-pill);
 }
-:root {
-  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
-  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
-}
 .x-list {
   display: flex;
   flex-flow: var(--x-string-flow-list);
@@ -7483,3 +7476,11 @@
 .x-normal-case {
   text-transform: none;
 }
+
+:root {
+  --x-size-border-radius-input-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-top-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-right-input-pill: var(--x-size-border-radius-input-pill);
+  --x-size-border-radius-bottom-left-input-pill: var(--x-size-border-radius-input-pill);
+}

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

@@ -115,6 +115,8 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [RenderlessExtraParams](./x-components.renderlessextraparams.md) | It emits a [ExtraParamsXEvents.UserChangedExtraParams](./x-components.extraparamsxevents.userchangedextraparams.md) when the <code>updateValue</code> is called. |
 |  [RenderlessFilter](./x-components.renderlessfilter.md) | Renders default slot content. It binds to the default slot a [BooleanFilter](./x-types.booleanfilter.md)<!-- -->, the [XEvents](./x-components.xevent.md) that will be emitted when clicking the content, the css classes and if the content should be disabled. |
 |  [ResultsList](./x-components.resultslist.md) | It renders a [ItemsList](./x-components.itemslist.md) list with the results from [SearchState.results](./x-components.searchstate.results.md) by default.<!-- -->The component provides a default slot which wraps the whole component with the <code>results</code> bound.<!-- -->It also provides the slot result to customize the item, which is within the default slot, with the result bound. |
+|  [ResultVariantSelector](./x-components.resultvariantselector.md) | Component to show and select the available variants of a product for a given nest level. TODO: Add logger warning on mount when result is not injected. |
+|  [ResultVariantsProvider](./x-components.resultvariantsprovider.md) | Component that exposes the result merged with its selected variant in the default slot.<!-- -->It receives the original result and keeps track of the selected variant.<!-- -->It provides the original result, the array containing the selected variants and a callback to set the selected variant to be used from a child. |
 |  [Scroll](./x-components.scroll.md) | Scrollable container that emits scroll related X Events. It exposes all the listeners and props from the [BaseScroll](./x-components.basescroll.md) component. |
 |  [ScrollMixin](./x-components.scrollmixin.md) | Mixin to share Scroll logic. |
 |  [ScrollToTop](./x-components.scrolltotop.md) | The <code>ScrollToTop</code> component is a button that the user can click to make a container scroll up to its initial position. |

package/docs/API-reference/api/x-components.resultvariantselector.level.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; [ResultVariantSelector](./x-components.resultvariantselector.md) &gt; [level](./x-components.resultvariantselector.level.md)
+
+## ResultVariantSelector.level property
+
+The nest level of the variants to be rendered.
+
+<b>Signature:</b>
+
+```typescript
+level: number;
+```

package/docs/API-reference/api/x-components.resultvariantselector.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; [ResultVariantSelector](./x-components.resultvariantselector.md)
+
+## ResultVariantSelector class
+
+Component to show and select the available variants of a product for a given nest level. TODO: Add logger warning on mount when result is not injected.
+
+<b>Signature:</b>
+
+```typescript
+export default class ResultVariantSelector extends Vue 
+```
+<b>Extends:</b> Vue
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [level](./x-components.resultvariantselector.level.md) |  | number | The nest level of the variants to be rendered. |
+|  [result](./x-components.resultvariantselector.result.md) |  | Result | The original result, used to retrieve the available variants for the level. |
+|  [selectedVariants](./x-components.resultvariantselector.selectedvariants.md) |  | ResultVariant\[\] | Array containing the selected variants. |
+|  [selectResultVariant](./x-components.resultvariantselector.selectresultvariant.md) |  | (variant: ResultVariant, level?: number) =&gt; void | Callback to be called when a variant is selected. |
+

package/docs/API-reference/api/x-components.resultvariantselector.result.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; [ResultVariantSelector](./x-components.resultvariantselector.md) &gt; [result](./x-components.resultvariantselector.result.md)
+
+## ResultVariantSelector.result property
+
+The original result, used to retrieve the available variants for the level.
+
+<b>Signature:</b>
+
+```typescript
+result: Result;
+```

package/docs/API-reference/api/x-components.resultvariantselector.selectedvariants.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; [ResultVariantSelector](./x-components.resultvariantselector.md) &gt; [selectedVariants](./x-components.resultvariantselector.selectedvariants.md)
+
+## ResultVariantSelector.selectedVariants property
+
+Array containing the selected variants.
+
+<b>Signature:</b>
+
+```typescript
+selectedVariants: ResultVariant[];
+```

package/docs/API-reference/api/x-components.resultvariantselector.selectresultvariant.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; [ResultVariantSelector](./x-components.resultvariantselector.md) &gt; [selectResultVariant](./x-components.resultvariantselector.selectresultvariant.md)
+
+## ResultVariantSelector.selectResultVariant property
+
+Callback to be called when a variant is selected.
+
+<b>Signature:</b>
+
+```typescript
+selectResultVariant: (variant: ResultVariant, level?: number) => void;
+```

package/docs/API-reference/api/x-components.resultvariantsprovider.autoselectdepth.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; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [autoSelectDepth](./x-components.resultvariantsprovider.autoselectdepth.md)
+
+## ResultVariantsProvider.autoSelectDepth property
+
+The provider by default will auto select the first variants of all levels. This prop allows to limit the number of variants auto selected when the provider is created. Take into account that the depth will be the variants level + 1, so, setting autoSelectDepth to 0 will not select any variant, setting it to 1 will select only the first variant of the first level, and so on.
+
+<b>Signature:</b>
+
+```typescript
+autoSelectDepth: number;
+```

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

@@ -0,0 +1,37 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [ResultVariantsProvider](./x-components.resultvariantsprovider.md)
+
+## ResultVariantsProvider class
+
+Component that exposes the result merged with its selected variant in the default slot.
+
+It receives the original result and keeps track of the selected variant.
+
+It provides the original result, the array containing the selected variants and a callback to set the selected variant to be used from a child.
+
+<b>Signature:</b>
+
+```typescript
+export default class ResultVariantsProvider extends Vue 
+```
+<b>Extends:</b> Vue
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [autoSelectDepth](./x-components.resultvariantsprovider.autoselectdepth.md) |  | number | The provider by default will auto select the first variants of all levels. This prop allows to limit the number of variants auto selected when the provider is created. Take into account that the depth will be the variants level + 1, so, setting autoSelectDepth to 0 will not select any variant, setting it to 1 will select only the first variant of the first level, and so on. |
+|  [result](./x-components.resultvariantsprovider.result.md) |  | Result | The original result containing the variants. |
+|  [resultToProvide](./x-components.resultvariantsprovider.resulttoprovide.md) |  | Result | Merges the original result with the selected variant. The merge is done with all the selected variants of the array. |
+|  [selectedVariants](./x-components.resultvariantsprovider.selectedvariants.md) |  | ResultVariant\[\] | Array to keep track of the selected variants of the result. Each position of the array is a nest level in the variants' hierarchy, so, the second position will contain a variant that is present inside the variant of the first position, and so on. |
+
+## Methods
+
+|  Method | Modifiers | Description |
+|  --- | --- | --- |
+|  [render(createElement)](./x-components.resultvariantsprovider.render.md) |  | Render function of the provider. It exposes the result with the selected variant merged. |
+|  [resetSelectedVariants()](./x-components.resultvariantsprovider.resetselectedvariants.md) |  | Resets the selected variants when the result changes. That includes doing the auto selection of the variants when the component is created and when the result is changed. |
+|  [selectFirstVariants(variant)](./x-components.resultvariantsprovider.selectfirstvariants.md) |  | Adds to the selectedVariants array the variants up to the autoSelectDepth level. |
+|  [selectResultVariant(variant, level)](./x-components.resultvariantsprovider.selectresultvariant.md) |  | Selects a variant of the result. When called, it slices the array of selected variants to remove the selected child variants. Emits the [XEventsTypes.UserSelectedAResultVariant](./x-components.xeventstypes.userselectedaresultvariant.md) when called. |
+

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

@@ -0,0 +1,26 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [render](./x-components.resultvariantsprovider.render.md)
+
+## ResultVariantsProvider.render() method
+
+Render function of the provider. It exposes the result with the selected variant merged.
+
+<b>Signature:</b>
+
+```typescript
+render(createElement: CreateElement): VNode;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  createElement | CreateElement | Vue createElement method. |
+
+<b>Returns:</b>
+
+VNode
+
+- The VNode of the first element passed in the slot.
+

package/docs/API-reference/api/x-components.resultvariantsprovider.resetselectedvariants.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; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [resetSelectedVariants](./x-components.resultvariantsprovider.resetselectedvariants.md)
+
+## ResultVariantsProvider.resetSelectedVariants() method
+
+Resets the selected variants when the result changes. That includes doing the auto selection of the variants when the component is created and when the result is changed.
+
+<b>Signature:</b>
+
+```typescript
+resetSelectedVariants(): void;
+```
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/api/x-components.resultvariantsprovider.result.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; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [result](./x-components.resultvariantsprovider.result.md)
+
+## ResultVariantsProvider.result property
+
+The original result containing the variants.
+
+<b>Signature:</b>
+
+```typescript
+result: Result;
+```

package/docs/API-reference/api/x-components.resultvariantsprovider.resulttoprovide.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; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [resultToProvide](./x-components.resultvariantsprovider.resulttoprovide.md)
+
+## ResultVariantsProvider.resultToProvide property
+
+Merges the original result with the selected variant. The merge is done with all the selected variants of the array.
+
+<b>Signature:</b>
+
+```typescript
+get resultToProvide(): Result;
+```

package/docs/API-reference/api/x-components.resultvariantsprovider.selectedvariants.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; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [selectedVariants](./x-components.resultvariantsprovider.selectedvariants.md)
+
+## ResultVariantsProvider.selectedVariants property
+
+Array to keep track of the selected variants of the result. Each position of the array is a nest level in the variants' hierarchy, so, the second position will contain a variant that is present inside the variant of the first position, and so on.
+
+<b>Signature:</b>
+
+```typescript
+selectedVariants: ResultVariant[];
+```

package/docs/API-reference/api/x-components.resultvariantsprovider.selectfirstvariants.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; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [selectFirstVariants](./x-components.resultvariantsprovider.selectfirstvariants.md)
+
+## ResultVariantsProvider.selectFirstVariants() method
+
+Adds to the selectedVariants array the variants up to the autoSelectDepth level.
+
+<b>Signature:</b>
+
+```typescript
+selectFirstVariants(variant?: ResultVariant): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  variant | ResultVariant | Variant to add to the array. |
+
+<b>Returns:</b>
+
+void
+

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

@@ -0,0 +1,25 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [ResultVariantsProvider](./x-components.resultvariantsprovider.md) &gt; [selectResultVariant](./x-components.resultvariantsprovider.selectresultvariant.md)
+
+## ResultVariantsProvider.selectResultVariant() method
+
+Selects a variant of the result. When called, it slices the array of selected variants to remove the selected child variants. Emits the [XEventsTypes.UserSelectedAResultVariant](./x-components.xeventstypes.userselectedaresultvariant.md) when called.
+
+<b>Signature:</b>
+
+```typescript
+selectResultVariant(variant: ResultVariant, level?: number): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  variant | ResultVariant | The variant to set. |
+|  level | number | The nest level where the variant is placed inside the result. |
+
+<b>Returns:</b>
+
+void
+

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

@@ -45,5 +45,6 @@ Aside from common [XEvents](./x-components.xevent.md)<!-- -->, this interface al
 |  [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. |
 |  [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

@@ -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; [XEventsTypes](./x-components.xeventstypes.md) &gt; [UserSelectedAResultVariant](./x-components.xeventstypes.userselectedaresultvariant.md)
+
+## 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.
+
+<b>Signature:</b>
+
+```typescript
+UserSelectedAResultVariant: {
+        result: Result;
+        variant: ResultVariant;
+        level: number;
+    };
+```