@empathyco/x-components 7.4.0 → 7.5.0

package/docs/API-reference/api/x-components.vendorxmodule.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; [vendorXModule](./x-components.vendorxmodule.md)
+
+## vendorXModule variable
+
+Vendor [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `vendor` entry point.
+
+**Signature:**
+
+```typescript
+vendorXModule: VendorXModule
+```

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

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [vendorXStoreModule](./x-components.vendorxstoremodule.md)
+
+## vendorXStoreModule variable
+
+**Signature:**
+
+```typescript
+vendorXStoreModule: VendorXStoreModule
+```

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

@@ -0,0 +1,73 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [WatchedInternalBrowseRequest](./x-components.watchedinternalbrowserequest.md)
+
+## WatchedInternalBrowseRequest interface
+
+A representation of a watched [InternalBrowseRequest](./x-components.internalbrowserequest.md) object, wrapping its new and old values.
+
+**Signature:**
+
+```typescript
+export interface WatchedInternalBrowseRequest 
+```
+
+## Properties
+
+<table><thead><tr><th>
+
+Property
+
+
+</th><th>
+
+Modifiers
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[newRequest](./x-components.watchedinternalbrowserequest.newrequest.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[InternalBrowseRequest](./x-components.internalbrowserequest.md)
+
+
+</td><td>
+
+
+</td></tr>
+<tr><td>
+
+[oldRequest](./x-components.watchedinternalbrowserequest.oldrequest.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[InternalBrowseRequest](./x-components.internalbrowserequest.md)
+
+
+</td><td>
+
+
+</td></tr>
+</tbody></table>
+

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

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [WatchedInternalBrowseRequest](./x-components.watchedinternalbrowserequest.md) &gt; [newRequest](./x-components.watchedinternalbrowserequest.newrequest.md)
+
+## WatchedInternalBrowseRequest.newRequest property
+
+**Signature:**
+
+```typescript
+newRequest: InternalBrowseRequest;
+```

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

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [WatchedInternalBrowseRequest](./x-components.watchedinternalbrowserequest.md) &gt; [oldRequest](./x-components.watchedinternalbrowserequest.oldrequest.md)
+
+## WatchedInternalBrowseRequest.oldRequest property
+
+**Signature:**
+
+```typescript
+oldRequest: InternalBrowseRequest;
+```

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

@@ -9,9 +9,9 @@
 **Signature:**
 
 ```typescript
-export interface XEventsTypes extends DeviceXEvents, EmpathizeXEvents, ExtraParamsXEvents, FacetsXEvents, HistoryQueriesXEvents, IdentifierResultsXEvents, NextQueriesXEvents, PopularSearchesXEvents, QueriesPreviewXEvents, QuerySuggestionsXEvents, RecommendationsXEvents, RelatedTagsXEvents, ScrollXEvents, SearchBoxXEvents, SearchXEvents, BrowseXEvents, SemanticQueriesXEvents, TaggingXEvents, ExperienceControlsXEvents, UrlXEvents, RelatedPromptsXEvents, AiXEvents 
+export interface XEventsTypes extends DeviceXEvents, EmpathizeXEvents, ExtraParamsXEvents, FacetsXEvents, HistoryQueriesXEvents, IdentifierResultsXEvents, NextQueriesXEvents, PopularSearchesXEvents, QueriesPreviewXEvents, QuerySuggestionsXEvents, RecommendationsXEvents, RelatedTagsXEvents, ScrollXEvents, SearchBoxXEvents, SearchXEvents, BrowseXEvents, SemanticQueriesXEvents, TaggingXEvents, ExperienceControlsXEvents, UrlXEvents, RelatedPromptsXEvents, AiXEvents, VendorXEvents 
 ```
-**Extends:** [DeviceXEvents](./x-components.devicexevents.md)<!-- -->, [EmpathizeXEvents](./x-components.empathizexevents.md)<!-- -->, [ExtraParamsXEvents](./x-components.extraparamsxevents.md)<!-- -->, [FacetsXEvents](./x-components.facetsxevents.md)<!-- -->, [HistoryQueriesXEvents](./x-components.historyqueriesxevents.md)<!-- -->, [IdentifierResultsXEvents](./x-components.identifierresultsxevents.md)<!-- -->, [NextQueriesXEvents](./x-components.nextqueriesxevents.md)<!-- -->, [PopularSearchesXEvents](./x-components.popularsearchesxevents.md)<!-- -->, [QueriesPreviewXEvents](./x-components.queriespreviewxevents.md)<!-- -->, [QuerySuggestionsXEvents](./x-components.querysuggestionsxevents.md)<!-- -->, [RecommendationsXEvents](./x-components.recommendationsxevents.md)<!-- -->, [RelatedTagsXEvents](./x-components.relatedtagsxevents.md)<!-- -->, [ScrollXEvents](./x-components.scrollxevents.md)<!-- -->, [SearchBoxXEvents](./x-components.searchboxxevents.md)<!-- -->, [SearchXEvents](./x-components.searchxevents.md)<!-- -->, BrowseXEvents, [SemanticQueriesXEvents](./x-components.semanticqueriesxevents.md)<!-- -->, [TaggingXEvents](./x-components.taggingxevents.md)<!-- -->, [ExperienceControlsXEvents](./x-components.experiencecontrolsxevents.md)<!-- -->, [UrlXEvents](./x-components.urlxevents.md)<!-- -->, [RelatedPromptsXEvents](./x-components.relatedpromptsxevents.md)<!-- -->, [AiXEvents](./x-components.aixevents.md)
+**Extends:** [DeviceXEvents](./x-components.devicexevents.md)<!-- -->, [EmpathizeXEvents](./x-components.empathizexevents.md)<!-- -->, [ExtraParamsXEvents](./x-components.extraparamsxevents.md)<!-- -->, [FacetsXEvents](./x-components.facetsxevents.md)<!-- -->, [HistoryQueriesXEvents](./x-components.historyqueriesxevents.md)<!-- -->, [IdentifierResultsXEvents](./x-components.identifierresultsxevents.md)<!-- -->, [NextQueriesXEvents](./x-components.nextqueriesxevents.md)<!-- -->, [PopularSearchesXEvents](./x-components.popularsearchesxevents.md)<!-- -->, [QueriesPreviewXEvents](./x-components.queriespreviewxevents.md)<!-- -->, [QuerySuggestionsXEvents](./x-components.querysuggestionsxevents.md)<!-- -->, [RecommendationsXEvents](./x-components.recommendationsxevents.md)<!-- -->, [RelatedTagsXEvents](./x-components.relatedtagsxevents.md)<!-- -->, [ScrollXEvents](./x-components.scrollxevents.md)<!-- -->, [SearchBoxXEvents](./x-components.searchboxxevents.md)<!-- -->, [SearchXEvents](./x-components.searchxevents.md)<!-- -->, [BrowseXEvents](./x-components.browsexevents.md)<!-- -->, [SemanticQueriesXEvents](./x-components.semanticqueriesxevents.md)<!-- -->, [TaggingXEvents](./x-components.taggingxevents.md)<!-- -->, [ExperienceControlsXEvents](./x-components.experiencecontrolsxevents.md)<!-- -->, [UrlXEvents](./x-components.urlxevents.md)<!-- -->, [RelatedPromptsXEvents](./x-components.relatedpromptsxevents.md)<!-- -->, [AiXEvents](./x-components.aixevents.md)<!-- -->, [VendorXEvents](./x-components.vendorxevents.md)
 
 ## Remarks
 

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

@@ -62,7 +62,7 @@ Description
 
 </td><td>
 
-BrowseXModule
+[BrowseXModule](./x-components.browsexmodule.md)
 
 
 </td><td>
@@ -408,6 +408,23 @@ BrowseXModule
 </td><td>
 
 
+</td></tr>
+<tr><td>
+
+[vendor](./x-components.xmodulestree.vendor.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[VendorXModule](./x-components.vendorxmodule.md)
+
+
+</td><td>
+
+
 </td></tr>
 </tbody></table>
 

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

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

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

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

package/docs/API-reference/components/vendor/x-components.vendor-results-list.md

@@ -0,0 +1,21 @@
+---
+
+title: VendorResultsList
+
+---
+
+# VendorResultsList
+
+It renders a ItemsList of vendor results from VendorState.results.
+
+The component provides a default slot which wraps the whole component with the `vendorResults`
+plus the `injectedListItems` which also contains the injected list items from
+the ancestor.
+
+It also provides the parent slots to customize the items.
+
+## Props
+
+| Name                   | Description                                                          | Type                       | Default           |
+| ---------------------- | -------------------------------------------------------------------- | -------------------------- | ----------------- |
+| <code>animation</code> | Animation component that will be used to animate the vendor results. | <code>AnimationProp</code> | <code>'ul'</code> |

package/js/components/result/base-result-add-to-cart.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-add-to-cart.vue.js","sources":["../../../../src/components/result/base-result-add-to-cart.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-result-add-to-cart xds:button\"\n    data-test=\"result-add-to-cart\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/index'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport type { WireMetadata } from '../../wiring/index'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Renders a button with a default slot. It receives the result with the data and emits\n * {@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseEventButton },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * The list of additional events to be emitted by the component when user clicks the add2cart button.\n     *\n     * @internal\n     */\n    const resultAddToCartExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultAddToCartExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component.\n     */\n    const metadata = inject<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>(\n      'resultAddToCartExtraEventsMetadata',\n      {},\n    )\n\n    /**\n     * The events to be emitted by the button.\n     *\n     * @returns Events {@link XEventsTypes} to emit.\n     *\n     * @public\n     */\n    const events = computed(() => {\n      return resultAddToCartExtraEvents.reduce(\n        (acc, event) => {\n          acc[event] = props.result\n          return acc\n        },\n        { UserClickedResultAddToCart: props.result } as Partial<XEventsTypes>,\n      )\n    })\n\n    return {\n      events,\n      metadata,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedResultAddToCart`](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 button. The event payload is the result data.\n\n## Examples\n\nRenders a button with a default slot. It receives the result with the data and emits an event\n`UserClickedResultAddToCart` to the bus on click mouse event.\n\n### Basic example\n\nThis component is a button to emit `UserClickedResultAddToCart` when clicked by the user.\n\n```vue\n<template>\n  <BaseResultAddToCart :result=\"result\">\n    <img src=\"./add-to-cart.svg\" alt=\"Add to cart\" />\n    <span>Add to cart</span>\n  </BaseResultAddToCart>\n</template>\n\n<script setup>\nimport { BaseResultAddToCart } from '@empathyco/x-components'\nconst result = {\n  id: '123',\n  name: 'Product name',\n  price: 19.99,\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_renderSlot"],"mappings":";;;;;;sBACEA,WAAA,CAQkB,0BAAA,EAAA;AAAA,IAPf,MAAA,EAAQ,IAAA,CAAA,MAAA;AAAA,IACR,QAAA,EAAU,IAAA,CAAA,QAAA;AAAA,IACX,KAAA,EAAM,iCAAA;AAAA,IACN,WAAA,EAAU;AAAA,GAAA,EAAA;qBAGV,MAAQ;AAAA,MAARC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"base-result-add-to-cart.vue.js","sources":["../../../../src/components/result/base-result-add-to-cart.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-result-add-to-cart xds:button\"\n    data-test=\"result-add-to-cart\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/index'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport type { WireMetadata } from '../../wiring/index'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Renders a button with a default slot. It receives the result with the data and emits\n * {@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseEventButton },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * The list of additional events to be emitted by the component when user clicks the add2cart button.\n     *\n     * @internal\n     */\n    const resultAddToCartExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultAddToCartExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component.\n     */\n    const metadata = inject<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>(\n      'resultAddToCartExtraEventsMetadata',\n      {},\n    )\n\n    /**\n     * The events to be emitted by the button.\n     *\n     * @returns Events {@link XEventsTypes} to emit.\n     *\n     * @public\n     */\n    const events = computed(() => {\n      return resultAddToCartExtraEvents.reduce(\n        (acc, event) => {\n          acc[event] = props.result\n          return acc\n        },\n        { UserClickedResultAddToCart: props.result } as Partial<XEventsTypes>,\n      )\n    })\n\n    return {\n      events: props.result.modelName === 'Result' ? events : {},\n      metadata,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedResultAddToCart`](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 button. The event payload is the result data.\n\n## Examples\n\nRenders a button with a default slot. It receives the result with the data and emits an event\n`UserClickedResultAddToCart` to the bus on click mouse event.\n\n### Basic example\n\nThis component is a button to emit `UserClickedResultAddToCart` when clicked by the user.\n\n```vue\n<template>\n  <BaseResultAddToCart :result=\"result\">\n    <img src=\"./add-to-cart.svg\" alt=\"Add to cart\" />\n    <span>Add to cart</span>\n  </BaseResultAddToCart>\n</template>\n\n<script setup>\nimport { BaseResultAddToCart } from '@empathyco/x-components'\nconst result = {\n  id: '123',\n  name: 'Product name',\n  price: 19.99,\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_renderSlot"],"mappings":";;;;;;sBACEA,WAAA,CAQkB,0BAAA,EAAA;AAAA,IAPf,MAAA,EAAQ,IAAA,CAAA,MAAA;AAAA,IACR,QAAA,EAAU,IAAA,CAAA,QAAA;AAAA,IACX,KAAA,EAAM,iCAAA;AAAA,IACN,WAAA,EAAU;AAAA,GAAA,EAAA;qBAGV,MAAQ;AAAA,MAARC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/result/base-result-add-to-cart.vue2.js

@@ -45,7 +45,7 @@ var _sfc_main = defineComponent({
             }, { UserClickedResultAddToCart: props.result });
         });
         return {
-            events,
+            events: props.result.modelName === 'Result' ? events : {},
             metadata,
         };
     },

