@empathyco/x-components 3.0.0-alpha.151 → 3.0.0-alpha.154

package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\nimport { forEach, Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Watch, Inject, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { SnippetConfig } from '../../../x-installer/api/api.types';\nimport { extraParamsXModule } from '../x-module';\nimport ExtraParams from './extra-params.vue';\n\n/**\n * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request\n * objects of every x-module.\n *\n * @public\n */\n@Component({\n  components: { ExtraParams },\n  mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class SnippetConfigExtraParams extends Vue {\n  /**\n   * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n   *\n   * @internal\n   */\n  @Inject('snippetConfig')\n  public snippetConfig!: SnippetConfig;\n\n  /**\n   * A Dictionary where the keys are the extra param names and its values.\n   *\n   * @public\n   */\n  @Prop()\n  protected values?: Dictionary<unknown>;\n\n  /**\n   * Custom object containing the extra params from the snippet config.\n   *\n   * @remarks This object keeps manually the desired snippet config properties to avoid\n   * unnecessary re-renders.\n   *\n   * @internal\n   */\n  protected extraParams: Dictionary<unknown> = {};\n\n  /**\n   * Collection of properties from the snippet config to exclude from the\n   * extra params object.\n   *\n   * @public\n   */\n  @Prop({\n    default: (): Array<keyof SnippetConfig> => [\n      'callbacks',\n      'productId',\n      'searchLang',\n      'consent',\n      'documentDirection',\n      'currency',\n      'filters'\n    ]\n  })\n  protected excludedExtraParams!: Array<keyof SnippetConfig>;\n\n  /**\n   * Updates the extraParams object when the snippet config changes.\n   *\n   * @param snippetConfig - The new snippet config.\n   *\n   * @internal\n   */\n  @Watch('snippetConfig', { deep: true, immediate: true })\n  syncExtraParams(snippetConfig: SnippetConfig): void {\n    forEach({ ...this.values, ...snippetConfig }, (name, value) => {\n      if (this.excludedExtraParams.includes(name)) {\n        return;\n      }\n      this.$set(this.extraParams, name, value);\n    });\n  }\n}\n"],"names":["ExtraParams"],"mappings":";;;;;;;;AAaA;;;;;;AAUA,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,GAAG;IAAzD;;;;;;;;;;QAyBY,gBAAW,GAAwB,EAAE,CAAC;KAqCjD;;;;;;;;IARC,eAAe,CAAC,aAA4B;QAC1C,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC,IAAI,EAAE,KAAK;YACxD,IAAI,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBAC3C,OAAO;aACR;YACD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SAC1C,CAAC,CAAC;KACJ;CACF,CAAA;AAvDC;IADC,MAAM,CAAC,eAAe,CAAC;+DACa;AAQrC;IADC,IAAI,EAAE;wDACgC;AA6BvC;IAXC,IAAI,CAAC;QACJ,OAAO,EAAE,MAAkC;YACzC,WAAW;YACX,WAAW;YACX,YAAY;YACZ,SAAS;YACT,mBAAmB;YACnB,UAAU;YACV,SAAS;SACV;KACF,CAAC;qEACyD;AAU3D;IADC,KAAK,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+DAQvD;AA7DkB,wBAAwB;IAJ5C,SAAS,CAAC;QACT,UAAU,EAAE,eAAEA,iBAAW,EAAE;QAC3B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,wBAAwB,CA8D5C;aA9DoB,wBAAwB;;;;"}
+{"version":3,"file":"snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\nimport { forEach, Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Watch, Inject, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { SnippetConfig } from '../../../x-installer/api/api.types';\nimport { extraParamsXModule } from '../x-module';\nimport ExtraParams from './extra-params.vue';\n\n/**\n * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request\n * objects of every x-module.\n *\n * @public\n */\n@Component({\n  components: { ExtraParams },\n  mixins: [xComponentMixin(extraParamsXModule)]\n})\nexport default class SnippetConfigExtraParams extends Vue {\n  /**\n   * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n   *\n   * @internal\n   */\n  @Inject('snippetConfig')\n  public snippetConfig!: SnippetConfig;\n\n  /**\n   * A Dictionary where the keys are the extra param names and its values.\n   *\n   * @public\n   */\n  @Prop()\n  protected values?: Dictionary<unknown>;\n\n  /**\n   * Custom object containing the extra params from the snippet config.\n   *\n   * @remarks This object keeps manually the desired snippet config properties to avoid\n   * unnecessary re-renders.\n   *\n   * @internal\n   */\n  protected extraParams: Dictionary<unknown> = {};\n\n  /**\n   * Collection of properties from the snippet config to exclude from the\n   * extra params object.\n   *\n   * @public\n   */\n  @Prop({\n    default: (): Array<keyof SnippetConfig> => [\n      'callbacks',\n      'productId',\n      'searchLang',\n      'consent',\n      'documentDirection',\n      'currency',\n      'filters',\n      'isSpa',\n      'queriesPreview'\n    ]\n  })\n  protected excludedExtraParams!: Array<keyof SnippetConfig>;\n\n  /**\n   * Updates the extraParams object when the snippet config changes.\n   *\n   * @param snippetConfig - The new snippet config.\n   *\n   * @internal\n   */\n  @Watch('snippetConfig', { deep: true, immediate: true })\n  syncExtraParams(snippetConfig: SnippetConfig): void {\n    forEach({ ...this.values, ...snippetConfig }, (name, value) => {\n      if (!this.excludedExtraParams.includes(name)) {\n        this.$set(this.extraParams, name, value);\n      }\n    });\n  }\n}\n"],"names":["ExtraParams"],"mappings":";;;;;;;;AAaA;;;;;;AAUA,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,GAAG;IAAzD;;;;;;;;;;QAyBY,gBAAW,GAAwB,EAAE,CAAC;KAsCjD;;;;;;;;IAPC,eAAe,CAAC,aAA4B;QAC1C,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC,IAAI,EAAE,KAAK;YACxD,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBAC5C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;aAC1C;SACF,CAAC,CAAC;KACJ;CACF,CAAA;AAxDC;IADC,MAAM,CAAC,eAAe,CAAC;+DACa;AAQrC;IADC,IAAI,EAAE;wDACgC;AA+BvC;IAbC,IAAI,CAAC;QACJ,OAAO,EAAE,MAAkC;YACzC,WAAW;YACX,WAAW;YACX,YAAY;YACZ,SAAS;YACT,mBAAmB;YACnB,UAAU;YACV,SAAS;YACT,OAAO;YACP,gBAAgB;SACjB;KACF,CAAC;qEACyD;AAU3D;IADC,KAAK,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+DAOvD;AA9DkB,wBAAwB;IAJ5C,SAAS,CAAC;QACT,UAAU,EAAE,eAAEA,iBAAW,EAAE;QAC3B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,wBAAwB,CA+D5C;aA/DoB,wBAAwB;;;;"}

package/js/x-modules/identifier-results/components/identifier-result.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"identifier-result.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    v-html=\"highlightedQueryHTML\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter, State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { identifierResultsXModule } from '../x-module';\n\n  /**\n   * This component renders an identifier result value and highlights its matching part with the\n   * query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(identifierResultsXModule)]\n  })\n  export default class IdentifierResult extends Vue {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result | result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\n\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    @State('identifierResults', 'query')\n    public query!: string;\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    @Getter('identifierResults', 'identifierHighlightRegexp')\n    public identifierHighlightRegexp!: RegExp;\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    protected get highlightedQueryHTML(): string {\n      const identifierValue = this.result.identifier.value;\n      if (identifierValue && this.identifierHighlightRegexp) {\n        return identifierValue.replace(\n          this.identifierHighlightRegexp,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>'\n        );\n      }\n      return identifierValue;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"identifier-result.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    v-html=\"highlightedQueryHTML\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter, State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { identifierResultsXModule } from '../x-module';\n\n  /**\n   * This component renders an identifier result value and highlights its matching part with the\n   * query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(identifierResultsXModule)]\n  })\n  export default class IdentifierResult extends Vue {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result | result} information.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected result!: Result;\n\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    @State('identifierResults', 'query')\n    public query!: string;\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    @Getter('identifierResults', 'identifierHighlightRegexp')\n    public identifierHighlightRegexp!: RegExp;\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    protected get highlightedQueryHTML(): string {\n      const identifierValue = this.result.identifier?.value ?? '';\n      if (identifierValue && this.identifierHighlightRegexp) {\n        return identifierValue.replace(\n          this.identifierHighlightRegexp,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>'\n        );\n      }\n      return identifierValue;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/identifier-results/components/identifier-result.vue_rollup-plugin-vue_script.vue.js

@@ -19,7 +19,7 @@ let IdentifierResult = class IdentifierResult extends Vue {
      * @public
      */
     get highlightedQueryHTML() {
-        const identifierValue = this.result.identifier.value;
+        const identifierValue = this.result.identifier?.value ?? '';
         if (identifierValue && this.identifierHighlightRegexp) {
             return identifierValue.replace(this.identifierHighlightRegexp, '<span class="x-identifier-result__matching-part">$1</span>');
         }

package/js/x-modules/identifier-results/components/identifier-result.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"identifier-result.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter, State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { identifierResultsXModule } from '../x-module';\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(identifierResultsXModule)]\n})\nexport default class IdentifierResult extends Vue {\n  /**\n   * (Required) The {@link @empathyco/x-types#Result | result} information.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected result!: Result;\n\n  /**\n   * Query from the module state.\n   *\n   * @public\n   */\n  @State('identifierResults', 'query')\n  public query!: string;\n\n  /**\n   * The RegExp with the current query from the state adding the separatorChars after each\n   * matching character.\n   *\n   * @public\n   */\n  @Getter('identifierResults', 'identifierHighlightRegexp')\n  public identifierHighlightRegexp!: RegExp;\n\n  /**\n   * Highlights the matching part of the identifier result with the query from the state.\n   *\n   * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n   * @public\n   */\n  protected get highlightedQueryHTML(): string {\n    const identifierValue = this.result.identifier.value;\n    if (identifierValue && this.identifierHighlightRegexp) {\n      return identifierValue.replace(\n        this.identifierHighlightRegexp,\n        '<span class=\"x-identifier-result__matching-part\">$1</span>'\n      );\n    }\n    return identifierValue;\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAiBA;;;;;;AASA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;;;;;;;IAgC/C,IAAc,oBAAoB;QAChC,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;QACrD,IAAI,eAAe,IAAI,IAAI,CAAC,yBAAyB,EAAE;YACrD,OAAO,eAAe,CAAC,OAAO,CAC5B,IAAI,CAAC,yBAAyB,EAC9B,4DAA4D,CAC7D,CAAC;SACH;QACD,OAAO,eAAe,CAAC;KACxB;CACF,CAAA;AAnCC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gDACC;AAQ1B;IADC,KAAK,CAAC,mBAAmB,EAAE,OAAO,CAAC;+CACd;AAStB;IADC,MAAM,CAAC,mBAAmB,EAAE,2BAA2B,CAAC;mEACf;AAxBvB,gBAAgB;IAHpC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC;KACpD,CAAC;GACmB,gBAAgB,CA0CpC;aA1CoB,gBAAgB;;;;"}
+{"version":3,"file":"identifier-result.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter, State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { identifierResultsXModule } from '../x-module';\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(identifierResultsXModule)]\n})\nexport default class IdentifierResult extends Vue {\n  /**\n   * (Required) The {@link @empathyco/x-types#Result | result} information.\n   *\n   * @public\n   */\n  @Prop({ required: true })\n  protected result!: Result;\n\n  /**\n   * Query from the module state.\n   *\n   * @public\n   */\n  @State('identifierResults', 'query')\n  public query!: string;\n\n  /**\n   * The RegExp with the current query from the state adding the separatorChars after each\n   * matching character.\n   *\n   * @public\n   */\n  @Getter('identifierResults', 'identifierHighlightRegexp')\n  public identifierHighlightRegexp!: RegExp;\n\n  /**\n   * Highlights the matching part of the identifier result with the query from the state.\n   *\n   * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n   * @public\n   */\n  protected get highlightedQueryHTML(): string {\n    const identifierValue = this.result.identifier?.value ?? '';\n    if (identifierValue && this.identifierHighlightRegexp) {\n      return identifierValue.replace(\n        this.identifierHighlightRegexp,\n        '<span class=\"x-identifier-result__matching-part\">$1</span>'\n      );\n    }\n    return identifierValue;\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAiBA;;;;;;AASA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;;;;;;;IAgC/C,IAAc,oBAAoB;QAChC,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,KAAK,IAAI,EAAE,CAAC;QAC5D,IAAI,eAAe,IAAI,IAAI,CAAC,yBAAyB,EAAE;YACrD,OAAO,eAAe,CAAC,OAAO,CAC5B,IAAI,CAAC,yBAAyB,EAC9B,4DAA4D,CAC7D,CAAC;SACH;QACD,OAAO,eAAe,CAAC;KACxB;CACF,CAAA;AAnCC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gDACC;AAQ1B;IADC,KAAK,CAAC,mBAAmB,EAAE,OAAO,CAAC;+CACd;AAStB;IADC,MAAM,CAAC,mBAAmB,EAAE,2BAA2B,CAAC;mEACf;AAxBvB,gBAAgB;IAHpC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC;KACpD,CAAC;GACmB,gBAAgB,CA0CpC;aA1CoB,gBAAgB;;;;"}

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.151",
+  "version": "3.0.0-alpha.154",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -63,7 +63,7 @@
     "@empathyco/x-deep-merge": "^1.3.0-alpha.19",
     "@empathyco/x-logger": "^1.2.0-alpha.3",
     "@empathyco/x-storage-service": "^2.0.0-alpha.2",
-    "@empathyco/x-types": "^10.0.0-alpha.30",
+    "@empathyco/x-types": "^10.0.0-alpha.31",
     "@empathyco/x-utils": "^1.0.0-alpha.5",
     "@types/resize-observer-browser": "~0.1.5",
     "rxjs": "~7.4.0",
@@ -78,7 +78,7 @@
   "devDependencies": {
     "@cypress/vue": "~2.2.4",
     "@cypress/webpack-dev-server": "~1.8.4",
-    "@empathyco/x-adapter-platform": "^1.0.0-alpha.29",
+    "@empathyco/x-adapter-platform": "^1.0.0-alpha.30",
     "@microsoft/api-documenter": "~7.15.3",
     "@microsoft/api-extractor": "~7.19.4",
     "@rollup/plugin-commonjs": "~21.0.1",
@@ -125,5 +125,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "083e19ea7652b512e0cc82553ab98021751cef75"
+  "gitHead": "2b7cac6055cfecd1d120bb541e2b4fda0494b2cd"
 }

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
             }
@@ -30508,6 +30539,116 @@
             "endIndex": 7
           }
         },
