@empathyco/x-components 7.2.0 → 7.2.2

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.2.2](https://github.com/empathyco/x/compare/@empathyco/x-components@7.2.1...@empathyco/x-components@7.2.2) (2026-06-30)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+
+
+
+
+## [7.2.1](https://github.com/empathyco/x/compare/@empathyco/x-components@7.2.0...@empathyco/x-components@7.2.1) (2026-06-26)
+
+### Code Refactoring
+
+* **recommendations:** provide `LIST_ITEMS_KEY` injection token (#2124)
+
+
 ## [7.2.0](https://github.com/empathyco/x/compare/@empathyco/x-components@7.1.1...@empathyco/x-components@7.2.0) (2026-06-18)
 
 ### Features

package/docs/API-reference/api/x-adapter-platform.browseendpointadapter.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-adapter-platform](./x-adapter-platform.md) &gt; [browseEndpointAdapter](./x-adapter-platform.browseendpointadapter.md)
+
+## browseEndpointAdapter variable
+
+Default adapter for the browse endpoint.
+
+**Signature:**
+
+```typescript
+browseEndpointAdapter: import("@empathyco/x-adapter").ExtendableEndpointAdapter<BrowseRequest, BrowseResponse>
+```

package/docs/API-reference/api/x-adapter-platform.browserequestmapper.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-adapter-platform](./x-adapter-platform.md) &gt; [browseRequestMapper](./x-adapter-platform.browserequestmapper.md)
+
+## browseRequestMapper variable
+
+Default implementation for the BrowseRequestMapper.
+
+**Signature:**
+
+```typescript
+browseRequestMapper: import("@empathyco/x-adapter").Mapper<BrowseRequest, PlatformBrowseRequest>
+```

package/docs/API-reference/api/x-adapter-platform.browserequestschema.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-adapter-platform](./x-adapter-platform.md) &gt; [browseRequestSchema](./x-adapter-platform.browserequestschema.md)
+
+## browseRequestSchema variable
+
+Default implementation for the BrowseRequestSchema.
+
+**Signature:**
+
+```typescript
+browseRequestSchema: import("@empathyco/x-adapter").MutableSchema<BrowseRequest, PlatformBrowseRequest>
+```

package/docs/API-reference/api/x-adapter-platform.browseresponsemapper.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-adapter-platform](./x-adapter-platform.md) &gt; [browseResponseMapper](./x-adapter-platform.browseresponsemapper.md)
+
+## browseResponseMapper variable
+
+Default implementation for the BrowseResponseMapper.
+
+**Signature:**
+
+```typescript
+browseResponseMapper: import("@empathyco/x-adapter").Mapper<PlatformBrowseResponse, BrowseResponse>
+```

package/docs/API-reference/api/x-adapter-platform.browseresponseschema.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-adapter-platform](./x-adapter-platform.md) &gt; [browseResponseSchema](./x-adapter-platform.browseresponseschema.md)
+
+## browseResponseSchema variable
+
+Default implementation for the BrowseResponseSchema.
+
+**Signature:**
+
+```typescript
+browseResponseSchema: import("@empathyco/x-adapter").MutableSchema<PlatformBrowseResponse, BrowseResponse>
+```

package/docs/API-reference/api/x-adapter-platform.md

@@ -695,6 +695,61 @@ Default implementation for the AIOverviewSuggestionsSearchSchema.
 Default implementation for the BannerSchema.
 
 
+</td></tr>
+<tr><td>
+
+[browseEndpointAdapter](./x-adapter-platform.browseendpointadapter.md)
+
+
+</td><td>
+
+Default adapter for the browse endpoint.
+
+
+</td></tr>
+<tr><td>
+
+[browseRequestMapper](./x-adapter-platform.browserequestmapper.md)
+
+
+</td><td>
+
+Default implementation for the BrowseRequestMapper.
+
+
+</td></tr>
+<tr><td>
+
+[browseRequestSchema](./x-adapter-platform.browserequestschema.md)
+
+
+</td><td>
+
+Default implementation for the BrowseRequestSchema.
+
+
+</td></tr>
+<tr><td>
+
+[browseResponseMapper](./x-adapter-platform.browseresponsemapper.md)
+
+
+</td><td>
+
+Default implementation for the BrowseResponseMapper.
+
+
+</td></tr>
+<tr><td>
+
+[browseResponseSchema](./x-adapter-platform.browseresponseschema.md)
+
+
+</td><td>
+
+Default implementation for the BrowseResponseSchema.
+
+
 </td></tr>
 <tr><td>
 

