@empathyco/x-components 3.0.0-alpha.366 → 3.0.0-alpha.368

package/CHANGELOG.md

@@ -1,3 +1,51 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.368](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.367...@empathyco/x-components@3.0.0-alpha.368) (2023-05-11)
+
+
+### ⚠ BREAKING CHANGES
+
+* **deps:** minimum node version required is 18.
+
+### Others
+
+* **deps:** update node to 18 (#1196) ([e0e6b35](https://github.com/empathyco/x/commit/e0e6b35eefb3ef83f22e341f662475b0e6066e94))
+
+
+
+## [3.0.0-alpha.367](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.366...@empathyco/x-components@3.0.0-alpha.367) (2023-05-11)
+
+
+### ⚠ BREAKING CHANGES
+
+* **deps:** minimum version required is node v18
+
+EMP-274
+
+### Features
+
+* migrate suggestions and currency components to vue 3 syntax (#1159) ([67beb82](https://github.com/empathyco/x/commit/67beb820722521e0db3cfdc9ae039e52e6d268f7))
+
+
+### Bug Fixes
+
+* `BaseResultImage` not showing the right size on load (#1176) ([c7ebf54](https://github.com/empathyco/x/commit/c7ebf54f03e23bdf8cd1a64e1e008369ca1a643d))
+
+
+### Others
+
+* **deps:** update node to v18 (#1175) ([14e64e1](https://github.com/empathyco/x/commit/14e64e11fdf7f3d27d59baf56b027857df9e61e7))
+
+
+### Continuous Integration
+
+* parallelize steps (#1174) ([3013595](https://github.com/empathyco/x/commit/3013595857c8dac33f36b2c0d08e747b0735c6a0))
+
+
+
 # Change Log
 
 All notable changes to this project will be documented in this file. See

package/design-system/deprecated-full-theme.css

@@ -1144,15 +1144,6 @@
   --x-size-width-icon-default: var(--x-size-width-icon-s);
   --x-size-height-icon-default: var(--x-size-height-icon-s);
 }
-:root {
-  --x-size-width-icon-xl: var(--x-size-base-07);
-  --x-size-height-icon-xl: var(--x-size-base-07);
-}
-
-.x-icon--xl {
-  --x-size-width-icon-default: var(--x-size-width-icon-xl);
-  --x-size-height-icon-default: var(--x-size-height-icon-xl);
-}
 :root {
   --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -1189,6 +1180,15 @@
   --x-size-border-radius-top-left-input-group-default: 0;
   --x-size-border-radius-bottom-left-input-group-default: 0;
 }
+:root {
+  --x-size-width-icon-xl: var(--x-size-base-07);
+  --x-size-height-icon-xl: var(--x-size-base-07);
+}
+
+.x-icon--xl {
+  --x-size-width-icon-default: var(--x-size-width-icon-xl);
+  --x-size-height-icon-default: var(--x-size-height-icon-xl);
+}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -2619,6 +2619,15 @@
     margin-right: var(--x-size-gap-list-13);
   }
 }
+:root {
+  --x-modal-overlay-color: rgb(0, 0, 0);
+  --x-modal-overlay-opacity: 0.7;
+}
+
+.x-modal__overlay {
+  background-color: var(--x-modal-overlay-color) !important;
+  opacity: var(--x-modal-overlay-opacity) !important;
+}
 :root {
   --x-string-justify-message-default: center;
   --x-size-gap-message-default: var(--x-size-base-03);
@@ -2690,15 +2699,6 @@
 .x-message > p {
   margin: 0;
 }
-:root {
-  --x-modal-overlay-color: rgb(0, 0, 0);
-  --x-modal-overlay-opacity: 0.7;
-}
-
-.x-modal__overlay {
-  background-color: var(--x-modal-overlay-color) !important;
-  opacity: var(--x-modal-overlay-opacity) !important;
-}
 :root {
   --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
   --x-color-text-option-list-button-bottom-selected-hover: var(

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

@@ -2,7 +2,7 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseCurrency](./x-components.basecurrency.md)
 
-## BaseCurrency class
+## BaseCurrency variable
 
 Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.
 
@@ -11,9 +11,26 @@ Regarding the format or mask to be defined as string: - Use 'i' to define intege
 **Signature:**
 
 ```typescript
-export default class BaseCurrency extends Vue 
+_default: import("vue").DefineComponent<{
+    value: {
+        type: NumberConstructor;
+        required: true;
+    };
+    format: {
+        type: StringConstructor;
+    };
+}, {
+    currency: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        required: true;
+    };
+    format: {
+        type: StringConstructor;
+    };
+}>>, {}>
 ```
-**Extends:** Vue
 
 ## Remarks
 
@@ -33,11 +50,3 @@ It will render: `123.456,7890 €`<!-- -->.
 
 See docs below for more examples.
 
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [format?](./x-components.basecurrency.format.md) | <code>protected</code> | string | _(Optional)_ The format as string. |
-|  [injectedFormat](./x-components.basecurrency.injectedformat.md) |  | string | The injected format as string. |
-|  [value](./x-components.basecurrency.value.md) | <code>protected</code> | number | Numeric value to be formatted. |
-

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

@@ -2,7 +2,7 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseSuggestion](./x-components.basesuggestion.md)
 
-## BaseSuggestion class
+## BaseSuggestion variable
 
 Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the [XEvents](./x-components.xevent.md) that will be emitted on click with a given feature.
 
@@ -11,26 +11,51 @@ The default slot receives the suggestion and the matched query has props.
 **Signature:**
 
 ```typescript
-export default class BaseSuggestion extends Vue 
+_default: import("vue").DefineComponent<{
+    query: {
+        type: StringConstructor;
+        default: string;
+    };
+    suggestion: {
+        type: PropType<Suggestion>;
+        required: true;
+    };
+    feature: {
+        type: PropType<QueryFeature>;
+    };
+    suggestionSelectedEvents: {
+        type: PropType<Partial<XEventsTypes>>;
+        required: true;
+    };
+    highlightCurated: {
+        type: BooleanConstructor;
+    };
+}, {
+    el: import("vue").Ref<HTMLElement | null>;
+    filter: import("vue").ComputedRef<BooleanFilter | undefined>;
+    emitEvents: () => void;
+    dynamicCSSClasses: import("vue").ComputedRef<VueCSSClasses>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    query: {
+        type: StringConstructor;
+        default: string;
+    };
+    suggestion: {
+        type: PropType<Suggestion>;
+        required: true;
+    };
+    feature: {
+        type: PropType<QueryFeature>;
+    };
+    suggestionSelectedEvents: {
+        type: PropType<Partial<XEventsTypes>>;
+        required: true;
+    };
+    highlightCurated: {
+        type: BooleanConstructor;
+    };
+}>>, {
+    query: string;
+    highlightCurated: boolean;
+}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [dynamicCSSClasses](./x-components.basesuggestion.dynamiccssclasses.md) | <p><code>protected</code></p><p><code>readonly</code></p> | [VueCSSClasses](./x-components.vuecssclasses.md) | Generates css classes dynamically. |
-|  [events](./x-components.basesuggestion.events.md) | <p><code>protected</code></p><p><code>readonly</code></p> | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; | The event handler that will be triggered when clicking on a suggestion. |
-|  [feature?](./x-components.basesuggestion.feature.md) | <code>protected</code> | [QueryFeature](./x-components.queryfeature.md) | _(Optional)_ The feature from which the events will be emitted. |
-|  [filter](./x-components.basesuggestion.filter.md) | <p><code>protected</code></p><p><code>readonly</code></p> | BooleanFilter \| undefined | Returns the suggestion filter object. It is a BooleanFilter because the label is needed. It returns only the first element because the facets and filters are being planned in the BaseSuggestions component. |
-|  [highlightCurated](./x-components.basesuggestion.highlightcurated.md) | <code>protected</code> | boolean | Indicates if the curated suggestion should be highlighted. |
-|  [query](./x-components.basesuggestion.query.md) | <code>protected</code> | string | The normalized query of the module using this component. |
-|  [suggestion](./x-components.basesuggestion.suggestion.md) | <code>protected</code> | Suggestion | The suggestion to render and use in the default slot. |
-|  [suggestionSelectedEvents](./x-components.basesuggestion.suggestionselectedevents.md) | <code>protected</code> | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; | The [XEvents](./x-components.xevent.md) that will be emitted when selecting a suggestion. |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [emitEvents()](./x-components.basesuggestion.emitevents.md) | <code>protected</code> | Emits the events when the button is clicked. |
-

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

@@ -17,7 +17,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BannersList](./x-components.bannerslist.md) | <p>It renders a [ItemsList](./x-components.itemslist.md) list of banners from [SearchState.banners](./x-components.searchstate.banners.md) by default using the <code>ItemsInjectionMixin</code>.</p><p>The component provides a default slot which wraps the whole component with the <code>banners</code> plus the <code>searchInjectedItems</code> which also contains the injected list items from the ancestor.</p><p>It also provides the parent slots to customize the items.</p> |
 |  [BaseColumnPickerDropdown](./x-components.basecolumnpickerdropdown.md) | <p>Column picker dropdown component renders [dropdown](./x-components.basedropdown.md) component which options are the different columns you can set for a grid.</p><p>It emits [UserClickedColumnPicker](./x-components.xeventstypes.userclickedcolumnpicker.md) on dropdown input.</p> |
 |  [BaseColumnPickerList](./x-components.basecolumnpickerlist.md) | <p>Column picker list component renders a list of buttons to choose the columns number.</p><p>Additionally, this component exposes the following props to modify the classes of the elements: <code>buttonClass</code>.</p> |
-|  [BaseCurrency](./x-components.basecurrency.md) | <p>Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.</p><p>Regarding the format or mask to be defined as string: - Use 'i' to define integer numbers. - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the format doesn't include decimals, it is filled with zeros until reach the length defined with 'd's. - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group. - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character. - If you want to hide the decimal part if it's zero, you can add the <code>?</code> symbol after the decimal characters (e.g. 'i.iii,dd?', for <code>1234</code> you would get <code>1.234</code> instead of <code>1.234,00</code>). - Set whatever you need around the integers and decimals marks. - Default mask: 'i.iii,dd' which returns '1.345,67'.</p> |
 |  [BaseDropdown](./x-components.basedropdown.md) | Dropdown component that mimics a Select element behavior, but with the option to customize the toggle button and each item contents. |
 |  [BaseEventButton](./x-components.baseeventbutton.md) | Component to be reused that renders a <code>&lt;button&gt;</code> with the logic of emitting events to the bus on click. The events are passed as an object to prop [events](./x-components.xeventstypes.md)<!-- -->. The keys are the event name and the values are the payload of each event. All events are emitted with its respective payload. If any event doesn't need payload a <code>undefined</code> must be passed as value. |
 |  [BaseEventsModal](./x-components.baseeventsmodal.md) | Component containing a modal that emits a [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicking outside the content rendered in the default slot and can receive, through the eventsToCloseModal prop, a list of [xEvents](./x-components.xevent.md) to listen to in order to close also the modal, eventsToOpenModal prop, another list of [xEvents](./x-components.xevent.md) to customize the events to listen to open the modal and a prop, displayOverlay, to display an overlay over the rest of the html. The default slot offers the possibility to customize the modal content. |
@@ -30,7 +29,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BaseModal](./x-components.basemodal.md) | Base component with no XPlugin dependencies that serves as a utility for constructing more complex modals. |
 |  [BaseRating](./x-components.baserating.md) | Rating component. This component renders a set of elements filled based on the value passed as prop. |
 |  [BaseScroll](./x-components.basescroll.md) | Base scroll component that depending on the user interactivity emits different events for knowing when the user scrolls, the direction of scroll and if user reaches the start or end. |
-|  [BaseSuggestion](./x-components.basesuggestion.md) | <p>Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the [XEvents](./x-components.xevent.md) that will be emitted on click with a given feature.</p><p>The default slot receives the suggestion and the matched query has props.</p> |
 |  [BaseSuggestions](./x-components.basesuggestions.md) | Paints a list of suggestions passed in by prop. Requires a component for a single suggestion in the default slot for working. |
 |  [BaseSwitch](./x-components.baseswitch.md) | Basic switch component to handle boolean values. This component receives its selected state using a prop, and emits a Vue event whenever the user clicks it. |
 |  [BaseTabsPanel](./x-components.basetabspanel.md) | Base Tabs Panel. |
@@ -380,6 +378,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BarCodeIcon](./x-components.barcodeicon.md) |  |
 |  [BarcodeTinyIcon](./x-components.barcodetinyicon.md) |  |
 |  [BaseAddToCart](./x-components.baseaddtocart.md) | Renders a button with a default slot. It receives the result with the data and emits [XEventsTypes.UserClickedResultAddToCart](./x-components.xeventstypes.userclickedresultaddtocart.md) to the bus on click mouse event. |
+|  [BaseCurrency](./x-components.basecurrency.md) | <p>Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.</p><p>Regarding the format or mask to be defined as string: - Use 'i' to define integer numbers. - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the format doesn't include decimals, it is filled with zeros until reach the length defined with 'd's. - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group. - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character. - If you want to hide the decimal part if it's zero, you can add the <code>?</code> symbol after the decimal characters (e.g. 'i.iii,dd?', for <code>1234</code> you would get <code>1.234</code> instead of <code>1.234,00</code>). - Set whatever you need around the integers and decimals marks. - Default mask: 'i.iii,dd' which returns '1.345,67'.</p> |
 |  [BaseEventsModalClose](./x-components.baseeventsmodalclose.md) | Component contains an event button that emits [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicked. It has a default slot to customize its contents. |
 |  [BaseEventsModalOpen](./x-components.baseeventsmodalopen.md) | Component contains an event button that emits [XEventsTypes.UserClickedOpenEventsModal](./x-components.xeventstypes.userclickedopeneventsmodal.md) when clicked. It has a default slot to customize its contents. |
 |  [BaseFallbackImage](./x-components.basefallbackimage.md) |  |
@@ -393,6 +392,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BaseResultLink](./x-components.baseresultlink.md) | Component to be reused that renders an <code>&lt;a&gt;</code> wrapping the result contents. |
 |  [BaseResultPreviousPrice](./x-components.baseresultpreviousprice.md) | Component that renders the [result](./x-types.result.md) previous price. |
 |  [BaseResultRating](./x-components.baseresultrating.md) | This component renders a [BaseRating](./x-components.baserating.md) for a result passed as prop. |
+|  [BaseSuggestion](./x-components.basesuggestion.md) | <p>Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the [XEvents](./x-components.xevent.md) that will be emitted on click with a given feature.</p><p>The default slot receives the suggestion and the matched query has props.</p> |
 |  [BaseTogglePanel](./x-components.basetogglepanel.md) | Simple panel that receives its open state via prop, which is responsible of rendering default slot inside a configurable transition. |
 |  [bus](./x-components.bus.md) | Default  implementation. |
 |  [cancelFetchAndSaveIdentifierResults](./x-components.cancelfetchandsaveidentifierresults.md) | Default implementation for [IdentifierResultsActions.cancelFetchAndSaveIdentifierResults()](./x-components.identifierresultsactions.cancelfetchandsaveidentifierresults.md) action. |

package/js/components/currency/base-currency.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-currency.vue.js","sources":["../../../../src/components/currency/base-currency.vue"],"sourcesContent":["<template>\n  <span v-if=\"value !== undefined\" class=\"x-currency\">{{ currency }}</span>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { currencyFormatter } from '../../utils/currency-formatter';\n  import { XInject } from '../decorators/injection.decorators';\n\n  /**\n   * Renders the value received as a property which always must be a JavaScript number, with the\n   * proper format provided as a string property or by injection. The rendered tag is a span in\n   * order to render a default inline HTML element.\n   *\n   * Regarding the format or mask to be defined as string:\n   * - Use 'i' to define integer numbers.\n   * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n   * format doesn't include decimals, it is filled with zeros until reach the length defined with\n   * 'd's.\n   * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n   * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n   * than one character.\n   * - If you want to hide the decimal part if it's zero, you can add the `?` symbol after the\n   * decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`).\n   * - Set whatever you need around the integers and decimals marks.\n   * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n   *\n   * @remarks The number of 'd', which is the maximum decimal length, MUST matches with the length\n   * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n   * part, it deletes significant digits.\n   *\n   * @example\n   * Basic example:\n   *\n   * ```vue\n   * <BaseCurrency\n   *   :value=\"123456.789\"\n   *   format=\"i.iiii,dddd €\"\n   * />\n   * ```\n   *\n   * It will render: `123.456,7890 €`.\n   *\n   * See docs below for more examples.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseCurrency extends Vue {\n    /**\n     * Numeric value to be formatted.\n     *\n     * @remarks Pass the value with 'v-bind:value' (or ':value' shortcut) instead of plain string.\n     * @remarks Be careful using numbers under Number.MAX_SAFE_INTEGER to avoid unexpected errors.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected value!: number;\n\n    /**\n     * The format as string.\n     *\n     * @public\n     */\n    @Prop()\n    protected format?: string;\n\n    /**\n     * The injected format as string.\n     *\n     * @public\n     */\n    @XInject('currencyFormat')\n    public injectedFormat!: string;\n\n    /**\n     * A format which can be passed through prop or injected.\n     *\n     * @returns A format as string.\n     *\n     * @internal\n     */\n    protected get renderedFormat(): string {\n      return this.format ?? this.injectedFormat ?? 'i.iii,dd';\n    }\n\n    /**\n     * Returns the formatted result as string.\n     *\n     * @returns Formatted number.\n     *\n     * @internal\n     */\n    protected get currency(): string {\n      return currencyFormatter(this.value, this.renderedFormat);\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders the value received as a property, which always must be a JavaScript number, with the proper\nformat provided as string property. The rendered tag is a span in order to render a default inline\nHTML element.\n\n### Basic usage\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" />\n  <!-- output: '12.345.678,87' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,ddd? €\" />\n  <!-- output: '12.345.678,876 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678\" format=\"i.iii,ddd? €\" />\n  <!-- output: '12.345.678 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"$ i.iii,dd\" />\n  <!-- output: '$ 12.345.678,87' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"$i.iii,dd\" />\n  <!-- output: '$12.345.678,87' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd €\" />\n  <!-- output: '12.345.678,87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd€\" />\n  <!-- output: '12.345.678,87€' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i,iii.dd €\" />\n  <!-- output: '12,345,678.87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i iii.dd €\" />\n  <!-- output: '12 345 678.87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i iii - dd €\" />\n  <!-- output: '12 345 678 - 87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,876543 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,870000 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,000000 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd €\" />\n  <!-- output: '12.345.678,87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii €\" />\n  <!-- output: '12.345.678 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-currency.vue.js","sources":["../../../../src/components/currency/base-currency.vue"],"sourcesContent":["<template>\n  <span v-if=\"value !== undefined\" class=\"x-currency\">{{ currency }}</span>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, inject } from 'vue';\n  import { currencyFormatter } from '../../utils/currency-formatter';\n\n  /**\n   * Renders the value received as a property which always must be a JavaScript number, with the\n   * proper format provided as a string property or by injection. The rendered tag is a span in\n   * order to render a default inline HTML element.\n   *\n   * Regarding the format or mask to be defined as string:\n   * - Use 'i' to define integer numbers.\n   * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n   * format doesn't include decimals, it is filled with zeros until reach the length defined with\n   * 'd's.\n   * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n   * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n   * than one character.\n   * - If you want to hide the decimal part if it's zero, you can add the `?` symbol after the\n   * decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`).\n   * - Set whatever you need around the integers and decimals marks.\n   * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n   *\n   * @remarks The number of 'd', which is the maximum decimal length, MUST matches with the length\n   * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n   * part, it deletes significant digits.\n   *\n   * @example\n   * Basic example:\n   *\n   * ```vue\n   * <BaseCurrency\n   *   :value=\"123456.789\"\n   *   format=\"i.iiii,dddd €\"\n   * />\n   * ```\n   *\n   * It will render: `123.456,7890 €`.\n   *\n   * See docs below for more examples.\n   *\n   * @public\n   */\n  export default defineComponent({\n    props: {\n      /**\n       * Numeric value to be formatted.\n       *\n       * @remarks Pass the value with 'v-bind:value' (or ':value' shortcut) instead of plain string.\n       * @remarks Be careful using numbers under Number.MAX_SAFE_INTEGER to avoid unexpected errors.\n       *\n       * @public\n       */\n      value: {\n        type: Number,\n        required: true\n      },\n\n      /**\n       * The format as string.\n       *\n       * @public\n       */\n      format: {\n        type: String\n      }\n    },\n\n    setup(props) {\n      /**\n       * The injected format as string.\n       *\n       * @public\n       */\n      const injectedFormat = inject<string>('currencyFormat', 'i.iii,dd');\n\n      /**\n       * A format which can be passed through prop or injected.\n       *\n       * @returns A format as string.\n       *\n       * @internal\n       */\n      const renderedFormat = computed<string>(() => props.format ?? injectedFormat);\n\n      /**\n       * Returns the formatted result as string.\n       *\n       * @returns Formatted number.\n       *\n       * @internal\n       */\n      const currency = computed<string>(() => currencyFormatter(props.value, renderedFormat.value));\n\n      return {\n        currency\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders the value received as a property, which always must be a JavaScript number, with the proper\nformat provided as string property. The rendered tag is a span in order to render a default inline\nHTML element.\n\n### Basic usage\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" />\n  <!-- output: '12.345.678,87' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,ddd? €\" />\n  <!-- output: '12.345.678,876 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678\" format=\"i.iii,ddd? €\" />\n  <!-- output: '12.345.678 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"$ i.iii,dd\" />\n  <!-- output: '$ 12.345.678,87' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"$i.iii,dd\" />\n  <!-- output: '$12.345.678,87' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd €\" />\n  <!-- output: '12.345.678,87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd€\" />\n  <!-- output: '12.345.678,87€' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i,iii.dd €\" />\n  <!-- output: '12,345,678.87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i iii.dd €\" />\n  <!-- output: '12 345 678.87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i iii - dd €\" />\n  <!-- output: '12 345 678 - 87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,876543 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,870000 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,000000 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd €\" />\n  <!-- output: '12.345.678,87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii €\" />\n  <!-- output: '12.345.678 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/currency/base-currency.vue_rollup-plugin-vue_script.vue.js

@@ -1,8 +1,5 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
+import { defineComponent, inject, computed } from 'vue';
 import { currencyFormatter } from '../../utils/currency-formatter.js';
-import { XInject } from '../decorators/injection.decorators.js';
 
 /**
  * Renders the value received as a property which always must be a JavaScript number, with the
@@ -42,41 +39,57 @@ import { XInject } from '../decorators/injection.decorators.js';
  *
  * @public
  */
-let BaseCurrency = class BaseCurrency extends Vue {
-    /**
-     * A format which can be passed through prop or injected.
-     *
-     * @returns A format as string.
-     *
-     * @internal
-     */
-    get renderedFormat() {
-        return this.format ?? this.injectedFormat ?? 'i.iii,dd';
+var script = defineComponent({
+    props: {
+        /**
+         * Numeric value to be formatted.
+         *
+         * @remarks Pass the value with 'v-bind:value' (or ':value' shortcut) instead of plain string.
+         * @remarks Be careful using numbers under Number.MAX_SAFE_INTEGER to avoid unexpected errors.
+         *
+         * @public
+         */
+        value: {
+            type: Number,
+            required: true
+        },
+        /**
+         * The format as string.
+         *
+         * @public
+         */
+        format: {
+            type: String
+        }
+    },
+    setup(props) {
+        /**
+         * The injected format as string.
+         *
+         * @public
+         */
+        const injectedFormat = inject('currencyFormat', 'i.iii,dd');
+        /**
+         * A format which can be passed through prop or injected.
+         *
+         * @returns A format as string.
+         *
+         * @internal
+         */
+        const renderedFormat = computed(() => props.format ?? injectedFormat);
+        /**
+         * Returns the formatted result as string.
+         *
+         * @returns Formatted number.
+         *
+         * @internal
+         */
+        const currency = computed(() => currencyFormatter(props.value, renderedFormat.value));
+        return {
+            currency
+        };
     }
-    /**
-     * Returns the formatted result as string.
-     *
-     * @returns Formatted number.
-     *
-     * @internal
-     */
-    get currency() {
-        return currencyFormatter(this.value, this.renderedFormat);
-    }
-};
-__decorate([
-    Prop({ required: true })
-], BaseCurrency.prototype, "value", void 0);
-__decorate([
-    Prop()
-], BaseCurrency.prototype, "format", void 0);
-__decorate([
-    XInject('currencyFormat')
-], BaseCurrency.prototype, "injectedFormat", void 0);
-BaseCurrency = __decorate([
-    Component
-], BaseCurrency);
-var script = BaseCurrency;
+});
 
 export { script as default };
 //# sourceMappingURL=base-currency.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/currency/base-currency.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-currency.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/currency/base-currency.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { currencyFormatter } from '../../utils/currency-formatter';\n  import { XInject } from '../decorators/injection.decorators';\n\n  /**\n   * Renders the value received as a property which always must be a JavaScript number, with the\n   * proper format provided as a string property or by injection. The rendered tag is a span in\n   * order to render a default inline HTML element.\n   *\n   * Regarding the format or mask to be defined as string:\n   * - Use 'i' to define integer numbers.\n   * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n   * format doesn't include decimals, it is filled with zeros until reach the length defined with\n   * 'd's.\n   * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n   * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n   * than one character.\n   * - If you want to hide the decimal part if it's zero, you can add the `?` symbol after the\n   * decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`).\n   * - Set whatever you need around the integers and decimals marks.\n   * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n   *\n   * @remarks The number of 'd', which is the maximum decimal length, MUST matches with the length\n   * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n   * part, it deletes significant digits.\n   *\n   * @example\n   * Basic example:\n   *\n   * ```vue\n   * <BaseCurrency\n   *   :value=\"123456.789\"\n   *   format=\"i.iiii,dddd €\"\n   * />\n   * ```\n   *\n   * It will render: `123.456,7890 €`.\n   *\n   * See docs below for more examples.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseCurrency extends Vue {\n    /**\n     * Numeric value to be formatted.\n     *\n     * @remarks Pass the value with 'v-bind:value' (or ':value' shortcut) instead of plain string.\n     * @remarks Be careful using numbers under Number.MAX_SAFE_INTEGER to avoid unexpected errors.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected value!: number;\n\n    /**\n     * The format as string.\n     *\n     * @public\n     */\n    @Prop()\n    protected format?: string;\n\n    /**\n     * The injected format as string.\n     *\n     * @public\n     */\n    @XInject('currencyFormat')\n    public injectedFormat!: string;\n\n    /**\n     * A format which can be passed through prop or injected.\n     *\n     * @returns A format as string.\n     *\n     * @internal\n     */\n    protected get renderedFormat(): string {\n      return this.format ?? this.injectedFormat ?? 'i.iii,dd';\n    }\n\n    /**\n     * Returns the formatted result as string.\n     *\n     * @returns Formatted number.\n     *\n     * @internal\n     */\n    protected get currency(): string {\n      return currencyFormatter(this.value, this.renderedFormat);\n    }\n  }\n"],"names":[],"mappings":";;;;;;AAUE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCG;AAEY,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,GAAG,CAAA;AA4B3C;;;;;;AAMG;AACH,IAAA,IAAc,cAAc,GAAA;QAC1B,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,IAAI,UAAU,CAAC;KACzD;AAED;;;;;;AAMG;AACH,IAAA,IAAc,QAAQ,GAAA;QACpB,OAAO,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3D;CACF,CAAA;AAvCC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACA,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQzB,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACmB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ1B,UAAA,CAAA;IADC,OAAO,CAAC,gBAAgB,CAAC;AACK,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA1BZ,YAAY,GAAA,UAAA,CAAA;IADhC,SAAS;AACW,CAAA,EAAA,YAAY,CAiDhC,CAAA;aAjDoB,YAAY;;;;"}
+{"version":3,"file":"base-currency.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/currency/base-currency.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n  import { computed, defineComponent, inject } from 'vue';\n  import { currencyFormatter } from '../../utils/currency-formatter';\n\n  /**\n   * Renders the value received as a property which always must be a JavaScript number, with the\n   * proper format provided as a string property or by injection. The rendered tag is a span in\n   * order to render a default inline HTML element.\n   *\n   * Regarding the format or mask to be defined as string:\n   * - Use 'i' to define integer numbers.\n   * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n   * format doesn't include decimals, it is filled with zeros until reach the length defined with\n   * 'd's.\n   * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n   * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n   * than one character.\n   * - If you want to hide the decimal part if it's zero, you can add the `?` symbol after the\n   * decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`).\n   * - Set whatever you need around the integers and decimals marks.\n   * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n   *\n   * @remarks The number of 'd', which is the maximum decimal length, MUST matches with the length\n   * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n   * part, it deletes significant digits.\n   *\n   * @example\n   * Basic example:\n   *\n   * ```vue\n   * <BaseCurrency\n   *   :value=\"123456.789\"\n   *   format=\"i.iiii,dddd €\"\n   * />\n   * ```\n   *\n   * It will render: `123.456,7890 €`.\n   *\n   * See docs below for more examples.\n   *\n   * @public\n   */\n  export default defineComponent({\n    props: {\n      /**\n       * Numeric value to be formatted.\n       *\n       * @remarks Pass the value with 'v-bind:value' (or ':value' shortcut) instead of plain string.\n       * @remarks Be careful using numbers under Number.MAX_SAFE_INTEGER to avoid unexpected errors.\n       *\n       * @public\n       */\n      value: {\n        type: Number,\n        required: true\n      },\n\n      /**\n       * The format as string.\n       *\n       * @public\n       */\n      format: {\n        type: String\n      }\n    },\n\n    setup(props) {\n      /**\n       * The injected format as string.\n       *\n       * @public\n       */\n      const injectedFormat = inject<string>('currencyFormat', 'i.iii,dd');\n\n      /**\n       * A format which can be passed through prop or injected.\n       *\n       * @returns A format as string.\n       *\n       * @internal\n       */\n      const renderedFormat = computed<string>(() => props.format ?? injectedFormat);\n\n      /**\n       * Returns the formatted result as string.\n       *\n       * @returns Formatted number.\n       *\n       * @internal\n       */\n      const currency = computed<string>(() => currencyFormatter(props.value, renderedFormat.value));\n\n      return {\n        currency\n      };\n    }\n  });\n"],"names":[],"mappings":";;;AAQE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCG;AACH,aAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE;AACL;;;;;;;AAOG;AACH,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIG;AACH,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;AACF,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIG;QACH,MAAM,cAAc,GAAG,MAAM,CAAS,gBAAgB,EAAE,UAAU,CAAC,CAAC;AAEpE;;;;;;AAMG;AACH,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAS,MAAM,KAAK,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC;AAE9E;;;;;;AAMG;AACH,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAS,MAAM,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;QAE9F,OAAO;YACL,QAAQ;SACT,CAAC;KACH;AACF,CAAA,CAAC;;;;"}

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

@@ -75,7 +75,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-1ae01006";
+  const __vue_scope_id__ = "data-v-17f375f7";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

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

@@ -1 +1 @@
-{"version":3,"file":"base-result-image.vue.js","sources":["../../../../src/components/result/base-result-image.vue"],"sourcesContent":["<template>\n  <!-- This is a div because using a picture causes the onload event of the image to fire twice. -->\n  <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->\n  <div\n    @mouseenter.once=\"userHasHoveredImage = true\"\n    @mouseenter=\"isHovering = true\"\n    @mouseleave=\"isHovering = false\"\n    class=\"x-result-picture x-picture\"\n    data-test=\"result-picture\"\n  >\n    <img\n      v-if=\"shouldLoadNextImage\"\n      @load=\"flagImageLoaded\"\n      @error=\"flagImageAsFailed\"\n      loading=\"lazy\"\n      :src=\"pendingImages[0]\"\n      :style=\"loaderStyles\"\n      class=\"x-picture-image\"\n      data-test=\"result-picture-loader\"\n      alt=\"\"\n      role=\"presentation\"\n    />\n    <component :is=\"animation\" class=\"x-picture-image\" :appear=\"false\">\n      <!-- @slot Fallback image content. It will be rendered when all the images failed -->\n      <slot v-if=\"!loadedImages.length && !pendingImages.length\" name=\"fallback\" />\n\n      <!-- @slot Loading image content. It will be rendered while the real image is not loaded -->\n      <slot v-else-if=\"!loadedImages.length\" name=\"placeholder\" />\n\n      <img\n        v-else\n        :key=\"imageSrc\"\n        :alt=\"result.name\"\n        :src=\"imageSrc\"\n        class=\"x-result-picture-image\"\n        data-test=\"result-picture-image\"\n      />\n    </component>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import {\n    computed,\n    DefineComponent,\n    defineComponent,\n    PropType,\n    Ref,\n    ref,\n    toRef,\n    watch\n  } from 'vue';\n  import { NoElement } from '../no-element';\n  import { animationProp } from '../../utils/options-api';\n\n  /**\n   * Component to be reused that renders an `<img>`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: {\n      NoElement\n    },\n    props: {\n      /**\n       * (Required) The {@link @empathyco/x-types#Result | result} information.\n       *\n       * @public\n       */\n      result: {\n        type: Object as PropType<Result>,\n        required: true\n      },\n\n      /**\n       * Animation to use when switching between the placeholder, the loaded image, or the failed\n       * image fallback.\n       *\n       * @public\n       */\n      loadAnimation: {\n        type: animationProp,\n        default: () => NoElement\n      },\n\n      /**\n       * Animation to use when switching between the loaded image and the hover image.\n       *\n       * @public\n       */\n      hoverAnimation: {\n        type: animationProp\n      },\n\n      /**\n       * Indicates if the next valid image should be displayed on hover.\n       *\n       * @public\n       */\n      showNextImageOnHover: {\n        type: Boolean,\n        default: false\n      }\n    },\n\n    setup(props) {\n      /**\n       * Copy of the images of the result.\n       *\n       * It is used as a queue of images to load, once an image loads/fails to load, it is removed\n       * from this array.\n       *\n       * @internal\n       */\n      const pendingImages: Ref<string[]> = ref([]);\n\n      /**\n       * Contains the images that have been loaded successfully.\n       *\n       * @internal\n       */\n      const loadedImages: Ref<string[]> = ref([]);\n\n      /**\n       * Indicates if the user is hovering the image.\n       *\n       * @internal\n       */\n      const isHovering = ref(false);\n\n      /**\n       * Indicates if the user has hovered the image.\n       *\n       * @internal\n       */\n      const userHasHoveredImage = ref(false);\n\n      /**.\n       * Styles to use inline in the image loader, to prevent override from CSS\n       *\n       * @internal\n       */\n      const loaderStyles: Partial<CSSStyleDeclaration> = {\n        position: 'absolute !important',\n        top: '0 !important',\n        left: '0 !important',\n        width: '100% !important',\n        height: '100% !important',\n        pointerEvents: 'none !important',\n        visibility: 'hidden !important'\n      };\n\n      const resultImages = toRef(props.result, 'images');\n\n      /**\n       * Initializes images state and resets when the result's images change.\n       *\n       * @internal\n       */\n      watch(\n        resultImages,\n        () => {\n          pendingImages.value = [...(props.result.images ?? [])];\n          loadedImages.value = pendingImages.value.filter(image =>\n            loadedImages.value.includes(image)\n          );\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Animation to be used.\n       *\n       * @returns The animation to be used, taking into account if the user has hovered the image.\n       *\n       * @internal\n       */\n      const animation = computed<DefineComponent | string>(() => {\n        return userHasHoveredImage\n          ? props.hoverAnimation ?? props.loadAnimation\n          : props.loadAnimation;\n      });\n\n      /**\n       * Gets the src from the result image.\n       *\n       * @returns The result image src.\n       *\n       * @internal\n       */\n      const imageSrc = computed<string>(() => {\n        return loadedImages.value[\n          !props.showNextImageOnHover || !isHovering ? 0 : loadedImages.value.length - 1\n        ];\n      });\n\n      /**\n       * Indicates if the loader should try to load the next image.\n       *\n       * @returns True if it should try to load the next image.\n       *\n       * @internal\n       */\n      const shouldLoadNextImage = computed<boolean>(() => {\n        const numImagesToLoad = props.showNextImageOnHover && userHasHoveredImage ? 2 : 1;\n        return !!pendingImages.value.length && loadedImages.value.length < numImagesToLoad;\n      });\n\n      /**\n       * Sets an image as failed.\n       *\n       * @internal\n       */\n      const flagImageAsFailed = (): void => {\n        pendingImages.value.shift();\n      };\n\n      /**\n       * Sets an image as loaded.\n       *\n       * @internal\n       */\n      const flagImageLoaded = (): void => {\n        const image = pendingImages.value.shift();\n        if (image) {\n          loadedImages.value.push(image);\n        }\n      };\n\n      return {\n        pendingImages,\n        loadedImages,\n        isHovering,\n        userHasHoveredImage,\n        loaderStyles,\n        animation,\n        imageSrc,\n        shouldLoadNextImage,\n        flagImageAsFailed,\n        flagImageLoaded\n      };\n    }\n  });\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-result-picture {\n    position: relative;\n    min-width: 1px;\n    min-height: 1px;\n\n    &-image {\n      max-width: 100%;\n      max-height: 100%;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component is for the result image. It may be part of the search result page, recommendations or\nother section which needs to include results.\n\nThe result prop is required. It will render a `<img/>` with the result image:\n\n```vue\n<BaseResultImage :result=\"result\" />\n```\n\n### Showing the next image on hover\n\nIf a result has multiple images, it can show the next one on hover.\n\n```vue\n<BaseResultImage :result=\"result\" showNextImageOnHover />\n```\n\n### Customizing slots content\n\nFallback and placeholder contents can be customized.\n\nThe fallback slot allows you to replace the content of the fallback image.\n\nThe other slot is called `placeholder`, and allows you to set the image that its going to be\ndisplayed while the real one is loaded.\n\n```vue\n<BaseResultImage :result=\"result\">\n  <template #placeholder>\n    <img alt=\"Placeholder image\" src=\"./placeholder-image.svg\"/>\n  </template>\n  <template #fallback>\n    <img alt=\"Fallback image\" src=\"./fallback-image.svg\"/>\n  </template>\n</BaseResultImage>\n```\n\n### Customizing the animations\n\nTwo animations can be used this component.\n\nThe `loadAnimation` is used to transition between the placeholder, the fallback and the image.\n\nThe `hoverAnimation` is used to transition between the image and the hover image, if the\n`showNextImageOnHover` prop is `true`.\n\n`hoverAnimation` will default to `loadAnimation` if it is not provided.\n\n```vue\n<template>\n  <BaseResultImage\n    :result=\"result\"\n    :loadAnimation=\"loadAnimation\"\n    :hoverAnimation=\"hoverAnimation\"\n    showNextImageOnHover\n  />\n</template>\n\n<script>\n  import { BaseResultImage } from '@empathyco/x-components';\n  import { CrossFade, CollapseHeight } from '@empathyco/x-components/animations';\n\n  export default {\n    name: 'BaseResultImageAnimations',\n    components: {\n      BaseResultImage\n    },\n    data() {\n      return {\n        loadAnimation: CrossFade,\n        hoverAnimation: CollapseHeight,\n        result: {\n          name: 'jacket',\n          images: ['https://some-image', 'https://some-image-2']\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-result-image.vue.js","sources":["../../../../src/components/result/base-result-image.vue"],"sourcesContent":["<template>\n  <!-- This is a div because using a picture causes the onload event of the image to fire twice. -->\n  <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->\n  <div\n    @mouseenter.once=\"userHasHoveredImage = true\"\n    @mouseenter=\"isHovering = true\"\n    @mouseleave=\"isHovering = false\"\n    class=\"x-result-picture x-picture\"\n    data-test=\"result-picture\"\n  >\n    <img\n      v-if=\"shouldLoadNextImage\"\n      @load=\"flagImageLoaded\"\n      @error=\"flagImageAsFailed\"\n      loading=\"lazy\"\n      :src=\"pendingImages[0]\"\n      :style=\"loaderStyles\"\n      class=\"x-picture-image\"\n      data-test=\"result-picture-loader\"\n      alt=\"\"\n      role=\"presentation\"\n    />\n    <component :is=\"animation\" class=\"x-picture-image\" :appear=\"false\">\n      <!-- @slot Fallback image content. It will be rendered when all the images failed -->\n      <slot v-if=\"!loadedImages.length && !pendingImages.length\" name=\"fallback\" />\n\n      <!-- @slot Loading image content. It will be rendered while the real image is not loaded -->\n      <slot v-else-if=\"!loadedImages.length\" name=\"placeholder\" />\n\n      <img\n        v-else\n        :key=\"imageSrc\"\n        :alt=\"result.name\"\n        :src=\"imageSrc\"\n        class=\"x-result-picture-image\"\n        data-test=\"result-picture-image\"\n      />\n    </component>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import {\n    computed,\n    DefineComponent,\n    defineComponent,\n    PropType,\n    Ref,\n    ref,\n    toRef,\n    watch\n  } from 'vue';\n  import { NoElement } from '../no-element';\n  import { animationProp } from '../../utils/options-api';\n\n  /**\n   * Component to be reused that renders an `<img>`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: {\n      NoElement\n    },\n    props: {\n      /**\n       * (Required) The {@link @empathyco/x-types#Result | result} information.\n       *\n       * @public\n       */\n      result: {\n        type: Object as PropType<Result>,\n        required: true\n      },\n\n      /**\n       * Animation to use when switching between the placeholder, the loaded image, or the failed\n       * image fallback.\n       *\n       * @public\n       */\n      loadAnimation: {\n        type: animationProp,\n        default: () => NoElement\n      },\n\n      /**\n       * Animation to use when switching between the loaded image and the hover image.\n       *\n       * @public\n       */\n      hoverAnimation: {\n        type: animationProp\n      },\n\n      /**\n       * Indicates if the next valid image should be displayed on hover.\n       *\n       * @public\n       */\n      showNextImageOnHover: {\n        type: Boolean,\n        default: false\n      }\n    },\n\n    setup(props) {\n      /**\n       * Copy of the images of the result.\n       *\n       * It is used as a queue of images to load, once an image loads/fails to load, it is removed\n       * from this array.\n       *\n       * @internal\n       */\n      const pendingImages: Ref<string[]> = ref([]);\n\n      /**\n       * Contains the images that have been loaded successfully.\n       *\n       * @internal\n       */\n      const loadedImages: Ref<string[]> = ref([]);\n\n      /**\n       * Indicates if the user is hovering the image.\n       *\n       * @internal\n       */\n      const isHovering = ref(false);\n\n      /**\n       * Indicates if the user has hovered the image.\n       *\n       * @internal\n       */\n      const userHasHoveredImage = ref(false);\n\n      /**.\n       * Styles to use inline in the image loader, to prevent override from CSS\n       *\n       * @internal\n       */\n      const loaderStyles: Partial<CSSStyleDeclaration> = {\n        position: 'absolute !important',\n        top: '0 !important',\n        left: '0 !important',\n        width: '100% !important',\n        height: '100% !important',\n        pointerEvents: 'none !important',\n        visibility: 'hidden !important'\n      };\n\n      /**\n       * Reactive reference to the result images.\n       *\n       * @internal\n       */\n      const resultImages = toRef(props.result, 'images');\n\n      /**\n       * Initializes images state and resets when the result's images change.\n       *\n       * @internal\n       */\n      watch(\n        resultImages,\n        () => {\n          pendingImages.value = [...(props.result.images ?? [])];\n          loadedImages.value = pendingImages.value.filter(image =>\n            loadedImages.value.includes(image)\n          );\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Animation to be used.\n       *\n       * @returns The animation to be used, taking into account if the user has hovered the image.\n       *\n       * @internal\n       */\n      const animation = computed<DefineComponent | string>(() => {\n        return userHasHoveredImage\n          ? props.hoverAnimation ?? props.loadAnimation\n          : props.loadAnimation;\n      });\n\n      /**\n       * Gets the src from the result image.\n       *\n       * @returns The result image src.\n       *\n       * @internal\n       */\n      const imageSrc = computed<string>(() => {\n        return loadedImages.value[\n          !props.showNextImageOnHover || !isHovering.value ? 0 : loadedImages.value.length - 1\n        ];\n      });\n\n      /**\n       * Indicates if the loader should try to load the next image.\n       *\n       * @returns True if it should try to load the next image.\n       *\n       * @internal\n       */\n      const shouldLoadNextImage = computed<boolean>(() => {\n        const numImagesToLoad = props.showNextImageOnHover && userHasHoveredImage ? 2 : 1;\n        return !!pendingImages.value.length && loadedImages.value.length < numImagesToLoad;\n      });\n\n      /**\n       * Sets an image as failed.\n       *\n       * @internal\n       */\n      const flagImageAsFailed = (): void => {\n        pendingImages.value.shift();\n      };\n\n      /**\n       * Sets an image as loaded.\n       *\n       * @internal\n       */\n      const flagImageLoaded = (): void => {\n        const image = pendingImages.value.shift();\n        if (image) {\n          loadedImages.value.push(image);\n        }\n      };\n\n      return {\n        pendingImages,\n        loadedImages,\n        isHovering,\n        userHasHoveredImage,\n        loaderStyles,\n        animation,\n        imageSrc,\n        shouldLoadNextImage,\n        flagImageAsFailed,\n        flagImageLoaded\n      };\n    }\n  });\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-result-picture {\n    position: relative;\n    min-width: 1px;\n    min-height: 1px;\n\n    &-image {\n      max-width: 100%;\n      max-height: 100%;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component is for the result image. It may be part of the search result page, recommendations or\nother section which needs to include results.\n\nThe result prop is required. It will render a `<img/>` with the result image:\n\n```vue\n<BaseResultImage :result=\"result\" />\n```\n\n### Showing the next image on hover\n\nIf a result has multiple images, it can show the next one on hover.\n\n```vue\n<BaseResultImage :result=\"result\" showNextImageOnHover />\n```\n\n### Customizing slots content\n\nFallback and placeholder contents can be customized.\n\nThe fallback slot allows you to replace the content of the fallback image.\n\nThe other slot is called `placeholder`, and allows you to set the image that its going to be\ndisplayed while the real one is loaded.\n\n```vue\n<BaseResultImage :result=\"result\">\n  <template #placeholder>\n    <img alt=\"Placeholder image\" src=\"./placeholder-image.svg\"/>\n  </template>\n  <template #fallback>\n    <img alt=\"Fallback image\" src=\"./fallback-image.svg\"/>\n  </template>\n</BaseResultImage>\n```\n\n### Customizing the animations\n\nTwo animations can be used this component.\n\nThe `loadAnimation` is used to transition between the placeholder, the fallback and the image.\n\nThe `hoverAnimation` is used to transition between the image and the hover image, if the\n`showNextImageOnHover` prop is `true`.\n\n`hoverAnimation` will default to `loadAnimation` if it is not provided.\n\n```vue\n<template>\n  <BaseResultImage\n    :result=\"result\"\n    :loadAnimation=\"loadAnimation\"\n    :hoverAnimation=\"hoverAnimation\"\n    showNextImageOnHover\n  />\n</template>\n\n<script>\n  import { BaseResultImage } from '@empathyco/x-components';\n  import { CrossFade, CollapseHeight } from '@empathyco/x-components/animations';\n\n  export default {\n    name: 'BaseResultImageAnimations',\n    components: {\n      BaseResultImage\n    },\n    data() {\n      return {\n        loadAnimation: CrossFade,\n        hoverAnimation: CollapseHeight,\n        result: {\n          name: 'jacket',\n          images: ['https://some-image', 'https://some-image-2']\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/result/base-result-image.vue_rollup-plugin-vue_script.vue.js

@@ -91,6 +91,11 @@ var script = defineComponent({
             pointerEvents: 'none !important',
             visibility: 'hidden !important'
         };
+        /**
+         * Reactive reference to the result images.
+         *
+         * @internal
+         */
         const resultImages = toRef(props.result, 'images');
         /**
          * Initializes images state and resets when the result's images change.
@@ -121,7 +126,7 @@ var script = defineComponent({
          * @internal
          */
         const imageSrc = computed(() => {
-            return loadedImages.value[!props.showNextImageOnHover || !isHovering ? 0 : loadedImages.value.length - 1];
+            return loadedImages.value[!props.showNextImageOnHover || !isHovering.value ? 0 : loadedImages.value.length - 1];
         });
         /**
          * Indicates if the loader should try to load the next image.

package/js/components/result/base-result-image.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-image.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/base-result-image.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { Result } from '@empathyco/x-types';\n  import {\n    computed,\n    DefineComponent,\n    defineComponent,\n    PropType,\n    Ref,\n    ref,\n    toRef,\n    watch\n  } from 'vue';\n  import { NoElement } from '../no-element';\n  import { animationProp } from '../../utils/options-api';\n\n  /**\n   * Component to be reused that renders an `<img>`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: {\n      NoElement\n    },\n    props: {\n      /**\n       * (Required) The {@link @empathyco/x-types#Result | result} information.\n       *\n       * @public\n       */\n      result: {\n        type: Object as PropType<Result>,\n        required: true\n      },\n\n      /**\n       * Animation to use when switching between the placeholder, the loaded image, or the failed\n       * image fallback.\n       *\n       * @public\n       */\n      loadAnimation: {\n        type: animationProp,\n        default: () => NoElement\n      },\n\n      /**\n       * Animation to use when switching between the loaded image and the hover image.\n       *\n       * @public\n       */\n      hoverAnimation: {\n        type: animationProp\n      },\n\n      /**\n       * Indicates if the next valid image should be displayed on hover.\n       *\n       * @public\n       */\n      showNextImageOnHover: {\n        type: Boolean,\n        default: false\n      }\n    },\n\n    setup(props) {\n      /**\n       * Copy of the images of the result.\n       *\n       * It is used as a queue of images to load, once an image loads/fails to load, it is removed\n       * from this array.\n       *\n       * @internal\n       */\n      const pendingImages: Ref<string[]> = ref([]);\n\n      /**\n       * Contains the images that have been loaded successfully.\n       *\n       * @internal\n       */\n      const loadedImages: Ref<string[]> = ref([]);\n\n      /**\n       * Indicates if the user is hovering the image.\n       *\n       * @internal\n       */\n      const isHovering = ref(false);\n\n      /**\n       * Indicates if the user has hovered the image.\n       *\n       * @internal\n       */\n      const userHasHoveredImage = ref(false);\n\n      /**.\n       * Styles to use inline in the image loader, to prevent override from CSS\n       *\n       * @internal\n       */\n      const loaderStyles: Partial<CSSStyleDeclaration> = {\n        position: 'absolute !important',\n        top: '0 !important',\n        left: '0 !important',\n        width: '100% !important',\n        height: '100% !important',\n        pointerEvents: 'none !important',\n        visibility: 'hidden !important'\n      };\n\n      const resultImages = toRef(props.result, 'images');\n\n      /**\n       * Initializes images state and resets when the result's images change.\n       *\n       * @internal\n       */\n      watch(\n        resultImages,\n        () => {\n          pendingImages.value = [...(props.result.images ?? [])];\n          loadedImages.value = pendingImages.value.filter(image =>\n            loadedImages.value.includes(image)\n          );\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Animation to be used.\n       *\n       * @returns The animation to be used, taking into account if the user has hovered the image.\n       *\n       * @internal\n       */\n      const animation = computed<DefineComponent | string>(() => {\n        return userHasHoveredImage\n          ? props.hoverAnimation ?? props.loadAnimation\n          : props.loadAnimation;\n      });\n\n      /**\n       * Gets the src from the result image.\n       *\n       * @returns The result image src.\n       *\n       * @internal\n       */\n      const imageSrc = computed<string>(() => {\n        return loadedImages.value[\n          !props.showNextImageOnHover || !isHovering ? 0 : loadedImages.value.length - 1\n        ];\n      });\n\n      /**\n       * Indicates if the loader should try to load the next image.\n       *\n       * @returns True if it should try to load the next image.\n       *\n       * @internal\n       */\n      const shouldLoadNextImage = computed<boolean>(() => {\n        const numImagesToLoad = props.showNextImageOnHover && userHasHoveredImage ? 2 : 1;\n        return !!pendingImages.value.length && loadedImages.value.length < numImagesToLoad;\n      });\n\n      /**\n       * Sets an image as failed.\n       *\n       * @internal\n       */\n      const flagImageAsFailed = (): void => {\n        pendingImages.value.shift();\n      };\n\n      /**\n       * Sets an image as loaded.\n       *\n       * @internal\n       */\n      const flagImageLoaded = (): void => {\n        const image = pendingImages.value.shift();\n        if (image) {\n          loadedImages.value.push(image);\n        }\n      };\n\n      return {\n        pendingImages,\n        loadedImages,\n        isHovering,\n        userHasHoveredImage,\n        loaderStyles,\n        animation,\n        imageSrc,\n        shouldLoadNextImage,\n        flagImageAsFailed,\n        flagImageLoaded\n      };\n    }\n  });\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-result-image.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/base-result-image.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { Result } from '@empathyco/x-types';\n  import {\n    computed,\n    DefineComponent,\n    defineComponent,\n    PropType,\n    Ref,\n    ref,\n    toRef,\n    watch\n  } from 'vue';\n  import { NoElement } from '../no-element';\n  import { animationProp } from '../../utils/options-api';\n\n  /**\n   * Component to be reused that renders an `<img>`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: {\n      NoElement\n    },\n    props: {\n      /**\n       * (Required) The {@link @empathyco/x-types#Result | result} information.\n       *\n       * @public\n       */\n      result: {\n        type: Object as PropType<Result>,\n        required: true\n      },\n\n      /**\n       * Animation to use when switching between the placeholder, the loaded image, or the failed\n       * image fallback.\n       *\n       * @public\n       */\n      loadAnimation: {\n        type: animationProp,\n        default: () => NoElement\n      },\n\n      /**\n       * Animation to use when switching between the loaded image and the hover image.\n       *\n       * @public\n       */\n      hoverAnimation: {\n        type: animationProp\n      },\n\n      /**\n       * Indicates if the next valid image should be displayed on hover.\n       *\n       * @public\n       */\n      showNextImageOnHover: {\n        type: Boolean,\n        default: false\n      }\n    },\n\n    setup(props) {\n      /**\n       * Copy of the images of the result.\n       *\n       * It is used as a queue of images to load, once an image loads/fails to load, it is removed\n       * from this array.\n       *\n       * @internal\n       */\n      const pendingImages: Ref<string[]> = ref([]);\n\n      /**\n       * Contains the images that have been loaded successfully.\n       *\n       * @internal\n       */\n      const loadedImages: Ref<string[]> = ref([]);\n\n      /**\n       * Indicates if the user is hovering the image.\n       *\n       * @internal\n       */\n      const isHovering = ref(false);\n\n      /**\n       * Indicates if the user has hovered the image.\n       *\n       * @internal\n       */\n      const userHasHoveredImage = ref(false);\n\n      /**.\n       * Styles to use inline in the image loader, to prevent override from CSS\n       *\n       * @internal\n       */\n      const loaderStyles: Partial<CSSStyleDeclaration> = {\n        position: 'absolute !important',\n        top: '0 !important',\n        left: '0 !important',\n        width: '100% !important',\n        height: '100% !important',\n        pointerEvents: 'none !important',\n        visibility: 'hidden !important'\n      };\n\n      /**\n       * Reactive reference to the result images.\n       *\n       * @internal\n       */\n      const resultImages = toRef(props.result, 'images');\n\n      /**\n       * Initializes images state and resets when the result's images change.\n       *\n       * @internal\n       */\n      watch(\n        resultImages,\n        () => {\n          pendingImages.value = [...(props.result.images ?? [])];\n          loadedImages.value = pendingImages.value.filter(image =>\n            loadedImages.value.includes(image)\n          );\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Animation to be used.\n       *\n       * @returns The animation to be used, taking into account if the user has hovered the image.\n       *\n       * @internal\n       */\n      const animation = computed<DefineComponent | string>(() => {\n        return userHasHoveredImage\n          ? props.hoverAnimation ?? props.loadAnimation\n          : props.loadAnimation;\n      });\n\n      /**\n       * Gets the src from the result image.\n       *\n       * @returns The result image src.\n       *\n       * @internal\n       */\n      const imageSrc = computed<string>(() => {\n        return loadedImages.value[\n          !props.showNextImageOnHover || !isHovering.value ? 0 : loadedImages.value.length - 1\n        ];\n      });\n\n      /**\n       * Indicates if the loader should try to load the next image.\n       *\n       * @returns True if it should try to load the next image.\n       *\n       * @internal\n       */\n      const shouldLoadNextImage = computed<boolean>(() => {\n        const numImagesToLoad = props.showNextImageOnHover && userHasHoveredImage ? 2 : 1;\n        return !!pendingImages.value.length && loadedImages.value.length < numImagesToLoad;\n      });\n\n      /**\n       * Sets an image as failed.\n       *\n       * @internal\n       */\n      const flagImageAsFailed = (): void => {\n        pendingImages.value.shift();\n      };\n\n      /**\n       * Sets an image as loaded.\n       *\n       * @internal\n       */\n      const flagImageLoaded = (): void => {\n        const image = pendingImages.value.shift();\n        if (image) {\n          loadedImages.value.push(image);\n        }\n      };\n\n      return {\n        pendingImages,\n        loadedImages,\n        isHovering,\n        userHasHoveredImage,\n        loaderStyles,\n        animation,\n        imageSrc,\n        shouldLoadNextImage,\n        flagImageAsFailed,\n        flagImageLoaded\n      };\n    }\n  });\n"],"names":[],"mappings":"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"}

package/js/components/result/base-result-image.vue_rollup-plugin-vue_styles.0.vue.js

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".x-result-picture[data-v-1ae01006] {\n  position: relative;\n  min-width: 1px;\n  min-height: 1px;\n}\n.x-result-picture-image[data-v-1ae01006] {\n  max-width: 100%;\n  max-height: 100%;\n}";
+var css = ".x-result-picture[data-v-17f375f7] {\n  position: relative;\n  min-width: 1px;\n  min-height: 1px;\n}\n.x-result-picture-image[data-v-17f375f7] {\n  max-width: 100%;\n  max-height: 100%;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

package/js/components/suggestions/base-suggestion.vue.js

@@ -12,7 +12,11 @@ var __vue_render__ = function () {
   return _c(
     "button",
     _vm._g(
-      { class: _vm.dynamicCSSClasses, on: { click: _vm.emitEvents } },
+      {
+        ref: "el",
+        class: _vm.dynamicCSSClasses,
+        on: { click: _vm.emitEvents },
+      },
       _vm.$listeners
     ),
     [
@@ -32,7 +36,7 @@ var __vue_render__ = function () {
           ]
         },
         null,
-        { suggestion: _vm.suggestion, query: _vm.query, filter: _vm.filter }
+        { query: _vm.query, suggestion: _vm.suggestion, filter: _vm.filter }
       ),
     ],
     2