@empathyco/x-components 3.0.0-alpha.233 → 3.0.0-alpha.235

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 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.235](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.234...@empathyco/x-components@3.0.0-alpha.235) (2022-11-29)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+# 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.234](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.233...@empathyco/x-components@3.0.0-alpha.234) (2022-11-29)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+# 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.233](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.232...@empathyco/x-components@3.0.0-alpha.233) (2022-11-28)
 
 **Note:** Version bump only for package @empathyco/x-components
@@ -27,6 +45,10 @@ All notable changes to this project will be documented in this file. See
 
 ## [3.0.0-alpha.231](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.230...@empathyco/x-components@3.0.0-alpha.231) (2022-11-28)
 
+### ⚠ BREAKING CHANGES
+
+- **components:** Renamed prop `animation` of `BaseResultImage` to `loadAnimation`.
+
 ### Features
 
 - show next result image on hover (#863)

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

@@ -18,5 +18,4 @@ export interface PopularSearchesConfig
 |  --- | --- | --- |
 |  [hideSessionQueries](./x-components.popularsearchesconfig.hidesessionqueries.md) | boolean | Hides the popular searches that have been already searched during the session. |
 |  [maxItemsToRequest](./x-components.popularsearchesconfig.maxitemstorequest.md) | number | Number of popular searches to request. |
-|  [showExtraSuggestionWithoutFilter](./x-components.popularsearchesconfig.showextrasuggestionwithoutfilter.md) | boolean | Show the extra suggestion that has filters without the filter. |
 

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

@@ -19,5 +19,4 @@ export interface QuerySuggestionsConfig
 |  [debounceInMs](./x-components.querysuggestionsconfig.debounceinms.md) | number | Debounce time measured in milliseconds used to store the query suggestions module query while the user is typing a query. |
 |  [hideIfEqualsQuery](./x-components.querysuggestionsconfig.hideifequalsquery.md) | boolean | Hides the suggestion if it is equal to the current query. |
 |  [maxItemsToRequest](./x-components.querysuggestionsconfig.maxitemstorequest.md) | number | Maximum number of query suggestions to request. |
-|  [showExtraSuggestionWithoutFilter](./x-components.querysuggestionsconfig.showextrasuggestionwithoutfilter.md) | boolean | Show the extra suggestion that has filters without the filter. |
 

package/docs/API-reference/components/common/suggestions/x-components.base-suggestions.md

@@ -70,7 +70,7 @@ another toy in the input field to try it out!_
 
 ```vue
 <template>
-  <BaseSuggestions :suggestions="suggestions" :maxItemToRender="3" />
+  <BaseSuggestions :suggestions="suggestions" :maxItemsToRender="3" />
 </template>
 
 <script>

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

@@ -66,7 +66,7 @@ export default {
 ```
 
 The component has three optional props. `animation` to render the component with an animation,
-`maxItemToRender` to limit the number of next queries will be rendered (by default it is 5) and
+`maxItemsToRender` to limit the number of next queries will be rendered (by default it is 5) and
 `highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.
 
 ```vue live

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

@@ -52,7 +52,7 @@ export default {
 ```
 
 The component has two optional props. `animation` to render the component with an animation and
-`maxItemToRender` to limit the number of popular searches will be rendered (by default it is 5).
+`maxItemsToRender` to limit the number of popular searches will be rendered (by default it is 5).
 
 ```vue live
 <template>

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

@@ -27,96 +27,131 @@ represented by a {@link BaseResultLink | result link component} besides any othe
 | <code>layout</code>  | Customized Recommendations layout. | **animation** <code>Vue</code> - Animation to animate the elements.<br />**recommendations** <code>Result[]</code> - Recommendations to render. |
 | <code>default</code> | (Required) Recommendation content. | **recommendation** <code>recommendation</code> - Recommendation data.                                                                           |
 
-## Examples
+## Events
+
+This component emits no events, but it makes components such as `BaseResultLink` emit additional
+events:
 
-It renders a list of recommendations from recommendations state by default. The component provides
-the slot layout which wraps the whole component with the recommendations bound. It also provides the
-default slot to customize the item, which is within the layout slot, with the recommendation bound.
-Each recommendation should be represented by a BaseResultLink component besides any other component.
+- `UserClickedARecommendation`: the event is emitted after the user clicks the link of a
+  recommendation.
 
-### Basic example
+## See it in action
 
-### Adding a custom BaseResultLink component
+<!-- prettier-ignore-start -->
+:::warning Backend service required
+To use this component, the Topclicked service must be implemented.
+:::
+<!-- prettier-ignore-end -->
 
-A BaseResultLink **must** be used inside the Recommendations component. In the example below the
-BaseResultLink default slot is filled with an image of the result and a span for the title. Besides
-that, an additional button has been added.
+Here you have a basic example on how the recommendations are rendered. You can customize how each
+result is rendered by using the `default` slot. It is highly recommended to use base components such
+as the `BaseResultLink` or the `BaseResultAddToCart`, as they provides integration with other
+modules such like the `tagging` one.
 
-```vue
-<Recommendations>
-  <template #default="{ recommendation }">
+```vue live
+<template>
+  <Recommendations #default="{ recommendation }">
     <BaseResultLink :result="recommendation" class="x-recommendations__link">
-      <template #default="{ result }">
-        <img :src="result.images[0]" class="x-recommendations__image"/>
-        <span class="x-recommendations__title">{{ result.name }}</span>
-      </template>
+      <img :src="recommendation.images[0]" class="x-recommendations__image" />
+      <span class="x-recommendations__title">{{ recommendation.name }}</span>
     </BaseResultLink>
-    <button>Custom Behaviour</button>
-  </template>
-</Recommendations>
-```
-
-### Overriding layout content
-
-It renders a list of recommendations customizing the layout slot. In the example below, instead of
-using the default Recommendations content, a BaseGrid component is used to render the
-recommendations.
+    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>
+  </Recommendations>
+</template>
+<script>
+import { Recommendations } from "@empathyco/x-components/recommendations";
+import { BaseResultLink, BaseResultAddToCart } from "@empathyco/x-components";
 
-```vue
-<Recommendations :animation="staggeredFadeAndSlide">
-  <template #layout="{ recommendations, animation }">
-    <BaseGrid :items="recommendations" :animation="animation">
-      <template #result="{ item }">
-        <BaseResultLink :result="item">
-          <BaseResultImage :result="item" />
-          <span class="x-result__title">{{ item.name }}</span>
-        </BaseResultLink>
-      </template>
-    </BaseGrid>
-  </template>
-</Recommendations>
+export default {
+  name: "RecommendationsDemo",
+  components: {
+    Recommendations,
+    BaseResultLink,
+    BaseResultAddToCart
+  }
+};
+</script>
 ```
 
 ### Play with props
 
-In this example, the suggestions has been limited to render a maximum of 3 items.
-
-_Type “puzzle” or another toy in the input field to try it out!_
+In this example, the component will render a maximum of 4 result recommendations, and will use the
+`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.
 
-```vue
+```vue live
 <template>
-  <BaseSuggestions :suggestions="suggestions" :maxItemToRender="3" />
+  <Recommendations
+    #default="{ recommendation }"
+    :maxItemsToRender="4"
+    animation="StaggeredFadeAndSlide"
+  >
+    <BaseResultLink :result="recommendation" class="x-recommendations__link">
+      <img :src="recommendation.images[0]" class="x-recommendations__image" />
+      <span class="x-recommendations__title">{{ recommendation.name }}</span>
+    </BaseResultLink>
+    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>
+  </Recommendations>
 </template>
-
 <script>
-import { BaseSuggestions } from "@empathyco/x-components";
+import Vue from "vue";
+import { Recommendations } from "@empathyco/x-components/recommendations";
+import { BaseResultLink, BaseResultAddToCart } from "@empathyco/x-components";
 
+Vue.component("StaggeredFadeAndSlide", StaggeredFadeAndSlide);
 export default {
-  name: "BaseSuggestionsDemo",
+  name: "RecommendationsDemo",
   components: {
-    BaseSuggestions
-  },
-  data() {
-    return {
-      suggestions: [
-        {
-          facets: [],
-          key: "chips",
-          query: "Chips",
-          totalResults: 10,
-          results: [],
-          modelName: "PopularSearch"
-        }
-      ]
-    };
+    Recommendations,
+    BaseResultLink,
+    BaseResultAddToCart
   }
 };
 </script>
 ```
 
-## Events
+### Play with the layout
 
-A list of events that the component will emit:
+In this example you can build your own layout, and the `Recommendations` component will just act as
+a provider of the result recommendations data. Using the component this way, and due to Vue 2
+limitations you will only be allowed to render a single element inside the `layout` slot.
 
-- `UserClickedARecommendation`: the event is emitted after the user clicks the button.
-- A list of events emitted by the `BaseResultLink`.
+```vue live
+<template>
+  <Recommendations #layout="{ recommendations }">
+    <div class="x-recommendations">
+      <article
+        class="x-recommendations-list"
+        v-for="recommendation in recommendations"
+        :key="recommendation.id"
+      >
+        <BaseResultLink
+          :result="recommendation"
+          class="x-recommendations__link"
+        >
+          <img
+            :src="recommendation.images[0]"
+            class="x-recommendations__image"
+          />
+          <span class="x-recommendations__title">{{
+            recommendation.name
+          }}</span>
+        </BaseResultLink>
+        <BaseResultAddToCart>Add to cart</BaseResultAddToCart>
+      </article>
+    </div>
+  </Recommendations>
+</template>
+<script>
+import { Recommendations } from "@empathyco/x-components/recommendations";
+import { BaseResultLink, BaseResultAddToCart } from "@empathyco/x-components";
+
+export default {
+  name: "RecommendationsDemo",
+  components: {
+    Recommendations,
+    BaseResultLink,
+    BaseResultAddToCart
+  }
+};
+</script>
+```

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

@@ -45,7 +45,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-10f146a0";
+  const __vue_scope_id__ = "data-v-43ea023e";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

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

@@ -1 +1 @@
-{"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-list x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-list x-suggestions__item\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n            @binding {Filter | undefined} filter - Suggestion's filter\n       -->\n      <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\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 { Suggestion, Facet, Filter } from '@empathyco/x-types';\n  import { isArrayEmpty } from '../../utils/array';\n\n  /**\n   * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n   * in the default slot for working.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseSuggestions extends Vue {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestions!: Suggestion[];\n\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * Boolean value to indicate if the facets should be rendered.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected showFacets!: boolean;\n\n    /**\n     * When {@link BaseSuggestions.showFacets} is true, it indicates if the suggestion without\n     * filter should be rendered.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected showPlainSuggestion!: boolean;\n\n    /**\n     * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n     *\n     * @returns An array with the unique keys of the suggestions.\n     * @internal\n     */\n    protected get suggestionsKeys(): string[] {\n      return this.suggestionsToRender.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`\n      );\n    }\n\n    /**\n     * Generates a string from the given facets.\n     *\n     * @param facets - The list of facets to reduce to a string.\n     * @returns - A string representing the list of facets.\n     * @internal\n     */\n    protected getFacetsKey(facets: Facet[]): string {\n      // Component methods are bound by Vue:\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      return facets.map(this.getFacetKey).join('&');\n    }\n\n    /**\n     * Generates a string from the given facet.\n     *\n     * @param facet - The facet to reduce to a string.\n     * @returns - A string representing the facet.\n     * @internal\n     */\n    protected getFacetKey(facet: Facet): string {\n      return facet.filters.map(filter => filter.id).join('&');\n    }\n\n    /**\n     * Creates a list of suggestions to render based on the configuration of this component.\n     *\n     * @returns - The list of suggestions to be rendered by this component.\n     *\n     * @internal\n     */\n    protected get suggestionsToRender(): Suggestion[] {\n      return this.suggestions\n        .flatMap(suggestion =>\n          this.showFacets && suggestion.facets?.length\n            ? this.showPlainSuggestion\n              ? [{ ...suggestion, facets: [] }, ...this.expandSuggestionFilters(suggestion)]\n              : this.expandSuggestionFilters(suggestion)\n            : { ...suggestion, facets: [] }\n        )\n        .slice(0, this.maxItemsToRender);\n    }\n\n    /**\n     * Creates a suggestion for each one of the filter inside each facet.\n     *\n     * @param suggestion - Suggestion to expand.\n     * @returns A list of suggestions, each one with a single filter.\n     *\n     * @internal\n     */\n    protected expandSuggestionFilters(suggestion: Suggestion): Suggestion[] {\n      return (\n        suggestion.facets?.flatMap(facet =>\n          facet.filters.map(filter => ({\n            ...suggestion,\n            facets: [{ ...facet, filters: [filter] }]\n          }))\n        ) ?? []\n      );\n    }\n\n    /**\n     * Returns the filter contained by the suggestion.\n     *\n     * @param suggestion - Suggestion containing the filter.\n     * @returns The suggestion filter.\n     * @internal\n     */\n    protected getSuggestionFilter(suggestion: Suggestion): Filter | undefined {\n      return suggestion.facets?.[0]?.filters[0];\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-suggestions {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' })\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target });\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target });\n    }\n  }\n};\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [\n              {\n                id: 'exampleFacet',\n                label: 'exampleFacet',\n                modelName: 'SimpleFacet',\n                filters: [\n                  {\n                    facetId: 'exampleFacet',\n                    id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n                    label: 'EXAMPLE',\n                    selected: false,\n                    totalResults: 10,\n                    modelName: 'SimpleFilter'\n                  }\n                ]\n              }\n            ],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-list x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-list x-suggestions__item\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n            @binding {Filter | undefined} filter - Suggestion's filter\n       -->\n      <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\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 { Suggestion, Facet, Filter } from '@empathyco/x-types';\n  import { isArrayEmpty } from '../../utils/array';\n\n  /**\n   * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n   * in the default slot for working.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseSuggestions extends Vue {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestions!: Suggestion[];\n\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * Boolean value to indicate if the facets should be rendered.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected showFacets!: boolean;\n\n    /**\n     * When {@link BaseSuggestions.showFacets} is true, it indicates if the suggestion without\n     * filter should be rendered.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected showPlainSuggestion!: boolean;\n\n    /**\n     * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n     *\n     * @returns An array with the unique keys of the suggestions.\n     * @internal\n     */\n    protected get suggestionsKeys(): string[] {\n      return this.suggestionsToRender.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`\n      );\n    }\n\n    /**\n     * Generates a string from the given facets.\n     *\n     * @param facets - The list of facets to reduce to a string.\n     * @returns - A string representing the list of facets.\n     * @internal\n     */\n    protected getFacetsKey(facets: Facet[]): string {\n      // Component methods are bound by Vue:\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      return facets.map(this.getFacetKey).join('&');\n    }\n\n    /**\n     * Generates a string from the given facet.\n     *\n     * @param facet - The facet to reduce to a string.\n     * @returns - A string representing the facet.\n     * @internal\n     */\n    protected getFacetKey(facet: Facet): string {\n      return facet.filters.map(filter => filter.id).join('&');\n    }\n\n    /**\n     * Creates a list of suggestions to render based on the configuration of this component.\n     *\n     * @returns - The list of suggestions to be rendered by this component.\n     *\n     * @internal\n     */\n    protected get suggestionsToRender(): Suggestion[] {\n      return this.suggestions\n        .flatMap(suggestion =>\n          this.showFacets && suggestion.facets?.length\n            ? this.showPlainSuggestion\n              ? [{ ...suggestion, facets: [] }, ...this.expandSuggestionFilters(suggestion)]\n              : this.expandSuggestionFilters(suggestion)\n            : { ...suggestion, facets: [] }\n        )\n        .slice(0, this.maxItemsToRender);\n    }\n\n    /**\n     * Creates a suggestion for each one of the filter inside each facet.\n     *\n     * @param suggestion - Suggestion to expand.\n     * @returns A list of suggestions, each one with a single filter.\n     *\n     * @internal\n     */\n    protected expandSuggestionFilters(suggestion: Suggestion): Suggestion[] {\n      return (\n        suggestion.facets?.flatMap(facet =>\n          facet.filters.map(filter => ({\n            ...suggestion,\n            facets: [{ ...facet, filters: [filter] }]\n          }))\n        ) ?? []\n      );\n    }\n\n    /**\n     * Returns the filter contained by the suggestion.\n     *\n     * @param suggestion - Suggestion containing the filter.\n     * @returns The suggestion filter.\n     * @internal\n     */\n    protected getSuggestionFilter(suggestion: Suggestion): Filter | undefined {\n      return suggestion.facets?.[0]?.filters[0];\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-suggestions {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' })\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target });\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target });\n    }\n  }\n};\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [\n              {\n                id: 'exampleFacet',\n                label: 'exampleFacet',\n                modelName: 'SimpleFacet',\n                filters: [\n                  {\n                    facetId: 'exampleFacet',\n                    id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n                    label: 'EXAMPLE',\n                    selected: false,\n                    totalResults: 10,\n                    modelName: 'SimpleFilter'\n                  }\n                ]\n              }\n            ],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/suggestions/base-suggestions.vue_rollup-plugin-vue_styles.0.vue.js

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".x-suggestions[data-v-10f146a0] {\n  list-style-type: none;\n}";
+var css = ".x-suggestions[data-v-43ea023e] {\n  list-style-type: none;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

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

@@ -1 +1 @@
-{"version":3,"file":"next-queries.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-bind=\"$attrs\"\n    :suggestions=\"renderedNextQueries\"\n    data-test=\"next-queries\"\n    class=\"x-next-queries\"\n  >\n    <template #default=\"props\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Next Query item\n            @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n            @binding {boolean} highlightCurated - True if the curated NQs should be highlighted\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...props, highlightCurated }\">\n        <NextQuery\n          #default=\"{ shouldHighlightCurated }\"\n          :suggestion=\"props.suggestion\"\n          :highlightCurated=\"highlightCurated\"\n          class=\"x-next-queries__suggestion\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n              @slot Next Query content\n                  @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n                  @binding {boolean} shouldHighlightCurated - True if the curated NQ should be highlighted\n            -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...props, shouldHighlightCurated }\" />\n        </NextQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { NextQuery as NextQueryModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { nextQueriesXModule } from '../x-module';\n  import NextQuery from './next-query.vue';\n\n  /**\n   * Simple next-queries component that renders a list of\n   * [`BaseSuggestions`](./x-components.base-suggestions.md),\n   * allowing the user to select one of them, and emitting the needed events. A next query is a\n   * suggestion for a new search, related to your previous query. I.e. If people normally search\n   * for `shirts`, and then `trousers`, `trousers` would be a next query of `shirts`.\n   *\n   * @public\n   */\n  @Component({\n    components: { NextQuery, BaseSuggestions },\n    mixins: [xComponentMixin(nextQueriesXModule)]\n  })\n  export default class NextQueries extends Vue {\n    /**\n     * Flag to indicate if the curated next queries should be displayed different.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    public highlightCurated!: boolean;\n\n    /**\n     * NextQueries list to be used instead of state NextQueries.\n     *\n     * @public\n     */\n    @Prop()\n    public suggestions?: NextQueryModel[];\n\n    /**\n     * The list of next queries from the state.\n     *\n     * @internal\n     */\n    @Getter('nextQueries', 'nextQueries')\n    public stateNextQueries!: NextQueryModel[];\n\n    /**.\n     * The list of next queries finally rendered\n     *\n     * @internal\n     */\n    protected get renderedNextQueries(): NextQueryModel[] {\n      return this.suggestions ?? this.stateNextQueries;\n    }\n  }\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name                          | Description                                                       | Type                | Default         |\n| ----------------------------- | ----------------------------------------------------------------- | ------------------- | --------------- |\n| <code>animation</code>        | Animation component that will be used to animate the suggestions. | <code>Vue</code>    | <code>ul</code> |\n| <code>maxItemsToRender</code> | Number of next queries to be rendered.                            | <code>number</code> | <code></code>   |\n\n## Examples\n\n### Basic example\n\nYou don't need to pass any props, or slots. Simply add the component, and when it has any next\nqueries it will show them\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries\n    }\n  };\n</script>\n```\n\nThe component has three optional props. `animation` to render the component with an animation,\n`maxItemToRender` to limit the number of next queries will be rendered (by default it is 5) and\n`highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" :highlightCurated=\"true\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries\n    }\n  };\n</script>\n```\n\n### Overriding Next Queries' Content\n\nYou can use your custom implementation of the Next Query's content. In the example below, instead of\nusing the default Next Query's content, an icon is added, as well as a span with the query of the\nNext Query suggestion.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion-content=\"{ suggestion }\">\n        <Nq1Icon />\n        <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n  import { Nq1Icon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      Nq1Icon\n    }\n  };\n</script>\n```\n\n### Adding a custom next query component\n\nYou can use your custom implementation of a next query component. To work correctly, it should use\nthe `emitNextQuerySelected` function when the next query is selected. In the example below, instead\nof using the default `button` tag for a next query, an icon is added, and the text of the next query\nis wrapped in a `span`\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion=\"{ suggestion }\">\n        <NextQuery :suggestion=\"suggestion\" class=\"x-next-queries__suggestion\">\n          <template #default=\"{ suggestion }\">\n            <Nq1Icon />\n            <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n          </template>\n        </NextQuery>\n        <button>Custom Behaviour</button>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries, NextQuery } from '@empathyco/x-components/next-queries';\n  import { Nq1Icon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      NextQuery,\n      Nq1Icon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"next-queries.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-bind=\"$attrs\"\n    :suggestions=\"renderedNextQueries\"\n    data-test=\"next-queries\"\n    class=\"x-next-queries\"\n  >\n    <template #default=\"props\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Next Query item\n            @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n            @binding {boolean} highlightCurated - True if the curated NQs should be highlighted\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...props, highlightCurated }\">\n        <NextQuery\n          #default=\"{ shouldHighlightCurated }\"\n          :suggestion=\"props.suggestion\"\n          :highlightCurated=\"highlightCurated\"\n          class=\"x-next-queries__suggestion\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n              @slot Next Query content\n                  @binding {Object} v-bind - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index\n                  @binding {boolean} shouldHighlightCurated - True if the curated NQ should be highlighted\n            -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...props, shouldHighlightCurated }\" />\n        </NextQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { NextQuery as NextQueryModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { nextQueriesXModule } from '../x-module';\n  import NextQuery from './next-query.vue';\n\n  /**\n   * Simple next-queries component that renders a list of\n   * [`BaseSuggestions`](./x-components.base-suggestions.md),\n   * allowing the user to select one of them, and emitting the needed events. A next query is a\n   * suggestion for a new search, related to your previous query. I.e. If people normally search\n   * for `shirts`, and then `trousers`, `trousers` would be a next query of `shirts`.\n   *\n   * @public\n   */\n  @Component({\n    components: { NextQuery, BaseSuggestions },\n    mixins: [xComponentMixin(nextQueriesXModule)]\n  })\n  export default class NextQueries extends Vue {\n    /**\n     * Flag to indicate if the curated next queries should be displayed different.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    public highlightCurated!: boolean;\n\n    /**\n     * NextQueries list to be used instead of state NextQueries.\n     *\n     * @public\n     */\n    @Prop()\n    public suggestions?: NextQueryModel[];\n\n    /**\n     * The list of next queries from the state.\n     *\n     * @internal\n     */\n    @Getter('nextQueries', 'nextQueries')\n    public stateNextQueries!: NextQueryModel[];\n\n    /**.\n     * The list of next queries finally rendered\n     *\n     * @internal\n     */\n    protected get renderedNextQueries(): NextQueryModel[] {\n      return this.suggestions ?? this.stateNextQueries;\n    }\n  }\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name                          | Description                                                       | Type                | Default         |\n| ----------------------------- | ----------------------------------------------------------------- | ------------------- | --------------- |\n| <code>animation</code>        | Animation component that will be used to animate the suggestions. | <code>Vue</code>    | <code>ul</code> |\n| <code>maxItemsToRender</code> | Number of next queries to be rendered.                            | <code>number</code> | <code></code>   |\n\n## Examples\n\n### Basic example\n\nYou don't need to pass any props, or slots. Simply add the component, and when it has any next\nqueries it will show them\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries\n    }\n  };\n</script>\n```\n\nThe component has three optional props. `animation` to render the component with an animation,\n`maxItemsToRender` to limit the number of next queries will be rendered (by default it is 5) and\n`highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" :highlightCurated=\"true\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries\n    }\n  };\n</script>\n```\n\n### Overriding Next Queries' Content\n\nYou can use your custom implementation of the Next Query's content. In the example below, instead of\nusing the default Next Query's content, an icon is added, as well as a span with the query of the\nNext Query suggestion.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion-content=\"{ suggestion }\">\n        <Nq1Icon />\n        <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries } from '@empathyco/x-components/next-queries';\n  import { Nq1Icon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      Nq1Icon\n    }\n  };\n</script>\n```\n\n### Adding a custom next query component\n\nYou can use your custom implementation of a next query component. To work correctly, it should use\nthe `emitNextQuerySelected` function when the next query is selected. In the example below, instead\nof using the default `button` tag for a next query, an icon is added, and the text of the next query\nis wrapped in a `span`\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <NextQueries>\n      <template #suggestion=\"{ suggestion }\">\n        <NextQuery :suggestion=\"suggestion\" class=\"x-next-queries__suggestion\">\n          <template #default=\"{ suggestion }\">\n            <Nq1Icon />\n            <span class=\"x-next-query__query\">{{ suggestion.query }}</span>\n          </template>\n        </NextQuery>\n        <button>Custom Behaviour</button>\n      </template>\n    </NextQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { NextQueries, NextQuery } from '@empathyco/x-components/next-queries';\n  import { Nq1Icon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      NextQuery,\n      Nq1Icon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/popular-searches/components/popular-searches.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"popular-searches.vue.js","sources":["../../../../../src/x-modules/popular-searches/components/popular-searches.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-bind=\"$attrs\"\n    :suggestions=\"popularSearches\"\n    class=\"x-popular-searches\"\n    data-test=\"popular-searches\"\n  >\n    <template #default=\"props\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Popular Search item\n            @binding {Object} v-bind - Popular Search suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Popular Search suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Popular Search suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...props }\">\n        <PopularSearch :suggestion=\"props.suggestion\" class=\"x-popular-searches__suggestion\">\n          <template #default=\"{ ...props }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Popular Search content\n                  @binding {Object} v-bind - Popular Search suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Popular Search suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Popular Search suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ ...props }\" />\n          </template>\n        </PopularSearch>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { popularSearchesXModule } from '../x-module';\n  import PopularSearch from './popular-search.vue';\n\n  /**\n   * Simple popular-searches component that renders a list of suggestions, allowing the user to\n   * select one of them, and emitting the needed events.\n   * A popular search is just a query that has been searched a lot in a certain period and may\n   * optionally have associated a set of filters.\n   *\n   * @public\n   */\n  @Component({\n    components: { PopularSearch, BaseSuggestions },\n    mixins: [xComponentMixin(popularSearchesXModule)]\n  })\n  export default class PopularSearches extends Vue {\n    /**\n     * The list of popular searches.\n     *\n     * @internal\n     */\n    @Getter('popularSearches', 'popularSearches')\n    public popularSearches!: Suggestion[];\n  }\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name                          | Description                                                       | Type                | Default         |\n| ----------------------------- | ----------------------------------------------------------------- | ------------------- | --------------- |\n| <code>animation</code>        | Animation component that will be used to animate the suggestions. | <code>Vue</code>    | <code>ul</code> |\n| <code>maxItemsToRender</code> | Number of popular searches to be rendered.                        | <code>number</code> | <code></code>   |\n\n## Examples\n\n### Default Usage\n\nYou don't need to pass any props, or slots. Simply add the component, and when it has any popular\nsearches it will show them.\n\n```vue live\n<template>\n  <PopularSearches />\n</template>\n\n<script>\n  import { PopularSearches } from '@empathyco/x-components/popular-searches';\n  export default {\n    name: 'PopularSearchesDemo',\n    components: {\n      PopularSearches\n    }\n  };\n</script>\n```\n\nThe component has two optional props. `animation` to render the component with an animation and\n`maxItemToRender` to limit the number of popular searches will be rendered (by default it is 5).\n\n```vue live\n<template>\n  <PopularSearches :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { PopularSearches } from '@empathyco/x-components/popular-searches';\n  import FadeAndSlide from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'PopularSearchesDemo',\n    components: {\n      PopularSearches,\n      FadeAndSlide\n    }\n  };\n</script>\n```\n\n### Overriding Popular Search's Content\n\nYou can use your custom implementation of the Popular Search's content. In the example below,\ninstead of using the default Popular Search's content, an icon is added, as well as a span with the\nquery of the Popular Search's suggestion.\n\n```vue live\n<template>\n  <PopularSearches>\n    <template #suggestion-content=\"{ suggestion }\">\n      <TrendingIcon />\n      <span class=\"x-popular-search__query\">{{ suggestion.query }}</span>\n    </template>\n  </PopularSearches>\n</template>\n\n<script>\n  import { PopularSearches } from '@empathyco/x-components/popular-searches';\n  import { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'PopularSearchesDemo',\n    components: {\n      PopularSearches,\n      TrendingIcon\n    }\n  };\n</script>\n```\n\n### Adding a Custom Popular Search Item\n\nYou can use your custom implementation for the whole Popular Search item. In the example below, we\nchange the default implementation of the Popular Search in Popular Searches. A custom Popular Search\nimplementation is added, it has an image and a span as content (as in the previous example). Also, a\nbutton with a user customized behaviour is added at the same hierarchical level as the Popular\nSearch component.\n\n```vue live\n<template>\n  <PopularSearches>\n    <template #suggestion=\"{ suggestion }\">\n      <PopularSearch :suggestion=\"suggestion\">\n        <template #default=\"{ suggestion }\">\n          <TrendingIcon />\n          <span class=\"x-popular-search__query\">{{ suggestion.query }}</span>\n        </template>\n      </PopularSearch>\n      <button>Custom Behaviour</button>\n    </template>\n  </PopularSearches>\n</template>\n\n<script>\n  import { PopularSearches, PopularSearch } from '@empathyco/x-components/popular-searches';\n  import { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'PopularSearchesDemo',\n    components: {\n      PopularSearches,\n      PopularSearch,\n      TrendingIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"popular-searches.vue.js","sources":["../../../../../src/x-modules/popular-searches/components/popular-searches.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-bind=\"$attrs\"\n    :suggestions=\"popularSearches\"\n    class=\"x-popular-searches\"\n    data-test=\"popular-searches\"\n  >\n    <template #default=\"props\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Popular Search item\n            @binding {Object} v-bind - Popular Search suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Popular Search suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Popular Search suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...props }\">\n        <PopularSearch :suggestion=\"props.suggestion\" class=\"x-popular-searches__suggestion\">\n          <template #default=\"{ ...props }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Popular Search content\n                  @binding {Object} v-bind - Popular Search suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Popular Search suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Popular Search suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ ...props }\" />\n          </template>\n        </PopularSearch>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { popularSearchesXModule } from '../x-module';\n  import PopularSearch from './popular-search.vue';\n\n  /**\n   * Simple popular-searches component that renders a list of suggestions, allowing the user to\n   * select one of them, and emitting the needed events.\n   * A popular search is just a query that has been searched a lot in a certain period and may\n   * optionally have associated a set of filters.\n   *\n   * @public\n   */\n  @Component({\n    components: { PopularSearch, BaseSuggestions },\n    mixins: [xComponentMixin(popularSearchesXModule)]\n  })\n  export default class PopularSearches extends Vue {\n    /**\n     * The list of popular searches.\n     *\n     * @internal\n     */\n    @Getter('popularSearches', 'popularSearches')\n    public popularSearches!: Suggestion[];\n  }\n</script>\n\n<!--eslint-disable max-len -->\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name                          | Description                                                       | Type                | Default         |\n| ----------------------------- | ----------------------------------------------------------------- | ------------------- | --------------- |\n| <code>animation</code>        | Animation component that will be used to animate the suggestions. | <code>Vue</code>    | <code>ul</code> |\n| <code>maxItemsToRender</code> | Number of popular searches to be rendered.                        | <code>number</code> | <code></code>   |\n\n## Examples\n\n### Default Usage\n\nYou don't need to pass any props, or slots. Simply add the component, and when it has any popular\nsearches it will show them.\n\n```vue live\n<template>\n  <PopularSearches />\n</template>\n\n<script>\n  import { PopularSearches } from '@empathyco/x-components/popular-searches';\n  export default {\n    name: 'PopularSearchesDemo',\n    components: {\n      PopularSearches\n    }\n  };\n</script>\n```\n\nThe component has two optional props. `animation` to render the component with an animation and\n`maxItemsToRender` to limit the number of popular searches will be rendered (by default it is 5).\n\n```vue live\n<template>\n  <PopularSearches :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { PopularSearches } from '@empathyco/x-components/popular-searches';\n  import FadeAndSlide from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'PopularSearchesDemo',\n    components: {\n      PopularSearches,\n      FadeAndSlide\n    }\n  };\n</script>\n```\n\n### Overriding Popular Search's Content\n\nYou can use your custom implementation of the Popular Search's content. In the example below,\ninstead of using the default Popular Search's content, an icon is added, as well as a span with the\nquery of the Popular Search's suggestion.\n\n```vue live\n<template>\n  <PopularSearches>\n    <template #suggestion-content=\"{ suggestion }\">\n      <TrendingIcon />\n      <span class=\"x-popular-search__query\">{{ suggestion.query }}</span>\n    </template>\n  </PopularSearches>\n</template>\n\n<script>\n  import { PopularSearches } from '@empathyco/x-components/popular-searches';\n  import { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'PopularSearchesDemo',\n    components: {\n      PopularSearches,\n      TrendingIcon\n    }\n  };\n</script>\n```\n\n### Adding a Custom Popular Search Item\n\nYou can use your custom implementation for the whole Popular Search item. In the example below, we\nchange the default implementation of the Popular Search in Popular Searches. A custom Popular Search\nimplementation is added, it has an image and a span as content (as in the previous example). Also, a\nbutton with a user customized behaviour is added at the same hierarchical level as the Popular\nSearch component.\n\n```vue live\n<template>\n  <PopularSearches>\n    <template #suggestion=\"{ suggestion }\">\n      <PopularSearch :suggestion=\"suggestion\">\n        <template #default=\"{ suggestion }\">\n          <TrendingIcon />\n          <span class=\"x-popular-search__query\">{{ suggestion.query }}</span>\n        </template>\n      </PopularSearch>\n      <button>Custom Behaviour</button>\n    </template>\n  </PopularSearches>\n</template>\n\n<script>\n  import { PopularSearches, PopularSearch } from '@empathyco/x-components/popular-searches';\n  import { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'PopularSearchesDemo',\n    components: {\n      PopularSearches,\n      PopularSearch,\n      TrendingIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/popular-searches/store/module.js

@@ -16,8 +16,7 @@ const popularSearchesXStoreModule = {
         status: 'initial',
         config: {
             hideSessionQueries: true,
-            maxItemsToRequest: 20,
-            showExtraSuggestionWithoutFilter: false
+            maxItemsToRequest: 20
         },
         params: {}
     }),

package/js/x-modules/popular-searches/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/popular-searches/store/module.ts"],"sourcesContent":["import { setStatus } from '../../../store/utils/status-store.utils';\nimport {\n  cancelFetchAndSaveSuggestions,\n  fetchAndSaveSuggestions\n} from './actions/fetch-and-save-suggestions.action';\nimport { fetchSuggestions } from './actions/fetch-suggestions.action';\nimport { popularSearches } from './getters/popular-searches.getter';\nimport { request } from './getters/request.getter';\nimport { PopularSearchesXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the next-queries module.\n *\n * @internal\n */\nexport const popularSearchesXStoreModule: PopularSearchesXStoreModule = {\n  state: () => ({\n    popularSearches: [],\n    searchedQueries: [],\n    status: 'initial',\n    config: {\n      hideSessionQueries: true,\n      maxItemsToRequest: 20,\n      showExtraSuggestionWithoutFilter: false\n    },\n    params: {}\n  }),\n  getters: {\n    request,\n    popularSearches\n  },\n  mutations: {\n    setSuggestions(state, suggestions) {\n      state.popularSearches = suggestions;\n    },\n    setSearchedQueries(state, searchedQueries) {\n      state.searchedQueries = searchedQueries;\n    },\n    setStatus,\n    setParams(state, params) {\n      state.params = params;\n    }\n  },\n  actions: {\n    cancelFetchAndSaveSuggestions,\n    fetchSuggestions,\n    fetchAndSaveSuggestions\n  }\n};\n"],"names":[],"mappings":";;;;;;AAUA;;;;;MAKa,2BAA2B,GAAgC;IACtE,KAAK,EAAE,OAAO;QACZ,eAAe,EAAE,EAAE;QACnB,eAAe,EAAE,EAAE;QACnB,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE;YACN,kBAAkB,EAAE,IAAI;YACxB,iBAAiB,EAAE,EAAE;YACrB,gCAAgC,EAAE,KAAK;SACxC;QACD,MAAM,EAAE,EAAE;KACX,CAAC;IACF,OAAO,EAAE;QACP,OAAO;QACP,eAAe;KAChB;IACD,SAAS,EAAE;QACT,cAAc,CAAC,KAAK,EAAE,WAAW;YAC/B,KAAK,CAAC,eAAe,GAAG,WAAW,CAAC;SACrC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe;YACvC,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;SACzC;QACD,SAAS;QACT,SAAS,CAAC,KAAK,EAAE,MAAM;YACrB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;KACF;IACD,OAAO,EAAE;QACP,6BAA6B;QAC7B,gBAAgB;QAChB,uBAAuB;KACxB;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/popular-searches/store/module.ts"],"sourcesContent":["import { setStatus } from '../../../store/utils/status-store.utils';\nimport {\n  cancelFetchAndSaveSuggestions,\n  fetchAndSaveSuggestions\n} from './actions/fetch-and-save-suggestions.action';\nimport { fetchSuggestions } from './actions/fetch-suggestions.action';\nimport { popularSearches } from './getters/popular-searches.getter';\nimport { request } from './getters/request.getter';\nimport { PopularSearchesXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the next-queries module.\n *\n * @internal\n */\nexport const popularSearchesXStoreModule: PopularSearchesXStoreModule = {\n  state: () => ({\n    popularSearches: [],\n    searchedQueries: [],\n    status: 'initial',\n    config: {\n      hideSessionQueries: true,\n      maxItemsToRequest: 20\n    },\n    params: {}\n  }),\n  getters: {\n    request,\n    popularSearches\n  },\n  mutations: {\n    setSuggestions(state, suggestions) {\n      state.popularSearches = suggestions;\n    },\n    setSearchedQueries(state, searchedQueries) {\n      state.searchedQueries = searchedQueries;\n    },\n    setStatus,\n    setParams(state, params) {\n      state.params = params;\n    }\n  },\n  actions: {\n    cancelFetchAndSaveSuggestions,\n    fetchSuggestions,\n    fetchAndSaveSuggestions\n  }\n};\n"],"names":[],"mappings":";;;;;;AAUA;;;;;MAKa,2BAA2B,GAAgC;IACtE,KAAK,EAAE,OAAO;QACZ,eAAe,EAAE,EAAE;QACnB,eAAe,EAAE,EAAE;QACnB,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE;YACN,kBAAkB,EAAE,IAAI;YACxB,iBAAiB,EAAE,EAAE;SACtB;QACD,MAAM,EAAE,EAAE;KACX,CAAC;IACF,OAAO,EAAE;QACP,OAAO;QACP,eAAe;KAChB;IACD,SAAS,EAAE;QACT,cAAc,CAAC,KAAK,EAAE,WAAW;YAC/B,KAAK,CAAC,eAAe,GAAG,WAAW,CAAC;SACrC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe;YACvC,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;SACzC;QACD,SAAS;QACT,SAAS,CAAC,KAAK,EAAE,MAAM;YACrB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;KACF;IACD,OAAO,EAAE;QACP,6BAA6B;QAC7B,gBAAgB;QAChB,uBAAuB;KACxB;;;;;"}

package/js/x-modules/query-suggestions/store/module.js

@@ -20,7 +20,6 @@ const querySuggestionsXStoreModule = {
         config: {
             debounceInMs: 200,
             maxItemsToRequest: 10,
-            showExtraSuggestionWithoutFilter: true,
             hideIfEqualsQuery: true
         },
         params: {}

package/js/x-modules/query-suggestions/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/query-suggestions/store/module.ts"],"sourcesContent":["import { setQuery } from '../../../store/utils/query.utils';\nimport { setStatus } from '../../../store/utils/status-store.utils';\nimport {\n  cancelFetchAndSaveSuggestions,\n  fetchAndSaveSuggestions\n} from './actions/fetch-and-save-suggestions.action';\nimport { fetchSuggestions } from './actions/fetch-suggestions.action';\nimport { setUrlParams } from './actions/set-url-params.action';\nimport { normalizedQuery } from './getters/normalized-query.getter';\nimport { querySuggestions } from './getters/query-suggestions.getter';\nimport { request } from './getters/request.getter';\nimport { QuerySuggestionsXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the query-suggestions module.\n *\n * @internal\n */\nexport const querySuggestionsXStoreModule: QuerySuggestionsXStoreModule = {\n  state: () => ({\n    query: '',\n    suggestions: [],\n    status: 'initial',\n    config: {\n      debounceInMs: 200,\n      maxItemsToRequest: 10,\n      showExtraSuggestionWithoutFilter: true,\n      hideIfEqualsQuery: true\n    },\n    params: {}\n  }),\n  getters: {\n    request,\n    normalizedQuery,\n    querySuggestions\n  },\n  mutations: {\n    setQuery,\n    setSuggestions(state, suggestions) {\n      state.suggestions = suggestions;\n    },\n    setStatus,\n    setParams(state, params) {\n      state.params = params;\n    }\n  },\n  actions: {\n    cancelFetchAndSaveSuggestions,\n    fetchSuggestions,\n    fetchAndSaveSuggestions,\n    setUrlParams\n  }\n};\n"],"names":[],"mappings":";;;;;;;;;AAaA;;;;;MAKa,4BAA4B,GAAiC;IACxE,KAAK,EAAE,OAAO;QACZ,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,EAAE;QACf,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE;YACN,YAAY,EAAE,GAAG;YACjB,iBAAiB,EAAE,EAAE;YACrB,gCAAgC,EAAE,IAAI;YACtC,iBAAiB,EAAE,IAAI;SACxB;QACD,MAAM,EAAE,EAAE;KACX,CAAC;IACF,OAAO,EAAE;QACP,OAAO;QACP,eAAe;QACf,gBAAgB;KACjB;IACD,SAAS,EAAE;QACT,QAAQ;QACR,cAAc,CAAC,KAAK,EAAE,WAAW;YAC/B,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;SACjC;QACD,SAAS;QACT,SAAS,CAAC,KAAK,EAAE,MAAM;YACrB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;KACF;IACD,OAAO,EAAE;QACP,6BAA6B;QAC7B,gBAAgB;QAChB,uBAAuB;QACvB,YAAY;KACb;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/query-suggestions/store/module.ts"],"sourcesContent":["import { setQuery } from '../../../store/utils/query.utils';\nimport { setStatus } from '../../../store/utils/status-store.utils';\nimport {\n  cancelFetchAndSaveSuggestions,\n  fetchAndSaveSuggestions\n} from './actions/fetch-and-save-suggestions.action';\nimport { fetchSuggestions } from './actions/fetch-suggestions.action';\nimport { setUrlParams } from './actions/set-url-params.action';\nimport { normalizedQuery } from './getters/normalized-query.getter';\nimport { querySuggestions } from './getters/query-suggestions.getter';\nimport { request } from './getters/request.getter';\nimport { QuerySuggestionsXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the query-suggestions module.\n *\n * @internal\n */\nexport const querySuggestionsXStoreModule: QuerySuggestionsXStoreModule = {\n  state: () => ({\n    query: '',\n    suggestions: [],\n    status: 'initial',\n    config: {\n      debounceInMs: 200,\n      maxItemsToRequest: 10,\n      hideIfEqualsQuery: true\n    },\n    params: {}\n  }),\n  getters: {\n    request,\n    normalizedQuery,\n    querySuggestions\n  },\n  mutations: {\n    setQuery,\n    setSuggestions(state, suggestions) {\n      state.suggestions = suggestions;\n    },\n    setStatus,\n    setParams(state, params) {\n      state.params = params;\n    }\n  },\n  actions: {\n    cancelFetchAndSaveSuggestions,\n    fetchSuggestions,\n    fetchAndSaveSuggestions,\n    setUrlParams\n  }\n};\n"],"names":[],"mappings":";;;;;;;;;AAaA;;;;;MAKa,4BAA4B,GAAiC;IACxE,KAAK,EAAE,OAAO;QACZ,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,EAAE;QACf,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE;YACN,YAAY,EAAE,GAAG;YACjB,iBAAiB,EAAE,EAAE;YACrB,iBAAiB,EAAE,IAAI;SACxB;QACD,MAAM,EAAE,EAAE;KACX,CAAC;IACF,OAAO,EAAE;QACP,OAAO;QACP,eAAe;QACf,gBAAgB;KACjB;IACD,SAAS,EAAE;QACT,QAAQ;QACR,cAAc,CAAC,KAAK,EAAE,WAAW;YAC/B,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;SACjC;QACD,SAAS;QACT,SAAS,CAAC,KAAK,EAAE,MAAM;YACrB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;KACF;IACD,OAAO,EAAE;QACP,6BAA6B;QAC7B,gBAAgB;QAChB,uBAAuB;QACvB,YAAY;KACb;;;;;"}

package/js/x-modules/recommendations/components/recommendations.vue.js

@@ -58,7 +58,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-29f8953e";
+  const __vue_scope_id__ = "data-v-231be26d";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/x-modules/recommendations/components/recommendations.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"recommendations.vue.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <NoElement v-if=\"recommendations.length\">\n    <!--\n      @slot Customized Recommendations layout.\n          @binding {Result[]} recommendations - Recommendations to render.\n          @binding {Vue} animation - Animation to animate the elements.\n    -->\n    <slot name=\"layout\" v-bind=\"{ animation, recommendations }\">\n      <component\n        :is=\"animation\"\n        tag=\"ul\"\n        data-test=\"recommendations\"\n        class=\"x-list x-recommendations\"\n      >\n        <li\n          v-for=\"recommendation in recommendations\"\n          :key=\"recommendation.id\"\n          class=\"x-recommendations__item\"\n          data-test=\"recommendation-item\"\n        >\n          <!--\n            @slot (Required) Recommendation content.\n            @binding {recommendation} recommendation - Recommendation data.\n          -->\n          <slot :recommendation=\"recommendation\" />\n        </li>\n      </component>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Prop, Provide } from 'vue-property-decorator';\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { NoElement } from '../../../components/no-element';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { PropsWithType } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { recommendationsXModule } from '../x-module';\n\n  /**\n   * It renders a list of recommendations from the\n   * {@link RecommendationsState.recommendations | Recommendations} state by default.\n   * The component provides the slot layout which wraps the whole component with the\n   * recommendations bounded. It also provides the default slot to customize the item, which is\n   * within the layout slot, with the recommendation bounded. Each recommendation should be\n   * represented by a {@link BaseResultLink | result link component} besides any other component.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(recommendationsXModule)],\n    components: {\n      NoElement\n    }\n  })\n  export default class Recommendations extends Vue {\n    /**\n     * The module's list of recommendations.\n     *\n     * @public\n     */\n    @State('recommendations', 'recommendations')\n    public storedRecommendations!: Result[];\n\n    /**\n     * Animation component that will be used to animate the recommendations.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of recommendations to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    @Provide()\n    protected resultClickExtraEvents: PropsWithType<XEventsTypes, Result>[] = [\n      'UserClickedARecommendation'\n    ];\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     *\n     * @internal\n     */\n    protected get recommendations(): Result[] {\n      return this.storedRecommendations.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-recommendations {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nIt renders a list of recommendations from recommendations state by default. The component provides\nthe slot layout which wraps the whole component with the recommendations bound. It also provides the\ndefault slot to customize the item, which is within the layout slot, with the recommendation bound.\nEach recommendation should be represented by a BaseResultLink component besides any other component.\n\n### Basic example\n\n### Adding a custom BaseResultLink component\n\nA BaseResultLink **must** be used inside the Recommendations component. In the example below the\nBaseResultLink default slot is filled with an image of the result and a span for the title. Besides\nthat, an additional button has been added.\n\n```vue\n<Recommendations>\n  <template #default=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <template #default=\"{ result }\">\n        <img :src=\"result.images[0]\" class=\"x-recommendations__image\"/>\n        <span class=\"x-recommendations__title\">{{ result.name }}</span>\n      </template>\n    </BaseResultLink>\n    <button>Custom Behaviour</button>\n  </template>\n</Recommendations>\n```\n\n### Overriding layout content\n\nIt renders a list of recommendations customizing the layout slot. In the example below, instead of\nusing the default Recommendations content, a BaseGrid component is used to render the\nrecommendations.\n\n```vue\n<Recommendations :animation=\"staggeredFadeAndSlide\">\n  <template #layout=\"{ recommendations, animation }\">\n    <BaseGrid :items=\"recommendations\" :animation=\"animation\">\n      <template #result=\"{ item }\">\n        <BaseResultLink :result=\"item\">\n          <BaseResultImage :result=\"item\" />\n          <span class=\"x-result__title\">{{ item.name }}</span>\n        </BaseResultLink>\n      </template>\n    </BaseGrid>\n  </template>\n</Recommendations>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedARecommendation`: the event is emitted after the user clicks the button.\n- A list of events emitted by the `BaseResultLink`.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"recommendations.vue.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <NoElement v-if=\"recommendations.length\">\n    <!--\n      @slot Customized Recommendations layout.\n          @binding {Result[]} recommendations - Recommendations to render.\n          @binding {Vue} animation - Animation to animate the elements.\n    -->\n    <slot name=\"layout\" v-bind=\"{ animation, recommendations }\">\n      <component\n        :is=\"animation\"\n        tag=\"ul\"\n        data-test=\"recommendations\"\n        class=\"x-list x-recommendations\"\n      >\n        <li\n          v-for=\"recommendation in recommendations\"\n          :key=\"recommendation.id\"\n          class=\"x-recommendations__item\"\n          data-test=\"recommendation-item\"\n        >\n          <!--\n            @slot (Required) Recommendation content.\n            @binding {recommendation} recommendation - Recommendation data.\n          -->\n          <slot :recommendation=\"recommendation\" />\n        </li>\n      </component>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Prop, Provide } from 'vue-property-decorator';\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { NoElement } from '../../../components/no-element';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { PropsWithType } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { recommendationsXModule } from '../x-module';\n\n  /**\n   * It renders a list of recommendations from the\n   * {@link RecommendationsState.recommendations | Recommendations} state by default.\n   * The component provides the slot layout which wraps the whole component with the\n   * recommendations bounded. It also provides the default slot to customize the item, which is\n   * within the layout slot, with the recommendation bounded. Each recommendation should be\n   * represented by a {@link BaseResultLink | result link component} besides any other component.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(recommendationsXModule)],\n    components: {\n      NoElement\n    }\n  })\n  export default class Recommendations extends Vue {\n    /**\n     * The module's list of recommendations.\n     *\n     * @public\n     */\n    @State('recommendations', 'recommendations')\n    public storedRecommendations!: Result[];\n\n    /**\n     * Animation component that will be used to animate the recommendations.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of recommendations to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    @Provide()\n    protected resultClickExtraEvents: PropsWithType<XEventsTypes, Result>[] = [\n      'UserClickedARecommendation'\n    ];\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     *\n     * @internal\n     */\n    protected get recommendations(): Result[] {\n      return this.storedRecommendations.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-recommendations {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- `UserClickedARecommendation`: the event is emitted after the user clicks the link of a\n  recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provides integration with other\nmodules such like the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations #default=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    #default=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\n  import Vue from 'vue';\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, and due to Vue 2\nlimitations you will only be allowed to render a single element inside the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations #layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n<script>\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/recommendations/components/recommendations.vue_rollup-plugin-vue_styles.0.vue.js

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".x-recommendations[data-v-29f8953e] {\n  list-style-type: none;\n}";
+var css = ".x-recommendations[data-v-231be26d] {\n  list-style-type: none;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.233",
+  "version": "3.0.0-alpha.235",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -135,5 +135,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "46d1486940127536c55fd400fabb508a49b5633a"
+  "gitHead": "eb0a1bae0d70f58a757706bf7b215322e6ad83e5"
 }

package/report/x-components.api.json

@@ -30175,32 +30175,6 @@
                 "startIndex": 1,
                 "endIndex": 2
               }
-            },
-            {
-              "kind": "PropertySignature",
-              "canonicalReference": "@empathyco/x-components!PopularSearchesConfig#showExtraSuggestionWithoutFilter:member",
-              "docComment": "/**\n * Show the extra suggestion that has filters without the filter.\n *\n * @example\n *\n * When set to true:\n * ```\n * query = 'trou';\n * suggestions = ['trousers in man', 'trousers in woman'];\n * // Suggests ['trousers', 'trousers in man', 'trousers in woman']\n * ```\n *\n * @example\n *\n * When set to false:\n * ```\n * query = 'trou';\n * suggestions = ['trousers in man', 'trousers in woman'];\n * // Suggests ['trousers in man', 'trousers in woman']\n * ```\n *\n */\n",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "showExtraSuggestionWithoutFilter: "
-                },
-                {
-                  "kind": "Content",
-                  "text": "boolean"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isOptional": false,
-              "releaseTag": "Public",
-              "name": "showExtraSuggestionWithoutFilter",
-              "propertyTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              }
             }
           ],
           "extendsTokenRanges": []
@@ -33279,32 +33253,6 @@
                 "startIndex": 1,
                 "endIndex": 2
               }
-            },
-            {
-              "kind": "PropertySignature",
-              "canonicalReference": "@empathyco/x-components!QuerySuggestionsConfig#showExtraSuggestionWithoutFilter:member",
-              "docComment": "/**\n * Show the extra suggestion that has filters without the filter.\n *\n * @remarks\n *\n * Remember this property might be affected by {@link QuerySuggestionsConfig.hideIfEqualsQuery}\n *\n * @example\n *\n * When set to true:\n * ```\n * query = 'trou';\n * suggestions = ['trousers in man', 'trousers in woman'];\n * // Suggests ['trousers', 'trousers in man', 'trousers in woman']\n * ```\n *\n * @example\n *\n * When set to false:\n * ```\n * query = 'trou';\n * suggestions = ['trousers in man', 'trousers in woman'];\n * // Suggests ['trousers in man', 'trousers in woman']\n * ```\n *\n */\n",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "showExtraSuggestionWithoutFilter: "
-                },
-                {
-                  "kind": "Content",
-                  "text": "boolean"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isOptional": false,
-              "releaseTag": "Public",
-              "name": "showExtraSuggestionWithoutFilter",
-              "propertyTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              }
             }
           ],
           "extendsTokenRanges": []

