@empathyco/x-components 3.0.0-alpha.315 → 3.0.0-alpha.317

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 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.317](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.316...@empathyco/x-components@3.0.0-alpha.317) (2023-02-17)
+
+### Build System
+
+- **dependencies:** bump `@bahmutov/cypress-esbuild-preprocessor` from `2.1.5` to `2.2.0` (#1082)
+  ([106c2d1](https://github.com/empathyco/x/commit/106c2d1eba6e1d3b03ac75a04bdec3e961579fef))
+
+# 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.316](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.315...@empathyco/x-components@3.0.0-alpha.316) (2023-02-16)
+
+### Features
+
+- remove `x-suggestion` class from `BaseSuggestion` component (#1077)
+  ([31f48e9](https://github.com/empathyco/x/commit/31f48e91ca06348d9122ad301f765b48c2fc963f)),
+  closes [EX-8006](https://searchbroker.atlassian.net/browse/EX-8006)
+
+# 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.315](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.314...@empathyco/x-components@3.0.0-alpha.315) (2023-02-15)
 
 ### Features

package/design-system/full-theme.css

@@ -2828,6 +2828,23 @@
     --x-number-font-weight-tag-default-selected
   );
 }
+.x-tag--ghost.x-tag,
+.x-tag--ghost .x-tag {
+  --x-color-background-tag-default: var(--x-color-background-tag-ghost);
+  --x-color-border-tag-default: var(--x-color-border-tag-ghost);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
+  --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
+  --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
+  --x-color-background-tag-default-curated-selected: var(
+    --x-color-background-tag-curated-selected-ghost
+  );
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-curated-selected-ghost
+  );
+}
 :root {
   --x-color-background-tag-ghost: transparent;
   --x-color-border-tag-ghost: transparent;
@@ -5972,21 +5989,3 @@
 .x-sticky {
   position: sticky !important;
 }
-
-.x-tag--ghost.x-tag,
-.x-tag--ghost .x-tag {
-  --x-color-background-tag-default: var(--x-color-background-tag-ghost);
-  --x-color-border-tag-default: var(--x-color-border-tag-ghost);
-  --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
-  --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
-  --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
-  --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
-  --x-color-background-tag-default-curated-selected: var(
-    --x-color-background-tag-curated-selected-ghost
-  );
-  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
-  --x-number-font-weight-tag-default-curated-selected: var(
-    --x-number-font-weight-tag-curated-selected-ghost
-  );
-}

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

@@ -12,11 +12,7 @@ var __vue_render__ = function () {
   return _c(
     "button",
     _vm._g(
-      {
-        staticClass: "x-suggestion",
-        class: _vm.dynamicCSSClasses,
-        on: { click: _vm.emitEvents },
-      },
+      { class: _vm.dynamicCSSClasses, on: { click: _vm.emitEvents } },
       _vm.$listeners
     ),
     [

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

@@ -1 +1 @@
-{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button @click=\"emitEvents\" v-on=\"$listeners\" :class=\"dynamicCSSClasses\" class=\"x-suggestion\">\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      -->\n    <slot v-bind=\"{ suggestion, query, filter }\">\n      <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter, Suggestion } from '@empathyco/x-types';\n  import { forEach } from '@empathyco/x-utils';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { QueryFeature } from '../../types';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import Highlight from '../highlight.vue';\n\n  /**\n   * Renders a button with a default slot. It receives a query, which should be the query of the\n   * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted\n   * on click with a given feature.\n   *\n   * The default slot receives the suggestion and the matched query has props.\n   *\n   * @public\n   */\n  @Component({\n    components: { Highlight }\n  })\n  export default class BaseSuggestion extends Vue {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    @Prop({ default: '' })\n    protected query!: string;\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: Suggestion;\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    @Prop() //TODO: set to true when the suggestions components pass it.\n    protected feature?: QueryFeature;\n\n    /**\n     * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n    /**\n     * Indicates if the curated suggestion should be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n\n    /**\n     * The event handler that will be triggered when clicking on a suggestion.\n     *\n     * @remarks\n     * UserAcceptedAQuery: suggestion.query\n     * UserSelectedASuggestion: suggestion\n     * UserClickedAFilter: suggestion.facets[0].filters[0]\n     * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     * @public\n     */\n    protected get events(): Partial<XEventsTypes> {\n      const filterEvent: Partial<XEventsTypes> = this.filter\n        ? { UserClickedAFilter: this.filter }\n        : {};\n      return {\n        UserAcceptedAQuery: this.suggestion.query,\n        UserSelectedASuggestion: this.suggestion,\n        ...this.suggestionSelectedEvents,\n        ...filterEvent\n      };\n    }\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      forEach(this.events, (event, payload) => {\n        this.$x.emit(event, payload, {\n          target: this.$el as HTMLElement,\n          feature: this.feature\n        });\n      });\n    }\n\n    /**\n     * Returns the suggestion filter object.\n     * It is a BooleanFilter because the label is needed.\n     * It returns only the first element because the facets and filters are being planned\n     * in the BaseSuggestions component.\n     *\n     * @returns The filter.\n     * @public\n     */\n    protected get filter(): BooleanFilter | undefined {\n      return this.suggestion.facets?.[0]?.filters[0] as BooleanFilter;\n    }\n\n    /**\n     * Checks if the suggestion is curated and if it should be highlighted.\n     *\n     * @returns True if the suggestion is curated and should be highlighted.\n     *\n     * @internal\n     */\n    protected get shouldHighlightCurated(): boolean {\n      return this.highlightCurated && !!this.suggestion.isCurated;\n    }\n\n    /**\n     * Generates css classes dynamically.\n     *\n     * @remarks\n     * 'x-suggestion--matching added when the query should be matched.\n     *\n     * @returns The {@link VueCSSClasses} classes.\n     * @public\n     */\n    protected get dynamicCSSClasses(): VueCSSClasses {\n      return {\n        'x-suggestion--is-curated': this.shouldHighlightCurated\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- `UserAcceptedAQuery`: the event is emitted after the user clicks the button. The event payload is\n  the suggestion query data.\n- `UserSelectedASuggestion`: the event is emitted after the user clicks the button. The event\n  payload is the suggestion data.\n- `UserClickedAFilter`: the event is emitted after the user clicks the button if the suggestion\n  includes a filter. The event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## See it in action\n\nThis suggestion component expects a suggestion to render and pass to its default slot, a normalized\nquery to compare with the suggestion's query and highlight its matching parts, and events to emit\nwhen the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" />\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak',\n          facet: {\n            namedModel: 'SimpleFacet',\n            id: 'category',\n            label: 'Category',\n            filters: [\n              {\n                id: 'category:groceries',\n                modelName: 'SimpleFilter',\n                facetId: 'category-facet',\n                label: 'Groceries',\n                selected: false,\n                totalResults: 10\n              }\n            ]\n          }\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customise the content\n\nYou can make this component render any content you want by using the `default` slot.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" #default=\"{ suggestion, query, filter }\">\n    <span>🔍</span>\n    <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    <span v-if=\"filter\">{{ filter.label }}</span>\n  </BaseSuggestion>\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak'\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button @click=\"emitEvents\" v-on=\"$listeners\" :class=\"dynamicCSSClasses\">\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      -->\n    <slot v-bind=\"{ suggestion, query, filter }\">\n      <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter, Suggestion } from '@empathyco/x-types';\n  import { forEach } from '@empathyco/x-utils';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { QueryFeature } from '../../types';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import Highlight from '../highlight.vue';\n\n  /**\n   * Renders a button with a default slot. It receives a query, which should be the query of the\n   * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted\n   * on click with a given feature.\n   *\n   * The default slot receives the suggestion and the matched query has props.\n   *\n   * @public\n   */\n  @Component({\n    components: { Highlight }\n  })\n  export default class BaseSuggestion extends Vue {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    @Prop({ default: '' })\n    protected query!: string;\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: Suggestion;\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    @Prop() //TODO: set to true when the suggestions components pass it.\n    protected feature?: QueryFeature;\n\n    /**\n     * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n    /**\n     * Indicates if the curated suggestion should be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n\n    /**\n     * The event handler that will be triggered when clicking on a suggestion.\n     *\n     * @remarks\n     * UserAcceptedAQuery: suggestion.query\n     * UserSelectedASuggestion: suggestion\n     * UserClickedAFilter: suggestion.facets[0].filters[0]\n     * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     * @public\n     */\n    protected get events(): Partial<XEventsTypes> {\n      const filterEvent: Partial<XEventsTypes> = this.filter\n        ? { UserClickedAFilter: this.filter }\n        : {};\n      return {\n        UserAcceptedAQuery: this.suggestion.query,\n        UserSelectedASuggestion: this.suggestion,\n        ...this.suggestionSelectedEvents,\n        ...filterEvent\n      };\n    }\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      forEach(this.events, (event, payload) => {\n        this.$x.emit(event, payload, {\n          target: this.$el as HTMLElement,\n          feature: this.feature\n        });\n      });\n    }\n\n    /**\n     * Returns the suggestion filter object.\n     * It is a BooleanFilter because the label is needed.\n     * It returns only the first element because the facets and filters are being planned\n     * in the BaseSuggestions component.\n     *\n     * @returns The filter.\n     * @public\n     */\n    protected get filter(): BooleanFilter | undefined {\n      return this.suggestion.facets?.[0]?.filters[0] as BooleanFilter;\n    }\n\n    /**\n     * Checks if the suggestion is curated and if it should be highlighted.\n     *\n     * @returns True if the suggestion is curated and should be highlighted.\n     *\n     * @internal\n     */\n    protected get shouldHighlightCurated(): boolean {\n      return this.highlightCurated && !!this.suggestion.isCurated;\n    }\n\n    /**\n     * Generates css classes dynamically.\n     *\n     * @remarks\n     * 'x-suggestion--matching added when the query should be matched.\n     *\n     * @returns The {@link VueCSSClasses} classes.\n     * @public\n     */\n    protected get dynamicCSSClasses(): VueCSSClasses {\n      return {\n        'x-suggestion--is-curated': this.shouldHighlightCurated\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- `UserAcceptedAQuery`: the event is emitted after the user clicks the button. The event payload is\n  the suggestion query data.\n- `UserSelectedASuggestion`: the event is emitted after the user clicks the button. The event\n  payload is the suggestion data.\n- `UserClickedAFilter`: the event is emitted after the user clicks the button if the suggestion\n  includes a filter. The event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## See it in action\n\nThis suggestion component expects a suggestion to render and pass to its default slot, a normalized\nquery to compare with the suggestion's query and highlight its matching parts, and events to emit\nwhen the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" />\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak',\n          facet: {\n            namedModel: 'SimpleFacet',\n            id: 'category',\n            label: 'Category',\n            filters: [\n              {\n                id: 'category:groceries',\n                modelName: 'SimpleFilter',\n                facetId: 'category-facet',\n                label: 'Groceries',\n                selected: false,\n                totalResults: 10\n              }\n            ]\n          }\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customise the content\n\nYou can make this component render any content you want by using the `default` slot.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" #default=\"{ suggestion, query, filter }\">\n    <span>🔍</span>\n    <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    <span v-if=\"filter\">{{ filter.label }}</span>\n  </BaseSuggestion>\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak'\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/history-queries/components/history-queries.vue.js

@@ -33,6 +33,7 @@ var __vue_render__ = function () {
                           attrs: {
                             suggestion: baseScope.suggestion,
                             "data-test": "history-query-item",
+                            suggestionClass: "x-suggestion",
                           },
                           scopedSlots: _vm._u(
                             [

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

@@ -1 +1 @@
-{"version":3,"file":"history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-bind=\"$attrs\"\n    :suggestions=\"historyQueries\"\n    class=\"x-history-queries\"\n    data-test=\"history-queries\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot History Query item\n            @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <HistoryQuery\n          :suggestion=\"baseScope.suggestion\"\n          data-test=\"history-query-item\"\n          class=\"x-history-queries__item\"\n        >\n          <template #default=\"historyQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...historyQueryScope }\" />\n          </template>\n          <template #remove-button-content=\"removeHistoryQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query remove button content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot\n              name=\"suggestion-remove-content\"\n              v-bind=\"{ ...baseScope, ...removeHistoryQueryScope }\"\n            />\n          </template>\n        </HistoryQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery as HistoryQueryModel } 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 { historyQueriesXModule } from '../x-module';\n  import HistoryQuery from './history-query.vue';\n\n  /**\n   * This component renders a list of suggestions coming from the user queries history.\n   * Allows the user to select one of them, emitting the needed events. A history query is just\n   * another type of suggestion that contains a query that the user has made in the past.\n   *\n   * @public\n   */\n  @Component({\n    inheritAttrs: false,\n    components: { BaseSuggestions, HistoryQuery },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class HistoryQueries extends Vue {\n    /**\n     * The filtered list of history queries.\n     *\n     * @internal\n     */\n    @Getter('historyQueries', 'historyQueriesWithResults')\n    public historyQueries!: HistoryQueryModel[];\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| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\n\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the HistoryQueries is rendered.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the history queries have been limited to render a maximum of 10 queries (by default\nit is 5).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :animation=\"'FadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-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: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion=\"{ suggestion }\">\n      <HistoryQuery :suggestion=\"suggestion\" />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      HistoryQuery\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-content=\"{ suggestion }\">\n      <span>{{ suggestion.query }}</span>\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-remove-content=\"{ suggestion }\">\n      <CrossIcon />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { CrossIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      CrossIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-bind=\"$attrs\"\n    :suggestions=\"historyQueries\"\n    class=\"x-history-queries\"\n    data-test=\"history-queries\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot History Query item\n            @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <HistoryQuery\n          :suggestion=\"baseScope.suggestion\"\n          data-test=\"history-query-item\"\n          class=\"x-history-queries__item\"\n          suggestionClass=\"x-suggestion\"\n        >\n          <template #default=\"historyQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...historyQueryScope }\" />\n          </template>\n          <template #remove-button-content=\"removeHistoryQueryScope\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot History Query remove button content\n                  @binding {Object} v-bind - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot\n              name=\"suggestion-remove-content\"\n              v-bind=\"{ ...baseScope, ...removeHistoryQueryScope }\"\n            />\n          </template>\n        </HistoryQuery>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery as HistoryQueryModel } 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 { historyQueriesXModule } from '../x-module';\n  import HistoryQuery from './history-query.vue';\n\n  /**\n   * This component renders a list of suggestions coming from the user queries history.\n   * Allows the user to select one of them, emitting the needed events. A history query is just\n   * another type of suggestion that contains a query that the user has made in the past.\n   *\n   * @public\n   */\n  @Component({\n    inheritAttrs: false,\n    components: { BaseSuggestions, HistoryQuery },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class HistoryQueries extends Vue {\n    /**\n     * The filtered list of history queries.\n     *\n     * @internal\n     */\n    @Getter('historyQueries', 'historyQueriesWithResults')\n    public historyQueries!: HistoryQueryModel[];\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| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\n\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the HistoryQueries is rendered.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the history queries have been limited to render a maximum of 10 queries (by default\nit is 5).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries :animation=\"'FadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-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: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion=\"{ suggestion }\">\n      <HistoryQuery :suggestion=\"suggestion\" />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      HistoryQuery\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-content=\"{ suggestion }\">\n      <span>{{ suggestion.query }}</span>\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <HistoryQueries #suggestion-remove-content=\"{ suggestion }\">\n      <CrossIcon />\n    </HistoryQueries>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { CrossIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      CrossIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/history-queries/components/history-queries.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { HistoryQuery as HistoryQueryModel } 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 { historyQueriesXModule } from '../x-module';\n  import HistoryQuery from './history-query.vue';\n\n  /**\n   * This component renders a list of suggestions coming from the user queries history.\n   * Allows the user to select one of them, emitting the needed events. A history query is just\n   * another type of suggestion that contains a query that the user has made in the past.\n   *\n   * @public\n   */\n  @Component({\n    inheritAttrs: false,\n    components: { BaseSuggestions, HistoryQuery },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class HistoryQueries extends Vue {\n    /**\n     * The filtered list of history queries.\n     *\n     * @internal\n     */\n    @Getter('historyQueries', 'historyQueriesWithResults')\n    public historyQueries!: HistoryQueryModel[];\n  }\n"],"names":["BaseSuggestions","HistoryQuery"],"mappings":";;;;;;;;;AAyDE;;;;;;AAMG;AAMY,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,GAAG,CAAA;CAQ9C,CAAA;AADC,UAAA,CAAA;AADC,IAAA,MAAM,CAAC,gBAAgB,EAAE,2BAA2B,CAAC;AACV,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAPzB,cAAc,GAAA,UAAA,CAAA;AALlC,IAAA,SAAS,CAAC;AACT,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,UAAU,EAAE,mBAAEA,iBAAe,gBAAEC,mBAAY,EAAE;AAC7C,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;AACmB,CAAA,EAAA,cAAc,CAQlC,CAAA;aARoB,cAAc;;;;"}
+{"version":3,"file":"history-queries.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { HistoryQuery as HistoryQueryModel } 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 { historyQueriesXModule } from '../x-module';\n  import HistoryQuery from './history-query.vue';\n\n  /**\n   * This component renders a list of suggestions coming from the user queries history.\n   * Allows the user to select one of them, emitting the needed events. A history query is just\n   * another type of suggestion that contains a query that the user has made in the past.\n   *\n   * @public\n   */\n  @Component({\n    inheritAttrs: false,\n    components: { BaseSuggestions, HistoryQuery },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class HistoryQueries extends Vue {\n    /**\n     * The filtered list of history queries.\n     *\n     * @internal\n     */\n    @Getter('historyQueries', 'historyQueriesWithResults')\n    public historyQueries!: HistoryQueryModel[];\n  }\n"],"names":["BaseSuggestions","HistoryQuery"],"mappings":";;;;;;;;;AA0DE;;;;;;AAMG;AAMY,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,GAAG,CAAA;CAQ9C,CAAA;AADC,UAAA,CAAA;AADC,IAAA,MAAM,CAAC,gBAAgB,EAAE,2BAA2B,CAAC;AACV,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAPzB,cAAc,GAAA,UAAA,CAAA;AALlC,IAAA,SAAS,CAAC;AACT,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,UAAU,EAAE,mBAAEA,iBAAe,gBAAEC,mBAAY,EAAE;AAC7C,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;AACmB,CAAA,EAAA,cAAc,CAQlC,CAAA;aARoB,cAAc;;;;"}

package/js/x-modules/history-queries/components/my-history.vue.js

@@ -62,7 +62,8 @@ var __vue_render__ = function () {
                             function () {
                               return [
                                 _c("HistoryQuery", {
-                                  staticClass: "x-history-queries__item",
+                                  staticClass:
+                                    "x-history-queries__item x-suggestion",
                                   attrs: {
                                     suggestion: suggestion,
                                     "data-test": "history-query-item",

package/js/x-modules/history-queries/components/my-history.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"my-history.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history x-list\" tag=\"ul\">\n    <li\n      v-for=\"(historyQueries, date) in groupByDate\"\n      :key=\"date\"\n      class=\"x-my-history-item\"\n      data-test=\"my-history-item\"\n    >\n      <slot name=\"date\" :date=\"date\">\n        <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n      </slot>\n      <BaseSuggestions\n        :suggestions=\"historyQueries\"\n        class=\"x-my-history-queries\"\n        data-test=\"my-history-queries\"\n        :animation=\"animation\"\n      >\n        <template #default=\"{ suggestion, index }\">\n          <!--\n        @slot History Query item\n            @binding {Suggestion} suggestion - History Query suggestion data\n            @binding {number} index - History Query suggestion index\n            @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n      -->\n          <slot name=\"suggestion\" v-bind=\"{ suggestion, index, formatTime }\">\n            <HistoryQuery\n              :suggestion=\"suggestion\"\n              data-test=\"history-query-item\"\n              class=\"x-history-queries__item\"\n            >\n              <template #default>\n                <!--\n              @slot History Query content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n                  @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n            -->\n                <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, formatTime }\">\n                  <div class=\"x-list x-list--vertical\">\n                    <span>{{ suggestion.query }}</span>\n                    <span>{{ formatTime(suggestion.timestamp) }}</span>\n                  </div>\n                </slot>\n              </template>\n              <template #remove-button-content>\n                <!--\n              @slot History Query remove button content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n            -->\n                <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n              </template>\n            </HistoryQuery>\n          </slot>\n        </template>\n      </BaseSuggestions>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import Vue from 'vue';\n  import { Component, Inject, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { State } from '../../../components/decorators/store.decorators';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { groupItemsBy, isArrayEmpty } from '../../../utils/array';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { historyQueriesXModule } from '../x-module';\n  import HistoryQueryComponent from './history-query.vue';\n\n  /**\n   * The component renders the full history of user searched queries grouped by the day\n   * they were performed.\n   *\n   * @remarks\n   *\n   * Allows the user to select one of them, emitting the needed events.\n   * A history query is just another type of suggestion that contains a query that the user has\n   * made in the past.\n   * @public\n   */\n  @Component({\n    components: { HistoryQuery: HistoryQueryComponent, BaseSuggestions },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class MyHistory extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * The current locale.\n     *\n     * @public\n     */\n    @Prop({ default: 'en' })\n    protected locale!: string;\n\n    /**\n     * The list of history queries.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'historyQueries')\n    public historyQueries!: HistoryQuery[];\n\n    /**\n     * The provided {@link SnippetConfig}.\n     *\n     * @internal\n     */\n    @Inject('snippetConfig')\n    public snippetConfig?: SnippetConfig;\n\n    /**\n     * Returns a record of history queries grouped by date.\n     *\n     * @example\n     * ```typescript\n     *  const historyQueriesGrouped = {\n     *    'Monday, January 10th, 2022' : [{\n     *      query: 'lego',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 121312312\n     *    }],\n     *    'Tuesday, January 11th, 2022' : [{\n     *      query: 'barbie',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 15221212\n     *    }]\n     *  }\n     * ```\n     * @returns The history queries grouped by date.\n     * @internal\n     */\n    protected get groupByDate(): Dictionary<HistoryQuery[]> {\n      return groupItemsBy(this.historyQueries, current => {\n        return new Date(current.timestamp).toLocaleDateString(this.usedLocale, {\n          day: 'numeric',\n          weekday: 'long',\n          month: 'long',\n          year: 'numeric'\n        });\n      });\n    }\n\n    /**\n     * Formats a timestamp into `hh:mm [PM/AM]` format.\n     *\n     * @example\n     * ```typescript\n     * // locale 'es'\n     * console.log(formatTime(Date.now()) // '16:54'.\n     *\n     * // locale 'en'\n     * console.log(formatTime(Date.now()) // '16:54 PM'.\n     * ```\n     * @param timestamp - The timestamp to format.\n     * @returns The formatted time.\n     * @internal\n     */\n    protected formatTime(timestamp: number): string {\n      return new Date(timestamp).toLocaleTimeString(this.usedLocale, {\n        hour: '2-digit',\n        minute: '2-digit'\n      });\n    }\n    /**\n     * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n     * stored.\n     *\n     * @returns True if there are history queries; false otherwise.\n     * @internal\n     */\n    protected get hasHistoryQueries(): boolean {\n      return !isArrayEmpty(this.historyQueries);\n    }\n    /**\n     * The locale that it is going to be used. It can be the one send it by the snippet config or\n     * the one pass it using the prop.\n     *\n     * @returns The locale to be used.\n     * @internal\n     */\n    protected get usedLocale(): string {\n      return this.snippetConfig?.lang ?? this.locale;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n  <MyHistory />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n  <MyHistory :locale=\"es\" />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    },\n    data() {\n      return {\n        fadeAndSlide: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n  <MyHistory #suggestion=\"{ suggestion }\">\n    <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory,\n      HistoryQuery\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n  <MyHistory #suggestion-content=\"{ suggestion }\">\n    <span>{{ suggestion.query }}</span>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n  <MyHistory #date=\"{ date }\">\n    <span>{{ date }}</span>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n  <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n    <CrossIcon />\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n  import { CrossIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory,\n      CrossIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"my-history.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history x-list\" tag=\"ul\">\n    <li\n      v-for=\"(historyQueries, date) in groupByDate\"\n      :key=\"date\"\n      class=\"x-my-history-item\"\n      data-test=\"my-history-item\"\n    >\n      <slot name=\"date\" :date=\"date\">\n        <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n      </slot>\n      <BaseSuggestions\n        :suggestions=\"historyQueries\"\n        class=\"x-my-history-queries\"\n        data-test=\"my-history-queries\"\n        :animation=\"animation\"\n      >\n        <template #default=\"{ suggestion, index }\">\n          <!--\n        @slot History Query item\n            @binding {Suggestion} suggestion - History Query suggestion data\n            @binding {number} index - History Query suggestion index\n            @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n      -->\n          <slot name=\"suggestion\" v-bind=\"{ suggestion, index, formatTime }\">\n            <HistoryQuery\n              :suggestion=\"suggestion\"\n              data-test=\"history-query-item\"\n              class=\"x-history-queries__item x-suggestion\"\n            >\n              <template #default>\n                <!--\n              @slot History Query content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n                  @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n            -->\n                <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, formatTime }\">\n                  <div class=\"x-list x-list--vertical\">\n                    <span>{{ suggestion.query }}</span>\n                    <span>{{ formatTime(suggestion.timestamp) }}</span>\n                  </div>\n                </slot>\n              </template>\n              <template #remove-button-content>\n                <!--\n              @slot History Query remove button content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n            -->\n                <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n              </template>\n            </HistoryQuery>\n          </slot>\n        </template>\n      </BaseSuggestions>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import Vue from 'vue';\n  import { Component, Inject, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { State } from '../../../components/decorators/store.decorators';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { groupItemsBy, isArrayEmpty } from '../../../utils/array';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { historyQueriesXModule } from '../x-module';\n  import HistoryQueryComponent from './history-query.vue';\n\n  /**\n   * The component renders the full history of user searched queries grouped by the day\n   * they were performed.\n   *\n   * @remarks\n   *\n   * Allows the user to select one of them, emitting the needed events.\n   * A history query is just another type of suggestion that contains a query that the user has\n   * made in the past.\n   * @public\n   */\n  @Component({\n    components: { HistoryQuery: HistoryQueryComponent, BaseSuggestions },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class MyHistory extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * The current locale.\n     *\n     * @public\n     */\n    @Prop({ default: 'en' })\n    protected locale!: string;\n\n    /**\n     * The list of history queries.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'historyQueries')\n    public historyQueries!: HistoryQuery[];\n\n    /**\n     * The provided {@link SnippetConfig}.\n     *\n     * @internal\n     */\n    @Inject('snippetConfig')\n    public snippetConfig?: SnippetConfig;\n\n    /**\n     * Returns a record of history queries grouped by date.\n     *\n     * @example\n     * ```typescript\n     *  const historyQueriesGrouped = {\n     *    'Monday, January 10th, 2022' : [{\n     *      query: 'lego',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 121312312\n     *    }],\n     *    'Tuesday, January 11th, 2022' : [{\n     *      query: 'barbie',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 15221212\n     *    }]\n     *  }\n     * ```\n     * @returns The history queries grouped by date.\n     * @internal\n     */\n    protected get groupByDate(): Dictionary<HistoryQuery[]> {\n      return groupItemsBy(this.historyQueries, current => {\n        return new Date(current.timestamp).toLocaleDateString(this.usedLocale, {\n          day: 'numeric',\n          weekday: 'long',\n          month: 'long',\n          year: 'numeric'\n        });\n      });\n    }\n\n    /**\n     * Formats a timestamp into `hh:mm [PM/AM]` format.\n     *\n     * @example\n     * ```typescript\n     * // locale 'es'\n     * console.log(formatTime(Date.now()) // '16:54'.\n     *\n     * // locale 'en'\n     * console.log(formatTime(Date.now()) // '16:54 PM'.\n     * ```\n     * @param timestamp - The timestamp to format.\n     * @returns The formatted time.\n     * @internal\n     */\n    protected formatTime(timestamp: number): string {\n      return new Date(timestamp).toLocaleTimeString(this.usedLocale, {\n        hour: '2-digit',\n        minute: '2-digit'\n      });\n    }\n    /**\n     * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n     * stored.\n     *\n     * @returns True if there are history queries; false otherwise.\n     * @internal\n     */\n    protected get hasHistoryQueries(): boolean {\n      return !isArrayEmpty(this.historyQueries);\n    }\n    /**\n     * The locale that it is going to be used. It can be the one send it by the snippet config or\n     * the one pass it using the prop.\n     *\n     * @returns The locale to be used.\n     * @internal\n     */\n    protected get usedLocale(): string {\n      return this.snippetConfig?.lang ?? this.locale;\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n  <MyHistory />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n  <MyHistory :locale=\"es\" />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    },\n    data() {\n      return {\n        fadeAndSlide: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n  <MyHistory #suggestion=\"{ suggestion }\">\n    <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory,\n      HistoryQuery\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n  <MyHistory #suggestion-content=\"{ suggestion }\">\n    <span>{{ suggestion.query }}</span>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n  <MyHistory #date=\"{ date }\">\n    <span>{{ date }}</span>\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory\n    }\n  };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n  <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n    <CrossIcon />\n  </MyHistory>\n</template>\n\n<script>\n  import { MyHistory } from '@empathyco/x-components/history-queries';\n  import { CrossIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'MyHistoryDemo',\n    components: {\n      MyHistory,\n      CrossIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -29,7 +29,8 @@ var __vue_render__ = function () {
                     function () {
                       return [
                         _c("NextQuery", {
-                          staticClass: "x-next-queries__suggestion",
+                          staticClass:
+                            "x-next-queries__suggestion x-suggestion",
                           attrs: {
                             suggestion: baseScope.suggestion,
                             highlightCurated: _vm.highlightCurated,

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=\"baseScope\">\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=\"{ ...baseScope, highlightCurated }\">\n        <NextQuery\n          #default=\"nextQueryScope\"\n          :suggestion=\"baseScope.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=\"{ ...baseScope, ...nextQueryScope }\" />\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    inheritAttrs: false,\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| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\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        <TrendingIcon />\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 { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      TrendingIcon\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            <TrendingIcon />\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 { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      NextQuery,\n      TrendingIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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=\"baseScope\">\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=\"{ ...baseScope, highlightCurated }\">\n        <NextQuery\n          #default=\"nextQueryScope\"\n          :suggestion=\"baseScope.suggestion\"\n          :highlightCurated=\"highlightCurated\"\n          class=\"x-next-queries__suggestion x-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=\"{ ...baseScope, ...nextQueryScope }\" />\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    inheritAttrs: false,\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| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\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        <TrendingIcon />\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 { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      TrendingIcon\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            <TrendingIcon />\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 { TrendingIcon } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesDemo',\n    components: {\n      SearchInput,\n      NextQueries,\n      NextQuery,\n      TrendingIcon\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -29,7 +29,8 @@ var __vue_render__ = function () {
                     function () {
                       return [
                         _c("PopularSearch", {
-                          staticClass: "x-popular-searches__suggestion",
+                          staticClass:
+                            "x-popular-searches__suggestion x-suggestion",
                           attrs: { suggestion: baseScope.suggestion },
                           scopedSlots: _vm._u(
                             [

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=\"baseScope\">\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=\"{ ...baseScope }\">\n        <PopularSearch\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-popular-searches__suggestion\"\n          #default=\"popularSearchScope\"\n        >\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=\"{ ...baseScope, ...popularSearchScope }\" />\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    inheritAttrs: false,\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| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\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,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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=\"baseScope\">\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=\"{ ...baseScope }\">\n        <PopularSearch\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-popular-searches__suggestion x-suggestion\"\n          #default=\"popularSearchScope\"\n        >\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=\"{ ...baseScope, ...popularSearchScope }\" />\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    inheritAttrs: false,\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| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |\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,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/query-suggestions/components/query-suggestions.vue.js

@@ -29,7 +29,8 @@ var __vue_render__ = function () {
                     function () {
                       return [
                         _c("QuerySuggestion", {
-                          staticClass: "x-query-suggestions__suggestion",
+                          staticClass:
+                            "x-query-suggestions__suggestion x-suggestion",
                           attrs: { suggestion: baseScope.suggestion },
                           scopedSlots: _vm._u(
                             [

package/js/x-modules/query-suggestions/components/query-suggestions.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-suggestions.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestions.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-bind=\"$attrs\"\n    :suggestions=\"suggestions\"\n    class=\"x-query-suggestions\"\n    data-test=\"query-suggestions\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Custom component that replaces the `QuerySuggestion` component\n            @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <QuerySuggestion\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-query-suggestions__suggestion\"\n          #default=\"querySuggestionScope\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n            @slot Custom content that replaces the `QuerySuggestion` default content\n                @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n          -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...querySuggestionScope }\" />\n        </QuerySuggestion>\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 Highlight from '../../../components/highlight.vue';\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 { querySuggestionsXModule } from '../x-module';\n  import QuerySuggestion from './query-suggestion.vue';\n\n  /**\n   * This component renders a list of possible search queries to select from as a query is entered\n   * in the input field. By default, this is a list of\n   * [`QuerySuggestion`](./x-components.query-suggestion.md) components.\n   *\n   * @public\n   */\n  @Component({\n    inheritAttrs: false,\n    components: { Highlight, BaseSuggestions, QuerySuggestion },\n    mixins: [xComponentMixin(querySuggestionsXModule)]\n  })\n  export default class QuerySuggestions extends Vue {\n    /**\n     * The module's list of suggestions.\n     *\n     * @internal\n     */\n    @Getter('querySuggestions', 'querySuggestions')\n    public suggestions!: Suggestion[];\n  }\n</script>\n\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| `animation`        | Animation component for `QuerySuggestions`. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of query suggestions to be rendered. | `number` |         |\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example, a list of query suggestions is displayed. See how the suggestions change as you\ntype “sandal”. If you click on a suggestion, the search term in the search input is updated and the\nquery suggestions are changed to reflect the new search term.\n\n_Type “sandal” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestions,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the\nmatching query suggestions are shuffled with a slight delay as more letters of the term are typed.\n\n_Type “lipstick” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions :animation=\"'StaggeredFadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestions,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nHere, the `suggestion` binding property passes the suggestion data.\n\n_Type “bag” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n        <span>🔍</span>\n        <span>{{ suggestion.query }}</span>\n      </QuerySuggestion>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestion, QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestion,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n\n<!-- prettier-ignore-start -->\n::: danger\nIf you're not using the [`QuerySuggestion`](./query-suggestion.md) component, then\nyou must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in\n`QuerySuggestions`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <button @click=\"emitSuggestionClickedEvents($event, suggestion)\">\n        {{ suggestion.query }}\n      </button>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    },\n    methods: {\n      emitSuggestionClickedEvents(event, suggestion) {\n        this.$x.emit('UserAcceptedAQuery', suggestion.query, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedASuggestion', suggestion, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedAQuerySuggestion', suggestion, {\n          target: event.target\n        });\n      }\n    }\n  };\n</script>\n```\n\n:::\n<!-- prettier-ignore-end -->\n\n### Play with suggestion-content slot\n\nIn this example, the `suggestion` and `query` properties of the `suggestion-content` slot are used\nto paint a suggestion with an icon.\n\n_Type “trousers” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion-content=\"{ suggestion, query }\">\n      <span>🔍</span>\n      <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions,\n      Highlight\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `QuerySuggestions`\ncomponent communicates with the [`SearchInput`](../search-box/x-components.search-input.md),\nupdating the term in the search input.\n\n_Type “pants” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"query-suggestions.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestions.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-bind=\"$attrs\"\n    :suggestions=\"suggestions\"\n    class=\"x-query-suggestions\"\n    data-test=\"query-suggestions\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Custom component that replaces the `QuerySuggestion` component\n            @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <QuerySuggestion\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-query-suggestions__suggestion x-suggestion\"\n          #default=\"querySuggestionScope\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n            @slot Custom content that replaces the `QuerySuggestion` default content\n                @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n          -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...querySuggestionScope }\" />\n        </QuerySuggestion>\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 Highlight from '../../../components/highlight.vue';\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 { querySuggestionsXModule } from '../x-module';\n  import QuerySuggestion from './query-suggestion.vue';\n\n  /**\n   * This component renders a list of possible search queries to select from as a query is entered\n   * in the input field. By default, this is a list of\n   * [`QuerySuggestion`](./x-components.query-suggestion.md) components.\n   *\n   * @public\n   */\n  @Component({\n    inheritAttrs: false,\n    components: { Highlight, BaseSuggestions, QuerySuggestion },\n    mixins: [xComponentMixin(querySuggestionsXModule)]\n  })\n  export default class QuerySuggestions extends Vue {\n    /**\n     * The module's list of suggestions.\n     *\n     * @internal\n     */\n    @Getter('querySuggestions', 'querySuggestions')\n    public suggestions!: Suggestion[];\n  }\n</script>\n\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| `animation`        | Animation component for `QuerySuggestions`. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of query suggestions to be rendered. | `number` |         |\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example, a list of query suggestions is displayed. See how the suggestions change as you\ntype “sandal”. If you click on a suggestion, the search term in the search input is updated and the\nquery suggestions are changed to reflect the new search term.\n\n_Type “sandal” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestions,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the\nmatching query suggestions are shuffled with a slight delay as more letters of the term are typed.\n\n_Type “lipstick” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions :animation=\"'StaggeredFadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestions,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nHere, the `suggestion` binding property passes the suggestion data.\n\n_Type “bag” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n        <span>🔍</span>\n        <span>{{ suggestion.query }}</span>\n      </QuerySuggestion>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestion, QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestion,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n\n<!-- prettier-ignore-start -->\n::: danger\nIf you're not using the [`QuerySuggestion`](./query-suggestion.md) component, then\nyou must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in\n`QuerySuggestions`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <button @click=\"emitSuggestionClickedEvents($event, suggestion)\">\n        {{ suggestion.query }}\n      </button>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    },\n    methods: {\n      emitSuggestionClickedEvents(event, suggestion) {\n        this.$x.emit('UserAcceptedAQuery', suggestion.query, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedASuggestion', suggestion, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedAQuerySuggestion', suggestion, {\n          target: event.target\n        });\n      }\n    }\n  };\n</script>\n```\n\n:::\n<!-- prettier-ignore-end -->\n\n### Play with suggestion-content slot\n\nIn this example, the `suggestion` and `query` properties of the `suggestion-content` slot are used\nto paint a suggestion with an icon.\n\n_Type “trousers” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion-content=\"{ suggestion, query }\">\n      <span>🔍</span>\n      <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions,\n      Highlight\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `QuerySuggestions`\ncomponent communicates with the [`SearchInput`](../search-box/x-components.search-input.md),\nupdating the term in the search input.\n\n_Type “pants” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.315",
+  "version": "3.0.0-alpha.317",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -88,7 +88,7 @@
   },
   "devDependencies": {
     "@badeball/cypress-cucumber-preprocessor": "~15.0.0",
-    "@bahmutov/cypress-esbuild-preprocessor": "~2.1.5",
+    "@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
     "@cypress/vue": "~2.2.4",
     "@empathyco/x-adapter-platform": "^1.0.0-alpha.63",
     "@empathyco/x-tailwindcss": "^1.0.0-alpha.7",
@@ -141,5 +141,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "8281062142ce396984dff3f8116bba9cd5ae80ec"
+  "gitHead": "7a7d697f94164ab63157de4795c16873b497ac0c"
 }

package/types/x-modules/history-queries/components/history-queries.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgDE,OAAO,EAAE,YAAY,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,GAAG,MAAM,KAAK,CAAC;AAQtB;;;;;;GAMG;AAMH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,GAAG;IAC7C;;;;OAIG;IAEI,cAAc,EAAG,iBAAiB,EAAE,CAAC;CAC7C"}
+{"version":3,"file":"history-queries.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAiDE,OAAO,EAAE,YAAY,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,GAAG,MAAM,KAAK,CAAC;AAQtB;;;;;;GAMG;AAMH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,GAAG;IAC7C;;;;OAIG;IAEI,cAAc,EAAG,iBAAiB,EAAE,CAAC;CAC7C"}