@empathyco/x-components 6.3.1 → 7.0.0

package/docs/API-reference/components/common/result/x-components.base-result-previous-price.md

@@ -10,10 +10,11 @@ Component that renders the @empathyco/x-types#Result previous price.
 
 ## Props
 
-| Name                | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Type                | Default       |
-| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------- |
-| <code>result</code> | (Required) The @empathyco/x-types#Result information.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | <code>Result</code> | <code></code> |
-| <code>format</code> | Format or mask to be defined as string.<br />- Use 'i' to define integer numbers.<br />- Use 'd' to define decimal numbers. You can define the length of the decimal part. If the<br />doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.<br />- Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.<br />- Decimal separator must be defined between the last 'i' and the first 'd'. It can be more<br />than one character.<br />- Set whatever you need around the integers and decimals marks. | <code>string</code> | <code></code> |
+| Name                  | Description                                                                                                                  | Type                                                               | Default                 |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------------------- |
+| <code>result</code>   | (Required) The @empathyco/x-types#Result information.                                                                        | <code>Result</code>                                                | <code></code>           |
+| <code>currency</code> | Optional value coming from https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes.                           | <code>string</code>                                                | <code></code>           |
+| <code>format</code>   | The currency format possibilities from Intl.NumberFormatOptions.<br />Allows customization of decimal places, grouping, etc. | <code>Omit<Intl.NumberFormatOptions, 'currency' \| 'style'></code> | <code>() => ({})</code> |
 
 ## Slots
 
@@ -25,16 +26,40 @@ Component that renders the @empathyco/x-types#Result previous price.
 
 ### Basic example
 
-This component shows the previous price formatted if it has discount. The component has an optional
-`format` prop to select the currency format to be applied.
+This component shows the previous price formatted if it has discount. The component has optional
+`currency` and `format` props to customize the display.
 
 ```vue
 <template>
-  <BaseResultPreviousPrice :result="result" :format="'i.iii,ddd €'" />
+  <BaseResultPreviousPrice :result="result" currency="USD" />
 </template>
 
 <script setup>
 import { BaseResultPreviousPrice } from "@empathyco/x-components";
+
+const result = {
+  price: { originalValue: 199.99, hasDiscount: true },
+  // ...other result properties
+};
+</script>
+```
+
+### Customizing format
+
+You can customize the number formatting using the `format` prop with `Intl.NumberFormatOptions`:
+
+```vue
+<template>
+  <BaseResultPreviousPrice
+    :result="result"
+    currency="EUR"
+    :format="{ minimumFractionDigits: 2, maximumFractionDigits: 2 }"
+  />
+</template>
+
+<script setup>
+import { BaseResultPreviousPrice } from "@empathyco/x-components";
+
 const result = {
   price: { originalValue: 199.99, hasDiscount: true },
   // ...other result properties
@@ -55,6 +80,7 @@ const result = {
 
 <script setup>
 import { BaseResultPreviousPrice } from "@empathyco/x-components";
+
 const result = {
   price: { originalValue: 199.99, hasDiscount: true },
   // ...other result properties

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

@@ -1,19 +1,16 @@
 import _sfc_main from './base-currency.vue2.js';
-import { openBlock, createElementBlock, toDisplayString, createCommentVNode } from 'vue';
+import { openBlock, createElementBlock, toDisplayString } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-const _hoisted_1 = {
-  key: 0,
-  class: "x-currency"
-};
+const _hoisted_1 = { class: "x-currency" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.value !== void 0 ? (openBlock(), createElementBlock(
+  return openBlock(), createElementBlock(
     "span",
     _hoisted_1,
-    toDisplayString(_ctx.currency),
+    toDisplayString(_ctx.currencyText),
     1
     /* TEXT */
-  )) : createCommentVNode("v-if", true);
+  );
 }
 var BaseCurrency = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

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\">\nimport { computed, defineComponent, inject } from 'vue'\nimport { 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 * 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 */\nexport 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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport { BaseCurrency } from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_toDisplayString","_createCommentVNode"],"mappings":";;;;;;EACmC,KAAA,EAAM;;;AAA3B,EAAA,OAAA,IAAA,CAAA,KAAA,KAAU,MAAA,IAAAA,SAAA,EAAA,EAAtBC,kBAAA;AAAA,IAAyE,MAAA;AAAA,IAAzE,UAAA;AAAA,IAAyEC,gBAAlB,IAAA,CAAA,QAAQ,CAAA;AAAA,IAAA;AAAA;AAAA,GAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;;;;;;"}
+{"version":3,"file":"base-currency.vue.js","sources":["../../../../src/components/currency/base-currency.vue"],"sourcesContent":["<template>\n  <span class=\"x-currency\">{{ currencyText }}</span>\n</template>\n\n<script lang=\"ts\">\nimport type { SnippetConfig } from '@x/x-installer'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, inject } from 'vue'\n\nexport 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 ISO 4217 currency value. If not specified we use snippetConfig.currency\n     *\n     * @public\n     */\n    currency: String,\n    /**\n     * The currency format possibilities from Intl.NumberFormatOptions.\n     * Allows customization of decimal places, grouping, etc.\n     * Note: 'currency' and 'style' options are managed internally.\n     *\n     * @public\n     */\n    format: {\n      type: Object as PropType<Omit<Intl.NumberFormatOptions, 'currency' | 'style'>>,\n      default: () => ({}),\n    },\n  },\n\n  setup(props) {\n    const snippetConfig = inject<SnippetConfig>('snippetConfig')\n\n    const currencyText = computed<string>(() => {\n      const currency = props.currency ?? snippetConfig?.currency ?? 'EUR'\n      return Intl.NumberFormat(snippetConfig?.uiLang, {\n        style: 'currency',\n        ...props.format,\n        currency,\n      }).format(props.value)\n    })\n\n    return {\n      currencyText,\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, formatted\nusing the Intl.NumberFormat API with ISO 4217 currency codes. The rendered tag is a span in order\nto render a default inline HTML element.\n\n### Basic usage\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" currency=\"EUR\" />\n  <!-- output depends on locale, e.g., '12.345.678,88 €' for es-ES -->\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### Customizing decimal places\n\n```vue\n<template>\n  <BaseCurrency\n    :value=\"12345678.87654321\"\n    currency=\"USD\"\n    :format=\"{ minimumFractionDigits: 3, maximumFractionDigits: 3 }\"\n  />\n  <!-- output: '$12,345,678.877' for en-US locale -->\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### No decimal places\n\n```vue\n<template>\n  <BaseCurrency\n    :value=\"12345678.87\"\n    currency=\"EUR\"\n    :format=\"{ minimumFractionDigits: 0, maximumFractionDigits: 0 }\"\n  />\n  <!-- output: '12.345.679 €' for es-ES locale (rounds up) -->\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### Using different currencies\n\n```vue\n<template>\n  <div>\n    <BaseCurrency :value=\"1234.56\" currency=\"USD\" />\n    <!-- output: '$1,234.56' for en-US -->\n    <BaseCurrency :value=\"1234.56\" currency=\"EUR\" />\n    <!-- output: '1.234,56 €' for es-ES -->\n    <BaseCurrency :value=\"1234.56\" currency=\"GBP\" />\n    <!-- output: '£1,234.56' for en-GB -->\n    <BaseCurrency :value=\"1234.56\" currency=\"JPY\" />\n    <!-- output: '¥1,235' for ja-JP -->\n  </div>\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### Advanced formatting options\n\nYou can pass any valid Intl.NumberFormatOptions (except 'currency' and 'style' which are managed\ninternally):\n\n```vue\n<template>\n  <BaseCurrency\n    :value=\"1234567.89\"\n    currency=\"EUR\"\n    :format=\"{\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 4,\n      useGrouping: true,\n    }\"\n  />\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_toDisplayString"],"mappings":";;;;AACQ,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,YAAA,EAAY;;AAAxB,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IAAkD,MAAA;AAAA,IAAlD,UAAA;AAAA,IAAkDC,gBAAtB,IAAA,CAAA,YAAY,CAAA;AAAA,IAAA;AAAA;AAAA,GAAA;;;;;;"}

