@empathyco/x-components 3.0.0-alpha.32 → 3.0.0-alpha.36

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

@@ -1,11 +1,12 @@
 ---
-id: x-components.sorted-filters
-title: Sorted Filters
-sidebar_label: Sorted Filters
+
+title: SortedFilters
+
 ---
-# sorted-filters
 
-> Component that sorts a list of filters and returns them using the default scoped slot.
+# SortedFilters
+
+Component that sorts a list of filters and returns them using the default scoped slot.
 
 ## Props
 
@@ -14,14 +15,12 @@ sidebar_label: Sorted Filters
 | <code>filters</code>  | The list of filters to be rendered as slots.                                                                                                                                                 | <code>Array</code>               | <code></code> |
 | <code>parentId</code> | This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary<br />to make the `renderedFilters` to return only the filters of each level of the hierarchy. | <code>TSIndexedAccessType</code> | <code></code> |
 
----
-
-# Example
+## Example
 
 The sorted filters component takes a list of filters and returns this new filters list sorted by the
 `selected` filter property.
 
-## Remarks
+### Remarks
 
 - The component can receive the filters list by property or using the XInjection feature.
 - It also provides the resultant list bound in the default slot or with the XProvide feature.
@@ -30,9 +29,9 @@ Both XInjection and XProvide features are from the extended FiltersInjectionMixi
 use XInjection and XProvide together, e.g. you can use pass the filters using a prop and then
 returns the result with XProvide.
 
-## Basic usage
+### Basic usage
 
-### Using props and binding the result
+#### Using props and binding the result
 
 ```vue
 <template>
@@ -58,7 +57,7 @@ export default {
 </script>
 ```
 
-### Using XInject and XProvide
+#### Using XInject and XProvide
 
 ```vue
 <Facets v-slot="{ facet }">

package/docs/API-reference/components/history-queries/x-components.clear-history-queries.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.clear-history-queries
-title: Clear History Queries
-sidebar_label: Clear History Queries
+
+title: ClearHistoryQueries
+
 ---
-# clear-history-queries
 
-> A button that when is pressed, emits the
-> {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user
-> intention to clear the whole history of queries.
+# ClearHistoryQueries
+
+A button that when is pressed, emits the
+{@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user
+intention to clear the whole history of queries.
 
 ## Slots
 
@@ -15,11 +16,9 @@ sidebar_label: Clear History Queries
 | -------------------- | --------------------------------------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) Button content with a message, an icon or both | None                                      |
 
----
-
-# Examples
+## Examples
 
-## Basic example
+### Basic example
 
 The component exposes a single default slot, where you can add icons or text.
 

package/docs/API-reference/components/history-queries/x-components.history-queries.md

@@ -1,11 +1,12 @@
 ---
-id: x-components.x-components.history-queries
-title: History Queries
-sidebar_label: History Queries
+
+title: HistoryQueries
+
 ---
-# history-queries
 
-> This component renders a list of suggestions coming from the user queries history.
+# HistoryQueries
+
+This component renders a list of suggestions coming from the user queries history.
 
 Allows the user to select one of them, emitting the needed events.
 A history query is just another type of suggestion that contains a query that the user has
@@ -26,13 +27,11 @@ made in the past.
 | <code>suggestion-content</code>        | History Query content               | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index<br />**queryHTML** <code>string</code> - Suggestion's query with the matching part inside a span tag |
 | <code>suggestion-remove-content</code> | History Query remove button content | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index                                                                                                      |
 
----
-
-# Examples
+## Examples
 
 This component renders a list of suggestions coming from the user queries history
 
-## Default usage
+### Default usage
 
 No props are required for the usage of this component.
 
@@ -47,7 +46,7 @@ The component has two optional props. `animation` to render the component with a
 <HistoryQueries :animation="FadeAndSlide" :maxItemsToRender="10" />
 ```
 
-## Overriding Suggestion component
+### Overriding Suggestion component
 
 The default `HistoryQuery` component that is used in every suggestion can be replaced. To do so, the
 `suggestion` slot is available, containing the history query data under the `suggestion` property.
