@empathyco/x-components 6.0.0-alpha.3 → 6.0.0-alpha.30

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

@@ -69,6 +69,9 @@ Entry point to export search-type models and testing schemas in a unified api-ex
 |  [RecommendationsRequest](./x-types.recommendationsrequest.md) | Request for Recommendations endpoint. |
 |  [RecommendationsResponse](./x-types.recommendationsresponse.md) | Response for the recommendations endpoint. |
 |  [Redirection](./x-types.redirection.md) | A redirection (AKA Direct Link) is simply a URL. Normally, the user is just redirected to it after making a query that matches the configuration of this URL. In other cases it is shown as a button that the user can click, and which will trigger the redirect action. |
+|  [RelatedPrompt](./x-types.relatedprompt.md) | Represents a related prompt. |
+|  [RelatedPromptsRequest](./x-types.relatedpromptsrequest.md) | Request for Related Prompts endpoint. |
+|  [RelatedPromptsResponse](./x-types.relatedpromptsresponse.md) | Response for the related prompts endpoint. |
 |  [RelatedTag](./x-types.relatedtag.md) | A related tag is just a term that refines the current query. |
 |  [RelatedTagsRequest](./x-types.relatedtagsrequest.md) | Request for Related Tags endpoint. |
 |  [RelatedTagsResponse](./x-types.relatedtagsresponse.md) | Response for the related tags endpoint. |
@@ -85,6 +88,7 @@ Entry point to export search-type models and testing schemas in a unified api-ex
 |  [SimpleFacet](./x-types.simplefacet.md) | Simple facet is a trait for filtering results. It extends from [Facet](./x-types.facet.md)<!-- -->, changes the modelName and uses [SimpleFilter](./x-types.simplefilter.md) as filters. |
 |  [SimpleFilter](./x-types.simplefilter.md) | A type of filter used in [SimpleFacet](./x-types.simplefacet.md) and extends from [Filter](./x-types.filter.md)<!-- -->. It can be selected or not. |
 |  [SortableRequest](./x-types.sortablerequest.md) | Interface for any Request with sorting. |
+|  [Stats](./x-types.stats.md) | <p>Statistics for the current search results.</p><p>Price - interval of the prices of the results.</p> |
 |  [Suggestion](./x-types.suggestion.md) | A suggestion represents a query that has been proposed to the user, due of being popular, matching with the current search query... |
 |  [Taggable](./x-types.taggable.md) | A taggable entity. |
 |  [Tagging](./x-types.tagging.md) | The tagging user actions. |

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

@@ -0,0 +1,23 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [RelatedPrompt](./x-types.relatedprompt.md)
+
+## RelatedPrompt interface
+
+Represents a related prompt.
+
+**Signature:**
+
+```typescript
+export interface RelatedPrompt extends NamedModel<'RelatedPrompt'> 
+```
+**Extends:** [NamedModel](./x-types.namedmodel.md)<!-- -->&lt;'RelatedPrompt'&gt;
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [nextQueries](./x-types.relatedprompt.nextqueries.md) |  | string\[\] | The next queries related to the prompt. |
+|  [suggestionText](./x-types.relatedprompt.suggestiontext.md) |  | string | The prompt. |
+|  [type](./x-types.relatedprompt.type.md) |  | string | The type of the prompt. |
+

package/docs/API-reference/api/x-types.relatedprompt.nextqueries.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; [RelatedPrompt](./x-types.relatedprompt.md) &gt; [nextQueries](./x-types.relatedprompt.nextqueries.md)
+
+## RelatedPrompt.nextQueries property
+
+The next queries related to the prompt.
+
+**Signature:**
+
+```typescript
+nextQueries: string[];
+```

package/docs/API-reference/api/x-types.relatedprompt.suggestiontext.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; [RelatedPrompt](./x-types.relatedprompt.md) &gt; [suggestionText](./x-types.relatedprompt.suggestiontext.md)
+
+## RelatedPrompt.suggestionText property
+
+The prompt.
+
+**Signature:**
+
+```typescript
+suggestionText: string;
+```

