@empathyco/x-components 6.0.0-alpha.6 → 6.0.0-alpha.60

package/js/x-modules/search-box/components/search-button.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-button.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    @click=\"emitEvents\"\n    class=\"x-search-button x-button\"\n    :class=\"dynamicClasses\"\n    data-test=\"search-button\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot><span class=\"x-icon\">⌕</span></slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders a button to submit the query.\n   *\n   * @remarks\n   * If query is not empty, it emits {@link XEventsTypes.UserAcceptedAQuery} and\n   * {@link SearchBoxXEvents.UserPressedSearchButton} events with the query as payload.\n   * It also adds `x-search-button--has-empty-query` as class when there is no query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SearchButton',\n    xModule: searchBoxXModule.name,\n    setup: function () {\n      const $x = use$x();\n\n      const buttonRef = ref<HTMLElement | null>(null);\n\n      const query: ComputedRef<string> = useState('searchBox', ['query']).query;\n\n      const isQueryEmpty = computed(() => query.value.length === 0);\n\n      const dynamicClasses = computed<VueCSSClasses>(() => ({\n        'x-search-button--has-empty-query': isQueryEmpty.value\n      }));\n\n      /**\n       * Generates the {@link WireMetadata} object omitting the moduleName.\n       *\n       * @returns The {@link WireMetadata} object omitting the moduleName.\n       * @internal\n       */\n      function createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n        return {\n          target: buttonRef.value,\n          feature: 'search_box'\n        };\n      }\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      function emitEvents() {\n        if (!isQueryEmpty.value) {\n          $x.emit('UserAcceptedAQuery', query.value, createEventMetadata());\n          $x.emit('UserPressedSearchButton', query.value, createEventMetadata());\n        }\n      }\n\n      return {\n        dynamicClasses,\n        buttonRef,\n        emitEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`]https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedSearchButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n<!-- prettier-ignore-start -->\n:::warning\nNote that no events are emitted if the query is empty.\n:::\n<!-- prettier-ignore-end -->\n\n## Dynamic classes\n\n`SearchButton` uses the `x-search-button--has-empty-query` dynamic CSS class to modify the HTML\nbutton style when the query is empty.\n\n## See it in action\n\nIn this example, a clickable button is rendered.\n\n_Click the Search button to try it out!_\n\n```vue live\n<template>\n  <SearchButton />\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nHere text is passed in the default slot instead of an icon to customize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <SearchButton>Search</SearchButton>\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedSearchButton` event has been implemented so that when you enter a\nsearch term and click the Search button, the search term is displayed as a message.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton\n        @UserPressedSearchButton=\"\n          query => {\n            message = query;\n          }\n        \"\n      />\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchButton` component\ncommunicates with the [`SearchInput`](./search-input.md) to submit the query. In this example, when\nyou enter a search term and click the Search button, the “Looking for results” message is displayed.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton @UserAcceptedAQuery=\"message = 'looking for results'\">Search</SearchButton>\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchButton, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton,\n      SearchInput\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_renderSlot"],"mappings":";;;;;;;;;;;SAEQ,WAAW,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACdA,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MACR,GAAK,EAAA,WAAA;AAAA,MAEL,gBAAU,CAAe,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,0BAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAEzB,MAAA,WAAA,EAAA,eAAA;AAAA,KAAA;AACA,IAAA;AAAA,MAAmCC,kBAAA,CAAA,0DAAA,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA;;;;;;;;;;;;"}
+{"version":3,"file":"search-button.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    @click=\"emitEvents\"\n    class=\"x-search-button x-button\"\n    :class=\"dynamicClasses\"\n    data-test=\"search-button\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot><span class=\"x-icon\">⌕</span></slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders a button to submit the query.\n   *\n   * @remarks\n   * If query is not empty, it emits {@link XEventsTypes.UserAcceptedAQuery} and\n   * {@link SearchBoxXEvents.UserPressedSearchButton} events with the query as payload.\n   * It also adds `x-search-button--has-empty-query` as class when there is no query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SearchButton',\n    xModule: searchBoxXModule.name,\n    setup: function () {\n      const $x = use$x();\n\n      const buttonRef = ref<HTMLElement | null>(null);\n\n      const query: ComputedRef<string> = useState('searchBox', ['query']).query;\n\n      const isQueryEmpty = computed(() => query.value.length === 0);\n\n      const dynamicClasses = computed<VueCSSClasses>(() => ({\n        'x-search-button--has-empty-query': isQueryEmpty.value\n      }));\n\n      /**\n       * Generates the {@link WireMetadata} object omitting the moduleName.\n       *\n       * @returns The {@link WireMetadata} object omitting the moduleName.\n       * @internal\n       */\n      function createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n        return {\n          target: buttonRef.value,\n          feature: 'search_box'\n        };\n      }\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      function emitEvents() {\n        if (!isQueryEmpty.value) {\n          $x.emit('UserAcceptedAQuery', query.value, createEventMetadata());\n          $x.emit('UserPressedSearchButton', query.value, createEventMetadata());\n        }\n      }\n\n      return {\n        dynamicClasses,\n        buttonRef,\n        emitEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`]https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedSearchButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n<!-- prettier-ignore-start -->\n:::warning\nNote that no events are emitted if the query is empty.\n:::\n<!-- prettier-ignore-end -->\n\n## Dynamic classes\n\n`SearchButton` uses the `x-search-button--has-empty-query` dynamic CSS class to modify the HTML\nbutton style when the query is empty.\n\n## See it in action\n\nIn this example, a clickable button is rendered.\n\n_Click the Search button to try it out!_\n\n```vue live\n<template>\n  <SearchButton />\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nHere text is passed in the default slot instead of an icon to customize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <SearchButton>Search</SearchButton>\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedSearchButton` event has been implemented so that when you enter a\nsearch term and click the Search button, the search term is displayed as a message.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton\n        @UserPressedSearchButton=\"\n          query => {\n            message = query;\n          }\n        \"\n      />\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchButton` component\ncommunicates with the [`SearchInput`](./search-input.md) to submit the query. In this example, when\nyou enter a search term and click the Search button, the “Looking for results” message is displayed.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton @UserAcceptedAQuery=\"message = 'looking for results'\">Search</SearchButton>\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchButton, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton,\n      SearchInput\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass"],"mappings":";;;;;;;;;;;SAEQ,WAAW,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACdA,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MACR,GAAK,EAAA,WAAA;AAAA,MAEL,gBAAU,CAAe,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,0BAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;MAGzB,WAA0C,EAAA,eAAA;AAAA,KAAA;;;;;;;;;;;;;;"}

package/js/x-modules/search-box/store/emitters.js

@@ -1,3 +1,4 @@
+import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { isStringEmpty } from '../../../utils/string.js';
 import { searchBoxXStoreModule } from './module.js';

