@empathyco/x-components 3.0.0-alpha.31 → 3.0.0-alpha.35

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

@@ -23,6 +23,7 @@ Aside from common [XEvents](./x-components.xevent.md)<!-- -->, this interface al
 |  --- | --- | --- |
 |  [AdapterConfigChanged](./x-components.xeventstypes.adapterconfigchanged.md) | unknown | The search adapter configuration has changed \* Payload: The new search adapter configuration. |
 |  [ColumnsNumberProvided](./x-components.xeventstypes.columnsnumberprovided.md) | number | The number of columns of a grid has changed. \* Payload: the columns number. |
+|  [SnippetCallbackExecuted](./x-components.xeventstypes.snippetcallbackexecuted.md) | { event: [XEvent](./x-components.xevent.md)<!-- -->; callbackReturn: unknown; } | A callback from the snippet has been executed. \* Payload: An object containing the event that executed the callback and the callback result. |
 |  [SuggestionsDisplayed](./x-components.xeventstypes.suggestionsdisplayed.md) | Suggestion\[\] | Any kind of suggestions have been displayed (query-suggestions, popular searches...) \* Payload: The displayed [suggestions](./x-types.suggestion.md)<!-- -->. |
 |  [TogglePanelStateChanged](./x-components.xeventstypes.togglepanelstatechanged.md) | boolean | The <code>BaseToggleIdPanel</code> <code>isOpen</code> state changed. \* Payload: the new state. |
 |  [UserAcceptedAQuery](./x-components.xeventstypes.useracceptedaquery.md) | string | The user has accepted a query \* Payload: the accepted query. |
@@ -41,6 +42,5 @@ Aside from common [XEvents](./x-components.xevent.md)<!-- -->, this interface al
 |  [UserOpenXProgrammatically](./x-components.xeventstypes.useropenxprogrammatically.md) | void | The user opened X programmatically. \* Payload: none. |
 |  [UserPressedArrowKey](./x-components.xeventstypes.userpressedarrowkey.md) | [ArrowKey](./x-components.arrowkey.md) | The user pressed an [arrow key](./x-components.arrowkey.md) with the focus on the search-box. \* Payload: the pressed [arrow key](./x-components.arrowkey.md)<!-- -->. |
 |  [UserReachedEmpathizeTop](./x-components.xeventstypes.userreachedempathizetop.md) | void | The user has reached the top of the empathize and keeps navigating in that direction. \* Payload: none. |
-|  [UserRightClickedAResult](./x-components.xeventstypes.userrightclickedaresult.md) | Result | The user has right clicked on a result. \* Payload: The [result](./x-types.result.md) that the user right clicked. |
 |  [UserSelectedASuggestion](./x-components.xeventstypes.userselectedasuggestion.md) | Suggestion | User selected any kind of suggestion (query-suggestion, popular-search...) \* Payload: The [suggestion](./x-types.suggestion.md) that the user selected. |
 

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

@@ -0,0 +1,16 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [XEventsTypes](./x-components.xeventstypes.md) &gt; [SnippetCallbackExecuted](./x-components.xeventstypes.snippetcallbackexecuted.md)
+
+## XEventsTypes.SnippetCallbackExecuted property
+
+A callback from the snippet has been executed. \* Payload: An object containing the event that executed the callback and the callback result.
+
+<b>Signature:</b>
+
+```typescript
+SnippetCallbackExecuted: {
+        event: XEvent;
+        callbackReturn: unknown;
+    };
+```

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