package/js/components/currency/base-currency.vue2.js

@@ -1,43 +1,5 @@
 import { defineComponent, inject, computed } from 'vue';
-import { currencyFormatter } from '../../utils/currency-formatter.js';
 
-/**
- * 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.
- *
- * 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 `?` symbol after the
- * decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`).
- * - Set whatever you need around the integers and decimals marks.
- * - Default mask: 'i.iii,dd' which returns '1.345,67'.
- *
- * @remarks The number of 'd', which is the maximum decimal length, MUST matches with the length
- * of decimals provided from the adapter. Otherwise, when the component truncate the decimal
- * part, it deletes significant digits.
- *
- * Basic example:
- *
- * ```vue
- * <BaseCurrency
- *   :value="123456.789"
- *   format="i.iiii,dddd €"
- * />
- * ```
- *
- * It will render: `123.456,7890 €`.
- *
- * See docs below for more examples.
- *
- * @public
- */
 var _sfc_main = defineComponent({
     props: {
         /**
@@ -53,39 +15,35 @@ var _sfc_main = defineComponent({
             required: true,
         },
         /**
-         * The format as string.
+         * The ISO 4217 currency value. If not specified we use snippetConfig.currency
          *
          * @public
          */
-        format: {
-            type: String,
-        },
-    },
-    setup(props) {
+        currency: String,
         /**
-         * The injected format as string.
+         * The currency format possibilities from Intl.NumberFormatOptions.
+         * Allows customization of decimal places, grouping, etc.
+         * Note: 'currency' and 'style' options are managed internally.
          *
          * @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));
+        format: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
+    setup(props) {
+        const snippetConfig = inject('snippetConfig');
+        const currencyText = computed(() => {
+            const currency = props.currency ?? snippetConfig?.currency ?? 'EUR';
+            return Intl.NumberFormat(snippetConfig?.uiLang, {
+                style: 'currency',
+                ...props.format,
+                currency,
+            }).format(props.value);
+        });
         return {
-            currency,
+            currencyText,
         };
     },
 });

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

@@ -1 +1 @@
-{"version":3,"file":"base-currency.vue2.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\">\nimport { computed, defineComponent, inject } from 'vue'\nimport { 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 * 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 */\nexport 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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\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 setup>\nimport { BaseCurrency } from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE;AACL;;;;;;;AAOE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;AACF,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,cAAa,GAAI,MAAM,CAAS,gBAAgB,EAAE,UAAU,CAAA;AAElE;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAS,MAAM,KAAK,CAAC,MAAK,IAAK,cAAc,CAAA;AAE5E;;;;;;AAME;AACF,QAAA,MAAM,WAAW,QAAQ,CAAS,MAAM,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAA;QAE5F,OAAO;YACL,QAAQ;SACV;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-currency.vue2.js","sources":["../../../../src/components/currency/base-currency.vue"],"sourcesContent":["<template>\n  <span class=\"x-currency\">{{ currencyText }}</span>\n</template>\n\n<script lang=\"ts\">\nimport type { SnippetConfig } from '@x/x-installer'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, inject } from 'vue'\n\nexport 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 ISO 4217 currency value. If not specified we use snippetConfig.currency\n     *\n     * @public\n     */\n    currency: String,\n    /**\n     * The currency format possibilities from Intl.NumberFormatOptions.\n     * Allows customization of decimal places, grouping, etc.\n     * Note: 'currency' and 'style' options are managed internally.\n     *\n     * @public\n     */\n    format: {\n      type: Object as PropType<Omit<Intl.NumberFormatOptions, 'currency' | 'style'>>,\n      default: () => ({}),\n    },\n  },\n\n  setup(props) {\n    const snippetConfig = inject<SnippetConfig>('snippetConfig')\n\n    const currencyText = computed<string>(() => {\n      const currency = props.currency ?? snippetConfig?.currency ?? 'EUR'\n      return Intl.NumberFormat(snippetConfig?.uiLang, {\n        style: 'currency',\n        ...props.format,\n        currency,\n      }).format(props.value)\n    })\n\n    return {\n      currencyText,\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, formatted\nusing the Intl.NumberFormat API with ISO 4217 currency codes. The rendered tag is a span in order\nto render a default inline HTML element.\n\n### Basic usage\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" currency=\"EUR\" />\n  <!-- output depends on locale, e.g., '12.345.678,88 €' for es-ES -->\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### Customizing decimal places\n\n```vue\n<template>\n  <BaseCurrency\n    :value=\"12345678.87654321\"\n    currency=\"USD\"\n    :format=\"{ minimumFractionDigits: 3, maximumFractionDigits: 3 }\"\n  />\n  <!-- output: '$12,345,678.877' for en-US locale -->\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### No decimal places\n\n```vue\n<template>\n  <BaseCurrency\n    :value=\"12345678.87\"\n    currency=\"EUR\"\n    :format=\"{ minimumFractionDigits: 0, maximumFractionDigits: 0 }\"\n  />\n  <!-- output: '12.345.679 €' for es-ES locale (rounds up) -->\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### Using different currencies\n\n```vue\n<template>\n  <div>\n    <BaseCurrency :value=\"1234.56\" currency=\"USD\" />\n    <!-- output: '$1,234.56' for en-US -->\n    <BaseCurrency :value=\"1234.56\" currency=\"EUR\" />\n    <!-- output: '1.234,56 €' for es-ES -->\n    <BaseCurrency :value=\"1234.56\" currency=\"GBP\" />\n    <!-- output: '£1,234.56' for en-GB -->\n    <BaseCurrency :value=\"1234.56\" currency=\"JPY\" />\n    <!-- output: '¥1,235' for ja-JP -->\n  </div>\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n\n### Advanced formatting options\n\nYou can pass any valid Intl.NumberFormatOptions (except 'currency' and 'style' which are managed\ninternally):\n\n```vue\n<template>\n  <BaseCurrency\n    :value=\"1234567.89\"\n    currency=\"EUR\"\n    :format=\"{\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 4,\n      useGrouping: true,\n    }\"\n  />\n</template>\n\n<script setup>\nimport BaseCurrency from '@empathyco/x-components/js/components/currency/base-currency.vue'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AASA,gBAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE;AACL;;;;;;;AAOE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;AACF,QAAA,QAAQ,EAAE,MAAM;AAChB;;;;;;AAME;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAwE;AAC9E,YAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACpB,SAAA;AACF,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,aAAY,GAAI,MAAM,CAAgB,eAAe,CAAA;AAE3D,QAAA,MAAM,eAAe,QAAQ,CAAS,MAAI;YACxC,MAAM,QAAO,GAAI,KAAK,CAAC,QAAO,IAAK,aAAa,EAAE,QAAO,IAAK,KAAI;AAClE,YAAA,OAAO,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,EAAE;AAC9C,gBAAA,KAAK,EAAE,UAAU;gBACjB,GAAG,KAAK,CAAC,MAAM;gBACf,QAAQ;AACT,aAAA,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAA;AACvB,QAAA,CAAC,CAAA;QAED,OAAO;YACL,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/filters/labels/base-price-filter-label.vue.js

@@ -15,10 +15,19 @@ var _sfc_main = defineComponent({
             type: Object,
             required: true,
         },
-        /** Configuration for show the label. */
-        format: {
-            type: String,
-        },
+        /**
+         * An ISO 4217 currency value.
+         *
+         * @public
+         */
+        currency: String,
+        /**
+         * The currency format possibilities from Intl.NumberFormatOptions.
+         * Allows customization of decimal places, grouping, etc.
+         *
+         * @public
+         */
+        format: Object,
         /**
          * Message shown when the filter hasn't got the min value defined.
          *
@@ -67,12 +76,14 @@ var _sfc_main = defineComponent({
                 if (partMessage === '{min}') {
                     return h(BaseCurrency, {
                         value: props.filter.range.min,
+                        currency: props.currency,
                         format: props.format,
                     });
                 }
                 else if (partMessage === '{max}') {
                     return h(BaseCurrency, {
                         value: props.filter.range.max,
+                        currency: props.currency,
                         format: props.format,
                     });
                 }

package/js/components/filters/labels/base-price-filter-label.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-price-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-price-filter-label.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { RangeValue } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, h } from 'vue'\nimport BaseCurrency from '../../currency/base-currency.vue'\n\n/**\n * Renders a label for a price filter, allowing to select different messages depending on the\n * value of the filter.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseCurrency },\n  props: {\n    /** The filter data for get min and max value. */\n    filter: {\n      type: Object as PropType<{ range: RangeValue }>,\n      required: true,\n    },\n    /** Configuration for show the label. */\n    format: {\n      type: String,\n    },\n    /**\n     * Message shown when the filter hasn't got the min value defined.\n     *\n     * @public\n     */\n    lessThan: {\n      type: String,\n      required: true,\n    },\n    /**\n     * Message shown when the filter has both the min and max values defined.\n     *\n     * @public\n     */\n    fromTo: {\n      type: String,\n      required: true,\n    },\n    /**\n     * Message shown when the filter hasn't got max value defined.\n     *\n     * @public\n     */\n    from: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * The active label, retrieved from the provided props.\n     * It depends on the min and max values of the filter.\n     *\n     * @returns The active label to be formatted with the min and max values of the filter.\n     */\n    const label = computed<string>(() => {\n      return props.filter.range.min === null\n        ? props.lessThan\n        : props.filter.range.max === null\n          ? props.from\n          : props.fromTo\n    })\n\n    return () => {\n      const labelParts = label.value.split(/(\\{min\\}|\\{max\\})/)\n\n      const children = labelParts.map(partMessage => {\n        if (partMessage === '{min}') {\n          return h(BaseCurrency, {\n            value: props.filter.range.min as number,\n            format: props.format,\n          })\n        } else if (partMessage === '{max}') {\n          return h(BaseCurrency, {\n            value: props.filter.range.max as number,\n            format: props.format,\n          })\n        }\n        return partMessage\n      })\n\n      return h('span', { class: 'x-price-filter-label' }, children)\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a price filter, allowing to select different messages depending on the value of\nthe filter.\n\n- When the `min` value property isn't defined in the filter, you can show a message like\n  `Less than $10` by using the `lessThan` prop, combined with the `{max}` placeholder.\n- When the `max` value property isn't defined in the filter, you can show a message like\n  `More than $300` by using the `from` prop, combined with the `{min}` placeholder.\n- If both the `min` and `max` values of the filter are defined, you can show a message like\n  `$10 - $300` by using the `fromTo` prop.\n\nThis component uses internally the `BaseCurrency` one, so you can pass the same props to configure\nhow the price should look like.\n\n### Basic usage\n\n```vue\n<template>\n  <Facets>\n    <template #price=\"{ facet }\">\n      <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n        <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n          <BasePriceFilterLabel\n            :filter=\"filter\"\n            format=\"$i\"\n            lessThan=\"Less than {max}\"\n            fromTo=\"From {min} to {max}\"\n            from=\"More than {min}\"\n          />\n        </NumberRangeFilter>\n      </Filters>\n    </template>\n  </Facets>\n</template>\n\n<script setup>\nimport BasePriceFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-price-filter-label.vue'\nimport { Filters, Facets, NumberRangeFilter } from '@empathyco/x-components/facets'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAMA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;AAKE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAS,MAAI;YACjC,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAE,KAAM;kBAC9B,KAAK,CAAC;kBACN,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAE,KAAM;sBACzB,KAAK,CAAC;AACR,sBAAE,KAAK,CAAC,MAAK;AACnB,QAAA,CAAC,CAAA;AAED,QAAA,OAAO,MAAI;YACT,MAAM,UAAS,GAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAA;YAExD,MAAM,WAAW,UAAU,CAAC,GAAG,CAAC,WAAU,IAAG;AAC3C,gBAAA,IAAI,WAAU,KAAM,OAAO,EAAE;oBAC3B,OAAO,CAAC,CAAC,YAAY,EAAE;AACrB,wBAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAa;wBACvC,MAAM,EAAE,KAAK,CAAC,MAAM;AACrB,qBAAA,CAAA;gBACH;AAAO,qBAAA,IAAI,WAAU,KAAM,OAAO,EAAE;oBAClC,OAAO,CAAC,CAAC,YAAY,EAAE;AACrB,wBAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAa;wBACvC,MAAM,EAAE,KAAK,CAAC,MAAM;AACrB,qBAAA,CAAA;gBACH;AACA,gBAAA,OAAO,WAAU;AACnB,YAAA,CAAC,CAAA;AAED,YAAA,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,sBAAqB,EAAG,EAAE,QAAQ,CAAA;AAC9D,QAAA,CAAA;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-price-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-price-filter-label.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { RangeValue } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, h } from 'vue'\nimport BaseCurrency from '../../currency/base-currency.vue'\n\n/**\n * Renders a label for a price filter, allowing to select different messages depending on the\n * value of the filter.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseCurrency },\n  props: {\n    /** The filter data for get min and max value. */\n    filter: {\n      type: Object as PropType<{ range: RangeValue }>,\n      required: true,\n    },\n    /**\n     * An ISO 4217 currency value.\n     *\n     * @public\n     */\n    currency: String,\n    /**\n     * The currency format possibilities from Intl.NumberFormatOptions.\n     * Allows customization of decimal places, grouping, etc.\n     *\n     * @public\n     */\n    format: Object as PropType<Omit<Intl.NumberFormatOptions, 'currency' | 'style'>>,\n    /**\n     * Message shown when the filter hasn't got the min value defined.\n     *\n     * @public\n     */\n    lessThan: {\n      type: String,\n      required: true,\n    },\n    /**\n     * Message shown when the filter has both the min and max values defined.\n     *\n     * @public\n     */\n    fromTo: {\n      type: String,\n      required: true,\n    },\n    /**\n     * Message shown when the filter hasn't got max value defined.\n     *\n     * @public\n     */\n    from: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * The active label, retrieved from the provided props.\n     * It depends on the min and max values of the filter.\n     *\n     * @returns The active label to be formatted with the min and max values of the filter.\n     */\n    const label = computed<string>(() => {\n      return props.filter.range.min === null\n        ? props.lessThan\n        : props.filter.range.max === null\n          ? props.from\n          : props.fromTo\n    })\n\n    return () => {\n      const labelParts = label.value.split(/(\\{min\\}|\\{max\\})/)\n\n      const children = labelParts.map(partMessage => {\n        if (partMessage === '{min}') {\n          return h(BaseCurrency, {\n            value: props.filter.range.min as number,\n            currency: props.currency,\n            format: props.format,\n          })\n        } else if (partMessage === '{max}') {\n          return h(BaseCurrency, {\n            value: props.filter.range.max as number,\n            currency: props.currency,\n            format: props.format,\n          })\n        }\n        return partMessage\n      })\n\n      return h('span', { class: 'x-price-filter-label' }, children)\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a price filter, allowing to select different messages depending on the value of\nthe filter.\n\n- When the `min` value property isn't defined in the filter, you can show a message like\n  `Less than $10` by using the `lessThan` prop, combined with the `{max}` placeholder.\n- When the `max` value property isn't defined in the filter, you can show a message like\n  `More than $300` by using the `from` prop, combined with the `{min}` placeholder.\n- If both the `min` and `max` values of the filter are defined, you can show a message like\n  `$10 - $300` by using the `fromTo` prop.\n\nThis component uses internally the `BaseCurrency` one, so you can pass the same props to configure\nhow the price should look like.\n\n### Basic usage\n\n```vue\n<template>\n  <Facets>\n    <template #price=\"{ facet }\">\n      <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n        <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n          <BasePriceFilterLabel\n            :filter=\"filter\"\n            currency=\"USD\"\n            lessThan=\"Less than {max}\"\n            fromTo=\"From {min} to {max}\"\n            from=\"More than {min}\"\n          />\n        </NumberRangeFilter>\n      </Filters>\n    </template>\n  </Facets>\n</template>\n\n<script setup>\nimport BasePriceFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-price-filter-label.vue'\nimport { Filters, Facets, NumberRangeFilter } from '@empathyco/x-components/facets'\n</script>\n```\n\n### Customizing format\n\nYou can customize the number formatting using the `format` prop with `Intl.NumberFormatOptions`:\n\n```vue\n<template>\n  <Facets>\n    <template #price=\"{ facet }\">\n      <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n        <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n          <BasePriceFilterLabel\n            :filter=\"filter\"\n            currency=\"EUR\"\n            :format=\"{ minimumFractionDigits: 0, maximumFractionDigits: 0 }\"\n            lessThan=\"Less than {max}\"\n            fromTo=\"From {min} to {max}\"\n            from=\"More than {min}\"\n          />\n        </NumberRangeFilter>\n      </Filters>\n    </template>\n  </Facets>\n</template>\n\n<script setup>\nimport BasePriceFilterLabel from '@empathyco/x-components/js/components/filters/labels/base-price-filter-label.vue'\nimport { Filters, Facets, NumberRangeFilter } from '@empathyco/x-components/facets'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAMA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE,MAAM;AAChB;;;;;AAKE;AACF,QAAA,MAAM,EAAE,MAAwE;AAChF;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;AAKE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAS,MAAI;YACjC,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAE,KAAM;kBAC9B,KAAK,CAAC;kBACN,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAE,KAAM;sBACzB,KAAK,CAAC;AACR,sBAAE,KAAK,CAAC,MAAK;AACnB,QAAA,CAAC,CAAA;AAED,QAAA,OAAO,MAAI;YACT,MAAM,UAAS,GAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAA;YAExD,MAAM,WAAW,UAAU,CAAC,GAAG,CAAC,WAAU,IAAG;AAC3C,gBAAA,IAAI,WAAU,KAAM,OAAO,EAAE;oBAC3B,OAAO,CAAC,CAAC,YAAY,EAAE;AACrB,wBAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAa;wBACvC,QAAQ,EAAE,KAAK,CAAC,QAAQ;wBACxB,MAAM,EAAE,KAAK,CAAC,MAAM;AACrB,qBAAA,CAAA;gBACH;AAAO,qBAAA,IAAI,WAAU,KAAM,OAAO,EAAE;oBAClC,OAAO,CAAC,CAAC,YAAY,EAAE;AACrB,wBAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAa;wBACvC,QAAQ,EAAE,KAAK,CAAC,QAAQ;wBACxB,MAAM,EAAE,KAAK,CAAC,MAAM;AACrB,qBAAA,CAAA;gBACH;AACA,gBAAA,OAAO,WAAU;AACnB,YAAA,CAAC,CAAA;AAED,YAAA,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,sBAAqB,EAAG,EAAE,QAAQ,CAAA;AAC9D,QAAA,CAAA;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/result/base-result-current-price.vue.js

@@ -15,8 +15,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _ctx.result.price?.value ? (openBlock(), createBlock(_component_BaseCurrency, {
           key: 0,
           value: _ctx.result.price.value,
+          currency: _ctx.currency,
           format: _ctx.format
-        }, null, 8, ["value", "format"])) : createCommentVNode("v-if", true)
+        }, null, 8, ["value", "currency", "format"])) : createCommentVNode("v-if", true)
       ])
     ],
     2