package/js/x-modules/search-box/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/search-box/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { isStringEmpty } from '../../../utils/string';\nimport { searchBoxXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the search-box module.\n *\n * @internal\n */\nexport const searchBoxEmitters = createStoreEmitters(searchBoxXStoreModule, {\n  SearchBoxQueryChanged: (_, getters) => getters.trimmedQuery,\n  UserClearedQuery: { selector: state => state.query, filter: isStringEmpty }\n});\n"],"names":[],"mappings":";;;;AAIA;;;;AAIG;AACU,MAAA,iBAAiB,GAAG,mBAAmB,CAAC,qBAAqB,EAAE;IAC1E,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,YAAY;AAC3D,IAAA,gBAAgB,EAAE,EAAE,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE;AAC5E,CAAA;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/search-box/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { isStringEmpty } from '../../../utils/string';\nimport { searchBoxXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the search-box module.\n *\n * @internal\n */\nexport const searchBoxEmitters = createStoreEmitters(searchBoxXStoreModule, {\n  SearchBoxQueryChanged: (_, getters) => getters.trimmedQuery,\n  UserClearedQuery: { selector: state => state.query, filter: isStringEmpty }\n});\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AACU,MAAA,iBAAiB,GAAG,mBAAmB,CAAC,qBAAqB,EAAE;IAC1E,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,YAAY;AAC3D,IAAA,gBAAgB,EAAE,EAAE,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE;AAC5E,CAAA;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './semantic-queries.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createVNode } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps, createVNode, createCommentVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11,13 +11,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     suggestions: _ctx.suggestions
   }, {
     default: withCtx((baseSuggestionsScope) => [
-      createCommentVNode("\n      @slot Semantic Query content\n      @binding {{suggestion: object - Suggestion data, index: number - Suggestion index}} v-bind\n        BaseSuggestion bindings\n    "),
       renderSlot(_ctx.$slots, "suggestion", normalizeProps(guardReactiveProps(baseSuggestionsScope)), () => [
         createVNode(_component_SemanticQuery, {
           suggestion: baseSuggestionsScope.suggestion
         }, {
           default: withCtx((baseSuggestionScope) => [
-            createCommentVNode("\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        "),
             renderSlot(_ctx.$slots, "suggestion-content", normalizeProps(guardReactiveProps(baseSuggestionScope)))
           ]),
           _: 2

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

@@ -1 +1 @@
-{"version":3,"file":"semantic-queries.vue.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-if=\"suggestions.length\"\n    class=\"x-semantic-queries\"\n    :suggestions=\"suggestions\"\n    #default=\"baseSuggestionsScope\"\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 :suggestion=\"baseSuggestionsScope.suggestion\" #default=\"baseSuggestionScope\">\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\">\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { Suggestion } from '@empathyco/x-types';\n  import { semanticQueriesXModule } from '../x-module';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { useState } from '../../../composables';\n  import 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   */\n  export 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: ComputedRef<Suggestion[]> = useState('semanticQueries', [\n        'semanticQueries'\n      ]).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>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueriesDemo',\n    components: {\n      SemanticQueries\n    }\n  };\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>\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'SemanticQueriesPropsDemo',\n    data() {\n      return {\n        animation: FadeAndSlide\n      };\n    }\n  };\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\">\n          {{ suggestion.query }}\n          {{ suggestion.distance }}\n        </div>\n      </SlidingPanel>\n    </section>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SemanticQueriesDefaultSlotDemo',\n    components: {\n      SemanticQueries,\n      SlidingPanel\n    }\n  };\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 :semanticQuery=\"findSemanticQuery(query)\" #default=\"{ query }\">\n            {{ query.query }} ({{ query.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>\n  import { SemanticQueries, SemanticQuery } from '@empathyco/x-components/semantic-queries';\n  import { QueryPreviewList } from '@empathyco/x-components/queries-preview';\n\n  export default {\n    name: 'SemanticQueriesDefaultSlotDemo2',\n    components: {\n      SemanticQueries,\n      SemanticQuery,\n      QueryPreviewList\n    }\n  };\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>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  export default {\n    name: 'SemanticQueriesItemSlotDemo',\n    components: {\n      SemanticQueries\n    }\n  };\n</script>\n```\n\n### Play with the suggestion content slot\n\nThe suggsetion 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>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  export default {\n    name: 'SemanticQueriesItemSlotDemo',\n    components: {\n      SemanticQueries\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode"],"mappings":";;;;;;AAE4B,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAF5B,EAAA,OAAA,IAAA,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAG8B,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACzB,GAAA,EAAA,CAAA;AAAA,IAAA,KAAA,EAAA,oBAAA;AACA,IAAA,WAAA,EAAO,IAER,CAAA,WAAA;AAAA,GAAA,EAAA;AAKA,IAAA,OAAA,EAAAC,OAAA,CASO,CArBX,oBAAA,KAAA;AAAA,MAoBsBC,kBAAA,CAAA,+KAAA,CAAA;AAAA,MAPAC,UAAA,CAAA,IAAA,CAAY,sBAAqBC,cAAU,CAAAC,kBAAA,CAAA,oBAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CAAA,wBAAA,EAAA;AAAG,UAAA,UAAA,EAAO,oBAAE,CAAA,UAAA;AAAA,SAAA,EAAA;mBAMrEL,OAA+D,CAAA,CAAA,mBAAA,KAAA;AAAA,YAAAC,kBAAA,CAAA,sNAAA,CAAA;AAnBvE,YAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,mBAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,aAAA,CAAA,CAAA,IAAAH,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"semantic-queries.vue.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-if=\"suggestions.length\"\n    class=\"x-semantic-queries\"\n    :suggestions=\"suggestions\"\n    #default=\"baseSuggestionsScope\"\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 :suggestion=\"baseSuggestionsScope.suggestion\" #default=\"baseSuggestionScope\">\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\">\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { Suggestion } from '@empathyco/x-types';\n  import { semanticQueriesXModule } from '../x-module';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { useState } from '../../../composables';\n  import 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   */\n  export 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: ComputedRef<Suggestion[]> = useState('semanticQueries', [\n        'semanticQueries'\n      ]).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>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueriesDemo',\n    components: {\n      SemanticQueries\n    }\n  };\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>\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'SemanticQueriesPropsDemo',\n    data() {\n      return {\n        animation: FadeAndSlide\n      };\n    }\n  };\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\">\n          {{ suggestion.query }}\n          {{ suggestion.distance }}\n        </div>\n      </SlidingPanel>\n    </section>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SemanticQueriesDefaultSlotDemo',\n    components: {\n      SemanticQueries,\n      SlidingPanel\n    }\n  };\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 :semanticQuery=\"findSemanticQuery(query)\" #default=\"{ query }\">\n            {{ query.query }} ({{ query.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>\n  import { SemanticQueries, SemanticQuery } from '@empathyco/x-components/semantic-queries';\n  import { QueryPreviewList } from '@empathyco/x-components/queries-preview';\n\n  export default {\n    name: 'SemanticQueriesDefaultSlotDemo2',\n    components: {\n      SemanticQueries,\n      SemanticQuery,\n      QueryPreviewList\n    }\n  };\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>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  export default {\n    name: 'SemanticQueriesItemSlotDemo',\n    components: {\n      SemanticQueries\n    }\n  };\n</script>\n```\n\n### Play with the suggestion content slot\n\nThe suggsetion 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>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  export default {\n    name: 'SemanticQueriesItemSlotDemo',\n    components: {\n      SemanticQueries\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode","_createCommentVNode"],"mappings":";;;;;;AAE4B,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAF5B,EAAA,OAAA,IAAA,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAG8B,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACzB,GAAA,EAAA,CAAA;AAAA,IAAA,KAAA,EAAA,oBAAA;AACA,IAAA,WAAA,EAAO,IAOR,CAAA,WAAA;AAAA,GAAA,EAAA;aACEC,OAOgB,CAAA,CAAA,oBAAA,KAAA;AAAA,MAPAC,UAAA,CAAA,IAAA,CAAY,sBAAqBC,cAAU,CAAAC,kBAAA,CAAA,oBAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CAAA,wBAAA,EAAA;AAAG,UAAA,UAAA,EAAO,oBAAE,CAAA,UAAA;AAAA,SAAA,EAAA;;AAb7E,YAAAH,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,mBAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,aAAA,CAAA,CAAA,IAAAE,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/semantic-queries/components/semantic-query.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './semantic-query.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -12,9 +12,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-test": "semantic-query"
   }, {
     default: withCtx((baseScope) => [
-      createCommentVNode(" eslint-disable max-len "),
-      createCommentVNode("\n      @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}} v-bind BaseSuggestion bindings\n    "),
-      createCommentVNode(" eslint-enable max-len "),
       renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ ...baseScope })))
     ]),
     _: 3

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

@@ -1 +1 @@
-{"version":3,"file":"semantic-query.vue.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-query.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    :query=\"query\"\n    :suggestion=\"suggestion\"\n    :suggestionSelectedEvents=\"suggestionSelectedEvents\"\n    feature=\"semantics\"\n    data-test=\"semantic-query\"\n    #default=\"baseScope\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n      @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}} v-bind BaseSuggestion bindings\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { SemanticQuery } from '@empathyco/x-types';\n  import { semanticQueriesXModule } from '../x-module';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { useGetter } from '../../../composables/use-getter';\n\n  /**\n   * This component renders a semantic query. A semantic query is a recommended query\n   * that is similar in its meaning to another one.\n   * It contains the query and the distance, which indicates how similar the query is\n   * compared to the searched query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SemanticQuery',\n    xModule: semanticQueriesXModule.name,\n    components: { BaseSuggestion },\n    props: {\n      /** The {@link @empathyco/x-types#SemanticQuery} to render. */\n      suggestion: {\n        type: Object as PropType<SemanticQuery>,\n        required: true\n      }\n    },\n    setup(props) {\n      /** The normalized query of the semantic queries module. */\n      const query = useGetter('semanticQueries', ['normalizedQuery']).normalizedQuery;\n\n      /** The list of events that are going to be emitted when the button is pressed. */\n      const suggestionSelectedEvents = {\n        UserSelectedASemanticQuery: props.suggestion\n      };\n\n      return {\n        query,\n        suggestionSelectedEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedASemanticQuery`](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 semantic query button. The event payload is the\n  semantic query data.\n\n## See it in action\n\nHere you can see that the semantic query query is rendered.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" />\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemo',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, we add the distance of the semantic query next to the query.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" #default=\"{ suggestion, query }\">\n    <div>Original query: {{ query }}</div>\n    <div>Suggested semantic query: {{ suggestion.query }} - {{ suggestion.distance }}</div>\n  </SemanticQuery>\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemoDefaultSlot',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;oCACEA,gBAeiB,CAAA,gBAAA,CAAA,CAAA;AAbd,EAAA,OAAAC,SAAA,EAAsB,EAAAC,WAAA,CAAA,yBAAA,EAAA;AAAA,IACtB,KAAA,EAAA,IAAA,CAAA,KAAA;AAAA,IACD,UAAQ,EAAA,IAAA,CAAA,UAAA;AAAA,IACR,0BAAU,IAAgB,CAAA,wBAAA;AAAA,IAAA,OAAA,EAAA,WAAA;IACzB,WAAO,EAAA,gBAAA;AAAA,GAAA,EAAA;AAGR,IAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAAA,MAIAC,kBAA8B,CAAA,0BAAA,CAAA;AAAA,MAC9BA,mBAAkC,kMAAN,CAAA;AAAA,MAAAA,kBAAA,CAAA,yBAAA,CAAA;AAfhC,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"semantic-query.vue.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-query.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    :query=\"query\"\n    :suggestion=\"suggestion\"\n    :suggestionSelectedEvents=\"suggestionSelectedEvents\"\n    feature=\"semantics\"\n    data-test=\"semantic-query\"\n    #default=\"baseScope\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n      @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}} v-bind BaseSuggestion bindings\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { SemanticQuery } from '@empathyco/x-types';\n  import { semanticQueriesXModule } from '../x-module';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { useGetter } from '../../../composables/use-getter';\n\n  /**\n   * This component renders a semantic query. A semantic query is a recommended query\n   * that is similar in its meaning to another one.\n   * It contains the query and the distance, which indicates how similar the query is\n   * compared to the searched query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SemanticQuery',\n    xModule: semanticQueriesXModule.name,\n    components: { BaseSuggestion },\n    props: {\n      /** The {@link @empathyco/x-types#SemanticQuery} to render. */\n      suggestion: {\n        type: Object as PropType<SemanticQuery>,\n        required: true\n      }\n    },\n    setup(props) {\n      /** The normalized query of the semantic queries module. */\n      const query = useGetter('semanticQueries', ['normalizedQuery']).normalizedQuery;\n\n      /** The list of events that are going to be emitted when the button is pressed. */\n      const suggestionSelectedEvents = {\n        UserSelectedASemanticQuery: props.suggestion\n      };\n\n      return {\n        query,\n        suggestionSelectedEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedASemanticQuery`](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 semantic query button. The event payload is the\n  semantic query data.\n\n## See it in action\n\nHere you can see that the semantic query query is rendered.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" />\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemo',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, we add the distance of the semantic query next to the query.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" #default=\"{ suggestion, query }\">\n    <div>Original query: {{ query }}</div>\n    <div>Suggested semantic query: {{ suggestion.query }} - {{ suggestion.distance }}</div>\n  </SemanticQuery>\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemoDefaultSlot',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;oCACEA,gBAeiB,CAAA,gBAAA,CAAA,CAAA;AAbd,EAAA,OAAAC,SAAA,EAAsB,EAAAC,WAAA,CAAA,yBAAA,EAAA;AAAA,IACtB,KAAA,EAAA,IAAA,CAAA,KAAA;AAAA,IACD,UAAQ,EAAA,IAAA,CAAA,UAAA;AAAA,IACR,0BAAU,IAAgB,CAAA,wBAAA;AAAA,IAAA,OAAA,EAAA,WAAA;IACzB,WAAO,EAAA,gBAAA;AAAA,GAAA,EAAA;;AAPZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/semantic-queries/store/getters/normalized-query.getter.js

@@ -4,7 +4,7 @@ import { normalizeString } from '../../../../utils/normalize.js';
  * Default implementacion for the {@link SemanticQueriesGetters.normalizedQuery} getter.
  *
  * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the semantic
- * queries module.
+ * queries' module.
  *
  * @returns The normalized query.
  *

package/js/x-modules/semantic-queries/store/getters/normalized-query.getter.js.map

@@ -1 +1 @@
-{"version":3,"file":"normalized-query.getter.js","sources":["../../../../../../src/x-modules/semantic-queries/store/getters/normalized-query.getter.ts"],"sourcesContent":["import { SemanticQueriesXStoreModule } from '../types';\nimport { normalizeString } from '../../../../utils/normalize';\n\n/**\n * Default implementacion for the {@link SemanticQueriesGetters.normalizedQuery} getter.\n *\n * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the semantic\n * queries module.\n *\n * @returns The normalized query.\n *\n * @public\n */\nexport const normalizedQuery: SemanticQueriesXStoreModule['getters']['normalizedQuery'] = ({\n  query\n}) => normalizeString(query);\n"],"names":[],"mappings":";;AAGA;;;;;;;;;AASG;AACI,MAAM,eAAe,GAA8D,CAAC,EACzF,KAAK,EACN,KAAK,eAAe,CAAC,KAAK;;;;"}
+{"version":3,"file":"normalized-query.getter.js","sources":["../../../../../../src/x-modules/semantic-queries/store/getters/normalized-query.getter.ts"],"sourcesContent":["import { SemanticQueriesXStoreModule } from '../types';\nimport { normalizeString } from '../../../../utils/normalize';\n\n/**\n * Default implementacion for the {@link SemanticQueriesGetters.normalizedQuery} getter.\n *\n * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the semantic\n * queries' module.\n *\n * @returns The normalized query.\n *\n * @public\n */\nexport const normalizedQuery: SemanticQueriesXStoreModule['getters']['normalizedQuery'] = ({\n  query\n}) => normalizeString(query);\n"],"names":[],"mappings":";;AAGA;;;;;;;;;AASG;AACI,MAAM,eAAe,GAA8D,CAAC,EACzF,KAAK,EACN,KAAK,eAAe,CAAC,KAAK;;;;"}

package/js/x-modules/semantic-queries/store/getters/request.getter.js

@@ -3,15 +3,16 @@
  *
  * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the semantic
  * queries module.
- *
+ * @param getters - Current {@link https://vuex.vuejs.org/guide/getters.html | getters} of the
+ * semantic queries' module.
  * @returns The semantic queries request to fetch data from the API.
  *
  * @public
  */
-const request = ({ query, params, totalResults, config: { threshold, maxItemsToRequest } }) => {
-    return query && totalResults <= threshold
+const request = ({ params, totalResults, config: { threshold, maxItemsToRequest } }, { normalizedQuery }) => {
+    return normalizedQuery && totalResults <= threshold
         ? {
-            query,
+            query: normalizedQuery,
             extraParams: {
                 ...params,
                 k: maxItemsToRequest

package/js/x-modules/semantic-queries/store/getters/request.getter.js.map

@@ -1 +1 @@
-{"version":3,"file":"request.getter.js","sources":["../../../../../../src/x-modules/semantic-queries/store/getters/request.getter.ts"],"sourcesContent":["import { SemanticQueriesXStoreModule } from '../types';\n\n/**\n * Default implementation for the {@link SemanticQueriesGetters.request} getter.\n *\n * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the semantic\n * queries module.\n *\n * @returns The semantic queries request to fetch data from the API.\n *\n * @public\n */\nexport const request: SemanticQueriesXStoreModule['getters']['request'] = ({\n  query,\n  params,\n  totalResults,\n  config: { threshold, maxItemsToRequest }\n}) => {\n  return query && totalResults <= threshold\n    ? {\n        query,\n        extraParams: {\n          ...params,\n          k: maxItemsToRequest\n        }\n      }\n    : null;\n};\n"],"names":[],"mappings":"AAEA;;;;;;;;;AASG;MACU,OAAO,GAAsD,CAAC,EACzE,KAAK,EACL,MAAM,EACN,YAAY,EACZ,MAAM,EAAE,EAAE,SAAS,EAAE,iBAAiB,EAAE,EACzC,KAAI;AACH,IAAA,OAAO,KAAK,IAAI,YAAY,IAAI,SAAS;AACvC,UAAE;YACE,KAAK;AACL,YAAA,WAAW,EAAE;AACX,gBAAA,GAAG,MAAM;AACT,gBAAA,CAAC,EAAE,iBAAiB;AACrB,aAAA;AACF,SAAA;UACD,IAAI,CAAC;AACX;;;;"}
+{"version":3,"file":"request.getter.js","sources":["../../../../../../src/x-modules/semantic-queries/store/getters/request.getter.ts"],"sourcesContent":["import { SemanticQueriesXStoreModule } from '../types';\n\n/**\n * Default implementation for the {@link SemanticQueriesGetters.request} getter.\n *\n * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the semantic\n * queries module.\n * @param getters - Current {@link https://vuex.vuejs.org/guide/getters.html | getters} of the\n * semantic queries' module.\n * @returns The semantic queries request to fetch data from the API.\n *\n * @public\n */\nexport const request: SemanticQueriesXStoreModule['getters']['request'] = (\n  { params, totalResults, config: { threshold, maxItemsToRequest } },\n  { normalizedQuery }\n) => {\n  return normalizedQuery && totalResults <= threshold\n    ? {\n        query: normalizedQuery,\n        extraParams: {\n          ...params,\n          k: maxItemsToRequest\n        }\n      }\n    : null;\n};\n"],"names":[],"mappings":"AAEA;;;;;;;;;;AAUG;MACU,OAAO,GAAsD,CACxE,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAClE,EAAE,eAAe,EAAE,KACjB;AACF,IAAA,OAAO,eAAe,IAAI,YAAY,IAAI,SAAS;AACjD,UAAE;AACE,YAAA,KAAK,EAAE,eAAe;AACtB,YAAA,WAAW,EAAE;AACX,gBAAA,GAAG,MAAM;AACT,gBAAA,CAAC,EAAE,iBAAiB;AACrB,aAAA;AACF,SAAA;UACD,IAAI,CAAC;AACX;;;;"}

package/js/x-modules/semantic-queries/store/getters/semanti-queries-query.getter.js

@@ -0,0 +1,18 @@
+import { createRelatedTagsQueryGetter } from '../../../../store/utils/query.utils.js';
+
+/**
+ * Default implementation for the semantic queries query getter.
+ *
+ * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the semantic
+ * queries' module.
+ *
+ * @returns The query with the selected related tags concatenated.
+ *
+ * @public
+ */
+const query = createRelatedTagsQueryGetter({
+    getRelatedTags: state => state.relatedTags
+});
+
+export { query };
+//# sourceMappingURL=semanti-queries-query.getter.js.map

package/js/x-modules/semantic-queries/store/getters/semanti-queries-query.getter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"semanti-queries-query.getter.js","sources":["../../../../../../src/x-modules/semantic-queries/store/getters/semanti-queries-query.getter.ts"],"sourcesContent":["import { createRelatedTagsQueryGetter } from '../../../../store/utils/query.utils';\nimport { SemanticQueriesXStoreModule } from '../types';\n\n/**\n * Default implementation for the semantic queries query getter.\n *\n * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the semantic\n * queries' module.\n *\n * @returns The query with the selected related tags concatenated.\n *\n * @public\n */\nexport const query: SemanticQueriesXStoreModule['getters']['query'] = createRelatedTagsQueryGetter({\n  getRelatedTags: state => state.relatedTags\n});\n"],"names":[],"mappings":";;AAGA;;;;;;;;;AASG;AACI,MAAM,KAAK,GAAoD,4BAA4B,CAAC;AACjG,IAAA,cAAc,EAAE,KAAK,IAAI,KAAK,CAAC,WAAW;AAC3C,CAAA;;;;"}

package/js/x-modules/semantic-queries/store/module.js

@@ -4,6 +4,7 @@ import { fetchSemanticQuery } from './actions/fetch-semantic-query.action.js';
 import { fetchAndSaveSemanticQuery } from './actions/fetch-and-save-semantic-query.action.js';
 import { request } from './getters/request.getter.js';
 import { normalizedQuery } from './getters/normalized-query.getter.js';
+import { query } from './getters/semanti-queries-query.getter.js';
 
 /**
  * {@link XStoreModule} For the `semantic-queries` module.
@@ -19,11 +20,13 @@ const semanticQueriesXStoreModule = {
         semanticQueries: [],
         params: {},
         query: '',
-        totalResults: 0
+        totalResults: 0,
+        relatedTags: []
     }),
     getters: {
         request,
-        normalizedQuery
+        normalizedQuery,
+        query
     },
     mutations: {
         setParams(state, params) {
@@ -36,6 +39,9 @@ const semanticQueriesXStoreModule = {
         setTotalResults(state, totalResults) {
             state.totalResults = totalResults;
         },
+        setSemanticQueriesRelatedTags(state, relatedTags) {
+            state.relatedTags = relatedTags;
+        },
         setConfig,
         mergeConfig
     },

package/js/x-modules/semantic-queries/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/semantic-queries/store/module.ts"],"sourcesContent":["import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';\nimport { setQuery } from '../../../store/utils/query.utils';\nimport { SemanticQueriesXStoreModule } from './types';\nimport { fetchSemanticQuery } from './actions/fetch-semantic-query.action';\nimport { fetchAndSaveSemanticQuery } from './actions/fetch-and-save-semantic-query.action';\nimport { request } from './getters/request.getter';\nimport { normalizedQuery } from './getters/normalized-query.getter';\n\n/**\n * {@link XStoreModule} For the `semantic-queries` module.\n *\n * @internal\n */\nexport const semanticQueriesXStoreModule: SemanticQueriesXStoreModule = {\n  state: () => ({\n    config: {\n      threshold: 5,\n      maxItemsToRequest: 3\n    },\n    semanticQueries: [],\n    params: {},\n    query: '',\n    totalResults: 0\n  }),\n  getters: {\n    request,\n    normalizedQuery\n  },\n  mutations: {\n    setParams(state, params) {\n      state.params = params;\n    },\n    setSemanticQueries(state, queries) {\n      state.semanticQueries = queries;\n    },\n    setQuery,\n    setTotalResults(state, totalResults) {\n      state.totalResults = totalResults;\n    },\n    setConfig,\n    mergeConfig\n  },\n  actions: {\n    fetchSemanticQuery,\n    fetchAndSaveSemanticQuery\n  }\n};\n"],"names":[],"mappings":";;;;;;;AAQA;;;;AAIG;AACU,MAAA,2BAA2B,GAAgC;AACtE,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE;AACN,YAAA,SAAS,EAAE,CAAC;AACZ,YAAA,iBAAiB,EAAE,CAAC;AACrB,SAAA;AACD,QAAA,eAAe,EAAE,EAAE;AACnB,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,YAAY,EAAE,CAAC;KAChB,CAAC;AACF,IAAA,OAAO,EAAE;QACP,OAAO;QACP,eAAe;AAChB,KAAA;AACD,IAAA,SAAS,EAAE;QACT,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAAA;AAC/B,YAAA,KAAK,CAAC,eAAe,GAAG,OAAO,CAAC;SACjC;QACD,QAAQ;QACR,eAAe,CAAC,KAAK,EAAE,YAAY,EAAA;AACjC,YAAA,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;SACnC;QACD,SAAS;QACT,WAAW;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;QACP,kBAAkB;QAClB,yBAAyB;AAC1B,KAAA;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/semantic-queries/store/module.ts"],"sourcesContent":["import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';\nimport { setQuery } from '../../../store/utils/query.utils';\nimport { SemanticQueriesXStoreModule } from './types';\nimport { fetchSemanticQuery } from './actions/fetch-semantic-query.action';\nimport { fetchAndSaveSemanticQuery } from './actions/fetch-and-save-semantic-query.action';\nimport { request } from './getters/request.getter';\nimport { normalizedQuery } from './getters/normalized-query.getter';\nimport { query } from './getters/semanti-queries-query.getter';\n\n/**\n * {@link XStoreModule} For the `semantic-queries` module.\n *\n * @internal\n */\nexport const semanticQueriesXStoreModule: SemanticQueriesXStoreModule = {\n  state: () => ({\n    config: {\n      threshold: 5,\n      maxItemsToRequest: 3\n    },\n    semanticQueries: [],\n    params: {},\n    query: '',\n    totalResults: 0,\n    relatedTags: []\n  }),\n  getters: {\n    request,\n    normalizedQuery,\n    query\n  },\n  mutations: {\n    setParams(state, params) {\n      state.params = params;\n    },\n    setSemanticQueries(state, queries) {\n      state.semanticQueries = queries;\n    },\n    setQuery,\n    setTotalResults(state, totalResults) {\n      state.totalResults = totalResults;\n    },\n    setSemanticQueriesRelatedTags(state, relatedTags) {\n      state.relatedTags = relatedTags;\n    },\n    setConfig,\n    mergeConfig\n  },\n  actions: {\n    fetchSemanticQuery,\n    fetchAndSaveSemanticQuery\n  }\n};\n"],"names":[],"mappings":";;;;;;;;AASA;;;;AAIG;AACU,MAAA,2BAA2B,GAAgC;AACtE,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE;AACN,YAAA,SAAS,EAAE,CAAC;AACZ,YAAA,iBAAiB,EAAE,CAAC;AACrB,SAAA;AACD,QAAA,eAAe,EAAE,EAAE;AACnB,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,YAAY,EAAE,CAAC;AACf,QAAA,WAAW,EAAE,EAAE;KAChB,CAAC;AACF,IAAA,OAAO,EAAE;QACP,OAAO;QACP,eAAe;QACf,KAAK;AACN,KAAA;AACD,IAAA,SAAS,EAAE;QACT,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAAA;AAC/B,YAAA,KAAK,CAAC,eAAe,GAAG,OAAO,CAAC;SACjC;QACD,QAAQ;QACR,eAAe,CAAC,KAAK,EAAE,YAAY,EAAA;AACjC,YAAA,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;SACnC;QACD,6BAA6B,CAAC,KAAK,EAAE,WAAW,EAAA;AAC9C,YAAA,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;SACjC;QACD,SAAS;QACT,WAAW;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;QACP,kBAAkB;QAClB,yBAAyB;AAC1B,KAAA;;;;;"}

package/js/x-modules/semantic-queries/wiring.js

@@ -50,6 +50,8 @@ const clearQueryWire = wireCommit('setQuery', '');
  * @public
  */
 const setTotalResultsWire = wireCommit('setTotalResults');
+/** Sets the related prompts state `relatedTags`. */
+const setSemanticQueriesRelatedTags = wireCommit('setSemanticQueriesRelatedTags');
 /**
  * Sets the total results taking the {@link SearchXEvents.SearchResponseChanged} payload.
  *
@@ -80,6 +82,9 @@ const semanticQueriesWiring = createWiring({
     SearchResponseChanged: {
         setQueryFromSearchResponseChangedWire,
         setTotalResultsFromSearchResponseChangedWire
+    },
+    SelectedRelatedTagsChanged: {
+        setSemanticQueriesRelatedTags
     }
 });
 

package/js/x-modules/semantic-queries/wiring.js.map

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/semantic-queries/wiring.ts"],"sourcesContent":["import {\n  namespacedWireCommit,\n  namespacedWireDispatch\n} from '../../wiring/namespaced-wires.factory';\nimport { createWiring } from '../../wiring/wiring.utils';\nimport { mapWire } from '../../wiring/wires.operators';\nimport { SearchXEvents } from '../search/events.types';\nimport { ExtractMutationPayload } from '../../store/store.types';\n\n/**\n * `semanticQueries` {@link XModuleName | name}.\n *\n * @internal\n */\nconst moduleName = 'semanticQueries';\n\n/**\n * WireCommit for {@link SemanticQueriesXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName);\n\n/**\n * WireDispatch for {@link SemanticQueriesXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/**\n * Requests and stores the semantic query results.\n *\n * @public\n */\nexport const fetchAndSaveSemanticQueryWire = wireDispatch('fetchAndSaveSemanticQuery');\n\n/**\n * Sets the query.\n *\n * @public\n */\nexport const setQueryWire = wireCommit('setQuery');\n\n/**\n * Sets the query taking the {@link SearchXEvents.SearchResponseChanged} payload.\n *\n * @public\n */\nexport const setQueryFromSearchResponseChangedWire = mapWire<\n  SearchXEvents['SearchResponseChanged'],\n  ExtractMutationPayload<'semanticQueries', 'setQuery'>\n>(setQueryWire, ({ request: { query } }) => query);\n\n/**\n * Clears the query.\n *\n * @public\n */\nexport const clearQueryWire = wireCommit('setQuery', '');\n\n/**\n * Sets the total results.\n *\n * @public\n */\nexport const setTotalResultsWire = wireCommit('setTotalResults');\n\n/**\n * Sets the total results taking the {@link SearchXEvents.SearchResponseChanged} payload.\n *\n * @public\n */\nexport const setTotalResultsFromSearchResponseChangedWire = mapWire<\n  SearchXEvents['SearchResponseChanged'],\n  ExtractMutationPayload<'semanticQueries', 'setTotalResults'>\n>(setTotalResultsWire, ({ totalResults }) => totalResults);\n\n/**\n * Sets the semantic queries state `params`.\n *\n * @public\n */\nexport const setSemanticQueriesExtraParamsWire = wireCommit('setParams');\n\n/**\n * Wiring configuration for the {@link SemanticQueriesXModule | semanticQueries module}.\n *\n * @internal\n */\nexport const semanticQueriesWiring = createWiring({\n  UserClearedQuery: {\n    clearQueryWire\n  },\n  SemanticQueryRequestUpdated: {\n    fetchAndSaveSemanticQueryWire\n  },\n  ExtraParamsChanged: {\n    setSemanticQueriesExtraParamsWire\n  },\n  SearchResponseChanged: {\n    setQueryFromSearchResponseChangedWire,\n    setTotalResultsFromSearchResponseChangedWire\n  }\n});\n"],"names":[],"mappings":";;;;AASA;;;;AAIG;AACH,MAAM,UAAU,GAAG,iBAAiB,CAAC;AAErC;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;AAIG;AACH,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;AAExD;;;;AAIG;MACU,6BAA6B,GAAG,YAAY,CAAC,2BAA2B,EAAE;AAEvF;;;;AAIG;MACU,YAAY,GAAG,UAAU,CAAC,UAAU,EAAE;AAEnD;;;;AAIG;MACU,qCAAqC,GAAG,OAAO,CAG1D,YAAY,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,EAAE;AAEnD;;;;AAIG;AACU,MAAA,cAAc,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAE;AAEzD;;;;AAIG;MACU,mBAAmB,GAAG,UAAU,CAAC,iBAAiB,EAAE;AAEjE;;;;AAIG;AACU,MAAA,4CAA4C,GAAG,OAAO,CAGjE,mBAAmB,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,YAAY,EAAE;AAE3D;;;;AAIG;MACU,iCAAiC,GAAG,UAAU,CAAC,WAAW,EAAE;AAEzE;;;;AAIG;AACI,MAAM,qBAAqB,GAAG,YAAY,CAAC;AAChD,IAAA,gBAAgB,EAAE;QAChB,cAAc;AACf,KAAA;AACD,IAAA,2BAA2B,EAAE;QAC3B,6BAA6B;AAC9B,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,iCAAiC;AAClC,KAAA;AACD,IAAA,qBAAqB,EAAE;QACrB,qCAAqC;QACrC,4CAA4C;AAC7C,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/semantic-queries/wiring.ts"],"sourcesContent":["import {\n  namespacedWireCommit,\n  namespacedWireDispatch\n} from '../../wiring/namespaced-wires.factory';\nimport { createWiring } from '../../wiring/wiring.utils';\nimport { mapWire } from '../../wiring/wires.operators';\nimport { SearchXEvents } from '../search/events.types';\nimport { ExtractMutationPayload } from '../../store/store.types';\n\n/**\n * `semanticQueries` {@link XModuleName | name}.\n *\n * @internal\n */\nconst moduleName = 'semanticQueries';\n\n/**\n * WireCommit for {@link SemanticQueriesXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName);\n\n/**\n * WireDispatch for {@link SemanticQueriesXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/**\n * Requests and stores the semantic query results.\n *\n * @public\n */\nexport const fetchAndSaveSemanticQueryWire = wireDispatch('fetchAndSaveSemanticQuery');\n\n/**\n * Sets the query.\n *\n * @public\n */\nexport const setQueryWire = wireCommit('setQuery');\n\n/**\n * Sets the query taking the {@link SearchXEvents.SearchResponseChanged} payload.\n *\n * @public\n */\nexport const setQueryFromSearchResponseChangedWire = mapWire<\n  SearchXEvents['SearchResponseChanged'],\n  ExtractMutationPayload<'semanticQueries', 'setQuery'>\n>(setQueryWire, ({ request: { query } }) => query);\n\n/**\n * Clears the query.\n *\n * @public\n */\nexport const clearQueryWire = wireCommit('setQuery', '');\n\n/**\n * Sets the total results.\n *\n * @public\n */\nexport const setTotalResultsWire = wireCommit('setTotalResults');\n\n/** Sets the related prompts state `relatedTags`. */\nconst setSemanticQueriesRelatedTags = wireCommit('setSemanticQueriesRelatedTags');\n\n/**\n * Sets the total results taking the {@link SearchXEvents.SearchResponseChanged} payload.\n *\n * @public\n */\nexport const setTotalResultsFromSearchResponseChangedWire = mapWire<\n  SearchXEvents['SearchResponseChanged'],\n  ExtractMutationPayload<'semanticQueries', 'setTotalResults'>\n>(setTotalResultsWire, ({ totalResults }) => totalResults);\n\n/**\n * Sets the semantic queries state `params`.\n *\n * @public\n */\nexport const setSemanticQueriesExtraParamsWire = wireCommit('setParams');\n\n/**\n * Wiring configuration for the {@link SemanticQueriesXModule | semanticQueries module}.\n *\n * @internal\n */\nexport const semanticQueriesWiring = createWiring({\n  UserClearedQuery: {\n    clearQueryWire\n  },\n  SemanticQueryRequestUpdated: {\n    fetchAndSaveSemanticQueryWire\n  },\n  ExtraParamsChanged: {\n    setSemanticQueriesExtraParamsWire\n  },\n  SearchResponseChanged: {\n    setQueryFromSearchResponseChangedWire,\n    setTotalResultsFromSearchResponseChangedWire\n  },\n  SelectedRelatedTagsChanged: {\n    setSemanticQueriesRelatedTags\n  }\n});\n"],"names":[],"mappings":";;;;AASA;;;;AAIG;AACH,MAAM,UAAU,GAAG,iBAAiB,CAAC;AAErC;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;AAIG;AACH,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;AAExD;;;;AAIG;MACU,6BAA6B,GAAG,YAAY,CAAC,2BAA2B,EAAE;AAEvF;;;;AAIG;MACU,YAAY,GAAG,UAAU,CAAC,UAAU,EAAE;AAEnD;;;;AAIG;MACU,qCAAqC,GAAG,OAAO,CAG1D,YAAY,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,EAAE;AAEnD;;;;AAIG;AACU,MAAA,cAAc,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAE;AAEzD;;;;AAIG;MACU,mBAAmB,GAAG,UAAU,CAAC,iBAAiB,EAAE;AAEjE;AACA,MAAM,6BAA6B,GAAG,UAAU,CAAC,+BAA+B,CAAC,CAAC;AAElF;;;;AAIG;AACU,MAAA,4CAA4C,GAAG,OAAO,CAGjE,mBAAmB,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,YAAY,EAAE;AAE3D;;;;AAIG;MACU,iCAAiC,GAAG,UAAU,CAAC,WAAW,EAAE;AAEzE;;;;AAIG;AACI,MAAM,qBAAqB,GAAG,YAAY,CAAC;AAChD,IAAA,gBAAgB,EAAE;QAChB,cAAc;AACf,KAAA;AACD,IAAA,2BAA2B,EAAE;QAC3B,6BAA6B;AAC9B,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,iCAAiC;AAClC,KAAA;AACD,IAAA,qBAAqB,EAAE;QACrB,qCAAqC;QACrC,4CAA4C;AAC7C,KAAA;AACD,IAAA,0BAA0B,EAAE;QAC1B,6BAA6B;AAC9B,KAAA;AACF,CAAA;;;;"}

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

@@ -14,17 +14,18 @@ var _sfc_main = defineComponent({
     xModule: taggingXModule.name,
     props: {
         /**
-         * The TTL in milliseconds for storing the clicked result info.
+         * The TTL in milliseconds for storing the result info.
          */
-        clickedResultStorageTTLMs: {
+        storageTTLMs: {
             type: Number,
             default: 30000
         },
         /**
-         * The Object key of the {@link @empathyco/x-types#Result} clicked by the user
-         * that will be used as id for the storage. By default, the Result url will be used.
+         * The Object key of the {@link @empathyco/x-types#Result} clicked or added to the cart by the user
+         * that will be used as id for the storage.
+         * By default, the Result url will be used.
          */
-        clickedResultStorageKey: {
+        storageKey: {
             type: String,
             default: 'url'
         },
@@ -70,8 +71,8 @@ var _sfc_main = defineComponent({
             return {
                 queryTaggingDebounceMs: props.queryTaggingDebounceMs,
                 sessionTTLMs: props.sessionTTLMs,
-                clickedResultStorageTTLMs: props.clickedResultStorageTTLMs,
-                clickedResultStorageKey: props.clickedResultStorageKey
+                storageTTLMs: props.storageTTLMs,
+                storageKey: props.storageKey
             };
         });
         /**

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

@@ -1 +1 @@
-{"version":3,"file":"tagging.vue.js","sources":["../../../../../src/x-modules/tagging/components/tagging.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, defineComponent, inject, onMounted, watch } from 'vue';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { taggingXModule } from '../x-module';\n  import { TaggingConfig } from '../config.types';\n  import { useXBus } from '../../../composables/use-x-bus';\n  /**\n   * This component enables and manages the sending of information to the\n   * [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).\n   * It allows you to activate or deactivate the session id management through the `consent` prop.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Tagging',\n    xModule: taggingXModule.name,\n    props: {\n      /**\n       * The TTL in milliseconds for storing the clicked result info.\n       */\n      clickedResultStorageTTLMs: {\n        type: Number,\n        default: 30000\n      },\n      /**\n       * The Object key of the {@link @empathyco/x-types#Result} clicked by the user\n       * that will be used as id for the storage. By default, the Result url will be used.\n       */\n      clickedResultStorageKey: {\n        type: String,\n        default: 'url'\n      },\n      /**\n       * The session TTL in milliseconds.\n       */\n      sessionTTLMs: Number,\n      /**\n       * The debounce time in milliseconds to track the query.\n       */\n      queryTaggingDebounceMs: {\n        type: Number,\n        default: 2000\n      },\n      /**\n       * The consent to be emitted.\n       */\n      consent: {\n        type: Boolean,\n        default: null\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n       */\n      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');\n\n      /**\n       * The active consent, selected from the `consent` prop and the `snippetConfig.consent`\n       * property. False by default.\n       *\n       * @remarks If the consent is undefined in the prop and in the snippetConfig, it will return\n       * false.\n       *\n       * @returns A boolean that represents if the consent is accepted or not.\n       */\n      const activeConsent = computed(() => props.consent ?? snippetConfig?.consent ?? false);\n\n      /**\n       * The tagging config to be emitted.\n       */\n      const taggingConfig = computed<TaggingConfig>(() => {\n        return {\n          queryTaggingDebounceMs: props.queryTaggingDebounceMs,\n          sessionTTLMs: props.sessionTTLMs as number,\n          clickedResultStorageTTLMs: props.clickedResultStorageTTLMs,\n          clickedResultStorageKey: props.clickedResultStorageKey\n        };\n      });\n\n      /**\n       * Emits the {@link TaggingXEvents.PDPIsLoaded} XEvent if the snippet config contains\n       * a product id.\n       */\n      onMounted(() => {\n        if (snippetConfig?.productId) {\n          xBus.emit('PDPIsLoaded', snippetConfig.productId);\n        }\n      });\n\n      /**\n       * Emmits the consent when it changes.\n       */\n      watch(activeConsent, () => xBus.emit('ConsentProvided', activeConsent.value), {\n        immediate: true\n      });\n\n      /**\n       * Emmits the tagging config when it changes.\n       */\n      watch(taggingConfig, () => xBus.emit('TaggingConfigProvided', taggingConfig.value), {\n        immediate: true\n      });\n\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      return () => {};\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`ConsentProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`TaggingConfigProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component manages the tagging of the API to track the different features. This component\ndoesn't render elements to the DOM.\n\n```vue\n<template>\n  <Tagging />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `Tagging` component will emit `ConsentProvided` with payload false by default\nif the consent is not provided, the `TaggingConfigProvided` event will be emitted only if the props\n`queryTaggingDebounceMs`, `sessionDurationMs`, `clickedResultStorageTTLMs` or\n`clickedResultStorageKey`are defined.\n\nEvery time the user clicks a result the information for the clicked product will be stored on the\nbrowser during 30 seconds which is the default value for the prop `clickedResultStorageTTLMs`. To\ndistinguish the storage information for the different results the product url will be used since\n`clickedResultStorageKey` default value is 'url'.\n\n```vue\n<template>\n  <Tagging :consent=\"true\" :queryTaggingDebounceMs=\"300\" :sessionDurationMs=\"30000\" />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\nIn this example, the clicked result information will be stored on the browser during 60 seconds and\nthe product id will be used as storage key.\n\n```vue\n<template>\n  <Tagging :clickedResultStorageTTLMs=\"60000\" :clickedResultStorageKey=\"'id'\" />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\n### Play with events\n\nThe `Tagging` will emit the `ConsentProvided` when the component is loaded and the consent is set by\nthe prop or getting the value from the snippet config.\n\nThe `Tagging` will emit the `TaggingConfigProvided` when the component is loaded with the new\n[`TaggingConfig`](./../../api/x-components.taggingconfig.md) using the prop values.\n</docs>\n"],"names":[],"mappings":";;;;AAME;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,cAAc,CAAC,IAAI;AAC5B,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,yBAAyB,EAAE;AACzB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;;AAGE;AACF,QAAA,uBAAuB,EAAE;AACvB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;AAEE;AACF,QAAA,YAAY,EAAE,MAAM;AACpB;;AAEE;AACF,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AACD;;AAEE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;AAEE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAA4B,eAAe,CAAC,CAAA;AAExE;;;;;;;;AAQE;AACF,QAAA,MAAM,aAAY,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAM,IAAK,aAAa,EAAE,OAAQ,IAAG,KAAK,CAAC,CAAA;AAEtF;;AAEE;AACF,QAAA,MAAM,gBAAgB,QAAQ,CAAgB,MAAM;YAClD,OAAO;gBACL,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;gBACpD,YAAY,EAAE,KAAK,CAAC,YAAsB;gBAC1C,yBAAyB,EAAE,KAAK,CAAC,yBAAyB;gBAC1D,uBAAuB,EAAE,KAAK,CAAC,uBAAsB;aACtD,CAAA;AACH,SAAC,CAAC,CAAA;AAEF;;;AAGE;QACF,SAAS,CAAC,MAAM;YACd,IAAI,aAAa,EAAE,SAAS,EAAE;gBAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC,SAAS,CAAC,CAAA;AACnD,aAAA;AACF,SAAC,CAAC,CAAA;AAEF;;AAEE;AACF,QAAA,KAAK,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;AAC5E,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;AAEF;;AAEE;AACF,QAAA,KAAK,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;AAClF,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;;AAGF,QAAA,OAAO,MAAO,GAAC,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"tagging.vue.js","sources":["../../../../../src/x-modules/tagging/components/tagging.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, defineComponent, inject, onMounted, watch } from 'vue';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { taggingXModule } from '../x-module';\n  import { TaggingConfig } from '../config.types';\n  import { useXBus } from '../../../composables/use-x-bus';\n  /**\n   * This component enables and manages the sending of information to the\n   * [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).\n   * It allows you to activate or deactivate the session id management through the `consent` prop.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Tagging',\n    xModule: taggingXModule.name,\n    props: {\n      /**\n       * The TTL in milliseconds for storing the result info.\n       */\n      storageTTLMs: {\n        type: Number,\n        default: 30000\n      },\n      /**\n       * The Object key of the {@link @empathyco/x-types#Result} clicked or added to the cart by the user\n       * that will be used as id for the storage.\n       * By default, the Result url will be used.\n       */\n      storageKey: {\n        type: String,\n        default: 'url'\n      },\n      /**\n       * The session TTL in milliseconds.\n       */\n      sessionTTLMs: Number,\n      /**\n       * The debounce time in milliseconds to track the query.\n       */\n      queryTaggingDebounceMs: {\n        type: Number,\n        default: 2000\n      },\n      /**\n       * The consent to be emitted.\n       */\n      consent: {\n        type: Boolean,\n        default: null\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n       */\n      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');\n\n      /**\n       * The active consent, selected from the `consent` prop and the `snippetConfig.consent`\n       * property. False by default.\n       *\n       * @remarks If the consent is undefined in the prop and in the snippetConfig, it will return\n       * false.\n       *\n       * @returns A boolean that represents if the consent is accepted or not.\n       */\n      const activeConsent = computed(() => props.consent ?? snippetConfig?.consent ?? false);\n\n      /**\n       * The tagging config to be emitted.\n       */\n      const taggingConfig = computed<TaggingConfig>(() => {\n        return {\n          queryTaggingDebounceMs: props.queryTaggingDebounceMs,\n          sessionTTLMs: props.sessionTTLMs as number,\n          storageTTLMs: props.storageTTLMs,\n          storageKey: props.storageKey\n        };\n      });\n\n      /**\n       * Emits the {@link TaggingXEvents.PDPIsLoaded} XEvent if the snippet config contains\n       * a product id.\n       */\n      onMounted(() => {\n        if (snippetConfig?.productId) {\n          xBus.emit('PDPIsLoaded', snippetConfig.productId);\n        }\n      });\n\n      /**\n       * Emmits the consent when it changes.\n       */\n      watch(activeConsent, () => xBus.emit('ConsentProvided', activeConsent.value), {\n        immediate: true\n      });\n\n      /**\n       * Emmits the tagging config when it changes.\n       */\n      watch(taggingConfig, () => xBus.emit('TaggingConfigProvided', taggingConfig.value), {\n        immediate: true\n      });\n\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      return () => {};\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`ConsentProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`TaggingConfigProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component manages the tagging of the API to track the different features. This component\ndoesn't render elements to the DOM.\n\n```vue\n<template>\n  <Tagging />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `Tagging` component will emit `ConsentProvided` with payload false by default\nif the consent is not provided, the `TaggingConfigProvided` event will be emitted only if the props\n`queryTaggingDebounceMs`, `sessionDurationMs`, `storageTTLMs` or `storageKey`are defined.\n\nEvery time the user clicks a result or adds a result to the cart, the information for the product\nwill be stored on the browser during 30 seconds which is the default value for the prop\n`storageTTLMs`. To distinguish the storage information for the different results the product url\nwill be used since `storageKey` default value is 'url'.\n\n```vue\n<template>\n  <Tagging :consent=\"true\" :queryTaggingDebounceMs=\"300\" :sessionDurationMs=\"30000\" />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\nIn this example, the clicked or added to cart result information will be stored on the browser\nduring 60 seconds and the product id will be used as storage key\n\n```vue\n<template>\n  <Tagging :storageTTLMs=\"60000\" :storageKey=\"'id'\" />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\n### Play with events\n\nThe `Tagging` will emit the `ConsentProvided` when the component is loaded and the consent is set by\nthe prop or getting the value from the snippet config.\n\nThe `Tagging` will emit the `TaggingConfigProvided` when the component is loaded with the new\n[`TaggingConfig`](./../../api/x-components.taggingconfig.md) using the prop values.\n</docs>\n"],"names":[],"mappings":";;;;AAME;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,cAAc,CAAC,IAAI;AAC5B,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;AAEE;AACF,QAAA,YAAY,EAAE,MAAM;AACpB;;AAEE;AACF,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AACD;;AAEE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;AAEE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAA4B,eAAe,CAAC,CAAA;AAExE;;;;;;;;AAQE;AACF,QAAA,MAAM,aAAY,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAM,IAAK,aAAa,EAAE,OAAQ,IAAG,KAAK,CAAC,CAAA;AAEtF;;AAEE;AACF,QAAA,MAAM,gBAAgB,QAAQ,CAAgB,MAAM;YAClD,OAAO;gBACL,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;gBACpD,YAAY,EAAE,KAAK,CAAC,YAAsB;gBAC1C,YAAY,EAAE,KAAK,CAAC,YAAY;gBAChC,UAAU,EAAE,KAAK,CAAC,UAAS;aAC5B,CAAA;AACH,SAAC,CAAC,CAAA;AAEF;;;AAGE;QACF,SAAS,CAAC,MAAM;YACd,IAAI,aAAa,EAAE,SAAS,EAAE;gBAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC,SAAS,CAAC,CAAA;AACnD,aAAA;AACF,SAAC,CAAC,CAAA;AAEF;;AAEE;AACF,QAAA,KAAK,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;AAC5E,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;AAEF;;AAEE;AACF,QAAA,KAAK,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;AAClF,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;;AAGF,QAAA,OAAO,MAAO,GAAC,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/tagging/service/{pdp-add-to-cart.service.js → external-tagging.service.js}

@@ -9,11 +9,11 @@ import '../../../plugins/x-bus.js';
 import { XPlugin } from '../../../plugins/x-plugin.js';
 
 /**
- * Default implementation for the {@link PDPAddToCartService}.
+ * Default implementation for the {@link ExternalTaggingService}.
  *
  * @public
  */
-class DefaultPDPAddToCartService {
+class DefaultExternalTaggingService {
     constructor(localStorageService = new BrowserStorageService(localStorage, 'x'), sessionStorageService = new BrowserStorageService(sessionStorage, 'x')) {
         this.localStorageService = localStorageService;
         this.sessionStorageService = sessionStorageService;
@@ -21,25 +21,41 @@ class DefaultPDPAddToCartService {
     get store() {
         return XPlugin.store;
     }
-    get clickedResultStorageKey() {
-        return this.store.state.x.tagging.config.clickedResultStorageKey;
+    get storageKey() {
+        return this.store.state.x.tagging.config.storageKey;
     }
-    get clickedResultStorageTTLMs() {
-        return this.store.state.x.tagging.config.clickedResultStorageTTLMs;
+    get storageTTLMs() {
+        return this.store.state.x.tagging.config.storageTTLMs;
     }
     /**
      * Stores in the local storage the information from the Result clicked by the user
-     * in order to be able to track later on.
+     * in order to be able to track the add to cart later on the result's PDP.
      *
      * @param result - The result to store.
      *
      * @public
      */
     storeResultClicked(result) {
-        const key = result[this.clickedResultStorageKey];
-        const storageId = this.getStorageId(key);
+        const key = result[this.storageKey];
+        const storageId = this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, key);
         if (storageId) {
-            this.localStorageService.setItem(storageId, result, this.clickedResultStorageTTLMs);
+            this.localStorageService.setItem(storageId, result, this.storageTTLMs);
+        }
+    }
+    /**
+     * Stores in the local storage the information from the Result added to the cart
+     * by the user in order to be able to track the checkout later on when the checkout
+     * process has been completed by shopper.
+     *
+     * @param result - The result to store.
+     *
+     * @public
+     */
+    storeAddToCart(result) {
+        const key = result[this.storageKey];
+        const storageId = this.getStorageId(DefaultExternalTaggingService.ADD_TO_CART_ID_KEY, key);
+        if (storageId) {
+            this.localStorageService.setItem(storageId, result, this.storageTTLMs);
         }
     }
     /**
@@ -51,7 +67,7 @@ class DefaultPDPAddToCartService {
      * @public
      */
     moveToSessionStorage(id) {
-        const storageId = this.getStorageId(id);
+        const storageId = this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, id);
         if (storageId) {
             const result = this.localStorageService.removeItem(storageId);
             if (result) {
@@ -60,41 +76,50 @@ class DefaultPDPAddToCartService {
         }
     }
     /**
-     * Checks if the session storage contains a result information for given id or the current url
-     * and tracks the add to cart if exists.
+     * Checks if the session storage contains a result information for a given id or the current url.
+     * If exists, it tracks the add to cart and saves the add to cart information into session
+     * storage.
      *
      * @param id - The id of the result to track.
      *
      * @public
      */
     trackAddToCart(id) {
-        const storageId = this.clickedResultStorageKey === 'url' ? this.getStorageId() : this.getStorageId(id);
+        const storageId = this.storageKey === 'url'
+            ? this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY)
+            : this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, id);
         if (storageId) {
             const result = this.sessionStorageService.getItem(storageId);
             if (result?.tagging?.add2cart) {
                 result.tagging.add2cart.params.location = 'pdp';
                 this.store.dispatch('x/tagging/track', result.tagging.add2cart);
+                /**
+                 * Done after tracking the add to cart to avoid tracking the checkout without
+                 * an add to cart, in case the tracking fails.
+                 */
+                this.storeAddToCart(result);
             }
         }
     }
     /**
      * Calculates the browser storage key for the given id.
      *
+     * @param keyPrefix - The key prefix to use in the storage.
      * @param id - The id to be used for the storage key.
      *
      * @returns The complete key to be used for storage.
      *
      * @internal
      */
-    getStorageId(id) {
-        if (this.clickedResultStorageKey === 'url') {
+    getStorageId(keyPrefix, id) {
+        if (this.storageKey === 'url') {
             let url = id ?? window.location.href;
             url = url.replace(/\s|\+/g, '%20');
             const pathName = this.getPathName(url);
-            return `${DefaultPDPAddToCartService.RESULT_CLICKED_ID_KEY}-${pathName}`;
+            return `${keyPrefix}-${pathName}`;
         }
         else if (id) {
-            return `${DefaultPDPAddToCartService.RESULT_CLICKED_ID_KEY}-${id}`;
+            return `${keyPrefix}-${id}`;
         }
         else {
             this.showWarningMessage();
@@ -107,7 +132,7 @@ class DefaultPDPAddToCartService {
      * @internal
      */
     showWarningMessage() {
-        if (this.clickedResultStorageKey !== 'url') {
+        if (this.storageKey !== 'url') {
             //TODO: add here logger
             //eslint-disable-next-line no-console
             console.warn('No product id was provided but the storage was not configured to use the url');
@@ -143,15 +168,21 @@ class DefaultPDPAddToCartService {
     }
 }
 /**
- * Session id key to use as key in the storage.
+ * Session id key to use as key in the storage for result clicks.
+ *
+ * @public
+ */
+DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY = 'add-to-cart';
+/**
+ * Session id key to use as key in the storage for add to carts.
  *
  * @public
  */
-DefaultPDPAddToCartService.RESULT_CLICKED_ID_KEY = 'add-to-cart';
+DefaultExternalTaggingService.ADD_TO_CART_ID_KEY = 'checkout';
 /**
- * Global instance of the {@link PDPAddToCartService}.
+ * Global instance of the {@link ExternalTaggingService}.
  */
-DefaultPDPAddToCartService.instance = new DefaultPDPAddToCartService();
+DefaultExternalTaggingService.instance = new DefaultExternalTaggingService();
 
-export { DefaultPDPAddToCartService };
-//# sourceMappingURL=pdp-add-to-cart.service.js.map
+export { DefaultExternalTaggingService };
+//# sourceMappingURL=external-tagging.service.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"external-tagging.service.js","sources":["../../../../../src/x-modules/tagging/service/external-tagging.service.ts"],"sourcesContent":["import { Store } from 'vuex';\nimport { Result } from '@empathyco/x-types';\nimport { BrowserStorageService, StorageService } from '@empathyco/x-storage-service';\nimport { RootXStoreState } from '../../../store/index';\nimport { XPlugin } from '../../../plugins/index';\nimport { ExternalTaggingService } from './types';\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(sessionStorage, 'x')\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      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        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      //TODO: add here logger\n      //eslint-disable-next-line no-console\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      if (/^(\\.\\.\\/|\\.\\/|\\/)/.test(url)) {\n        urlObject = new URL(url, location.origin);\n      } else {\n        urlObject = new URL(url);\n      }\n      return urlObject.pathname;\n    } catch (e) {\n      //TODO: add here logger\n      //eslint-disable-next-line no-console\n      console.warn(`There was a problem with url ${url}`);\n      return url;\n    }\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;AAOA;;;;AAIG;MACU,6BAA6B,CAAA;AAoBxC,IAAA,WAAA,CACY,sBAAsC,IAAI,qBAAqB,CAAC,YAAY,EAAE,GAAG,CAAC,EAClF,qBAAA,GAAwC,IAAI,qBAAqB,CAAC,cAAc,EAAE,GAAG,CAAC,EAAA;QADtF,IAAmB,CAAA,mBAAA,GAAnB,mBAAmB,CAA+D;QAClF,IAAqB,CAAA,qBAAA,GAArB,qBAAqB,CAAiE;KAC9F;AAEJ,IAAA,IAAc,KAAK,GAAA;QACjB,OAAO,OAAO,CAAC,KAAK,CAAC;KACtB;AAED,IAAA,IAAc,UAAU,GAAA;AACtB,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,UAAoB,CAAC;KAC/D;AAED,IAAA,IAAc,YAAY,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,YAAsB,CAAC;KACjE;AAED;;;;;;;AAOG;AACH,IAAA,kBAAkB,CAAC,MAAc,EAAA;QAC/B,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,UAA0B,CAAW,CAAC;AAC9D,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,6BAA6B,CAAC,qBAAqB,EAAE,GAAG,CAAC,CAAC;AAC9F,QAAA,IAAI,SAAS,EAAE;AACb,YAAA,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;AACxE,SAAA;KACF;AAED;;;;;;;;AAQG;AACH,IAAA,cAAc,CAAC,MAAc,EAAA;QAC3B,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,UAA0B,CAAW,CAAC;AAC9D,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,6BAA6B,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC;AAC3F,QAAA,IAAI,SAAS,EAAE;AACb,YAAA,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;AACxE,SAAA;KACF;AAED;;;;;;;AAOG;AACH,IAAA,oBAAoB,CAAC,EAAW,EAAA;AAC9B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,6BAA6B,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;AAC7F,QAAA,IAAI,SAAS,EAAE;YACb,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;AAC9D,YAAA,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AACvD,aAAA;AACF,SAAA;KACF;AAED;;;;;;;;AAQG;AACH,IAAA,cAAc,CAAC,EAAW,EAAA;AACxB,QAAA,MAAM,SAAS,GACb,IAAI,CAAC,UAAU,KAAK,KAAK;cACrB,IAAI,CAAC,YAAY,CAAC,6BAA6B,CAAC,qBAAqB,CAAC;cACtE,IAAI,CAAC,YAAY,CAAC,6BAA6B,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;AACjF,QAAA,IAAI,SAAS,EAAE;YACb,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAS,SAAS,CAAC,CAAC;AACrE,YAAA,IAAI,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC7B,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;AAChD,gBAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;AAChE;;;AAGG;AACH,gBAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC7B,aAAA;AACF,SAAA;KACF;AAED;;;;;;;;;AASG;IACO,YAAY,CAAC,SAAiB,EAAE,EAAW,EAAA;AACnD,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE;YAC7B,IAAI,GAAG,GAAG,EAAE,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;YACrC,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;YACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AACvC,YAAA,OAAO,CAAG,EAAA,SAAS,CAAI,CAAA,EAAA,QAAQ,EAAE,CAAC;AACnC,SAAA;AAAM,aAAA,IAAI,EAAE,EAAE;AACb,YAAA,OAAO,CAAG,EAAA,SAAS,CAAI,CAAA,EAAA,EAAE,EAAE,CAAC;AAC7B,SAAA;AAAM,aAAA;YACL,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;KACF;AAED;;;;AAIG;IACO,kBAAkB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE;;;AAG7B,YAAA,OAAO,CAAC,IAAI,CAAC,8EAA8E,CAAC,CAAC;AAC9F,SAAA;KACF;AAED;;;;;;;;AAQG;AACO,IAAA,WAAW,CAAC,GAAW,EAAA;AAC/B,QAAA,IAAI,SAAc,CAAC;QACnB,IAAI;;AAEF,YAAA,IAAI,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;gBACjC,SAAS,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC3C,aAAA;AAAM,iBAAA;AACL,gBAAA,SAAS,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;AAC1B,aAAA;YACD,OAAO,SAAS,CAAC,QAAQ,CAAC;AAC3B,SAAA;AAAC,QAAA,OAAO,CAAC,EAAE;;;AAGV,YAAA,OAAO,CAAC,IAAI,CAAC,gCAAgC,GAAG,CAAA,CAAE,CAAC,CAAC;AACpD,YAAA,OAAO,GAAG,CAAC;AACZ,SAAA;KACF;;AAjLD;;;;AAIG;AACoB,6BAAqB,CAAA,qBAAA,GAAG,aAAa,CAAC;AAE7D;;;;AAIG;AACoB,6BAAkB,CAAA,kBAAA,GAAG,UAAU,CAAC;AAEvD;;AAEG;AACW,6BAAA,CAAA,QAAQ,GAA2B,IAAI,6BAA6B,EAAE;;;;"}