package/js/components/result/base-result-add-to-cart.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-add-to-cart.vue2.js","sources":["../../../../src/components/result/base-result-add-to-cart.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-result-add-to-cart xds:button\"\n    data-test=\"result-add-to-cart\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/index'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport type { WireMetadata } from '../../wiring/index'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Renders a button with a default slot. It receives the result with the data and emits\n * {@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseEventButton },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * The list of additional events to be emitted by the component when user clicks the add2cart button.\n     *\n     * @internal\n     */\n    const resultAddToCartExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultAddToCartExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component.\n     */\n    const metadata = inject<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>(\n      'resultAddToCartExtraEventsMetadata',\n      {},\n    )\n\n    /**\n     * The events to be emitted by the button.\n     *\n     * @returns Events {@link XEventsTypes} to emit.\n     *\n     * @public\n     */\n    const events = computed(() => {\n      return resultAddToCartExtraEvents.reduce(\n        (acc, event) => {\n          acc[event] = props.result\n          return acc\n        },\n        { UserClickedResultAddToCart: props.result } as Partial<XEventsTypes>,\n      )\n    })\n\n    return {\n      events,\n      metadata,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedResultAddToCart`](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 button. The event payload is the result data.\n\n## Examples\n\nRenders a button with a default slot. It receives the result with the data and emits an event\n`UserClickedResultAddToCart` to the bus on click mouse event.\n\n### Basic example\n\nThis component is a button to emit `UserClickedResultAddToCart` when clicked by the user.\n\n```vue\n<template>\n  <BaseResultAddToCart :result=\"result\">\n    <img src=\"./add-to-cart.svg\" alt=\"Add to cart\" />\n    <span>Add to cart</span>\n  </BaseResultAddToCart>\n</template>\n\n<script setup>\nimport { BaseResultAddToCart } from '@empathyco/x-components'\nconst result = {\n  id: '123',\n  name: 'Product name',\n  price: 19.99,\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAqBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,6BAA6B,MAAM,CACvC,4BAA4B,EAC5B,EAAE,CACJ;AAEA;;AAEE;QACF,MAAM,QAAO,GAAI,MAAM,CACrB,oCAAoC,EACpC,EAAE,CACJ;AAEA;;;;;;AAME;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAC,MAAI;YAC1B,OAAO,0BAA0B,CAAC,MAAM,CACtC,CAAC,GAAG,EAAE,KAAK,KAAG;AACZ,gBAAA,GAAG,CAAC,KAAK,CAAA,GAAI,KAAK,CAAC,MAAK;AACxB,gBAAA,OAAO,GAAE;YACX,CAAC,EACD,EAAE,0BAA0B,EAAE,KAAK,CAAC,MAAK,EAA4B,CACvE;AACF,QAAA,CAAC,CAAA;QAED,OAAO;YACL,MAAM;YACN,QAAQ;SACV;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-result-add-to-cart.vue2.js","sources":["../../../../src/components/result/base-result-add-to-cart.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-result-add-to-cart xds:button\"\n    data-test=\"result-add-to-cart\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/index'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport type { WireMetadata } from '../../wiring/index'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Renders a button with a default slot. It receives the result with the data and emits\n * {@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseEventButton },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * The list of additional events to be emitted by the component when user clicks the add2cart button.\n     *\n     * @internal\n     */\n    const resultAddToCartExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultAddToCartExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component.\n     */\n    const metadata = inject<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>(\n      'resultAddToCartExtraEventsMetadata',\n      {},\n    )\n\n    /**\n     * The events to be emitted by the button.\n     *\n     * @returns Events {@link XEventsTypes} to emit.\n     *\n     * @public\n     */\n    const events = computed(() => {\n      return resultAddToCartExtraEvents.reduce(\n        (acc, event) => {\n          acc[event] = props.result\n          return acc\n        },\n        { UserClickedResultAddToCart: props.result } as Partial<XEventsTypes>,\n      )\n    })\n\n    return {\n      events: props.result.modelName === 'Result' ? events : {},\n      metadata,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedResultAddToCart`](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 button. The event payload is the result data.\n\n## Examples\n\nRenders a button with a default slot. It receives the result with the data and emits an event\n`UserClickedResultAddToCart` to the bus on click mouse event.\n\n### Basic example\n\nThis component is a button to emit `UserClickedResultAddToCart` when clicked by the user.\n\n```vue\n<template>\n  <BaseResultAddToCart :result=\"result\">\n    <img src=\"./add-to-cart.svg\" alt=\"Add to cart\" />\n    <span>Add to cart</span>\n  </BaseResultAddToCart>\n</template>\n\n<script setup>\nimport { BaseResultAddToCart } from '@empathyco/x-components'\nconst result = {\n  id: '123',\n  name: 'Product name',\n  price: 19.99,\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAqBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,6BAA6B,MAAM,CACvC,4BAA4B,EAC5B,EAAE,CACJ;AAEA;;AAEE;QACF,MAAM,QAAO,GAAI,MAAM,CACrB,oCAAoC,EACpC,EAAE,CACJ;AAEA;;;;;;AAME;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAC,MAAI;YAC1B,OAAO,0BAA0B,CAAC,MAAM,CACtC,CAAC,GAAG,EAAE,KAAK,KAAG;AACZ,gBAAA,GAAG,CAAC,KAAK,CAAA,GAAI,KAAK,CAAC,MAAK;AACxB,gBAAA,OAAO,GAAE;YACX,CAAC,EACD,EAAE,0BAA0B,EAAE,KAAK,CAAC,MAAK,EAA4B,CACvE;AACF,QAAA,CAAC,CAAA;QAED,OAAO;AACL,YAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,QAAO,GAAI,MAAK,GAAI,EAAE;YACzD,QAAQ;SACV;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/result/base-result-link.vue.js

@@ -1,21 +1,25 @@
 import _sfc_main from './base-result-link.vue2.js';
-import { openBlock, createElementBlock, withModifiers, renderSlot } from 'vue';
+import { openBlock, createElementBlock, mergeProps, toHandlers, renderSlot } from 'vue';
 import './base-result-link.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = ["href"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("a", {
+  return openBlock(), createElementBlock("a", mergeProps({
     ref: _ctx.el,
     href: _ctx.result.url,
     class: "x-result-link",
-    "data-test": "result-link",
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitUserClickedAResult && _ctx.emitUserClickedAResult(...args)),
-    onContextmenu: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.emitUserClickedAResult && _ctx.emitUserClickedAResult(...args), ["right"])),
-    onMouseup: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.emitUserClickedAResult && _ctx.emitUserClickedAResult(...args), ["middle"]))
-  }, [
+    "data-test": "result-link"
+  }, toHandlers(
+    _ctx.result.modelName === "Result" ? {
+      click: _ctx.emitUserClickedAResult,
+      contextmenu: _ctx.emitUserClickedAResult,
+      auxclick: (event) => event.button === 1 && _ctx.emitUserClickedAResult()
+    } : {},
+    true
+  )), [
     renderSlot(_ctx.$slots, "default", { result: _ctx.result }, void 0, true)
-  ], 40, _hoisted_1);
+  ], 16, _hoisted_1);
 }
 var baseResultLink = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4d589f60"]]);
 

