@empathyco/x-components 6.0.0-alpha.5 → 6.0.0-alpha.51

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

@@ -0,0 +1,17 @@
+<!-- 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; [tagging](./x-types.relatedprompt.tagging.md)
+
+## RelatedPrompt.tagging property
+
+Related prompt tagging.
+
+**Signature:**
+
+```typescript
+tagging?: {
+        toolingDisplayTagging?: TaggingRequest;
+        toolingDisplayClickTagging?: TaggingRequest;
+        nextQueriesTagging?: RelatedPromptNextQuery[];
+    };
+```

package/docs/API-reference/api/x-types.relatedprompt.toolingdisplaytagging.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; [toolingDisplayTagging](./x-types.relatedprompt.toolingdisplaytagging.md)
+
+## RelatedPrompt.toolingDisplayTagging property
+
+The tooling display tagging of the prompt.
+
+**Signature:**
+
+```typescript
+toolingDisplayTagging?: TaggingRequest;
+```

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.relatedpromptnextquery.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; [RelatedPromptNextQuery](./x-types.relatedpromptnextquery.md)
+
+## RelatedPromptNextQuery interface
+
+Represents a related prompt nextQuery.
+
+**Signature:**
+
+```typescript
+export interface RelatedPromptNextQuery 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [query](./x-types.relatedpromptnextquery.query.md) |  | string | The query of the next query. |
+|  [toolingDisplayAdd2CartTagging](./x-types.relatedpromptnextquery.toolingdisplayadd2carttagging.md) |  | [TaggingRequest](./x-types.taggingrequest.md) | The tooling display add2cart tagging of the next query. |
+|  [toolingDisplayClickTagging](./x-types.relatedpromptnextquery.toolingdisplayclicktagging.md) |  | [TaggingRequest](./x-types.taggingrequest.md) | The tooling display click tagging of the next query. |
+|  [toolingDisplayTagging](./x-types.relatedpromptnextquery.toolingdisplaytagging.md) |  | [TaggingRequest](./x-types.taggingrequest.md) | The tooling display tagging of the next query. |
+

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

package/docs/API-reference/api/x-types.relatedpromptnextquery.toolingdisplayadd2carttagging.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; [RelatedPromptNextQuery](./x-types.relatedpromptnextquery.md) &gt; [toolingDisplayAdd2CartTagging](./x-types.relatedpromptnextquery.toolingdisplayadd2carttagging.md)
+
+## RelatedPromptNextQuery.toolingDisplayAdd2CartTagging property
+
+The tooling display add2cart tagging of the next query.
+
+**Signature:**
+
+```typescript
+toolingDisplayAdd2CartTagging: TaggingRequest;
+```

package/docs/API-reference/api/x-types.relatedpromptnextquery.toolingdisplayclicktagging.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; [RelatedPromptNextQuery](./x-types.relatedpromptnextquery.md) &gt; [toolingDisplayClickTagging](./x-types.relatedpromptnextquery.toolingdisplayclicktagging.md)
+
+## RelatedPromptNextQuery.toolingDisplayClickTagging property
+
+The tooling display click tagging of the next query.
+
+**Signature:**
+
+```typescript
+toolingDisplayClickTagging: TaggingRequest;
+```

package/docs/API-reference/api/x-types.relatedpromptnextquery.toolingdisplaytagging.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; [RelatedPromptNextQuery](./x-types.relatedpromptnextquery.md) &gt; [toolingDisplayTagging](./x-types.relatedpromptnextquery.toolingdisplaytagging.md)
+
+## RelatedPromptNextQuery.toolingDisplayTagging property
+
+The tooling display tagging of the next query.
+
+**Signature:**
+
+```typescript
+toolingDisplayTagging: TaggingRequest;
+```

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.display-click-provider.md

@@ -0,0 +1,17 @@
+---
+
+title: DisplayClickProvider
+
+---
+
+# DisplayClickProvider
+
+## Props
+
+| Name                                | Description | Type                        | Default                |
+| ----------------------------------- | ----------- | --------------------------- | ---------------------- |
+| <code>resultFeature</code>          |             | <code>ResultFeature</code>  | <code></code>          |
+| <code>ignoreResultClickEvent</code> |             | <code>boolean</code>        | <code>false</code>     |
+| <code>toolingDisplayTagging</code>  |             | <code>TaggingRequest</code> | <code>undefined</code> |
+| <code>toolingAdd2CartTagging</code> |             | <code>TaggingRequest</code> | <code>undefined</code> |
+| <code>queryTagging</code>           |             | <code>TaggingRequest</code> | <code>undefined</code> |

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/common/x-components.page-selector.md

@@ -0,0 +1,136 @@
+---
+
+title: PageSelector
+
+---
+
+# PageSelector
+
+Component that renders a pagination control with buttons for navigating between pages. It displays
+the current page, allows selecting other pages, and emits events when a page is selected.
+
+## Props
+
+| Name                       | Description                                                                 | Type                                                                                                     | Default                    |
+| -------------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------- |
+| <code>buttonClasses</code> | CSS classes to customize the prev/next buttons.                             | <code>(string \| Dictionary<boolean>)[]</code>                                                           | <code>() => []</code>      |
+| <code>currentPage</code>   | The current page number.                                                    | <code>number</code>                                                                                      | <code></code>              |
+| <code>hiddenPage</code>    | The string content of the hidden pages.                                     | <code>string</code>                                                                                      | <code>'...'</code>         |
+| <code>itemClasses</code>   | CSS classes to customize the page items.                                    | <code>(isSelected: boolean) => string \| Dictionary<boolean> \| (string \| Dictionary<boolean>)[]</code> | <code>() => []</code>      |
+| <code>range</code>         | The number of pages to show before and after the current page.              | <code>number</code>                                                                                      | <code>2</code>             |
+| <code>scrollTarget</code>  | The class of the scroll container to scroll to top when a page is selected. | <code>string</code>                                                                                      | <code>'main-scroll'</code> |
+| <code>totalPages</code>    | The total number of pages.                                                  | <code>number</code>                                                                                      | <code></code>              |
+
+## Slots
+
+| Name                              | Description | Bindings<br />(name - type - description) |
+| --------------------------------- | ----------- | ----------------------------------------- |
+| <code>previous-page-button</code> |             | None                                      |
+| <code>page-button</code>          |             | <br />                                    |
+| <code>next-page-button</code>     |             | None                                      |
+
+## Events
+
+This component emits the "UserSelectedAPage" and the UserClickedScrollToTop events by default.
+
+## See it in action
+
+Basic example of how the component is rendered.
+
+```vue live
+<template>
+  <PageSelector :current-page="page" :total-pages="totalPages" />
+</template>
+
+<script>
+  import { PageSelector } from '@empathyco/x-components';
+
+  export default {
+    name: 'PageSelectorDemo',
+    components: {
+      PageSelector
+    },
+    data() {
+      return {
+        page: 0,
+        totalPages: 10
+      };
+    }
+  };
+</script>
+```
+
+### Customize the slots
+
+This component allows to customise its content using slots.
+
+```vue live
+<template>
+  <PageSelector
+    :total-pages="totalPages"
+    :currentPage="page"
+    :item-classes="
+      (isSelected: boolean) =>
+        isSelected
+          ? 'x-button-lead x-text-neutral-10'
+          : 'x-text-neutral-90 x-button-outlined'
+    "
+    :buttonClasses="['x-rounded-md']"
+  >
+    <template #previous-page-button>
+      <span>Back</span>
+    </template>
+    <template #page-button="{ page, isSelected }">
+      <h2 :class="{ 'x-text1': !isSelected }">
+        {{ page }}
+      </h2>
+    </template>
+    <template #next-page-button>
+      <span>Forward</span>
+    </template>
+  </PageSelector>
+</template>
+
+<script>
+  import { PageSelector } from '@empathyco/x-components';
+
+  export default {
+    name: 'PageSelectorDemo',
+    components: {
+      PageSelector
+    },
+    data() {
+      return {
+        page: 2,
+        totalPages: 10
+      };
+    }
+  };
+</script>
+```
+
+### Customize the number of pages to show before and after the current page by changing the range default value.
+
+```vue live
+<template>
+  <PageSelector :current-page="page" :total-pages="totalPages" :range="range" />
+</template>
+
+<script>
+  import { PageSelector } from '@empathyco/x-components';
+
+  export default {
+    name: 'PageSelectorDemo',
+    components: {
+      PageSelector
+    },
+    data() {
+      return {
+        page: 6,
+        totalPages: 100,
+        range: 4
+      };
+    }
+  };
+</script>
+```

package/docs/API-reference/components/common/x-components.sliding-panel.md

@@ -14,13 +14,13 @@ Additionally, this component exposes the following props to modify the classes o
 
 ## Props
 
-| Name                              | Description                                                                                                         | Type                 | Default           |
-| --------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------------- |
-| <code>scrollFactor</code>         | Scroll factor that will dictate how much the scroll moves when pressing a navigation button.                        | <code>number</code>  | <code>0.7</code>  |
-| <code>showButtons</code>          | Would make the navigation buttons visible when they're needed or always hide them.                                  | <code>boolean</code> | <code>true</code> |
-| <code>resetOnContentChange</code> | When true, whenever the DOM content in the sliding panel slot changes, it will reset<br />the scroll position to 0. | <code>boolean</code> | <code>true</code> |
-| <code>buttonClass</code>          |                                                                                                                     | <code>string</code>  | <code></code>     |
-| <code>scrollContainerClass</code> |                                                                                                                     | <code>string</code>  | <code></code>     |
+| Name                              | Description                                                                                                         | Type                       | Default           |
+| --------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------- |
+| <code>scrollFactor</code>         | Scroll factor that will dictate how much the scroll moves when pressing a navigation button.                        | <code>number</code>        | <code>0.7</code>  |
+| <code>showButtons</code>          | Would make the navigation buttons visible when they're needed or always hide them.                                  | <code>boolean</code>       | <code>true</code> |
+| <code>resetOnContentChange</code> | When true, whenever the DOM content in the sliding panel slot changes, it will reset<br />the scroll position to 0. | <code>boolean</code>       | <code>true</code> |
+| <code>buttonClass</code>          |                                                                                                                     | <code>VueCSSClasses</code> | <code></code>     |
+| <code>scrollContainerClass</code> |                                                                                                                     | <code>VueCSSClasses</code> | <code></code>     |
 
 ## Slots