package/js/components/result/base-result-current-price.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-current-price.vue.js","sources":["../../../../src/components/result/base-result-current-price.vue"],"sourcesContent":["<template>\n  <div :class=\"dynamicClasses\" class=\"x-result-current-price\" data-test=\"result-current-price\">\n    <!--\n      @slot Base currency item\n          @binding {result} result - Result data\n    -->\n    <slot :result=\"result\">\n      <BaseCurrency v-if=\"result.price?.value\" :value=\"result.price.value\" :format=\"format\" />\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../utils/types'\nimport { computed, defineComponent } from 'vue'\nimport BaseCurrency from '../currency/base-currency.vue'\n\n/**\n * Component that renders the {@link @empathyco/x-types#Result} current price\n * that may or may not be on sale.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseCurrency },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n    /**\n     * 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     * doesn't include decimals, it is filled with zeros until reach the length defined with '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     * - 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 match with the length\n     * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n     * part, delete significant digits.\n     *\n     * @public\n     */\n    format: {\n      type: String,\n    },\n  },\n  setup(props) {\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add,\n     * and the boolean value tells if it should be added or not.\n     * @internal\n     */\n    const dynamicClasses = computed<VueCSSClasses>(() => ({\n      'x-result-current-price--on-sale': props.result.price?.hasDiscount ?? false,\n    }))\n\n    return {\n      dynamicClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component shows the current price formatted. You can provide the `format` by property or let\nthe `BaseCurrency` component use an injected one.\n\n```vue\n<template>\n  <BaseResultCurrentPrice :result=\"result\" :format=\"'i.iii,ddd €'\" />\n</template>\n\n<script setup>\nimport { BaseResultCurrentPrice } from '@empathyco/x-components'\nconst result = {\n  price: { value: 123.45, hasDiscount: false },\n  // ...other result properties\n}\n</script>\n```\n\n### Overriding default slot\n\n```vue\n<template>\n  <BaseResultCurrentPrice :result=\"result\">\n    <span class=\"custom-base-result-current-price\">{{ result.price.value }}</span>\n  </BaseResultCurrentPrice>\n</template>\n\n<script setup>\nimport { BaseResultCurrentPrice } from '@empathyco/x-components'\nconst result = {\n  price: { value: 123.45, hasDiscount: false },\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_createBlock","_createCommentVNode"],"mappings":";;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IAQM,KAAA;AAAA,IAAA;AAAA,MARA,KAAA,EAAKC,cAAA,CAAA,CAAE,IAAA,CAAA,cAAA,EAAsB,wBAAwB,CAAA,CAAA;AAAA,MAAC,WAAA,EAAU;AAAA,KAAA;;AAKpE,MAAAC,UAAA,CAEO,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAFA,MAAA,EAAQ,IAAA,CAAA,MAAA,EAAM,EAArB,MAEO;AAAA,QADe,IAAA,CAAA,MAAA,CAAO,KAAA,EAAO,KAAA,IAAAH,SAAA,EAAA,EAAlCI,WAAA,CAAwF,uBAAA,EAAA;AAAA,UAAA,GAAA,EAAA,CAAA;AAA9C,UAAA,KAAA,EAAO,YAAO,KAAA,CAAM,KAAA;AAAA,UAAQ,MAAA,EAAQ,IAAA,CAAA;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,OAAA,EAAA,QAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA;;;;;;;;;;;"}
+{"version":3,"file":"base-result-current-price.vue.js","sources":["../../../../src/components/result/base-result-current-price.vue"],"sourcesContent":["<template>\n  <div :class=\"dynamicClasses\" class=\"x-result-current-price\" data-test=\"result-current-price\">\n    <!--\n      @slot Base currency item\n          @binding {result} result - Result data\n    -->\n    <slot :result=\"result\">\n      <BaseCurrency\n        v-if=\"result.price?.value\"\n        :value=\"result.price.value\"\n        :currency=\"currency\"\n        :format=\"format\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../utils/types'\nimport { computed, defineComponent } from 'vue'\nimport BaseCurrency from '../currency/base-currency.vue'\n\n/**\n * Component that renders the {@link @empathyco/x-types#Result} current price\n * that may or may not be on sale.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseCurrency },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n    /**\n     * Optional value coming from https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes.\n     *\n     * @public\n     */\n    currency: String,\n    /**\n     * The currency format possibilities from Intl.NumberFormatOptions.\n     * Allows customization of decimal places, grouping, etc.\n     *\n     * @public\n     */\n    format: {\n      type: Object as PropType<Omit<Intl.NumberFormatOptions, 'currency' | 'style'>>,\n      default: () => ({}),\n    },\n  },\n  setup(props) {\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add,\n     * and the boolean value tells if it should be added or not.\n     * @internal\n     */\n    const dynamicClasses = computed<VueCSSClasses>(() => ({\n      'x-result-current-price--on-sale': props.result.price?.hasDiscount ?? false,\n    }))\n\n    return {\n      dynamicClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component shows the current price formatted. You can provide the `currency` and `format`\nproperties to customize the display.\n\n```vue\n<template>\n  <BaseResultCurrentPrice :result=\"result\" currency=\"USD\" />\n</template>\n\n<script setup>\nimport { BaseResultCurrentPrice } from '@empathyco/x-components'\nconst result = {\n  price: { value: 123.45, hasDiscount: false },\n  // ...other result properties\n}\n</script>\n```\n\n### Customizing format\n\nYou can customize the number formatting using the `format` prop with `Intl.NumberFormatOptions`:\n\n```vue\n<template>\n  <BaseResultCurrentPrice\n    :result=\"result\"\n    currency=\"EUR\"\n    :format=\"{ minimumFractionDigits: 2, maximumFractionDigits: 2 }\"\n  />\n</template>\n\n<script setup>\nimport { BaseResultCurrentPrice } from '@empathyco/x-components'\nconst result = {\n  price: { value: 123.456, hasDiscount: false },\n  // ...other result properties\n}\n</script>\n```\n\n### Overriding default slot\n\n```vue\n<template>\n  <BaseResultCurrentPrice :result=\"result\">\n    <span class=\"custom-base-result-current-price\">{{ result.price.value }}</span>\n  </BaseResultCurrentPrice>\n</template>\n\n<script setup>\nimport { BaseResultCurrentPrice } from '@empathyco/x-components'\nconst result = {\n  price: { value: 123.45, hasDiscount: false },\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_createBlock","_createCommentVNode"],"mappings":";;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IAaM,KAAA;AAAA,IAAA;AAAA,MAbA,KAAA,EAAKC,cAAA,CAAA,CAAE,IAAA,CAAA,cAAA,EAAsB,wBAAwB,CAAA,CAAA;AAAA,MAAC,WAAA,EAAU;AAAA,KAAA;;AAKpE,MAAAC,UAAA,CAOO,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAPA,MAAA,EAAQ,IAAA,CAAA,MAAA,EAAM,EAArB,MAOO;AAAA,QALG,IAAA,CAAA,MAAA,CAAO,KAAA,EAAO,KAAA,IAAAH,SAAA,EAAA,EADtBI,WAAA,CAKE,uBAAA,EAAA;AAAA,UAAA,GAAA,EAAA,CAAA;AAHC,UAAA,KAAA,EAAO,YAAO,KAAA,CAAM,KAAA;AAAA,UACpB,QAAA,EAAU,IAAA,CAAA,QAAA;AAAA,UACV,MAAA,EAAQ,IAAA,CAAA;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,QAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA;;;;;;;;;;;"}