package/js/components/result/base-result-link.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-link.vue.js","sources":["../../../../src/components/result/base-result-link.vue"],"sourcesContent":["<template>\n  <a\n    :ref=\"el\"\n    :href=\"result.url\"\n    class=\"x-result-link\"\n    data-test=\"result-link\"\n    @click=\"emitUserClickedAResult\"\n    @click.right=\"emitUserClickedAResult\"\n    @click.middle=\"emitUserClickedAResult\"\n  >\n    <!--\n      @slot (Required) Link content with a text, an image, another component or both\n          @binding {Result} result - Result data\n     -->\n    <slot :result=\"result\" />\n  </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { WireMetadata } from '../../wiring'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { defineComponent, inject, ref } from 'vue'\nimport { use$x } from '../../composables/index'\n\n/**\n * Component to be reused that renders an `<a>` wrapping the result contents.\n *\n * @remarks\n * It has the logic to emit {@link XEventsTypes.UserClickedAResult} to the bus on click mouse\n * events. Additionally, this component may be injected other events to be emitted on click\n * event, so, depending on where it's used its father component may provide this events.\n *\n * @public\n */\nexport default defineComponent({\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**\n     * The rendered DOM element.\n     *\n     * @internal\n     */\n    const el = ref()\n\n    /**\n     * The list of additional events to be emitted by the component when user clicks the link.\n     *\n     * @internal\n     */\n    const resultClickExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultClickExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component. This component can emit\n     * have extra events so this record pairs each event to its metadata.\n     */\n    const resultLinkMetadataPerEvent = inject<\n      // TODO: Refactor this inject key to the constants when doing EMP-909\n      Partial<\n        Record<\n          PropsWithType<XEventsTypes, Result>,\n          Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>\n        >\n      >\n    >('resultLinkMetadataPerEvent', {})\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedAResult} when user clicks on the result, and also\n     * additional events if have been injected in the component.\n     *\n     * @internal\n     */\n    const emitUserClickedAResult = (): void => {\n      $x.emit('UserClickedAResult', props.result, {\n        target: el.value!,\n        ...resultLinkMetadataPerEvent.UserClickedAResult,\n      })\n      resultClickExtraEvents.forEach(event => {\n        $x.emit(event, props.result, { target: el.value!, ...resultLinkMetadataPerEvent[event] })\n      })\n    }\n\n    return {\n      el,\n      emitUserClickedAResult,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-link {\n  text-decoration: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedAResult`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\nThe component can emit more events on click using the `resultClickExtraEvents` prop.\n\n## Examples\n\nThis component is a wrapper for the result contents (images, name, price...). It may be part of the\nsearch result page, recommendations or other section which needs to include results.\n\nAdditionally, this component may be injected other events to be emitted on click event, so,\ndepending where it's used its father component may provide these events.\n\nThe result prop is required. It will render an anchor element with the href to the result URL:\n\n```vue\n<template>\n  <BaseResultLink :result=\"result\">\n    <template #default=\"{ result }\">\n      <img :src=\"result.images[0]\" alt=\"Result image\" />\n      <span>{{ result.name }}</span>\n    </template>\n  </BaseResultLink>\n</template>\n\n<script setup>\nimport { BaseResultLink } from '@empathyco/x-components'\nconst result = {\n  name: 'Jacket',\n  url: 'https://shop.com/jacket',\n  images: ['https://shop.com/jacket.jpg'],\n}\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_withModifiers","_renderSlot"],"mappings":";;;;;;;sBACEA,kBAAA,CAcI,GAAA,EAAA;AAAA,IAbD,GAAA,EAAK,IAAA,CAAA,EAAA;AAAA,IACL,MAAM,IAAA,CAAA,MAAA,CAAO,GAAA;AAAA,IACd,KAAA,EAAM,eAAA;AAAA,IACN,WAAA,EAAU,aAAA;AAAA,IACT,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,sBAAA,IAAA,IAAA,CAAA,sBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAA,aAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,CAAA,GAAA,IAAA,KACM,IAAA,CAAA,sBAAA,IAAA,IAAA,CAAA,sBAAA,CAAA,GAAA,IAAA,CAAA,EAAsB,CAAA,OAAA,CAAA,CAAA,CAAA;AAAA,IAAA,SAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAA,aAAA,CAAA,CAAA,GAAA,IAAA,KACrB,IAAA,CAAA,sBAAA,IAAA,IAAA,CAAA,sBAAA,CAAA,GAAA,IAAA,CAAA,EAAsB,CAAA,QAAA,CAAA,CAAA;AAAA,GAAA,EAAA;IAMrCC,UAAA,CAAyB,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAlB,QAAQ,IAAA,CAAA,MAAA,EAAM,EAAA,MAAA,EAAA,IAAA;AAAA,GAAA,EAAA,EAAA,EAAA,UAAA,CAAA;;;;;;"}
+{"version":3,"file":"base-result-link.vue.js","sources":["../../../../src/components/result/base-result-link.vue"],"sourcesContent":["<template>\n  <a\n    :ref=\"el\"\n    :href=\"result.url\"\n    class=\"x-result-link\"\n    data-test=\"result-link\"\n    v-on=\"\n      result.modelName === 'Result'\n        ? {\n            click: emitUserClickedAResult,\n            contextmenu: emitUserClickedAResult,\n            auxclick: (event: { button: number }) => event.button === 1 && emitUserClickedAResult(),\n          }\n        : {}\n    \"\n  >\n    <!--\n      @slot (Required) Link content with a text, an image, another component or both\n          @binding {Result} result - Result data\n     -->\n    <slot :result=\"result\" />\n  </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { WireMetadata } from '../../wiring'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { defineComponent, inject, ref } from 'vue'\nimport { use$x } from '../../composables/index'\n\n/**\n * Component to be reused that renders an `<a>` wrapping the result contents.\n *\n * @remarks\n * It has the logic to emit {@link XEventsTypes.UserClickedAResult} to the bus on click mouse\n * events. Additionally, this component may be injected other events to be emitted on click\n * event, so, depending on where it's used its father component may provide this events.\n *\n * @public\n */\nexport default defineComponent({\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**\n     * The rendered DOM element.\n     *\n     * @internal\n     */\n    const el = ref()\n\n    /**\n     * The list of additional events to be emitted by the component when user clicks the link.\n     *\n     * @internal\n     */\n    const resultClickExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultClickExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component. This component can emit\n     * have extra events so this record pairs each event to its metadata.\n     */\n    const resultLinkMetadataPerEvent = inject<\n      // TODO: Refactor this inject key to the constants when doing EMP-909\n      Partial<\n        Record<\n          PropsWithType<XEventsTypes, Result>,\n          Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>\n        >\n      >\n    >('resultLinkMetadataPerEvent', {})\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedAResult} when user clicks on the result, and also\n     * additional events if have been injected in the component.\n     *\n     * @internal\n     */\n    const emitUserClickedAResult = (): void => {\n      $x.emit('UserClickedAResult', props.result, {\n        target: el.value!,\n        ...resultLinkMetadataPerEvent.UserClickedAResult,\n      })\n      resultClickExtraEvents.forEach(event => {\n        $x.emit(event, props.result, { target: el.value!, ...resultLinkMetadataPerEvent[event] })\n      })\n    }\n\n    return {\n      el,\n      emitUserClickedAResult,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-link {\n  text-decoration: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedAResult`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\nThe component can emit more events on click using the `resultClickExtraEvents` prop.\n\n## Examples\n\nThis component is a wrapper for the result contents (images, name, price...). It may be part of the\nsearch result page, recommendations or other section which needs to include results.\n\nAdditionally, this component may be injected other events to be emitted on click event, so,\ndepending where it's used its father component may provide these events.\n\nThe result prop is required. It will render an anchor element with the href to the result URL:\n\n```vue\n<template>\n  <BaseResultLink :result=\"result\">\n    <template #default=\"{ result }\">\n      <img :src=\"result.images[0]\" alt=\"Result image\" />\n      <span>{{ result.name }}</span>\n    </template>\n  </BaseResultLink>\n</template>\n\n<script setup>\nimport { BaseResultLink } from '@empathyco/x-components'\nconst result = {\n  name: 'Jacket',\n  url: 'https://shop.com/jacket',\n  images: ['https://shop.com/jacket.jpg'],\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_renderSlot"],"mappings":";;;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAoBI,KApBJC,UAAA,CAoBI;AAAA,IAnBD,GAAA,EAAK,IAAA,CAAA,EAAA;AAAA,IACL,MAAM,IAAA,CAAA,MAAA,CAAO,GAAA;AAAA,IACd,KAAA,EAAM,eAAA;AAAA,IACN,WAAA,EAAU;AAAA,GAAA,EACVC,UAAA;AAAA,IAAa,YAAO,SAAA,KAAS,QAAA,GAAA;AAA6C,MAAA,KAAA,EAAA,IAAA,CAAA,sBAAA;AAAA,MAAA,WAAA,EAAiD,IAAA,CAAA,sBAAA;AAAA,MAAA,QAAA,EAAA,CAA+C,KAAA,KAA8B,KAAA,CAAM,MAAA,KAAM,CAAA,IAAU,IAAA,CAAA,sBAAA;AAAsB,KAAA,GAAA,EAAA;;;IAcpPC,UAAA,CAAyB,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAlB,QAAQ,IAAA,CAAA,MAAA,EAAM,EAAA,MAAA,EAAA,IAAA;AAAA,GAAA,EAAA,EAAA,EAAA,UAAA,CAAA;;;;;;"}

