@empathyco/x-components 6.0.0-alpha.222 → 6.0.0-alpha.224

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

@@ -2,14 +2,10 @@ import { defineComponent } from 'vue';
 import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue.js';
 import '../../../composables/create-use-device.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import '../../../plugins/x-plugin.js';
+import 'rxjs';
 import { useGetter } from '../../../composables/use-getter.js';
 import '@vueuse/core';
 import { querySuggestionsXModule } from '../x-module.js';

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\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 setup>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nimport { ref } from 'vue'\nconst suggestion = ref({\n  modelName: 'QuerySuggestion',\n  query: 'tshirt',\n  facets: [],\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 setup>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nimport { ref } from 'vue'\nconst suggestion = ref({\n  modelName: 'QuerySuggestion',\n  query: 'tshirt',\n  facets: [],\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 setup>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nimport { ref } from 'vue'\nconst suggestion = ref({\n  modelName: 'QuerySuggestion',\n  query: 'tshirt',\n  facets: [],\n})\nfunction alertSuggestion(querySuggestion) {\n  alert(`You have clicked the query suggestion: ${querySuggestion.query}`)\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,KAAI,GAAI,SAAS,CAAC,kBAAkB,CAAC,CAAC,eAAc;AAE1D;;;AAGE;AACF,QAAA,MAAM,wBAAuB,GAAI;YAC/B,4BAA4B,EAAE,KAAK,CAAC,UAAU;SAChD;QAEA,OAAO;YACL,KAAK;YACL,wBAAwB;SAC1B;IACF,CAAC;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 setup>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nimport { ref } from 'vue'\nconst suggestion = ref({\n  modelName: 'QuerySuggestion',\n  query: 'tshirt',\n  facets: [],\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 setup>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nimport { ref } from 'vue'\nconst suggestion = ref({\n  modelName: 'QuerySuggestion',\n  query: 'tshirt',\n  facets: [],\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 setup>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nimport { ref } from 'vue'\nconst suggestion = ref({\n  modelName: 'QuerySuggestion',\n  query: 'tshirt',\n  facets: [],\n})\nfunction alertSuggestion(querySuggestion) {\n  alert(`You have clicked the query suggestion: ${querySuggestion.query}`)\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,KAAI,GAAI,SAAS,CAAC,kBAAkB,CAAC,CAAC,eAAc;AAE1D;;;AAGE;AACF,QAAA,MAAM,wBAAuB,GAAI;YAC/B,4BAA4B,EAAE,KAAK,CAAC,UAAU;SAChD;QAEA,OAAO;YACL,KAAK;YACL,wBAAwB;SAC1B;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -2,14 +2,10 @@ import { defineComponent } from 'vue';
 import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../composables/create-use-device.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import '../../../plugins/x-plugin.js';
+import 'rxjs';
 import { useGetter } from '../../../composables/use-getter.js';
 import '@vueuse/core';
 import { querySuggestionsXModule } from '../x-module.js';

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

@@ -1 +1 @@
-{"version":3,"file":"query-suggestions.vue2.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestions.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"suggestions\"\n    class=\"x-query-suggestions\"\n    data-test=\"query-suggestions\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Custom component that replaces the `QuerySuggestion` component\n            @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <QuerySuggestion\n          v-slot=\"querySuggestionScope\"\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-query-suggestions__suggestion x-suggestion\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n            @slot Custom content that replaces the `QuerySuggestion` default content\n                @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n          -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...querySuggestionScope }\" />\n        </QuerySuggestion>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\nimport QuerySuggestion from './query-suggestion.vue'\n\n/**\n * This component renders a list of possible search queries to select from as a query is entered\n * in the input field. By default, this is a list of\n * [`QuerySuggestion`](./x-components.query-suggestion.md) components.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestions',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestions, QuerySuggestion },\n  setup() {\n    /** The module's list of suggestions. */\n    const { querySuggestions } = useGetter('querySuggestions')\n\n    return { suggestions: querySuggestions }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                 | Type     | Default |\n| ------------------ | ------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component for `QuerySuggestions`. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of query suggestions to be rendered. | `number` |         |\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example, a list of query suggestions is displayed. See how the suggestions change as you\ntype “sandal”. If you click on a suggestion, the search term in the search input is updated and the\nquery suggestions are changed to reflect the new search term.\n\n_Type “sandal” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <SearchInput />\n  <QuerySuggestions />\n</template>\n\n<script setup>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with props\n\nIn this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the\nmatching query suggestions are shuffled with a slight delay as more letters of the term are typed.\n\n_Type “lipstick” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <SearchInput />\n  <QuerySuggestions :animation=\"StaggeredFadeAndSlide\" />\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport StaggeredFadeAndSlide from '@empathyco/x-components/animations/staggered-fade-and-slide.vue'\n</script>\n```\n\n### Play with suggestion slot\n\nHere, the `suggestion` binding property passes the suggestion data.\n\n_Type “bag” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <SearchInput />\n  <QuerySuggestions #suggestion=\"{ suggestion }\">\n    <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n      <span>🔍</span>\n      <span>{{ suggestion.query }}</span>\n    </QuerySuggestion>\n  </QuerySuggestions>\n</template>\n\n<script setup>\nimport { QuerySuggestion, QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n<!-- prettier-ignore-start -->\n::: danger\nIf you're not using the [`QuerySuggestion`](./query-suggestion.md) component, then\nyou must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in\n`QuerySuggestions`.\n\n```vue live\n<template>\n  <SearchInput />\n  <QuerySuggestions #suggestion=\"{ suggestion }\">\n    <button @click=\"emitSuggestionClickedEvents($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </QuerySuggestions>\n</template>\n\n<script setup>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { use$x } from '../../../composables/use-$x'\n\nconst x = use$x()\nfunction emitSuggestionClickedEvents(event, suggestion) {\n  x.emit('UserAcceptedAQuery', suggestion.query, {\n    target: event.target\n  })\n  x.emit('UserSelectedASuggestion', suggestion, {\n    target: event.target\n  })\n  x.emit('UserSelectedAQuerySuggestion', suggestion, {\n    target: event.target\n  })\n}\n</script>\n```\n\n:::\n<!-- prettier-ignore-end -->\n\n### Play with suggestion-content slot\n\nIn this example, the `suggestion` and `query` properties of the `suggestion-content` slot are used\nto paint a suggestion with an icon.\n\n_Type “trousers” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion-content=\"{ suggestion, query }\">\n      <span>🔍</span>\n      <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script setup>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { Highlight } from '@empathyco/x-components'\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `QuerySuggestions`\ncomponent communicates with the [`SearchInput`](../search-box/x-components.search-input.md),\nupdating the term in the search input.\n\n_Type “pants” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script setup>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuCA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,uBAAuB,CAAC,IAAI;AACrC,IAAA,UAAU,EAAE,EAAE,eAAe,EAAE,iBAAiB;IAChD,KAAK,GAAA;;QAEH,MAAM,EAAE,gBAAe,EAAE,GAAI,SAAS,CAAC,kBAAkB,CAAA;AAEzD,QAAA,OAAO,EAAE,WAAW,EAAE,gBAAe,EAAE;IACzC,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"query-suggestions.vue2.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestions.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"suggestions\"\n    class=\"x-query-suggestions\"\n    data-test=\"query-suggestions\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Custom component that replaces the `QuerySuggestion` component\n            @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <QuerySuggestion\n          v-slot=\"querySuggestionScope\"\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-query-suggestions__suggestion x-suggestion\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n            @slot Custom content that replaces the `QuerySuggestion` default content\n                @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n          -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...querySuggestionScope }\" />\n        </QuerySuggestion>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\nimport QuerySuggestion from './query-suggestion.vue'\n\n/**\n * This component renders a list of possible search queries to select from as a query is entered\n * in the input field. By default, this is a list of\n * [`QuerySuggestion`](./x-components.query-suggestion.md) components.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestions',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestions, QuerySuggestion },\n  setup() {\n    /** The module's list of suggestions. */\n    const { querySuggestions } = useGetter('querySuggestions')\n\n    return { suggestions: querySuggestions }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                 | Type     | Default |\n| ------------------ | ------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component for `QuerySuggestions`. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of query suggestions to be rendered. | `number` |         |\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example, a list of query suggestions is displayed. See how the suggestions change as you\ntype “sandal”. If you click on a suggestion, the search term in the search input is updated and the\nquery suggestions are changed to reflect the new search term.\n\n_Type “sandal” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <SearchInput />\n  <QuerySuggestions />\n</template>\n\n<script setup>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n### Play with props\n\nIn this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the\nmatching query suggestions are shuffled with a slight delay as more letters of the term are typed.\n\n_Type “lipstick” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <SearchInput />\n  <QuerySuggestions :animation=\"StaggeredFadeAndSlide\" />\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport StaggeredFadeAndSlide from '@empathyco/x-components/animations/staggered-fade-and-slide.vue'\n</script>\n```\n\n### Play with suggestion slot\n\nHere, the `suggestion` binding property passes the suggestion data.\n\n_Type “bag” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <SearchInput />\n  <QuerySuggestions #suggestion=\"{ suggestion }\">\n    <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n      <span>🔍</span>\n      <span>{{ suggestion.query }}</span>\n    </QuerySuggestion>\n  </QuerySuggestions>\n</template>\n\n<script setup>\nimport { QuerySuggestion, QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n\n<!-- prettier-ignore-start -->\n::: danger\nIf you're not using the [`QuerySuggestion`](./query-suggestion.md) component, then\nyou must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in\n`QuerySuggestions`.\n\n```vue live\n<template>\n  <SearchInput />\n  <QuerySuggestions #suggestion=\"{ suggestion }\">\n    <button @click=\"emitSuggestionClickedEvents($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </QuerySuggestions>\n</template>\n\n<script setup>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { use$x } from '../../../composables/use-$x'\n\nconst x = use$x()\nfunction emitSuggestionClickedEvents(event, suggestion) {\n  x.emit('UserAcceptedAQuery', suggestion.query, {\n    target: event.target\n  })\n  x.emit('UserSelectedASuggestion', suggestion, {\n    target: event.target\n  })\n  x.emit('UserSelectedAQuerySuggestion', suggestion, {\n    target: event.target\n  })\n}\n</script>\n```\n\n:::\n<!-- prettier-ignore-end -->\n\n### Play with suggestion-content slot\n\nIn this example, the `suggestion` and `query` properties of the `suggestion-content` slot are used\nto paint a suggestion with an icon.\n\n_Type “trousers” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion-content=\"{ suggestion, query }\">\n      <span>🔍</span>\n      <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script setup>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { Highlight } from '@empathyco/x-components'\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `QuerySuggestions`\ncomponent communicates with the [`SearchInput`](../search-box/x-components.search-input.md),\nupdating the term in the search input.\n\n_Type “pants” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script setup>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAuCA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,uBAAuB,CAAC,IAAI;AACrC,IAAA,UAAU,EAAE,EAAE,eAAe,EAAE,iBAAiB;IAChD,KAAK,GAAA;;QAEH,MAAM,EAAE,gBAAe,EAAE,GAAI,SAAS,CAAC,kBAAkB,CAAA;AAEzD,QAAA,OAAO,EAAE,WAAW,EAAE,gBAAe,EAAE;IACzC,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/query-suggestions/store/actions/fetch-suggestions.action.js

@@ -1,10 +1,5 @@
-import '@vue/devtools-api';
-import '../../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../../plugins/devtools/colors.utils.js';
 import '../../../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import { XPlugin } from '../../../../plugins/x-plugin.js';
 
 /**

package/js/x-modules/query-suggestions/store/actions/fetch-suggestions.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"fetch-suggestions.action.js","sources":["../../../../../../src/x-modules/query-suggestions/store/actions/fetch-suggestions.action.ts"],"sourcesContent":["import type { QuerySuggestionsXStoreModule } from '../types'\nimport { XPlugin } from '../../../../plugins'\n\n/**\n * Default implementation for the {@link QuerySuggestionsActions.fetchSuggestions}.\n *\n * @param _context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param request - The query suggestions request to make.\n *\n * @returns A `void` promise that resolves when it fetches suggestions.\n *\n * @public\n */\nexport const fetchSuggestions: QuerySuggestionsXStoreModule['actions']['fetchSuggestions'] = async (\n  _context,\n  request,\n) => {\n  return request\n    ? XPlugin.adapter.querySuggestions(request).then(({ suggestions }) => suggestions)\n    : []\n}\n"],"names":[],"mappings":";;;;;;;;;AAGA;;;;;;;;;;AAUG;AACI,MAAM,gBAAgB,GAAgE,OAC3F,QAAQ,EACR,OAAO,KACL;AACF,IAAA,OAAO;UACH,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW;UAC/E,EAAE;AACR;;;;"}
+{"version":3,"file":"fetch-suggestions.action.js","sources":["../../../../../../src/x-modules/query-suggestions/store/actions/fetch-suggestions.action.ts"],"sourcesContent":["import type { QuerySuggestionsXStoreModule } from '../types'\nimport { XPlugin } from '../../../../plugins'\n\n/**\n * Default implementation for the {@link QuerySuggestionsActions.fetchSuggestions}.\n *\n * @param _context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param request - The query suggestions request to make.\n *\n * @returns A `void` promise that resolves when it fetches suggestions.\n *\n * @public\n */\nexport const fetchSuggestions: QuerySuggestionsXStoreModule['actions']['fetchSuggestions'] = async (\n  _context,\n  request,\n) => {\n  return request\n    ? XPlugin.adapter.querySuggestions(request).then(({ suggestions }) => suggestions)\n    : []\n}\n"],"names":[],"mappings":";;;;AAGA;;;;;;;;;;AAUG;AACI,MAAM,gBAAgB,GAAgE,OAC3F,QAAQ,EACR,OAAO,KACL;AACF,IAAA,OAAO;UACH,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW;UAC/E,EAAE;AACR;;;;"}

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

@@ -1,14 +1,10 @@
 import { defineComponent, provide, computed } from 'vue';
 import '../../../composables/create-use-device.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import '../../../plugins/x-plugin.js';
+import 'rxjs';
 import '@vueuse/core';
 import { useState } from '../../../composables/use-state.js';
 import { AnimationProp } from '../../../types/animation-prop.js';

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

@@ -1 +1 @@
-{"version":3,"file":"recommendations.vue2.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"x-recommendations\"\n  >\n    <li\n      v-for=\"recommendation in recommendations\"\n      :key=\"recommendation.id\"\n      class=\"x-recommendations__item\"\n      data-test=\"recommendation-item\"\n    >\n      <!--\n        @slot (Required) Recommendation content.\n        @binding {recommendation} recommendation - Recommendation data.\n      -->\n      <slot :recommendation=\"recommendation\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils'\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent, provide } from 'vue'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { recommendationsXModule } from '../x-module'\n\n/**\n * It renders a list of recommendations from the\n * {@link RecommendationsState.recommendations} state by default.\n * The component provides the slot layout which wraps the whole component with the\n * recommendations bounded. It also provides the default slot to customize the item, which is\n * within the layout slot, with the recommendation bounded. Each recommendation should be\n * represented by a {@link BaseResultLink} component besides any other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Recommendations',\n  xModule: recommendationsXModule.name,\n  props: {\n    /** Animation component that will be used to animate the recommendations. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** Number of recommendations to be rendered. */\n    maxItemsToRender: Number,\n  },\n  setup(props, { slots }) {\n    /** The module's list of recommendations. */\n    const storedRecommendations = useState('recommendations').recommendations\n\n    /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n      'UserClickedARecommendation',\n    ])\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     */\n    const recommendations = computed<Result[]>(() =>\n      storedRecommendations.value.slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no recommendations, nothing is rendered.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `layout` slot or empty string if there are\n     * no recommendations.\n     */\n    function renderLayoutSlot() {\n      const slotProps = {\n        animation: props.animation,\n        recommendations: recommendations.value,\n      }\n      return recommendations.value.length ? slots.layout?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { recommendations }\n    return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-recommendations {\n  display: flex;\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](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 link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provide integration with other\nmodules such as the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations v-slot=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    v-slot=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    :animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\nimport StaggeredFadeAndSlide from '@empathyco/x-components/animations/staggered-fade-and-slide.vue'\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, you can render any\nlayout you want using the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations v-slot:layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img\n            :src=\"recommendation.images[0]\"\n            :alt=\"recommendation.name\"\n            class=\"x-recommendations__image\"\n          />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgCA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,sBAAsB,CAAC,IAAI;AACpC,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,gBAAgB,EAAE,MAAM;AACzB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;;QAEpB,MAAM,qBAAoB,GAAI,QAAQ,CAAC,iBAAiB,CAAC,CAAC,eAAc;;QAGxE,OAAO,CAAwC,wBAAwB,EAAE;YACvE,4BAA4B;AAC7B,SAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,eAAc,GAAI,QAAQ,CAAW,MACzC,qBAAqB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAC9D;AAEA;;;;;;;;;;AAUE;AACF,QAAA,SAAS,gBAAgB,GAAA;AACvB,YAAA,MAAM,YAAY;gBAChB,SAAS,EAAE,KAAK,CAAC,SAAS;gBAC1B,eAAe,EAAE,eAAe,CAAC,KAAK;aACxC;YACA,OAAO,eAAe,CAAC,KAAK,CAAC,MAAK,GAAI,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA,GAAI,EAAC;QACxE;AAEA;AAC+E;AAC/E,QAAA,MAAM,cAAa,GAAI,EAAE,eAAc,EAAE;AACzC,QAAA,QAAQ,KAAK,CAAC,MAAK,GAAI,gBAAe,GAAI,cAAc;IAC1D,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"recommendations.vue2.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"x-recommendations\"\n  >\n    <li\n      v-for=\"recommendation in recommendations\"\n      :key=\"recommendation.id\"\n      class=\"x-recommendations__item\"\n      data-test=\"recommendation-item\"\n    >\n      <!--\n        @slot (Required) Recommendation content.\n        @binding {recommendation} recommendation - Recommendation data.\n      -->\n      <slot :recommendation=\"recommendation\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils'\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent, provide } from 'vue'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { recommendationsXModule } from '../x-module'\n\n/**\n * It renders a list of recommendations from the\n * {@link RecommendationsState.recommendations} state by default.\n * The component provides the slot layout which wraps the whole component with the\n * recommendations bounded. It also provides the default slot to customize the item, which is\n * within the layout slot, with the recommendation bounded. Each recommendation should be\n * represented by a {@link BaseResultLink} component besides any other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Recommendations',\n  xModule: recommendationsXModule.name,\n  props: {\n    /** Animation component that will be used to animate the recommendations. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** Number of recommendations to be rendered. */\n    maxItemsToRender: Number,\n  },\n  setup(props, { slots }) {\n    /** The module's list of recommendations. */\n    const storedRecommendations = useState('recommendations').recommendations\n\n    /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n      'UserClickedARecommendation',\n    ])\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     */\n    const recommendations = computed<Result[]>(() =>\n      storedRecommendations.value.slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no recommendations, nothing is rendered.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `layout` slot or empty string if there are\n     * no recommendations.\n     */\n    function renderLayoutSlot() {\n      const slotProps = {\n        animation: props.animation,\n        recommendations: recommendations.value,\n      }\n      return recommendations.value.length ? slots.layout?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { recommendations }\n    return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-recommendations {\n  display: flex;\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](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 link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provide integration with other\nmodules such as the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations v-slot=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    v-slot=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    :animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img\n        :src=\"recommendation.images[0]\"\n        :alt=\"recommendation.name\"\n        class=\"x-recommendations__image\"\n      />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\nimport StaggeredFadeAndSlide from '@empathyco/x-components/animations/staggered-fade-and-slide.vue'\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, you can render any\nlayout you want using the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations v-slot:layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img\n            :src=\"recommendation.images[0]\"\n            :alt=\"recommendation.name\"\n            class=\"x-recommendations__image\"\n          />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart :result=\"recommendation\">Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n\n<script setup>\nimport { Recommendations } from '@empathyco/x-components/recommendations'\nimport { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;AAgCA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,sBAAsB,CAAC,IAAI;AACpC,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,gBAAgB,EAAE,MAAM;AACzB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;;QAEpB,MAAM,qBAAoB,GAAI,QAAQ,CAAC,iBAAiB,CAAC,CAAC,eAAc;;QAGxE,OAAO,CAAwC,wBAAwB,EAAE;YACvE,4BAA4B;AAC7B,SAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,eAAc,GAAI,QAAQ,CAAW,MACzC,qBAAqB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAC9D;AAEA;;;;;;;;;;AAUE;AACF,QAAA,SAAS,gBAAgB,GAAA;AACvB,YAAA,MAAM,YAAY;gBAChB,SAAS,EAAE,KAAK,CAAC,SAAS;gBAC1B,eAAe,EAAE,eAAe,CAAC,KAAK;aACxC;YACA,OAAO,eAAe,CAAC,KAAK,CAAC,MAAK,GAAI,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA,GAAI,EAAC;QACxE;AAEA;AAC+E;AAC/E,QAAA,MAAM,cAAa,GAAI,EAAE,eAAc,EAAE;AACzC,QAAA,QAAQ,KAAK,CAAC,MAAK,GAAI,gBAAe,GAAI,cAAc;IAC1D,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/recommendations/store/actions/fetch-recommendations.action.js

@@ -1,10 +1,5 @@
-import '@vue/devtools-api';
-import '../../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../../plugins/devtools/colors.utils.js';
 import '../../../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import { XPlugin } from '../../../../plugins/x-plugin.js';
 
 /**

package/js/x-modules/recommendations/store/actions/fetch-recommendations.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"fetch-recommendations.action.js","sources":["../../../../../../src/x-modules/recommendations/store/actions/fetch-recommendations.action.ts"],"sourcesContent":["import type { RecommendationsXStoreModule } from '../types'\nimport { XPlugin } from '../../../../plugins'\n\n/**\n * Default implementation for the {@link RecommendationsActions.fetchRecommendations}.\n *\n * @param _context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param request - The recommendations request to make.\n * @returns A `void` promise that resolves when it fetches recommendations.\n *\n * @public\n */\nexport const fetchRecommendations: RecommendationsXStoreModule['actions']['fetchRecommendations'] =\n  async (_context, request) => {\n    return request ? XPlugin.adapter.recommendations(request).then(({ results }) => results) : []\n  }\n"],"names":[],"mappings":";;;;;;;;;AAGA;;;;;;;;;AASG;AACI,MAAM,oBAAoB,GAC/B,OAAO,QAAQ,EAAE,OAAO,KAAI;AAC1B,IAAA,OAAO,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,GAAG,EAAE;AAC/F;;;;"}
+{"version":3,"file":"fetch-recommendations.action.js","sources":["../../../../../../src/x-modules/recommendations/store/actions/fetch-recommendations.action.ts"],"sourcesContent":["import type { RecommendationsXStoreModule } from '../types'\nimport { XPlugin } from '../../../../plugins'\n\n/**\n * Default implementation for the {@link RecommendationsActions.fetchRecommendations}.\n *\n * @param _context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param request - The recommendations request to make.\n * @returns A `void` promise that resolves when it fetches recommendations.\n *\n * @public\n */\nexport const fetchRecommendations: RecommendationsXStoreModule['actions']['fetchRecommendations'] =\n  async (_context, request) => {\n    return request ? XPlugin.adapter.recommendations(request).then(({ results }) => results) : []\n  }\n"],"names":[],"mappings":";;;;AAGA;;;;;;;;;AASG;AACI,MAAM,oBAAoB,GAC/B,OAAO,QAAQ,EAAE,OAAO,KAAI;AAC1B,IAAA,OAAO,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,GAAG,EAAE;AAC/F;;;;"}

package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue2.js

@@ -4,15 +4,11 @@ import SlidingPanel from '../../../components/sliding-panel.vue.js';
 import '../../../composables/create-use-device.js';
 import { use$x } from '../../../composables/use-_x.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import '../../../plugins/x-plugin.js';
 import '@vueuse/core';
+import 'rxjs';
 import { useState } from '../../../composables/use-state.js';
 import { relatedPromptsXModule } from '../x-module.js';
 import RelatedPrompt from './related-prompt.vue.js';

package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-prompts-tag-list.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n  <SlidingPanel\n    :key=\"x.query.search\"\n    :reset-on-content-change=\"false\"\n    :button-class=\"buttonClass\"\n    :show-buttons=\"showButtons && selectedPromptIndex === -1\"\n    :scroll-container-class=\"[\n      'x-related-prompts-tag-list-scroll-container',\n      scrollContainerClass || '',\n    ]\"\n  >\n    <template #sliding-panel-left-button>\n      <!--\n      @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n      -->\n      <slot name=\"sliding-panel-left-button\" />\n    </template>\n    <transition-group\n      class=\"x-related-prompts-tag-list\"\n      :css=\"false\"\n      tag=\"ul\"\n      appear\n      @before-enter=\"onBeforeEnter\"\n      @enter=\"onEnter\"\n      @leave=\"onLeave\"\n    >\n      <li\n        v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n        ref=\"listItems\"\n        :key=\"relatedPrompt.suggestionText\"\n        class=\"x-related-prompts-tag-list-item\"\n        :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n        :data-index=\"index\"\n        :style=\"{\n          ...(selectedPromptIndex === index && { width: '100%' }),\n          ...(isAnimating && { pointerEvents: 'none' }),\n        }\"\n        data-test=\"related-prompts-tag-list-item\"\n      >\n        <!--\n         @slot - The slot to render related prompt information.\n         @prop {Object} relatedPrompt - The related prompt object.\n         @prop {Function} onSelect - The function to select the related prompt.\n         @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n         -->\n        <slot\n          :related-prompt=\"relatedPrompt\"\n          :on-select=\"() => onSelect(index)\"\n          :is-selected=\"selectedPromptIndex === index\"\n        >\n          <DisplayEmitter\n            :payload=\"relatedPrompt.tagging?.toolingDisplayTagging!\"\n            :event-metadata=\"{\n              feature: 'related-prompts',\n              displayOriginalQuery: x.query.searchBox,\n              replaceable: false,\n            }\"\n          >\n            <RelatedPrompt\n              :related-prompt=\"relatedPrompt\"\n              :selected=\"selectedPromptIndex === index\"\n              @click=\"onSelect(index)\"\n            >\n              <template #related-prompt-extra-content>\n                <!--\n                 @slot related-prompt-extra-content - The slot to render related prompt extra information.\n                 @prop {Object} relatedPrompt - The related prompt object.\n                -->\n                <slot name=\"related-prompt-extra-content\" :related-prompt=\"relatedPrompt\" />\n              </template>\n            </RelatedPrompt>\n          </DisplayEmitter>\n        </slot>\n      </li>\n    </transition-group>\n    <template #sliding-panel-right-button>\n      <!--\n      @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n      -->\n      <slot name=\"sliding-panel-right-button\" />\n    </template>\n  </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onBeforeUnmount, ref } from 'vue'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport SlidingPanel from '../../../components/sliding-panel.vue'\nimport { use$x, useState } from '../../../composables'\nimport { relatedPromptsXModule } from '../x-module'\nimport RelatedPrompt from './related-prompt.vue'\n\n/**\n * This component shows the list of `RelatedPrompts` components.\n *\n * If the default slot is reimplemented in the consumer, `onSelect` function will be\n * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RelatedPromptsTagList',\n  xModule: relatedPromptsXModule.name,\n  components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n  props: {\n    /**\n     * The CSS class for the left and right button of the sliding panel.\n     *\n     * @public\n     */\n    buttonClass: String,\n    /**\n     * The boolean prop to handle the visiblity of sliding pannel buttons.\n     *\n     * @public\n     */\n    showButtons: { type: Boolean, default: true },\n    /**\n     * The CSS class for the wrapper of all the related prompt wrapper elements.\n     *\n     * @public\n     */\n    scrollContainerClass: String,\n    /**\n     * The CSS class for all the related prompt wrapper elements.\n     *\n     * @public\n     */\n    tagClass: String,\n    /**\n     * Array of colors to apply to the related prompts. It will be applied to tag\n     * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n     *\n     * @public\n     */\n    tagColors: Array as PropType<string[]>,\n    /**\n     * The duration of the total animation in milliseconds.\n     *\n     * @public\n     */\n    animationDurationInMs: {\n      type: Number,\n      default: 700,\n    },\n  },\n  setup(props) {\n    const x = use$x()\n    const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts')\n\n    const clickedListItemIndex = ref<number | null>(null)\n    const initialOffsetLefts: Record<number, number> = {}\n    const isAnimating = ref(false)\n    const listItems = ref<HTMLElement[]>([])\n\n    const sortedListItems = computed<HTMLElement[]>(() =>\n      [...listItems.value].sort(\n        (a: HTMLElement, b: HTMLElement) =>\n          Number.parseInt(b.getAttribute('data-index')!) -\n          Number.parseInt(a.getAttribute('data-index')!),\n      ),\n    )\n\n    // The duration of a single animation (enter or leave) in milliseconds\n    // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n    // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n    const singleAnimationDurationInMs = computed(\n      () =>\n        props.animationDurationInMs /\n        (clickedListItemIndex.value !== null\n          ? relatedPrompts.value.length - 1\n          : relatedPrompts.value.length),\n    )\n\n    const indexRelatedPrompts = computed(() =>\n      relatedPrompts.value.map((relatedPrompt, index) => ({ ...relatedPrompt, index })),\n    )\n\n    const visibleRelatedPrompts = computed(() =>\n      selectedPromptIndex.value !== -1\n        ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n        : indexRelatedPrompts.value,\n    )\n\n    let timeOutId: number\n    const resetTransitionStyle = (excludedProperties: Array<string> = ['width']) => {\n      if (timeOutId) {\n        clearTimeout(timeOutId)\n      }\n\n      isAnimating.value = true\n      timeOutId = +setTimeout(() => {\n        isAnimating.value = false\n        clickedListItemIndex.value = null\n\n        sortedListItems.value.forEach(element => {\n          element.style.cssText\n            .split(';')\n            .map(rule => rule.split(':')[0]?.trim())\n            .forEach(property => {\n              if (!excludedProperties.includes(property)) {\n                element.style.removeProperty(property)\n              }\n            })\n        })\n      }, props.animationDurationInMs)\n    }\n\n    const onSelect = (selectedIndex: number): void => {\n      resetTransitionStyle()\n\n      clickedListItemIndex.value = selectedIndex\n      const selected: HTMLElement = sortedListItems.value.find(\n        element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex,\n      )!\n\n      // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n      if (selectedPromptIndex.value === -1) {\n        // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n        // sorted in descending order by index.\n        sortedListItems.value.forEach(element => {\n          const index = Number.parseInt(element.getAttribute('data-index')!)\n\n          initialOffsetLefts[index] = element.offsetLeft\n          element.style.left = `${element.offsetLeft}px`\n          element.style.position = 'absolute'\n          element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`\n\n          if (index !== selectedIndex) {\n            element.style.opacity = '1'\n            element.style.transitionDelay = `${\n              (index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value\n            }ms`\n          }\n        })\n\n        // Synchronize the transition delay of the selected element with the last\n        // element to leave\n        selected.style.transitionDelay = `${\n          (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) *\n          singleAnimationDurationInMs.value\n        }ms`\n\n        // Trigger the animation (selecting) for the selected element\n        requestAnimationFrame(() => {\n          const maxWidth = getComputedStyle(selected).maxWidth\n\n          selected.style.left = '0px'\n          selected.style.setProperty(\n            'width',\n            `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n            'important',\n          )\n        })\n      } else {\n        // Prepare the selected element for the deselecting animation\n        selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`\n        selected.style.left = '0px'\n        selected.style.position = 'absolute'\n\n        // Trigger the animation (deselecting) for the selected element\n        selected.style.removeProperty('width')\n        requestAnimationFrame(() => {\n          selected.style.left = `${initialOffsetLefts[selectedIndex]}px`\n        })\n      }\n\n      x.emit('UserSelectedARelatedPrompt', selectedIndex, {\n        relatedPrompt: relatedPrompts.value[selectedIndex],\n        selectedPrompt: selectedPromptIndex.value,\n      })\n    }\n\n    const onBeforeEnter = (el: Element) => {\n      const element = el as HTMLElement\n      const index = Number.parseInt(element.getAttribute('data-index')!)\n\n      // Prepare the element for the enter animation\n      element.style.opacity = '0'\n      element.style.transform = 'translateY(5px)'\n      element.style.transitionDelay = `${\n        (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n          ? index - 1\n          : index) * singleAnimationDurationInMs.value\n      }ms`\n      element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`\n    }\n\n    const onEnter = (el: Element, done: () => void) => {\n      const element = el as HTMLElement\n      const index = Number.parseInt(element.getAttribute('data-index')!)\n\n      // Also part of the preparation for the enter animation, but it needs to be done\n      // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n      element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`\n\n      // trigger enter animation\n      requestAnimationFrame(() => {\n        element.style.opacity = '1'\n        element.style.position = 'absolute'\n        element.style.transform = 'translateY(0)'\n      })\n\n      done()\n    }\n\n    const onLeave = (el: Element, done: () => void) => {\n      const element = el as HTMLElement\n\n      // trigger leave animation\n      requestAnimationFrame(() => {\n        element.style.opacity = '0'\n        element.style.transform = 'translateY(5px)'\n      })\n\n      // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n      setTimeout(done, props.animationDurationInMs)\n    }\n\n    // Changing the request will trigger the appear animation, so we need to reset the\n    // style after it finishes\n    x.on('SearchRequestChanged', false).subscribe(() => {\n      resetTransitionStyle([])\n    })\n\n    onBeforeUnmount(() => {\n      x.emit('RelatedPromptsUnmounted')\n    })\n\n    return {\n      onSelect,\n      onBeforeEnter,\n      onEnter,\n      onLeave,\n      selectedPromptIndex,\n      visibleRelatedPrompts,\n      listItems,\n      isAnimating,\n      x,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-related-prompts-tag-list-scroll-container {\n  height: 100%;\n  position: relative;\n}\n.x-related-prompts-tag-list {\n  display: flex;\n  gap: 16px;\n  min-width: 100%;\n  width: 100%;\n}\n.x-related-prompts-tag-list-item {\n  height: 100%;\n  flex-shrink: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n### Basic usage\n\n```vue live\n<template>\n  <RelatedPromptsTagList />\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n\n### Customizing tag colors and classes\n\n```vue live\n<template>\n  <RelatedPromptsTagList :tagColors=\"['x-bg-neutral-50', 'x-bg-lead-50']\" tagClass=\"rounded\" />\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n\n### Using the default slot to customize prompt rendering\n\n```vue live\n<template>\n  <RelatedPromptsTagList>\n    <template #default=\"{ relatedPrompt, onSelect, isSelected }\">\n      <button :class=\"{ selected: isSelected }\" @click=\"onSelect()\">\n        {{ relatedPrompt.suggestionText }}\n      </button>\n    </template>\n  </RelatedPromptsTagList>\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n\n### Customizing extra content in RelatedPrompt\n\n```vue live\n<template>\n  <RelatedPromptsTagList>\n    <template #related-prompt-extra-content=\"{ relatedPrompt }\">\n      <span>Extra: {{ relatedPrompt.suggestionText }}</span>\n    </template>\n  </RelatedPromptsTagList>\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n</docs>\n"],"names":["DisplayEmitter"],"mappings":";;;;;;;;;;;;;;;;;;;AA6FA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,uBAAuB;IAC7B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE,kBAAEA,WAAc,EAAE,aAAa,EAAE,YAAW,EAAG;AAC3D,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAM;AACnB;;;;AAIE;QACF,WAAW,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM;AAC7C;;;;AAIE;AACF,QAAA,oBAAoB,EAAE,MAAM;AAC5B;;;;AAIE;AACF,QAAA,QAAQ,EAAE,MAAM;AAChB;;;;;AAKE;AACF,QAAA,SAAS,EAAE,KAA2B;AACtC;;;;AAIE;AACF,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,CAAA,GAAI,KAAK,EAAC;AAChB,QAAA,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAkB,EAAE,GAAI,QAAQ,CAAC,gBAAgB,CAAA;AAEzF,QAAA,MAAM,oBAAmB,GAAI,GAAG,CAAgB,IAAI,CAAA;QACpD,MAAM,kBAAkB,GAA2B,EAAC;AACpD,QAAA,MAAM,WAAU,GAAI,GAAG,CAAC,KAAK,CAAA;AAC7B,QAAA,MAAM,SAAQ,GAAI,GAAG,CAAgB,EAAE,CAAA;AAEvC,QAAA,MAAM,eAAc,GAAI,QAAQ,CAAgB,MAC9C,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CACvB,CAAC,CAAc,EAAE,CAAc,KAC7B,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,YAAY,CAAE,CAAA;AAC7C,YAAA,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,YAAY,CAAE,CAAC,CACjD,CACH;;;;QAKA,MAAM,2BAA0B,GAAI,QAAQ,CAC1C,MACE,KAAK,CAAC,qBAAoB;AAC1B,aAAC,oBAAoB,CAAC,KAAI,KAAM;AAC9B,kBAAE,cAAc,CAAC,KAAK,CAAC,MAAK,GAAI;kBAC9B,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CACpC;AAEA,QAAA,MAAM,mBAAkB,GAAI,QAAQ,CAAC,MACnC,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,KAAK,MAAM,EAAE,GAAG,aAAa,EAAE,KAAI,EAAG,CAAC,CAAC,CACnF;AAEA,QAAA,MAAM,qBAAoB,GAAI,QAAQ,CAAC,MACrC,mBAAmB,CAAC,KAAI,KAAM;cAC1B,CAAC,mBAAmB,CAAC,KAAK,CAAC,mBAAmB,CAAC,KAAK,CAAC;AACvD,cAAE,mBAAmB,CAAC,KAAK,CAC/B;AAEA,QAAA,IAAI,SAAgB;QACpB,MAAM,oBAAmB,GAAI,CAAC,kBAAA,GAAoC,CAAC,OAAO,CAAC,KAAG;YAC5E,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAA;YACxB;AAEA,YAAA,WAAW,CAAC,QAAQ,IAAG;AACvB,YAAA,SAAQ,GAAI,CAAC,UAAU,CAAC,MAAI;AAC1B,gBAAA,WAAW,CAAC,KAAI,GAAI,KAAI;AACxB,gBAAA,oBAAoB,CAAC,KAAI,GAAI,IAAG;AAEhC,gBAAA,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,OAAM,IAAG;oBACrC,OAAO,CAAC,KAAK,CAAC;yBACX,KAAK,CAAC,GAAG;AACT,yBAAA,GAAG,CAAC,IAAG,IAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE;yBACtC,OAAO,CAAC,QAAO,IAAG;wBACjB,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;AAC1C,4BAAA,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAA;wBACvC;AACF,oBAAA,CAAC,CAAA;AACL,gBAAA,CAAC,CAAA;AACH,YAAA,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAA;AAChC,QAAA,CAAA;AAEA,QAAA,MAAM,WAAW,CAAC,aAAqB,KAAS;AAC9C,YAAA,oBAAoB,EAAC;AAErB,YAAA,oBAAoB,CAAC,KAAI,GAAI,aAAY;YACzC,MAAM,QAAQ,GAAgB,eAAe,CAAC,KAAK,CAAC,IAAI,CACtD,OAAM,IAAK,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAE,MAAM,aAAa,CAClF;;AAGD,YAAA,IAAI,mBAAmB,CAAC,KAAI,KAAM,EAAE,EAAE;;;AAGpC,gBAAA,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,OAAM,IAAG;AACrC,oBAAA,MAAM,KAAI,GAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAE,CAAA;AAEjE,oBAAA,kBAAkB,CAAC,KAAK,CAAA,GAAI,OAAO,CAAC,UAAS;oBAC7C,OAAO,CAAC,KAAK,CAAC,IAAG,GAAI,GAAG,OAAO,CAAC,UAAU,CAAA,EAAA,CAAG;AAC7C,oBAAA,OAAO,CAAC,KAAK,CAAC,QAAO,GAAI,UAAS;oBAClC,OAAO,CAAC,KAAK,CAAC,kBAAiB,GAAI,GAAG,2BAA2B,CAAC,KAAK,CAAA,EAAA,CAAG;AAE1E,oBAAA,IAAI,KAAI,KAAM,aAAa,EAAE;AAC3B,wBAAA,OAAO,CAAC,KAAK,CAAC,OAAM,GAAI,GAAE;wBAC1B,OAAO,CAAC,KAAK,CAAC,eAAc,GAAI,CAAA,EAC9B,CAAC,KAAI,GAAI,aAAY,GAAI,KAAI,GAAI,QAAQ,CAAC,IAAI,2BAA2B,CAAC,KAC5E,CAAA,EAAA,CAAG;oBACL;AACF,gBAAA,CAAC,CAAA;;;AAID,gBAAA,QAAQ,CAAC,KAAK,CAAC,eAAc,GAAI,CAAA,EAC/B,CAAC,cAAc,CAAC,KAAK,CAAC,MAAK,GAAI,CAAA,GAAI,cAAc,CAAC,KAAK,CAAC,MAAK,GAAI,CAAA,GAAI,CAAC;oBACtE,2BAA2B,CAAC,KAC9B,CAAA,EAAA,CAAG;;gBAGH,qBAAqB,CAAC,MAAI;oBACxB,MAAM,QAAO,GAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC,QAAO;AAEnD,oBAAA,QAAQ,CAAC,KAAK,CAAC,OAAO,KAAI;oBAC1B,QAAQ,CAAC,KAAK,CAAC,WAAW,CACxB,OAAO,EACP,CAAA,EAAG,QAAO,KAAM,MAAK,GAAI,QAAO,GAAI,MAAM,CAAA,CAAE,EAC5C,WAAW,CACb;AACF,gBAAA,CAAC,CAAA;YACH;iBAAO;;gBAEL,QAAQ,CAAC,KAAK,CAAC,kBAAiB,GAAI,GAAG,2BAA2B,CAAC,KAAK,CAAA,EAAA,CAAG;AAC3E,gBAAA,QAAQ,CAAC,KAAK,CAAC,OAAO,KAAI;AAC1B,gBAAA,QAAQ,CAAC,KAAK,CAAC,WAAW,UAAS;;AAGnC,gBAAA,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAA;gBACrC,qBAAqB,CAAC,MAAI;oBACxB,QAAQ,CAAC,KAAK,CAAC,IAAG,GAAI,CAAA,EAAG,kBAAkB,CAAC,aAAa,CAAC,CAAA,EAAA,CAAG;AAC/D,gBAAA,CAAC,CAAA;YACH;AAEA,YAAA,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE,aAAa,EAAE;AAClD,gBAAA,aAAa,EAAE,cAAc,CAAC,KAAK,CAAC,aAAa,CAAC;gBAClD,cAAc,EAAE,mBAAmB,CAAC,KAAK;AAC1C,aAAA,CAAA;AACH,QAAA,CAAA;AAEA,QAAA,MAAM,aAAY,GAAI,CAAC,EAAW,KAAG;YACnC,MAAM,OAAM,GAAI,EAAgB;AAChC,YAAA,MAAM,KAAI,GAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAE,CAAA;;AAGjE,YAAA,OAAO,CAAC,KAAK,CAAC,OAAM,GAAI,GAAE;AAC1B,YAAA,OAAO,CAAC,KAAK,CAAC,YAAY,iBAAgB;AAC1C,YAAA,OAAO,CAAC,KAAK,CAAC,eAAc,GAAI,GAC9B,CAAC,oBAAoB,CAAC,KAAI,KAAM,IAAG,IAAK,KAAI,GAAI,oBAAoB,CAAC;kBACjE,QAAQ;kBACR,KAAK,IAAI,2BAA2B,CAAC,KAC3C,IAAG;YACH,OAAO,CAAC,KAAK,CAAC,kBAAiB,GAAI,GAAG,2BAA2B,CAAC,KAAK,CAAA,EAAA,CAAG;AAC5E,QAAA,CAAA;AAEA,QAAA,MAAM,UAAU,CAAC,EAAW,EAAE,IAAgB,KAAG;YAC/C,MAAM,OAAM,GAAI,EAAgB;AAChC,YAAA,MAAM,KAAI,GAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAE,CAAA;;;AAIjE,YAAA,OAAO,CAAC,KAAK,CAAC,IAAG,GAAI,CAAA,EAAG,kBAAkB,CAAC,KAAK,CAAA,IAAK,OAAO,CAAC,UAAU,IAAG;;YAG1E,qBAAqB,CAAC,MAAI;AACxB,gBAAA,OAAO,CAAC,KAAK,CAAC,OAAM,GAAI,GAAE;AAC1B,gBAAA,OAAO,CAAC,KAAK,CAAC,QAAO,GAAI,UAAS;AAClC,gBAAA,OAAO,CAAC,KAAK,CAAC,SAAQ,GAAI,eAAc;AAC1C,YAAA,CAAC,CAAA;AAED,YAAA,IAAI,EAAC;AACP,QAAA,CAAA;AAEA,QAAA,MAAM,UAAU,CAAC,EAAW,EAAE,IAAgB,KAAG;YAC/C,MAAM,OAAM,GAAI,EAAgB;;YAGhC,qBAAqB,CAAC,MAAI;AACxB,gBAAA,OAAO,CAAC,KAAK,CAAC,OAAM,GAAI,GAAE;AAC1B,gBAAA,OAAO,CAAC,KAAK,CAAC,YAAY,iBAAgB;AAC5C,YAAA,CAAC,CAAA;;AAGD,YAAA,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,qBAAqB,CAAA;AAC9C,QAAA,CAAA;;;QAIA,CAAC,CAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,MAAI;YAChD,oBAAoB,CAAC,EAAE,CAAA;AACzB,QAAA,CAAC,CAAA;QAED,eAAe,CAAC,MAAI;AAClB,YAAA,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAA;AAClC,QAAA,CAAC,CAAA;QAED,OAAO;YACL,QAAQ;YACR,aAAa;YACb,OAAO;YACP,OAAO;YACP,mBAAmB;YACnB,qBAAqB;YACrB,SAAS;YACT,WAAW;YACX,CAAC;SACH;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"related-prompts-tag-list.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n  <SlidingPanel\n    :key=\"x.query.search\"\n    :reset-on-content-change=\"false\"\n    :button-class=\"buttonClass\"\n    :show-buttons=\"showButtons && selectedPromptIndex === -1\"\n    :scroll-container-class=\"[\n      'x-related-prompts-tag-list-scroll-container',\n      scrollContainerClass || '',\n    ]\"\n  >\n    <template #sliding-panel-left-button>\n      <!--\n      @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n      -->\n      <slot name=\"sliding-panel-left-button\" />\n    </template>\n    <transition-group\n      class=\"x-related-prompts-tag-list\"\n      :css=\"false\"\n      tag=\"ul\"\n      appear\n      @before-enter=\"onBeforeEnter\"\n      @enter=\"onEnter\"\n      @leave=\"onLeave\"\n    >\n      <li\n        v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n        ref=\"listItems\"\n        :key=\"relatedPrompt.suggestionText\"\n        class=\"x-related-prompts-tag-list-item\"\n        :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n        :data-index=\"index\"\n        :style=\"{\n          ...(selectedPromptIndex === index && { width: '100%' }),\n          ...(isAnimating && { pointerEvents: 'none' }),\n        }\"\n        data-test=\"related-prompts-tag-list-item\"\n      >\n        <!--\n         @slot - The slot to render related prompt information.\n         @prop {Object} relatedPrompt - The related prompt object.\n         @prop {Function} onSelect - The function to select the related prompt.\n         @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n         -->\n        <slot\n          :related-prompt=\"relatedPrompt\"\n          :on-select=\"() => onSelect(index)\"\n          :is-selected=\"selectedPromptIndex === index\"\n        >\n          <DisplayEmitter\n            :payload=\"relatedPrompt.tagging?.toolingDisplayTagging!\"\n            :event-metadata=\"{\n              feature: 'related-prompts',\n              displayOriginalQuery: x.query.searchBox,\n              replaceable: false,\n            }\"\n          >\n            <RelatedPrompt\n              :related-prompt=\"relatedPrompt\"\n              :selected=\"selectedPromptIndex === index\"\n              @click=\"onSelect(index)\"\n            >\n              <template #related-prompt-extra-content>\n                <!--\n                 @slot related-prompt-extra-content - The slot to render related prompt extra information.\n                 @prop {Object} relatedPrompt - The related prompt object.\n                -->\n                <slot name=\"related-prompt-extra-content\" :related-prompt=\"relatedPrompt\" />\n              </template>\n            </RelatedPrompt>\n          </DisplayEmitter>\n        </slot>\n      </li>\n    </transition-group>\n    <template #sliding-panel-right-button>\n      <!--\n      @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n      -->\n      <slot name=\"sliding-panel-right-button\" />\n    </template>\n  </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onBeforeUnmount, ref } from 'vue'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport SlidingPanel from '../../../components/sliding-panel.vue'\nimport { use$x, useState } from '../../../composables'\nimport { relatedPromptsXModule } from '../x-module'\nimport RelatedPrompt from './related-prompt.vue'\n\n/**\n * This component shows the list of `RelatedPrompts` components.\n *\n * If the default slot is reimplemented in the consumer, `onSelect` function will be\n * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RelatedPromptsTagList',\n  xModule: relatedPromptsXModule.name,\n  components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n  props: {\n    /**\n     * The CSS class for the left and right button of the sliding panel.\n     *\n     * @public\n     */\n    buttonClass: String,\n    /**\n     * The boolean prop to handle the visiblity of sliding pannel buttons.\n     *\n     * @public\n     */\n    showButtons: { type: Boolean, default: true },\n    /**\n     * The CSS class for the wrapper of all the related prompt wrapper elements.\n     *\n     * @public\n     */\n    scrollContainerClass: String,\n    /**\n     * The CSS class for all the related prompt wrapper elements.\n     *\n     * @public\n     */\n    tagClass: String,\n    /**\n     * Array of colors to apply to the related prompts. It will be applied to tag\n     * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n     *\n     * @public\n     */\n    tagColors: Array as PropType<string[]>,\n    /**\n     * The duration of the total animation in milliseconds.\n     *\n     * @public\n     */\n    animationDurationInMs: {\n      type: Number,\n      default: 700,\n    },\n  },\n  setup(props) {\n    const x = use$x()\n    const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts')\n\n    const clickedListItemIndex = ref<number | null>(null)\n    const initialOffsetLefts: Record<number, number> = {}\n    const isAnimating = ref(false)\n    const listItems = ref<HTMLElement[]>([])\n\n    const sortedListItems = computed<HTMLElement[]>(() =>\n      [...listItems.value].sort(\n        (a: HTMLElement, b: HTMLElement) =>\n          Number.parseInt(b.getAttribute('data-index')!) -\n          Number.parseInt(a.getAttribute('data-index')!),\n      ),\n    )\n\n    // The duration of a single animation (enter or leave) in milliseconds\n    // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n    // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n    const singleAnimationDurationInMs = computed(\n      () =>\n        props.animationDurationInMs /\n        (clickedListItemIndex.value !== null\n          ? relatedPrompts.value.length - 1\n          : relatedPrompts.value.length),\n    )\n\n    const indexRelatedPrompts = computed(() =>\n      relatedPrompts.value.map((relatedPrompt, index) => ({ ...relatedPrompt, index })),\n    )\n\n    const visibleRelatedPrompts = computed(() =>\n      selectedPromptIndex.value !== -1\n        ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n        : indexRelatedPrompts.value,\n    )\n\n    let timeOutId: number\n    const resetTransitionStyle = (excludedProperties: Array<string> = ['width']) => {\n      if (timeOutId) {\n        clearTimeout(timeOutId)\n      }\n\n      isAnimating.value = true\n      timeOutId = +setTimeout(() => {\n        isAnimating.value = false\n        clickedListItemIndex.value = null\n\n        sortedListItems.value.forEach(element => {\n          element.style.cssText\n            .split(';')\n            .map(rule => rule.split(':')[0]?.trim())\n            .forEach(property => {\n              if (!excludedProperties.includes(property)) {\n                element.style.removeProperty(property)\n              }\n            })\n        })\n      }, props.animationDurationInMs)\n    }\n\n    const onSelect = (selectedIndex: number): void => {\n      resetTransitionStyle()\n\n      clickedListItemIndex.value = selectedIndex\n      const selected: HTMLElement = sortedListItems.value.find(\n        element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex,\n      )!\n\n      // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n      if (selectedPromptIndex.value === -1) {\n        // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n        // sorted in descending order by index.\n        sortedListItems.value.forEach(element => {\n          const index = Number.parseInt(element.getAttribute('data-index')!)\n\n          initialOffsetLefts[index] = element.offsetLeft\n          element.style.left = `${element.offsetLeft}px`\n          element.style.position = 'absolute'\n          element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`\n\n          if (index !== selectedIndex) {\n            element.style.opacity = '1'\n            element.style.transitionDelay = `${\n              (index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value\n            }ms`\n          }\n        })\n\n        // Synchronize the transition delay of the selected element with the last\n        // element to leave\n        selected.style.transitionDelay = `${\n          (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) *\n          singleAnimationDurationInMs.value\n        }ms`\n\n        // Trigger the animation (selecting) for the selected element\n        requestAnimationFrame(() => {\n          const maxWidth = getComputedStyle(selected).maxWidth\n\n          selected.style.left = '0px'\n          selected.style.setProperty(\n            'width',\n            `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n            'important',\n          )\n        })\n      } else {\n        // Prepare the selected element for the deselecting animation\n        selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`\n        selected.style.left = '0px'\n        selected.style.position = 'absolute'\n\n        // Trigger the animation (deselecting) for the selected element\n        selected.style.removeProperty('width')\n        requestAnimationFrame(() => {\n          selected.style.left = `${initialOffsetLefts[selectedIndex]}px`\n        })\n      }\n\n      x.emit('UserSelectedARelatedPrompt', selectedIndex, {\n        relatedPrompt: relatedPrompts.value[selectedIndex],\n        selectedPrompt: selectedPromptIndex.value,\n      })\n    }\n\n    const onBeforeEnter = (el: Element) => {\n      const element = el as HTMLElement\n      const index = Number.parseInt(element.getAttribute('data-index')!)\n\n      // Prepare the element for the enter animation\n      element.style.opacity = '0'\n      element.style.transform = 'translateY(5px)'\n      element.style.transitionDelay = `${\n        (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n          ? index - 1\n          : index) * singleAnimationDurationInMs.value\n      }ms`\n      element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`\n    }\n\n    const onEnter = (el: Element, done: () => void) => {\n      const element = el as HTMLElement\n      const index = Number.parseInt(element.getAttribute('data-index')!)\n\n      // Also part of the preparation for the enter animation, but it needs to be done\n      // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n      element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`\n\n      // trigger enter animation\n      requestAnimationFrame(() => {\n        element.style.opacity = '1'\n        element.style.position = 'absolute'\n        element.style.transform = 'translateY(0)'\n      })\n\n      done()\n    }\n\n    const onLeave = (el: Element, done: () => void) => {\n      const element = el as HTMLElement\n\n      // trigger leave animation\n      requestAnimationFrame(() => {\n        element.style.opacity = '0'\n        element.style.transform = 'translateY(5px)'\n      })\n\n      // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n      setTimeout(done, props.animationDurationInMs)\n    }\n\n    // Changing the request will trigger the appear animation, so we need to reset the\n    // style after it finishes\n    x.on('SearchRequestChanged', false).subscribe(() => {\n      resetTransitionStyle([])\n    })\n\n    onBeforeUnmount(() => {\n      x.emit('RelatedPromptsUnmounted')\n    })\n\n    return {\n      onSelect,\n      onBeforeEnter,\n      onEnter,\n      onLeave,\n      selectedPromptIndex,\n      visibleRelatedPrompts,\n      listItems,\n      isAnimating,\n      x,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-related-prompts-tag-list-scroll-container {\n  height: 100%;\n  position: relative;\n}\n.x-related-prompts-tag-list {\n  display: flex;\n  gap: 16px;\n  min-width: 100%;\n  width: 100%;\n}\n.x-related-prompts-tag-list-item {\n  height: 100%;\n  flex-shrink: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n### Basic usage\n\n```vue live\n<template>\n  <RelatedPromptsTagList />\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n\n### Customizing tag colors and classes\n\n```vue live\n<template>\n  <RelatedPromptsTagList :tagColors=\"['x-bg-neutral-50', 'x-bg-lead-50']\" tagClass=\"rounded\" />\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n\n### Using the default slot to customize prompt rendering\n\n```vue live\n<template>\n  <RelatedPromptsTagList>\n    <template #default=\"{ relatedPrompt, onSelect, isSelected }\">\n      <button :class=\"{ selected: isSelected }\" @click=\"onSelect()\">\n        {{ relatedPrompt.suggestionText }}\n      </button>\n    </template>\n  </RelatedPromptsTagList>\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n\n### Customizing extra content in RelatedPrompt\n\n```vue live\n<template>\n  <RelatedPromptsTagList>\n    <template #related-prompt-extra-content=\"{ relatedPrompt }\">\n      <span>Extra: {{ relatedPrompt.suggestionText }}</span>\n    </template>\n  </RelatedPromptsTagList>\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n</docs>\n"],"names":["DisplayEmitter"],"mappings":"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"}

package/js/x-modules/scroll/components/scroll-to-top.vue2.js

@@ -90,13 +90,9 @@ import '../../../components/result/result-variants-provider.vue.js';
 import '../../../components/scroll/base-scroll.vue2.js';
 import '@empathyco/x-utils';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
 import '../../../plugins/x-plugin.js';
+import 'rxjs';
 import '../../../components/sliding-panel.vue2.js';
 import '../../../components/sliding-panel.vue3.js';
 import '../../../components/snippet-callbacks.vue2.js';

package/js/x-modules/scroll/components/scroll-to-top.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.vue2.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <BaseEventButton\n      v-if=\"isVisible\"\n      class=\"x-scroll-to-top x-button\"\n      data-test=\"scroll-to-top\"\n      aria-label=\"Scroll to top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton, NoAnimation } from '../../../components'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/**\n * The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ScrollToTop',\n  xModule: scrollXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /**\n     * Animation to use for showing/hiding the button.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /**\n     * Threshold in pixels from the top to show the button.\n     *\n     * @public\n     */\n    thresholdPx: Number,\n    /**\n     * Id of the target scroll component.\n     *\n     * @public\n     */\n    scrollId: {\n      type: String,\n      default: MainScrollId,\n    },\n  },\n  setup(props) {\n    /**\n     * State of all the scroll components in this module.\n     *\n     * @internal\n     */\n    // TODO: Directly retrieve the needed data in this computed property\n    const { data } = useState('scroll')\n\n    /**\n     * The scroll data retrieved for this component.\n     *\n     * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n     * passed. Otherwise it returns `null`.\n     * @internal\n     */\n    const scrollData = computed(() => {\n      return props.scrollId && data.value[props.scrollId]\n        ? data.value[props.scrollId]\n        : {\n            position: 0,\n            direction: 'UP',\n            hasReachedStart: false,\n            hasAlmostReachedEnd: false,\n            hasReachedEnd: false,\n          }\n    })\n\n    /**\n     * Event that will be emitted when the scroll to top is clicked.\n     *\n     * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n     * @internal\n     */\n    const events = computed(\n      (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId }),\n    )\n\n    /**\n     * Checks if the thresholdPx prop has been provided and if it is a number.\n     *\n     * @returns If the thresholdPx is a number or not.\n     * @internal\n     */\n    const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number')\n\n    /**\n     * Checks if the threshold has been reached in case the threshold strategy is in use.\n     *\n     * @returns If the scrollTop is bigger than the thresholdPx.\n     * @internal\n     */\n    const isThresholdReached = computed(\n      () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!,\n    )\n\n    /**\n     * Returns if the scroll has almost reached its end or not.\n     *\n     * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n     * @internal\n     */\n    const hasAlmostReachedScrollEnd = computed(\n      () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN',\n    )\n\n    /**\n     * Whether if the button is visible or not depending on the strategy being used.\n     *\n     * @returns If the button should be visible or not.\n     * @internal\n     */\n    const isVisible = computed(() =>\n      useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value,\n    )\n\n    return {\n      events,\n      isVisible,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](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 id of the scroll\n  that is going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script setup>\nimport { ScrollToTop } from '@empathyco/x-components/scroll'\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAW;AAC3B,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAM;AACnB;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,YAAY;AACtB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;;QAEF,MAAM,EAAE,IAAG,EAAE,GAAI,QAAQ,CAAC,QAAQ,CAAA;AAElC;;;;;;AAME;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,MAAI;YAC9B,OAAO,KAAK,CAAC,QAAO,IAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;kBAC9C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;AAC3B,kBAAE;AACE,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,mBAAmB,EAAE,KAAK;AAC1B,oBAAA,aAAa,EAAE,KAAK;iBACtB;AACN,QAAA,CAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CACrB,OAA8B,EAAE,sBAAsB,EAAE,KAAK,CAAC,QAAO,EAAG,CAAC,CAC3E;AAEA;;;;;AAKE;AACF,QAAA,MAAM,oBAAmB,GAAI,QAAQ,CAAC,MAAM,OAAO,KAAK,CAAC,gBAAgB,QAAQ,CAAA;AAEjF;;;;;AAKE;QACF,MAAM,kBAAiB,GAAI,QAAQ,CACjC,MAAM,oBAAoB,CAAC,KAAI,IAAK,UAAU,CAAC,KAAK,CAAC,QAAO,GAAI,KAAK,CAAC,WAAY,CACpF;AAEA;;;;;AAKE;QACF,MAAM,yBAAwB,GAAI,QAAQ,CACxC,MAAM,UAAU,CAAC,KAAK,CAAC,mBAAkB,IAAK,UAAU,CAAC,KAAK,CAAC,SAAQ,KAAM,MAAM,CACrF;AAEA;;;;;AAKE;QACF,MAAM,YAAY,QAAQ,CAAC,MACzB,oBAAoB,CAAC,KAAI,GAAI,kBAAkB,CAAC,KAAI,GAAI,yBAAyB,CAAC,KAAK,CACzF;QAEA,OAAO;YACL,MAAM;YACN,SAAS;SACX;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"scroll-to-top.vue2.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <BaseEventButton\n      v-if=\"isVisible\"\n      class=\"x-scroll-to-top x-button\"\n      data-test=\"scroll-to-top\"\n      aria-label=\"Scroll to top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { XEventsTypes } from '../../../wiring'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton, NoAnimation } from '../../../components'\nimport { useState } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { scrollXModule } from '../x-module'\nimport { MainScrollId } from './scroll.const'\n\n/**\n * The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ScrollToTop',\n  xModule: scrollXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /**\n     * Animation to use for showing/hiding the button.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /**\n     * Threshold in pixels from the top to show the button.\n     *\n     * @public\n     */\n    thresholdPx: Number,\n    /**\n     * Id of the target scroll component.\n     *\n     * @public\n     */\n    scrollId: {\n      type: String,\n      default: MainScrollId,\n    },\n  },\n  setup(props) {\n    /**\n     * State of all the scroll components in this module.\n     *\n     * @internal\n     */\n    // TODO: Directly retrieve the needed data in this computed property\n    const { data } = useState('scroll')\n\n    /**\n     * The scroll data retrieved for this component.\n     *\n     * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n     * passed. Otherwise it returns `null`.\n     * @internal\n     */\n    const scrollData = computed(() => {\n      return props.scrollId && data.value[props.scrollId]\n        ? data.value[props.scrollId]\n        : {\n            position: 0,\n            direction: 'UP',\n            hasReachedStart: false,\n            hasAlmostReachedEnd: false,\n            hasReachedEnd: false,\n          }\n    })\n\n    /**\n     * Event that will be emitted when the scroll to top is clicked.\n     *\n     * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n     * @internal\n     */\n    const events = computed(\n      (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId }),\n    )\n\n    /**\n     * Checks if the thresholdPx prop has been provided and if it is a number.\n     *\n     * @returns If the thresholdPx is a number or not.\n     * @internal\n     */\n    const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number')\n\n    /**\n     * Checks if the threshold has been reached in case the threshold strategy is in use.\n     *\n     * @returns If the scrollTop is bigger than the thresholdPx.\n     * @internal\n     */\n    const isThresholdReached = computed(\n      () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!,\n    )\n\n    /**\n     * Returns if the scroll has almost reached its end or not.\n     *\n     * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n     * @internal\n     */\n    const hasAlmostReachedScrollEnd = computed(\n      () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN',\n    )\n\n    /**\n     * Whether if the button is visible or not depending on the strategy being used.\n     *\n     * @returns If the button should be visible or not.\n     * @internal\n     */\n    const isVisible = computed(() =>\n      useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value,\n    )\n\n    return {\n      events,\n      isVisible,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](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 id of the scroll\n  that is going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script setup>\nimport { ScrollToTop } from '@empathyco/x-components/scroll'\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAW;AAC3B,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAM;AACnB;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,YAAY;AACtB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;;QAEF,MAAM,EAAE,IAAG,EAAE,GAAI,QAAQ,CAAC,QAAQ,CAAA;AAElC;;;;;;AAME;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,MAAI;YAC9B,OAAO,KAAK,CAAC,QAAO,IAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;kBAC9C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;AAC3B,kBAAE;AACE,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,mBAAmB,EAAE,KAAK;AAC1B,oBAAA,aAAa,EAAE,KAAK;iBACtB;AACN,QAAA,CAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CACrB,OAA8B,EAAE,sBAAsB,EAAE,KAAK,CAAC,QAAO,EAAG,CAAC,CAC3E;AAEA;;;;;AAKE;AACF,QAAA,MAAM,oBAAmB,GAAI,QAAQ,CAAC,MAAM,OAAO,KAAK,CAAC,gBAAgB,QAAQ,CAAA;AAEjF;;;;;AAKE;QACF,MAAM,kBAAiB,GAAI,QAAQ,CACjC,MAAM,oBAAoB,CAAC,KAAI,IAAK,UAAU,CAAC,KAAK,CAAC,QAAO,GAAI,KAAK,CAAC,WAAY,CACpF;AAEA;;;;;AAKE;QACF,MAAM,yBAAwB,GAAI,QAAQ,CACxC,MAAM,UAAU,CAAC,KAAK,CAAC,mBAAkB,IAAK,UAAU,CAAC,KAAK,CAAC,SAAQ,KAAM,MAAM,CACrF;AAEA;;;;;AAKE;QACF,MAAM,YAAY,QAAQ,CAAC,MACzB,oBAAoB,CAAC,KAAI,GAAI,kBAAkB,CAAC,KAAI,GAAI,yBAAyB,CAAC,KAAK,CACzF;QAEA,OAAO;YACL,MAAM;YACN,SAAS;SACX;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -2,14 +2,10 @@ import { defineComponent, computed } from 'vue';
 import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
 import '../../../composables/create-use-device.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import '../../../plugins/x-plugin.js';
+import 'rxjs';
 import '@vueuse/core';
 import { useState } from '../../../composables/use-state.js';
 import { semanticQueriesXModule } from '../x-module.js';

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

@@ -1 +1 @@
-{"version":3,"file":"semantic-queries.vue2.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-if=\"suggestions.length\"\n    v-slot=\"baseSuggestionsScope\"\n    class=\"x-semantic-queries\"\n    :suggestions=\"suggestions\"\n  >\n    <!--\n      @slot Semantic Query content\n      @binding {{suggestion: object - Suggestion data, index: number - Suggestion index}} v-bind\n        BaseSuggestion bindings\n    -->\n    <slot name=\"suggestion\" v-bind=\"baseSuggestionsScope\">\n      <SemanticQuery v-slot=\"baseSuggestionScope\" :suggestion=\"baseSuggestionsScope.suggestion\">\n        <!--\n          @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the\n            suggestion belongs to}} v-bind SemanticQuery bindings\n        -->\n        <slot name=\"suggestion-content\" v-bind=\"baseSuggestionScope\" />\n      </SemanticQuery>\n    </slot>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useState } from '../../../composables'\nimport { semanticQueriesXModule } from '../x-module'\nimport SemanticQuery from './semantic-query.vue'\n\n/**\n * Retrieves a list of semantic queries from the state and exposes them in the slots.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SemanticQueries',\n  xModule: semanticQueriesXModule.name,\n  components: { BaseSuggestions, SemanticQuery },\n  setup(_, { slots }) {\n    /** The semantic queries from the state. */\n    const suggestions = useState('semanticQueries').semanticQueries\n\n    /**\n     * Maps the list of semantic queries to a list of queries, to make it compatible with\n     * other components.\n     */\n    const queries = computed(() => suggestions.value.map(suggestion => suggestion.query))\n\n    /**\n     * Finds a {@link @empathyco/x-types#Suggestion} given a query.\n     *\n     * @param query - The query to search.\n     * @returns The {@link @empathyco/x-types#Suggestion} or undefined if not found.\n     */\n    function findSemanticQuery(query: string) {\n      return suggestions.value.find(suggestion => suggestion.query === query)\n    }\n\n    /**\n     * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no suggestions, nothing is rendered.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `default` slot or empty string if there are\n     * no suggestions.\n     */\n    function renderDefaultSlot() {\n      const slotProps = {\n        suggestions: suggestions.value,\n        queries: queries.value,\n        findSemanticQuery,\n      }\n      return suggestions.value.length ? slots.default?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { suggestions }\n    return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nBy default, the `SemanticQueries` component will render a list of semantic queries.\n\n```vue\n<template>\n  <SemanticQueries />\n</template>\n\n<script setup>\nimport { SemanticQueries } from '@empathyco/x-components/semantic-queries'\n</script>\n```\n\n### Play with props\n\nThe component has the following props:\n\n- `maxItemsToRender` to limit the number of semantic queries to render.\n- `animation` to specify the animation to be used to animate the semantic queries.\n\n```vue live\n<template>\n  <SemanticQueries :animation=\"animation\" :maxItemsToRender=\"3\" />\n</template>\n\n<script setup>\nimport { SemanticQueries } from '@empathyco/x-components/semantic-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\nconst animation = FadeAndSlide\n</script>\n```\n\n### Play with the default slot\n\nThe default slot is used to overwrite the whole content of the component.\n\n```vue live\n<template>\n  <SemanticQueries #default=\"{ suggestions }\">\n    <section>\n      <SlidingPanel>\n        <div v-for=\"suggestion in suggestions\" :key=\"suggestion.query\">\n          {{ suggestion.query }}\n          {{ suggestion.distance }}\n        </div>\n      </SlidingPanel>\n    </section>\n  </SemanticQueries>\n</template>\n\n<script setup>\nimport { SemanticQueries } from '@empathyco/x-components/semantic-queries'\nimport { SlidingPanel } from '@empathyco/x-components'\n</script>\n```\n\nThe default slot also exposes an array of semantic queries mapped to strings, and a method to find a\nsemantic query given a string query.\n\nThis is useful if you need an array of string queries, but also need to retrieve the original\nsemantic query to use it in another element.\n\n```vue live\n<template>\n  <SemanticQueries #default=\"{ queries, findSemanticQuery }\">\n    <section>\n      <QueryPreviewList :queries=\"queries\" #slot=\"{ query, results }\">\n        <div>\n          <SemanticQuery :suggestion=\"findSemanticQuery(query)\" #default=\"{ suggestion }\">\n            {{ suggestion.query }} ({{ suggestion.distance }})\n          </SemanticQuery>\n          <ul>\n            <li v-for=\"result in results\" :key=\"result.id\">\n              {{ result.name }}\n            </li>\n          </ul>\n        </div>\n      </QueryPreviewList>\n    </section>\n  </SemanticQueries>\n</template>\n\n<script setup>\nimport { SemanticQueries, SemanticQuery } from '@empathyco/x-components/semantic-queries'\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\n</script>\n```\n\n### Play with the suggestion slot\n\nThe suggestion slot can be used to override each semantic query item.\n\nIn this example, the query will be rendered along with the distance.\n\n```vue live\n<template>\n  <SemanticQueries #suggestion=\"{ suggestion: { query, distance } }\">\n    <span>\n      ({{ distance }})\n      {{ query }}\n    </span>\n  </SemanticQueries>\n</template>\n\n<script setup>\nimport { SemanticQueries } from '@empathyco/x-components/semantic-queries'\n</script>\n```\n\n### Play with the suggestion-content slot\n\nThe suggestion-content slot can be used to override only the content, but keep using the\nSemanticQuery component internally.\n\n```vue live\n<template>\n  <SemanticQueries #suggestion-content=\"{ suggestion: { query, distance } }\">\n    <span>\n      ({{ distance }})\n      {{ query }}\n    </span>\n  </SemanticQueries>\n</template>\n\n<script setup>\nimport { SemanticQueries } from '@empathyco/x-components/semantic-queries'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgCA;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,sBAAsB,CAAC,IAAI;AACpC,IAAA,UAAU,EAAE,EAAE,eAAe,EAAE,eAAe;AAC9C,IAAA,KAAK,CAAC,CAAC,EAAE,EAAE,KAAI,EAAG,EAAA;;QAEhB,MAAM,WAAU,GAAI,QAAQ,CAAC,iBAAiB,CAAC,CAAC,eAAc;AAE9D;;;AAGE;QACF,MAAM,OAAM,GAAI,QAAQ,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,UAAS,IAAK,UAAU,CAAC,KAAK,CAAC,CAAA;AAEpF;;;;;AAKE;QACF,SAAS,iBAAiB,CAAC,KAAa,EAAA;AACtC,YAAA,OAAO,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,UAAS,IAAK,UAAU,CAAC,KAAI,KAAM,KAAK,CAAA;QACxE;AAEA;;;;;;;;;;AAUE;AACF,QAAA,SAAS,iBAAiB,GAAA;AACxB,YAAA,MAAM,YAAY;gBAChB,WAAW,EAAE,WAAW,CAAC,KAAK;gBAC9B,OAAO,EAAE,OAAO,CAAC,KAAK;gBACtB,iBAAiB;aACnB;YACA,OAAO,WAAW,CAAC,KAAK,CAAC,MAAK,GAAI,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA,GAAI,EAAC;QACrE;AAEA;AAC+E;AAC/E,QAAA,MAAM,cAAa,GAAI,EAAE,WAAU,EAAE;AACrC,QAAA,QAAQ,KAAK,CAAC,OAAM,GAAI,iBAAgB,GAAI,cAAc;IAC5D,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"semantic-queries.vue2.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-if=\"suggestions.length\"\n    v-slot=\"baseSuggestionsScope\"\n    class=\"x-semantic-queries\"\n    :suggestions=\"suggestions\"\n  >\n    <!--\n      @slot Semantic Query content\n      @binding {{suggestion: object - Suggestion data, index: number - Suggestion index}} v-bind\n        BaseSuggestion bindings\n    -->\n    <slot name=\"suggestion\" v-bind=\"baseSuggestionsScope\">\n      <SemanticQuery v-slot=\"baseSuggestionScope\" :suggestion=\"baseSuggestionsScope.suggestion\">\n        <!--\n          @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the\n            suggestion belongs to}} v-bind SemanticQuery bindings\n        -->\n        <slot name=\"suggestion-content\" v-bind=\"baseSuggestionScope\" />\n      </SemanticQuery>\n    </slot>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useState } from '../../../composables'\nimport { semanticQueriesXModule } from '../x-module'\nimport SemanticQuery from './semantic-query.vue'\n\n/**\n * Retrieves a list of semantic queries from the state and exposes them in the slots.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SemanticQueries',\n  xModule: semanticQueriesXModule.name,\n  components: { BaseSuggestions, SemanticQuery },\n  setup(_, { slots }) {\n    /** The semantic queries from the state. */\n    const suggestions = useState('semanticQueries').semanticQueries\n\n    /**\n     * Maps the list of semantic queries to a list of queries, to make it compatible with\n     * other components.\n     */\n    const queries = computed(() => suggestions.value.map(suggestion => suggestion.query))\n\n    /**\n     * Finds a {@link @empathyco/x-types#Suggestion} given a query.\n     *\n     * @param query - The query to search.\n     * @returns The {@link @empathyco/x-types#Suggestion} or undefined if not found.\n     */\n    function findSemanticQuery(query: string) {\n      return suggestions.value.find(suggestion => suggestion.query === query)\n    }\n\n    /**\n     * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     * If there are no suggestions, nothing is rendered.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `default` slot or empty string if there are\n     * no suggestions.\n     */\n    function renderDefaultSlot() {\n      const slotProps = {\n        suggestions: suggestions.value,\n        queries: queries.value,\n        findSemanticQuery,\n      }\n      return suggestions.value.length ? slots.default?.(slotProps)[0] : ''\n    }\n\n    /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { suggestions }\n    return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nBy default, the `SemanticQueries` component will render a list of semantic queries.\n\n```vue\n<template>\n  <SemanticQueries />\n</template>\n\n<script setup>\nimport { SemanticQueries } from '@empathyco/x-components/semantic-queries'\n</script>\n```\n\n### Play with props\n\nThe component has the following props:\n\n- `maxItemsToRender` to limit the number of semantic queries to render.\n- `animation` to specify the animation to be used to animate the semantic queries.\n\n```vue live\n<template>\n  <SemanticQueries :animation=\"animation\" :maxItemsToRender=\"3\" />\n</template>\n\n<script setup>\nimport { SemanticQueries } from '@empathyco/x-components/semantic-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\nconst animation = FadeAndSlide\n</script>\n```\n\n### Play with the default slot\n\nThe default slot is used to overwrite the whole content of the component.\n\n```vue live\n<template>\n  <SemanticQueries #default=\"{ suggestions }\">\n    <section>\n      <SlidingPanel>\n        <div v-for=\"suggestion in suggestions\" :key=\"suggestion.query\">\n          {{ suggestion.query }}\n          {{ suggestion.distance }}\n        </div>\n      </SlidingPanel>\n    </section>\n  </SemanticQueries>\n</template>\n\n<script setup>\nimport { SemanticQueries } from '@empathyco/x-components/semantic-queries'\nimport { SlidingPanel } from '@empathyco/x-components'\n</script>\n```\n\nThe default slot also exposes an array of semantic queries mapped to strings, and a method to find a\nsemantic query given a string query.\n\nThis is useful if you need an array of string queries, but also need to retrieve the original\nsemantic query to use it in another element.\n\n```vue live\n<template>\n  <SemanticQueries #default=\"{ queries, findSemanticQuery }\">\n    <section>\n      <QueryPreviewList :queries=\"queries\" #slot=\"{ query, results }\">\n        <div>\n          <SemanticQuery :suggestion=\"findSemanticQuery(query)\" #default=\"{ suggestion }\">\n            {{ suggestion.query }} ({{ suggestion.distance }})\n          </SemanticQuery>\n          <ul>\n            <li v-for=\"result in results\" :key=\"result.id\">\n              {{ result.name }}\n            </li>\n          </ul>\n        </div>\n      </QueryPreviewList>\n    </section>\n  </SemanticQueries>\n</template>\n\n<script setup>\nimport { SemanticQueries, SemanticQuery } from '@empathyco/x-components/semantic-queries'\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\n</script>\n```\n\n### Play with the suggestion slot\n\nThe suggestion slot can be used to override each semantic query item.\n\nIn this example, the query will be rendered along with the distance.\n\n```vue live\n<template>\n  <SemanticQueries #suggestion=\"{ suggestion: { query, distance } }\">\n    <span>\n      ({{ distance }})\n      {{ query }}\n    </span>\n  </SemanticQueries>\n</template>\n\n<script setup>\nimport { SemanticQueries } from '@empathyco/x-components/semantic-queries'\n</script>\n```\n\n### Play with the suggestion-content slot\n\nThe suggestion-content slot can be used to override only the content, but keep using the\nSemanticQuery component internally.\n\n```vue live\n<template>\n  <SemanticQueries #suggestion-content=\"{ suggestion: { query, distance } }\">\n    <span>\n      ({{ distance }})\n      {{ query }}\n    </span>\n  </SemanticQueries>\n</template>\n\n<script setup>\nimport { SemanticQueries } from '@empathyco/x-components/semantic-queries'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgCA;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,sBAAsB,CAAC,IAAI;AACpC,IAAA,UAAU,EAAE,EAAE,eAAe,EAAE,eAAe;AAC9C,IAAA,KAAK,CAAC,CAAC,EAAE,EAAE,KAAI,EAAG,EAAA;;QAEhB,MAAM,WAAU,GAAI,QAAQ,CAAC,iBAAiB,CAAC,CAAC,eAAc;AAE9D;;;AAGE;QACF,MAAM,OAAM,GAAI,QAAQ,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,UAAS,IAAK,UAAU,CAAC,KAAK,CAAC,CAAA;AAEpF;;;;;AAKE;QACF,SAAS,iBAAiB,CAAC,KAAa,EAAA;AACtC,YAAA,OAAO,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,UAAS,IAAK,UAAU,CAAC,KAAI,KAAM,KAAK,CAAA;QACxE;AAEA;;;;;;;;;;AAUE;AACF,QAAA,SAAS,iBAAiB,GAAA;AACxB,YAAA,MAAM,YAAY;gBAChB,WAAW,EAAE,WAAW,CAAC,KAAK;gBAC9B,OAAO,EAAE,OAAO,CAAC,KAAK;gBACtB,iBAAiB;aACnB;YACA,OAAO,WAAW,CAAC,KAAK,CAAC,MAAK,GAAI,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA,GAAI,EAAC;QACrE;AAEA;AAC+E;AAC/E,QAAA,MAAM,cAAa,GAAI,EAAE,WAAU,EAAE;AACrC,QAAA,QAAQ,KAAK,CAAC,OAAM,GAAI,iBAAgB,GAAI,cAAc;IAC5D,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/tagging/service/external-tagging.service.js

@@ -1,9 +1,4 @@
 import { BrowserStorageService } from '@empathyco/x-utils';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
 import { XPlugin } from '../../../plugins/x-plugin.js';
 

package/js/x-modules/tagging/service/external-tagging.service.js.map

@@ -1 +1 @@
-{"version":3,"file":"external-tagging.service.js","sources":["../../../../../src/x-modules/tagging/service/external-tagging.service.ts"],"sourcesContent":["import type { Result } from '@empathyco/x-types'\nimport type { StorageService } from '@empathyco/x-utils'\nimport type { Store } from 'vuex'\nimport type { RootXStoreState } from '../../../store/index'\nimport type { ExternalTaggingService } from './types'\nimport { BrowserStorageService } from '@empathyco/x-utils'\nimport { XPlugin } from '../../../plugins/index'\n\n/**\n * Default implementation for the {@link ExternalTaggingService}.\n *\n * @public\n */\nexport class DefaultExternalTaggingService implements ExternalTaggingService {\n  /**\n   * Session id key to use as key in the storage for result clicks.\n   *\n   * @public\n   */\n  public static readonly RESULT_CLICKED_ID_KEY = 'add-to-cart'\n\n  /**\n   * Session id key to use as key in the storage for add to carts.\n   *\n   * @public\n   */\n  public static readonly ADD_TO_CART_ID_KEY = 'checkout'\n\n  /**\n   * Global instance of the {@link ExternalTaggingService}.\n   */\n  public static instance: ExternalTaggingService = new DefaultExternalTaggingService()\n\n  public constructor(\n    protected localStorageService: StorageService = new BrowserStorageService(localStorage, 'x'),\n    protected sessionStorageService: StorageService = new BrowserStorageService(\n      sessionStorage,\n      'x',\n    ),\n  ) {}\n\n  protected get store(): Store<RootXStoreState> {\n    return XPlugin.store\n  }\n\n  protected get storageKey(): string {\n    return this.store.state.x.tagging.config.storageKey as string\n  }\n\n  protected get storageTTLMs(): number {\n    return this.store.state.x.tagging.config.storageTTLMs as number\n  }\n\n  /**\n   * Stores in the local storage the information from the Result clicked by the user\n   * in order to be able to track the add to cart later on the result's PDP.\n   *\n   * @param result - The result to store.\n   *\n   * @public\n   */\n  storeResultClicked(result: Result): void {\n    const key = result[this.storageKey as keyof Result] as string\n    const storageId = this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, key)\n    if (storageId) {\n      this.localStorageService.setItem(storageId, result, this.storageTTLMs)\n    }\n  }\n\n  /**\n   * Stores in the local storage the information from the Result added to the cart\n   * by the user in order to be able to track the checkout later on when the checkout\n   * process has been completed by shopper.\n   *\n   * @param result - The result to store.\n   *\n   * @public\n   */\n  storeAddToCart(result: Result): void {\n    const key = result[this.storageKey as keyof Result] as string\n    const storageId = this.getStorageId(DefaultExternalTaggingService.ADD_TO_CART_ID_KEY, key)\n    if (storageId) {\n      this.localStorageService.setItem(storageId, result, this.storageTTLMs)\n    }\n  }\n\n  /**\n   * Checks if the local storage contains a result information for the given id and moves\n   * the result info from the local storage to the session storage.\n   *\n   * @param id - The id of the result to move to the session storage.\n   *\n   * @public\n   */\n  moveToSessionStorage(id?: string): void {\n    const storageId = this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, id)\n    if (storageId) {\n      // eslint-disable-next-line ts/no-unsafe-assignment\n      const result = this.localStorageService.removeItem(storageId)\n      if (result) {\n        this.sessionStorageService.setItem(storageId, result)\n      }\n    }\n  }\n\n  /**\n   * Checks if the session storage contains a result information for a given id or the current url.\n   * If exists, it tracks the add to cart and saves the add to cart information into session\n   * storage.\n   *\n   * @param id - The id of the result to track.\n   *\n   * @public\n   */\n  trackAddToCart(id?: string): void {\n    const storageId =\n      this.storageKey === 'url'\n        ? this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY)\n        : this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, id)\n    if (storageId) {\n      const result = this.sessionStorageService.getItem<Result>(storageId)\n      if (result?.tagging?.add2cart) {\n        result.tagging.add2cart.params.location = 'pdp'\n        void this.store.dispatch('x/tagging/track', result.tagging.add2cart)\n        /**\n         * Done after tracking the add to cart to avoid tracking the checkout without\n         * an add to cart, in case the tracking fails.\n         */\n        this.storeAddToCart(result)\n      }\n    }\n  }\n\n  /**\n   * Calculates the browser storage key for the given id.\n   *\n   * @param keyPrefix - The key prefix to use in the storage.\n   * @param id - The id to be used for the storage key.\n   *\n   * @returns The complete key to be used for storage.\n   *\n   * @internal\n   */\n  protected getStorageId(keyPrefix: string, id?: string): string | null {\n    if (this.storageKey === 'url') {\n      let url = id ?? window.location.href\n      url = url.replace(/\\s|\\+/g, '%20')\n      const pathName = this.getPathName(url)\n      return `${keyPrefix}-${pathName}`\n    } else if (id) {\n      return `${keyPrefix}-${id}`\n    } else {\n      this.showWarningMessage()\n      return null\n    }\n  }\n\n  /**\n   * Logs a warning message in case the tracking cannot be done.\n   *\n   * @internal\n   */\n  protected showWarningMessage(): void {\n    if (this.storageKey !== 'url') {\n      console.warn('No product id was provided but the storage was not configured to use the url')\n    }\n  }\n\n  /**\n   * Returns the pathname for a given url.\n   *\n   * @param url - The url to get the pathname from.\n   *\n   * @returns The pathname of the url.\n   *\n   * @internal\n   */\n  protected getPathName(url: string): string {\n    let urlObject: URL\n    try {\n      // Check if the url is relative or absolute path\n      // eslint-disable-next-line regexp/no-unused-capturing-group\n      if (/^(\\.\\.\\/|\\.\\/|\\/)/.test(url)) {\n        urlObject = new URL(url, location.origin)\n      } else {\n        urlObject = new URL(url)\n      }\n      return urlObject.pathname\n      // eslint-disable-next-line unused-imports/no-unused-vars\n    } catch (_error) {\n      console.warn(`There was a problem with url ${url}`)\n      return url\n    }\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"external-tagging.service.js","sources":["../../../../../src/x-modules/tagging/service/external-tagging.service.ts"],"sourcesContent":["import type { Result } from '@empathyco/x-types'\nimport type { StorageService } from '@empathyco/x-utils'\nimport type { Store } from 'vuex'\nimport type { RootXStoreState } from '../../../store/index'\nimport type { ExternalTaggingService } from './types'\nimport { BrowserStorageService } from '@empathyco/x-utils'\nimport { XPlugin } from '../../../plugins/index'\n\n/**\n * Default implementation for the {@link ExternalTaggingService}.\n *\n * @public\n */\nexport class DefaultExternalTaggingService implements ExternalTaggingService {\n  /**\n   * Session id key to use as key in the storage for result clicks.\n   *\n   * @public\n   */\n  public static readonly RESULT_CLICKED_ID_KEY = 'add-to-cart'\n\n  /**\n   * Session id key to use as key in the storage for add to carts.\n   *\n   * @public\n   */\n  public static readonly ADD_TO_CART_ID_KEY = 'checkout'\n\n  /**\n   * Global instance of the {@link ExternalTaggingService}.\n   */\n  public static instance: ExternalTaggingService = new DefaultExternalTaggingService()\n\n  public constructor(\n    protected localStorageService: StorageService = new BrowserStorageService(localStorage, 'x'),\n    protected sessionStorageService: StorageService = new BrowserStorageService(\n      sessionStorage,\n      'x',\n    ),\n  ) {}\n\n  protected get store(): Store<RootXStoreState> {\n    return XPlugin.store\n  }\n\n  protected get storageKey(): string {\n    return this.store.state.x.tagging.config.storageKey as string\n  }\n\n  protected get storageTTLMs(): number {\n    return this.store.state.x.tagging.config.storageTTLMs as number\n  }\n\n  /**\n   * Stores in the local storage the information from the Result clicked by the user\n   * in order to be able to track the add to cart later on the result's PDP.\n   *\n   * @param result - The result to store.\n   *\n   * @public\n   */\n  storeResultClicked(result: Result): void {\n    const key = result[this.storageKey as keyof Result] as string\n    const storageId = this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, key)\n    if (storageId) {\n      this.localStorageService.setItem(storageId, result, this.storageTTLMs)\n    }\n  }\n\n  /**\n   * Stores in the local storage the information from the Result added to the cart\n   * by the user in order to be able to track the checkout later on when the checkout\n   * process has been completed by shopper.\n   *\n   * @param result - The result to store.\n   *\n   * @public\n   */\n  storeAddToCart(result: Result): void {\n    const key = result[this.storageKey as keyof Result] as string\n    const storageId = this.getStorageId(DefaultExternalTaggingService.ADD_TO_CART_ID_KEY, key)\n    if (storageId) {\n      this.localStorageService.setItem(storageId, result, this.storageTTLMs)\n    }\n  }\n\n  /**\n   * Checks if the local storage contains a result information for the given id and moves\n   * the result info from the local storage to the session storage.\n   *\n   * @param id - The id of the result to move to the session storage.\n   *\n   * @public\n   */\n  moveToSessionStorage(id?: string): void {\n    const storageId = this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, id)\n    if (storageId) {\n      // eslint-disable-next-line ts/no-unsafe-assignment\n      const result = this.localStorageService.removeItem(storageId)\n      if (result) {\n        this.sessionStorageService.setItem(storageId, result)\n      }\n    }\n  }\n\n  /**\n   * Checks if the session storage contains a result information for a given id or the current url.\n   * If exists, it tracks the add to cart and saves the add to cart information into session\n   * storage.\n   *\n   * @param id - The id of the result to track.\n   *\n   * @public\n   */\n  trackAddToCart(id?: string): void {\n    const storageId =\n      this.storageKey === 'url'\n        ? this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY)\n        : this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, id)\n    if (storageId) {\n      const result = this.sessionStorageService.getItem<Result>(storageId)\n      if (result?.tagging?.add2cart) {\n        result.tagging.add2cart.params.location = 'pdp'\n        void this.store.dispatch('x/tagging/track', result.tagging.add2cart)\n        /**\n         * Done after tracking the add to cart to avoid tracking the checkout without\n         * an add to cart, in case the tracking fails.\n         */\n        this.storeAddToCart(result)\n      }\n    }\n  }\n\n  /**\n   * Calculates the browser storage key for the given id.\n   *\n   * @param keyPrefix - The key prefix to use in the storage.\n   * @param id - The id to be used for the storage key.\n   *\n   * @returns The complete key to be used for storage.\n   *\n   * @internal\n   */\n  protected getStorageId(keyPrefix: string, id?: string): string | null {\n    if (this.storageKey === 'url') {\n      let url = id ?? window.location.href\n      url = url.replace(/\\s|\\+/g, '%20')\n      const pathName = this.getPathName(url)\n      return `${keyPrefix}-${pathName}`\n    } else if (id) {\n      return `${keyPrefix}-${id}`\n    } else {\n      this.showWarningMessage()\n      return null\n    }\n  }\n\n  /**\n   * Logs a warning message in case the tracking cannot be done.\n   *\n   * @internal\n   */\n  protected showWarningMessage(): void {\n    if (this.storageKey !== 'url') {\n      console.warn('No product id was provided but the storage was not configured to use the url')\n    }\n  }\n\n  /**\n   * Returns the pathname for a given url.\n   *\n   * @param url - The url to get the pathname from.\n   *\n   * @returns The pathname of the url.\n   *\n   * @internal\n   */\n  protected getPathName(url: string): string {\n    let urlObject: URL\n    try {\n      // Check if the url is relative or absolute path\n      // eslint-disable-next-line regexp/no-unused-capturing-group\n      if (/^(\\.\\.\\/|\\.\\/|\\/)/.test(url)) {\n        urlObject = new URL(url, location.origin)\n      } else {\n        urlObject = new URL(url)\n      }\n      return urlObject.pathname\n      // eslint-disable-next-line unused-imports/no-unused-vars\n    } catch (_error) {\n      console.warn(`There was a problem with url ${url}`)\n      return url\n    }\n  }\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/url/x-module.js

@@ -1,10 +1,5 @@
-import '@vue/devtools-api';
-import '../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../plugins/devtools/colors.utils.js';
 import '../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import { XPlugin } from '../../plugins/x-plugin.js';
 import { urlEmitters } from './store/emitters.js';
 import { urlXStoreModule } from './store/module.js';

package/js/x-modules/url/x-module.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/url/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { UrlXStoreModule } from './store'\nimport { XPlugin } from '../../plugins/index'\nimport { urlEmitters, urlXStoreModule } from './store'\nimport { urlWiring } from './wiring'\n\n/**\n * URL {@link XModule} alias.\n *\n * @public\n */\nexport type UrlXModule = XModule<UrlXStoreModule>\n\n/**\n * URL {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `url` entry point.\n *\n * @public\n */\nexport const urlXModule: UrlXModule = {\n  name: 'url',\n  storeModule: urlXStoreModule,\n  storeEmitters: urlEmitters,\n  wiring: urlWiring,\n}\n\nXPlugin.registerXModule(urlXModule)\n"],"names":[],"mappings":";;;;;;;;;;;;AAaA;;;;;AAKG;AACI,MAAM,UAAU,GAAe;AACpC,IAAA,IAAI,EAAE,KAAK;AACX,IAAA,WAAW,EAAE,eAAe;AAC5B,IAAA,aAAa,EAAE,WAAW;AAC1B,IAAA,MAAM,EAAE,SAAS;;AAGnB,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/url/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { UrlXStoreModule } from './store'\nimport { XPlugin } from '../../plugins/index'\nimport { urlEmitters, urlXStoreModule } from './store'\nimport { urlWiring } from './wiring'\n\n/**\n * URL {@link XModule} alias.\n *\n * @public\n */\nexport type UrlXModule = XModule<UrlXStoreModule>\n\n/**\n * URL {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `url` entry point.\n *\n * @public\n */\nexport const urlXModule: UrlXModule = {\n  name: 'url',\n  storeModule: urlXStoreModule,\n  storeEmitters: urlEmitters,\n  wiring: urlWiring,\n}\n\nXPlugin.registerXModule(urlXModule)\n"],"names":[],"mappings":";;;;;;;AAaA;;;;;AAKG;AACI,MAAM,UAAU,GAAe;AACpC,IAAA,IAAI,EAAE,KAAK;AACX,IAAA,WAAW,EAAE,eAAe;AAC5B,IAAA,aAAa,EAAE,WAAW;AAC1B,IAAA,MAAM,EAAE,SAAS;;AAGnB,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC;;;;"}

package/next-queries/index.d.ts

@@ -1 +1 @@
-export * from '../types/x-modules/next-queries';
+export * from '../types/src/x-modules/next-queries';