package/js/components/result/base-result-current-price.vue2.js

@@ -20,24 +20,20 @@ var _sfc_main = defineComponent({
             required: true,
         },
         /**
-         * 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
-         * 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.
-         * - Set whatever you need around the integers and decimals marks.
-         * - Default mask: 'i.iii,dd' which returns '1.345,67'.
+         * Optional value coming from https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes.
          *
-         * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length
-         * of decimals provided from the adapter. Otherwise, when the component truncate the decimal
-         * part, delete significant digits.
+         * @public
+         */
+        currency: String,
+        /**
+         * The currency format possibilities from Intl.NumberFormatOptions.
+         * Allows customization of decimal places, grouping, etc.
          *
          * @public
          */
         format: {
-            type: String,
+            type: Object,
+            default: () => ({}),
         },
     },
     setup(props) {

package/js/components/result/base-result-current-price.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-current-price.vue2.js","sources":["../../../../src/components/result/base-result-current-price.vue"],"sourcesContent":["<template>\n  <div :class=\"dynamicClasses\" class=\"x-result-current-price\" data-test=\"result-current-price\">\n    <!--\n      @slot Base currency item\n          @binding {result} result - Result data\n    -->\n    <slot :result=\"result\">\n      <BaseCurrency v-if=\"result.price?.value\" :value=\"result.price.value\" :format=\"format\" />\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../utils/types'\nimport { computed, defineComponent } from 'vue'\nimport BaseCurrency from '../currency/base-currency.vue'\n\n/**\n * Component that renders the {@link @empathyco/x-types#Result} current price\n * that may or may not be on sale.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseCurrency },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n    /**\n     * 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     * doesn't include decimals, it is filled with zeros until reach the length defined with '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     * - 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 match with the length\n     * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n     * part, delete significant digits.\n     *\n     * @public\n     */\n    format: {\n      type: String,\n    },\n  },\n  setup(props) {\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add,\n     * and the boolean value tells if it should be added or not.\n     * @internal\n     */\n    const dynamicClasses = computed<VueCSSClasses>(() => ({\n      'x-result-current-price--on-sale': props.result.price?.hasDiscount ?? false,\n    }))\n\n    return {\n      dynamicClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component shows the current price formatted. You can provide the `format` by property or let\nthe `BaseCurrency` component use an injected one.\n\n```vue\n<template>\n  <BaseResultCurrentPrice :result=\"result\" :format=\"'i.iii,ddd €'\" />\n</template>\n\n<script setup>\nimport { BaseResultCurrentPrice } from '@empathyco/x-components'\nconst result = {\n  price: { value: 123.45, hasDiscount: false },\n  // ...other result properties\n}\n</script>\n```\n\n### Overriding default slot\n\n```vue\n<template>\n  <BaseResultCurrentPrice :result=\"result\">\n    <span class=\"custom-base-result-current-price\">{{ result.price.value }}</span>\n  </BaseResultCurrentPrice>\n</template>\n\n<script setup>\nimport { BaseResultCurrentPrice } from '@empathyco/x-components'\nconst result = {\n  price: { value: 123.45, hasDiscount: false },\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAmBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;;;;;;;;;;;;;AAgBE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAgB,OAAO;YACpD,iCAAiC,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,WAAU,IAAK,KAAK;AAC5E,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,cAAc;SAChB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-result-current-price.vue2.js","sources":["../../../../src/components/result/base-result-current-price.vue"],"sourcesContent":["<template>\n  <div :class=\"dynamicClasses\" class=\"x-result-current-price\" data-test=\"result-current-price\">\n    <!--\n      @slot Base currency item\n          @binding {result} result - Result data\n    -->\n    <slot :result=\"result\">\n      <BaseCurrency\n        v-if=\"result.price?.value\"\n        :value=\"result.price.value\"\n        :currency=\"currency\"\n        :format=\"format\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../utils/types'\nimport { computed, defineComponent } from 'vue'\nimport BaseCurrency from '../currency/base-currency.vue'\n\n/**\n * Component that renders the {@link @empathyco/x-types#Result} current price\n * that may or may not be on sale.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseCurrency },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n    /**\n     * Optional value coming from https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes.\n     *\n     * @public\n     */\n    currency: String,\n    /**\n     * The currency format possibilities from Intl.NumberFormatOptions.\n     * Allows customization of decimal places, grouping, etc.\n     *\n     * @public\n     */\n    format: {\n      type: Object as PropType<Omit<Intl.NumberFormatOptions, 'currency' | 'style'>>,\n      default: () => ({}),\n    },\n  },\n  setup(props) {\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add,\n     * and the boolean value tells if it should be added or not.\n     * @internal\n     */\n    const dynamicClasses = computed<VueCSSClasses>(() => ({\n      'x-result-current-price--on-sale': props.result.price?.hasDiscount ?? false,\n    }))\n\n    return {\n      dynamicClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component shows the current price formatted. You can provide the `currency` and `format`\nproperties to customize the display.\n\n```vue\n<template>\n  <BaseResultCurrentPrice :result=\"result\" currency=\"USD\" />\n</template>\n\n<script setup>\nimport { BaseResultCurrentPrice } from '@empathyco/x-components'\nconst result = {\n  price: { value: 123.45, hasDiscount: false },\n  // ...other result properties\n}\n</script>\n```\n\n### Customizing format\n\nYou can customize the number formatting using the `format` prop with `Intl.NumberFormatOptions`:\n\n```vue\n<template>\n  <BaseResultCurrentPrice\n    :result=\"result\"\n    currency=\"EUR\"\n    :format=\"{ minimumFractionDigits: 2, maximumFractionDigits: 2 }\"\n  />\n</template>\n\n<script setup>\nimport { BaseResultCurrentPrice } from '@empathyco/x-components'\nconst result = {\n  price: { value: 123.456, hasDiscount: false },\n  // ...other result properties\n}\n</script>\n```\n\n### Overriding default slot\n\n```vue\n<template>\n  <BaseResultCurrentPrice :result=\"result\">\n    <span class=\"custom-base-result-current-price\">{{ result.price.value }}</span>\n  </BaseResultCurrentPrice>\n</template>\n\n<script setup>\nimport { BaseResultCurrentPrice } from '@empathyco/x-components'\nconst result = {\n  price: { value: 123.45, hasDiscount: false },\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAwBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE,MAAM;AAChB;;;;;AAKE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAwE;AAC9E,YAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACpB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAgB,OAAO;YACpD,iCAAiC,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,WAAU,IAAK,KAAK;AAC5E,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,cAAc;SAChB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/result/base-result-previous-price.vue.js

@@ -14,8 +14,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.result.price?.originalValue ? (openBlock(), createBlock(_component_BaseCurrency, {
         key: 0,
         value: _ctx.result.price.originalValue,
+        currency: _ctx.currency,
         format: _ctx.format
-      }, null, 8, ["value", "format"])) : createCommentVNode("v-if", true)
+      }, null, 8, ["value", "currency", "format"])) : createCommentVNode("v-if", true)
     ])
   ])) : createCommentVNode("v-if", true);
 }