package/js/components/result/base-result-link.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-link.vue2.js","sources":["../../../../src/components/result/base-result-link.vue"],"sourcesContent":["<template>\n  <a\n    :ref=\"el\"\n    :href=\"result.url\"\n    class=\"x-result-link\"\n    data-test=\"result-link\"\n    @click=\"emitUserClickedAResult\"\n    @click.right=\"emitUserClickedAResult\"\n    @click.middle=\"emitUserClickedAResult\"\n  >\n    <!--\n      @slot (Required) Link content with a text, an image, another component or both\n          @binding {Result} result - Result data\n     -->\n    <slot :result=\"result\" />\n  </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { WireMetadata } from '../../wiring'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { defineComponent, inject, ref } from 'vue'\nimport { use$x } from '../../composables/index'\n\n/**\n * Component to be reused that renders an `<a>` wrapping the result contents.\n *\n * @remarks\n * It has the logic to emit {@link XEventsTypes.UserClickedAResult} to the bus on click mouse\n * events. Additionally, this component may be injected other events to be emitted on click\n * event, so, depending on where it's used its father component may provide this events.\n *\n * @public\n */\nexport default defineComponent({\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**\n     * The rendered DOM element.\n     *\n     * @internal\n     */\n    const el = ref()\n\n    /**\n     * The list of additional events to be emitted by the component when user clicks the link.\n     *\n     * @internal\n     */\n    const resultClickExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultClickExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component. This component can emit\n     * have extra events so this record pairs each event to its metadata.\n     */\n    const resultLinkMetadataPerEvent = inject<\n      // TODO: Refactor this inject key to the constants when doing EMP-909\n      Partial<\n        Record<\n          PropsWithType<XEventsTypes, Result>,\n          Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>\n        >\n      >\n    >('resultLinkMetadataPerEvent', {})\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedAResult} when user clicks on the result, and also\n     * additional events if have been injected in the component.\n     *\n     * @internal\n     */\n    const emitUserClickedAResult = (): void => {\n      $x.emit('UserClickedAResult', props.result, {\n        target: el.value!,\n        ...resultLinkMetadataPerEvent.UserClickedAResult,\n      })\n      resultClickExtraEvents.forEach(event => {\n        $x.emit(event, props.result, { target: el.value!, ...resultLinkMetadataPerEvent[event] })\n      })\n    }\n\n    return {\n      el,\n      emitUserClickedAResult,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-link {\n  text-decoration: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedAResult`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\nThe component can emit more events on click using the `resultClickExtraEvents` prop.\n\n## Examples\n\nThis component is a wrapper for the result contents (images, name, price...). It may be part of the\nsearch result page, recommendations or other section which needs to include results.\n\nAdditionally, this component may be injected other events to be emitted on click event, so,\ndepending where it's used its father component may provide these events.\n\nThe result prop is required. It will render an anchor element with the href to the result URL:\n\n```vue\n<template>\n  <BaseResultLink :result=\"result\">\n    <template #default=\"{ result }\">\n      <img :src=\"result.images[0]\" alt=\"Result image\" />\n      <span>{{ result.name }}</span>\n    </template>\n  </BaseResultLink>\n</template>\n\n<script setup>\nimport { BaseResultLink } from '@empathyco/x-components'\nconst result = {\n  name: 'Jacket',\n  url: 'https://shop.com/jacket',\n  images: ['https://shop.com/jacket.jpg'],\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;AAIE;AACF,QAAA,MAAM,KAAK,GAAG,EAAC;AAEf;;;;AAIE;QACF,MAAM,sBAAqB,GAAI,MAAM,CACnC,wBAAwB,EACxB,EAAE,CACJ;AAEA;;;AAGE;QACF,MAAM,0BAAyB,GAAI,MAAM,CAQvC,4BAA4B,EAAE,EAAE,CAAA;AAElC;;;;;AAKE;QACF,MAAM,sBAAqB,GAAI,MAAU;YACvC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,MAAM,EAAE;gBAC1C,MAAM,EAAE,EAAE,CAAC,KAAM;gBACjB,GAAG,0BAA0B,CAAC,kBAAkB;AACjD,aAAA,CAAA;AACD,YAAA,sBAAsB,CAAC,OAAO,CAAC,KAAI,IAAG;gBACpC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,KAAM,EAAE,GAAG,0BAA0B,CAAC,KAAK,GAAG,CAAA;AAC1F,YAAA,CAAC,CAAA;AACH,QAAA,CAAA;QAEA,OAAO;YACL,EAAE;YACF,sBAAsB;SACxB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-result-link.vue2.js","sources":["../../../../src/components/result/base-result-link.vue"],"sourcesContent":["<template>\n  <a\n    :ref=\"el\"\n    :href=\"result.url\"\n    class=\"x-result-link\"\n    data-test=\"result-link\"\n    v-on=\"\n      result.modelName === 'Result'\n        ? {\n            click: emitUserClickedAResult,\n            contextmenu: emitUserClickedAResult,\n            auxclick: (event: { button: number }) => event.button === 1 && emitUserClickedAResult(),\n          }\n        : {}\n    \"\n  >\n    <!--\n      @slot (Required) Link content with a text, an image, another component or both\n          @binding {Result} result - Result data\n     -->\n    <slot :result=\"result\" />\n  </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { WireMetadata } from '../../wiring'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { defineComponent, inject, ref } from 'vue'\nimport { use$x } from '../../composables/index'\n\n/**\n * Component to be reused that renders an `<a>` wrapping the result contents.\n *\n * @remarks\n * It has the logic to emit {@link XEventsTypes.UserClickedAResult} to the bus on click mouse\n * events. Additionally, this component may be injected other events to be emitted on click\n * event, so, depending on where it's used its father component may provide this events.\n *\n * @public\n */\nexport default defineComponent({\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**\n     * The rendered DOM element.\n     *\n     * @internal\n     */\n    const el = ref()\n\n    /**\n     * The list of additional events to be emitted by the component when user clicks the link.\n     *\n     * @internal\n     */\n    const resultClickExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultClickExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component. This component can emit\n     * have extra events so this record pairs each event to its metadata.\n     */\n    const resultLinkMetadataPerEvent = inject<\n      // TODO: Refactor this inject key to the constants when doing EMP-909\n      Partial<\n        Record<\n          PropsWithType<XEventsTypes, Result>,\n          Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>\n        >\n      >\n    >('resultLinkMetadataPerEvent', {})\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedAResult} when user clicks on the result, and also\n     * additional events if have been injected in the component.\n     *\n     * @internal\n     */\n    const emitUserClickedAResult = (): void => {\n      $x.emit('UserClickedAResult', props.result, {\n        target: el.value!,\n        ...resultLinkMetadataPerEvent.UserClickedAResult,\n      })\n      resultClickExtraEvents.forEach(event => {\n        $x.emit(event, props.result, { target: el.value!, ...resultLinkMetadataPerEvent[event] })\n      })\n    }\n\n    return {\n      el,\n      emitUserClickedAResult,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-link {\n  text-decoration: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedAResult`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\nThe component can emit more events on click using the `resultClickExtraEvents` prop.\n\n## Examples\n\nThis component is a wrapper for the result contents (images, name, price...). It may be part of the\nsearch result page, recommendations or other section which needs to include results.\n\nAdditionally, this component may be injected other events to be emitted on click event, so,\ndepending where it's used its father component may provide these events.\n\nThe result prop is required. It will render an anchor element with the href to the result URL:\n\n```vue\n<template>\n  <BaseResultLink :result=\"result\">\n    <template #default=\"{ result }\">\n      <img :src=\"result.images[0]\" alt=\"Result image\" />\n      <span>{{ result.name }}</span>\n    </template>\n  </BaseResultLink>\n</template>\n\n<script setup>\nimport { BaseResultLink } from '@empathyco/x-components'\nconst result = {\n  name: 'Jacket',\n  url: 'https://shop.com/jacket',\n  images: ['https://shop.com/jacket.jpg'],\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;AAiCA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;AAIE;AACF,QAAA,MAAM,KAAK,GAAG,EAAC;AAEf;;;;AAIE;QACF,MAAM,sBAAqB,GAAI,MAAM,CACnC,wBAAwB,EACxB,EAAE,CACJ;AAEA;;;AAGE;QACF,MAAM,0BAAyB,GAAI,MAAM,CAQvC,4BAA4B,EAAE,EAAE,CAAA;AAElC;;;;;AAKE;QACF,MAAM,sBAAqB,GAAI,MAAU;YACvC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,MAAM,EAAE;gBAC1C,MAAM,EAAE,EAAE,CAAC,KAAM;gBACjB,GAAG,0BAA0B,CAAC,kBAAkB;AACjD,aAAA,CAAA;AACD,YAAA,sBAAsB,CAAC,OAAO,CAAC,KAAI,IAAG;gBACpC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,KAAM,EAAE,GAAG,0BAA0B,CAAC,KAAK,GAAG,CAAA;AAC1F,YAAA,CAAC,CAAA;AACH,QAAA,CAAA;QAEA,OAAO;YACL,EAAE;YACF,sBAAsB;SACxB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/index.js

@@ -210,6 +210,21 @@ export { suggestionsSearchRequest as aiSuggestionsSearchRequest } from './x-modu
 export { aiXStoreModule } from './x-modules/ai/store/module.js';
 export { aiWiring } from './x-modules/ai/wiring.js';
 export { aiXModule } from './x-modules/ai/x-module.js';
+export { default as BrowseResultsList } from './x-modules/browse/components/browse-results-list.vue.js';
+export { default as BrowseSortPickerList } from './x-modules/browse/components/browse-sort-picker-list.vue.js';
+export { cancelFetchAndSaveBrowseResponse, fetchAndSaveBrowseResponse } from './x-modules/browse/store/actions/fetch-and-save-browse-response.action.js';
+export { fetchAndSaveResultsEnrichment as fetchAndSaveBrowseResultsEnrichment } from './x-modules/browse/store/actions/fetch-and-save-results-enrichment.action.js';
+export { fetchBrowseResponse } from './x-modules/browse/store/actions/fetch-browse-response.action.js';
+export { increasePageAppendingResults as increaseBrowsePageAppendingResults } from './x-modules/browse/store/actions/increase-page-apending-results.action.js';
+export { resetRequestOnRefinement as resetBrowseRequestOnRefinement } from './x-modules/browse/store/actions/reset-request-on-refinement.action.js';
+export { saveBrowseResponse } from './x-modules/browse/store/actions/save-browse-response.action.js';
+export { saveOrigin as saveBrowseOrigin } from './x-modules/browse/store/actions/save-origin.action.js';
+export { setUrlParams as setBrowseUrlParams } from './x-modules/browse/store/actions/set-url-params.action.js';
+export { browseEmitters } from './x-modules/browse/store/emitters.js';
+export { request as browseRequest } from './x-modules/browse/store/getters/request.getter.js';
+export { browseXStoreModule, resettableBrowseState } from './x-modules/browse/store/module.js';
+export { browseWiring, cancelFetchAndSaveBrowseResponseWire, clearBrowseQuery, fetchAndSaveBrowseResponseWire, fetchAndSaveBrowseResultsEnrichmentWire, increaseBrowsePageAppendingResultsWire, resetBrowseAppending, resetBrowseRequestOnRefinementWire, resetBrowseStateForReloadWire, resetBrowseStateIfNoRequestWire, resetFromNoBrowseResultsWithFilters, resetIsNoBrowseResults, saveBrowseOriginWire, setBrowseCategory, setBrowseExtraParams, setBrowsePage, setBrowseSelectedFilters, setBrowseSort, setBrowseUrlParamsWire } from './x-modules/browse/wiring.js';
+export { browseXModule } from './x-modules/browse/x-module.js';
 export { default as DeviceDetector } from './x-modules/device/components/device-detector.vue.js';
 export { deviceEmitters } from './x-modules/device/store/emitters.js';
 export { deviceXStoreModule } from './x-modules/device/store/module.js';
@@ -444,4 +459,9 @@ export { replaceableParams, urlEmitters } from './x-modules/url/store/emitters.j
 export { urlXStoreModule } from './x-modules/url/store/module.js';
 export { resetUrlBrowseCategory, setInitialExtraParams, setParams, setUrlBrowseCategory, setUrlFilters, setUrlPage, setUrlParamsFromPreview, setUrlPrompt, setUrlQuery, setUrlQueryFromPreview, setUrlRelatedTags, setUrlScroll, setUrlSelectedFiltersFromPreview, setUrlSort, urlWiring } from './x-modules/url/wiring.js';
 export { urlXModule } from './x-modules/url/x-module.js';
+export { default as VendorResultsList } from './x-modules/vendor/components/vendor-results-list.vue.js';
+export { vendorEmitters } from './x-modules/vendor/store/emitters.js';
+export { vendorXStoreModule } from './x-modules/vendor/store/module.js';
+export { setResults, vendorWiring } from './x-modules/vendor/wiring.js';
+export { vendorXModule } from './x-modules/vendor/x-module.js';
 //# sourceMappingURL=index.js.map

package/js/index.js.map

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

package/js/wiring/namespaced-wires.factory.js

@@ -1,4 +1,4 @@
-import { wireCommit, wireDispatch, wireDispatchWithoutPayload, wireCommitWithoutPayload } from './wires.factory.js';
+import { wireCommit, wireDispatchWithoutPayload, wireCommitWithoutPayload, wireDispatch } from './wires.factory.js';
 import { getStateAndGettersFromModule } from './wiring.utils.js';
 
 /**

package/js/x-modules/browse/components/browse-results-list.vue.js

@@ -0,0 +1,46 @@
+import { defineComponent, provide, h } from 'vue';
+import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
+import ItemsList from '../../../components/items-list.vue.js';
+import { useState } from '../../../composables/use-state.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
+import { browseXModule } from '../x-module.js';
+
+/**
+ * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by
+ * default.
+ *
+ * The component provides a default slot which wraps the whole component with the `results` bound.
+ *
+ * It also provides the slot result to customize the item, which is within the default slot, with
+ * the result bound.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'BrowseResultsList',
+    xModule: browseXModule.name,
+    props: {
+        /** Animation component that will be used to animate the results. */
+        animation: {
+            type: AnimationProp,
+            default: 'ul',
+        },
+    },
+    setup(props, { slots }) {
+        /**
+         * The results to render from the state.
+         *
+         * @remarks The results list are provided with `items` key.
+         */
+        const { results: items } = useState('browse');
+        provide(LIST_ITEMS_KEY, items);
+        return () => {
+            const innerProps = { items: items.value, animation: props.animation };
+            // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
+            return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
+        };
+    },
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=browse-results-list.vue.js.map

