@empathyco/x-components 3.0.0-alpha.140 → 3.0.0-alpha.141

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.141](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.140...@empathyco/x-components@3.0.0-alpha.141) (2022-07-28)
+
+### Features
+
+- **next-queries:** add next query preview logic (#611)
+  ([fc611fa](https://github.com/empathyco/x/commit/fc611faa39e63e5f916cd19928e9ab0755f8dc7f)),
+  closes [EX-6119](https://searchbroker.atlassian.net/browse/EX-6119)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.140](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.139...@empathyco/x-components@3.0.0-alpha.140) (2022-07-26)
 
 **Note:** Version bump only for package @empathyco/x-components

package/design-system/default-theme.css

@@ -8,6 +8,55 @@
   --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
   --x-size-font-badge-default: var(--x-size-font-base-xs);
 }
+
+[dir="ltr"] .x-badge {
+  right: calc(var(--x-size-width-badge-default) / 4);
+}
+
+[dir="rtl"] .x-badge {
+  left: calc(var(--x-size-width-badge-default) / 4);
+}
+
+.x-badge {
+  border-radius: var(--x-size-border-radius-badge-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-badge-default);
+  font-size: var(--x-size-font-badge-default);
+  font-weight: var(--x-number-font-weight-badge-default);
+  box-sizing: border-box;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(50%, -50%);
+  z-index: 1;
+  /* We dont' want to have the button fully centered in the top right corner, the top right corner
+  of the text is the one that should be aligned with the top right corner of the container. */
+  top: calc(var(--x-size-width-badge-default) / 4);
+  min-width: var(--x-size-width-badge-default);
+  height: var(--x-size-width-badge-default);
+  padding: 2px;
+  background: var(--x-color-background-badge-default);
+  color: var(--x-color-text-badge-default);
+  border-color: var(--x-color-border-badge-default);
+}
+[dir="rtl"] .x-badge {
+  transform: translate(-50%, -50%);
+}
+
+.x-badge-container {
+  position: relative;
+}
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -2857,53 +2906,4 @@
   --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
   --x-size-line-height-base-l: 32px;
-}
-:root {
-  --x-color-background-badge-default: var(--x-color-base-neutral-10);
-  --x-color-text-badge-default: var(--x-color-base-neutral-100);
-  --x-color-border-badge-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-badge-default: 0;
-  --x-size-width-badge-default: 1.5em;
-  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs);
-}
-
-[dir="ltr"] .x-badge {
-  right: calc(var(--x-size-width-badge-default) / 4);
-}
-
-[dir="rtl"] .x-badge {
-  left: calc(var(--x-size-width-badge-default) / 4);
-}
-
-.x-badge {
-  border-radius: var(--x-size-border-radius-badge-default);
-  border-style: solid;
-  border-width: var(--x-size-border-width-badge-default);
-  font-size: var(--x-size-font-badge-default);
-  font-weight: var(--x-number-font-weight-badge-default);
-  box-sizing: border-box;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: translate(50%, -50%);
-  z-index: 1;
-  /* We dont' want to have the button fully centered in the top right corner, the top right corner
-  of the text is the one that should be aligned with the top right corner of the container. */
-  top: calc(var(--x-size-width-badge-default) / 4);
-  min-width: var(--x-size-width-badge-default);
-  height: var(--x-size-width-badge-default);
-  padding: 2px;
-  background: var(--x-color-background-badge-default);
-  color: var(--x-color-text-badge-default);
-  border-color: var(--x-color-border-badge-default);
-}
-[dir="rtl"] .x-badge {
-  transform: translate(-50%, -50%);
-}
-
-.x-badge-container {
-  position: relative;
 }

package/design-system/full-theme.css

@@ -898,20 +898,6 @@
   --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
   --x-size-border-width-left-facet-header-line: 0;
 }