package/docs/API-reference/api/x-types.browsablerequest.browsefield.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [BrowsableRequest](./x-types.browsablerequest.md) &gt; [browseField](./x-types.browsablerequest.browsefield.md)
+
+## BrowsableRequest.browseField property
+
+**Signature:**
+
+```typescript
+browseField: string;
+```

package/docs/API-reference/api/x-types.browsablerequest.browsevalue.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [BrowsableRequest](./x-types.browsablerequest.md) &gt; [browseValue](./x-types.browsablerequest.browsevalue.md)
+
+## BrowsableRequest.browseValue property
+
+**Signature:**
+
+```typescript
+browseValue: string;
+```

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

@@ -0,0 +1,73 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [BrowsableRequest](./x-types.browsablerequest.md)
+
+## BrowsableRequest interface
+
+Interface for any Request with a `browseField` and `browseValue` parameters.
+
+**Signature:**
+
+```typescript
+export interface BrowsableRequest 
+```
+
+## Properties
+
+<table><thead><tr><th>
+
+Property
+
+
+</th><th>
+
+Modifiers
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[browseField](./x-types.browsablerequest.browsefield.md)
+
+
+</td><td>
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+
+</td></tr>
+<tr><td>
+
+[browseValue](./x-types.browsablerequest.browsevalue.md)
+
+
+</td><td>
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+
+</td></tr>
+</tbody></table>
+

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

@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [BrowseRequest](./x-types.browserequest.md)
+
+## BrowseRequest interface
+
+The Request for the Browse endpoint.
+
+**Signature:**
+
+```typescript
+export interface BrowseRequest extends BrowsableRequest, FilterableRequest, PageableRequest, SortableRequest, TrackableRequest, ExtraParamsRequest 
+```
+**Extends:** [BrowsableRequest](./x-types.browsablerequest.md)<!-- -->, [FilterableRequest](./x-types.filterablerequest.md)<!-- -->, [PageableRequest](./x-types.pageablerequest.md)<!-- -->, [SortableRequest](./x-types.sortablerequest.md)<!-- -->, [TrackableRequest](./x-types.trackablerequest.md)<!-- -->, [ExtraParamsRequest](./x-types.extraparamsrequest.md)
+

package/docs/API-reference/api/x-types.browseresponse.banners.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [BrowseResponse](./x-types.browseresponse.md) &gt; [banners](./x-types.browseresponse.banners.md)
+
+## BrowseResponse.banners property
+
+**Signature:**
+
+```typescript
+banners?: Banner[];
+```

package/docs/API-reference/api/x-types.browseresponse.browsetagging.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [BrowseResponse](./x-types.browseresponse.md) &gt; [browseTagging](./x-types.browseresponse.browsetagging.md)
+
+## BrowseResponse.browseTagging property
+
+**Signature:**
+
+```typescript
+browseTagging?: TaggingRequest;
+```

package/docs/API-reference/api/x-types.browseresponse.displaybrowsetagging.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [BrowseResponse](./x-types.browseresponse.md) &gt; [displayBrowseTagging](./x-types.browseresponse.displaybrowsetagging.md)
+
+## BrowseResponse.displayBrowseTagging property
+
+**Signature:**
+
+```typescript
+displayBrowseTagging?: TaggingRequest;
+```

package/docs/API-reference/api/x-types.browseresponse.facets.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [BrowseResponse](./x-types.browseresponse.md) &gt; [facets](./x-types.browseresponse.facets.md)
+
+## BrowseResponse.facets property
+
+**Signature:**
+
+```typescript
+facets?: Facet[];
+```

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