package/docs/API-reference/api/x-types.relatedprompt.type.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; [RelatedPrompt](./x-types.relatedprompt.md) &gt; [type](./x-types.relatedprompt.type.md)
+
+## RelatedPrompt.type property
+
+The type of the prompt.
+
+**Signature:**
+
+```typescript
+type: string;
+```

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

@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [RelatedPromptsRequest](./x-types.relatedpromptsrequest.md)
+
+## RelatedPromptsRequest interface
+
+Request for Related Prompts endpoint.
+
+**Signature:**
+
+```typescript
+export interface RelatedPromptsRequest extends QueryableRequest, ExtraParamsRequest 
+```
+**Extends:** [QueryableRequest](./x-types.queryablerequest.md)<!-- -->, [ExtraParamsRequest](./x-types.extraparamsrequest.md)
+

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

@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [RelatedPromptsResponse](./x-types.relatedpromptsresponse.md)
+
+## RelatedPromptsResponse interface
+
+Response for the related prompts endpoint.
+
+**Signature:**
+
+```typescript
+export interface RelatedPromptsResponse 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [relatedPrompts](./x-types.relatedpromptsresponse.relatedprompts.md) |  | [RelatedPrompt](./x-types.relatedprompt.md)<!-- -->\[\] |  |
+

package/docs/API-reference/api/x-types.relatedpromptsresponse.relatedprompts.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [RelatedPromptsResponse](./x-types.relatedpromptsresponse.md) &gt; [relatedPrompts](./x-types.relatedpromptsresponse.relatedprompts.md)
+
+## RelatedPromptsResponse.relatedPrompts property
+
+**Signature:**
+
+```typescript
+relatedPrompts: RelatedPrompt[];
+```

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

@@ -25,5 +25,6 @@ export interface SearchResponse
 |  [redirections?](./x-types.searchresponse.redirections.md) |  | [Redirection](./x-types.redirection.md)<!-- -->\[\] | _(Optional)_ |
 |  [results](./x-types.searchresponse.results.md) |  | [Result](./x-types.result.md)<!-- -->\[\] |  |
 |  [spellcheck?](./x-types.searchresponse.spellcheck.md) |  | string | _(Optional)_ |
+|  [stats?](./x-types.searchresponse.stats.md) |  | [Stats](./x-types.stats.md) | _(Optional)_ |
 |  [totalResults](./x-types.searchresponse.totalresults.md) |  | number |  |
 

package/docs/API-reference/api/x-types.searchresponse.stats.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [SearchResponse](./x-types.searchresponse.md) &gt; [stats](./x-types.searchresponse.stats.md)
+
+## SearchResponse.stats property
+
+**Signature:**
+
+```typescript
+stats?: Stats;
+```

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

@@ -0,0 +1,22 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [Stats](./x-types.stats.md)
+
+## Stats interface
+
+Statistics for the current search results.
+
+Price - interval of the prices of the results.
+
+**Signature:**
+
+```typescript
+export interface Stats 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [price](./x-types.stats.price.md) |  | { min: number \| undefined; max: number \| undefined; } |  |
+

package/docs/API-reference/api/x-types.stats.price.md

@@ -0,0 +1,14 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [Stats](./x-types.stats.md) &gt; [price](./x-types.stats.price.md)
+
+## Stats.price property
+
+**Signature:**
+
+```typescript
+price: {
+        min: number | undefined;
+        max: number | undefined;
+    };
+```

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

@@ -20,6 +20,7 @@ export interface XComponentsAdapter
 |  [popularSearches](./x-types.xcomponentsadapter.popularsearches.md) |  | EndpointAdapter&lt;[PopularSearchesRequest](./x-types.popularsearchesrequest.md)<!-- -->, [PopularSearchesResponse](./x-types.popularsearchesresponse.md)<!-- -->&gt; |  |
 |  [querySuggestions](./x-types.xcomponentsadapter.querysuggestions.md) |  | EndpointAdapter&lt;[QuerySuggestionsRequest](./x-types.querysuggestionsrequest.md)<!-- -->, [QuerySuggestionsResponse](./x-types.querysuggestionsresponse.md)<!-- -->&gt; |  |
 |  [recommendations](./x-types.xcomponentsadapter.recommendations.md) |  | EndpointAdapter&lt;[RecommendationsRequest](./x-types.recommendationsrequest.md)<!-- -->, [RecommendationsResponse](./x-types.recommendationsresponse.md)<!-- -->&gt; |  |
