@empathyco/x-components 3.0.0-alpha.71 → 3.0.0-alpha.74

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 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.74](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.73...@empathyco/x-components@3.0.0-alpha.74) (2022-03-31)
+
+### Bug Fixes
+
+- **base-currency:** format preference goes prop to be injected by default
+  ([29d5e8d](https://github.com/empathyco/x/commit/29d5e8d576019504ef642af6119c764292f44c51)),
+  closes [EX-5649](https://searchbroker.atlassian.net/browse/EX-5649)
+
+# 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.73](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.72...@empathyco/x-components@3.0.0-alpha.73) (2022-03-24)
+
+### Features
+
+- **history-queries:** add toggle to enable/disable the history queries
+  ([655b55a](https://github.com/empathyco/x/commit/655b55a3f10788073a842d18f7849634e5f94376)),
+  closes [EX-5600](https://searchbroker.atlassian.net/browse/EX-5600)
+
+# 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.72](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.71...@empathyco/x-components@3.0.0-alpha.72) (2022-03-23)
+
+### Documentation
+
+- Update documentation to differentiate integration from development
+  ([fc8d9fa](https://github.com/empathyco/x/commit/fc8d9faa57faafee90c0f4da159b6040294c099c)),
+  closes [EX-5608](https://searchbroker.atlassian.net/browse/EX-5608)
+
+# 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.71](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.70...@empathyco/x-components@3.0.0-alpha.71) (2022-03-23)
 
 ### Testing

package/design-system/full-theme.css

@@ -1422,6 +1422,18 @@
   --x-size-border-radius-bottom-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
   --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
 }
+.x-input--card.x-input,
+.x-input--card .x-input {
+  --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
+  --x-size-border-radius-bottom-right-input-default: var(
+    --x-size-border-radius-bottom-right-input-card
+  );
+  --x-size-border-radius-bottom-left-input-default: var(
+    --x-size-border-radius-bottom-left-input-card
+  );
+}
 :root {
   --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7554,16 +7566,3 @@
 .x-normal-case {
   text-transform: none;
 }
-
-.x-input--card.x-input,
-.x-input--card .x-input {
-  --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
-  --x-size-border-radius-bottom-right-input-default: var(
-    --x-size-border-radius-bottom-right-input-card
-  );
-  --x-size-border-radius-bottom-left-input-default: var(
-    --x-size-border-radius-bottom-left-input-card
-  );
-}

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

@@ -4,12 +4,12 @@
 
 ## BaseResultPreviousPrice.format property
 
-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'.
+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.
 
 <b>Signature:</b>
 
 ```typescript
-protected format: string;
+protected format?: string;
 ```
 
 ## Remarks

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

@@ -17,6 +17,6 @@ export default class BaseResultPreviousPrice extends Vue
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [format](./x-components.baseresultpreviousprice.format.md) |  | string | 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'. |
+|  [format?](./x-components.baseresultpreviousprice.format.md) |  | string | <i>(Optional)</i> 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. |
 |  [result](./x-components.baseresultpreviousprice.result.md) |  | Result | (Required) The [result](./x-types.result.md) information. |
 

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

@@ -22,4 +22,5 @@ export interface HistoryQueriesActions
 |  [removeFromHistory(historyQuery)](./x-components.historyqueriesactions.removefromhistory.md) | Removes a single query from the history, synchronizing it with the browser storage. |
 |  [setHistoryQueries(historyQueries)](./x-components.historyqueriesactions.sethistoryqueries.md) | Sets the history queries, synchronizing them with the browser storage. It also removes the oldest query if the history queries length is bigger than the [HistoryQueriesConfig.maxItemsToStore](./x-components.historyqueriesconfig.maxitemstostore.md)<!-- -->. |
 |  [setUrlParams(urlParams)](./x-components.historyqueriesactions.seturlparams.md) | Checks if the url has a query on it and then updates the state with that value. |
+|  [toggleHistoryQueries(isEnabled)](./x-components.historyqueriesactions.togglehistoryqueries.md) | Toggles the history queries and stores the state in the browser storage. It also cleans the history queries when disabling them. |
 

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

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [HistoryQueriesActions](./x-components.historyqueriesactions.md) &gt; [toggleHistoryQueries](./x-components.historyqueriesactions.togglehistoryqueries.md)
+
+## HistoryQueriesActions.toggleHistoryQueries() method
+
+Toggles the history queries and stores the state in the browser storage. It also cleans the history queries when disabling them.
+
+<b>Signature:</b>
+
+```typescript
+toggleHistoryQueries(isEnabled: boolean): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  isEnabled | boolean | Whether to enable or disable the history queries. |
+
+<b>Returns:</b>
+
+void
+

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

@@ -18,6 +18,7 @@ export interface HistoryQueriesMutations extends QueryMutations
 |  Method | Description |
 |  --- | --- |
 |  [setHistoryQueries(historyQueries)](./x-components.historyqueriesmutations.sethistoryqueries.md) | Sets the [HistoryQueriesState.historyQueries](./x-components.historyqueriesstate.historyqueries.md) property. |
+|  [setIsEnabled(isEnabled)](./x-components.historyqueriesmutations.setisenabled.md) | Sets the [HistoryQueriesState.isEnabled](./x-components.historyqueriesstate.isenabled.md) property. |
 |  [setQuery(query)](./x-components.historyqueriesmutations.setquery.md) | Sets the [HistoryQueriesState.query](./x-components.historyqueriesstate.query.md) property. |
 |  [setSessionTimeStamp(timeStamp)](./x-components.historyqueriesmutations.setsessiontimestamp.md) | Sets the [HistoryQueriesState.sessionTimeStampInMs](./x-components.historyqueriesstate.sessiontimestampinms.md) property. |
 

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

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [HistoryQueriesMutations](./x-components.historyqueriesmutations.md) &gt; [setIsEnabled](./x-components.historyqueriesmutations.setisenabled.md)
+
+## HistoryQueriesMutations.setIsEnabled() method
+
+Sets the [HistoryQueriesState.isEnabled](./x-components.historyqueriesstate.isenabled.md) property.
+
+<b>Signature:</b>
+
+```typescript
+setIsEnabled(isEnabled: boolean): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  isEnabled | boolean | The new [HistoryQueriesState.isEnabled](./x-components.historyqueriesstate.isenabled.md)<!-- -->. |
+
+<b>Returns:</b>
+
+void
+

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [HistoryQueriesState](./x-components.historyqueriesstate.md) &gt; [isEnabled](./x-components.historyqueriesstate.isenabled.md)
+
+## HistoryQueriesState.isEnabled property
+
+Whether the history queries are enabled or disabled.
+
+<b>Signature:</b>
+
+```typescript
+isEnabled: boolean;
+```

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

@@ -19,6 +19,7 @@ export interface HistoryQueriesState extends QueryState
 |  --- | --- | --- |
 |  [config](./x-components.historyqueriesstate.config.md) | [HistoryQueriesConfig](./x-components.historyqueriesconfig.md) | Configuration for the <code>HistoryQueries</code> module. |
 |  [historyQueries](./x-components.historyqueriesstate.historyqueries.md) | HistoryQuery\[\] | The full list of queries made by the user. This list is persisted along different search sessions. |
+|  [isEnabled](./x-components.historyqueriesstate.isenabled.md) | boolean | Whether the history queries are enabled or disabled. |
 |  [query](./x-components.historyqueriesstate.query.md) | string | The current query for searching into the [HistoryQueriesState.historyQueries](./x-components.historyqueriesstate.historyqueries.md)<!-- -->. |
 |  [sessionTimeStampInMs](./x-components.historyqueriesstate.sessiontimestampinms.md) | number | Timestamp that indicates when the current search session has started. |
 

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

@@ -23,4 +23,5 @@ export interface HistoryQueriesXEvents
 |  [UserPressedClearHistoryQueries](./x-components.historyqueriesxevents.userpressedclearhistoryqueries.md) | void | The user pressed the button for clearing all the history queries. \* Payload: none. |
 |  [UserPressedRemoveHistoryQuery](./x-components.historyqueriesxevents.userpressedremovehistoryquery.md) | HistoryQuery | The user pressed the button for removing a single [history query](./x-types.historyquery.md)<!-- -->. \* Payload: The <code>HistoryQuery</code> to remove. |
 |  [UserSelectedAHistoryQuery](./x-components.historyqueriesxevents.userselectedahistoryquery.md) | HistoryQuery | The user has selected a history-query. \* Payload: The [history query](./x-types.historyquery.md) selected. |
+|  [UserToggledHistoryQueries](./x-components.historyqueriesxevents.usertoggledhistoryqueries.md) | boolean | The user has toggled the history queries. \* Payload: whether it has been set to enable or disable. |
 

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [HistoryQueriesXEvents](./x-components.historyqueriesxevents.md) &gt; [UserToggledHistoryQueries](./x-components.historyqueriesxevents.usertoggledhistoryqueries.md)
+
+## HistoryQueriesXEvents.UserToggledHistoryQueries property
+
+The user has toggled the history queries. \* Payload: whether it has been set to enable or disable.
+
+<b>Signature:</b>
+
+```typescript
+UserToggledHistoryQueries: boolean;
+```

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

@@ -547,6 +547,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [taggingXModule](./x-components.taggingxmodule.md) | Tagging [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>empathize</code> entry point. |
 |  [TagIcon](./x-components.tagicon.md) |  |
 |  [throttleFunction](./x-components.throttlefunction.md) | Util function that returns a throttled version of the function passed as parameter. |
+|  [toggleHistoryQueries](./x-components.togglehistoryqueries.md) | Enables or disables history queries. |
 |  [toggleRelatedTag](./x-components.togglerelatedtag.md) | Default implementation for the [RelatedTagsActions.toggleRelatedTag()](./x-components.relatedtagsactions.togglerelatedtag.md)<!-- -->. |
 |  [toggleRelatedTagWire](./x-components.togglerelatedtagwire.md) | Sets the selected related tags. |
 |  [track](./x-components.track.md) | Default implementation for the [TaggingActions.track()](./x-components.taggingactions.track.md)<!-- -->. |

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [toggleHistoryQueries](./x-components.togglehistoryqueries.md)
+
+## toggleHistoryQueries variable
+
+Enables or disables history queries.
+
+<b>Signature:</b>
+
+```typescript
+toggleHistoryQueries: import("../..").Wire<boolean>
+```

package/docs/API-reference/components/common/currency/x-components.base-currency.md

@@ -50,32 +50,271 @@ HTML element.
 ### Basic usage
 
 ```vue
-<BaseCurrency :value="12345678.87654321" format="i.iii,ddd? €" />
-<!-- output: '12.345.678,876 €' -->
-<BaseCurrency :value="12345678" format="i.iii,ddd? €" />
-<!-- output: '12.345.678 €' -->
-<BaseCurrency :value="12345678.87654321" format="$ i.iii,dd" />
-<!-- output: '$ 12.345.678,87' -->
-<BaseCurrency :value="12345678.87654321" format="$i.iii,dd" />
-<!-- output: '$12.345.678,87' -->
-<BaseCurrency :value="12345678.87654321" format="i.iii,dd €" />
-<!-- output: '12.345.678,87 €' -->
-<BaseCurrency :value="12345678.87654321" format="i.iii,dd€" />
-<!-- output: '12.345.678,87€' -->
-<BaseCurrency :value="12345678.87654321" format="i,iii.dd €" />
-<!-- output: '12,345,678.87 €' -->
-<BaseCurrency :value="12345678.87654321" format="i iii.dd €" />
-<!-- output: '12 345 678.87 €' -->
-<BaseCurrency :value="12345678.87654321" format="i iii - dd €" />
-<!-- output: '12 345 678 - 87 €' -->
-<BaseCurrency :value="12345678.87654321" format="i.iii,dddddd €" />
-<!-- output: '12.345.678,876543 €' -->
-<BaseCurrency :value="12345678.87" format="i.iii,dddddd €" />
-<!-- output: '12.345.678,870000 €' -->
-<BaseCurrency :value="12345678" format="i.iii,dddddd €" />
-<!-- output: '12.345.678,000000 €' -->
-<BaseCurrency :value="12345678.87654321" format="i.iii,dd €" />
-<!-- output: '12.345.678,87 €' -->
-<BaseCurrency :value="12345678.87654321" format="i.iii €" />
-<!-- output: '12.345.678 €' -->
+<template>
+  <BaseCurrency :value="12345678.87654321" />
+  <!-- output: '12.345.678,87' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678.87654321" format="i.iii,ddd? €" />
+  <!-- output: '12.345.678,876 €' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678" format="i.iii,ddd? €" />
+  <!-- output: '12.345.678 €' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678.87654321" format="$ i.iii,dd" />
+  <!-- output: '$ 12.345.678,87' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678.87654321" format="$i.iii,dd" />
+  <!-- output: '$12.345.678,87' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678.87654321" format="i.iii,dd €" />
+  <!-- output: '12.345.678,87 €' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678.87654321" format="i.iii,dd€" />
+  <!-- output: '12.345.678,87€' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678.87654321" format="i,iii.dd €" />
+  <!-- output: '12,345,678.87 €' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678.87654321" format="i iii.dd €" />
+  <!-- output: '12 345 678.87 €' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678.87654321" format="i iii - dd €" />
+  <!-- output: '12 345 678 - 87 €' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678.87654321" format="i.iii,dddddd €" />
+  <!-- output: '12.345.678,876543 €' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678.87" format="i.iii,dddddd €" />
+  <!-- output: '12.345.678,870000 €' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678" format="i.iii,dddddd €" />
+  <!-- output: '12.345.678,000000 €' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678.87654321" format="i.iii,dd €" />
+  <!-- output: '12.345.678,87 €' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
+```
+
+```vue
+<template>
+  <BaseCurrency :value="12345678.87654321" format="i.iii €" />
+  <!-- output: '12.345.678 €' -->
+</template>
+
+<script>
+import { BaseCurrency } from "@empathyco/x-components";
+
+export default {
+  name: "BaseCurrencyDemo",
+  components: {
+    BaseCurrency
+  }
+};
+</script>
 ```

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

@@ -10,10 +10,10 @@ Component that renders the {@link @empathyco/x-types#Result | result} previous p
 
 ## Props
 
-| Name                | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Type                | Default                 |
-| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------------------- |
-| <code>result</code> | (Required) The {@link @empathyco/x-types#Result \| 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.<br />- Default mask: 'i.iii,dd' which returns '1.345,67'. | <code>string</code> | <code>'i.iii,dd'</code> |
+| Name                | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Type                | Default       |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------- |
+| <code>result</code> | (Required) The {@link @empathyco/x-types#Result \| 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> |
 
 ## Slots
 
@@ -29,13 +29,41 @@ This component shows the previous price formatted if it has discount. The compon
 props. `format` to select the currency format to be applied.
 
 ```vue
-<BaseResultPreviousPrice :value="result" :format="'i.iii,ddd €'" />
+<template>
+  <BaseResultPreviousPrice :result="result" :format="'i.iii,ddd €'" />
+</template>
+
+<script>
+import { BaseResultPreviousPrice } from "@empathyco/x-components";
+
+export default {
+  name: "BaseResultPreviousPriceDemo",
+  components: {
+    BaseResultPreviousPrice
+  }
+};
+</script>
 ```
 
 ### Overriding default slot
 
 ```vue
-<BaseResultPreviousPrice :result="result">
-  <span class="custom-base-result-previous-price">{{ result.price.originalValue }}</span>
-</BaseResultPreviousPrice>
+<template>
+  <BaseResultPreviousPrice :result="result">
+    <span class="custom-base-result-previous-price">{{
+      result.price.originalValue
+    }}</span>
+  </BaseResultPreviousPrice>
+</template>
+
+<script>
+import { BaseResultPreviousPrice } from "@empathyco/x-components";
+
+export default {
+  name: "BaseResultPreviousPriceDemo",
+  components: {
+    BaseResultPreviousPrice
+  }
+};
+</script>
 ```