@@ -0,0 +1,187 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [BrowseResponse](./x-types.browseresponse.md)
+
+## BrowseResponse interface
+
+Response for the browse endpoint.
+
+**Signature:**
+
+```typescript
+export interface BrowseResponse 
+```
+
+## Properties
+
+<table><thead><tr><th>
+
+Property
+
+
+</th><th>
+
+Modifiers
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[banners?](./x-types.browseresponse.banners.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[Banner](./x-types.banner.md)<!-- -->\[\]
+
+
+</td><td>
+
+_(Optional)_
+
+
+</td></tr>
+<tr><td>
+
+[browseTagging?](./x-types.browseresponse.browsetagging.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[TaggingRequest](./x-types.taggingrequest.md)
+
+
+</td><td>
+
+_(Optional)_
+
+
+</td></tr>
+<tr><td>
+
+[displayBrowseTagging?](./x-types.browseresponse.displaybrowsetagging.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[TaggingRequest](./x-types.taggingrequest.md)
+
+
+</td><td>
+
+_(Optional)_
+
+
+</td></tr>
+<tr><td>
+
+[facets?](./x-types.browseresponse.facets.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[Facet](./x-types.facet.md)<!-- -->\[\]
+
+
+</td><td>
+
+_(Optional)_
+
+
+</td></tr>
+<tr><td>
+
+[promoteds?](./x-types.browseresponse.promoteds.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[Promoted](./x-types.promoted.md)<!-- -->\[\]
+
+
+</td><td>
+
+_(Optional)_
+
+
+</td></tr>
+<tr><td>
+
+[results](./x-types.browseresponse.results.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[Result](./x-types.result.md)<!-- -->\[\]
+
+
+</td><td>
+
+
+</td></tr>
+<tr><td>
+
+[stats?](./x-types.browseresponse.stats.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[Stats](./x-types.stats.md)
+
+
+</td><td>
+
+_(Optional)_
+
+
+</td></tr>
+<tr><td>
+
+[totalResults](./x-types.browseresponse.totalresults.md)
+
+
+</td><td>
+
+
+</td><td>
+
+number
+
+
+</td><td>
+
+
+</td></tr>
+</tbody></table>
+

package/docs/API-reference/api/x-types.browseresponse.promoteds.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [BrowseResponse](./x-types.browseresponse.md) &gt; [promoteds](./x-types.browseresponse.promoteds.md)
+
+## BrowseResponse.promoteds property
+
+**Signature:**
+
+```typescript
+promoteds?: Promoted[];
+```

package/docs/API-reference/api/x-types.browseresponse.results.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [BrowseResponse](./x-types.browseresponse.md) &gt; [results](./x-types.browseresponse.results.md)
+
+## BrowseResponse.results property
+
+**Signature:**
+
+```typescript
+results: Result[];
+```

package/docs/API-reference/api/x-types.browseresponse.stats.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [BrowseResponse](./x-types.browseresponse.md) &gt; [stats](./x-types.browseresponse.stats.md)
+
+## BrowseResponse.stats property
+
+**Signature:**
+
+```typescript
+stats?: Stats;
+```

package/docs/API-reference/api/x-types.browseresponse.totalresults.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [BrowseResponse](./x-types.browseresponse.md) &gt; [totalResults](./x-types.browseresponse.totalresults.md)
+
+## BrowseResponse.totalResults property
+
+**Signature:**
+
+```typescript
+totalResults: number;
+```

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

@@ -301,6 +301,39 @@ A banner is an image with a title, that when clicked redirect the user to an URL
 A boolean filter used in a [FacetFilter](./x-types.facetfilter.md)<!-- -->, which status can be selected or not and it may contains the total results number that the filter should return.
 
 
+</td></tr>
+<tr><td>
+
+[BrowsableRequest](./x-types.browsablerequest.md)
+
+
+</td><td>
+
+Interface for any Request with a `browseField` and `browseValue` parameters.
+
+
+</td></tr>
+<tr><td>
+
+[BrowseRequest](./x-types.browserequest.md)
+
+
+</td><td>
+
+The Request for the Browse endpoint.
+
+
+</td></tr>
+<tr><td>
+
+[BrowseResponse](./x-types.browseresponse.md)
+
+
+</td><td>
+
+Response for the browse endpoint.
+
+
 </td></tr>
 <tr><td>
 

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

@@ -1 +1 @@
-{"version":3,"file":"recommendations.vue.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"x-recommendations\"\n  >\n    <li\n      v-for=\"recommendation in recommendations\"\n      :key=\"recommendation.id\"\n      class=\"x-recommendations__item\"\n      data-test=\"recommendation-item\"\n    >\n      <!--\n        @slot (Required) Recommendation content.\n        @binding {recommendation} recommendation - Recommendation data.\n      -->\n      <slot :recommendation=\"recommendation\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils'\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent, provide } from 'vue'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { recommendationsXModule } from '../x-module'\n\n/**\n * It renders a list of recommendations from the\n * {@link RecommendationsState.recommendations} state by default.\n * The component provides the slot layout which wraps the whole component with the\n * recommendations bounded. It also provides the default slot to customize the item, which is\n * within the layout slot, with the recommendation bounded. Each recommendation should be\n * represented by a {@link BaseResultLink} component besides any other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Recommendations',\n  xModule: recommendationsXModule.name,\n  props: {\n    /** Animation component that will be used to animate the recommendations. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** Number of recommendations to be rendered. */\n    maxItemsToRender: Number,\n  },\n  setup(props, { slots }) {\n    /** The module's list of recommendations. */\n    const storedRecommendations = useState('recommendations').recommendations\n\n    /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n      'UserClickedARecommendation',\n    ])\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     */\n    const recommendations = computed<Result[]>(() =>\n      storedRecommendations.value.slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no recommendations, nothing is rendered.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `layout` slot or empty string if there are\n     * no recommendations.\n     */\n    function renderLayoutSlot() {\n      const slotProps = {\n        animation: props.animation,\n        recommendations: recommendations.value,\n      }\n      return recommendations.value.length ? slots.layout?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { recommendations }\n    return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-recommendations {\n  display: flex;\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provide integration with other\nmodules such as the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations v-slot=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    v-slot=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    :animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\nimport StaggeredFadeAndSlide from '@empathyco/x-components/animations/staggered-fade-and-slide.vue'\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, you can render any\nlayout you want using the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations v-slot:layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img\n            :src=\"recommendation.images[0]\"\n            :alt=\"recommendation.name\"\n            class=\"x-recommendations__image\"\n          />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_renderSlot"],"mappings":";;;;;;SAGU,IAAA,CAAA,eAAA,CAAgB,MAAA,IAAAA,SAAA,EAAA,EAFxBC,WAAA,CAmBYC,uBAAA,CAlBL,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IAAA,GAAA,EAAA,CAAA;IAEd,GAAA,EAAI,IAAA;AAAA,IACJ,WAAA,EAAU,iBAAA;AAAA,IACV,KAAA,EAAM;AAAA,GAAA,EAAA;qBAGJ,MAAyC;AAAA,OAAAF,SAAA,CAAA,IAAA,CAAA,EAD3CG,kBAAA;AAAA,QAWKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAVsB,IAAA,CAAA,eAAA,EAAe,CAAjC,cAAA,KAAc;8BADvBF,kBAAA,CAWK,IAAA,EAAA;AAAA,YATF,KAAK,cAAA,CAAe,EAAA;AAAA,YACrB,KAAA,EAAM,yBAAA;AAAA,YACN,WAAA,EAAU;AAAA,WAAA,EAAA;AAMV,YAAAG,UAAA,CAAyC,0BAAlC,cAAA,EAA8B,EAAA,MAAA,EAAA,IAAA;AAAA,WAAA,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"recommendations.vue.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"x-recommendations\"\n  >\n    <li\n      v-for=\"recommendation in recommendations\"\n      :key=\"recommendation.id\"\n      class=\"x-recommendations__item\"\n      data-test=\"recommendation-item\"\n    >\n      <!--\n        @slot (Required) Recommendation content.\n        @binding {recommendation} recommendation - Recommendation data.\n      -->\n      <slot :recommendation=\"recommendation\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils'\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent, provide } from 'vue'\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { recommendationsXModule } from '../x-module'\n\n/**\n * It renders a list of recommendations from the\n * {@link RecommendationsState.recommendations} state by default.\n * The component provides the slot layout which wraps the whole component with the\n * recommendations bounded. It also provides the default slot to customize the item, which is\n * within the layout slot, with the recommendation bounded. Each recommendation should be\n * represented by a {@link BaseResultLink} component besides any other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Recommendations',\n  xModule: recommendationsXModule.name,\n  props: {\n    /** Animation component that will be used to animate the recommendations. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** Number of recommendations to be rendered. */\n    maxItemsToRender: Number,\n  },\n  setup(props, { slots }) {\n    /** The module's list of recommendations. */\n    const storedRecommendations = useState('recommendations').recommendations\n\n    /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n      'UserClickedARecommendation',\n    ])\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     */\n    const recommendations = computed<Result[]>(() =>\n      storedRecommendations.value.slice(0, props.maxItemsToRender),\n    )\n\n    provide(LIST_ITEMS_KEY as string, recommendations)\n\n    /**\n     * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no recommendations, nothing is rendered.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `layout` slot or empty string if there are\n     * no recommendations.\n     */\n    function renderLayoutSlot() {\n      const slotProps = {\n        animation: props.animation,\n        recommendations: recommendations.value,\n      }\n      return recommendations.value.length ? slots.layout?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { recommendations }\n    return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-recommendations {\n  display: flex;\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provide integration with other\nmodules such as the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations v-slot=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    v-slot=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    :animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\nimport StaggeredFadeAndSlide from '@empathyco/x-components/animations/staggered-fade-and-slide.vue'\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, you can render any\nlayout you want using the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations v-slot:layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img\n            :src=\"recommendation.images[0]\"\n            :alt=\"recommendation.name\"\n            class=\"x-recommendations__image\"\n          />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_renderSlot"],"mappings":";;;;;;SAGU,IAAA,CAAA,eAAA,CAAgB,MAAA,IAAAA,SAAA,EAAA,EAFxBC,WAAA,CAmBYC,uBAAA,CAlBL,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IAAA,GAAA,EAAA,CAAA;IAEd,GAAA,EAAI,IAAA;AAAA,IACJ,WAAA,EAAU,iBAAA;AAAA,IACV,KAAA,EAAM;AAAA,GAAA,EAAA;qBAGJ,MAAyC;AAAA,OAAAF,SAAA,CAAA,IAAA,CAAA,EAD3CG,kBAAA;AAAA,QAWKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAVsB,IAAA,CAAA,eAAA,EAAe,CAAjC,cAAA,KAAc;8BADvBF,kBAAA,CAWK,IAAA,EAAA;AAAA,YATF,KAAK,cAAA,CAAe,EAAA;AAAA,YACrB,KAAA,EAAM,yBAAA;AAAA,YACN,WAAA,EAAU;AAAA,WAAA,EAAA;AAMV,YAAAG,UAAA,CAAyC,0BAAlC,cAAA,EAA8B,EAAA,MAAA,EAAA,IAAA;AAAA,WAAA,CAAA;;;;;;;;;;;;;;"}

package/js/x-modules/recommendations/components/recommendations.vue2.js

@@ -1,4 +1,5 @@
 import { defineComponent, provide, computed } from 'vue';
+import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
 import '../../../composables/create-use-device.js';
 import 'vuex';
 import '../../../plugins/x-bus.js';
@@ -45,6 +46,7 @@ var _sfc_main = defineComponent({
          * @returns - The list of recommendations slice by the number of items to render.
          */
         const recommendations = computed(() => storedRecommendations.value.slice(0, props.maxItemsToRender));
+        provide(LIST_ITEMS_KEY, recommendations);
         /**
          * Render function to execute the `layout` slot, binding `slotsProps` and getting only the
          * first `vNode` to avoid Fragments and Text root nodes.