package/js/components/result/base-result-previous-price.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-previous-price.vue.js","sources":["../../../../src/components/result/base-result-previous-price.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"result.price?.hasDiscount\"\n    class=\"x-result-previous-price\"\n    data-test=\"result-previous-price\"\n  >\n    <!--\n      @slot Base currency item\n         @binding {result} result - Result data\n    -->\n    <slot :result=\"result\">\n      <BaseCurrency\n        v-if=\"result.price?.originalValue\"\n        :value=\"result.price.originalValue\"\n        :format=\"format\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseCurrency from '../currency/base-currency.vue'\n\n/**\n * Component that renders the {@link @empathyco/x-types#Result} previous price.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseCurrency },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n    /**\n     * 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     * doesn't include decimals, it is filled with zeros until reach the length defined with '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     * - Set whatever you need around the integers and decimals marks.\n     *\n     * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length\n     * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n     * part, delete significant digits.\n     *\n     * @public\n     */\n    format: {\n      type: String,\n    },\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component shows the previous price formatted if it has discount. The component has an optional\n`format` prop to select the currency format to be applied.\n\n```vue\n<template>\n  <BaseResultPreviousPrice :result=\"result\" :format=\"'i.iii,ddd €'\" />\n</template>\n\n<script setup>\nimport { BaseResultPreviousPrice } from '@empathyco/x-components'\nconst result = {\n  price: { originalValue: 199.99, hasDiscount: true },\n  // ...other result properties\n}\n</script>\n```\n\n### Overriding default slot\n\n```vue\n<template>\n  <BaseResultPreviousPrice :result=\"result\">\n    <span class=\"custom-base-result-previous-price\">{{ result.price.originalValue }}</span>\n  </BaseResultPreviousPrice>\n</template>\n\n<script setup>\nimport { BaseResultPreviousPrice } from '@empathyco/x-components'\nconst result = {\n  price: { originalValue: 199.99, hasDiscount: true },\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_createBlock","_createCommentVNode"],"mappings":";;;;;;EAGI,KAAA,EAAM,yBAAA;AAAA,EACN,WAAA,EAAU;;;;AAFJ,EAAA,OAAA,IAAA,CAAA,MAAA,CAAO,KAAA,EAAO,WAAA,IAAAA,SAAA,EAAA,EADtBC,kBAAA,CAgBM,KAAA,EAhBN,UAAA,EAgBM;AAAA,IAPJC,UAAA,CAMO,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EANA,MAAA,EAAQ,IAAA,CAAA,MAAA,IAAf,MAMO;AAAA,MAJG,IAAA,CAAA,MAAA,CAAO,KAAA,EAAO,aAAA,IAAAF,SAAA,EAAA,EADtBG,WAAA,CAIE,uBAAA,EAAA;AAAA,QAAA,GAAA,EAAA,CAAA;AAFC,QAAA,KAAA,EAAO,YAAO,KAAA,CAAM,aAAA;AAAA,QACpB,MAAA,EAAQ,IAAA,CAAA;AAAA,OAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,OAAA,EAAA,QAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA;;;;;;;;"}
+{"version":3,"file":"base-result-previous-price.vue.js","sources":["../../../../src/components/result/base-result-previous-price.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"result.price?.hasDiscount\"\n    class=\"x-result-previous-price\"\n    data-test=\"result-previous-price\"\n  >\n    <!--\n      @slot Base currency item\n         @binding {result} result - Result data\n    -->\n    <slot :result=\"result\">\n      <BaseCurrency\n        v-if=\"result.price?.originalValue\"\n        :value=\"result.price.originalValue\"\n        :currency=\"currency\"\n        :format=\"format\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseCurrency from '../currency/base-currency.vue'\n\n/**\n * Component that renders the {@link @empathyco/x-types#Result} previous price.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseCurrency },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n    /**\n     * Optional value coming from https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes.\n     *\n     * @public\n     */\n    currency: String,\n    /**\n     * The currency format possibilities from Intl.NumberFormatOptions.\n     * Allows customization of decimal places, grouping, etc.\n     *\n     * @public\n     */\n    format: {\n      type: Object as PropType<Omit<Intl.NumberFormatOptions, 'currency' | 'style'>>,\n      default: () => ({}),\n    },\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component shows the previous price formatted if it has discount. The component has optional\n`currency` and `format` props to customize the display.\n\n```vue\n<template>\n  <BaseResultPreviousPrice :result=\"result\" currency=\"USD\" />\n</template>\n\n<script setup>\nimport { BaseResultPreviousPrice } from '@empathyco/x-components'\n\nconst result = {\n  price: { originalValue: 199.99, hasDiscount: true },\n  // ...other result properties\n}\n</script>\n```\n\n### Customizing format\n\nYou can customize the number formatting using the `format` prop with `Intl.NumberFormatOptions`:\n\n```vue\n<template>\n  <BaseResultPreviousPrice\n    :result=\"result\"\n    currency=\"EUR\"\n    :format=\"{ minimumFractionDigits: 2, maximumFractionDigits: 2 }\"\n  />\n</template>\n\n<script setup>\nimport { BaseResultPreviousPrice } from '@empathyco/x-components'\n\nconst result = {\n  price: { originalValue: 199.99, hasDiscount: true },\n  // ...other result properties\n}\n</script>\n```\n\n### Overriding default slot\n\n```vue\n<template>\n  <BaseResultPreviousPrice :result=\"result\">\n    <span class=\"custom-base-result-previous-price\">{{ result.price.originalValue }}</span>\n  </BaseResultPreviousPrice>\n</template>\n\n<script setup>\nimport { BaseResultPreviousPrice } from '@empathyco/x-components'\n\nconst result = {\n  price: { originalValue: 199.99, hasDiscount: true },\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_createBlock","_createCommentVNode"],"mappings":";;;;;;EAGI,KAAA,EAAM,yBAAA;AAAA,EACN,WAAA,EAAU;;;;AAFJ,EAAA,OAAA,IAAA,CAAA,MAAA,CAAO,KAAA,EAAO,WAAA,IAAAA,SAAA,EAAA,EADtBC,kBAAA,CAiBM,KAAA,EAjBN,UAAA,EAiBM;AAAA,IARJC,UAAA,CAOO,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAPA,MAAA,EAAQ,IAAA,CAAA,MAAA,IAAf,MAOO;AAAA,MALG,IAAA,CAAA,MAAA,CAAO,KAAA,EAAO,aAAA,IAAAF,SAAA,EAAA,EADtBG,WAAA,CAKE,uBAAA,EAAA;AAAA,QAAA,GAAA,EAAA,CAAA;AAHC,QAAA,KAAA,EAAO,YAAO,KAAA,CAAM,aAAA;AAAA,QACpB,QAAA,EAAU,IAAA,CAAA,QAAA;AAAA,QACV,MAAA,EAAQ,IAAA,CAAA;AAAA,OAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,QAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA;;;;;;;;"}