@@ -63,7 +62,7 @@ to be implemented emitting the needed events.
 </HistoryQueries>
 ```
 
-## Overriding suggestion-content and suggestion-remove-content slot
+### Overriding suggestion-content and suggestion-remove-content slot
 
 The content of the `HistoryQuery` component can be overridden. For replacing the default suggestion
 content, the `suggestion-content` slot is available, containing the history query suggestion (in the

package/docs/API-reference/components/history-queries/x-components.history-query.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.history-query
-title: History Query
-sidebar_label: History Query
+
+title: HistoryQuery
+
 ---
-# history-query
 
-> This component renders a history query suggestion combining two buttons: one for selecting this
-> suggestion as the search query, and another one to remove this query suggestion from the
-> history queries.
+# HistoryQuery
+
+This component renders a history query suggestion combining two buttons: one for selecting this
+suggestion as the search query, and another one to remove this query suggestion from the
+history queries.
 
 ## Props
 
@@ -22,11 +23,9 @@ sidebar_label: History Query
 | <code>default</code>               | History Query content               | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**queryHTML** <code>string</code> - Suggestion's query with the matching part inside a span tag |
 | <code>remove-button-content</code> | History Query remove button content | **suggestion** <code>Suggestion</code> - History Query suggestion data                                                                                                      |
 
----
-
-# Examples
+## Examples
 
-## Basic usage
+### Basic usage
 
 This component only requires a prop called `suggestion`
 
@@ -34,7 +33,7 @@ This component only requires a prop called `suggestion`
 <HistoryQuery :suggestion="historyQuery" />
 ```
 
-## Customizing slots content
+### Customizing slots content
 
 Suggestion and remove buttons contents can be customized.
 

package/docs/API-reference/components/history-queries/x-components.remove-history-query.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.remove-history-query
-title: Remove History Query
-sidebar_label: Remove History Query
+
+title: RemoveHistoryQuery
+
 ---
-# remove-history-query
 
-> Button that when it is pressed emits the
-> {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery} event, expressing the user
-> intention to remove a query in the history.
+# RemoveHistoryQuery
+
+Button that when it is pressed emits the
+{@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery} event, expressing the user
+intention to remove a query in the history.
 
 ## Props
 
@@ -21,11 +22,9 @@ sidebar_label: Remove History Query
 | -------------------- | ------------------------------------------------------ | ----------------------------------------- |
 | <code>default</code> | (Required) Button content with a text, an icon or both | None                                      |
 
----
-
-# Examples
+## Examples
 
-## Basic Example
+### Basic Example
 
 You can customize the content that this component renders. To do so, simply use the default slot.
 

package/docs/API-reference/components/identifier-results/x-components.identifier-result.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.identifier-result
-title: Identifier Result
-sidebar_label: Identifier Result
+
+title: IdentifierResult
+
 ---
-# identifier-result
 
-> This component renders an identifier result value and highlights its matching part with the
-> query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.
+# IdentifierResult
+
+This component renders an identifier result value and highlights its matching part with the
+query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.
 
 ## Props
 
