@empathyco/x-components 3.0.0-alpha.152 → 3.0.0-alpha.153

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.153](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.152...@empathyco/x-components@3.0.0-alpha.153) (2022-08-10)
+
+### Features
+
+- **next-queries:** add `maxItemsToRender` prop to `NextQueryPreview` component (#646)
+  ([848427c](https://github.com/empathyco/x/commit/848427cb9dae85c72549ab026b3785194ec4adbd)),
+  closes [EX-6820](https://searchbroker.atlassian.net/browse/EX-6820)
+
+# 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.152](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.151...@empathyco/x-components@3.0.0-alpha.152) (2022-08-10)
 
 ### ⚠ BREAKING CHANGES

package/design-system/full-theme.css

@@ -677,6 +677,9 @@
 .x-dropdown.x-dropdown--m {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
 }
+:root {
+  --x-size-width-dropdown-m: 130px;
+}
 .x-dropdown--pill {
   --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-pill);
   --x-size-border-radius-top-left-dropdown-default: calc(
@@ -3068,9 +3071,6 @@
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
 }
-:root {
-  --x-size-width-dropdown-m: 130px;
-}
 .x-picture--card.x-picture {
   --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
@@ -3526,6 +3526,14 @@
 .x-row--padding-06 {
   --x-size-padding-row: var(--x-size-padding-row-06);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-row-02: var(--x-size-base-02);
+  --x-size-padding-row-03: var(--x-size-base-03);
+  --x-size-padding-row-04: var(--x-size-base-04);
+  --x-size-padding-row-05: var(--x-size-base-05);
+  --x-size-padding-row-06: var(--x-size-base-06);
+}
 .x-scroll {
   overflow-y: var(--x-string-overflow-scroll);
 }
@@ -3552,14 +3560,6 @@
     --x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
   }
 }
-/* @deprecated */
-:root {
-  --x-size-padding-row-02: var(--x-size-base-02);
-  --x-size-padding-row-03: var(--x-size-base-03);
-  --x-size-padding-row-04: var(--x-size-base-04);
-  --x-size-padding-row-05: var(--x-size-base-05);
-  --x-size-padding-row-06: var(--x-size-base-06);
-}
 :root {
   --x-string-overflow-scroll: auto;
   --x-color-background-scroll-bar: transparent;

package/docs/API-reference/api/x-components.nextquerypreview.maxitemstorender.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; [maxItemsToRender](./x-components.nextquerypreview.maxitemstorender.md)
+
+## NextQueryPreview.maxItemsToRender property
+
+Number of suggestion results to be rendered.
+
+<b>Signature:</b>
+
+```typescript
+protected maxItemsToRender?: number;
+```

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

@@ -17,9 +17,10 @@ export default class NextQueryPreview extends Vue
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [maxItemsToRender?](./x-components.nextquerypreview.maxitemstorender.md) |  | number | <i>(Optional)</i> Number of suggestion results to be rendered. |
 |  [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. |
+|  [suggestionResults](./x-components.nextquerypreview.suggestionresults.md) |  | PreviewResults \| undefined | Gets from the state the results preview of the next query. |
 
 ## Methods
 

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

@@ -9,5 +9,5 @@ Gets from the state the results preview of the next query.
 <b>Signature:</b>
 
 ```typescript
-get suggestionResults(): PreviewResults;
+get suggestionResults(): PreviewResults | undefined;
 ```

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

@@ -12,9 +12,10 @@ 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> |
+| Name                          | Description                                     | Type                   | Default       |
+| ----------------------------- | ----------------------------------------------- | ---------------------- | ------------- |
+| <code>suggestion</code>       | The next query to retrieve the results preview. | <code>NextQuery</code> | <code></code> |
+| <code>maxItemsToRender</code> | Number of suggestion results to be rendered.    | <code>number</code>    | <code></code> |
 
 ## Slots
 
@@ -153,3 +154,52 @@ export default {
 };
 </script>
 ```
+
+### Play with props
+
+In this example, the suggestions has been limited to render a maximum of 4 items.
+
+```vue
+<template>
+  <NextQueryPreview
+    :maxItemsToRender="maxItemsToRender"
+    :suggestion="suggestion"
+    #default="{ results }"
+  >
+    <BaseGrid #default="{ item }" :items="results">
+      <BaseResultLink :result="item">
+        <BaseResultImage :result="item" />
+      </BaseResultLink>
+    </BaseGrid>
+  </NextQueryPreview>
+</template>
+
+<script>
+import {
+  BaseGrid,
+  BaseResultImage,
+  BaseResultLink
+} from "@empathyco/x-components";
+import { NextQueryPreview } from "@empathyco/x-components/next-queries";
+
+export default {
+  name: "NextQueryPreviewDemo",
+  components: {
+    BaseGrid,
+    BaseResultImage,
+    BaseResultLink,
+    NextQueryPreview
+  },
+  data() {
+    return {
+      maxItemsToRender: 4,
+      suggestion: {
+        modelName: "NextQuery",
+        query: "tshirt",
+        facets: []
+      }
+    };
+  }
+};
+</script>
+```

package/js/x-modules/next-queries/components/next-query-preview.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"next-query-preview.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n  <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n    <!--\n      @slot Next Query Preview default slot.\n          @binding {NextQuery} suggestion - Next Query suggestion data\n          @binding {Result[]} results - The results preview of the next query\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :suggestion=\"suggestion\"\n      :results=\"suggestionResults.items\"\n      :totalResults=\"suggestionResults.totalResults\"\n    >\n      <li\n        v-for=\"result in suggestionResults.items\"\n        :key=\"result.id\"\n        class=\"x-next-query-preview__item\"\n        data-test=\"next-query-preview-item\"\n      >\n        <!--\n          @slot Next Query Preview result slot.\n              @binding {Result} result - A Next Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </slot>\n  </ul>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NextQuery, PreviewResults } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { nextQueriesXModule } from '../x-module';\n  import { State } from '../../../components/decorators/store.decorators';\n\n  /**\n   * Retrieves a preview of the results of a next query and exposes them in the default slot,\n   * along with the next query and the totalResults of the search request.\n   * By default, it renders the names of the results.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(nextQueriesXModule)]\n  })\n  export default class NextQueryPreview extends Vue {\n    /**\n     * The next query to retrieve the results preview.\n     *\n     * @public\n     */\n    @Prop({\n      required: true\n    })\n    protected suggestion!: NextQuery;\n\n    /**\n     * The results preview of the next queries mounted.\n     * It is a dictionary, indexed by the next query query.\n     */\n    @State('nextQueries', 'resultsPreview')\n    public previewResults!: Dictionary<PreviewResults>;\n\n    /**\n     * The component emits the NextQueryPreviewMounted event to retrieve the results preview\n     * of the next query.\n     */\n    mounted(): void {\n      this.$x.emit('NextQueryPreviewMounted', this.suggestion.query);\n    }\n\n    /**\n     * Gets from the state the results preview of the next query.\n     *\n     * @returns The results preview of the actual next query.\n     */\n    public get suggestionResults(): PreviewResults {\n      return this.previewResults[this.suggestion.query];\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the `NextQueryPreviewMounted` when it is mounted.\n\n## See it in action\n\nHere you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemo',\n    components: {\n      NextQueryPreview\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #default=\"{ totalResults, results }\">\n    <p>Total results: {{ totalResults }}</p>\n    <SlidingPanel :resetOnContentChange=\"false\">\n      <article\n        v-for=\"result in results\"\n        :key=\"result.id\"\n        class=\"x-result\"\n        style=\"max-width: 300px; overflow: hidden\"\n      >\n        <BaseResultLink :result=\"result\">\n          <BaseResultImage :result=\"result\" class=\"x-result__picture\" />\n        </BaseResultLink>\n        <div class=\"x-result__description\">\n          <BaseResultLink :result=\"result\">\n            <h1 class=\"x-title3\">{{ result.name }}</h1>\n          </BaseResultLink>\n        </div>\n      </article>\n    </SlidingPanel>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n  import { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueryPreviewDemoOverridingSlot',\n    components: {\n      NextQueryPreview,\n      SlidingPanel,\n      BaseResultLink,\n      BaseResultImage\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemoOverridingResultSlot',\n    components: {\n      NextQueryPreview\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"next-query-preview.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n  <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n    <!--\n      @slot Next Query Preview default slot.\n          @binding {NextQuery} suggestion - Next Query suggestion data\n          @binding {Result[]} results - The results preview of the next query\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :suggestion=\"suggestion\"\n      :results=\"suggestionResults.items\"\n      :totalResults=\"suggestionResults.totalResults\"\n    >\n      <li\n        v-for=\"result in suggestionResults.items\"\n        :key=\"result.id\"\n        class=\"x-next-query-preview__item\"\n        data-test=\"next-query-preview-item\"\n      >\n        <!--\n          @slot Next Query Preview result slot.\n              @binding {Result} result - A Next Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </slot>\n  </ul>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NextQuery, PreviewResults } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { nextQueriesXModule } from '../x-module';\n  import { State } from '../../../components/decorators/store.decorators';\n\n  /**\n   * Retrieves a preview of the results of a next query and exposes them in the default slot,\n   * along with the next query and the totalResults of the search request.\n   * By default, it renders the names of the results.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(nextQueriesXModule)]\n  })\n  export default class NextQueryPreview extends Vue {\n    /**\n     * The next query to retrieve the results preview.\n     *\n     * @public\n     */\n    @Prop({\n      required: true\n    })\n    protected suggestion!: NextQuery;\n\n    /**\n     * Number of suggestion results to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The results preview of the next queries mounted.\n     * It is a dictionary, indexed by the next query query.\n     */\n    @State('nextQueries', 'resultsPreview')\n    public previewResults!: Dictionary<PreviewResults>;\n\n    /**\n     * The component emits the NextQueryPreviewMounted event to retrieve the results preview\n     * of the next query.\n     */\n    mounted(): void {\n      this.$x.emit('NextQueryPreviewMounted', this.suggestion.query);\n    }\n\n    /**\n     * Gets from the state the results preview of the next query.\n     *\n     * @returns The results preview of the actual next query.\n     */\n    public get suggestionResults(): PreviewResults | undefined {\n      const previewResults = this.previewResults[this.suggestion.query];\n\n      return previewResults\n        ? {\n            ...previewResults,\n            items: previewResults.items.slice(0, this.maxItemsToRender)\n          }\n        : undefined;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the `NextQueryPreviewMounted` when it is mounted.\n\n## See it in action\n\nHere you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" />\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemo',\n    components: {\n      NextQueryPreview\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #default=\"{ totalResults, results }\">\n    <p>Total results: {{ totalResults }}</p>\n    <SlidingPanel :resetOnContentChange=\"false\">\n      <article\n        v-for=\"result in results\"\n        :key=\"result.id\"\n        class=\"x-result\"\n        style=\"max-width: 300px; overflow: hidden\"\n      >\n        <BaseResultLink :result=\"result\">\n          <BaseResultImage :result=\"result\" class=\"x-result__picture\" />\n        </BaseResultLink>\n        <div class=\"x-result__description\">\n          <BaseResultLink :result=\"result\">\n            <h1 class=\"x-title3\">{{ result.name }}</h1>\n          </BaseResultLink>\n        </div>\n      </article>\n    </SlidingPanel>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n  import { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueryPreviewDemoOverridingSlot',\n    components: {\n      NextQueryPreview,\n      SlidingPanel,\n      BaseResultLink,\n      BaseResultImage\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemoOverridingResultSlot',\n    components: {\n      NextQueryPreview\n    },\n    data() {\n      return {\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 4 items.\n\n```vue\n<template>\n  <NextQueryPreview\n    :maxItemsToRender=\"maxItemsToRender\"\n    :suggestion=\"suggestion\"\n    #default=\"{ results }\"\n  >\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </NextQueryPreview>\n</template>\n\n<script>\n  import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components';\n  import { NextQueryPreview } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueryPreviewDemo',\n    components: {\n      BaseGrid,\n      BaseResultImage,\n      BaseResultLink,\n      NextQueryPreview\n    },\n    data() {\n      return {\n        maxItemsToRender: 4,\n        suggestion: {\n          modelName: 'NextQuery',\n          query: 'tshirt',\n          facets: []\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/next-queries/components/next-query-preview.vue_rollup-plugin-vue_script.vue.js

@@ -26,7 +26,13 @@ let NextQueryPreview = class NextQueryPreview extends Vue {
      * @returns The results preview of the actual next query.
      */
     get suggestionResults() {
-        return this.previewResults[this.suggestion.query];
+        const previewResults = this.previewResults[this.suggestion.query];
+        return previewResults
+            ? {
+                ...previewResults,
+                items: previewResults.items.slice(0, this.maxItemsToRender)
+            }
+            : undefined;
     }
 };
 __decorate([
@@ -34,6 +40,9 @@ __decorate([
         required: true
     })
 ], NextQueryPreview.prototype, "suggestion", void 0);
+__decorate([
+    Prop()
+], NextQueryPreview.prototype, "maxItemsToRender", void 0);
 __decorate([
     State('nextQueries', 'resultsPreview')
 ], NextQueryPreview.prototype, "previewResults", void 0);

package/js/x-modules/next-queries/components/next-query-preview.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"next-query-preview.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NextQuery, PreviewResults } from '@empathyco/x-types';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { nextQueriesXModule } from '../x-module';\nimport { State } from '../../../components/decorators/store.decorators';\n\n/**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueryPreview extends Vue {\n  /**\n   * The next query to retrieve the results preview.\n   *\n   * @public\n   */\n  @Prop({\n    required: true\n  })\n  protected suggestion!: NextQuery;\n\n  /**\n   * The results preview of the next queries mounted.\n   * It is a dictionary, indexed by the next query query.\n   */\n  @State('nextQueries', 'resultsPreview')\n  public previewResults!: Dictionary<PreviewResults>;\n\n  /**\n   * The component emits the NextQueryPreviewMounted event to retrieve the results preview\n   * of the next query.\n   */\n  mounted(): void {\n    this.$x.emit('NextQueryPreviewMounted', this.suggestion.query);\n  }\n\n  /**\n   * Gets from the state the results preview of the next query.\n   *\n   * @returns The results preview of the actual next query.\n   */\n  public get suggestionResults(): PreviewResults {\n    return this.previewResults[this.suggestion.query];\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAwCA;;;;;;;AAUA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;;;;;IAsB/C,OAAO;QACL,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAChE;;;;;;IAOD,IAAW,iBAAiB;QAC1B,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KACnD;CACF,CAAA;AAzBC;IAHC,IAAI,CAAC;QACJ,QAAQ,EAAE,IAAI;KACf,CAAC;oDAC+B;AAOjC;IADC,KAAK,CAAC,aAAa,EAAE,gBAAgB,CAAC;wDACY;AAhBhC,gBAAgB;IAHpC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,gBAAgB,CAkCpC;aAlCoB,gBAAgB;;;;"}
+{"version":3,"file":"next-query-preview.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NextQuery, PreviewResults } from '@empathyco/x-types';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { nextQueriesXModule } from '../x-module';\nimport { State } from '../../../components/decorators/store.decorators';\n\n/**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueryPreview extends Vue {\n  /**\n   * The next query to retrieve the results preview.\n   *\n   * @public\n   */\n  @Prop({\n    required: true\n  })\n  protected suggestion!: NextQuery;\n\n  /**\n   * Number of suggestion results to be rendered.\n   *\n   * @public\n   */\n  @Prop()\n  protected maxItemsToRender?: number;\n\n  /**\n   * The results preview of the next queries mounted.\n   * It is a dictionary, indexed by the next query query.\n   */\n  @State('nextQueries', 'resultsPreview')\n  public previewResults!: Dictionary<PreviewResults>;\n\n  /**\n   * The component emits the NextQueryPreviewMounted event to retrieve the results preview\n   * of the next query.\n   */\n  mounted(): void {\n    this.$x.emit('NextQueryPreviewMounted', this.suggestion.query);\n  }\n\n  /**\n   * Gets from the state the results preview of the next query.\n   *\n   * @returns The results preview of the actual next query.\n   */\n  public get suggestionResults(): PreviewResults | undefined {\n    const previewResults = this.previewResults[this.suggestion.query];\n\n    return previewResults\n      ? {\n          ...previewResults,\n          items: previewResults.items.slice(0, this.maxItemsToRender)\n        }\n      : undefined;\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAwCA;;;;;;;AAUA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;;;;;IA8B/C,OAAO;QACL,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAChE;;;;;;IAOD,IAAW,iBAAiB;QAC1B,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAElE,OAAO,cAAc;cACjB;gBACE,GAAG,cAAc;gBACjB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC;aAC5D;cACD,SAAS,CAAC;KACf;CACF,CAAA;AAxCC;IAHC,IAAI,CAAC;QACJ,QAAQ,EAAE,IAAI;KACf,CAAC;oDAC+B;AAQjC;IADC,IAAI,EAAE;0DAC6B;AAOpC;IADC,KAAK,CAAC,aAAa,EAAE,gBAAgB,CAAC;wDACY;AAxBhC,gBAAgB;IAHpC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,gBAAgB,CAiDpC;aAjDoB,gBAAgB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.152",
+  "version": "3.0.0-alpha.153",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -125,5 +125,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "478dd99614dd1a5b666df9193cb3666aa2d1b6c0"
+  "gitHead": "bd382b4a1cbf85f43f1a9091f63caa328edcf719"
 }

package/report/x-components.api.json

@@ -27845,6 +27845,33 @@
           "releaseTag": "Public",
           "name": "NextQueryPreview",
           "members": [
+            {
+              "kind": "Property",
+              "canonicalReference": "@empathyco/x-components!NextQueryPreview#maxItemsToRender:member",
+              "docComment": "/**\n * Number of suggestion results to be rendered.\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "protected maxItemsToRender?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "number"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "maxItemsToRender",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false
+            },
             {
               "kind": "Method",
               "canonicalReference": "@empathyco/x-components!NextQueryPreview#mounted:member(1)",
@@ -27957,6 +27984,10 @@
                   "text": "PreviewResults",
                   "canonicalReference": "@empathyco/x-components!PreviewResults:interface"
                 },
+                {
+                  "kind": "Content",
+                  "text": " | undefined"
+                },
                 {
                   "kind": "Content",
                   "text": ";"
@@ -27967,7 +27998,7 @@
               "name": "suggestionResults",
               "propertyTypeTokenRange": {
                 "startIndex": 1,
-                "endIndex": 2
+                "endIndex": 3
               },
               "isStatic": false
             }

package/report/x-components.api.md

@@ -2600,10 +2600,11 @@ export class NextQuery extends Vue_2 {
 
 // @public
 export class NextQueryPreview extends Vue_2 {
+    protected maxItemsToRender?: number;
     mounted(): void;
     previewResults: Dictionary<PreviewResults>;
     protected suggestion: NextQuery_2;
-    get suggestionResults(): PreviewResults;
+    get suggestionResults(): PreviewResults | undefined;
 }
 
 // @public

package/types/x-modules/next-queries/components/next-query-preview.vue.d.ts

@@ -15,6 +15,12 @@ export default class NextQueryPreview extends Vue {
      * @public
      */
     protected suggestion: NextQuery;
+    /**
+     * Number of suggestion results to be rendered.
+     *
+     * @public
+     */
+    protected maxItemsToRender?: number;
     /**
      * The results preview of the next queries mounted.
      * It is a dictionary, indexed by the next query query.
@@ -30,6 +36,6 @@ export default class NextQueryPreview extends Vue {
      *
      * @returns The results preview of the actual next query.
      */
-    get suggestionResults(): PreviewResults;
+    get suggestionResults(): PreviewResults | undefined;
 }
 //# sourceMappingURL=next-query-preview.vue?rollup-plugin-vue=script.d.ts.map

package/types/x-modules/next-queries/components/next-query-preview.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next-query-preview.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgCA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKhD;;;;;;GAMG;AAIH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,GAAG;IAC/C;;;;OAIG;IAIH,SAAS,CAAC,UAAU,EAAG,SAAS,CAAC;IAEjC;;;OAGG;IAEI,cAAc,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAEnD;;;OAGG;IACH,OAAO,IAAI,IAAI;IAIf;;;;OAIG;IACH,IAAW,iBAAiB,IAAI,cAAc,CAE7C;CACF"}
+{"version":3,"file":"next-query-preview.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgCA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKhD;;;;;;GAMG;AAIH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,GAAG;IAC/C;;;;OAIG;IAIH,SAAS,CAAC,UAAU,EAAG,SAAS,CAAC;IAEjC;;;;OAIG;IAEH,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEpC;;;OAGG;IAEI,cAAc,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAEnD;;;OAGG;IACH,OAAO,IAAI,IAAI;IAIf;;;;OAIG;IACH,IAAW,iBAAiB,IAAI,cAAc,GAAG,SAAS,CASzD;CACF"}