package/js/x-modules/browse/components/browse-results-list.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browse-results-list.vue.js","sources":["../../../../../src/x-modules/browse/components/browse-results-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, h, provide } from 'vue'\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types'\nimport { browseXModule } from '../x-module'\n\n/**\n * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by\n * default.\n *\n * The component provides a default slot which wraps the whole component with the `results` bound.\n *\n * It also provides the slot result to customize the item, which is within the default slot, with\n * the result bound.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BrowseResultsList',\n  xModule: browseXModule.name,\n  props: {\n    /** Animation component that will be used to animate the results. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n  },\n  setup(props, { slots }) {\n    /**\n     * The results to render from the state.\n     *\n     * @remarks The results list are provided with `items` key.\n     */\n    const { results: items } = useState('browse')\n\n    provide(LIST_ITEMS_KEY as string, items)\n\n    return () => {\n      const innerProps = { items: items.value, animation: props.animation }\n      // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n      return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots)\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;AAQA;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB;;;;AAIE;QACF,MAAM,EAAE,OAAO,EAAE,KAAI,EAAE,GAAI,QAAQ,CAAC,QAAQ,CAAA;AAE5C,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAA;AAEvC,QAAA,OAAO,MAAI;AACT,YAAA,MAAM,UAAS,GAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAQ,EAAE;;AAEpE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA,IAAK,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAA;AACzE,QAAA,CAAA;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/browse/components/browse-results-list.vue2.js

@@ -0,0 +1,6 @@
+import _sfc_main from './browse-results-list.vue.js';
+
+
+
+export { _sfc_main as default };
+//# sourceMappingURL=browse-results-list.vue2.js.map

package/js/x-modules/browse/components/browse-results-list.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browse-results-list.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/js/x-modules/browse/components/browse-sort-picker-list.vue.js

@@ -0,0 +1,73 @@
+import { defineComponent, watch, computed, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, unref, normalizeClass, renderSlot, mergeProps, createTextVNode, toDisplayString } from 'vue';
+import BaseEventButton from '../../../components/base-event-button.vue.js';
+import { use$x } from '../../../composables/use-_x.js';
+import { useState } from '../../../composables/use-state.js';
+import { browseXModule } from '../x-module.js';
+
+/**
+ * The `SortPickerList` component allows user to select the browse results order. This component
+ * also allows to change the selected sort programmatically.
+ */
+var _sfc_main = /*@__PURE__*/ defineComponent({
+    ...{
+        xModule: browseXModule.name,
+    },
+    __name: 'browse-sort-picker-list',
+    props: {
+        animation: { type: null, required: false, default: 'ul' },
+        items: { type: Array, required: true },
+        buttonClass: { type: String, required: true }
+    },
+    setup(__props) {
+        const props = __props;
+        const $x = use$x();
+        const { sort: selectedSort } = useState('browse');
+        watch(selectedSort, (value) => $x.emit('SelectedBrowseSortProvided', value), {
+            immediate: true,
+        });
+        /**
+         * Sort list items.
+         *
+         * @returns A list of items with their css class and the event associate to it.
+         */
+        const listItems = computed(() => props.items.map((item) => ({
+            item,
+            cssClasses: {
+                'xds:selected': item === selectedSort.value,
+            },
+            event: { UserClickedABrowseSort: item },
+        })));
+        return (_ctx, _cache) => {
+            return (openBlock(), createBlock(resolveDynamicComponent(__props.animation), {
+                tag: "div",
+                class: "x-sort-picker-list",
+                "data-test": "sort-picker",
+                role: "list"
+            }, {
+                default: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(listItems.value, ({ item, cssClasses, event }) => {
+                        return (openBlock(), createBlock(BaseEventButton, {
+                            key: item,
+                            class: normalizeClass([cssClasses, __props.buttonClass]),
+                            "data-test": "sort-picker-button",
+                            events: event,
+                            "aria-pressed": item === unref(selectedSort) || null,
+                            role: "listitem"
+                        }, {
+                            default: withCtx(() => [
+                                renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, { item, isSelected: item === unref(selectedSort) }), () => [
+                                    createTextVNode(toDisplayString(item), 1 /* TEXT */)
+                                ])
+                            ]),
+                            _: 2 /* DYNAMIC */
+                        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "events", "aria-pressed"]));
+                    }), 128 /* KEYED_FRAGMENT */))
+                ]),
+                _: 3 /* FORWARDED */
+            }));
+        };
+    }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=browse-sort-picker-list.vue.js.map