+|  [relatedPrompts](./x-types.xcomponentsadapter.relatedprompts.md) |  | EndpointAdapter&lt;[RelatedPromptsRequest](./x-types.relatedpromptsrequest.md)<!-- -->, [RelatedPromptsResponse](./x-types.relatedpromptsresponse.md)<!-- -->&gt; |  |
 |  [relatedTags](./x-types.xcomponentsadapter.relatedtags.md) |  | EndpointAdapter&lt;[RelatedTagsRequest](./x-types.relatedtagsrequest.md)<!-- -->, [RelatedTagsResponse](./x-types.relatedtagsresponse.md)<!-- -->&gt; |  |
 |  [search](./x-types.xcomponentsadapter.search.md) |  | EndpointAdapter&lt;[SearchRequest](./x-types.searchrequest.md)<!-- -->, [SearchResponse](./x-types.searchresponse.md)<!-- -->&gt; |  |
 |  [semanticQueries](./x-types.xcomponentsadapter.semanticqueries.md) |  | EndpointAdapter&lt;[SemanticQueriesRequest](./x-types.semanticqueriesrequest.md)<!-- -->, [SemanticQueriesResponse](./x-types.semanticqueriesresponse.md)<!-- -->&gt; |  |

package/docs/API-reference/api/x-types.xcomponentsadapter.relatedprompts.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [XComponentsAdapter](./x-types.xcomponentsadapter.md) &gt; [relatedPrompts](./x-types.xcomponentsadapter.relatedprompts.md)
+
+## XComponentsAdapter.relatedPrompts property
+
+**Signature:**
+
+```typescript
+relatedPrompts: EndpointAdapter<RelatedPromptsRequest, RelatedPromptsResponse>;
+```

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

@@ -13,8 +13,8 @@ Component to be reused that renders an `<img>`.
 | Name                              | Description                                                                                                   | Type                       | Default                        |
 | --------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------------------ |
 | <code>result</code>               | (Required) The @empathyco/x-types#Result information.                                                         | <code>Result</code>        | <code></code>                  |
-| <code>loadAnimation</code>        | Animation to use when switching between the placeholder, the loaded image, or the failed<br />image fallback. | <code>animationProp</code> | <code>() => NoAnimation</code> |
-| <code>hoverAnimation</code>       | Animation to use when switching between the loaded image and the hover image.                                 | <code>animationProp</code> | <code></code>                  |
+| <code>loadAnimation</code>        | Animation to use when switching between the placeholder, the loaded image, or the failed<br />image fallback. | <code>AnimationProp</code> | <code>() => NoAnimation</code> |
+| <code>hoverAnimation</code>       | Animation to use when switching between the loaded image and the hover image.                                 | <code>AnimationProp</code> | <code></code>                  |
 | <code>showNextImageOnHover</code> | Indicates if the next valid image should be displayed on hover.                                               | <code>boolean</code>       | <code>false</code>             |
 
 ## Slots

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