package/report/x-components.api.md

@@ -2869,7 +2869,6 @@ export interface PopularSearchesActions {
 export interface PopularSearchesConfig {
     hideSessionQueries: boolean;
     maxItemsToRequest: number;
-    showExtraSuggestionWithoutFilter: boolean;
 }
 
 // @internal
@@ -3135,7 +3134,6 @@ export interface QuerySuggestionsConfig {
     debounceInMs: number;
     hideIfEqualsQuery: boolean;
     maxItemsToRequest: number;
-    showExtraSuggestionWithoutFilter: boolean;
 }
 
 // @internal

package/types/x-modules/popular-searches/config.types.d.ts

@@ -30,25 +30,5 @@ export interface PopularSearchesConfig {
      * ```
      */
     hideSessionQueries: boolean;
-    /**
-     * Show the extra suggestion that has filters without the filter.
-     *
-     * @example
-     * When set to true:
-     * ```
-     * query = 'trou';
-     * suggestions = ['trousers in man', 'trousers in woman'];
-     * // Suggests ['trousers', 'trousers in man', 'trousers in woman']
-     * ```
-     *
-     * @example
-     * When set to false:
-     * ```
-     * query = 'trou';
-     * suggestions = ['trousers in man', 'trousers in woman'];
-     * // Suggests ['trousers in man', 'trousers in woman']
-     * ```
-     */
-    showExtraSuggestionWithoutFilter: boolean;
 }
 //# sourceMappingURL=config.types.d.ts.map

package/types/x-modules/popular-searches/config.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.types.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/popular-searches/config.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B;;;;;;;;;;;;;;;;;;OAkBG;IACH,gCAAgC,EAAE,OAAO,CAAC;CAC3C"}
+{"version":3,"file":"config.types.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/popular-searches/config.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,kBAAkB,EAAE,OAAO,CAAC;CAC7B"}

package/types/x-modules/popular-searches/store/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/popular-searches/store/module.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,EAAE,2BAiCzC,CAAC"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/popular-searches/store/module.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,EAAE,2BAgCzC,CAAC"}

package/types/x-modules/query-suggestions/config.types.d.ts

@@ -13,29 +13,6 @@ export interface QuerySuggestionsConfig {
      * Maximum number of query suggestions to request.
      */
     maxItemsToRequest: number;
-    /**
-     * Show the extra suggestion that has filters without the filter.
-     *
-     * @remarks
-     * Remember this property might be affected by {@link QuerySuggestionsConfig.hideIfEqualsQuery}
-     *
-     * @example
-     * When set to true:
-     * ```
-     * query = 'trou';
-     * suggestions = ['trousers in man', 'trousers in woman'];
-     * // Suggests ['trousers', 'trousers in man', 'trousers in woman']
-     * ```
-     *
-     * @example
-     * When set to false:
-     * ```
-     * query = 'trou';
-     * suggestions = ['trousers in man', 'trousers in woman'];
-     * // Suggests ['trousers in man', 'trousers in woman']
-     * ```
-     */
-    showExtraSuggestionWithoutFilter: boolean;
     /**
      * Hides the suggestion if it is equal to the current query.
      *

package/types/x-modules/query-suggestions/config.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.types.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/query-suggestions/config.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,gCAAgC,EAAE,OAAO,CAAC;IAC1C;;;;;;;;;;;;;;;;;;OAkBG;IACH,iBAAiB,EAAE,OAAO,CAAC;CAC5B"}
+{"version":3,"file":"config.types.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/query-suggestions/config.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;;;;;;;;;;;;;;;;OAkBG;IACH,iBAAiB,EAAE,OAAO,CAAC;CAC5B"}

package/types/x-modules/query-suggestions/store/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/query-suggestions/store/module.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAEvD;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,EAAE,4BAkC1C,CAAC"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/query-suggestions/store/module.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAEvD;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,EAAE,4BAiC1C,CAAC"}

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

@@ -1,34 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [PopularSearchesConfig](./x-components.popularsearchesconfig.md) &gt; [showExtraSuggestionWithoutFilter](./x-components.popularsearchesconfig.showextrasuggestionwithoutfilter.md)
-
-## PopularSearchesConfig.showExtraSuggestionWithoutFilter property
-
-Show the extra suggestion that has filters without the filter.
-
-<b>Signature:</b>
-
-```typescript
-showExtraSuggestionWithoutFilter: boolean;
-```
-
-## Example 1
-
-When set to true:
-
-```
-query = 'trou';
-suggestions = ['trousers in man', 'trousers in woman'];
-// Suggests ['trousers', 'trousers in man', 'trousers in woman']
-```
-
-## Example 2
-
-When set to false:
-
-```
-query = 'trou';
-suggestions = ['trousers in man', 'trousers in woman'];
-// Suggests ['trousers in man', 'trousers in woman']
-```
-

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

@@ -1,38 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QuerySuggestionsConfig](./x-components.querysuggestionsconfig.md) &gt; [showExtraSuggestionWithoutFilter](./x-components.querysuggestionsconfig.showextrasuggestionwithoutfilter.md)
-
-## QuerySuggestionsConfig.showExtraSuggestionWithoutFilter property
-
-Show the extra suggestion that has filters without the filter.
-
-<b>Signature:</b>
-
-```typescript
-showExtraSuggestionWithoutFilter: boolean;
-```
-
-## Remarks
-
-Remember this property might be affected by [QuerySuggestionsConfig.hideIfEqualsQuery](./x-components.querysuggestionsconfig.hideifequalsquery.md)
-
-## Example 1
-
-When set to true:
-
-```
-query = 'trou';
-suggestions = ['trousers in man', 'trousers in woman'];
-// Suggests ['trousers', 'trousers in man', 'trousers in woman']
-```
-
-## Example 2
-
-When set to false:
-
-```
-query = 'trou';
-suggestions = ['trousers in man', 'trousers in woman'];
-// Suggests ['trousers in man', 'trousers in woman']
-```
-