@@ -14,14 +15,12 @@ sidebar_label: Identifier Result
 | ------------------- | ----------------------------------------------------------------------- | ------------------- | ------------- |
 | <code>result</code> | (Required) The {@link @empathyco/x-types#Result \| result} information. | <code>Result</code> | <code></code> |
 
----
-
-# Examples
+## Examples
 
 This component renders an identifier result value and highlights its matching part with the query
 from the state. Receives as prop the result data
 
-## Basic usage:
+### Basic usage:
 
 ```vue
 <IdentifierResult v-bind="{ result }" />

package/docs/API-reference/components/identifier-results/x-components.identifier-results.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.identifier-results
-title: Identifier Results
-sidebar_label: Identifier Results
+
+title: IdentifierResults
+
 ---
-# identifier-results
 
-> Paints the list of identifier results stored in the state. Each identifier result should be
-> represented by a {@link IdentifierResult | identifier result component} besides any
-> other component.
+# IdentifierResults
+
+Paints the list of identifier results stored in the state. Each identifier result should be
+represented by a {@link IdentifierResult | identifier result component} besides any
+other component.
 
 ## Props
 
@@ -21,11 +22,9 @@ sidebar_label: Identifier Results
 | -------------------- | ------------------------------------------ | ----------------------------------------------------------------- |
 | <code>default</code> | (Required) Identifier results item content | **identifierResult** <code>Result</code> - Identifier Result data |
 
----
-
-# Examples
+## Examples
 
-## Adding a IdentifierResult component within a BaseResultLink
+### Adding a IdentifierResult component within a BaseResultLink
 
 A IdentifierResult **must** be used inside the IdentifierResults component. In the example below the
 BaseResultLink is used as a wrapper and its default slot is filled with the IdentifierResult

package/docs/API-reference/components/next-queries/x-components.next-queries-list.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.next-queries-list
-title: Next Queries List
-sidebar_label: Next Queries List
+
+title: NextQueriesList
+
 ---
-# next-queries-list
 
-> Component that inserts groups of next queries in different positions of the injected search
-> items list, based on the provided configuration.
+# NextQueriesList
+
+Component that inserts groups of next queries in different positions of the injected search
+items list, based on the provided configuration.
 
 ## Props
 
@@ -24,8 +25,6 @@ sidebar_label: Next Queries List
 | -------------------- | ------------------------- | ----------------------------------------- |
 | <code>default</code> | Next queries list layout. | <br />                                    |
 
----
-
 ## Events
 
 This component emits no events.

package/docs/API-reference/components/next-queries/x-components.next-queries.md

@@ -1,15 +1,16 @@
 ---
-id: x-components.x-components.next-queries
-title: Next Queries
-sidebar_label: Next Queries
+
+title: NextQueries
+
 ---
-# next-queries
 
-> Simple next-queries component that renders a list of suggestions, allowing the user to
-> select one of them, and emitting the needed events.
-> A next query is a suggestion for a new search, related to your previous query. I.e. If
-> people normally search for `shirts`, and then `trousers`, `trousers` would be a next query
-> of `shirts`.
+# NextQueries
+
+Simple next-queries component that renders a list of suggestions, allowing the user to
+select one of them, and emitting the needed events.
+A next query is a suggestion for a new search, related to your previous query. I.e. If
+people normally search for `shirts`, and then `trousers`, `trousers` would be a next query
+of `shirts`.
 
 ## Props
 
@@ -25,11 +26,9 @@ sidebar_label: Next Queries
 | <code>suggestion</code>         | Next Query item    | **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />**index** <code>number</code> - Next Query suggestion index |
 | <code>suggestion-content</code> | Next Query content | **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />**index** <code>number</code> - Next Query suggestion index |
 
----
-
-# Examples
+## Examples
 
-## Basic example
+### Basic example
 
 You don't need to pass any props, or slots. Simply add the component, and when it has any next
 queries it will show them
@@ -45,7 +44,7 @@ The component has two optional props. `animation` to render the component with a
 <NextQueries :animation="FadeAndSlide" :maxItemsToRender="10" />
 ```
 
-## Overriding Next Queries' Content
+### Overriding Next Queries' Content
 
 You can use your custom implementation of the Next Query's content. In the example below, instead of
 using the default Next Query's content, an icon is added, as well as a span with the query of the
@@ -60,7 +59,7 @@ Next Query suggestion.
 </NextQueries>
 ```
 
-## Adding a custom next query component
+### Adding a custom next query component
 
 You can use your custom implementation of a next query component. To work correctly, it should use
 the `emitNextQuerySelected` function when the next query is selected. In the example below, instead

package/docs/API-reference/components/next-queries/x-components.next-query.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.next-query
-title: Next Query
-sidebar_label: Next Query
+
+title: NextQuery
+
 ---
-# next-query
 
-> Renders a next query item which receives the suggestion that will be rendered as a prop. It
-> exposes a default slot to change the next query content. If the slot is not overridden,
-> it will render the suggestion query by default.
+# NextQuery
+
+Renders a next query item which receives the suggestion that will be rendered as a prop. It
+exposes a default slot to change the next query content. If the slot is not overridden,
+it will render the suggestion query by default.
 
 ## Props
 
@@ -21,14 +22,12 @@ sidebar_label: Next Query
 | -------------------- | ------------------ | ------------------------------------------------------------------- |
 | <code>default</code> | Next Query content | **suggestion** <code>Suggestion</code> - Next Query suggestion data |
 
----
-
-# Examples
+## Examples
 
 This components expects just a suggestion as a prop to be rendered. It has a slot to override the
 content. By default, it renders the suggestion query of the next query.
 
-## Basic Usage
+### Basic Usage
 
 Using default slot:
 
@@ -36,7 +35,7 @@ Using default slot:
 <NextQuery :suggestion="suggestion" />
 ```
 
-## Overriding default slot.
+### Overriding default slot.
 
 The default slot allows you to replace the content of the suggestion button.
 

package/docs/API-reference/components/popular-searches/x-components.popular-search.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.popular-search
-title: Popular Search
-sidebar_label: Popular Search
+
+title: PopularSearch
+
 ---
-# popular-search
 
-> Renders a popular search item which receives the suggestion that will be rendered as a prop. It
-> exposes a default slot to change the popular search content. If the slot is not overridden,
-> it will render the suggestion query by default.
+# PopularSearch
+
+Renders a popular search item which receives the suggestion that will be rendered as a prop. It
+exposes a default slot to change the popular search content. If the slot is not overridden,
+it will render the suggestion query by default.
 
 ## Props
 
@@ -21,20 +22,18 @@ sidebar_label: Popular Search
 | -------------------- | ------------------------ | ----------------------------------------------------------------------- |
 | <code>default</code> | Popular Search's content | **suggestion** <code>Suggestion</code> - Popular Search suggestion data |
 
----
-
-# Examples
+## Examples
 
 This components expects just a suggestion as a prop to be rendered. It has a slot to override the
 content. By default, it renders the suggestion query of the popular search.
 
-## Basic Usage
+### Basic Usage
 
 ```vue
 <PopularSearch :suggestion="suggestion" />
 ```
 
-## Custom Usage
+### Custom Usage
 
 ```vue
 <PopularSearch :suggestion="suggestion">

package/docs/API-reference/components/popular-searches/x-components.popular-searches.md

@@ -1,14 +1,15 @@
 ---
-id: x-components.x-components.popular-searches
-title: Popular Searches
-sidebar_label: Popular Searches
+
+title: PopularSearches
+
 ---
-# popular-searches
 
-> Simple popular-searches component that renders a list of suggestions, allowing the user to
-> select one of them, and emitting the needed events.
-> A popular search is just a query that has been searched a lot in a certain period and may
-> optionally have associated a set of filters.
+# PopularSearches
+
+Simple popular-searches component that renders a list of suggestions, allowing the user to
+select one of them, and emitting the needed events.
+A popular search is just a query that has been searched a lot in a certain period and may
+optionally have associated a set of filters.
 
 ## Props
 
@@ -24,11 +25,9 @@ sidebar_label: Popular Searches
 | <code>suggestion</code>         | Popular Search item    | **suggestion** <code>Suggestion</code> - Popular Search suggestion data<br />**index** <code>number</code> - Popular Search suggestion index |
 | <code>suggestion-content</code> | Popular Search content | **suggestion** <code>Suggestion</code> - Popular Search suggestion data<br />**index** <code>number</code> - Popular Search suggestion index |
 
----
-
-# Examples
+## Examples
 
-## Default Usage
+### Default Usage
 
 You don't need to pass any props, or slots. Simply add the component, and when it has any popular
 searches it will show them.
@@ -44,7 +43,7 @@ The component has two optional props. `animation` to render the component with a
 <PopularSearches :animation="FadeAndSlide" :maxItemsToRender="10" />
 ```
 
-## Overriding Popular Search's Content
+### Overriding Popular Search's Content
 
 You can use your custom implementation of the Popular Search's content. In the example below,
 instead of using the default Popular Search's content, an icon is added, as well as a span with the
@@ -59,7 +58,7 @@ query of the Popular Search's suggestion.
 </PopularSearches>
 ```
 
-## Adding a Custom Popular Search Item
+### Adding a Custom Popular Search Item
 
 You can use your custom implementation for the whole Popular Search item. In the example below, we
 change the default implementation of the Popular Search in Popular Searches. A custom Popular Search

package/docs/API-reference/components/query-suggestions/x-components.query-suggestion.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.query-suggestion
-title: Query Suggestion
-sidebar_label: Query Suggestion
+
+title: QuerySuggestion
+
 ---
-# query-suggestion
 
-> This component renders a suggestion for a query. A query suggestion is a recommended query
-> based on previous search queries. It contains the query itself and a set of filters associated.
-> For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.
+# QuerySuggestion
+
+This component renders a suggestion for a query. A query suggestion is a recommended query
+based on previous search queries. It contains the query itself and a set of filters associated.
+For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.
 
 ## Props
 
@@ -21,8 +22,6 @@ sidebar_label: Query Suggestion
 | -------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | <code>default</code> | Custom content that replaces the `QuerySuggestion` default content | **suggestion** <code>Suggestion</code> - Query Suggestion data<br />**queryHTML** <code>string</code> - Suggestion’s query with the matching part wrapped in a HTML span tag |
 
----
-
 ## Events
 
 This component emits the following events:

package/docs/API-reference/components/query-suggestions/x-components.query-suggestions.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.query-suggestions
-title: Query Suggestions
-sidebar_label: Query Suggestions
+
+title: QuerySuggestions
+
 ---
-# query-suggestions
 
-> This component renders a list of possible search queries to select from as a query is entered
-> in the input field. By default, this is a list of
-> [`QuerySuggestion`](./x-components.query-suggestion.md) components.
+# QuerySuggestions
+
+This component renders a list of possible search queries to select from as a query is entered
+in the input field. By default, this is a list of
+[`QuerySuggestion`](./x-components.query-suggestion.md) components.
 
 ## Props
 
@@ -23,8 +24,6 @@ sidebar_label: Query Suggestions
 | <code>suggestion</code>         | Custom component that replaces the `QuerySuggestion` component     | **suggestion** <code>Suggestion</code> - Query Suggestion data<br />**index** <code>number</code> - Query Suggestion index                                                                                                               |
 | <code>suggestion-content</code> | Custom content that replaces the `QuerySuggestion` default content | **suggestion** <code>Suggestion</code> - Query Suggestion data<br />**index** <code>number</code> - Query Suggestion index<br />**queryHTML** <code>string</code> - Suggestion’s query with the matching part wrapped in a HTML span tag |
 
----
-
 ## See it in action
 
 <!-- prettier-ignore-start -->

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

@@ -1,16 +1,17 @@
 ---
-id: x-components.x-components.recommendations
+
 title: Recommendations
-sidebar_label: Recommendations
+
 ---
-# recommendations
 
-> It renders a list of recommendations from the
-> {@link RecommendationsState.recommendations | Recommendations} state by default.
-> The component provides the slot layout which wraps the whole component with the
-> recommendations bounded. It also provides the default slot to customize the item, which is
-> within the layout slot, with the recommendation bounded. Each recommendation should be
-> represented by a {@link BaseResultLink | result link component} besides any other component.
+# Recommendations
+
+It renders a list of recommendations from the
+{@link RecommendationsState.recommendations | Recommendations} state by default.
+The component provides the slot layout which wraps the whole component with the
+recommendations bounded. It also provides the default slot to customize the item, which is
+within the layout slot, with the recommendation bounded. Each recommendation should be
+represented by a {@link BaseResultLink | result link component} besides any other component.
 
 ## Props
 
@@ -26,18 +27,16 @@ sidebar_label: Recommendations
 | <code>layout</code>  | Customized Recommendations layout. | **animation** <code>Vue</code> - Animation to animate the elements.<br />**recommendations** <code>Result[]</code> - Recommendations to render. |
 | <code>default</code> | (Required) Recommendation content. | **recommendation** <code>recommendation</code> - Recommendation data.                                                                           |
 
----
-
-# Examples
+## Examples
 
 It renders a list of recommendations from recommendations state by default. The component provides
 the slot layout which wraps the whole component with the recommendations bound. It also provides the
 default slot to customize the item, which is within the layout slot, with the recommendation bound.
 Each recommendation should be represented by a BaseResultLink component besides any other component.
 
-## Basic example
+### Basic example
 
-## Adding a custom BaseResultLink component
+### Adding a custom BaseResultLink component
 
 A BaseResultLink **must** be used inside the Recommendations component. In the example below the
 BaseResultLink default slot is filled with an image of the result and a span for the title. Besides
@@ -57,7 +56,7 @@ that, an additional button has been added.
 </Recommendations>
 ```
 
-## Overriding layout content
+### Overriding layout content
 
 It renders a list of recommendations customizing the layout slot. In the example below, instead of
 using the default Recommendations content, a BaseGrid component is used to render the