@@ -30,7 +30,7 @@ The way to use this class is the next: 1. Create the installer passing in the [I
 ```
            installer.init(snipetConfig)
 ```
-2.2 If the API option is enabled (`createAPI` is `true` in [InstallXOptions](./x-components.installxoptions.md)<!-- -->, or is not present as the default vlaue is `true`<!-- -->) then this init step can be done with the Public API:
+2.2 If the API option is enabled (`createAPI` is `true` in [InstallXOptions](./x-components.installxoptions.md)<!-- -->, or is not present as the default value is `true`<!-- -->) then this init step can be done with the Public API:
 
 ```
            window.X.init(snippetConfig)

package/docs/API-reference/api/x-types.relatedtag.iscurated.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [RelatedTag](./x-types.relatedtag.md) &gt; [isCurated](./x-types.relatedtag.iscurated.md)
+
+## RelatedTag.isCurated property
+
+If it's a curated related tag.
+
+<b>Signature:</b>
+
+```typescript
+isCurated?: boolean;
+```

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

@@ -17,6 +17,7 @@ export interface RelatedTag extends NamedModel<'RelatedTag'>, Previewable
 
 |  Property | Type | Description |
 |  --- | --- | --- |
+|  [isCurated?](./x-types.relatedtag.iscurated.md) | boolean | <i>(Optional)</i> If it's a curated related tag. |
 |  [previous](./x-types.relatedtag.previous.md) | string | The query to refine. |
 |  [selected](./x-types.relatedtag.selected.md) | boolean | If selection mode is enabled, tells if this related tag is selected or not. |
 |  [tag](./x-types.relatedtag.tag.md) | string | The term to add to the current query. |

package/docs/API-reference/components/common/animations/x-components.animate-width.md

@@ -1,11 +1,12 @@
 ---
-id: x-components.x-components.animate-width
-title: Animate Width
-sidebar_label: Animate Width
+
+title: AnimateWidth
+
 ---
+
 # AnimateWidth
 
-> Renders a transition wrapping an element passed in the default slot and animating its width.
+Renders a transition wrapping an element passed in the default slot and animating its width.
 
 ## Slots
 
@@ -13,9 +14,7 @@ sidebar_label: Animate Width
 | -------------------- | ----------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) Transition content | None                                      |
 
----
-
-# Examples
+## Examples
 
 The AnimateWidth component is intended to be used as a prop in animatable components but also works
 as a transition to animate the width of an element.

package/docs/API-reference/components/common/animations/x-components.collapse-from-top.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.collapse-from-top
-title: Collapse From Top
-sidebar_label: Collapse From Top
+
+title: CollapseFromTop
+
 ---
+
 # CollapseFromTop
 
-> Renders a transition group wrapping the element passed in the default slot and animating
-> it with a scale.
+Renders a transition group wrapping the element passed in the default slot and animating
+it with a scale.
 
 ## Slots
 
@@ -14,9 +15,7 @@ sidebar_label: Collapse From Top
 | -------------------- | ------------------------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) to add content to the transition | None                                      |
 
----
-
-# Examples
+## Examples
 
 The CollapseTop component is intended to be used as animation to wrap an element with v-if or v-show
 and animate it. The animation consists on scale its vertical size from 0 to 1, and after this show

package/docs/API-reference/components/common/animations/x-components.collapse-height.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.collapse-height
-title: Collapse Height
-sidebar_label: Collapse Height
+
+title: CollapseHeight
+
 ---
-# collapse-height
 
-> Renders a transition wrapping the element passed in the default slot and animating
-> it with a height animation.
+# CollapseHeight
+
+Renders a transition wrapping the element passed in the default slot and animating
+it with a height animation.
 
 ## Slots
 
@@ -14,9 +15,7 @@ sidebar_label: Collapse Height
 | -------------------- | ------------------------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) to add content to the transition | None                                      |
 
----
-
-# Examples
+## Examples
 
 The CollapseHeight component is intended to be used as animation to wrap an element with v-if or
 v-show and animate it. The animation consists on scale its height size from 0 to auto. This

package/docs/API-reference/components/common/animations/x-components.collapse-width.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.collapse-width
-title: Collapse Width
-sidebar_label: Collapse Width
+
+title: CollapseWidth
+
 ---
-# collapse-width
 
-> Renders a transition wrapping the element passed in the default slot and animating
-> it with a width animation.
+# CollapseWidth
+
+Renders a transition wrapping the element passed in the default slot and animating
+it with a width animation.
 
 ## Slots
 
@@ -14,9 +15,7 @@ sidebar_label: Collapse Width
 | -------------------- | ------------------------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) to add content to the transition | None                                      |
 
----
-
-# Examples
+## Examples
 
 The CollapseWidth component is intended to be used as animation to wrap an element with v-if or
 v-show and animate it. The animation consists on scale its width size from 0 to auto. This

package/docs/API-reference/components/common/animations/x-components.cross-fade.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.cross-fade
-title: Cross Fade
-sidebar_label: Cross Fade
+
+title: CrossFade
+
 ---
+
 # CrossFade
 
-> Renders a transition wrapping the element passed in the default slo. The transition
-> fades between the two toggled elements at the same time.
+Renders a transition wrapping the element passed in the default slo. The transition
+fades between the two toggled elements at the same time.
 
 ## Slots
 
@@ -14,9 +15,7 @@ sidebar_label: Cross Fade
 | -------------------- | ------------------------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) to add content to the transition | None                                      |
 
----
-
-# Example
+## Example
 
 The `CrossFade` component is intended to be used as animation to wrap an element with v-if or v-show
 and animate it. The animation fades the new element into the previous one.

package/docs/API-reference/components/common/animations/x-components.fade-and-slide.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.fade-and-slide
-title: Fade And Slide
-sidebar_label: Fade And Slide
+
+title: FadeAndSlide
+
 ---
+
 # FadeAndSlide
 
-> Renders a transition group wrapping the elements passed in the default slot and animating
-> them with a fade and slide animation.
+Renders a transition group wrapping the elements passed in the default slot and animating
+them with a fade and slide animation.
 
 ## Props
 
@@ -20,9 +21,7 @@ sidebar_label: Fade And Slide
 | -------------------- | ----------------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) Transition-group content | None                                      |
 
----
-
-# Examples
+## Examples
 
 The FadeAndSlide component is intended to be used as a prop in animatable components but also works
 as a wrapper of a transition group that can receive the tag it will render to as a prop.

package/docs/API-reference/components/common/animations/x-components.staggered-fade-and-slide.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.staggered-fade-and-slide
-title: Staggered Fade And Slide
-sidebar_label: Staggered Fade And Slide
+
+title: StaggeredFadeAndSlide
+
 ---
-# staggered-fade-and-slide
 
-> Renders a transition group wrapping the elements passed in the default slot and animating
-> them with an staggered fade and slide animation.
+# StaggeredFadeAndSlide
+
+Renders a transition group wrapping the elements passed in the default slot and animating
+them with an staggered fade and slide animation.
 
 ## Slots
 
@@ -14,8 +15,6 @@ sidebar_label: Staggered Fade And Slide
 | -------------------- | ----------------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) Transition-group content | None                                      |
 
----
-
 The Staggered fade and slide components works as the normal fade and slide components, but it also
 adds a configurable delay to each transition.
 

package/docs/API-reference/components/common/{x-components.staggering-transition-group.md → animations/x-components.staggering-transition-group.md}

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.staggering-transition-group
-title: Staggering Transition Group
-sidebar_label: Staggering Transition Group
+
+title: StaggeringTransitionGroup
+
 ---
+
 # StaggeringTransitionGroup
 
-> A replacement component for Vue's transition-group, that also adds the option to stagger
-> the animations.
+A replacement component for Vue's transition-group, that also adds the option to stagger
+the animations.
 
 ## Props
 
@@ -17,11 +18,9 @@ sidebar_label: Staggering Transition Group
 | <code>tag</code>        | The tag of the node to render to the DOM.                     | <code>string</code> | <code>'div'</code> |
 | <code>staggering</code> | The time in ms to stagger each item.                          | <code>number</code> | <code>25</code>    |
 
----
-
-# Examples
+## Examples
 
-## Basic example
+### Basic example
 
 Apart from all the props and events that the classic transition group has, the staggering transition
 group also exposes a new `stagger` property, which allows to configure the delay for each one of the

package/docs/API-reference/components/common/animations/x-components.translate-from-left.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.translate-from-left
-title: Translate From Left
-sidebar_label: Translate From Left
+
+title: TranslateFromLeft
+
 ---
+
 # TranslateFromLeft
 
-> Renders a transition wrapping the element passed in the default slot and moving it to its
-> desired position.
+Renders a transition wrapping the element passed in the default slot and moving it to its
+desired position.
 
 ## Slots
 
@@ -14,9 +15,7 @@ sidebar_label: Translate From Left
 | -------------------- | ------------------------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) to add content to the transition | None                                      |
 
----
-
-# Example
+## Example
 
 The `TranslateFromRight` component is intended to be used as animation to wrap an element with v-if
 or v-show and animate it. The animation translates the item from/to left 100%.

package/docs/API-reference/components/common/animations/x-components.translate-from-right.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.translate-from-right
-title: Translate From Right
-sidebar_label: Translate From Right
+
+title: TranslateFromRight
+
 ---
+
 # TranslateFromRight
 
-> Renders a transition wrapping the element passed in the default slot and moving it to its
-> desired position.
+Renders a transition wrapping the element passed in the default slot and moving it to its
+desired position.
 
 ## Slots
 
@@ -14,9 +15,7 @@ sidebar_label: Translate From Right
 | -------------------- | ------------------------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) to add content to the transition | None                                      |
 
----
-
-# Example
+## Example
 
 The `TranslateFromRight` component is intended to be used as animation to wrap an element with v-if
 or v-show and animate it. The animation translates the item from/to right 100%.

package/docs/API-reference/components/common/column-picker/x-components.base-column-picker-dropdown.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.base-column-picker-dropdown
-title: Base Column Picker Dropdown
-sidebar_label: Base Column Picker Dropdown
+
+title: BaseColumnPickerDropdown
+
 ---
-# base-column-picker-dropdown
 
-> Column picker dropdown component renders {@link BaseDropdown | dropdown} component which
-> options are the different columns you can set for a grid.
+# BaseColumnPickerDropdown
+
+Column picker dropdown component renders {@link BaseDropdown | dropdown} component which
+options are the different columns you can set for a grid.
 
 It emits {@link XEventsTypes.UserClickedColumnPicker | UserClickedColumnPicker} on dropdown
 input.
@@ -32,19 +33,17 @@ input.
 | <code>toggle</code> | From `BaseDropdown` component: Used to render the contents of the dropdown toggle<br /> button. If not provided, it uses the `item` slot as fallback.                   | **item** <code>string &#124; number &#124; Identifiable</code> - The item data to render.<br />**isOpen** <code>boolean</code> - True if the dropdown is opened, and false if it is<br /> closed.                                          |
 | <code>item</code>   | (required) From `BaseDropdown` component: Used to render each one of the items<br /> content, and as fallback for the toggle button content slot if it is not provided. | **item** <code>string &#124; number &#124; Identifiable</code> - Item to render<br />**isSelected** <code>boolean</code> - True when the item is selected.<br />**isHighlighted** <code>boolean</code> - True when the item has the focus. |
 
----
-
-# Example
+## Example
 
 Column picker dropdown component renders a dropdown component which options are the different
 columns you can set for a grid.
 
-## Usage
+### Usage
 
 Notice that the slots provided match with the `BaseDropdown` component. The `item` slot is required
 unlike the `toggle`, which renders the same `item` slot defined by default.
 
-### Default usage
+#### Default usage
 
 ```vue
 <template>
@@ -74,7 +73,7 @@ export default {
 </script>
 ```
 
-### Customizing toggle button
+#### Customizing toggle button
 
 ```vue
 <template>
@@ -107,7 +106,7 @@ export default {
 </script>
 ```
 
-### Using it without v-model / value
+#### Using it without v-model / value
 
 The component emits an X Event, `UserClickedColumnPicker`, on column change and it also listens to
 that event from outside, so you don't need to store the current column value to keep it synchronized

package/docs/API-reference/components/common/column-picker/x-components.base-column-picker-list.md

@@ -1,11 +1,12 @@
 ---
-id: x-components.x-components.base-column-picker-list
-title: Base Column Picker List
-sidebar_label: Base Column Picker List
+
+title: BaseColumnPickerList
+
 ---
-# base-column-picker-list
 
-> Column picker list component renders a list of buttons to choose the columns number.
+# BaseColumnPickerList
+
+Column picker list component renders a list of buttons to choose the columns number.
 
 ## Props
 
@@ -26,15 +27,13 @@ sidebar_label: Base Column Picker List
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
 | <code>default</code> | Customized Column Picker Button content. Specifying a slot with the column value<br /> will result in the column using that slot composition to render. | **column** <code>number</code> - Columns Number to pick.<br />**isSelected** <code>boolean</code> - True if the columns number are the chosen value. |
 
----
-
-# Examples
+## Examples
 
 This component renders a list of elements in different slots depending on the columns prop. Each
 element will emit the needed events to sync other instances of columns pickers, or grids with the
 number of columns that it is being selected when it is clicked.
 
-## Default usage
+### Default usage
 
 It is required to send the columns prop.
 
@@ -56,7 +55,7 @@ export default {
 </script>
 ```
 
-### Using v-model
+#### Using v-model
 
 It is possible to do two way binding in order to synchronize the value with the parents. It will be
 updated if it changed the value or if the parent changes it.
@@ -79,9 +78,9 @@ export default {
 </script>
 ```
 
-## Customized usage
+### Customized usage
 
-### Overriding the slots
+#### Overriding the slots
 
 It is possible to override the column picker button content.
 

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

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.base-currency
-title: Base Currency
-sidebar_label: Base Currency
+
+title: BaseCurrency
+
 ---
+
 # BaseCurrency
 
-> 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.
+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:
 
@@ -40,17 +41,13 @@ See docs below for more examples.
 | <code>value</code>  | Numeric value to be formatted. | <code>number</code> | <code></code> |
 | <code>format</code> | The format as string.          | <code>string</code> | <code></code> |
 
----
-
-# Example
+## Example
 
 Renders the value received as a property, which always must be a JavaScript number, with the proper
 format provided as string property. The rendered tag is a span in order to render a default inline
 HTML element.
 
-## Basic usage
-
-### Example
+### Basic usage
 
 ```vue
 <BaseCurrency :value="12345678.87654321" format="i.iii,ddd? €" />

package/docs/API-reference/components/common/filters/labels/x-components.base-price-filter-label.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.base-price-filter-label
-title: Base Price Filter Label
-sidebar_label: Base Price Filter Label
+
+title: BasePriceFilterLabel
+
 ---
-# base-price-filter-label
 
-> Renders a label for a price filter, allowing to select different messages depending on the
-> value of the filter.
+# BasePriceFilterLabel
+
+Renders a label for a price filter, allowing to select different messages depending on the
+value of the filter.
 
 ## Props
 
@@ -18,9 +19,7 @@ sidebar_label: Base Price Filter Label
 | <code>fromTo</code>   | Message shown when the filter has both the min and max values defined. | <code>string</code>        | <code></code> |
 | <code>from</code>     | Message shown when the filter hasn't got max value defined.            | <code>string</code>        | <code></code> |
 
----
-
-# Example
+## Example
 
 Renders a label for a price filter, allowing to select different messages depending on the value of
 the filter.
@@ -35,7 +34,7 @@ the filter.
 This component uses internally the `BaseCurrency` one, so you can pass the same props to configure
 how the price should look like.
 
-## Basic usage
+### Basic usage
 
 ```vue
 <template>

package/docs/API-reference/components/common/filters/labels/x-components.base-rating-filter-label.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.base-rating-filter-label
-title: Base Rating Filter Label
-sidebar_label: Base Rating Filter Label
+
+title: BaseRatingFilterLabel
+
 ---
-# base-rating-filter-label
 
-> Renders a label for a rating filter, allowing to override the elements used to paint
-> the rating.
+# BaseRatingFilterLabel
+
+Renders a label for a rating filter, allowing to override the elements used to paint
+the rating.
 
 ## Props
 
@@ -22,20 +23,18 @@ sidebar_label: Base Rating Filter Label
 | <code>rating-icon-filled</code> | Filled icon content | None                                      |
 | <code>rating-icon-empty</code>  | Empty icon content  | None                                      |
 
----
-
-# Example
+## Example
 
 Renders a label for a rating filter, allowing to override the elements used to paint the rating. The
 filter label must be a valid number string. For example: '3', '2.5', '0.25'
 
-## Basic usage
+### Basic usage
 
 ```vue
 <BaseRatingFilterLabel :filter="filter" />
 ```
 
-## Customizing color
+### Customizing color
 
 Its possible to change the default color directly with color CSS attribute. For more elaborated
 styles it's possible to style the inner svg icons.
@@ -44,7 +43,7 @@ styles it's possible to style the inner svg icons.
 <BaseRatingFilterLabel :filter="filter" style="color: gold" />
 ```
 
-## Customizing its contents
+### Customizing its contents
 
 The `max` prop can be used to set the max rating number. It will render as many icons as the this
 `max` value.

package/docs/API-reference/components/common/icons/x-components.arrow.md

@@ -1,8 +1,7 @@
 ---
-id: x-components.x-components.arrow
+
 title: Arrow
-sidebar_label: Arrow
+
 ---
-# arrow
 
-> functional
+# Arrow

package/docs/API-reference/components/common/icons/x-components.bag.md

@@ -1,8 +1,7 @@
 ---
-id: x-components.x-components.bag
+
 title: Bag
-sidebar_label: Bag
+
 ---
-# bag
 
-> functional
+# Bag