package/js/components/result/base-result-previous-price.vue2.js

@@ -19,23 +19,20 @@ var _sfc_main = defineComponent({
             required: true,
         },
         /**
-         * 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
-         * 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.
-         * - Set whatever you need around the integers and decimals marks.
+         * Optional value coming from https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes.
          *
-         * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length
-         * of decimals provided from the adapter. Otherwise, when the component truncate the decimal
-         * part, delete significant digits.
+         * @public
+         */
+        currency: String,
+        /**
+         * The currency format possibilities from Intl.NumberFormatOptions.
+         * Allows customization of decimal places, grouping, etc.
          *
          * @public
          */
         format: {
-            type: String,
+            type: Object,
+            default: () => ({}),
         },
     },
 });

package/js/components/result/base-result-previous-price.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-previous-price.vue2.js","sources":["../../../../src/components/result/base-result-previous-price.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"result.price?.hasDiscount\"\n    class=\"x-result-previous-price\"\n    data-test=\"result-previous-price\"\n  >\n    <!--\n      @slot Base currency item\n         @binding {result} result - Result data\n    -->\n    <slot :result=\"result\">\n      <BaseCurrency\n        v-if=\"result.price?.originalValue\"\n        :value=\"result.price.originalValue\"\n        :format=\"format\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseCurrency from '../currency/base-currency.vue'\n\n/**\n * Component that renders the {@link @empathyco/x-types#Result} previous price.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseCurrency },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n    /**\n     * 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     * doesn't include decimals, it is filled with zeros until reach the length defined with '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     * - Set whatever you need around the integers and decimals marks.\n     *\n     * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length\n     * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n     * part, delete significant digits.\n     *\n     * @public\n     */\n    format: {\n      type: String,\n    },\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component shows the previous price formatted if it has discount. The component has an optional\n`format` prop to select the currency format to be applied.\n\n```vue\n<template>\n  <BaseResultPreviousPrice :result=\"result\" :format=\"'i.iii,ddd €'\" />\n</template>\n\n<script setup>\nimport { BaseResultPreviousPrice } from '@empathyco/x-components'\nconst result = {\n  price: { originalValue: 199.99, hasDiscount: true },\n  // ...other result properties\n}\n</script>\n```\n\n### Overriding default slot\n\n```vue\n<template>\n  <BaseResultPreviousPrice :result=\"result\">\n    <span class=\"custom-base-result-previous-price\">{{ result.price.originalValue }}</span>\n  </BaseResultPreviousPrice>\n</template>\n\n<script setup>\nimport { BaseResultPreviousPrice } from '@empathyco/x-components'\nconst result = {\n  price: { originalValue: 199.99, hasDiscount: true },\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AA0BA;;;;AAIE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;;;;;;;;;;;;AAeE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;AACF,KAAA;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-result-previous-price.vue2.js","sources":["../../../../src/components/result/base-result-previous-price.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"result.price?.hasDiscount\"\n    class=\"x-result-previous-price\"\n    data-test=\"result-previous-price\"\n  >\n    <!--\n      @slot Base currency item\n         @binding {result} result - Result data\n    -->\n    <slot :result=\"result\">\n      <BaseCurrency\n        v-if=\"result.price?.originalValue\"\n        :value=\"result.price.originalValue\"\n        :currency=\"currency\"\n        :format=\"format\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseCurrency from '../currency/base-currency.vue'\n\n/**\n * Component that renders the {@link @empathyco/x-types#Result} previous price.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseCurrency },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n    /**\n     * Optional value coming from https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes.\n     *\n     * @public\n     */\n    currency: String,\n    /**\n     * The currency format possibilities from Intl.NumberFormatOptions.\n     * Allows customization of decimal places, grouping, etc.\n     *\n     * @public\n     */\n    format: {\n      type: Object as PropType<Omit<Intl.NumberFormatOptions, 'currency' | 'style'>>,\n      default: () => ({}),\n    },\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component shows the previous price formatted if it has discount. The component has optional\n`currency` and `format` props to customize the display.\n\n```vue\n<template>\n  <BaseResultPreviousPrice :result=\"result\" currency=\"USD\" />\n</template>\n\n<script setup>\nimport { BaseResultPreviousPrice } from '@empathyco/x-components'\n\nconst result = {\n  price: { originalValue: 199.99, hasDiscount: true },\n  // ...other result properties\n}\n</script>\n```\n\n### Customizing format\n\nYou can customize the number formatting using the `format` prop with `Intl.NumberFormatOptions`:\n\n```vue\n<template>\n  <BaseResultPreviousPrice\n    :result=\"result\"\n    currency=\"EUR\"\n    :format=\"{ minimumFractionDigits: 2, maximumFractionDigits: 2 }\"\n  />\n</template>\n\n<script setup>\nimport { BaseResultPreviousPrice } from '@empathyco/x-components'\n\nconst result = {\n  price: { originalValue: 199.99, hasDiscount: true },\n  // ...other result properties\n}\n</script>\n```\n\n### Overriding default slot\n\n```vue\n<template>\n  <BaseResultPreviousPrice :result=\"result\">\n    <span class=\"custom-base-result-previous-price\">{{ result.price.originalValue }}</span>\n  </BaseResultPreviousPrice>\n</template>\n\n<script setup>\nimport { BaseResultPreviousPrice } from '@empathyco/x-components'\n\nconst result = {\n  price: { originalValue: 199.99, hasDiscount: true },\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AA2BA;;;;AAIE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE,MAAM;AAChB;;;;;AAKE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAwE;AAC9E,YAAA,OAAO,EAAE,OAAO,EAAE,CAAC;AACpB,SAAA;AACF,KAAA;AACF,CAAA,CAAA;;;;"}

package/js/index.js

@@ -175,7 +175,6 @@ export { AnimationProp } from './types/animation-prop.js';
 export { arrayToObject, createEmitterArrayFilter, deepFilter, deepFlat, groupItemsBy, isArrayEmpty } from './utils/array.js';
 export { CancelSymbol, cancellablePromise } from './utils/cancellable-promise.js';
 export { clone } from './utils/clone.js';
-export { currencyFormatter } from './utils/currency-formatter.js';
 export { debounce as debounceFunction } from './utils/debounce.js';
 export { areFiltersDifferent, createRawFilters } from './utils/filters.js';
 export { FOCUSABLE_SELECTORS } from './utils/focus.js';

package/js/index.js.map

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