package/js/x-modules/browse/components/browse-sort-picker-list.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browse-sort-picker-list.vue.js","sources":["../../../../../src/x-modules/browse/components/browse-sort-picker-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    tag=\"div\"\n    class=\"x-sort-picker-list\"\n    data-test=\"sort-picker\"\n    role=\"list\"\n  >\n    <BaseEventButton\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"[cssClasses, buttonClass]\"\n      data-test=\"sort-picker-button\"\n      :events=\"event\"\n      :aria-pressed=\"item === selectedSort || null\"\n      role=\"listitem\"\n    >\n      <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n        {{ item }}\n      </slot>\n    </BaseEventButton>\n  </component>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { browseXModule } from '../x-module'\n\n/**\n * Sort Picker item options.\n */\nexport interface SortPickerItem {\n  item: Sort\n  cssClasses: VueCSSClasses\n  event: Partial<XEventsTypes>\n}\n\n/**\n * The `SortPickerList` component allows user to select the browse results order. This component\n * also allows to change the selected sort programmatically.\n */\n\ndefineOptions({\n  xModule: browseXModule.name,\n})\n\nconst props = withDefaults(\n  defineProps<{ animation?: string | Component; items: Sort[]; buttonClass: string }>(),\n  { animation: 'ul' },\n)\n\nconst $x = use$x()\n\nconst { sort: selectedSort } = useState('browse')\n\nwatch(selectedSort, (value: Sort) => $x.emit('SelectedBrowseSortProvided', value), {\n  immediate: true,\n})\n\n/**\n * Sort list items.\n *\n * @returns A list of items with their css class and the event associate to it.\n */\nconst listItems = computed<SortPickerItem[]>(() =>\n  props.items.map((item: string) => ({\n    item,\n    cssClasses: {\n      'xds:selected': item === selectedSort.value,\n    },\n    event: { UserClickedABrowseSort: item },\n  })),\n)\n</script>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_normalizeClass","_unref","_renderSlot","_mergeProps"],"mappings":";;;;;;AA4CA;;;AAGE;;;;;;;;;;;;QAMF,MAAM,KAAK,GAAG,OAAA;AAKd,QAAA,MAAM,EAAE,GAAG,KAAK,EAAC;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAA;AAEhD,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,KAAK,CAAC,EAAE;AACjF,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,SAAS,GAAG,QAAQ,CAAmB,MAC3C,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAY,MAAM;YACjC,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,cAAc,EAAE,IAAI,KAAK,YAAY,CAAC,KAAK;AAC5C,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,EAAE;SACxC,CAAC,CAAC,CACL;;AA9EE,YAAA,QAAAA,SAAA,EAAA,EAAAC,WAAA,CAoBYC,wBAnBL,OAAA,CAAA,SAAS,CAAA,EAAA;AACd,gBAAA,GAAG,EAAC,KAAK;AACT,gBAAA,KAAK,EAAC,oBAAoB;AAC1B,gBAAA,WAAS,EAAC,aAAa;AACvB,gBAAA,IAAI,EAAC;;iCAGH,MAAgD;qBADlDF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA,CAYkBC,2BAXsB,SAAA,CAAA,KAAS,EAAA,CAAA,EAAtC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAA,KAAA;6CADlCH,WAAA,CAYkB,eAAA,EAAA;AAVf,4BAAA,GAAG,EAAE,IAAI;4BACT,KAAK,EAAAI,cAAA,CAAA,CAAG,UAAU,EAAE,OAAA,CAAA,WAAW,CAAA,CAAA;AAChC,4BAAA,WAAS,EAAC,oBAAoB;AAC7B,4BAAA,MAAM,EAAE,KAAK;4BACb,cAAY,EAAE,IAAI,KAAKC,KAAA,CAAA,YAAA,CAAY,IAAA,IAAA;AACpC,4BAAA,IAAI,EAAC;;6CAEL,MAEO;AAFP,gCAAAC,UAAA,CAEO,IAAA,CAAA,MAAA,EAAA,SAAA,EAFPC,WAEO,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAFS,IAAI,cAAc,IAAI,KAAKF,KAAA,CAAA,YAAA,CAAY,EAAA,CAAA,EAAvD,MAEO;oEADF,IAAI,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;"}

package/js/x-modules/browse/components/browse-sort-picker-list.vue2.js

@@ -0,0 +1,6 @@
+import _sfc_main from './browse-sort-picker-list.vue.js';
+
+
+
+export { _sfc_main as default };
+//# sourceMappingURL=browse-sort-picker-list.vue2.js.map

package/js/x-modules/browse/components/browse-sort-picker-list.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browse-sort-picker-list.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}