@@ -0,0 +1,189 @@
+---
+
+title: BaseSlider
+
+---
+
+# BaseSlider
+
+This component implements a range slider and prints the selected values. It receives a threshold
+prop to set the limits and uses v-model to get and set the selected values.
+
+It makes use of the nouslider library @see https://refreshless.com/nouislider/ for the slider
+implementation.
+
+## Props
+
+| Name                      | Description                                                 | Type                                      | Default                                                       |
+| ------------------------- | ----------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------- |
+| <code>threshold</code>    | The threshold prop sets the limits for the slider.          | <code>{ min: number; max: number }</code> | <code>() => ({ min: 0, max: Number.MAX_SAFE_INTEGER })</code> |
+| <code>modelValue</code>   | The modelValue prop sets the initial values for the slider. | <code>{ min: number; max: number }</code> | <code></code>                                                 |
+| <code>contentClass</code> | Class to be able to customize slider styles.                | <code>string</code>                       | <code>''</code>                                               |
+
+## Events
+
+| Event name        | Properties | Description |
+| ----------------- | ---------- | ----------- |
+| update:modelValue |            |
+
+## Slots
+
+| Name                 | Description                                                                       | Bindings<br />(name - type - description)                                                            |
+| -------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| <code>default</code> | Default selected range rendering. This slot will be used by default for rendering | **rangeSelected** <code>number[]</code> - The selected range values. Min position 0, Max position 1. |
+
+## Examples
+
+This component renders a slider and the selected values. The component needs the threshold for the
+slider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),
+which are passed using the `threshold` prop and the selected range, which is passed in using the
+v-model.
+
+### Default usage
+
+It is required to send the value prop which holds the selected values.
+
+```vue live
+<template>
+  <BaseSlider v-model="selectedRange" />
+</template>
+
+<script>
+  import { BaseSlider } from '@empathyco/x-components';
+
+  export default {
+    name: 'BaseSliderDemo',
+    components: {
+      BaseSlider
+    },
+    setup() {
+      const selectedRange = ref({ min: 0, max: 1000 });
+
+      return {
+        selectedRange
+      };
+    }
+  };
+</script>
+```
+
+#### With threshold
+
+```vue live
+<template>
+  <BaseSlider v-model="selectedRange" :threshold="threshold" />
+</template>
+
+<script>
+  import { BaseSlider } from '@empathyco/x-components';
+
+  export default {
+    name: 'BaseSliderDemo',
+    components: {
+      BaseSliderDemo
+    },
+    setup() {
+      const threshold = ref({ min: 0, max: 1000 });
+      const selectedRange = ref(threshold.value);
+
+      return {
+        selectedRange,
+        threshold
+      };
+    }
+  };
+</script>
+```
+
+### Customized usage
+
+#### Overriding the slots
+
+It is possible to override the default slot to customize the layout for the selected values.
+
+```vue live
+<template>
+  <BaseSlider v-model="selectedRange" :threshold="threshold" v-slot="{ rangeSelected }">
+    <p class="x-base-slider__selected-min">
+      <span>min value</span>
+      <span>
+        {{ rangeSelected[0] }}
+      </span>
+    </p>
+    <p class="x-base-slider__selected-max">
+      <span>max value</span>
+      <span>
+        {{ rangeSelected[1] }}
+      </span>
+    </p>
+  </BaseSlider>
+</template>
+
+<script>
+  import { BaseSlider } from '@empathyco/x-components';
+
+  export default {
+    name: 'BaseSliderDemo',
+    components: {
+      BaseSliderDemo
+    },
+    setup() {
+      const threshold = ref({ min: 0, max: 1000 });
+      const selectedRange = ref(threshold.value);
+
+      return {
+        selectedRange,
+        threshold
+      };
+    }
+  };
+</script>
+```
+
+It is also possible to add inputs to complement the slider and allow to change the selected values
+manually.
+
+```vue live
+<template>
+  <BaseSlider v-model="selectedRange" :threshold="threshold">
+    <input
+      @change="selectedRange.min = $event.target?.valueAsNumber || 0"
+      class="x-input"
+      name="min"
+      type="number"
+      :value="selectedRange.min"
+      :aria-label="'min'"
+    />
+
+    <input
+      @change="selectedRange.max = $event.target?.valueAsNumber || 1000000"
+      style="display: block"
+      class="x-input"
+      name="max"
+      type="number"
+      :value="selectedRange.max"
+      :aria-label="'max'"
+    />
+  </BaseSlider>
+</template>
+
+<script>
+  import { BaseSlider } from '@empathyco/x-components';
+
+  export default {
+    name: 'BaseSliderDemo',
+    components: {
+      BaseSliderDemo
+    },
+    setup() {
+      const threshold = ref({ min: 0, max: 1000 });
+      const selectedRange = ref(threshold.value);
+
+      return {
+        selectedRange,
+        threshold
+      };
+    }
+  };
+</script>
+```