+        {
+          "kind": "Interface",
+          "canonicalReference": "@empathyco/x-components!QueryPreview:interface",
+          "docComment": "/**\n * Information to render a query preview with.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export interface QueryPreview "
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "QueryPreview",
+          "members": [
+            {
+              "kind": "IndexSignature",
+              "canonicalReference": "@empathyco/x-components!QueryPreview:index(1)",
+              "docComment": "/**\n * Any other additional information to render the preview with.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "[extra: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": "]: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "unknown"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "returnTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "releaseTag": "Public",
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "extra",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@empathyco/x-components!QueryPreview#query:member",
+              "docComment": "/**\n * The query to search for.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "query: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "query",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@empathyco/x-components!QueryPreview#title:member",
+              "docComment": "/**\n * An optional title for the container.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "title?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "title",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            }
+          ],
+          "extendsTokenRanges": []
+        },
         {
           "kind": "Class",
           "canonicalReference": "@empathyco/x-components!QuerySuggestion:class",
@@ -43333,7 +43474,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": "any"
+                  "text": "unknown"
                 },
                 {
                   "kind": "Content",
@@ -43618,6 +43759,37 @@
                 "endIndex": 2
               }
             },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@empathyco/x-components!SnippetConfig#queriesPreview:member",
+              "docComment": "/**\n * List of queries to preview.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "queriesPreview?: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "QueryPreview",
+                  "canonicalReference": "@empathyco/x-components!QueryPreview:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "[]"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "queriesPreview",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 3
+              }
+            },
             {
               "kind": "PropertySignature",
               "canonicalReference": "@empathyco/x-components!SnippetConfig#scope:member",

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
@@ -2867,6 +2868,13 @@ export type QueryOrigin = `${QueryFeature}:${FeatureLocation}`;
 // @public
 export type QueryOriginInit = Partial<Pick<WireMetadata, 'feature' | 'location'>>;
 
+// @public
+export interface QueryPreview {
+    [extra: string]: unknown;
+    query: string;
+    title?: string;
+}
+
 // @public
 export class QuerySuggestion extends Vue_3 {
     // @internal
@@ -4176,7 +4184,7 @@ export class SnippetCallbacks extends Vue_2 {
 
 // @public
 export interface SnippetConfig {
-    [extra: string]: any;
+    [extra: string]: unknown;
     callbacks?: XEventListeners;
     consent?: boolean;
     currency?: string;
@@ -4187,6 +4195,7 @@ export interface SnippetConfig {
     isSpa?: boolean;
     lang: string;
     productId?: string;
+    queriesPreview?: QueryPreview[];
     scope: string;
     searchLang?: string;
 }