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

package/docs/experience-search-&-discovery/popular-searches.md

@@ -0,0 +1,32 @@
+---
+title: Popular Searches UI
+---
+
+# Popular Searches UI
+
+The Popular Searches UI component displays what are the top search queries during a specific time.
+This type of suggestion can show up even before shoppers have started entering a query or when there
+are no search results to show.
+
+![Popular Searches](/assets/media/xcomponents_func_popularsearches.gif)
+
+:::warning Popular Searches are generated using shopper behavior to determine the top searches for a
+given period. For a correct performance, make sure that your current search service supports this
+type of feature. :::
+
+::: interact Can't quite capture the concept? Learn about
+[Popular Searches](../features/popular-searches-overview.md). :::
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer. Combine it with the
+  [Empathize](empathize.md) container to display Popular Searches below the search bar on shopper
+  interaction.
+- Show as many popular search terms results as you want.
+- Animate the display of Popular Searches at your ease.
+- Customize content. Show whatever you need: text, images, icons.
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+[//]: # 'To see Popular Searches in action, play with our showcase'

package/docs/experience-search-&-discovery/product-results-ui.md

@@ -0,0 +1,68 @@
+---
+title: Product results UI
+---
+
+# Product results UI
+
+After launching a search, some shoppers may just want to take a quick look around, reviewing only
+product thumbnails and quick info on the SERP. While others will prefer to have a more detailed
+overview of the product results with large and multiple images. That’s why the display of results is
+really issue.
+
+Results are rendered thanks to the combination of different X Components. This way, you can
+tailor the display to create the best product discovery experience for your shoppers. Decide the
+elements and product-related information you want to include when displaying product results such as
+the price, a picture, or even an add-to-cart button.
+
+![X Components for results display](/assets/media/overview_product_card.svg)
+
+<FootNote>
+
+**X&nbsp;Components for results display** <br/> (A) Image, (B) Product information, (C) Price, (D)
+PDP Link, (E) Rating, (F) Add to cart
+
+</FootNote>
+
+::: interact To learn more about the display of results, see
+[Product results](/explore-empathy-platform/overview/product-results-overview.md). :::
+
+**A bunch of components for comprehensive product information** Decide whether you want to include
+the description for the resulting product, a picture, or even rating information:
+
+- **Image**. Include a picture of the product for better product recognition.&nbsp;(A)
+- **Result data and product variants**. Retrieve the information to display about the product –name,
+  description, reference, brand, category, season, colors, types, sizes, or any data from your
+  catalogue.&nbsp;(B)
+- **Pricing**. Indicate the original price of the product, discounts, and special prices.&nbsp;(C)
+- **Product details**. Link your shoppers to the product detail page (PDP).&nbsp;(D)
+- **Rating**. Show how valued a product is among your shoppers.&nbsp;(E)
+- **Add to cart**. Allow your shoppers to add a product to the cart from the search engine results
+  page (SERP), without going through the PDP.&nbsp;(F)
+
+:::warning To include rating and add-to-cart options in results, rating and add-to-cart features
+must be implemented in your product catalogue. :::
+
+## Tailor the web experience
+
+- Customize content. Choose and display the product-related information available in your catalogue.
+- Add a PDP link to the product name or description, the picture, or to the entire product result.
+- Format the price of products with integers and decimals. Decide the length of decimals or whether
+  decimals should be rendered or not.
+- Select the desired currency for prices.
+- Customize the default rendering behavior of pictures when loading or broken.
+- Animate the display of product results.
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+## Extend the performance
+
+Traditionally, search results are displayed on the SERP after the query is launched or instantly as
+you type. However, result data is also used by features such as
+[Recommendations](/explore-empathy-platform/experience-search-&-discovery/recommendations.md) and
+[ID Results](/explore-empathy-platform/experience-search-&-discovery/id-results.md). You can combine
+results-related components with these modules to get advanced display options. Include additional
+product information in Recommendations and Identifier Results such as prices and pictures for better
+recognition and understanding of the products displayed.
+
+[//]: # 'TIP: To see the product results in action, play with our showcase.'

package/docs/experience-search-&-discovery/query-suggestions.md

@@ -0,0 +1,32 @@
+---
+title: Query Suggestions UI
+---
+
+# Query Suggestions UI
+
+The Query Suggestions UI component helps your shoppers with hints of what to look for to get
+relevant results. They complete and nail down the query as shoppers type without needing to keep
+typing.
+
+![Query Suggestions](/assets/media/xcomponents_func_querysuggestions.gif)
+
+:::warning Query Suggestions are generated using collective shopper behavior, extracting the
+keywords used on a specific query. For a correct performance, make sure that your current search
+service supports this type of feature. :::
+
+::: interact Can't quite capture the concept? Learn more about
+[Query Suggestions](../features/query-suggestions-overview.md). :::
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer. Combine it with the
+  [Empathize](empathize.md) container to display suggestions below the search bar on shopper
+  interaction.
+- Show as many suggestions as you want.
+- Animate the display of Query Suggestions at your ease.
+- Customize content. Show whatever you need: text, images, icons.
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+[//]: # 'To see Query Suggestions in action, play with our showcase'

package/docs/experience-search-&-discovery/recommendations.md

@@ -0,0 +1,32 @@
+---
+title: Recommendations UI
+---
+
+# Recommendations UI
+
+The Recommendations UI component shows the most clicked products on the SERP, based on shopper
+interaction within a defined period. They help your shoppers to explore your product catalogue,
+guiding them to specific products without the need to launch any queries.
+
+<img :src="$withBase('/assets/media/xcomponents_func_recommendations.gif')" alt="Recommendations]">
+
+:::warning Recommendations are generated using collective shopper behavior, generating a feed with
+the most clicked products. For a correct performance, make sure that your current search service
+supports this type of feature. :::
+
+::: interact Can't quite capture the concept? Learn more about
+[Recommendations](../search/recommendations-overview.md). :::
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer, although they usually appear on the
+  results page.
+- Show as many recommendations as you want.
+- Animate the display of the component at your ease.
+- Customize content. Show whatever you need: text, images, icons.
+- Extend the performance with results-related components.
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+[//]: # 'TIP To see Recommendations in action, play with our showcase.'

package/docs/experience-search-&-discovery/related-tags.md

@@ -0,0 +1,41 @@
+---
+title: Related Tags UI
+---
+
+# Related Tags UI
+
+The Related Tags UI component helps your shoppers to refine a specific search query and find what
+they’re looking for with just one click. They only appear after the search process is completed, and
+the results appear to fine-tune the search with extra information and get highly relevant results.
+They are shown as labels usually at the top of the results page, but can be displayed anywhere
+instead.
+
+![Related Tags](/assets/media/xcomponents_func_relatedtags.gif)
+
+:::warning Related Tags are generated using collective shopper behavior to identify associated terms
+used to refine a search query. For a correct performance, make sure that your current search service
+supports this type of feature. :::
+
+::: interact Can't quite capture the concept? Learn more about
+[Related Tags](../features/related-tags-overview.md). :::
+
+[//]:
+  #
+  'You can configure the behaviour of Related Tags and decide whether they’re selectable or not. If Related Tags aren’t selectable, they modify the initial query syntax by adding the related-search keywords to the query term initially typed in the search bar. Otherwise, the initial query syntax will still remain so that shoppers can select or deselect Related Tags at their ease, exploring different options and combinations.'
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer, although Related Tags usually appear
+  below the search bar after completing the search.
+- Show as many Related Tags as you want.
+- Animate the display of Related Tags at your ease.
+- Customize content. Show whatever you need: text, images, icons.
+
+[//]:
+  #
+  '* Choose if Related Tags are selectable or change the syntax of the initial query in the search box.'
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+[//]: # 'tip To see Related Tags in action, play with our showcase'

package/docs/experience-search-&-discovery/search-box.md

@@ -0,0 +1,81 @@
+---
+title: Search Box UI
+---
+
+# Search Box UI
+
+The Search Box UI Component is the main entry point for search where shoppers can type what
+they're looking for in your shop. It usually includes an input field, a search button, and a clear
+button.
+
+<img :src="$withBase('/assets/media/xcomponents_func_searchbox.svg')" alt="Search Box"> <br>
+
+::: interact Can't quite capture the concept? Learn more about
+[Search Box](../overview/search-box-overview.md). :::
+
+It can be combined with other X&nbsp;Components, such as [Query Suggestions](query-suggestions.md)
+or [Next Queries](next-queries.md), to update the query according to shoppers’ intent or
+behaviour. For example, if a shopper selects a query suggestion, the query is instantly updated in
+the input field to the selected suggestion and the search is launched.
+
+:::warning To modify the query syntax using
+[Query Suggestions](../features/query-suggestions-overview.md) or
+[Next Queries](../features/next-queries-overview.md), make sure that your current search service
+supports this type of feature. :::
+
+## Power-up behavior
+
+Every component has a power-up behavior under the hood that is visible to the user but not glaringly
+obvious. For example, in Interface X Components for web, see what happens when:
+
+- _A query with results is **submitted**_:
+
+  - Results are displayed
+  - Related tags are displayed
+  - Next queries are displayed
+  - The query can be displayed in the History Queries or Query Suggestions lists upon configuration
+
+- _A query with results is **cleared** using the clear button_:
+
+  - Any text in the search input is cleared
+  - The results are cleared
+  - The query suggestions are cleared
+  - The next queries are not cleared
+  - The related tags are cleared
+  - The searched query is displayed in history queries
+
+- _Using **instant search and a query is being typed** that has results_:
+
+  - No results are displayed before debounce time
+  - Results are displayed after debounce time
+  - Next queries are displayed after debounce time
+  - Related tags are displayed after debounce time
+
+- _Using **instant search and modifying the initial query**_:
+  - No results related to the second query are displayed before debounce time
+  - Results related to the second query are displayed after debounce time
+  - Displayed results are different from the previous ones
+
+::: warning Deactivating instant search means History Queries are not updated until the search
+button or Enter key is pressed, since the typed query is not submitted until one of these two
+actions is performed. :::
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer.
+- Customize content. Allow shoppers to search or clear their search using text or icons.
+- Determine the number of characters shoppers can enter in the search input.
+- Autofocus the input field when the search&nbsp;box is displayed.
+- Auto-accept the query without the need of using a search button or the Enter key. Determine the
+  debounce time to wait before instant search.
+- Configure what will happen after the search is triggered; for example, display Related Tags or
+  Next Queries.
+
+[//]:
+  #
+  'TO BE PUBLISHED IN FUTURE ITERATIONS WHEN THE SEARCH BOX POWER-UP ARE IMPLEMENTED: * Automatically suggest search terms to guide shoppers in constructing their search query. * Prompt shoppers to start their search with animated custom hint messages. '
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+[//]: # 'TIP: To see Search Box in action, play with our showcase.'

package/docs/experience-search-&-discovery/serp-ui.md

@@ -0,0 +1,109 @@
+---
+title: SERP UI
+---
+
+# SERP UI
+
+To handle and display search results, the layout of results and other related discovery features is
+paramount. For example, how to arrange results on the SERP or the features shoppers expect to easily
+navigate and organize results are key points to have in mind. <br/>
+
+![X Components for results layout](/assets/media/xcomponents_func_results_layout.svg)
+
+<FootNote>
+
+**X&nbsp;Components for results layout** <br/> (A) Grid, (B) Number of results, (C) Column Picker,
+(D) Sorting, and (E) Scrolling
+
+</FootNote>
+<br/>
+
+**Choice of the layout view** Your shoppers should be able to select how they’d like the products
+displayed and how the number of products they’d like to see per page, for example.
+
+That’s why the **grid** (A) is the core element of the SERP. It displays the results returned by the
+search service using a grid layout. Its value relies on having a configurable and flexible space to
+place all types of results or even other layout components such as a carousel visualization for
+[Next Queries](next-queries.md) or [Recommendations](recommendations.md).
+
+However, the grid is not the only element to consider when designing the SERP:
+
+[//]:
+  #
+  'To add when ready: Include **pagination** options to browse results throughout the different result pages available or apply **infinite scroll** to ease navigation.'
+
+- Show the **number of results** (B).
+- Allow your shoppers to select the **number of columns** (C) to showcase results.
+- Provide a **[sorting system](/explore-empathy-platform/overview/sorting-overview.md)** (D) so that
+  your shoppers can arrange results according to different criteria such as relevance, price,
+  alphabetical order…
+- Include **[pagination](/explore-empathy-platform/overview/pagination-overview.md)** options to
+  browse results throughout the different result pages available or apply infinite scroll to ease
+  navigation.
+- Apply **infinite scroll** to ease navigation and add a **scroll-to-top button** (E) to quickly
+  move to the top of the results page.
+- Indicate your shoppers whether the
+  **[spellcheck](/explore-empathy-platform/features/spellcheck-overview.md)** feature is applied or
+  not.
+
+::: note Enhance the search experience, adding [Related Tags](related-tags.md) to the SERP so that
+your shoppers can select descriptive keywords to refine the initial query and get highly relevant
+results. :::
+
+::: design As most shoppers don’t like to spend time scrolling and moving between pages, a crucial
+element on the SERP for a great experience is to offer **faceted search**, letting shoppers specify
+the kind of product attributes they’re interested in. :::
+
+::: interact To learn more about the SERP, results display, and their layout, see
+[Results on the SERP](../overview/results-overview.md). :::
+
+## Tailor the web experience
+
+**Grid**
+
+- Customize the layout of the results. Decide whether to display results using a grid or the default
+  list layout.
+- Configure what to display: product results, promotion banners, promoted results, or even next
+  queries and recommendations.
+- Customize the location, style, and content for each type of result.
+- Automatically fill the grid rows with as many columns as it can fit or set the number of columns
+  to divide the grid.
+- Indicate the number of product results to render per page.
+- Animate the display of the grid at your ease.
+- Allow your users to select the number of columns to display. Define if your shoppers will be
+  provided with a dropdown menu or a list with the columns to pick for the grid.
+- Show the total number of product results displayed. Configure the content with text, images, or
+  icons.
+
+**Sorting**
+
+- Choose and configure the sorting options available. Highlight the selected sorting option.
+- Select the display of the sorting system: dropdown menu or a simple list with the sorting options
+  available.
+- Animate the display of the sorting dropdown menu.
+- Set a default sorting option.
+  <!-- TBC: Decide which sorting option to display based on product category. -->
+
+**Pagination & scrolling**
+
+- Customize the content and style for the controls to move between pages.
+- Include an infinite scroll to load more results when reaching the end of the page.
+
+**Scrolling to top**
+
+- Decide when it will be displayed: when reached a defined threshold or the page end.
+- Configure the position and place it wherever you prefer.
+- Customize content. Show whatever you need: text, images, icons.
+- Animate the display of the scroll-to-top button at your ease.
+
+**Spellcheck**
+
+- Display a message to inform your shoppers that the
+  [spellcheck](../features/spellcheck-overview.md) feature has been used to provide results for the
+  current query.
+- Customize the message content at your ease.
+
+::: interact Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/)
+your web experience. :::
+
+[//]: # 'TIP: To see the SERP-related components in action, play with our showcase.'

package/docs/experience-search-&-discovery/web-local-storage.md

@@ -0,0 +1,25 @@
+---
+title: Interface X data privacy and browser local storage
+tags:
+  - x components
+  - interface x
+  - cookies
+  - local storage
+  - history queries
+---
+
+# Interface X data privacy and browser local storage
+
+Interface X for web _doesn't use cookies_ for storing data. The
+Interface X Components use the web browser's local storage to save the technical data
+required to provide the services associated with the search & discovery experience. The data remains
+in the shopper's device until the expiration time is reached or the shopper chooses to delete it.
+
+More specifically, Interface X Components store the following elements in the browser's
+local storage:
+
+| Key                    | Duration                                             | Purpose                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| ---------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `x-session-id`         | 30 minutes                                           | Short-term session ID to be sent to the Tagging API. It identifies short sessions in a device. It does not identify individual shoppers in any way. It is required for [Analytics](https://docs.empathy.co/explore-empathy-platform/understand-data-privacy/), [Next Queries](https://docs.empathy.co/explore-empathy-platform/features/history-queries-overview.html), and [Related Tags](https://docs.empathy.co/explore-empathy-platform/features/related-tags-overview.html) features |
+| `x-session-time-stamp` | 30 minutes                                           | Timestamp for the current session ID                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `x-history-queries`    | Stored until the shopper clears/disables the feature | List of the searches performed that the shopper has chosen to store, which are shown in different steps of the search journey.                                                                                                                                                                                                                                                                                                                                                            |

package/facets/index.js

@@ -32,5 +32,5 @@ export { default as SelectedFiltersList } from '../js/x-modules/facets/component
 export { default as SlicedFilters } from '../js/x-modules/facets/components/lists/sliced-filters.vue.js';
 export { default as SortedFilters } from '../js/x-modules/facets/components/lists/sorted-filters.vue.js';
 export { default as ClearFilters } from '../js/x-modules/facets/components/clear-filters.vue.js';
-export { isNewQuery } from '../js/x-modules/facets/utils.js';
+export { flatHierarchicalFilters, isNewQuery } from '../js/x-modules/facets/utils.js';
 export { default as FacetsMixin } from '../js/x-modules/facets/components/facets.mixin.js';

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

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

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

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

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

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

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

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

package/js/index.js

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

package/js/index.js.map

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

package/js/x-modules/facets/components/facets/facets-provider.vue.js

@@ -10,11 +10,11 @@ const __vue_script__ = script;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-8b95797a_0", { source: ".x-facets-list[data-v-8b95797a] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
+    inject("data-v-7e46f769_0", { source: ".x-facets-list[data-v-7e46f769] {\n  list-style-type: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-8b95797a";
+  const __vue_scope_id__ = "data-v-7e46f769";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/x-modules/facets/components/facets/facets-provider.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"facets-provider.vue.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets-provider.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Facet, Filter } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { XOn } from '../../../../components';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { areFiltersDifferent } from '../../../../utils/filters';\n  import { FacetsGroup } from '../../service/types';\n  import { GroupId } from '../../store/types';\n  import { facetsXModule } from '../../x-module';\n\n  /**\n   * This component allows to provide facets by prop, to add them to the state of the\n   * `Facets X-Module`. These facets will be added to the `Facets X-Module` state together with\n   * the facets emitted by the `Search X-Module` through the {@link SearchXEvents.FacetsChanged}\n   * event.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class FacetsProvider extends Vue {\n    /**\n     * An facet group identifier to distinguish the provided facets from other facets like the\n     * `Search X-Module` facets.\n     *\n     * @public\n     */\n    @Prop({ default: 'provided-facets' })\n    public groupId!: GroupId;\n\n    /**\n     * The facets to provide to the `Facets X-Module` state. They have to include the\n     * {@link @empathyco/x-types#Filter | filters}.\n     *\n     * @internal\n     */\n    @Prop({ required: true })\n    public facets!: Facet[];\n\n    /**\n     * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.\n     * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.\n     *\n     * @internal\n     */\n    protected selectedFilters: Filter[] | null = null;\n\n    /**\n     * A computed property to group the facets and the groupId. This is used by the watcher.\n     *\n     * @returns The FacetGroup with the facets and the group id.\n     *\n     * @internal\n     */\n    protected get facetsGroup(): FacetsGroup {\n      return { id: this.groupId, facets: this.facets };\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes\n     * the selected filters.\n     *\n     * @param selectedFilters - The new list of selected filters.\n     * @internal\n     */\n    @XOn('SelectedFiltersChanged')\n    emitSelectedFiltersChanged(selectedFilters: Filter[]): void {\n      if (\n        this.selectedFilters === null ||\n        areFiltersDifferent(this.selectedFilters, selectedFilters)\n      ) {\n        this.$x.emit('UserChangedSelectedFilters', selectedFilters);\n      }\n      this.selectedFilters = null;\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the\n     * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected\n     * filters.\n     */\n    @Watch('facetsGroup', { immediate: true })\n    provideFacets(): void {\n      if (this.facetsGroup.facets) {\n        this.$x.emit('FacetsGroupProvided', this.facetsGroup);\n        this.extractSelectedFilters(this.facets);\n      }\n    }\n\n    /**\n     * Extracts the selected filters from the facets and stores them in the\n     * {@link FacetsProvider.selectedFilters} property.\n     *\n     * @param facets - The facets from whom extract the selected filters.\n     * @internal\n     */\n    protected extractSelectedFilters(facets: Facet[]): void {\n      this.selectedFilters = facets\n        .flatMap(facet => facet.filters)\n        .filter(filter => filter.selected);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    render(): void {}\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-facets-list {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThis component allows to provide facets by prop, to add them to the state of the `Facets X-Module`.\nThese facets will be added to the `Facets X-Module` state together with the facets emitted by the\n`Search X-Module` through the {@link SearchXEvents.FacetsChanged} event.\n\n```vue\n<template>\n  <FacetsProvider :facets=\"myFacets\" />\n</template>\n\n<script>\n  import { FacetsProvider } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      FacetsProvider\n    },\n    data() {\n      return {\n        myFacets: [\n          {\n            modelName: 'SimpleFacet',\n            id: 'color-facet',\n            label: 'Color',\n            filters: [\n              {\n                modelName: 'SimpleFilter',\n                id: 'color:red',\n                facetId: 'color-facet',\n                label: 'Red',\n                selected: false,\n                value: 'color:red',\n                totalResults: 10\n              },\n              {\n                modelName: 'SimpleFilter',\n                id: 'color:blue',\n                facetId: 'color-facet',\n                label: 'Blue',\n                selected: false,\n                value: 'color:blue',\n                totalResults: 10\n              }\n            ]\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserChangedSelectedFilters`: the event is emitted after the user performed an action that changed\n  the selected filters. The payload is the new list of selected filters.\n- `FacetsGroupProvided`: the event is emitted after updating the facets prop with a new list of\n  facets. The payload contains a Facets Group with the facets and the group id.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"facets-provider.vue.js","sources":["../../../../../../src/x-modules/facets/components/facets/facets-provider.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Facet, Filter, isHierarchicalFacet } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { XOn } from '../../../../components';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { clone } from '../../../../utils';\n  import { areFiltersDifferent } from '../../../../utils/filters';\n  import { FacetsGroup } from '../../service/types';\n  import { GroupId } from '../../store/types';\n  import { flatHierarchicalFilters } from '../../utils';\n  import { facetsXModule } from '../../x-module';\n\n  /**\n   * This component allows to provide facets by prop, to add them to the state of the\n   * `Facets X-Module`. These facets will be added to the `Facets X-Module` state together with\n   * the facets emitted by the `Search X-Module` through the {@link SearchXEvents.FacetsChanged}\n   * event.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(facetsXModule)]\n  })\n  export default class FacetsProvider extends Vue {\n    /**\n     * An facet group identifier to distinguish the provided facets from other facets like the\n     * `Search X-Module` facets.\n     *\n     * @public\n     */\n    @Prop({ default: 'provided-facets' })\n    public groupId!: GroupId;\n\n    /**\n     * The facets to provide to the `Facets X-Module` state. They have to include the\n     * {@link @empathyco/x-types#Filter | filters}.\n     *\n     * @internal\n     */\n    @Prop({ required: true })\n    public facets!: Facet[];\n\n    /**\n     * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.\n     * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.\n     *\n     * @internal\n     */\n    protected selectedFilters: Filter[] | null = null;\n\n    /**\n     * A computed property to group the facets and the groupId. This is used by the watcher.\n     *\n     * @returns The FacetGroup with the facets and the group id.\n     *\n     * @internal\n     */\n    protected get facetsGroup(): FacetsGroup {\n      return { id: this.groupId, facets: this.facets };\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes\n     * the selected filters.\n     *\n     * @param selectedFilters - The new list of selected filters.\n     * @internal\n     */\n    @XOn('SelectedFiltersChanged')\n    emitSelectedFiltersChanged(selectedFilters: Filter[]): void {\n      if (\n        this.selectedFilters === null ||\n        areFiltersDifferent(this.selectedFilters, selectedFilters)\n      ) {\n        this.$x.emit('UserChangedSelectedFilters', selectedFilters);\n      }\n      this.selectedFilters = null;\n    }\n\n    /**\n     * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the\n     * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected\n     * filters.\n     */\n    @Watch('facetsGroup', { immediate: true })\n    provideFacets(): void {\n      if (this.facetsGroup.facets) {\n        const facetsGroupClone = clone(this.facetsGroup);\n        this.$x.emit('FacetsGroupProvided', facetsGroupClone);\n        this.extractSelectedFilters(this.facets);\n      }\n    }\n\n    /**\n     * Extracts the selected filters from the facets and stores them in the\n     * {@link FacetsProvider.selectedFilters} property.\n     *\n     * @param facets - The facets from whom extract the selected filters.\n     * @internal\n     */\n    protected extractSelectedFilters(facets: Facet[]): void {\n      this.selectedFilters = facets\n        .flatMap(facet =>\n          isHierarchicalFacet(facet) ? flatHierarchicalFilters(facet.filters) : facet.filters\n        )\n        .filter(filter => filter.selected);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    render(): void {}\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-facets-list {\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThis component allows to provide facets by prop, to add them to the state of the `Facets X-Module`.\nThese facets will be added to the `Facets X-Module` state together with the facets emitted by the\n`Search X-Module` through the {@link SearchXEvents.FacetsChanged} event.\n\n```vue\n<template>\n  <FacetsProvider :facets=\"myFacets\" />\n</template>\n\n<script>\n  import { FacetsProvider } from '@empathyco/x-components/facets';\n\n  export default {\n    components: {\n      FacetsProvider\n    },\n    data() {\n      return {\n        myFacets: [\n          {\n            modelName: 'SimpleFacet',\n            id: 'color-facet',\n            label: 'Color',\n            filters: [\n              {\n                modelName: 'SimpleFilter',\n                id: 'color:red',\n                facetId: 'color-facet',\n                label: 'Red',\n                selected: false,\n                value: 'color:red',\n                totalResults: 10\n              },\n              {\n                modelName: 'SimpleFilter',\n                id: 'color:blue',\n                facetId: 'color-facet',\n                label: 'Blue',\n                selected: false,\n                value: 'color:blue',\n                totalResults: 10\n              }\n            ]\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserChangedSelectedFilters`: the event is emitted after the user performed an action that changed\n  the selected filters. The payload is the new list of selected filters.\n- `FacetsGroupProvided`: the event is emitted after updating the facets prop with a new list of\n  facets. The payload contains a Facets Group with the facets and the group id.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}