package/docs/API-reference/components/common/x-components.items-list.md

@@ -13,7 +13,7 @@ It renders a list of ListItem providing a slot for each `slotName` which depends
 
 | Name                   | Description                                                | Type                       | Default           |
 | ---------------------- | ---------------------------------------------------------- | -------------------------- | ----------------- |
-| <code>animation</code> | Animation component that will be used to animate the list. | <code>animationProp</code> | <code>'ul'</code> |
+| <code>animation</code> | Animation component that will be used to animate the list. | <code>AnimationProp</code> | <code>'ul'</code> |
 | <code>items</code>     | List of items.                                             | <code>ListItem[]</code>    | <code></code>     |
 | <code>itemClass</code> | Item's classes.                                            | <code>string</code>        | <code></code>     |
 

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

@@ -19,7 +19,7 @@ differently based on their purpose and this can be achieved using the exposed sl
 | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------------- |
 | <code>facetsIds</code>        | Array of facets ids used to get the selected filters for those facets.                                                                                                                                                                                                              | <code>Array<Facet['id']></code> | <code></code>     |
 | <code>alwaysVisible</code>    | Flag to render the component even if there are no filters selected.                                                                                                                                                                                                                 | <code>boolean</code>            | <code></code>     |
-| <code>animation</code>        | Animation component that will be used to animate the facets.                                                                                                                                                                                                                        | <code>animationProp</code>      | <code>'ul'</code> |
+| <code>animation</code>        | Animation component that will be used to animate the facets.                                                                                                                                                                                                                        | <code>AnimationProp</code>      | <code>'ul'</code> |
 | <code>renderableFacets</code> | Discriminates the facets rendered by this component. It expects a string containing facets<br />ids, comma separated. This property will include or exclude facets based on its value.<br />The default value is an empty string and the component will render all existing facets. | <code>string</code>             | <code></code>     |
 
 ## Slots

package/docs/API-reference/components/facets/x-components.lists/selected-filters-list.md

@@ -20,7 +20,7 @@ The property "alwaysVisible" handles if the component is rendered if no filters
 | -------------------------- | --------------------------------------------------------------------------- | ------------------------------- | ----------------- |
 | <code>facetsIds</code>     | Array of facets ids used to get the selected filters for those facets.      | <code>Array<Facet['id']></code> | <code></code>     |
 | <code>alwaysVisible</code> | Flag to render the component even if there are no filters selected.         | <code>boolean</code>            | <code></code>     |
-| <code>animation</code>     | Animation component that will be used to animate the selected filters list. | <code>animationProp</code>      | <code>'ul'</code> |
+| <code>animation</code>     | Animation component that will be used to animate the selected filters list. | <code>AnimationProp</code>      | <code>'ul'</code> |
 
 ## Slots
 

package/docs/API-reference/components/related-prompts/x-components.related-prompt.md

@@ -0,0 +1,26 @@
+---
+
+title: RelatedPrompt
+
+---
+
+# RelatedPrompt
+
+This component shows a suggested related prompt.
+
+It provides a slot to customize the related prompt button information.
+
+## Props
+
+| Name                         | Description | Type                       | Default            |
+| ---------------------------- | ----------- | -------------------------- | ------------------ |
+| <code>relatedPrompt</code>   |             | <code>RelatedPrompt</code> | <code></code>      |
+| <code>isPromptVisible</code> |             | <code>boolean</code>       | <code>false</code> |
+| <code>isSelected</code>      |             | <code>boolean</code>       | <code>false</code> |
+| <code>index</code>           |             | <code>number</code>        | <code></code>      |
+
+## Slots
+
+| Name                                    | Description | Bindings<br />(name - type - description) |
+| --------------------------------------- | ----------- | ----------------------------------------- |
+| <code>related-prompt-button-info</code> |             | None                                      |