-.x-facet--outlined.x-facet,
-.x-facet--outlined .x-facet {
-  --x-color-border-facet-default: var(--x-color-border-facet-outlined);
-  --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
-  --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
-  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
-  --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
-  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
-  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
-  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
-}
 :root {
   --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
   --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
@@ -7613,3 +7599,18 @@
 .x-normal-case {
   text-transform: none;
 }
+
+.x-facet--outlined.x-facet,
+.x-facet--outlined .x-facet {
+  --x-color-border-facet-default: var(--x-color-border-facet-outlined);
+  --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
+  --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
+  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
+  --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
+  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
+  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
+  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
+}

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [fetchAndSaveNextQueryPreviewWire](./x-components.fetchandsavenextquerypreviewwire.md)
+
+## fetchAndSaveNextQueryPreviewWire variable
+
+Requests and store the next query preview results.
+
+<b>Signature:</b>
+
+```typescript
+fetchAndSaveNextQueryPreviewWire: import("../..").Wire<string>
+```

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

@@ -414,6 +414,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [fetchAndSaveIdentifierResultsWire](./x-components.fetchandsaveidentifierresultswire.md) | Requests and stores a new set of identifier results for the [IdentifierResultsState.query](./x-components.identifierresultsstate.query.md)<!-- -->. |
 |  [fetchAndSaveNextQueries](./x-components.fetchandsavenextqueries.md) | Default implementation for [NextQueriesActions.fetchAndSaveNextQueries()](./x-components.nextqueriesactions.fetchandsavenextqueries.md) action. |
 |  [fetchAndSaveNextQueriesWire](./x-components.fetchandsavenextquerieswire.md) | Requests and stores the next queries. |
+|  [fetchAndSaveNextQueryPreviewWire](./x-components.fetchandsavenextquerypreviewwire.md) | Requests and store the next query preview results. |
 |  [fetchAndSavePopularSearches](./x-components.fetchandsavepopularsearches.md) | Default implementation for [PopularSearchesActions.fetchAndSaveSuggestions()](./x-components.popularsearchesactions.fetchandsavesuggestions.md) action. |
 |  [fetchAndSaveQuerySuggestions](./x-components.fetchandsavequerysuggestions.md) | Default implementation for [QuerySuggestionsActions.fetchAndSaveSuggestions()](./x-components.querysuggestionsactions.fetchandsavesuggestions.md) action. |
 |  [fetchAndSaveRecommendations](./x-components.fetchandsaverecommendations.md) | Default implementation for [RecommendationsActions.fetchAndSaveRecommendations()](./x-components.recommendationsactions.fetchandsaverecommendations.md) action. |
@@ -483,6 +484,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [removeFromHistory](./x-components.removefromhistory.md) | Default implementation for the [HistoryQueriesActions.removeFromHistory()](./x-components.historyqueriesactions.removefromhistory.md)<!-- -->. |
 |  [removeHistoryQuery](./x-components.removehistoryquery.md) | Removes a single history query from the history queries. |
 |  [resetAppending](./x-components.resetappending.md) | Resets the search state <code>isAppendingResults</code>. |
+|  [resetResultsPreviewWire](./x-components.resetresultspreviewwire.md) | Resets the next query preview results. |
 |  [resetSpellcheckQuery](./x-components.resetspellcheckquery.md) | Resets the search state <code>spellcheckedQuery</code> to its initial value, an empty string. |
 |  [resetState](./x-components.resetstate.md) | Default implementation for the [SearchActions.resetState()](./x-components.searchactions.resetstate.md)<!-- -->. |
 |  [resetStateWire](./x-components.resetstatewire.md) | Batches state resets after [SearchGetters.request](./x-components.searchgetters.request.md) parameters update. |

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

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [NextQueriesActions](./x-components.nextqueriesactions.md) &gt; [fetchAndSaveNextQueryPreview](./x-components.nextqueriesactions.fetchandsavenextquerypreview.md)
+
+## NextQueriesActions.fetchAndSaveNextQueryPreview() method
+
+Requests the results to preview a next query and saves them in the state.
+
+<b>Signature:</b>
+
+```typescript
+fetchAndSaveNextQueryPreview(query: string): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  query | string | The next query to retrieve the results. |
+
+<b>Returns:</b>
+
+void
+

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

@@ -0,0 +1,26 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [NextQueriesActions](./x-components.nextqueriesactions.md) &gt; [fetchNextQueryPreview](./x-components.nextqueriesactions.fetchnextquerypreview.md)
+
+## NextQueriesActions.fetchNextQueryPreview() method
+
+Requests the results to preview a next query, limited by [NextQueriesConfig.maxPreviewItemsToRequest](./x-components.nextqueriesconfig.maxpreviewitemstorequest.md)<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+fetchNextQueryPreview(query: string): SearchResponse | null;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  query | string | The next query to retrieve the results. |
+
+<b>Returns:</b>
+
+SearchResponse \| null
+
+A search response based on the next query.
+

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

@@ -18,7 +18,9 @@ export interface NextQueriesActions
 |  --- | --- |
 |  [cancelFetchAndSaveNextQueries()](./x-components.nextqueriesactions.cancelfetchandsavenextqueries.md) | Cancels / interrupt [NextQueriesActions.fetchAndSaveNextQueries()](./x-components.nextqueriesactions.fetchandsavenextqueries.md) synchronous promise. |
 |  [fetchAndSaveNextQueries(request)](./x-components.nextqueriesactions.fetchandsavenextqueries.md) | Requests a new set of next queries and stores them in the module. |
+|  [fetchAndSaveNextQueryPreview(query)](./x-components.nextqueriesactions.fetchandsavenextquerypreview.md) | Requests the results to preview a next query and saves them in the state. |
 |  [fetchNextQueries(request)](./x-components.nextqueriesactions.fetchnextqueries.md) | Requests a new set of next queries for the module query, and returns them. |
+|  [fetchNextQueryPreview(query)](./x-components.nextqueriesactions.fetchnextquerypreview.md) | Requests the results to preview a next query, limited by [NextQueriesConfig.maxPreviewItemsToRequest](./x-components.nextqueriesconfig.maxpreviewitemstorequest.md)<!-- -->. |
 |  [setQueryFromLastHistoryQuery(historyQueries)](./x-components.nextqueriesactions.setqueryfromlasthistoryquery.md) | Sets the query of the module based on the last history query. |
 |  [setUrlParams(urlParams)](./x-components.nextqueriesactions.seturlparams.md) | Checks if the url has a query on it and then updates the state with that value. |
 

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [NextQueriesConfig](./x-components.nextqueriesconfig.md) &gt; [maxPreviewItemsToRequest](./x-components.nextqueriesconfig.maxpreviewitemstorequest.md)
+
+## NextQueriesConfig.maxPreviewItemsToRequest property
+
+Number of results that will be requested to preview the next queries.
+
+<b>Signature:</b>
+
+```typescript
+maxPreviewItemsToRequest: number;
+```

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

@@ -19,4 +19,5 @@ export interface NextQueriesConfig
 |  [hideSessionQueries](./x-components.nextqueriesconfig.hidesessionqueries.md) | boolean | Hides the next queries if it has been already searched during the session. |
 |  [loadOnInit](./x-components.nextqueriesconfig.loadoninit.md) | boolean | Loads the next queries with the last searched query. |
 |  [maxItemsToRequest](./x-components.nextqueriesconfig.maxitemstorequest.md) | number | Number of next queries that will be requested. |
+|  [maxPreviewItemsToRequest](./x-components.nextqueriesconfig.maxpreviewitemstorequest.md) | number | Number of results that will be requested to preview the next queries. |
 

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

@@ -17,8 +17,10 @@ export interface NextQueriesMutations extends StatusMutations, QueryMutations
 
 |  Method | Description |
 |  --- | --- |
+|  [resetResultsPreview()](./x-components.nextqueriesmutations.resetresultspreview.md) | Resets the result's dictionary. |
 |  [setNextQueries(nextQueries)](./x-components.nextqueriesmutations.setnextqueries.md) | Sets the next queries of the module. |
 |  [setParams(params)](./x-components.nextqueriesmutations.setparams.md) | Sets the extra params of the module. |
 |  [setQuery(newQuery)](./x-components.nextqueriesmutations.setquery.md) | Sets the query of the module, which is used to retrieve the next-queries. |
+|  [setResultsPreview(resultsPreview)](./x-components.nextqueriesmutations.setresultspreview.md) | Adds a new entry to the result's dictionary. |
 |  [setSearchedQueries(searchedQueries)](./x-components.nextqueriesmutations.setsearchedqueries.md) | Sets the searched queries of the module. |
 

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

@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [NextQueriesMutations](./x-components.nextqueriesmutations.md) &gt; [resetResultsPreview](./x-components.nextqueriesmutations.resetresultspreview.md)
+
+## NextQueriesMutations.resetResultsPreview() method
+
+Resets the result's dictionary.
+
+<b>Signature:</b>
+
+```typescript
+resetResultsPreview(): void;
+```
+<b>Returns:</b>
+
+void
+

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

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [NextQueriesMutations](./x-components.nextqueriesmutations.md) &gt; [setResultsPreview](./x-components.nextqueriesmutations.setresultspreview.md)
+
+## NextQueriesMutations.setResultsPreview() method
+
+Adds a new entry to the result's dictionary.
+
+<b>Signature:</b>
+
+```typescript
+setResultsPreview(resultsPreview: Dictionary<PreviewResults>): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  resultsPreview | Dictionary&lt;PreviewResults&gt; | Object containing the next query, the totalResults and the results to add. |
+
+<b>Returns:</b>
+
+void
+

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

@@ -21,5 +21,6 @@ export interface NextQueriesState extends StatusState, QueryState
 |  [nextQueries](./x-components.nextqueriesstate.nextqueries.md) | NextQuery\[\] | The list of the next queries, related to the <code>query</code> property of the state. |
 |  [params](./x-components.nextqueriesstate.params.md) | Dictionary&lt;unknown&gt; | The extra params property of the state. |
 |  [query](./x-components.nextqueriesstate.query.md) | string | The internal query of the module. Used to request the next queries. |
+|  [resultsPreview](./x-components.nextqueriesstate.resultspreview.md) | Dictionary&lt;PreviewResults&gt; | Results of the next queries requests. |
 |  [searchedQueries](./x-components.nextqueriesstate.searchedqueries.md) | HistoryQuery\[\] | The list of the searched queries, related to the <code>query</code> property of the state. |
 

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [NextQueriesState](./x-components.nextqueriesstate.md) &gt; [resultsPreview](./x-components.nextqueriesstate.resultspreview.md)
+
+## NextQueriesState.resultsPreview property
+
+Results of the next queries requests.
+
+<b>Signature:</b>
+
+```typescript
+resultsPreview: Dictionary<PreviewResults>;
+```

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

@@ -19,5 +19,6 @@ export interface NextQueriesXEvents
 |  [NextQueriesChanged](./x-components.nextqueriesxevents.nextquerieschanged.md) | NextQuery\[\] | Next Queries have been changed. Payload: The new [next queries](./x-types.nextquery.md)<!-- -->. |
 |  [NextQueriesDisplayed](./x-components.nextqueriesxevents.nextqueriesdisplayed.md) | NextQuery\[\] | The current next queries have been displayed to the user. Payload: The displayed next queries. |
 |  [NextQueriesRequestChanged](./x-components.nextqueriesxevents.nextqueriesrequestchanged.md) | NextQueriesRequest \| null | Any property of the next-queries request has changed Payload: The new next-queries request or <code>null</code> if there is not enough data in the state to conform a valid request. |
+|  [NextQueryPreviewMounted](./x-components.nextqueriesxevents.nextquerypreviewmounted.md) | string | The component to show a next query preview has been mounted. Payload: The next query to preview. |
 |  [UserSelectedANextQuery](./x-components.nextqueriesxevents.userselectedanextquery.md) | NextQuery | The user has selected a next-query Payload: The next query that has been selected by the user. |
 

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [NextQueriesXEvents](./x-components.nextqueriesxevents.md) &gt; [NextQueryPreviewMounted](./x-components.nextqueriesxevents.nextquerypreviewmounted.md)
+
+## NextQueriesXEvents.NextQueryPreviewMounted property
+
+The component to show a next query preview has been mounted. Payload: The next query to preview.
+
+<b>Signature:</b>
+
+```typescript
+NextQueryPreviewMounted: string;
+```

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [resetResultsPreviewWire](./x-components.resetresultspreviewwire.md)
+
+## resetResultsPreviewWire variable
+
+Resets the next query preview results.
+
+<b>Signature:</b>
+
+```typescript
+resetResultsPreviewWire: import("../..").AnyWire
+```

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

@@ -57,6 +57,7 @@ Entry point to export search-type models and testing schemas in a unified api-ex
 |  [PopularSearchesRequest](./x-types.popularsearchesrequest.md) | Request for Popular Searches endpoint. |
 |  [PopularSearchesResponse](./x-types.popularsearchesresponse.md) | Response for the popular searches endpoint. |
 |  [Previewable](./x-types.previewable.md) | Represents an item that is searchable, and the results associated to it. |
+|  [PreviewResults](./x-types.previewresults.md) | Interface to type the query preview objects. |
 |  [Promoted](./x-types.promoted.md) | A promoted is an image with a title, that when clicked redirect the user to an URL. Often it is represented taking up the same space than a normal result. |
 |  [QueryableRequest](./x-types.queryablerequest.md) | Interface for any Request with a <code>query</code> parameter. |
 |  [QuerySuggestionsRequest](./x-types.querysuggestionsrequest.md) | Request for Query Suggestions endpoint. |

package/docs/API-reference/api/x-types.previewresults.items.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; [PreviewResults](./x-types.previewresults.md) &gt; [items](./x-types.previewresults.items.md)
+
+## PreviewResults.items property
+
+The results to preview the search request.
+
+<b>Signature:</b>
+
+```typescript
+items: Result[];
+```

package/docs/API-reference/api/x-types.previewresults.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; [PreviewResults](./x-types.previewresults.md)
+
+## PreviewResults interface
+
+Interface to type the query preview objects.
+
+<b>Signature:</b>
+
+```typescript
+export interface PreviewResults 
+```
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [items](./x-types.previewresults.items.md) | [Result](./x-types.result.md)<!-- -->\[\] | The results to preview the search request. |
+|  [query](./x-types.previewresults.query.md) | string | The searched query. |
+|  [totalResults](./x-types.previewresults.totalresults.md) | number | The number of results of the query. |
+

package/docs/API-reference/api/x-types.previewresults.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; [PreviewResults](./x-types.previewresults.md) &gt; [query](./x-types.previewresults.query.md)
+
+## PreviewResults.query property
+
+The searched query.
+
+<b>Signature:</b>
+
+```typescript
+query: string;
+```

package/docs/API-reference/api/x-types.previewresults.totalresults.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; [PreviewResults](./x-types.previewresults.md) &gt; [totalResults](./x-types.previewresults.totalresults.md)
+
+## PreviewResults.totalResults property
+
+The number of results of the query.
+
+<b>Signature:</b>
+
+```typescript
+totalResults: number;
+```

package/js/index.js

@@ -251,7 +251,7 @@ export { nextQueriesEmitters } from './x-modules/next-queries/store/emitters.js'
 export { request as nextQueriesRequest } from './x-modules/next-queries/store/getters/request.getter.js';
 export { nextQueries } from './x-modules/next-queries/store/getters/next-queries.getter.js';
 export { nextQueriesXStoreModule } from './x-modules/next-queries/store/module.js';
-export { fetchAndSaveNextQueriesWire, nextQueriesWiring, setNextQueriesExtraParams, setNextQueriesQuery, setQueryFromLastHistoryQueryWire, setSearchedQueries } from './x-modules/next-queries/wiring.js';
+export { fetchAndSaveNextQueriesWire, fetchAndSaveNextQueryPreviewWire, nextQueriesWiring, resetResultsPreviewWire, setNextQueriesExtraParams, setNextQueriesQuery, setQueryFromLastHistoryQueryWire, setSearchedQueries } from './x-modules/next-queries/wiring.js';
 export { nextQueriesXModule } from './x-modules/next-queries/x-module.js';
 export { default as PopularSearch } from './x-modules/popular-searches/components/popular-search.vue.js';
 export { default as PopularSearches } from './x-modules/popular-searches/components/popular-searches.vue.js';

package/js/x-modules/next-queries/store/actions/fetch-and-save-next-query-preview.action.js

@@ -0,0 +1,22 @@
+// eslint-disable-next-line max-len
+const fetchAndSaveNextQueryPreview = ({ dispatch, commit }, query) => {
+    return dispatch('fetchNextQueryPreview', query)
+        .then(response => {
+        if (response) {
+            commit('setResultsPreview', {
+                [query]: {
+                    query,
+                    totalResults: response.totalResults,
+                    items: response.results
+                }
+            });
+        }
+    })
+        .catch(error => {
+        // eslint-disable-next-line no-console
+        console.error(error);
+    });
+};
+
+export { fetchAndSaveNextQueryPreview };
+//# sourceMappingURL=fetch-and-save-next-query-preview.action.js.map

package/js/x-modules/next-queries/store/actions/fetch-and-save-next-query-preview.action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetch-and-save-next-query-preview.action.js","sources":["../../../../../../src/x-modules/next-queries/store/actions/fetch-and-save-next-query-preview.action.ts"],"sourcesContent":["import { NextQueriesXStoreModule } from '../types';\n\n// eslint-disable-next-line max-len\nexport const fetchAndSaveNextQueryPreview: NextQueriesXStoreModule['actions']['fetchAndSaveNextQueryPreview'] =\n  ({ dispatch, commit }, query): Promise<void> => {\n    return dispatch('fetchNextQueryPreview', query)\n      .then(response => {\n        if (response) {\n          commit('setResultsPreview', {\n            [query]: {\n              query,\n              totalResults: response.totalResults,\n              items: response.results\n            }\n          });\n        }\n      })\n      .catch(error => {\n        // eslint-disable-next-line no-console\n        console.error(error);\n      });\n  };\n"],"names":[],"mappings":"AAEA;MACa,4BAA4B,GACvC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,KAAK;IAC1B,OAAO,QAAQ,CAAC,uBAAuB,EAAE,KAAK,CAAC;SAC5C,IAAI,CAAC,QAAQ;QACZ,IAAI,QAAQ,EAAE;YACZ,MAAM,CAAC,mBAAmB,EAAE;gBAC1B,CAAC,KAAK,GAAG;oBACP,KAAK;oBACL,YAAY,EAAE,QAAQ,CAAC,YAAY;oBACnC,KAAK,EAAE,QAAQ,CAAC,OAAO;iBACxB;aACF,CAAC,CAAC;SACJ;KACF,CAAC;SACD,KAAK,CAAC,KAAK;;QAEV,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACtB,CAAC,CAAC;AACP;;;;"}

package/js/x-modules/next-queries/store/actions/fetch-next-query-preview.action.js

@@ -0,0 +1,26 @@
+import { XPlugin } from '../../../../plugins/x-plugin.js';
+
+/**
+ * Default implementation for the {@link NextQueriesActions.fetchNextQueryPreview}.
+ *
+ * @param state - The state of the store, used to retrieve the rows and the extraParams to be sent
+ * in the request.
+ * @param query - The next query to send in the request.
+ * @returns A Promise of a SearchResponse when it fetches the results, `null` if the request was
+ * not made.
+ */
+const fetchNextQueryPreview = ({ state }, query) => {
+    if (!query) {
+        return null;
+    }
+    return XPlugin.adapter.search({
+        query,
+        rows: state.config.maxPreviewItemsToRequest,
+        extraParams: state.params
+    }, {
+        id: `fetchNextQueryPreview-${query}`
+    });
+};
+
+export { fetchNextQueryPreview };
+//# sourceMappingURL=fetch-next-query-preview.action.js.map

package/js/x-modules/next-queries/store/actions/fetch-next-query-preview.action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetch-next-query-preview.action.js","sources":["../../../../../../src/x-modules/next-queries/store/actions/fetch-next-query-preview.action.ts"],"sourcesContent":["import { NextQueriesXStoreModule } from '../types';\nimport { XPlugin } from '../../../../plugins/x-plugin';\n\n/**\n * Default implementation for the {@link NextQueriesActions.fetchNextQueryPreview}.\n *\n * @param state - The state of the store, used to retrieve the rows and the extraParams to be sent\n * in the request.\n * @param query - The next query to send in the request.\n * @returns A Promise of a SearchResponse when it fetches the results, `null` if the request was\n * not made.\n */\nexport const fetchNextQueryPreview: NextQueriesXStoreModule['actions']['fetchNextQueryPreview'] = (\n  { state },\n  query\n) => {\n  if (!query) {\n    return null;\n  }\n  return XPlugin.adapter.search(\n    {\n      query,\n      rows: state.config.maxPreviewItemsToRequest,\n      extraParams: state.params\n    },\n    {\n      id: `fetchNextQueryPreview-${query}`\n    }\n  );\n};\n"],"names":[],"mappings":";;AAGA;;;;;;;;;MASa,qBAAqB,GAAgE,CAChG,EAAE,KAAK,EAAE,EACT,KAAK;IAEL,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;KACb;IACD,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAC3B;QACE,KAAK;QACL,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,wBAAwB;QAC3C,WAAW,EAAE,KAAK,CAAC,MAAM;KAC1B,EACD;QACE,EAAE,EAAE,yBAAyB,KAAK,EAAE;KACrC,CACF,CAAC;AACJ;;;;"}

package/js/x-modules/next-queries/store/module.js

@@ -4,6 +4,8 @@ import { cancelFetchAndSaveNextQueries, fetchAndSaveNextQueries } from './action
 import { fetchNextQueries } from './actions/fetch-next-queries.action.js';
 import { setQueryFromLastHistoryQuery } from './actions/set-query-from-last-history-query.action.js';
 import { setUrlParams } from './actions/set-url-params.action.js';
+import { fetchNextQueryPreview } from './actions/fetch-next-query-preview.action.js';
+import { fetchAndSaveNextQueryPreview } from './actions/fetch-and-save-next-query-preview.action.js';
 import { nextQueries } from './getters/next-queries.getter.js';
 import { request } from './getters/request.getter.js';
 
@@ -21,9 +23,11 @@ const nextQueriesXStoreModule = {
         config: {
             maxItemsToRequest: 20,
             hideSessionQueries: true,
-            loadOnInit: true
+            loadOnInit: true,
+            maxPreviewItemsToRequest: 8
         },
-        params: {}
+        params: {},
+        resultsPreview: {}
     }),
     getters: {
         request,
@@ -40,6 +44,12 @@ const nextQueriesXStoreModule = {
         setStatus,
         setParams(state, params) {
             state.params = params;
+        },
+        setResultsPreview(state, resultsPreview) {
+            state.resultsPreview = { ...state.resultsPreview, ...resultsPreview };
+        },
+        resetResultsPreview(state) {
+            state.resultsPreview = {};
         }
     },
     actions: {
@@ -47,7 +57,9 @@ const nextQueriesXStoreModule = {
         fetchAndSaveNextQueries,
         fetchNextQueries,
         setQueryFromLastHistoryQuery,
-        setUrlParams
+        setUrlParams,
+        fetchNextQueryPreview,
+        fetchAndSaveNextQueryPreview
     }
 };
 

package/js/x-modules/next-queries/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/next-queries/store/module.ts"],"sourcesContent":["import { setQuery } from '../../../store/utils/query.utils';\nimport { setStatus } from '../../../store/utils/status-store.utils';\nimport {\n  cancelFetchAndSaveNextQueries,\n  fetchAndSaveNextQueries\n} from './actions/fetch-and-save-next-queries.action';\nimport { fetchNextQueries } from './actions/fetch-next-queries.action';\nimport { setQueryFromLastHistoryQuery } from './actions/set-query-from-last-history-query.action';\nimport { setUrlParams } from './actions/set-url-params.action';\nimport { nextQueries } from './getters/next-queries.getter';\nimport { request } from './getters/request.getter';\nimport { NextQueriesXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the next-queries module.\n *\n * @internal\n */\nexport const nextQueriesXStoreModule: NextQueriesXStoreModule = {\n  state: () => ({\n    query: '',\n    nextQueries: [],\n    searchedQueries: [],\n    status: 'initial',\n    config: {\n      maxItemsToRequest: 20,\n      hideSessionQueries: true,\n      loadOnInit: true\n    },\n    params: {}\n  }),\n  getters: {\n    request,\n    nextQueries\n  },\n  mutations: {\n    setQuery,\n    setNextQueries(state, nextQueries) {\n      state.nextQueries = nextQueries;\n    },\n    setSearchedQueries(state, searchedQueries) {\n      state.searchedQueries = searchedQueries;\n    },\n    setStatus,\n    setParams(state, params) {\n      state.params = params;\n    }\n  },\n  actions: {\n    cancelFetchAndSaveNextQueries,\n    fetchAndSaveNextQueries,\n    fetchNextQueries,\n    setQueryFromLastHistoryQuery,\n    setUrlParams\n  }\n};\n"],"names":[],"mappings":";;;;;;;;;AAaA;;;;;MAKa,uBAAuB,GAA4B;IAC9D,KAAK,EAAE,OAAO;QACZ,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,EAAE;QACf,eAAe,EAAE,EAAE;QACnB,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE;YACN,iBAAiB,EAAE,EAAE;YACrB,kBAAkB,EAAE,IAAI;YACxB,UAAU,EAAE,IAAI;SACjB;QACD,MAAM,EAAE,EAAE;KACX,CAAC;IACF,OAAO,EAAE;QACP,OAAO;QACP,WAAW;KACZ;IACD,SAAS,EAAE;QACT,QAAQ;QACR,cAAc,CAAC,KAAK,EAAE,WAAW;YAC/B,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;SACjC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe;YACvC,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;SACzC;QACD,SAAS;QACT,SAAS,CAAC,KAAK,EAAE,MAAM;YACrB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;KACF;IACD,OAAO,EAAE;QACP,6BAA6B;QAC7B,uBAAuB;QACvB,gBAAgB;QAChB,4BAA4B;QAC5B,YAAY;KACb;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/next-queries/store/module.ts"],"sourcesContent":["import { setQuery } from '../../../store/utils/query.utils';\nimport { setStatus } from '../../../store/utils/status-store.utils';\nimport {\n  cancelFetchAndSaveNextQueries,\n  fetchAndSaveNextQueries\n} from './actions/fetch-and-save-next-queries.action';\nimport { fetchNextQueries } from './actions/fetch-next-queries.action';\nimport { setQueryFromLastHistoryQuery } from './actions/set-query-from-last-history-query.action';\nimport { setUrlParams } from './actions/set-url-params.action';\nimport { fetchNextQueryPreview } from './actions/fetch-next-query-preview.action';\nimport { fetchAndSaveNextQueryPreview } from './actions/fetch-and-save-next-query-preview.action';\nimport { nextQueries } from './getters/next-queries.getter';\nimport { request } from './getters/request.getter';\nimport { NextQueriesXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the next-queries module.\n *\n * @internal\n */\nexport const nextQueriesXStoreModule: NextQueriesXStoreModule = {\n  state: () => ({\n    query: '',\n    nextQueries: [],\n    searchedQueries: [],\n    status: 'initial',\n    config: {\n      maxItemsToRequest: 20,\n      hideSessionQueries: true,\n      loadOnInit: true,\n      maxPreviewItemsToRequest: 8\n    },\n    params: {},\n    resultsPreview: {}\n  }),\n  getters: {\n    request,\n    nextQueries\n  },\n  mutations: {\n    setQuery,\n    setNextQueries(state, nextQueries) {\n      state.nextQueries = nextQueries;\n    },\n    setSearchedQueries(state, searchedQueries) {\n      state.searchedQueries = searchedQueries;\n    },\n    setStatus,\n    setParams(state, params) {\n      state.params = params;\n    },\n    setResultsPreview(state, resultsPreview) {\n      state.resultsPreview = { ...state.resultsPreview, ...resultsPreview };\n    },\n    resetResultsPreview(state) {\n      state.resultsPreview = {};\n    }\n  },\n  actions: {\n    cancelFetchAndSaveNextQueries,\n    fetchAndSaveNextQueries,\n    fetchNextQueries,\n    setQueryFromLastHistoryQuery,\n    setUrlParams,\n    fetchNextQueryPreview,\n    fetchAndSaveNextQueryPreview\n  }\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAeA;;;;;MAKa,uBAAuB,GAA4B;IAC9D,KAAK,EAAE,OAAO;QACZ,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,EAAE;QACf,eAAe,EAAE,EAAE;QACnB,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE;YACN,iBAAiB,EAAE,EAAE;YACrB,kBAAkB,EAAE,IAAI;YACxB,UAAU,EAAE,IAAI;YAChB,wBAAwB,EAAE,CAAC;SAC5B;QACD,MAAM,EAAE,EAAE;QACV,cAAc,EAAE,EAAE;KACnB,CAAC;IACF,OAAO,EAAE;QACP,OAAO;QACP,WAAW;KACZ;IACD,SAAS,EAAE;QACT,QAAQ;QACR,cAAc,CAAC,KAAK,EAAE,WAAW;YAC/B,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;SACjC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe;YACvC,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;SACzC;QACD,SAAS;QACT,SAAS,CAAC,KAAK,EAAE,MAAM;YACrB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,iBAAiB,CAAC,KAAK,EAAE,cAAc;YACrC,KAAK,CAAC,cAAc,GAAG,EAAE,GAAG,KAAK,CAAC,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;SACvE;QACD,mBAAmB,CAAC,KAAK;YACvB,KAAK,CAAC,cAAc,GAAG,EAAE,CAAC;SAC3B;KACF;IACD,OAAO,EAAE;QACP,6BAA6B;QAC7B,uBAAuB;QACvB,gBAAgB;QAChB,4BAA4B;QAC5B,YAAY;QACZ,qBAAqB;QACrB,4BAA4B;KAC7B;;;;;"}