@empathyco/x-components 6.0.0-alpha.75 → 6.0.0-alpha.76

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

@@ -1 +1 @@
-{"version":3,"file":"history-queries.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"historyQueriesWithResults\"\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          suggestion-class=\"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\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { historyQueriesXModule } from '../x-module'\nimport 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 */\nexport default defineComponent({\n  name: 'HistoryQueries',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseSuggestions,\n    HistoryQuery,\n  },\n  setup() {\n    /**\n     * The filtered list of history queries.\n     *\n     * @internal\n     */\n    const { historyQueriesWithResults } = useGetter('historyQueries', ['historyQueriesWithResults'])\n\n    return {\n      historyQueriesWithResults,\n    }\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## 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport 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>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { CrossIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    CrossIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAsDA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,eAAe;QACf,YAAY;AACb,KAAA;IACD,KAAK,GAAA;AACH;;;;AAIE;AACF,QAAA,MAAM,EAAE,yBAA0B,EAAA,GAAI,SAAS,CAAC,gBAAgB,EAAE,CAAC,2BAA2B,CAAC,CAAA,CAAA;QAE/F,OAAO;YACL,yBAAyB;SAC3B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"history-queries.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"historyQueriesWithResults\"\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          suggestion-class=\"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\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { historyQueriesXModule } from '../x-module'\nimport 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 */\nexport default defineComponent({\n  name: 'HistoryQueries',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseSuggestions,\n    HistoryQuery,\n  },\n  setup() {\n    /**\n     * The filtered list of history queries.\n     *\n     * @internal\n     */\n    const { historyQueriesWithResults } = useGetter('historyQueries')\n\n    return {\n      historyQueriesWithResults,\n    }\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## 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport 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>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { CrossIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    CrossIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAsDA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,eAAe;QACf,YAAY;AACb,KAAA;IACD,KAAK,GAAA;AACH;;;;AAIE;QACF,MAAM,EAAE,yBAA0B,EAAA,GAAI,SAAS,CAAC,gBAAgB,CAAA,CAAA;QAEhE,OAAO;YACL,yBAAyB;SAC3B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-history-query x-suggestion-group\">\n    <!--\n      Click on the History Query suggestion\n      @event click\n      @property {Suggestion} suggestion - History Query suggestion data\n      @property {MouseEvent} event - The original mouse event\n    -->\n    <BaseSuggestion\n      v-slot=\"baseScope\"\n      class=\"x-history-query__suggestion\"\n      :class=\"suggestionClass\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n      @click=\"$emit('click', suggestion, $event)\"\n    >\n      <!-- eslint-disable max-len -->\n      <!--\n          @slot History Query content\n              @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ ...baseScope }\" />\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove x-suggestion-group-button\"\n      :class=\"removeButtonClass\"\n      :history-query=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n      -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { historyQueriesXModule } from '../x-module'\nimport RemoveHistoryQuery from './remove-history-query.vue'\n\n/**\n * This component renders a history query suggestion combining two buttons: one for selecting this\n * suggestion as the search query, and another one to remove this query suggestion from the\n * history queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQuery',\n  xModule: historyQueriesXModule.name,\n  components: { RemoveHistoryQuery, BaseSuggestion },\n  props: {\n    /**\n     * The history query suggestion to render.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<HistoryQueryModel>,\n      required: true,\n    },\n    /** Class inherited by content element. */\n    removeButtonClass: String,\n    /** Class inherited by content element. */\n    suggestionClass: String,\n  },\n  emits: ['click'],\n  setup(props) {\n    /**\n     * The normalized query of the history-queries module.\n     *\n     * @internal\n     */\n    const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery\n\n    /**\n     * The list of events that are going to be emitted when the suggestion button is pressed.\n     *\n     * @internal\n     * @returns The {@link XEvent} to emit.\n     */\n    const suggestionSelectedEvents = computed(\n      (): Partial<XEventsTypes> => ({\n        UserSelectedAHistoryQuery: props.suggestion,\n      }),\n    )\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAHistoryQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the history query\n  data.\n\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <HistoryIcon />\n      <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n    </template>\n\n    <template #remove-button-content=\"{ suggestion }\">\n      <CrossIcon />\n    </template>\n  </HistoryQuery>\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nimport { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n    HistoryIcon,\n    CrossIcon,\n    Highlight,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing the content with classes\n\nThe `suggestionClass` prop can be used to add classes to the history query suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" suggestionClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\nThe `removeButtonClass` prop can be used to add classes to the remove history query.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" removeButtonClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","suggestionClass","_createVNode","_mergeProps","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;;;wCACEA,gBAoCM,CAAA,oBAAA,CAAA,CAAA;AA3BF,EAAA,OAAAC,SAAA,uBAAmC,KAC3BC,EAAAA,UAAAA,EAAAA;AAAAA,IACYC,WAAA,CAAA,yBAAA,EAAAC,UAAA,CAAA;AAAA,MACpB,KAAyB,EAAA,CAAA,6BAAA,EAAA,IAAA,CAAA,eAAA,CAAA;AAAA,KAAA,EACzB,cAAQ,IAAe,CAAA,UAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,wBAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,EAAA;AAAA,MACtB,WAAK,EAAA,eAAA;AAAA,MAAA,OAAA,EAAA,eAAA;AAfZ,MAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KASc,MAAS,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,KAAA,CAAA,OAAA,EAAA,IAAA,CAAA,UAAA,EAAA,MAAA,CAAA,CAAA;AAAA,KAcjB,CAAA,EAAA;AAAA,MAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAvBN,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAyBI,MAAA,CAAA,EAAA,CAAA;AAAA;AAAA,KAAA,EACE,IA1BN,CA0BY,OAAA,CAAA,CAAA;AAAA,IAAAL,WAAA,CAEL,6BAAyB,EAAA;AAAA,MAC1B,sBAAU,CAAsB,mDAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,MAAA,eAAA,EAAA,IAAA,CAAA,UAAA;AA7BtC,MAAA,WAAA,EAAA,sBAAA;AAAA,KAAA,EAAA;eAAAE,OAmCkE,CAAA,MAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,uBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;AAnClE,SAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}
+{"version":3,"file":"history-query.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-history-query x-suggestion-group\">\n    <!--\n      Click on the History Query suggestion\n      @event click\n      @property {Suggestion} suggestion - History Query suggestion data\n      @property {MouseEvent} event - The original mouse event\n    -->\n    <BaseSuggestion\n      v-slot=\"baseScope\"\n      class=\"x-history-query__suggestion\"\n      :class=\"suggestionClass\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n      @click=\"$emit('click', suggestion, $event)\"\n    >\n      <!-- eslint-disable max-len -->\n      <!--\n          @slot History Query content\n              @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ ...baseScope }\" />\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove x-suggestion-group-button\"\n      :class=\"removeButtonClass\"\n      :history-query=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n      -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { historyQueriesXModule } from '../x-module'\nimport RemoveHistoryQuery from './remove-history-query.vue'\n\n/**\n * This component renders a history query suggestion combining two buttons: one for selecting this\n * suggestion as the search query, and another one to remove this query suggestion from the\n * history queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQuery',\n  xModule: historyQueriesXModule.name,\n  components: { RemoveHistoryQuery, BaseSuggestion },\n  props: {\n    /**\n     * The history query suggestion to render.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<HistoryQueryModel>,\n      required: true,\n    },\n    /** Class inherited by content element. */\n    removeButtonClass: String,\n    /** Class inherited by content element. */\n    suggestionClass: String,\n  },\n  emits: ['click'],\n  setup(props) {\n    /**\n     * The normalized query of the history-queries module.\n     *\n     * @internal\n     */\n    const query = useGetter('historyQueries').normalizedQuery\n\n    /**\n     * The list of events that are going to be emitted when the suggestion button is pressed.\n     *\n     * @internal\n     * @returns The {@link XEvent} to emit.\n     */\n    const suggestionSelectedEvents = computed(\n      (): Partial<XEventsTypes> => ({\n        UserSelectedAHistoryQuery: props.suggestion,\n      }),\n    )\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAHistoryQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the history query\n  data.\n\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <HistoryIcon />\n      <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n    </template>\n\n    <template #remove-button-content=\"{ suggestion }\">\n      <CrossIcon />\n    </template>\n  </HistoryQuery>\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nimport { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n    HistoryIcon,\n    CrossIcon,\n    Highlight,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing the content with classes\n\nThe `suggestionClass` prop can be used to add classes to the history query suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" suggestionClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\nThe `removeButtonClass` prop can be used to add classes to the remove history query.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" removeButtonClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","suggestionClass","_createVNode","_mergeProps","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;;;wCACEA,gBAoCM,CAAA,oBAAA,CAAA,CAAA;AA3BF,EAAA,OAAAC,SAAA,uBAAmC,KAC3BC,EAAAA,UAAAA,EAAAA;AAAAA,IACYC,WAAA,CAAA,yBAAA,EAAAC,UAAA,CAAA;AAAA,MACpB,KAAyB,EAAA,CAAA,6BAAA,EAAA,IAAA,CAAA,eAAA,CAAA;AAAA,KAAA,EACzB,cAAQ,IAAe,CAAA,UAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,wBAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,EAAA;AAAA,MACtB,WAAK,EAAA,eAAA;AAAA,MAAA,OAAA,EAAA,eAAA;AAfZ,MAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KASc,MAAS,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,KAAA,CAAA,OAAA,EAAA,IAAA,CAAA,UAAA,EAAA,MAAA,CAAA,CAAA;AAAA,KAcjB,CAAA,EAAA;AAAA,MAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAvBN,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAyBI,MAAA,CAAA,EAAA,CAAA;AAAA;AAAA,KAAA,EACE,IA1BN,CA0BY,OAAA,CAAA,CAAA;AAAA,IAAAL,WAAA,CAEL,6BAAyB,EAAA;AAAA,MAC1B,sBAAU,CAAsB,mDAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,MAAA,eAAA,EAAA,IAAA,CAAA,UAAA;AA7BtC,MAAA,WAAA,EAAA,sBAAA;AAAA,KAAA,EAAA;eAAAE,OAmCkE,CAAA,MAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,uBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;AAnClE,SAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}

package/js/x-modules/history-queries/components/history-query.vue2.js

@@ -37,7 +37,7 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery;
+        const query = useGetter('historyQueries').normalizedQuery;
         /**
          * The list of events that are going to be emitted when the suggestion button is pressed.
          *

package/js/x-modules/history-queries/components/history-query.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-query.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-history-query x-suggestion-group\">\n    <!--\n      Click on the History Query suggestion\n      @event click\n      @property {Suggestion} suggestion - History Query suggestion data\n      @property {MouseEvent} event - The original mouse event\n    -->\n    <BaseSuggestion\n      v-slot=\"baseScope\"\n      class=\"x-history-query__suggestion\"\n      :class=\"suggestionClass\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n      @click=\"$emit('click', suggestion, $event)\"\n    >\n      <!-- eslint-disable max-len -->\n      <!--\n          @slot History Query content\n              @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ ...baseScope }\" />\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove x-suggestion-group-button\"\n      :class=\"removeButtonClass\"\n      :history-query=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n      -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { historyQueriesXModule } from '../x-module'\nimport RemoveHistoryQuery from './remove-history-query.vue'\n\n/**\n * This component renders a history query suggestion combining two buttons: one for selecting this\n * suggestion as the search query, and another one to remove this query suggestion from the\n * history queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQuery',\n  xModule: historyQueriesXModule.name,\n  components: { RemoveHistoryQuery, BaseSuggestion },\n  props: {\n    /**\n     * The history query suggestion to render.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<HistoryQueryModel>,\n      required: true,\n    },\n    /** Class inherited by content element. */\n    removeButtonClass: String,\n    /** Class inherited by content element. */\n    suggestionClass: String,\n  },\n  emits: ['click'],\n  setup(props) {\n    /**\n     * The normalized query of the history-queries module.\n     *\n     * @internal\n     */\n    const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery\n\n    /**\n     * The list of events that are going to be emitted when the suggestion button is pressed.\n     *\n     * @internal\n     * @returns The {@link XEvent} to emit.\n     */\n    const suggestionSelectedEvents = computed(\n      (): Partial<XEventsTypes> => ({\n        UserSelectedAHistoryQuery: props.suggestion,\n      }),\n    )\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAHistoryQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the history query\n  data.\n\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <HistoryIcon />\n      <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n    </template>\n\n    <template #remove-button-content=\"{ suggestion }\">\n      <CrossIcon />\n    </template>\n  </HistoryQuery>\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nimport { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n    HistoryIcon,\n    CrossIcon,\n    Highlight,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing the content with classes\n\nThe `suggestionClass` prop can be used to add classes to the history query suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" suggestionClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\nThe `removeButtonClass` prop can be used to add classes to the remove history query.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" removeButtonClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAkDA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE,EAAE,kBAAkB,EAAE,gBAAgB;AAClD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,iBAAiB,EAAE,MAAM;;AAEzB,QAAA,eAAe,EAAE,MAAM;AACxB,KAAA;IACD,KAAK,EAAE,CAAC,OAAO,CAAC;AAChB,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,KAAI,GAAI,SAAS,CAAC,gBAAgB,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAc,CAAA;AAE7E;;;;;AAKE;AACF,QAAA,MAAM,wBAAuB,GAAI,QAAQ,CACvC,OAA8B;YAC5B,yBAAyB,EAAE,KAAK,CAAC,UAAU;AAC5C,SAAA,CAAC,CACJ,CAAA;QAEA,OAAO;YACL,KAAK;YACL,wBAAwB;SAC1B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"history-query.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-query.vue"],"sourcesContent":["<template>\n  <div class=\"x-history-query x-suggestion-group\">\n    <!--\n      Click on the History Query suggestion\n      @event click\n      @property {Suggestion} suggestion - History Query suggestion data\n      @property {MouseEvent} event - The original mouse event\n    -->\n    <BaseSuggestion\n      v-slot=\"baseScope\"\n      class=\"x-history-query__suggestion\"\n      :class=\"suggestionClass\"\n      v-bind=\"{ suggestion, suggestionSelectedEvents, query }\"\n      data-test=\"history-query\"\n      feature=\"history_query\"\n      @click=\"$emit('click', suggestion, $event)\"\n    >\n      <!-- eslint-disable max-len -->\n      <!--\n          @slot History Query content\n              @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter or undefined</code> - Suggestion's filter\n      -->\n      <!-- eslint-enable max-len -->\n      <slot v-bind=\"{ ...baseScope }\" />\n    </BaseSuggestion>\n    <RemoveHistoryQuery\n      class=\"x-history-query__remove x-suggestion-group-button\"\n      :class=\"removeButtonClass\"\n      :history-query=\"suggestion\"\n      data-test=\"remove-history-query\"\n    >\n      <!--\n          @slot History Query remove button content\n              @binding {Suggestion} suggestion - History Query suggestion data\n      -->\n      <slot name=\"remove-button-content\" v-bind=\"{ suggestion }\">✕</slot>\n    </RemoveHistoryQuery>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { historyQueriesXModule } from '../x-module'\nimport RemoveHistoryQuery from './remove-history-query.vue'\n\n/**\n * This component renders a history query suggestion combining two buttons: one for selecting this\n * suggestion as the search query, and another one to remove this query suggestion from the\n * history queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQuery',\n  xModule: historyQueriesXModule.name,\n  components: { RemoveHistoryQuery, BaseSuggestion },\n  props: {\n    /**\n     * The history query suggestion to render.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<HistoryQueryModel>,\n      required: true,\n    },\n    /** Class inherited by content element. */\n    removeButtonClass: String,\n    /** Class inherited by content element. */\n    suggestionClass: String,\n  },\n  emits: ['click'],\n  setup(props) {\n    /**\n     * The normalized query of the history-queries module.\n     *\n     * @internal\n     */\n    const query = useGetter('historyQueries').normalizedQuery\n\n    /**\n     * The list of events that are going to be emitted when the suggestion button is pressed.\n     *\n     * @internal\n     * @returns The {@link XEvent} to emit.\n     */\n    const suggestionSelectedEvents = computed(\n      (): Partial<XEventsTypes> => ({\n        UserSelectedAHistoryQuery: props.suggestion,\n      }),\n    )\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedAHistoryQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the history query\n  data.\n\n## Examples\n\n### Basic usage\n\nThis component only requires a prop called `suggestion`\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing slots content\n\nSuggestion and remove buttons contents can be customized.\n\nThe default slot allows you to replace the content of the suggestion button. It has two properties,\nthe suggestion itself, and a `string` of HTML with the matched query.\n\nThe other slot is called `remove-button-content`, and allows you to set the content of the button\nthat serves to remove this query from the history. This slot only has one property, the suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion }\">\n      <HistoryIcon />\n      <Highlight highlight=\"tro\" :text=\"suggestion.query\" />\n    </template>\n\n    <template #remove-button-content=\"{ suggestion }\">\n      <CrossIcon />\n    </template>\n  </HistoryQuery>\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nimport { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n    HistoryIcon,\n    CrossIcon,\n    Highlight,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing the content with classes\n\nThe `suggestionClass` prop can be used to add classes to the history query suggestion.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" suggestionClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\nThe `removeButtonClass` prop can be used to add classes to the remove history query.\n\n```vue live\n<template>\n  <HistoryQuery :suggestion=\"suggestion\" removeButtonClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { HistoryQuery } from '@empathyco/x-components/history-queries'\nexport default {\n  name: 'HistoryQueryDemo',\n  components: {\n    HistoryQuery,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'HistoryQuery',\n        query: 'trousers',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAkDA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE,EAAE,kBAAkB,EAAE,gBAAgB;AAClD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,iBAAiB,EAAE,MAAM;;AAEzB,QAAA,eAAe,EAAE,MAAM;AACxB,KAAA;IACD,KAAK,EAAE,CAAC,OAAO,CAAC;AAChB,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,KAAI,GAAI,SAAS,CAAC,gBAAgB,CAAC,CAAC,eAAc,CAAA;AAExD;;;;;AAKE;AACF,QAAA,MAAM,wBAAuB,GAAI,QAAQ,CACvC,OAA8B;YAC5B,yBAAyB,EAAE,KAAK,CAAC,UAAU;AAC5C,SAAA,CAAC,CACJ,CAAA;QAEA,OAAO;YACL,KAAK;YACL,wBAAwB;SAC1B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"identifier-result.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n    v-html=\"highlightedQueryHTML\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { ComputedRef, PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { useState } from '../../../composables/use-state'\nimport { identifierResultsXModule } from '../x-module'\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'IdentifierResult',\n  xModule: identifierResultsXModule.name,\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    const { query } = useState('identifierResults')\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    const identifierHighlightRegexp: ComputedRef<RegExp> = useGetter('identifierResults', [\n      'identifierHighlightRegexp',\n    ]).identifierHighlightRegexp\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    const highlightedQueryHTML = computed(() => {\n      const identifierValue = props.result.identifier?.value ?? ''\n      if (identifierValue && identifierHighlightRegexp.value) {\n        return identifierValue.replace(\n          identifierHighlightRegexp.value,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>',\n        )\n      }\n      return identifierValue\n    })\n\n    return {\n      query,\n      highlightedQueryHTML,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createCommentVNode"],"mappings":";;;;;qBACE,IAKQ,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AANV,EAAA,OAAA,IAAA,CAAA,KAAA,IAAAA,SAAA,EAG+B,EAAAC,kBAAA,CAAA,MAAA,EAAA;AAAA,IAC3B,GAAA,EAAA,CAAA;AAAA,IACA,KAAA,EAAA,qBAAA;AAAA,IAAA,WAAA,EAAA,mBAAA;AALJ,IAAA,SAAA,EAAA,IAAA,CAAA,oBAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,UAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"identifier-result.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n    v-html=\"highlightedQueryHTML\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { useState } from '../../../composables/use-state'\nimport { identifierResultsXModule } from '../x-module'\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'IdentifierResult',\n  xModule: identifierResultsXModule.name,\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    const { query } = useState('identifierResults')\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    const identifierHighlightRegexp = useGetter('identifierResults').identifierHighlightRegexp\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    const highlightedQueryHTML = computed(() => {\n      const identifierValue = props.result.identifier?.value ?? ''\n      if (identifierValue && identifierHighlightRegexp.value) {\n        return identifierValue.replace(\n          identifierHighlightRegexp.value,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>',\n        )\n      }\n      return identifierValue\n    })\n\n    return {\n      query,\n      highlightedQueryHTML,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createCommentVNode"],"mappings":";;;;;qBACE,IAKQ,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AANV,EAAA,OAAA,IAAA,CAAA,KAAA,IAAAA,SAAA,EAG+B,EAAAC,kBAAA,CAAA,MAAA,EAAA;AAAA,IAC3B,GAAA,EAAA,CAAA;AAAA,IACA,KAAA,EAAA,qBAAA;AAAA,IAAA,WAAA,EAAA,mBAAA;AALJ,IAAA,SAAA,EAAA,IAAA,CAAA,oBAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,UAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/identifier-results/components/identifier-result.vue2.js

@@ -36,9 +36,7 @@ var _sfc_main = defineComponent({
          *
          * @public
          */
-        const identifierHighlightRegexp = useGetter('identifierResults', [
-            'identifierHighlightRegexp',
-        ]).identifierHighlightRegexp;
+        const identifierHighlightRegexp = useGetter('identifierResults').identifierHighlightRegexp;
         /**
          * Highlights the matching part of the identifier result with the query from the state.
          *

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

@@ -1 +1 @@
-{"version":3,"file":"identifier-result.vue2.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n    v-html=\"highlightedQueryHTML\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { ComputedRef, PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { useState } from '../../../composables/use-state'\nimport { identifierResultsXModule } from '../x-module'\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'IdentifierResult',\n  xModule: identifierResultsXModule.name,\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    const { query } = useState('identifierResults')\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    const identifierHighlightRegexp: ComputedRef<RegExp> = useGetter('identifierResults', [\n      'identifierHighlightRegexp',\n    ]).identifierHighlightRegexp\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    const highlightedQueryHTML = computed(() => {\n      const identifierValue = props.result.identifier?.value ?? ''\n      if (identifierValue && identifierHighlightRegexp.value) {\n        return identifierValue.replace(\n          identifierHighlightRegexp.value,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>',\n        )\n      }\n      return identifierValue\n    })\n\n    return {\n      query,\n      highlightedQueryHTML,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,wBAAwB,CAAC,IAAI;AACtC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,EAAE,KAAI,KAAM,QAAQ,CAAC,mBAAmB,CAAA,CAAA;AAE9C;;;;;AAKE;AACF,QAAA,MAAM,yBAAyB,GAAwB,SAAS,CAAC,mBAAmB,EAAE;YACpF,2BAA2B;SAC5B,CAAC,CAAC,yBAAwB,CAAA;AAE3B;;;;;AAKE;AACF,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CAAC,MAAM;YAC1C,MAAM,eAAc,GAAI,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE,KAAI,IAAK,EAAC,CAAA;AAC3D,YAAA,IAAI,eAAgB,IAAG,yBAAyB,CAAC,KAAK,EAAE;gBACtD,OAAO,eAAe,CAAC,OAAO,CAC5B,yBAAyB,CAAC,KAAK,EAC/B,4DAA4D,CAC9D,CAAA;AACF,aAAA;AACA,YAAA,OAAO,eAAc,CAAA;AACvB,SAAC,CAAA,CAAA;QAED,OAAO;YACL,KAAK;YACL,oBAAoB;SACtB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"identifier-result.vue2.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n    v-html=\"highlightedQueryHTML\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { useState } from '../../../composables/use-state'\nimport { identifierResultsXModule } from '../x-module'\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'IdentifierResult',\n  xModule: identifierResultsXModule.name,\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    const { query } = useState('identifierResults')\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    const identifierHighlightRegexp = useGetter('identifierResults').identifierHighlightRegexp\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    const highlightedQueryHTML = computed(() => {\n      const identifierValue = props.result.identifier?.value ?? ''\n      if (identifierValue && identifierHighlightRegexp.value) {\n        return identifierValue.replace(\n          identifierHighlightRegexp.value,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>',\n        )\n      }\n      return identifierValue\n    })\n\n    return {\n      query,\n      highlightedQueryHTML,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,wBAAwB,CAAC,IAAI;AACtC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,EAAE,KAAI,KAAM,QAAQ,CAAC,mBAAmB,CAAA,CAAA;AAE9C;;;;;AAKE;QACF,MAAM,4BAA4B,SAAS,CAAC,mBAAmB,CAAC,CAAC,yBAAwB,CAAA;AAEzF;;;;;AAKE;AACF,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CAAC,MAAM;YAC1C,MAAM,eAAc,GAAI,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE,KAAI,IAAK,EAAC,CAAA;AAC3D,YAAA,IAAI,eAAgB,IAAG,yBAAyB,CAAC,KAAK,EAAE;gBACtD,OAAO,eAAe,CAAC,OAAO,CAC5B,yBAAyB,CAAC,KAAK,EAC/B,4DAA4D,CAC9D,CAAA;AACF,aAAA;AACA,YAAA,OAAO,eAAc,CAAA;AACvB,SAAC,CAAA,CAAA;QAED,OAAO;YACL,KAAK;YACL,oBAAoB;SACtB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -51,9 +51,7 @@ var _sfc_main = defineComponent({
     setup(props, { slots }) {
         const { query, status } = useState('nextQueries');
         /** The state next queries. */
-        const nextQueries = useGetter('nextQueries', [
-            'nextQueries',
-        ]).nextQueries;
+        const nextQueries = useGetter('nextQueries').nextQueries;
         /** Injected query, updated when the related request(s) have succeeded. */
         const injectedQuery = inject(QUERY_KEY);
         /** Indicates if there are more available results than the injected. */

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

@@ -1 +1 @@
-{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { NextQuery } from '@empathyco/x-types'\nimport type { ComputedRef, Ref } from 'vue'\nimport type { ListItem } from '../../../utils/types'\nimport type { NextQueriesGroup } from '../types'\nimport { computed, defineComponent, h, inject, provide } from 'vue'\nimport {\n  HAS_MORE_ITEMS_KEY,\n  LIST_ITEMS_KEY,\n  QUERY_KEY,\n} from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { groupItemsBy } from '../../../utils/array'\nimport { nextQueriesXModule } from '../x-module'\n\n/**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'NextQueriesList',\n  xModule: nextQueriesXModule.name,\n  props: {\n    /** Animation component that will be used to animate the next queries groups. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** The first index to insert a group of next queries at. */\n    offset: {\n      type: Number,\n      default: 24,\n    },\n    /** The items cycle size to keep inserting next queries groups at. */\n    frequency: {\n      type: Number,\n      default: 24,\n    },\n    /** The maximum amount of next queries to add in a single group. */\n    maxNextQueriesPerGroup: {\n      type: Number,\n      default: 4,\n    },\n    /** The maximum number of groups to insert into the injected list items list. */\n    maxGroups: Number,\n    /**\n     * Determines if a group is added to the injected items list in case the number\n     * of items is smaller than the offset.\n     */\n    showOnlyAfterOffset: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props, { slots }) {\n    const { query, status } = useState('nextQueries')\n\n    /** The state next queries. */\n    const nextQueries: ComputedRef<NextQuery[]> = useGetter('nextQueries', [\n      'nextQueries',\n    ]).nextQueries\n\n    /** Injected query, updated when the related request(s) have succeeded. */\n    const injectedQuery = inject<Ref<string>>(QUERY_KEY as string)\n\n    /** Indicates if there are more available results than the injected. */\n    const hasMoreItems = inject<Ref<boolean>>(HAS_MORE_ITEMS_KEY as string)\n\n    /**\n     * The grouped next queries based on the given config.\n     *\n     * @returns A list of next queries groups.\n     */\n    const nextQueriesGroups = computed<NextQueriesGroup[]>(() =>\n      Object.values(\n        groupItemsBy(nextQueries?.value, (_, index) =>\n          Math.floor(index / props.maxNextQueriesPerGroup),\n        ),\n      )\n        .slice(0, props.maxGroups)\n        .map(nextQueries => ({\n          modelName: 'NextQueriesGroup' as const,\n          id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n          nextQueries,\n        })),\n    )\n\n    /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n\n    /**\n     * Checks if the next queries are outdated taking into account the injected query.\n     *\n     * @returns True if the next queries are outdated, false if not.\n     */\n    const nextQueriesAreOutdated = computed(\n      () =>\n        !!injectedQuery?.value &&\n        (query.value !== injectedQuery.value || status.value !== 'success'),\n    )\n\n    /**\n     * Checks if the number of items is smaller than the offset so a group\n     * should be added to the injected items list.\n     *\n     * @returns True if a group should be added, false if not.\n     */\n    const hasNotEnoughListItems = computed(\n      () =>\n        !props.showOnlyAfterOffset &&\n        !hasMoreItems?.value &&\n        injectedListItems !== undefined &&\n        injectedListItems.value.length > 0 &&\n        props.offset > injectedListItems.value.length,\n    )\n\n    /**\n     * New list of {@link ListItem}s to render.\n     *\n     * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n     */\n    const items = computed(() => {\n      if (!injectedListItems?.value) {\n        return nextQueriesGroups.value\n      }\n      if (nextQueriesAreOutdated.value) {\n        return injectedListItems.value\n      }\n      if (hasNotEnoughListItems.value) {\n        return injectedListItems.value.concat(nextQueriesGroups.value[0] ?? [])\n      }\n      return nextQueriesGroups?.value.reduce(\n        (items, nextQueriesGroup, index) => {\n          const targetIndex = props.offset + props.frequency * index\n          if (targetIndex <= items.length) {\n            items.splice(targetIndex, 0, nextQueriesGroup)\n          }\n          return items\n        },\n        [...injectedListItems.value],\n      )\n    })\n\n    /**\n     * The computed list items of the entity that uses the mixin.\n     *\n     * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n     * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n     * @returns An empty array as fallback in case it is not overridden.\n     */\n    provide(LIST_ITEMS_KEY as string, items)\n\n    return () => {\n      const innerProps = { items: items.value, animation: props.animation }\n      // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n      return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots)\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Showing/hiding first next queries group when no more items\n\nBy default, the first next query group will be inserted when the total number of results is smaller\nthan the offset, but this behavior can be deactivated by setting the `showOnlyAfterOffset` to\n`true`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"1\"\n        :showOnlyAfterOffset=\"true\"\n      />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"6\"\n        :maxGroups=\"3\"\n        #default=\"{ items }\"\n      >\n        <BaseGrid :items=\"items\" :animation=\"animation\">\n          <template #next-queries-group=\"{ item }\">\n            <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n          </template>\n          <template #result=\"{ item }\">\n            <span>Result: {{ item.name }}</span>\n          </template>\n          <template #default=\"{ item }\">\n            <span>Default: {{ item }}</span>\n          </template>\n        </BaseGrid>\n      </NextQueriesList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { BaseGrid } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    BaseGrid,\n    SearchInput,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;AAkBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;;AAED,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;;AAED,QAAA,SAAS,EAAE,MAAM;AACjB;;;AAGE;AACF,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;QACpB,MAAM,EAAE,KAAK,EAAE,MAAK,KAAM,QAAQ,CAAC,aAAa,CAAA,CAAA;;AAGhD,QAAA,MAAM,WAAW,GAA6B,SAAS,CAAC,aAAa,EAAE;YACrE,aAAa;SACd,CAAC,CAAC,WAAU,CAAA;;AAGb,QAAA,MAAM,aAAY,GAAI,MAAM,CAAc,SAAmB,CAAA,CAAA;;AAG7D,QAAA,MAAM,YAAW,GAAI,MAAM,CAAe,kBAA4B,CAAA,CAAA;AAEtE;;;;AAIE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAqB,MACrD,MAAM,CAAC,MAAM,CACX,YAAY,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,KAAK,KACxC,IAAI,CAAC,KAAK,CAAC,KAAM,GAAE,KAAK,CAAC,sBAAsB,CAAC,CACjD,CACH;AACG,aAAA,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;AACxB,aAAA,GAAG,CAAC,WAAY,KAAI;AACnB,YAAA,SAAS,EAAE,kBAA2B;AACtC,YAAA,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,SAAQ,IAAK,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAC3D,WAAW;SACZ,CAAC,CAAC,CACP,CAAA;;AAGA,QAAA,MAAM,iBAAgB,GAAI,MAAM,CAAkB,cAAwB,CAAA,CAAA;AAE1E;;;;AAIE;QACF,MAAM,sBAAqB,GAAI,QAAQ,CACrC,MACE,CAAC,CAAC,aAAa,EAAE,KAAI;AACrB,aAAC,KAAK,CAAC,KAAI,KAAM,aAAa,CAAC,KAAI,IAAK,MAAM,CAAC,KAAI,KAAM,SAAS,CAAC,CACvE,CAAA;AAEA;;;;;AAKE;QACF,MAAM,qBAAoB,GAAI,QAAQ,CACpC,MACE,CAAC,KAAK,CAAC,mBAAkB;YACzB,CAAC,YAAY,EAAE;AACf,YAAA,iBAAgB,KAAM,SAAQ;AAC9B,YAAA,iBAAiB,CAAC,KAAK,CAAC,MAAO,GAAE;YACjC,KAAK,CAAC,MAAK,GAAI,iBAAiB,CAAC,KAAK,CAAC,MAAM,CACjD,CAAA;AAEA;;;;AAIE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAM;AAC3B,YAAA,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE;gBAC7B,OAAO,iBAAiB,CAAC,KAAI,CAAA;AAC/B,aAAA;YACA,IAAI,sBAAsB,CAAC,KAAK,EAAE;gBAChC,OAAO,iBAAiB,CAAC,KAAI,CAAA;AAC/B,aAAA;YACA,IAAI,qBAAqB,CAAC,KAAK,EAAE;AAC/B,gBAAA,OAAO,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA,CAAA;AACxE,aAAA;AACA,YAAA,OAAO,iBAAiB,EAAE,KAAK,CAAC,MAAM,CACpC,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,KAAK;gBAClC,MAAM,cAAc,KAAK,CAAC,SAAS,KAAK,CAAC,YAAY,KAAI,CAAA;AACzD,gBAAA,IAAI,WAAU,IAAK,KAAK,CAAC,MAAM,EAAE;oBAC/B,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,gBAAgB,CAAA,CAAA;AAC/C,iBAAA;AACA,gBAAA,OAAO,KAAI,CAAA;aACZ,EACD,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAC9B,CAAA;AACF,SAAC,CAAA,CAAA;AAED;;;;;;AAME;AACF,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAA,CAAA;AAEvC,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAU,EAAA,CAAA;;AAEpE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAA,CAAA;AACzE,SAAA,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListItem } from '../../../utils/types'\nimport type { NextQueriesGroup } from '../types'\nimport { computed, defineComponent, h, inject, provide } from 'vue'\nimport {\n  HAS_MORE_ITEMS_KEY,\n  LIST_ITEMS_KEY,\n  QUERY_KEY,\n} from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { groupItemsBy } from '../../../utils/array'\nimport { nextQueriesXModule } from '../x-module'\n\n/**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'NextQueriesList',\n  xModule: nextQueriesXModule.name,\n  props: {\n    /** Animation component that will be used to animate the next queries groups. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** The first index to insert a group of next queries at. */\n    offset: {\n      type: Number,\n      default: 24,\n    },\n    /** The items cycle size to keep inserting next queries groups at. */\n    frequency: {\n      type: Number,\n      default: 24,\n    },\n    /** The maximum amount of next queries to add in a single group. */\n    maxNextQueriesPerGroup: {\n      type: Number,\n      default: 4,\n    },\n    /** The maximum number of groups to insert into the injected list items list. */\n    maxGroups: Number,\n    /**\n     * Determines if a group is added to the injected items list in case the number\n     * of items is smaller than the offset.\n     */\n    showOnlyAfterOffset: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props, { slots }) {\n    const { query, status } = useState('nextQueries')\n\n    /** The state next queries. */\n    const nextQueries = useGetter('nextQueries').nextQueries\n\n    /** Injected query, updated when the related request(s) have succeeded. */\n    const injectedQuery = inject<Ref<string>>(QUERY_KEY as string)\n\n    /** Indicates if there are more available results than the injected. */\n    const hasMoreItems = inject<Ref<boolean>>(HAS_MORE_ITEMS_KEY as string)\n\n    /**\n     * The grouped next queries based on the given config.\n     *\n     * @returns A list of next queries groups.\n     */\n    const nextQueriesGroups = computed<NextQueriesGroup[]>(() =>\n      Object.values(\n        groupItemsBy(nextQueries?.value, (_, index) =>\n          Math.floor(index / props.maxNextQueriesPerGroup),\n        ),\n      )\n        .slice(0, props.maxGroups)\n        .map(nextQueries => ({\n          modelName: 'NextQueriesGroup' as const,\n          id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n          nextQueries,\n        })),\n    )\n\n    /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n\n    /**\n     * Checks if the next queries are outdated taking into account the injected query.\n     *\n     * @returns True if the next queries are outdated, false if not.\n     */\n    const nextQueriesAreOutdated = computed(\n      () =>\n        !!injectedQuery?.value &&\n        (query.value !== injectedQuery.value || status.value !== 'success'),\n    )\n\n    /**\n     * Checks if the number of items is smaller than the offset so a group\n     * should be added to the injected items list.\n     *\n     * @returns True if a group should be added, false if not.\n     */\n    const hasNotEnoughListItems = computed(\n      () =>\n        !props.showOnlyAfterOffset &&\n        !hasMoreItems?.value &&\n        injectedListItems !== undefined &&\n        injectedListItems.value.length > 0 &&\n        props.offset > injectedListItems.value.length,\n    )\n\n    /**\n     * New list of {@link ListItem}s to render.\n     *\n     * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n     */\n    const items = computed(() => {\n      if (!injectedListItems?.value) {\n        return nextQueriesGroups.value\n      }\n      if (nextQueriesAreOutdated.value) {\n        return injectedListItems.value\n      }\n      if (hasNotEnoughListItems.value) {\n        return injectedListItems.value.concat(nextQueriesGroups.value[0] ?? [])\n      }\n      return nextQueriesGroups?.value.reduce(\n        (items, nextQueriesGroup, index) => {\n          const targetIndex = props.offset + props.frequency * index\n          if (targetIndex <= items.length) {\n            items.splice(targetIndex, 0, nextQueriesGroup)\n          }\n          return items\n        },\n        [...injectedListItems.value],\n      )\n    })\n\n    /**\n     * The computed list items of the entity that uses the mixin.\n     *\n     * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n     * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n     * @returns An empty array as fallback in case it is not overridden.\n     */\n    provide(LIST_ITEMS_KEY as string, items)\n\n    return () => {\n      const innerProps = { items: items.value, animation: props.animation }\n      // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n      return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots)\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Showing/hiding first next queries group when no more items\n\nBy default, the first next query group will be inserted when the total number of results is smaller\nthan the offset, but this behavior can be deactivated by setting the `showOnlyAfterOffset` to\n`true`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"1\"\n        :showOnlyAfterOffset=\"true\"\n      />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"6\"\n        :maxGroups=\"3\"\n        #default=\"{ items }\"\n      >\n        <BaseGrid :items=\"items\" :animation=\"animation\">\n          <template #next-queries-group=\"{ item }\">\n            <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n          </template>\n          <template #result=\"{ item }\">\n            <span>Result: {{ item.name }}</span>\n          </template>\n          <template #default=\"{ item }\">\n            <span>Default: {{ item }}</span>\n          </template>\n        </BaseGrid>\n      </NextQueriesList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { BaseGrid } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    BaseGrid,\n    SearchInput,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;;AAED,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;;AAED,QAAA,SAAS,EAAE,MAAM;AACjB;;;AAGE;AACF,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;QACpB,MAAM,EAAE,KAAK,EAAE,MAAK,KAAM,QAAQ,CAAC,aAAa,CAAA,CAAA;;QAGhD,MAAM,WAAY,GAAE,SAAS,CAAC,aAAa,CAAC,CAAC,WAAU,CAAA;;AAGvD,QAAA,MAAM,aAAY,GAAI,MAAM,CAAc,SAAmB,CAAA,CAAA;;AAG7D,QAAA,MAAM,YAAW,GAAI,MAAM,CAAe,kBAA4B,CAAA,CAAA;AAEtE;;;;AAIE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAqB,MACrD,MAAM,CAAC,MAAM,CACX,YAAY,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,KAAK,KACxC,IAAI,CAAC,KAAK,CAAC,KAAM,GAAE,KAAK,CAAC,sBAAsB,CAAC,CACjD,CACH;AACG,aAAA,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;AACxB,aAAA,GAAG,CAAC,WAAY,KAAI;AACnB,YAAA,SAAS,EAAE,kBAA2B;AACtC,YAAA,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,SAAQ,IAAK,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAC3D,WAAW;SACZ,CAAC,CAAC,CACP,CAAA;;AAGA,QAAA,MAAM,iBAAgB,GAAI,MAAM,CAAkB,cAAwB,CAAA,CAAA;AAE1E;;;;AAIE;QACF,MAAM,sBAAqB,GAAI,QAAQ,CACrC,MACE,CAAC,CAAC,aAAa,EAAE,KAAI;AACrB,aAAC,KAAK,CAAC,KAAI,KAAM,aAAa,CAAC,KAAI,IAAK,MAAM,CAAC,KAAI,KAAM,SAAS,CAAC,CACvE,CAAA;AAEA;;;;;AAKE;QACF,MAAM,qBAAoB,GAAI,QAAQ,CACpC,MACE,CAAC,KAAK,CAAC,mBAAkB;YACzB,CAAC,YAAY,EAAE;AACf,YAAA,iBAAgB,KAAM,SAAQ;AAC9B,YAAA,iBAAiB,CAAC,KAAK,CAAC,MAAO,GAAE;YACjC,KAAK,CAAC,MAAK,GAAI,iBAAiB,CAAC,KAAK,CAAC,MAAM,CACjD,CAAA;AAEA;;;;AAIE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAM;AAC3B,YAAA,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE;gBAC7B,OAAO,iBAAiB,CAAC,KAAI,CAAA;AAC/B,aAAA;YACA,IAAI,sBAAsB,CAAC,KAAK,EAAE;gBAChC,OAAO,iBAAiB,CAAC,KAAI,CAAA;AAC/B,aAAA;YACA,IAAI,qBAAqB,CAAC,KAAK,EAAE;AAC/B,gBAAA,OAAO,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA,CAAA;AACxE,aAAA;AACA,YAAA,OAAO,iBAAiB,EAAE,KAAK,CAAC,MAAM,CACpC,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,KAAK;gBAClC,MAAM,cAAc,KAAK,CAAC,SAAS,KAAK,CAAC,YAAY,KAAI,CAAA;AACzD,gBAAA,IAAI,WAAU,IAAK,KAAK,CAAC,MAAM,EAAE;oBAC/B,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,gBAAgB,CAAA,CAAA;AAC/C,iBAAA;AACA,gBAAA,OAAO,KAAI,CAAA;aACZ,EACD,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAC9B,CAAA;AACF,SAAC,CAAA,CAAA;AAED;;;;;;AAME;AACF,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAA,CAAA;AAEvC,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAU,EAAA,CAAA;;AAEpE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAA,CAAA;AACzE,SAAA,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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    :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          v-slot=\"nextQueryScope\"\n          :suggestion=\"baseScope.suggestion\"\n          :highlight-curated=\"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\">\nimport type { NextQuery as NextQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { nextQueriesXModule } from '../x-module'\nimport 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 */\nexport default defineComponent({\n  name: 'NextQueries',\n  xModule: nextQueriesXModule.name,\n  components: {\n    NextQuery,\n    BaseSuggestions,\n  },\n  props: {\n    /**\n     * Flag to indicate if the curated next queries should be displayed different.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * NextQueries list to be used instead of state NextQueries.\n     *\n     * @public\n     */\n    suggestions: Array as PropType<NextQueryModel[]>,\n  },\n  setup(props) {\n    /**\n     * The list of next queries from the state.\n     *\n     * @internal\n     */\n    const stateNextQueries = useGetter('nextQueries', ['nextQueries']).nextQueries\n\n    /**.\n     * The list of next queries finally rendered\n     *\n     * @internal\n     */\n    const renderedNextQueries = computed(() => props.suggestions ?? stateNextQueries.value)\n\n    return { renderedNextQueries }\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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\n\nexport 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>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries, NextQuery } from '@empathyco/x-components/next-queries'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueriesDemo',\n  components: {\n    SearchInput,\n    NextQueries,\n    NextQuery,\n    TrendingIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode","highlightCurated"],"mappings":";;;;;;AAgCoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AA7BhB,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACxB,WAAM,EAAA,IAAA,CAAA,mBAAA;AAAA,IAAA,WAAA,EAAA,cAAA;IAEK,KAAO,EAAA,gBAAA;AAAA,GAAA,EAAA;aASdC,OAcY,CAAA,CAAA,SAAA,KAAA;AAAA,MAZTC,UAAA,CAAA,IAAA,CAAY,QAAS,YAAW,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,gBAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CAChC,oBAAmBC,EAAAA;AAAAA,UACpB,UAAM,EAAA,SAAA,CAAA,UAAA;AAAA,UAAA,mBAAA,EAAA,IAAA,CAAA,gBAAA;AAnBhB,UAAA,KAAA,EAAA,yCAAA;AAAA,SAAA,EAAA;;AAAA,YAAAJ,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,GAAA,cAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"next-queries.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\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          v-slot=\"nextQueryScope\"\n          :suggestion=\"baseScope.suggestion\"\n          :highlight-curated=\"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\">\nimport type { NextQuery as NextQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { nextQueriesXModule } from '../x-module'\nimport 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 */\nexport default defineComponent({\n  name: 'NextQueries',\n  xModule: nextQueriesXModule.name,\n  components: {\n    NextQuery,\n    BaseSuggestions,\n  },\n  props: {\n    /**\n     * Flag to indicate if the curated next queries should be displayed different.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * NextQueries list to be used instead of state NextQueries.\n     *\n     * @public\n     */\n    suggestions: Array as PropType<NextQueryModel[]>,\n  },\n  setup(props) {\n    /**\n     * The list of next queries from the state.\n     *\n     * @internal\n     */\n    const stateNextQueries = useGetter('nextQueries').nextQueries\n\n    /**.\n     * The list of next queries finally rendered\n     *\n     * @internal\n     */\n    const renderedNextQueries = computed(() => props.suggestions ?? stateNextQueries.value)\n\n    return { renderedNextQueries }\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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\n\nexport 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>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries, NextQuery } from '@empathyco/x-components/next-queries'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueriesDemo',\n  components: {\n    SearchInput,\n    NextQueries,\n    NextQuery,\n    TrendingIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode","highlightCurated"],"mappings":";;;;;;AAgCoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AA7BhB,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACxB,WAAM,EAAA,IAAA,CAAA,mBAAA;AAAA,IAAA,WAAA,EAAA,cAAA;IAEK,KAAO,EAAA,gBAAA;AAAA,GAAA,EAAA;aASdC,OAcY,CAAA,CAAA,SAAA,KAAA;AAAA,MAZTC,UAAA,CAAA,IAAA,CAAY,QAAS,YAAW,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,gBAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CAChC,oBAAmBC,EAAAA;AAAAA,UACpB,UAAM,EAAA,SAAA,CAAA,UAAA;AAAA,UAAA,mBAAA,EAAA,IAAA,CAAA,gBAAA;AAnBhB,UAAA,KAAA,EAAA,yCAAA;AAAA,SAAA,EAAA;;AAAA,YAAAJ,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,GAAA,cAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -43,7 +43,7 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const stateNextQueries = useGetter('nextQueries', ['nextQueries']).nextQueries;
+        const stateNextQueries = useGetter('nextQueries').nextQueries;
         /**.
          * The list of next queries finally rendered
          *

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

@@ -1 +1 @@
-{"version":3,"file":"next-queries.vue2.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\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          v-slot=\"nextQueryScope\"\n          :suggestion=\"baseScope.suggestion\"\n          :highlight-curated=\"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\">\nimport type { NextQuery as NextQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { nextQueriesXModule } from '../x-module'\nimport 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 */\nexport default defineComponent({\n  name: 'NextQueries',\n  xModule: nextQueriesXModule.name,\n  components: {\n    NextQuery,\n    BaseSuggestions,\n  },\n  props: {\n    /**\n     * Flag to indicate if the curated next queries should be displayed different.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * NextQueries list to be used instead of state NextQueries.\n     *\n     * @public\n     */\n    suggestions: Array as PropType<NextQueryModel[]>,\n  },\n  setup(props) {\n    /**\n     * The list of next queries from the state.\n     *\n     * @internal\n     */\n    const stateNextQueries = useGetter('nextQueries', ['nextQueries']).nextQueries\n\n    /**.\n     * The list of next queries finally rendered\n     *\n     * @internal\n     */\n    const renderedNextQueries = computed(() => props.suggestions ?? stateNextQueries.value)\n\n    return { renderedNextQueries }\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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\n\nexport 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>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries, NextQuery } from '@empathyco/x-components/next-queries'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueriesDemo',\n  components: {\n    SearchInput,\n    NextQueries,\n    NextQuery,\n    TrendingIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA4CA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;QACV,SAAS;QACT,eAAe;AAChB,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,KAAmC;AACjD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,gBAAe,GAAI,SAAS,CAAC,aAAa,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,WAAU,CAAA;AAE7E;;;;AAIE;AACF,QAAA,MAAM,mBAAkB,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,WAAY,IAAG,gBAAgB,CAAC,KAAK,CAAA,CAAA;QAEtF,OAAO,EAAE,mBAAoB,EAAA,CAAA;KAC9B;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"next-queries.vue2.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\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          v-slot=\"nextQueryScope\"\n          :suggestion=\"baseScope.suggestion\"\n          :highlight-curated=\"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\">\nimport type { NextQuery as NextQueryModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { nextQueriesXModule } from '../x-module'\nimport 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 */\nexport default defineComponent({\n  name: 'NextQueries',\n  xModule: nextQueriesXModule.name,\n  components: {\n    NextQuery,\n    BaseSuggestions,\n  },\n  props: {\n    /**\n     * Flag to indicate if the curated next queries should be displayed different.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * NextQueries list to be used instead of state NextQueries.\n     *\n     * @public\n     */\n    suggestions: Array as PropType<NextQueryModel[]>,\n  },\n  setup(props) {\n    /**\n     * The list of next queries from the state.\n     *\n     * @internal\n     */\n    const stateNextQueries = useGetter('nextQueries').nextQueries\n\n    /**.\n     * The list of next queries finally rendered\n     *\n     * @internal\n     */\n    const renderedNextQueries = computed(() => props.suggestions ?? stateNextQueries.value)\n\n    return { renderedNextQueries }\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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\n\nexport 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>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries } from '@empathyco/x-components/next-queries'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport 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>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { NextQueries, NextQuery } from '@empathyco/x-components/next-queries'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueriesDemo',\n  components: {\n    SearchInput,\n    NextQueries,\n    NextQuery,\n    TrendingIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA4CA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;QACV,SAAS;QACT,eAAe;AAChB,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,KAAmC;AACjD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,gBAAiB,GAAE,SAAS,CAAC,aAAa,CAAC,CAAC,WAAU,CAAA;AAE5D;;;;AAIE;AACF,QAAA,MAAM,mBAAkB,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,WAAY,IAAG,gBAAgB,CAAC,KAAK,CAAA,CAAA;QAEtF,OAAO,EAAE,mBAAoB,EAAA,CAAA;KAC9B;AACF,CAAA,CAAA;;;;"}

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    :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          v-slot=\"popularSearchScope\"\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-popular-searches__suggestion x-suggestion\"\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\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { popularSearchesXModule } from '../x-module'\nimport 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 */\nexport default defineComponent({\n  name: 'PopularSearches',\n  xModule: popularSearchesXModule.name,\n  components: {\n    PopularSearch,\n    BaseSuggestions,\n  },\n  setup() {\n    /**\n     * The list of popular searches.\n     *\n     * @internal\n     */\n    const { popularSearches } = useGetter('popularSearches', ['popularSearches'])\n\n    return { popularSearches }\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### 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>\nimport { PopularSearches } from '@empathyco/x-components/popular-searches'\nexport 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>\nimport Vue from 'vue'\nimport { PopularSearches } from '@empathyco/x-components/popular-searches'\nimport FadeAndSlide from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport 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>\nimport { PopularSearches } from '@empathyco/x-components/popular-searches'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport 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>\nimport { PopularSearches, PopularSearch } from '@empathyco/x-components/popular-searches'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'PopularSearchesDemo',\n  components: {\n    PopularSearches,\n    PopularSearch,\n    TrendingIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode"],"mappings":";;;;;;AA6BoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AA1BX,EAAA,OAAAC,SAAA,EAAqB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC1B,WAAU,EAAA,IAAA,CAAA,eAAA;AAAA,IAAA,KAAA,EAAA,oBAAA;IAEC,WAAO,EAAA,kBAAA;AAAA,GAAA,EAAA;aAQdC,OAYgB,CAAA,CAAA,SAAA,KAAA;AAAA,MAVbC,UAAA,CAAA,IAAA,CAAY,QAAS,YAAW,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAC3BC,WAAA,CAAA,wBAAA,EAAA;AAAA,UAAA,UAAA,EAAA,SAAA,CAAA,UAAA;AAjBhB,UAAA,KAAA,EAAA,6CAAA;AAAA,SAAA,EAAA;;AAAA,YAAAH,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,GAAA,kBAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"popular-searches.vue.js","sources":["../../../../../src/x-modules/popular-searches/components/popular-searches.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\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          v-slot=\"popularSearchScope\"\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-popular-searches__suggestion x-suggestion\"\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\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { popularSearchesXModule } from '../x-module'\nimport 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 */\nexport default defineComponent({\n  name: 'PopularSearches',\n  xModule: popularSearchesXModule.name,\n  components: {\n    PopularSearch,\n    BaseSuggestions,\n  },\n  setup() {\n    /**\n     * The list of popular searches.\n     *\n     * @internal\n     */\n    const { popularSearches } = useGetter('popularSearches')\n\n    return { popularSearches }\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### 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>\nimport { PopularSearches } from '@empathyco/x-components/popular-searches'\nexport 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>\nimport Vue from 'vue'\nimport { PopularSearches } from '@empathyco/x-components/popular-searches'\nimport FadeAndSlide from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport 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>\nimport { PopularSearches } from '@empathyco/x-components/popular-searches'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport 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>\nimport { PopularSearches, PopularSearch } from '@empathyco/x-components/popular-searches'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'PopularSearchesDemo',\n  components: {\n    PopularSearches,\n    PopularSearch,\n    TrendingIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode"],"mappings":";;;;;;AA6BoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AA1BX,EAAA,OAAAC,SAAA,EAAqB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC1B,WAAU,EAAA,IAAA,CAAA,eAAA;AAAA,IAAA,KAAA,EAAA,oBAAA;IAEC,WAAO,EAAA,kBAAA;AAAA,GAAA,EAAA;aAQdC,OAYgB,CAAA,CAAA,SAAA,KAAA;AAAA,MAVbC,UAAA,CAAA,IAAA,CAAY,QAAS,YAAW,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAC3BC,WAAA,CAAA,wBAAA,EAAA;AAAA,UAAA,UAAA,EAAA,SAAA,CAAA,UAAA;AAjBhB,UAAA,KAAA,EAAA,6CAAA;AAAA,SAAA,EAAA;;AAAA,YAAAH,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,GAAA,kBAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -25,7 +25,7 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const { popularSearches } = useGetter('popularSearches', ['popularSearches']);
+        const { popularSearches } = useGetter('popularSearches');
         return { popularSearches };
     },
 });

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

@@ -1 +1 @@
-{"version":3,"file":"popular-searches.vue2.js","sources":["../../../../../src/x-modules/popular-searches/components/popular-searches.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\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          v-slot=\"popularSearchScope\"\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-popular-searches__suggestion x-suggestion\"\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\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { popularSearchesXModule } from '../x-module'\nimport 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 */\nexport default defineComponent({\n  name: 'PopularSearches',\n  xModule: popularSearchesXModule.name,\n  components: {\n    PopularSearch,\n    BaseSuggestions,\n  },\n  setup() {\n    /**\n     * The list of popular searches.\n     *\n     * @internal\n     */\n    const { popularSearches } = useGetter('popularSearches', ['popularSearches'])\n\n    return { popularSearches }\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### 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>\nimport { PopularSearches } from '@empathyco/x-components/popular-searches'\nexport 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>\nimport Vue from 'vue'\nimport { PopularSearches } from '@empathyco/x-components/popular-searches'\nimport FadeAndSlide from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport 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>\nimport { PopularSearches } from '@empathyco/x-components/popular-searches'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport 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>\nimport { PopularSearches, PopularSearch } from '@empathyco/x-components/popular-searches'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'PopularSearchesDemo',\n  components: {\n    PopularSearches,\n    PopularSearch,\n    TrendingIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAuCA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,sBAAsB,CAAC,IAAI;AACpC,IAAA,UAAU,EAAE;QACV,aAAa;QACb,eAAe;AAChB,KAAA;IACD,KAAK,GAAA;AACH;;;;AAIE;AACF,QAAA,MAAM,EAAE,eAAc,EAAI,GAAE,SAAS,CAAC,iBAAiB,EAAE,CAAC,iBAAiB,CAAC,CAAA,CAAA;QAE5E,OAAO,EAAE,eAAgB,EAAA,CAAA;KAC1B;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"popular-searches.vue2.js","sources":["../../../../../src/x-modules/popular-searches/components/popular-searches.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\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          v-slot=\"popularSearchScope\"\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-popular-searches__suggestion x-suggestion\"\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\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { popularSearchesXModule } from '../x-module'\nimport 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 */\nexport default defineComponent({\n  name: 'PopularSearches',\n  xModule: popularSearchesXModule.name,\n  components: {\n    PopularSearch,\n    BaseSuggestions,\n  },\n  setup() {\n    /**\n     * The list of popular searches.\n     *\n     * @internal\n     */\n    const { popularSearches } = useGetter('popularSearches')\n\n    return { popularSearches }\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### 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>\nimport { PopularSearches } from '@empathyco/x-components/popular-searches'\nexport 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>\nimport Vue from 'vue'\nimport { PopularSearches } from '@empathyco/x-components/popular-searches'\nimport FadeAndSlide from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport 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>\nimport { PopularSearches } from '@empathyco/x-components/popular-searches'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport 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>\nimport { PopularSearches, PopularSearch } from '@empathyco/x-components/popular-searches'\nimport { TrendingIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'PopularSearchesDemo',\n  components: {\n    PopularSearches,\n    PopularSearch,\n    TrendingIcon,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAuCA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,sBAAsB,CAAC,IAAI;AACpC,IAAA,UAAU,EAAE;QACV,aAAa;QACb,eAAe;AAChB,KAAA;IACD,KAAK,GAAA;AACH;;;;AAIE;QACF,MAAM,EAAE,eAAc,EAAI,GAAE,SAAS,CAAC,iBAAiB,CAAA,CAAA;QAEvD,OAAO,EAAE,eAAgB,EAAA,CAAA;KAC1B;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"query-suggestion.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestion.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-slot=\"baseScope\"\n    v-bind=\"{ query, suggestion, suggestionSelectedEvents }\"\n    class=\"x-query-suggestion\"\n    data-test=\"query-suggestion\"\n    feature=\"query_suggestion\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n        @slot Query Suggestion content\n          @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\| undefined</code> - Suggestion's filter\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\nimport type { Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\n\n/**\n * This component renders a suggestion for a query. A query suggestion is a recommended query\n * based on previous search queries. It contains the query itself and a set of filters associated.\n * For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestion',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestion },\n  props: {\n    /** The suggestion to render. */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /** The normalized query of the query-suggestions module. */\n    const query = useGetter('querySuggestions', ['normalizedQuery']).normalizedQuery\n\n    /**\n     * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as\n     * payload when selecting the query suggestion.\n     */\n    const suggestionSelectedEvents = {\n      UserSelectedAQuerySuggestion: props.suggestion,\n    }\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserSelectedAQuerySuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the query suggestion\n  data.\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\nHere you can see how a single query suggestion is rendered using the `suggestion` prop.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with default slot\n\nIn this example, we are adding an emoji next to the suggestion.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n    <span>🔍</span>\n    <span>{{ suggestion.query }}</span>\n  </QuerySuggestion>\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, when you click on the query suggestion, a message is displayed to illustrate that\nthe `UserSelectedAQuerySuggestion` event has been triggered.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" @UserSelectedAQuerySuggestion=\"alertSuggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n  methods: {\n    alertSuggestion(querySuggestion) {\n      alert(`You have clicked the query suggestion: ${querySuggestion.query}`)\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_mergeProps","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;AACE,EAAA,MAAA,yBAAA,GAAAA,gBAAA,CAciB,gBAdjB,CAAA,CAAA;SAIEC,SAAU,EAAA,EAAAC,WAAA;AAAA,IAAkB,yBAAA;AAAA,IAAAC,UAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,wBAAA,EAAA,EAAA;AAAA,MAC5B,KAAO,EAAA,oBAAA;AAAA,MAAA,WAAA,EAAA,kBAAA;AANX,MAAA,OAAA,EAAA,kBAAA;AAAA,KAAA,CAAA;AAcI,IAAA;AAAA,MAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAdJ,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;;;"}
+{"version":3,"file":"query-suggestion.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestion.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-slot=\"baseScope\"\n    v-bind=\"{ query, suggestion, suggestionSelectedEvents }\"\n    class=\"x-query-suggestion\"\n    data-test=\"query-suggestion\"\n    feature=\"query_suggestion\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n        @slot Query Suggestion content\n          @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\| undefined</code> - Suggestion's filter\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\nimport type { Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\n\n/**\n * This component renders a suggestion for a query. A query suggestion is a recommended query\n * based on previous search queries. It contains the query itself and a set of filters associated.\n * For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestion',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestion },\n  props: {\n    /** The suggestion to render. */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /** The normalized query of the query-suggestions module. */\n    const query = useGetter('querySuggestions').normalizedQuery\n\n    /**\n     * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as\n     * payload when selecting the query suggestion.\n     */\n    const suggestionSelectedEvents = {\n      UserSelectedAQuerySuggestion: props.suggestion,\n    }\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserSelectedAQuerySuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the query suggestion\n  data.\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\nHere you can see how a single query suggestion is rendered using the `suggestion` prop.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with default slot\n\nIn this example, we are adding an emoji next to the suggestion.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n    <span>🔍</span>\n    <span>{{ suggestion.query }}</span>\n  </QuerySuggestion>\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, when you click on the query suggestion, a message is displayed to illustrate that\nthe `UserSelectedAQuerySuggestion` event has been triggered.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" @UserSelectedAQuerySuggestion=\"alertSuggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n  methods: {\n    alertSuggestion(querySuggestion) {\n      alert(`You have clicked the query suggestion: ${querySuggestion.query}`)\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_mergeProps","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;AACE,EAAA,MAAA,yBAAA,GAAAA,gBAAA,CAciB,gBAdjB,CAAA,CAAA;SAIEC,SAAU,EAAA,EAAAC,WAAA;AAAA,IAAkB,yBAAA;AAAA,IAAAC,UAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,wBAAA,EAAA,EAAA;AAAA,MAC5B,KAAO,EAAA,oBAAA;AAAA,MAAA,WAAA,EAAA,kBAAA;AANX,MAAA,OAAA,EAAA,kBAAA;AAAA,KAAA,CAAA;AAcI,IAAA;AAAA,MAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAdJ,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;;;"}

package/js/x-modules/query-suggestions/components/query-suggestion.vue2.js

@@ -34,7 +34,7 @@ var _sfc_main = defineComponent({
     },
     setup(props) {
         /** The normalized query of the query-suggestions module. */
-        const query = useGetter('querySuggestions', ['normalizedQuery']).normalizedQuery;
+        const query = useGetter('querySuggestions').normalizedQuery;
         /**
          * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as
          * payload when selecting the query suggestion.

package/js/x-modules/query-suggestions/components/query-suggestion.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-suggestion.vue2.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestion.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-slot=\"baseScope\"\n    v-bind=\"{ query, suggestion, suggestionSelectedEvents }\"\n    class=\"x-query-suggestion\"\n    data-test=\"query-suggestion\"\n    feature=\"query_suggestion\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n        @slot Query Suggestion content\n          @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\| undefined</code> - Suggestion's filter\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\nimport type { Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\n\n/**\n * This component renders a suggestion for a query. A query suggestion is a recommended query\n * based on previous search queries. It contains the query itself and a set of filters associated.\n * For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestion',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestion },\n  props: {\n    /** The suggestion to render. */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /** The normalized query of the query-suggestions module. */\n    const query = useGetter('querySuggestions', ['normalizedQuery']).normalizedQuery\n\n    /**\n     * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as\n     * payload when selecting the query suggestion.\n     */\n    const suggestionSelectedEvents = {\n      UserSelectedAQuerySuggestion: props.suggestion,\n    }\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserSelectedAQuerySuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the query suggestion\n  data.\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\nHere you can see how a single query suggestion is rendered using the `suggestion` prop.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with default slot\n\nIn this example, we are adding an emoji next to the suggestion.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n    <span>🔍</span>\n    <span>{{ suggestion.query }}</span>\n  </QuerySuggestion>\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, when you click on the query suggestion, a message is displayed to illustrate that\nthe `UserSelectedAQuerySuggestion` event has been triggered.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" @UserSelectedAQuerySuggestion=\"alertSuggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n  methods: {\n    alertSuggestion(querySuggestion) {\n      alert(`You have clicked the query suggestion: ${querySuggestion.query}`)\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0BA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,uBAAuB,CAAC,IAAI;IACrC,UAAU,EAAE,EAAE,cAAa,EAAG;AAC9B,IAAA,KAAK,EAAE;;AAEL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA8B;AACpC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;AAET,QAAA,MAAM,KAAI,GAAI,SAAS,CAAC,kBAAkB,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAc,CAAA;AAE/E;;;AAGE;AACF,QAAA,MAAM,wBAAuB,GAAI;YAC/B,4BAA4B,EAAE,KAAK,CAAC,UAAU;SAChD,CAAA;QAEA,OAAO;YACL,KAAK;YACL,wBAAwB;SAC1B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"query-suggestion.vue2.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestion.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-slot=\"baseScope\"\n    v-bind=\"{ query, suggestion, suggestionSelectedEvents }\"\n    class=\"x-query-suggestion\"\n    data-test=\"query-suggestion\"\n    feature=\"query_suggestion\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n        @slot Query Suggestion content\n          @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\| undefined</code> - Suggestion's filter\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\nimport type { Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\n\n/**\n * This component renders a suggestion for a query. A query suggestion is a recommended query\n * based on previous search queries. It contains the query itself and a set of filters associated.\n * For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestion',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestion },\n  props: {\n    /** The suggestion to render. */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /** The normalized query of the query-suggestions module. */\n    const query = useGetter('querySuggestions').normalizedQuery\n\n    /**\n     * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as\n     * payload when selecting the query suggestion.\n     */\n    const suggestionSelectedEvents = {\n      UserSelectedAQuerySuggestion: props.suggestion,\n    }\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserSelectedAQuerySuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the query suggestion\n  data.\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\nHere you can see how a single query suggestion is rendered using the `suggestion` prop.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with default slot\n\nIn this example, we are adding an emoji next to the suggestion.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n    <span>🔍</span>\n    <span>{{ suggestion.query }}</span>\n  </QuerySuggestion>\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, when you click on the query suggestion, a message is displayed to illustrate that\nthe `UserSelectedAQuerySuggestion` event has been triggered.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" @UserSelectedAQuerySuggestion=\"alertSuggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n  methods: {\n    alertSuggestion(querySuggestion) {\n      alert(`You have clicked the query suggestion: ${querySuggestion.query}`)\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0BA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,uBAAuB,CAAC,IAAI;IACrC,UAAU,EAAE,EAAE,cAAa,EAAG;AAC9B,IAAA,KAAK,EAAE;;AAEL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA8B;AACpC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;QAET,MAAM,KAAM,GAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC,eAAc,CAAA;AAE1D;;;AAGE;AACF,QAAA,MAAM,wBAAuB,GAAI;YAC/B,4BAA4B,EAAE,KAAK,CAAC,UAAU;SAChD,CAAA;QAEA,OAAO;YACL,KAAK;YACL,wBAAwB;SAC1B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}