@empathyco/x-components 3.0.0-alpha.147 → 3.0.0-alpha.148

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.148](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.147...@empathyco/x-components@3.0.0-alpha.148) (2022-08-04)
+
+### Features
+
+- **next-queries:** add next query preview component (#631)
+  ([1513ab1](https://github.com/empathyco/x/commit/1513ab1ef0cbcf42d72f483d99815eba76b5eaad)),
+  closes [EX-6646](https://searchbroker.atlassian.net/browse/EX-6646)
+
+# 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.147](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.146...@empathyco/x-components@3.0.0-alpha.147) (2022-08-03)
 
 ### ⚠ BREAKING CHANGES

package/core/index.js

@@ -118,7 +118,7 @@ export { default as SlidingPanel } from '../js/components/sliding-panel.vue.js';
 export { default as SnippetCallbacks } from '../js/components/snippet-callbacks.vue.js';
 export { XEmit, XOn } from '../js/components/decorators/bus.decorators.js';
 export { Debounce } from '../js/components/decorators/debounce.decorators.js';
-export { LIST_ITEMS_KEY } from '../js/components/decorators/injection.consts.js';
+export { LIST_ITEMS_KEY, QUERY_KEY } from '../js/components/decorators/injection.consts.js';
 export { XInject, XProvide } from '../js/components/decorators/injection.decorators.js';
 export { Getter, State } from '../js/components/decorators/store.decorators.js';
 export { ItemsListInjectionMixin } from '../js/components/items-list-injection.mixin.js';

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/full-theme.css

@@ -1445,64 +1445,6 @@
   --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
   --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
 }
-[dir="ltr"] .x-input {
-  padding-left: var(--x-size-padding-left-input-default);
-}
-[dir="rtl"] .x-input {
-  padding-right: var(--x-size-padding-left-input-default);
-}
-[dir="ltr"] .x-input {
-  padding-right: var(--x-size-padding-right-input-default);
-}
-[dir="rtl"] .x-input {
-  padding-left: var(--x-size-padding-right-input-default);
-}
-[dir="ltr"] .x-input {
-  border-right-width: var(--x-size-border-width-right-input-default);
-}
-[dir="rtl"] .x-input {
-  border-left-width: var(--x-size-border-width-right-input-default);
-}
-[dir="ltr"] .x-input {
-  border-left-width: var(--x-size-border-width-left-input-default);
-}
-[dir="rtl"] .x-input {
-  border-right-width: var(--x-size-border-width-left-input-default);
-}
-.x-input {
-  box-sizing: border-box;
-  margin: 0;
-  min-width: 0;
-  height: var(--x-size-height-input-default);
-  padding-top: 0;
-  padding-bottom: 0;
-  background-color: var(--x-color-background-input-default);
-  border-color: var(--x-color-border-input-default);
-  color: var(--x-color-text-input-default);
-  border-top-width: var(--x-size-border-width-top-input-default);
-  border-bottom-width: var(--x-size-border-width-bottom-input-default);
-  border-radius: var(--x-size-border-radius-top-left-input-default) var(--x-size-border-radius-top-right-input-default) var(--x-size-border-radius-bottom-right-input-default) var(--x-size-border-radius-bottom-left-input-default);
-  border-style: solid;
-  font-family: var(--x-font-family-input-default);
-  font-size: var(--x-size-font-input-default);
-  font-weight: var(--x-number-font-weight-input-default);
-  line-height: var(--x-size-line-height-input-default);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-input {
-    -webkit-appearance: none;
-  }
-}
-.x-input:focus {
-  border-color: var(--x-color-border-input-default-focus);
-}
-.x-input::placeholder {
-  color: var(--x-color-text-input-placeholder-default);
-  font-family: var(--x-font-family-input-placeholder-default);
-  font-size: var(--x-size-font-input-placeholder-default);
-  font-weight: var(--x-number-font-weight-input-placeholder-default);
-  line-height: var(--x-size-line-height-input-placeholder-default);
-}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7593,3 +7535,62 @@
 .x-normal-case {
   text-transform: none;
 }
+
+[dir="ltr"] .x-input {
+  padding-left: var(--x-size-padding-left-input-default);
+}
+[dir="rtl"] .x-input {
+  padding-right: var(--x-size-padding-left-input-default);
+}
+[dir="ltr"] .x-input {
+  padding-right: var(--x-size-padding-right-input-default);
+}
+[dir="rtl"] .x-input {
+  padding-left: var(--x-size-padding-right-input-default);
+}
+[dir="ltr"] .x-input {
+  border-right-width: var(--x-size-border-width-right-input-default);
+}
+[dir="rtl"] .x-input {
+  border-left-width: var(--x-size-border-width-right-input-default);
+}
+[dir="ltr"] .x-input {
+  border-left-width: var(--x-size-border-width-left-input-default);
+}
+[dir="rtl"] .x-input {
+  border-right-width: var(--x-size-border-width-left-input-default);
+}
+.x-input {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  height: var(--x-size-height-input-default);
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: var(--x-color-background-input-default);
+  border-color: var(--x-color-border-input-default);
+  color: var(--x-color-text-input-default);
+  border-top-width: var(--x-size-border-width-top-input-default);
+  border-bottom-width: var(--x-size-border-width-bottom-input-default);
+  border-radius: var(--x-size-border-radius-top-left-input-default) var(--x-size-border-radius-top-right-input-default) var(--x-size-border-radius-bottom-right-input-default) var(--x-size-border-radius-bottom-left-input-default);
+  border-style: solid;
+  font-family: var(--x-font-family-input-default);
+  font-size: var(--x-size-font-input-default);
+  font-weight: var(--x-number-font-weight-input-default);
+  line-height: var(--x-size-line-height-input-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-input {
+    -webkit-appearance: none;
+  }
+}
+.x-input:focus {
+  border-color: var(--x-color-border-input-default-focus);
+}
+.x-input::placeholder {
+  color: var(--x-color-text-input-placeholder-default);
+  font-family: var(--x-font-family-input-placeholder-default);
+  font-size: var(--x-size-font-input-placeholder-default);
+  font-weight: var(--x-number-font-weight-input-placeholder-default);
+  line-height: var(--x-size-line-height-input-placeholder-default);
+}

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

@@ -94,6 +94,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [NextQueries](./x-components.nextqueries.md) | 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 <code>shirts</code>, and then <code>trousers</code>, <code>trousers</code> would be a next query of <code>shirts</code>. |
 |  [NextQueriesList](./x-components.nextquerieslist.md) | Component that inserts groups of next queries in different positions of the injected search items list, based on the provided configuration. |
 |  [NextQuery](./x-components.nextquery.md) | 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. |
+|  [NextQueryPreview](./x-components.nextquerypreview.md) | Retrieves a preview of the results of a next query and exposes them in the default slot, along with the next query and the totalResults of the search request. By default, it renders the names of the results. |
 |  [NumberRangeFilter](./x-components.numberrangefilter.md) | Renders a number range filter, emitting the needed events when clicked. |
 |  [OpenMainModal](./x-components.openmainmodal.md) | Button to open the [MainModal](./x-components.mainmodal.md)<!-- -->. |
 |  [PartialQueryButton](./x-components.partialquerybutton.md) | A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-components.xeventstypes.useracceptedaquery.md) and [SearchXEvents.UserClickedPartialQuery](./x-components.searchxevents.userclickedpartialquery.md) events, expressing the user intention to set the partial query. |

package/docs/API-reference/api/x-components.nextquerieslist.injectedquery.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; [NextQueriesList](./x-components.nextquerieslist.md) &gt; [injectedQuery](./x-components.nextquerieslist.injectedquery.md)
+
+## NextQueriesList.injectedQuery property
+
+Injected query, updated when the related request(s) have succeeded.
+
+<b>Signature:</b>
+
+```typescript
+injectedQuery: string | undefined;
+```

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

@@ -19,6 +19,7 @@ export default class NextQueriesList extends NextQueriesList_base
 |  --- | --- | --- | --- |
 |  [animation?](./x-components.nextquerieslist.animation.md) |  | Vue \| string | <i>(Optional)</i> Animation component that will be used to animate the next queries groups. |
 |  [frequency](./x-components.nextquerieslist.frequency.md) |  | number | The items cycle size to keep inserting next queries groups at. |
+|  [injectedQuery](./x-components.nextquerieslist.injectedquery.md) |  | string \| undefined | Injected query, updated when the related request(s) have succeeded. |
 |  [maxGroups](./x-components.nextquerieslist.maxgroups.md) |  | number | The maximum number of groups to insert into the injected list items list. |
 |  [maxNextQueriesPerGroup](./x-components.nextquerieslist.maxnextqueriespergroup.md) |  | number | The maximum amount of next queries to add in a single group. |
 |  [offset](./x-components.nextquerieslist.offset.md) |  | number | The first index to insert a group of next queries at. |

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

@@ -0,0 +1,29 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [NextQueryPreview](./x-components.nextquerypreview.md)
+
+## NextQueryPreview class
+
+Retrieves a preview of the results of a next query and exposes them in the default slot, along with the next query and the totalResults of the search request. By default, it renders the names of the results.
+
+<b>Signature:</b>
+
+```typescript
+export default class NextQueryPreview extends Vue 
+```
+<b>Extends:</b> Vue
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [previewResults](./x-components.nextquerypreview.previewresults.md) |  | Dictionary&lt;PreviewResults&gt; | The results preview of the next queries mounted. It is a dictionary, indexed by the next query query. |
+|  [suggestion](./x-components.nextquerypreview.suggestion.md) |  | NextQuery | The next query to retrieve the results preview. |
+|  [suggestionResults](./x-components.nextquerypreview.suggestionresults.md) |  | PreviewResults | Gets from the state the results preview of the next query. |
+
+## Methods
+
+|  Method | Modifiers | Description |
+|  --- | --- | --- |
+|  [mounted()](./x-components.nextquerypreview.mounted.md) |  | The component emits the NextQueryPreviewMounted event to retrieve the results preview of the next query. |
+

package/docs/API-reference/api/x-components.nextquerypreview.mounted.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; [NextQueryPreview](./x-components.nextquerypreview.md) &gt; [mounted](./x-components.nextquerypreview.mounted.md)
+
+## NextQueryPreview.mounted() method
+
+The component emits the NextQueryPreviewMounted event to retrieve the results preview of the next query.
+
+<b>Signature:</b>
+
+```typescript
+mounted(): void;
+```
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/api/x-components.nextquerypreview.previewresults.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; [NextQueryPreview](./x-components.nextquerypreview.md) &gt; [previewResults](./x-components.nextquerypreview.previewresults.md)
+
+## NextQueryPreview.previewResults property
+
+The results preview of the next queries mounted. It is a dictionary, indexed by the next query query.
+
+<b>Signature:</b>
+
+```typescript
+previewResults: Dictionary<PreviewResults>;
+```

package/docs/API-reference/api/x-components.nextquerypreview.suggestion.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; [NextQueryPreview](./x-components.nextquerypreview.md) &gt; [suggestion](./x-components.nextquerypreview.suggestion.md)
+
+## NextQueryPreview.suggestion property
+
+The next query to retrieve the results preview.
+
+<b>Signature:</b>
+
+```typescript
+protected suggestion: NextQuery;
+```

package/docs/API-reference/api/x-components.nextquerypreview.suggestionresults.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; [NextQueryPreview](./x-components.nextquerypreview.md) &gt; [suggestionResults](./x-components.nextquerypreview.suggestionresults.md)
+
+## NextQueryPreview.suggestionResults property
+
+Gets from the state the results preview of the next query.
+
+<b>Signature:</b>
+
+```typescript
+get suggestionResults(): PreviewResults;
+```

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

@@ -25,4 +25,13 @@ export default class ResultsList extends Vue implements InfiniteScroll
 |  --- | --- | --- | --- |
 |  [animation](./x-components.resultslist.animation.md) |  | Vue \| string | Animation component that will be used to animate the results. |
 |  [items](./x-components.resultslist.items.md) |  | Result\[\] | The results to render from the state. |
+|  [providedQuery](./x-components.resultslist.providedquery.md) |  | string | It provides the search query. This query is updated only when the search request has succeeded. |
+|  [searchQuery](./x-components.resultslist.searchquery.md) |  | string | The query of the search request, taken from the state. |
+|  [searchStatus](./x-components.resultslist.searchstatus.md) |  | [RequestStatus](./x-components.requeststatus.md) | The status of the search request, taken from the state. |
+
+## Methods
+
+|  Method | Modifiers | Description |
+|  --- | --- | --- |
+|  [updateQuery(status)](./x-components.resultslist.updatequery.md) |  | Updates the query to be provided to the child components when the search request has succeeded. |
 

package/docs/API-reference/api/x-components.resultslist.providedquery.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; [ResultsList](./x-components.resultslist.md) &gt; [providedQuery](./x-components.resultslist.providedquery.md)
+
+## ResultsList.providedQuery property
+
+It provides the search query. This query is updated only when the search request has succeeded.
+
+<b>Signature:</b>
+
+```typescript
+providedQuery: string;
+```

package/docs/API-reference/api/x-components.resultslist.searchquery.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; [ResultsList](./x-components.resultslist.md) &gt; [searchQuery](./x-components.resultslist.searchquery.md)
+
+## ResultsList.searchQuery property
+
+The query of the search request, taken from the state.
+
+<b>Signature:</b>
+
+```typescript
+searchQuery: string;
+```

package/docs/API-reference/api/x-components.resultslist.searchstatus.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; [ResultsList](./x-components.resultslist.md) &gt; [searchStatus](./x-components.resultslist.searchstatus.md)
+
+## ResultsList.searchStatus property
+
+The status of the search request, taken from the state.
+
+<b>Signature:</b>
+
+```typescript
+searchStatus: RequestStatus;
+```

package/docs/API-reference/api/x-components.resultslist.updatequery.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; [ResultsList](./x-components.resultslist.md) &gt; [updateQuery](./x-components.resultslist.updatequery.md)
+
+## ResultsList.updateQuery() method
+
+Updates the query to be provided to the child components when the search request has succeeded.
+
+<b>Signature:</b>
+
+```typescript
+updateQuery(status: RequestStatus): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  status | [RequestStatus](./x-components.requeststatus.md) | The status of the search request. |
+
+<b>Returns:</b>
+
+void
+

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

@@ -0,0 +1,155 @@
+---
+
+title: NextQueryPreview
+
+---
+
+# NextQueryPreview
+
+Retrieves a preview of the results of a next query and exposes them in the default slot,
+along with the next query and the totalResults of the search request.
+By default, it renders the names of the results.
+
+## Props
+
+| Name                    | Description                                     | Type                   | Default       |
+| ----------------------- | ----------------------------------------------- | ---------------------- | ------------- |
+| <code>suggestion</code> | The next query to retrieve the results preview. | <code>NextQuery</code> | <code></code> |
+
+## Slots
+
+| Name                 | Description                      | Bindings<br />(name - type - description)                                                                                                                                                                                             |
+| -------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>default</code> | Next Query Preview default slot. | **suggestion** <code>NextQuery</code> - Next Query suggestion data<br />**results** <code>Result[]</code> - The results preview of the next query<br />**totalResults** <code>number</code> - The total results of the search request |
+| <code>result</code>  | Next Query Preview result slot.  | **result** <code>Result</code> - A Next Query Preview result                                                                                                                                                                          |
+
+## Events
+
+This component emits the `NextQueryPreviewMounted` when it is mounted.
+
+## See it in action
+
+Here you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this
+component is intended to be used overriding its default slot. By default it will only render the
+names of the results.
+
+```vue live
+<template>
+  <NextQueryPreview :suggestion="suggestion" />
+</template>
+
+<script>
+import { NextQueryPreview } from "@empathyco/x-components/next-queries";
+
+export default {
+  name: "NextQueryPreviewDemo",
+  components: {
+    NextQueryPreview
+  },
+  data() {
+    return {
+      suggestion: {
+        modelName: "NextQuery",
+        query: "tshirt",
+        facets: []
+      }
+    };
+  }
+};
+</script>
+```
+
+### Play with the default slot
+
+In this example, the results will be rendered inside a sliding panel.
+
+```vue live
+<template>
+  <NextQueryPreview
+    :suggestion="suggestion"
+    #default="{ totalResults, results }"
+  >
+    <p>Total results: {{ totalResults }}</p>
+    <SlidingPanel :resetOnContentChange="false">
+      <article
+        v-for="result in results"
+        :key="result.id"
+        class="x-result"
+        style="max-width: 300px; overflow: hidden"
+      >
+        <BaseResultLink :result="result">
+          <BaseResultImage :result="result" class="x-result__picture" />
+        </BaseResultLink>
+        <div class="x-result__description">
+          <BaseResultLink :result="result">
+            <h1 class="x-title3">{{ result.name }}</h1>
+          </BaseResultLink>
+        </div>
+      </article>
+    </SlidingPanel>
+  </NextQueryPreview>
+</template>
+
+<script>
+import { NextQueryPreview } from "@empathyco/x-components/next-queries";
+import {
+  SlidingPanel,
+  BaseResultLink,
+  BaseResultImage
+} from "@empathyco/x-components";
+
+export default {
+  name: "NextQueryPreviewDemoOverridingSlot",
+  components: {
+    NextQueryPreview,
+    SlidingPanel,
+    BaseResultLink,
+    BaseResultImage
+  },
+  data() {
+    return {
+      suggestion: {
+        modelName: "NextQuery",
+        query: "tshirt",
+        facets: []
+      }
+    };
+  }
+};
+</script>
+```
+
+### Play with the result slot
+
+The component exposes a slot to override the result content, without modifying the list.
+
+In this example, the ID of the results will be rendered along with the name.
+
+```vue
+<template>
+  <NextQueryPreview :suggestion="suggestion" #result="{ result }">
+    <span>{{ result.id }}</span>
+    <span>{{ result.name }}</span>
+  </NextQueryPreview>
+</template>
+
+<script>
+import { NextQueryPreview } from "@empathyco/x-components/next-queries";
+
+export default {
+  name: "NextQueryPreviewDemoOverridingResultSlot",
+  components: {
+    NextQueryPreview
+  },
+  data() {
+    return {
+      suggestion: {
+        modelName: "NextQuery",
+        query: "tshirt",
+        facets: []
+      }
+    };
+  }
+};
+</script>
+```

package/js/components/base-grid.vue.js

@@ -57,11 +57,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-22d07af6_0", { source: ".x-base-grid[data-v-22d07af6] {\n  padding: var(--x-size-padding-grid, 0);\n  margin: 0;\n  display: grid;\n  grid-auto-flow: dense;\n  list-style: none;\n}\n.x-base-grid__banner[data-v-22d07af6] {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}", map: undefined, media: undefined });
+    inject("data-v-604592d3_0", { source: ".x-base-grid[data-v-604592d3] {\n  padding: var(--x-size-padding-grid, 0);\n  margin: 0;\n  display: grid;\n  grid-auto-flow: dense;\n  list-style: none;\n}\n.x-base-grid__banner[data-v-604592d3], .x-base-grid__next-queries-group[data-v-604592d3] {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-22d07af6";
+  const __vue_scope_id__ = "data-v-604592d3";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/base-grid.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    :style=\"style\"\n    class=\"x-grid x-base-grid\"\n    :class=\"cssClasses\"\n    tag=\"ul\"\n    data-test=\"grid\"\n  >\n    <li\n      v-for=\"{ slotName, item, cssClass } in gridItems\"\n      :key=\"item.id\"\n      :class=\"cssClass\"\n      class=\"x-grid__item x-base-grid__item\"\n    >\n      <!--\n        @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n        the item using that slot composition to render.\n            @binding {item} item - Item to render\n      -->\n      <slot v-if=\"$scopedSlots[slotName]\" :name=\"slotName\" :item=\"item\" />\n      <!--\n        @slot (required) Default item rendering. This slot will be used by default for rendering\n        the item without an specific slot implementation.\n            @binding {item} item - Item to render\n      -->\n      <slot v-else :item=\"item\">{{ item.name || item.modelName || item.id || item }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { toKebabCase } from '../utils/string';\n  import { ListItem, VueCSSClasses } from '../utils/types';\n  import { XInject } from './decorators/injection.decorators';\n  import { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n  /**\n   * The type returned by the gridItems function. Basically it's a list of items with its CSS\n   * classes and a slotName.\n   *\n   * @internal\n   */\n  interface GridItem {\n    slotName: string;\n    item: ListItem;\n    cssClass: VueCSSClasses;\n  }\n\n  /**\n   * Grid component that is able to render different items based on their modelName value. In order\n   * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n   * do not have modelName property, the default slot is used instead. It has a required property:\n   * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n   * number of columns is not specified, the grid automatically fills the rows with as many columns\n   * as it can fit.\n   *\n   * @public\n   */\n  @Component({})\n  export default class BaseGrid extends Vue {\n    /**\n     * Animation component that will be used to animate the base grid.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n     * columns mode to auto-fill.\n     *\n     * @public\n     */\n    @Prop({ default: 0 })\n    protected columns!: number;\n\n    /**\n     * The list of items to be rendered.\n     *\n     * @remarks The items must have an id property.\n     *\n     * @public\n     */\n    @Prop()\n    protected items!: ListItem[];\n\n    /**\n     * It injects {@link ListItem} provided by an ancestor.\n     *\n     * @internal\n     */\n    @XInject(LIST_ITEMS_KEY)\n    public injectedListItems!: ListItem[];\n\n    /**\n     * It returns the items passed as props or the injected ones.\n     *\n     * @returns List of grid items.\n     *\n     * @public\n     */\n    protected get computedItems(): ListItem[] {\n      return (\n        this.items ??\n        this.injectedListItems ??\n        //TODO: add here logger\n        //eslint-disable-next-line no-console\n        console.warn('It is necessary to pass a prop or inject the list of filters')\n      );\n    }\n\n    /**\n     * CSS class based on the column property value so items inside the grid can fill different\n     * amount of columns or rows based on how many columns the grid is divided into.\n     *\n     * @returns CSS class with the column property value.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return this.columns ? `x-grid--cols-${this.columns}` : 'x-grid--cols-auto';\n    }\n\n    /**\n     * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n     * the column property value.\n     *\n     * @returns A CSSStyleDeclaration to use as the style attribute.\n     *\n     * @internal\n     */\n    protected get style(): Partial<CSSStyleDeclaration> {\n      return {\n        gridTemplateColumns: this.columns\n          ? `repeat(${this.columns}, minmax(0, 1fr))`\n          : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'\n      };\n    }\n\n    /**\n     * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n     *\n     * @returns An array of objects containing the item and its CSS class.\n     *\n     * @internal\n     */\n    protected get gridItems(): GridItem[] {\n      return this.computedItems.map(item => {\n        const slotName = toKebabCase(item.modelName);\n        return {\n          slotName,\n          item,\n          cssClass: `x-base-grid__${slotName}`\n        };\n      });\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-base-grid {\n    padding: var(--x-size-padding-grid, 0);\n    margin: 0;\n    display: grid;\n    grid-auto-flow: dense;\n    list-style: none;\n\n    &__banner {\n      grid-column-start: 1;\n      grid-column-end: -1;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" :columns=\"12\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n  <BaseGrid :animation=\"animation\" :items=\"items\">\n    <template #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ `${item.title} banner` }}\n      </span>\n    </template>\n    <template #next-queries=\"{ item }\">\n      <span>\n        {{ `${item.totalResults} next queries` }}\n      </span>\n    </template>\n    <template #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ `${item.title} promoted` }}\n      </span>\n    </template>\n    <template #result=\"{ item }\">\n      <BaseResultLink :result=\"item\">\n        {{ item.name }}\n      </BaseResultLink>\n    </template>\n  </BaseGrid>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    :style=\"style\"\n    class=\"x-grid x-base-grid\"\n    :class=\"cssClasses\"\n    tag=\"ul\"\n    data-test=\"grid\"\n  >\n    <li\n      v-for=\"{ slotName, item, cssClass } in gridItems\"\n      :key=\"item.id\"\n      :class=\"cssClass\"\n      class=\"x-grid__item x-base-grid__item\"\n    >\n      <!--\n        @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n        the item using that slot composition to render.\n            @binding {item} item - Item to render\n      -->\n      <slot v-if=\"$scopedSlots[slotName]\" :name=\"slotName\" :item=\"item\" />\n      <!--\n        @slot (required) Default item rendering. This slot will be used by default for rendering\n        the item without an specific slot implementation.\n            @binding {item} item - Item to render\n      -->\n      <slot v-else :item=\"item\">{{ item.name || item.modelName || item.id || item }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { toKebabCase } from '../utils/string';\n  import { ListItem, VueCSSClasses } from '../utils/types';\n  import { XInject } from './decorators/injection.decorators';\n  import { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n  /**\n   * The type returned by the gridItems function. Basically it's a list of items with its CSS\n   * classes and a slotName.\n   *\n   * @internal\n   */\n  interface GridItem {\n    slotName: string;\n    item: ListItem;\n    cssClass: VueCSSClasses;\n  }\n\n  /**\n   * Grid component that is able to render different items based on their modelName value. In order\n   * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n   * do not have modelName property, the default slot is used instead. It has a required property:\n   * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n   * number of columns is not specified, the grid automatically fills the rows with as many columns\n   * as it can fit.\n   *\n   * @public\n   */\n  @Component({})\n  export default class BaseGrid extends Vue {\n    /**\n     * Animation component that will be used to animate the base grid.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n     * columns mode to auto-fill.\n     *\n     * @public\n     */\n    @Prop({ default: 0 })\n    protected columns!: number;\n\n    /**\n     * The list of items to be rendered.\n     *\n     * @remarks The items must have an id property.\n     *\n     * @public\n     */\n    @Prop()\n    protected items!: ListItem[];\n\n    /**\n     * It injects {@link ListItem} provided by an ancestor.\n     *\n     * @internal\n     */\n    @XInject(LIST_ITEMS_KEY)\n    public injectedListItems!: ListItem[];\n\n    /**\n     * It returns the items passed as props or the injected ones.\n     *\n     * @returns List of grid items.\n     *\n     * @public\n     */\n    protected get computedItems(): ListItem[] {\n      return (\n        this.items ??\n        this.injectedListItems ??\n        //TODO: add here logger\n        //eslint-disable-next-line no-console\n        console.warn('It is necessary to pass a prop or inject the list of filters')\n      );\n    }\n\n    /**\n     * CSS class based on the column property value so items inside the grid can fill different\n     * amount of columns or rows based on how many columns the grid is divided into.\n     *\n     * @returns CSS class with the column property value.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return this.columns ? `x-grid--cols-${this.columns}` : 'x-grid--cols-auto';\n    }\n\n    /**\n     * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n     * the column property value.\n     *\n     * @returns A CSSStyleDeclaration to use as the style attribute.\n     *\n     * @internal\n     */\n    protected get style(): Partial<CSSStyleDeclaration> {\n      return {\n        gridTemplateColumns: this.columns\n          ? `repeat(${this.columns}, minmax(0, 1fr))`\n          : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'\n      };\n    }\n\n    /**\n     * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n     *\n     * @returns An array of objects containing the item and its CSS class.\n     *\n     * @internal\n     */\n    protected get gridItems(): GridItem[] {\n      return this.computedItems.map(item => {\n        const slotName = toKebabCase(item.modelName);\n        return {\n          slotName,\n          item,\n          cssClass: `x-base-grid__${slotName}`\n        };\n      });\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-base-grid {\n    padding: var(--x-size-padding-grid, 0);\n    margin: 0;\n    display: grid;\n    grid-auto-flow: dense;\n    list-style: none;\n\n    &__banner,\n    &__next-queries-group {\n      grid-column-start: 1;\n      grid-column-end: -1;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" :columns=\"12\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n  <BaseGrid :animation=\"animation\" :items=\"items\">\n    <template #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ `${item.title} banner` }}\n      </span>\n    </template>\n    <template #next-queries=\"{ item }\">\n      <span>\n        {{ `${item.totalResults} next queries` }}\n      </span>\n    </template>\n    <template #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ `${item.title} promoted` }}\n      </span>\n    </template>\n    <template #result=\"{ item }\">\n      <BaseResultLink :result=\"item\">\n        {{ item.name }}\n      </BaseResultLink>\n    </template>\n  </BaseGrid>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/decorators/injection.consts.js

@@ -3,7 +3,13 @@
  *
  * @internal
  */
-const LIST_ITEMS_KEY = 'listItems';
+const LIST_ITEMS_KEY = 'listItems';
+/**
+ * It's used to identify the provided and injected `query`.
+ *
+ * @internal
+ */
+const QUERY_KEY = 'query';
 
-export { LIST_ITEMS_KEY };
+export { LIST_ITEMS_KEY, QUERY_KEY };
 //# sourceMappingURL=injection.consts.js.map

package/js/components/decorators/injection.consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"injection.consts.js","sources":["../../../../src/components/decorators/injection.consts.ts"],"sourcesContent":["import { ListItem } from '../../utils/types';\nimport { XInjectKey } from './injection.decorators';\n\n/**\n * It's used to identify the provided and injected `items`.\n *\n * @internal\n */\nexport const LIST_ITEMS_KEY: XInjectKey<ListItem[] | undefined> = 'listItems';\n"],"names":[],"mappings":"AAGA;;;;;MAKa,cAAc,GAAuC;;;;"}
+{"version":3,"file":"injection.consts.js","sources":["../../../../src/components/decorators/injection.consts.ts"],"sourcesContent":["import { ListItem } from '../../utils/types';\nimport { XInjectKey } from './injection.decorators';\n\n/**\n * It's used to identify the provided and injected `items`.\n *\n * @internal\n */\nexport const LIST_ITEMS_KEY: XInjectKey<ListItem[] | undefined> = 'listItems';\n\n/**\n * It's used to identify the provided and injected `query`.\n *\n * @internal\n */\nexport const QUERY_KEY: XInjectKey<string | undefined> = 'query';\n"],"names":[],"mappings":"AAGA;;;;;MAKa,cAAc,GAAuC,YAAY;AAE9E;;;;;MAKa,SAAS,GAAmC;;;;"}

package/js/index.js

@@ -118,7 +118,7 @@ export { default as SlidingPanel } from './components/sliding-panel.vue.js';
 export { default as SnippetCallbacks } from './components/snippet-callbacks.vue.js';
 export { XEmit, XOn } from './components/decorators/bus.decorators.js';
 export { Debounce } from './components/decorators/debounce.decorators.js';
-export { LIST_ITEMS_KEY } from './components/decorators/injection.consts.js';
+export { LIST_ITEMS_KEY, QUERY_KEY } from './components/decorators/injection.consts.js';
 export { XInject, XProvide } from './components/decorators/injection.decorators.js';
 export { Getter, State } from './components/decorators/store.decorators.js';
 export { ItemsListInjectionMixin } from './components/items-list-injection.mixin.js';
@@ -241,8 +241,9 @@ export { identifierResultsXStoreModule } from './x-modules/identifier-results/st
 export { cancelFetchAndSaveIdentifierResultsWire, clearIdentifierResultsQuery, fetchAndSaveIdentifierResultsWire, identifierResultsWiring, saveIdentifierResultsOriginWire, setIdentifierResultsExtraParams, setIdentifierResultsQuery } from './x-modules/identifier-results/wiring.js';
 export { identifierResultsXModule } from './x-modules/identifier-results/x-module.js';
 export { default as NextQueries } from './x-modules/next-queries/components/next-queries.vue.js';
-export { default as NextQuery } from './x-modules/next-queries/components/next-query.vue.js';
 export { default as NextQueriesList } from './x-modules/next-queries/components/next-queries-list.vue.js';
+export { default as NextQuery } from './x-modules/next-queries/components/next-query.vue.js';
+export { default as NextQueryPreview } from './x-modules/next-queries/components/next-query-preview.vue.js';
 export { cancelFetchAndSaveNextQueries, fetchAndSaveNextQueries } from './x-modules/next-queries/store/actions/fetch-and-save-next-queries.action.js';
 export { fetchNextQueries } from './x-modules/next-queries/store/actions/fetch-next-queries.action.js';
 export { setQueryFromLastHistoryQuery } from './x-modules/next-queries/store/actions/set-query-from-last-history-query.action.js';

package/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}