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

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+# 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.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

@@ -286,49 +286,6 @@
   --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
   --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
 }
-:root {
-  --x-size-gap-dropdown-card: var(--x-size-base-03);
-  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-}
-
-.x-dropdown--card {
-  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
-  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-top-left-dropdown-default: var(
-    --x-size-border-radius-top-left-dropdown-card
-  );
-  --x-size-border-radius-top-right-dropdown-default: var(
-    --x-size-border-radius-top-right-dropdown-card
-  );
-  --x-size-border-radius-bottom-right-dropdown-default: var(
-    --x-size-border-radius-bottom-right-dropdown-card
-  );
-  --x-size-border-radius-bottom-left-dropdown-default: var(
-    --x-size-border-radius-bottom-left-dropdown-card
-  );
-  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-top-dropdown-list-default: var(
-    --x-size-border-width-top-dropdown-list-card
-  );
-  --x-size-border-width-right-dropdown-list-default: var(
-    --x-size-border-width-right-dropdown-list-card
-  );
-  --x-size-border-width-bottom-dropdown-list-default: var(
-    --x-size-border-width-bottom-dropdown-list-card
-  );
-  --x-size-border-width-left-dropdown-list-default: var(
-    --x-size-border-width-left-dropdown-list-card
-  );
-}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -571,6 +528,49 @@
 [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
   left: 0;
 }
+:root {
+  --x-size-gap-dropdown-card: var(--x-size-base-03);
+  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+}
+
+.x-dropdown--card {
+  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
+  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-top-left-dropdown-default: var(
+    --x-size-border-radius-top-left-dropdown-card
+  );
+  --x-size-border-radius-top-right-dropdown-default: var(
+    --x-size-border-radius-top-right-dropdown-card
+  );
+  --x-size-border-radius-bottom-right-dropdown-default: var(
+    --x-size-border-radius-bottom-right-dropdown-card
+  );
+  --x-size-border-radius-bottom-left-dropdown-default: var(
+    --x-size-border-radius-bottom-left-dropdown-card
+  );
+  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-top-dropdown-list-default: var(
+    --x-size-border-width-top-dropdown-list-card
+  );
+  --x-size-border-width-right-dropdown-list-default: var(
+    --x-size-border-width-right-dropdown-list-card
+  );
+  --x-size-border-width-bottom-dropdown-list-default: var(
+    --x-size-border-width-bottom-dropdown-list-card
+  );
+  --x-size-border-width-left-dropdown-list-default: var(
+    --x-size-border-width-left-dropdown-list-card
+  );
+}
 :root {
   --x-size-width-dropdown-l: 202px;
 }
@@ -1055,12 +1055,6 @@
 .x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
   width: 100%;
 }
-.x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
-.x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
-.x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
-.x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
-  margin-left: auto;
-}
 :root {
   --x-size-padding-grid: 0;
   --x-size-gap-grid: var(--x-size-base-03);
@@ -1087,6 +1081,12 @@
 .x-grid-list--cols-auto .x-grid-list__item {
   min-width: var(--x-size-min-width-grid-item);
 }
+.x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
+  margin-left: auto;
+}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -3484,35 +3484,6 @@
 .x-row--gap-20 {
   --x-size-gap-row: var(--x-size-gap-row-20);
 }
-/* @deprecated */
-:root {
-  --x-size-padding-row-02: var(--x-size-base-02);
-  --x-size-padding-row-03: var(--x-size-base-03);
-  --x-size-padding-row-04: var(--x-size-base-04);
-  --x-size-padding-row-05: var(--x-size-base-05);
-  --x-size-padding-row-06: var(--x-size-base-06);
-}
-
-/* @deprecated */
-.x-row--padding-02 {
-  --x-size-padding-row: var(--x-size-padding-row-02);
-}
-
-.x-row--padding-03 {
-  --x-size-padding-row: var(--x-size-padding-row-03);
-}
-
-.x-row--padding-04 {
-  --x-size-padding-row: var(--x-size-padding-row-04);
-}
-
-.x-row--padding-05 {
-  --x-size-padding-row: var(--x-size-padding-row-05);
-}
-
-.x-row--padding-06 {
-  --x-size-padding-row: var(--x-size-padding-row-06);
-}
 :root {
   --x-string-overflow-scroll: auto;
   --x-color-background-scroll-bar: transparent;
@@ -3551,6 +3522,35 @@
 .x-base-scroll {
   overflow-y: var(--x-string-overflow-scroll, auto);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-row-02: var(--x-size-base-02);
+  --x-size-padding-row-03: var(--x-size-base-03);
+  --x-size-padding-row-04: var(--x-size-base-04);
+  --x-size-padding-row-05: var(--x-size-base-05);
+  --x-size-padding-row-06: var(--x-size-base-06);
+}
+
+/* @deprecated */
+.x-row--padding-02 {
+  --x-size-padding-row: var(--x-size-padding-row-02);
+}
+
+.x-row--padding-03 {
+  --x-size-padding-row: var(--x-size-padding-row-03);
+}
+
+.x-row--padding-04 {
+  --x-size-padding-row: var(--x-size-padding-row-04);
+}
+
+.x-row--padding-05 {
+  --x-size-padding-row: var(--x-size-padding-row-05);
+}
+
+.x-row--padding-06 {
+  --x-size-padding-row: var(--x-size-padding-row-06);
+}
 .x-sliding-panel {
   z-index: 0;
   background-color: var(--x-color-background-sliding-panel);

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 */