@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.91

package/js/x-modules/related-tags/components/related-tag.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './related-tag.vue2.js';
-import { openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -7,12 +7,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "button",
     {
       ref: "buttonEl",
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickRelatedTag && _ctx.clickRelatedTag(...args)),
       class: normalizeClass(["x-tag x-related-tag", _ctx.dynamicClasses]),
-      "data-test": "related-tag"
+      "data-test": "related-tag",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickRelatedTag && _ctx.clickRelatedTag(...args))
     },
     [
-      createCommentVNode("\n      @slot Custom content that replaces the RelatedTag default content.\n      @binding {RelatedTag} relatedTag - Related tag data.\n      @binding {boolean} isSelected - Related tag status.\n      @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n      "),
       renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ relatedTag: _ctx.relatedTag, isSelected: _ctx.isSelected, shouldHighlightCurated: _ctx.shouldHighlightCurated })), () => [
         createTextVNode(
           toDisplayString(_ctx.relatedTag.tag),

package/js/x-modules/related-tags/components/related-tag.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-tag.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonEl\"\n    @click=\"clickRelatedTag\"\n    class=\"x-tag x-related-tag\"\n    data-test=\"related-tag\"\n    :class=\"dynamicClasses\"\n  >\n    <!--\n      @slot Custom content that replaces the RelatedTag default content.\n      @binding {RelatedTag} relatedTag - Related tag data.\n      @binding {boolean} isSelected - Related tag status.\n      @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n      -->\n    <slot v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\">{{ relatedTag.tag }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, PropType, ref } from 'vue';\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { relatedTagsXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * This component renders a related tag for a query. A related tag is a descriptive keyword\n   * related to the current query to fine-tune the search. For example, if you are searching\n   * for *lego*, a related tag could be *city*, refining the search with *lego city*.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedTag',\n    xModule: relatedTagsXModule.name,\n    props: {\n      /**\n       * Indicates if the curated related tag should be highlighted.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean,\n        default: false\n      },\n      /**\n       * The related tag model data.\n       *\n       * @public\n       */\n      relatedTag: {\n        type: Object as PropType<RelatedTagModel>,\n        required: true\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const buttonEl = ref<HTMLElement | undefined>();\n\n      /**\n       * The selected related tags.\n       *\n       * @internal\n       */\n      const { selectedRelatedTags }: Dictionary<ComputedRef<RelatedTagModel[]>> = useState(\n        'relatedTags',\n        ['selectedRelatedTags']\n      );\n\n      /**\n       * Check if the related tag is selected or not.\n       *\n       * @returns If the related tag is selected.\n       *\n       * @internal\n       */\n      const isSelected = computed(() => selectedRelatedTags.value.includes(props.relatedTag));\n\n      /**\n       * Blurs the related tag if it is selected.\n       *\n       * @public\n       */\n      const blurRelatedTag = () => {\n        if (isSelected.value) {\n          buttonEl.value?.blur();\n        }\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      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n        target: buttonEl.value as HTMLElement,\n        feature: 'related_tag'\n      });\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = () => {\n        // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the\n        // isSelected value before emitting this selection events.\n        $x.emit(\n          isSelected.value ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n          props.relatedTag,\n          createEventMetadata()\n        );\n        $x.emit('UserPickedARelatedTag', props.relatedTag, createEventMetadata());\n      };\n\n      /**\n       * Handles the click on the button.\n       *\n       * @public\n       */\n      const clickRelatedTag = () => {\n        emitEvents();\n        blurRelatedTag();\n      };\n\n      /**\n       * Check if the related tag is curated and should be highlighted.\n       *\n       * @returns True if the related tag is curated and should be highlighted.\n       *\n       * @internal\n       */\n      const shouldHighlightCurated = computed(\n        () => props.highlightCurated && (props.relatedTag.isCurated ?? false)\n      );\n\n      /**\n       * Adds the dynamic css classes to the component.\n       *\n       * @returns The class to be added to the component.\n       *\n       * @internal\n       */\n      const dynamicClasses = computed(\n        (): VueCSSClasses => ({\n          'x-selected x-related-tag--is-selected': isSelected.value,\n          'x-related-tag--is-curated': shouldHighlightCurated.value\n        })\n      );\n\n      return {\n        buttonEl,\n        dynamicClasses,\n        isSelected,\n        clickRelatedTag,\n        shouldHighlightCurated\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Dynamic classes\n\n`RelatedTag` uses the following dynamic CSS classes so you can style it when is:\n\n- Selected: `x-related-tag--is-selected`.\n- Curated: `x-related-tag--is-curated`.\n\n## Events\n\nThis component emits the following events:\n\n- [`UserDeselectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPickedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserSelectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nThe QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example related tag data is passed as a prop.\n\n_Here you can see how the RelatedTag component is rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" />\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, an HTML span element is passed in the `default` slot.\n\n_See how the related tag can be rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" #default=\"{ relatedTag }\">\n    <span :aria-label=\"relatedTag.tag\">{{ relatedTag.tag }}</span>\n  </RelatedTag>\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\nevent is implemented, as illustrated by the “Tag” message returned.\n\n_See how the event is triggered when the related tag is clicked._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" @UserSelectedARelatedTag=\"alertRelatedTag\" />\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    },\n    methods: {\n      alertRelatedTag(relatedTag) {\n        alert(`You have clicked the related tag: ${relatedTag.query}`);\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;SAEQ,WAAU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACbA,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MACR,GAAK,EAAA,UAAA;AAAA,MACL,gBAAU,CAAa,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,eAAA,IAAA,IAAA,CAAA,eAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,qBAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAGvB,MAAA,WAAA,EAAA,aAAA;AAAA,KAAA;AAMA,IAAA;AAAA,MAAAC,kBAAA,CAdJ,2SAcuF,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,sBAAA,EAAA,IAAA,CAAA,sBAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"related-tag.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonEl\"\n    class=\"x-tag x-related-tag\"\n    data-test=\"related-tag\"\n    :class=\"dynamicClasses\"\n    @click=\"clickRelatedTag\"\n  >\n    <!--\n      @slot Custom content that replaces the RelatedTag default content.\n      @binding {RelatedTag} relatedTag - Related tag data.\n      @binding {boolean} isSelected - Related tag status.\n      @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n      -->\n    <slot v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\">{{ relatedTag.tag }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { RelatedTag as RelatedTagModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { relatedTagsXModule } from '../x-module'\n\n/**\n * This component renders a related tag for a query. A related tag is a descriptive keyword\n * related to the current query to fine-tune the search. For example, if you are searching\n * for *lego*, a related tag could be *city*, refining the search with *lego city*.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RelatedTag',\n  xModule: relatedTagsXModule.name,\n  props: {\n    /**\n     * Indicates if the curated related tag should be highlighted.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * The related tag model data.\n     *\n     * @public\n     */\n    relatedTag: {\n      type: Object as PropType<RelatedTagModel>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const buttonEl = ref<HTMLElement | undefined>()\n\n    /**\n     * The selected related tags.\n     *\n     * @internal\n     */\n    const { selectedRelatedTags } = useState('relatedTags')\n\n    /**\n     * Check if the related tag is selected or not.\n     *\n     * @returns If the related tag is selected.\n     *\n     * @internal\n     */\n    const isSelected = computed(() => selectedRelatedTags.value.includes(props.relatedTag))\n\n    /**\n     * Blurs the related tag if it is selected.\n     *\n     * @public\n     */\n    const blurRelatedTag = () => {\n      if (isSelected.value) {\n        buttonEl.value?.blur()\n      }\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    const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n      target: buttonEl.value as HTMLElement,\n      feature: 'related_tag',\n    })\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = () => {\n      // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the\n      // isSelected value before emitting this selection events.\n      $x.emit(\n        isSelected.value ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n        props.relatedTag,\n        createEventMetadata(),\n      )\n      $x.emit('UserPickedARelatedTag', props.relatedTag, createEventMetadata())\n    }\n\n    /**\n     * Handles the click on the button.\n     *\n     * @public\n     */\n    const clickRelatedTag = () => {\n      emitEvents()\n      blurRelatedTag()\n    }\n\n    /**\n     * Check if the related tag is curated and should be highlighted.\n     *\n     * @returns True if the related tag is curated and should be highlighted.\n     *\n     * @internal\n     */\n    const shouldHighlightCurated = computed(\n      () => props.highlightCurated && (props.relatedTag.isCurated ?? false),\n    )\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The class to be added to the component.\n     *\n     * @internal\n     */\n    const dynamicClasses = computed(\n      (): VueCSSClasses => ({\n        'x-selected x-related-tag--is-selected': isSelected.value,\n        'x-related-tag--is-curated': shouldHighlightCurated.value,\n      }),\n    )\n\n    return {\n      buttonEl,\n      dynamicClasses,\n      isSelected,\n      clickRelatedTag,\n      shouldHighlightCurated,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Dynamic classes\n\n`RelatedTag` uses the following dynamic CSS classes so you can style it when is:\n\n- Selected: `x-related-tag--is-selected`.\n- Curated: `x-related-tag--is-curated`.\n\n## Events\n\nThis component emits the following events:\n\n- [`UserDeselectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPickedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserSelectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nThe QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example related tag data is passed as a prop.\n\n_Here you can see how the RelatedTag component is rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" />\n</template>\n\n<script>\nimport { RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagDemo',\n  components: {\n    RelatedTag,\n  },\n  data() {\n    return {\n      tag: {\n        modelName: 'RelatedTag',\n        query: 'high heel',\n        isCurated: false,\n        tag: 'heel',\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with default slot\n\nIn this example, an HTML span element is passed in the `default` slot.\n\n_See how the related tag can be rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" #default=\"{ relatedTag }\">\n    <span :aria-label=\"relatedTag.tag\">{{ relatedTag.tag }}</span>\n  </RelatedTag>\n</template>\n\n<script>\nimport { RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagDemo',\n  components: {\n    RelatedTag,\n  },\n  data() {\n    return {\n      tag: {\n        modelName: 'RelatedTag',\n        query: 'high heel',\n        isCurated: false,\n        tag: 'heel',\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, the [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\nevent is implemented, as illustrated by the “Tag” message returned.\n\n_See how the event is triggered when the related tag is clicked._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" @UserSelectedARelatedTag=\"alertRelatedTag\" />\n</template>\n\n<script>\nimport { RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagDemo',\n  components: {\n    RelatedTag,\n  },\n  data() {\n    return {\n      tag: {\n        modelName: 'RelatedTag',\n        query: 'high heel',\n        isCurated: false,\n        tag: 'heel',\n      },\n    }\n  },\n  methods: {\n    alertRelatedTag(relatedTag) {\n      alert(`You have clicked the related tag: ${relatedTag.query}`)\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","dynamicClasses","_normalizeClass","relatedTag"],"mappings":";;;;SAEQ,WAAU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACTA,SAHT,EAAA,EAAAC,kBAAA;AAAA,IAGU,QAAA;AAAA,IAEEC;AAAAA,MADR,GAAA,EAAA,UAAA;AAAA,MAEC,OAAKC,cAAE,CAAA,CAAA,qBAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,MAAA,WAAA,EAAA,aAAA;MAQR,OAA6F,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAdjG,sDAcoBC,GAAU,IAAA,CAAA,CAAA;AAAA,KAAA;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/related-tags/components/related-tag.vue2.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue';
-import { relatedTagsXModule } from '../x-module.js';
 import { use$x } from '../../../composables/use-_x.js';
 import { useState } from '../../../composables/use-state.js';
+import { relatedTagsXModule } from '../x-module.js';
 
 /**
  * This component renders a related tag for a query. A related tag is a descriptive keyword
@@ -21,7 +21,7 @@ var _sfc_main = defineComponent({
          */
         highlightCurated: {
             type: Boolean,
-            default: false
+            default: false,
         },
         /**
          * The related tag model data.
@@ -30,8 +30,8 @@ var _sfc_main = defineComponent({
          */
         relatedTag: {
             type: Object,
-            required: true
-        }
+            required: true,
+        },
     },
     setup(props) {
         const $x = use$x();
@@ -41,7 +41,7 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const { selectedRelatedTags } = useState('relatedTags', ['selectedRelatedTags']);
+        const { selectedRelatedTags } = useState('relatedTags');
         /**
          * Check if the related tag is selected or not.
          *
@@ -68,7 +68,7 @@ var _sfc_main = defineComponent({
          */
         const createEventMetadata = () => ({
             target: buttonEl.value,
-            feature: 'related_tag'
+            feature: 'related_tag',
         });
         /**
          * Emits events when the button is clicked.
@@ -107,16 +107,16 @@ var _sfc_main = defineComponent({
          */
         const dynamicClasses = computed(() => ({
             'x-selected x-related-tag--is-selected': isSelected.value,
-            'x-related-tag--is-curated': shouldHighlightCurated.value
+            'x-related-tag--is-curated': shouldHighlightCurated.value,
         }));
         return {
             buttonEl,
             dynamicClasses,
             isSelected,
             clickRelatedTag,
-            shouldHighlightCurated
+            shouldHighlightCurated,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"related-tag.vue2.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonEl\"\n    @click=\"clickRelatedTag\"\n    class=\"x-tag x-related-tag\"\n    data-test=\"related-tag\"\n    :class=\"dynamicClasses\"\n  >\n    <!--\n      @slot Custom content that replaces the RelatedTag default content.\n      @binding {RelatedTag} relatedTag - Related tag data.\n      @binding {boolean} isSelected - Related tag status.\n      @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n      -->\n    <slot v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\">{{ relatedTag.tag }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, PropType, ref } from 'vue';\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { relatedTagsXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * This component renders a related tag for a query. A related tag is a descriptive keyword\n   * related to the current query to fine-tune the search. For example, if you are searching\n   * for *lego*, a related tag could be *city*, refining the search with *lego city*.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedTag',\n    xModule: relatedTagsXModule.name,\n    props: {\n      /**\n       * Indicates if the curated related tag should be highlighted.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean,\n        default: false\n      },\n      /**\n       * The related tag model data.\n       *\n       * @public\n       */\n      relatedTag: {\n        type: Object as PropType<RelatedTagModel>,\n        required: true\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const buttonEl = ref<HTMLElement | undefined>();\n\n      /**\n       * The selected related tags.\n       *\n       * @internal\n       */\n      const { selectedRelatedTags }: Dictionary<ComputedRef<RelatedTagModel[]>> = useState(\n        'relatedTags',\n        ['selectedRelatedTags']\n      );\n\n      /**\n       * Check if the related tag is selected or not.\n       *\n       * @returns If the related tag is selected.\n       *\n       * @internal\n       */\n      const isSelected = computed(() => selectedRelatedTags.value.includes(props.relatedTag));\n\n      /**\n       * Blurs the related tag if it is selected.\n       *\n       * @public\n       */\n      const blurRelatedTag = () => {\n        if (isSelected.value) {\n          buttonEl.value?.blur();\n        }\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      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n        target: buttonEl.value as HTMLElement,\n        feature: 'related_tag'\n      });\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = () => {\n        // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the\n        // isSelected value before emitting this selection events.\n        $x.emit(\n          isSelected.value ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n          props.relatedTag,\n          createEventMetadata()\n        );\n        $x.emit('UserPickedARelatedTag', props.relatedTag, createEventMetadata());\n      };\n\n      /**\n       * Handles the click on the button.\n       *\n       * @public\n       */\n      const clickRelatedTag = () => {\n        emitEvents();\n        blurRelatedTag();\n      };\n\n      /**\n       * Check if the related tag is curated and should be highlighted.\n       *\n       * @returns True if the related tag is curated and should be highlighted.\n       *\n       * @internal\n       */\n      const shouldHighlightCurated = computed(\n        () => props.highlightCurated && (props.relatedTag.isCurated ?? false)\n      );\n\n      /**\n       * Adds the dynamic css classes to the component.\n       *\n       * @returns The class to be added to the component.\n       *\n       * @internal\n       */\n      const dynamicClasses = computed(\n        (): VueCSSClasses => ({\n          'x-selected x-related-tag--is-selected': isSelected.value,\n          'x-related-tag--is-curated': shouldHighlightCurated.value\n        })\n      );\n\n      return {\n        buttonEl,\n        dynamicClasses,\n        isSelected,\n        clickRelatedTag,\n        shouldHighlightCurated\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Dynamic classes\n\n`RelatedTag` uses the following dynamic CSS classes so you can style it when is:\n\n- Selected: `x-related-tag--is-selected`.\n- Curated: `x-related-tag--is-curated`.\n\n## Events\n\nThis component emits the following events:\n\n- [`UserDeselectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPickedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserSelectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nThe QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example related tag data is passed as a prop.\n\n_Here you can see how the RelatedTag component is rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" />\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, an HTML span element is passed in the `default` slot.\n\n_See how the related tag can be rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" #default=\"{ relatedTag }\">\n    <span :aria-label=\"relatedTag.tag\">{{ relatedTag.tag }}</span>\n  </RelatedTag>\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\nevent is implemented, as illustrated by the “Tag” message returned.\n\n_See how the event is triggered when the related tag is clicked._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" @UserSelectedARelatedTag=\"alertRelatedTag\" />\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    },\n    methods: {\n      alertRelatedTag(relatedTag) {\n        alert(`You have clicked the related tag: ${relatedTag.query}`);\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA4BE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAmC;AACzC,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,WAAW,GAAG,EAA2B,CAAA;AAE/C;;;;AAIE;AACF,QAAA,MAAM,EAAE,mBAAoB,EAAC,GAA+C,QAAQ,CAClF,aAAa,EACb,CAAC,qBAAqB,CAAA,CACvB,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,aAAa,QAAQ,CAAC,MAAM,mBAAmB,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAA;AAEvF;;;;AAIE;QACF,MAAM,iBAAiB,MAAM;YAC3B,IAAI,UAAU,CAAC,KAAK,EAAE;AACpB,gBAAA,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,CAAA;AACxB,aAAA;AACF,SAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,QAAQ,CAAC,KAAoB;AACrC,YAAA,OAAO,EAAE,aAAY;AACtB,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;;;YAGvB,EAAE,CAAC,IAAI,CACL,UAAU,CAAC,KAAM,GAAE,2BAA0B,GAAI,yBAAyB,EAC1E,KAAK,CAAC,UAAU,EAChB,mBAAmB,EAAC,CACrB,CAAA;AACD,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC,UAAU,EAAE,mBAAmB,EAAE,CAAC,CAAA;AAC3E,SAAC,CAAA;AAED;;;;AAIE;QACF,MAAM,kBAAkB,MAAM;AAC5B,YAAA,UAAU,EAAE,CAAA;AACZ,YAAA,cAAc,EAAE,CAAA;AAClB,SAAC,CAAA;AAED;;;;;;AAME;QACF,MAAM,sBAAqB,GAAI,QAAQ,CACrC,MAAM,KAAK,CAAC,gBAAiB,KAAI,KAAK,CAAC,UAAU,CAAC,SAAQ,IAAK,KAAK,CAAA,CACrE,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAC7B,OAAsB;YACpB,uCAAuC,EAAE,UAAU,CAAC,KAAK;YACzD,2BAA2B,EAAE,sBAAsB,CAAC,KAAI;AACzD,SAAA,CAAA,CACF,CAAA;QAED,OAAO;YACL,QAAQ;YACR,cAAc;YACd,UAAU;YACV,eAAe;YACf,sBAAqB;SACtB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"related-tag.vue2.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonEl\"\n    class=\"x-tag x-related-tag\"\n    data-test=\"related-tag\"\n    :class=\"dynamicClasses\"\n    @click=\"clickRelatedTag\"\n  >\n    <!--\n      @slot Custom content that replaces the RelatedTag default content.\n      @binding {RelatedTag} relatedTag - Related tag data.\n      @binding {boolean} isSelected - Related tag status.\n      @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n      -->\n    <slot v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\">{{ relatedTag.tag }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { RelatedTag as RelatedTagModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { WireMetadata } from '../../../wiring/wiring.types'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { relatedTagsXModule } from '../x-module'\n\n/**\n * This component renders a related tag for a query. A related tag is a descriptive keyword\n * related to the current query to fine-tune the search. For example, if you are searching\n * for *lego*, a related tag could be *city*, refining the search with *lego city*.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RelatedTag',\n  xModule: relatedTagsXModule.name,\n  props: {\n    /**\n     * Indicates if the curated related tag should be highlighted.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * The related tag model data.\n     *\n     * @public\n     */\n    relatedTag: {\n      type: Object as PropType<RelatedTagModel>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const buttonEl = ref<HTMLElement | undefined>()\n\n    /**\n     * The selected related tags.\n     *\n     * @internal\n     */\n    const { selectedRelatedTags } = useState('relatedTags')\n\n    /**\n     * Check if the related tag is selected or not.\n     *\n     * @returns If the related tag is selected.\n     *\n     * @internal\n     */\n    const isSelected = computed(() => selectedRelatedTags.value.includes(props.relatedTag))\n\n    /**\n     * Blurs the related tag if it is selected.\n     *\n     * @public\n     */\n    const blurRelatedTag = () => {\n      if (isSelected.value) {\n        buttonEl.value?.blur()\n      }\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    const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n      target: buttonEl.value as HTMLElement,\n      feature: 'related_tag',\n    })\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = () => {\n      // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the\n      // isSelected value before emitting this selection events.\n      $x.emit(\n        isSelected.value ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n        props.relatedTag,\n        createEventMetadata(),\n      )\n      $x.emit('UserPickedARelatedTag', props.relatedTag, createEventMetadata())\n    }\n\n    /**\n     * Handles the click on the button.\n     *\n     * @public\n     */\n    const clickRelatedTag = () => {\n      emitEvents()\n      blurRelatedTag()\n    }\n\n    /**\n     * Check if the related tag is curated and should be highlighted.\n     *\n     * @returns True if the related tag is curated and should be highlighted.\n     *\n     * @internal\n     */\n    const shouldHighlightCurated = computed(\n      () => props.highlightCurated && (props.relatedTag.isCurated ?? false),\n    )\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The class to be added to the component.\n     *\n     * @internal\n     */\n    const dynamicClasses = computed(\n      (): VueCSSClasses => ({\n        'x-selected x-related-tag--is-selected': isSelected.value,\n        'x-related-tag--is-curated': shouldHighlightCurated.value,\n      }),\n    )\n\n    return {\n      buttonEl,\n      dynamicClasses,\n      isSelected,\n      clickRelatedTag,\n      shouldHighlightCurated,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Dynamic classes\n\n`RelatedTag` uses the following dynamic CSS classes so you can style it when is:\n\n- Selected: `x-related-tag--is-selected`.\n- Curated: `x-related-tag--is-curated`.\n\n## Events\n\nThis component emits the following events:\n\n- [`UserDeselectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPickedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserSelectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nThe QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example related tag data is passed as a prop.\n\n_Here you can see how the RelatedTag component is rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" />\n</template>\n\n<script>\nimport { RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagDemo',\n  components: {\n    RelatedTag,\n  },\n  data() {\n    return {\n      tag: {\n        modelName: 'RelatedTag',\n        query: 'high heel',\n        isCurated: false,\n        tag: 'heel',\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with default slot\n\nIn this example, an HTML span element is passed in the `default` slot.\n\n_See how the related tag can be rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" #default=\"{ relatedTag }\">\n    <span :aria-label=\"relatedTag.tag\">{{ relatedTag.tag }}</span>\n  </RelatedTag>\n</template>\n\n<script>\nimport { RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagDemo',\n  components: {\n    RelatedTag,\n  },\n  data() {\n    return {\n      tag: {\n        modelName: 'RelatedTag',\n        query: 'high heel',\n        isCurated: false,\n        tag: 'heel',\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, the [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\nevent is implemented, as illustrated by the “Tag” message returned.\n\n_See how the event is triggered when the related tag is clicked._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" @UserSelectedARelatedTag=\"alertRelatedTag\" />\n</template>\n\n<script>\nimport { RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagDemo',\n  components: {\n    RelatedTag,\n  },\n  data() {\n    return {\n      tag: {\n        modelName: 'RelatedTag',\n        query: 'high heel',\n        isCurated: false,\n        tag: 'heel',\n      },\n    }\n  },\n  methods: {\n    alertRelatedTag(relatedTag) {\n      alert(`You have clicked the related tag: ${relatedTag.query}`)\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA4BA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAmC;AACzC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,MAAM,QAAS,GAAE,GAAG,EAA0B,CAAA;AAE9C;;;;AAIE;QACF,MAAM,EAAE,qBAAsB,GAAE,QAAQ,CAAC,aAAa,CAAA,CAAA;AAEtD;;;;;;AAME;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM,mBAAmB,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA,CAAA;AAEtF;;;;AAIE;QACF,MAAM,iBAAiB,MAAM;YAC3B,IAAI,UAAU,CAAC,KAAK,EAAE;AACpB,gBAAA,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAC,CAAA;AACvB,aAAA;AACF,SAAA,CAAA;AAEA;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,QAAQ,CAAC,KAAoB;AACrC,YAAA,OAAO,EAAE,aAAa;AACvB,SAAA,CAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;;;YAGvB,EAAE,CAAC,IAAI,CACL,UAAU,CAAC,KAAM,GAAE,2BAA0B,GAAI,yBAAyB,EAC1E,KAAK,CAAC,UAAU,EAChB,mBAAmB,EAAE,CACvB,CAAA;AACA,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC,UAAU,EAAE,mBAAmB,EAAE,CAAA,CAAA;AAC1E,SAAA,CAAA;AAEA;;;;AAIE;QACF,MAAM,kBAAkB,MAAM;AAC5B,YAAA,UAAU,EAAC,CAAA;AACX,YAAA,cAAc,EAAC,CAAA;AACjB,SAAA,CAAA;AAEA;;;;;;AAME;QACF,MAAM,sBAAqB,GAAI,QAAQ,CACrC,MAAM,KAAK,CAAC,gBAAiB,KAAI,KAAK,CAAC,UAAU,CAAC,SAAQ,IAAK,KAAK,CAAC,CACvE,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAC7B,OAAsB;YACpB,uCAAuC,EAAE,UAAU,CAAC,KAAK;YACzD,2BAA2B,EAAE,sBAAsB,CAAC,KAAK;AAC1D,SAAA,CAAC,CACJ,CAAA;QAEA,OAAO;YACL,QAAQ;YACR,cAAc;YACd,UAAU;YACV,eAAe;YACf,sBAAsB;SACxB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/related-tags/components/related-tags.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './related-tags.vue2.js';
-import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot, mergeProps, createVNode, normalizeClass } from 'vue';
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, renderSlot, mergeProps, createVNode, normalizeClass, createCommentVNode } from 'vue';
 import './related-tags.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
@@ -21,21 +21,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "x-related-tags__item",
             "data-test": "related-tag-item"
           }, [
-            createCommentVNode("\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       "),
             renderSlot(_ctx.$slots, "related-tag", mergeProps({ ref_for: true }, { relatedTag, highlightCurated: _ctx.highlightCurated }), () => [
               createVNode(_component_RelatedTag, {
-                highlightCurated: _ctx.highlightCurated,
-                relatedTag,
+                "highlight-curated": _ctx.highlightCurated,
+                "related-tag": relatedTag,
                 class: normalizeClass(_ctx.itemClass)
               }, {
-                default: withCtx(({ relatedTag: relatedTag2, isSelected, shouldHighlightCurated }) => [
-                  createCommentVNode(" eslint-disable max-len "),
-                  createCommentVNode("\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            "),
-                  renderSlot(_ctx.$slots, "related-tag-content", mergeProps({ ref_for: true }, { relatedTag: relatedTag2, isSelected, shouldHighlightCurated }), void 0, true)
+                default: withCtx(({ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }) => [
+                  renderSlot(_ctx.$slots, "related-tag-content", mergeProps({ ref_for: true }, { relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }), void 0, true)
                 ]),
                 _: 2
                 /* DYNAMIC */
-              }, 1032, ["highlightCurated", "relatedTag", "class"])
+              }, 1032, ["highlight-curated", "related-tag", "class"])
             ], true)
           ]);
         }),

package/js/x-modules/related-tags/components/related-tags.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-tags.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.query\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag\n          :highlightCurated=\"highlightCurated\"\n          :relatedTag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { relatedTagsXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/index';\n  import { useGetter } from '../../../composables/use-getter';\n  import RelatedTag from './related-tag.vue';\n\n  /**\n   * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n   * default to select from after a query is performed to fine-tune search.\n   * For example, if you are searching for *lego*, different related tags could be *city*,\n   * *friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n   * or *lego harry potter*.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedTags',\n    xModule: relatedTagsXModule.name,\n    components: {\n      RelatedTag\n    },\n    props: {\n      /**\n       * Animation component that will be used to animate the suggestion.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n\n      /**\n       * Number of related tags to be rendered.\n       *\n       * @public\n       */\n      maxItemsToRender: Number,\n\n      /**\n       * Flag to indicate if the curated tags should be displayed different.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean,\n        default: false\n      },\n\n      /** Class inherited by content element. */\n      itemClass: String\n    },\n    setup(props) {\n      const storedRelatedTags: ComputedRef<RelatedTagModel[]> = useGetter('relatedTags', [\n        'relatedTags'\n      ]).relatedTags;\n\n      const relatedTags = computed((): RelatedTagModel[] =>\n        storedRelatedTags.value.slice(0, props.maxItemsToRender)\n      );\n\n      return {\n        relatedTags\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-related-tags {\n    display: flex;\n    flex-flow: row nowrap;\n    list-style: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\" />\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      RelatedTag\n    }\n  };\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      ResultsList\n    }\n  };\n</script>\n```\n\n## Customizing the related tags with classes\n\nThe `itemClass` prop can be used to add classes to the related tags.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\" itemClass=\"x-tag-outlined x-tag-auxiliary\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode","_renderSlot","highlightCurated","_mergeProps","_createVNode","itemClass","_normalizeClass","_withCtx","relatedTag"],"mappings":";;;;;;gCAGsBA,gBAAM,CAAA,YAAA,CAAA,CAAA;SAH5B,IAIY,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAK,EAAA,CAAA;AAAA,IACL,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,gBAAA;AANJ,IAAA,WAAA,EAAA,cAAA;AAAA,GAAA,EAAA;;iBAUY,IAAU,CAAA,EAAAC,kBAAA;AAAA,QAAMC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,UAAA,KAAA;AACjB,UAAA,OAAAL,SAAA,EAAuB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAC5B,GAAU,EAAA,UAAA,CAAA,KAAA;AAAA,YAAA,KAAA,EAAA,sBAAA;AAEV,YAAA,WAAA,EAAA,kBAAA;AAAA,WAKA,EAAA;AAAA,YAmBeG,kBAAA,CAAA,2OAAA,CAAA;AAAA,YAAAC,UAAA,CAjBV,aAAkBC,aAAgB,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA;AAAA,cAAAC,WAAA,CACxB,qBAAY,EAAA;AAAA,gBACtB,kBAvBX,IAuBkBC,CAAAA,gBAAAA;AAAAA,gBAAAA,UAAAA;AAEG,gBAAA,KAAA,EAAOC,eAAI,IAAY,CAAA,SAAA,CAAA;AAAA,eAAA,EAAA;AAEhC,gBAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,EAAA,UAAA,EAAAC,WAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,KAAA;AAAA,kBAMAR,kBAGE,CAAA,0BAAA,CAAA;AAAA,kBAAAA,kBAAA,CAAA,iVAAA,CAAA;AApCd,kBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,qBAAA,EAAAE,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAAK,WAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,iBAAA,CAAA;;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAR,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"related-tags.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.query\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag\n          :highlight-curated=\"highlightCurated\"\n          :related-tag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template\n            #default=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n          >\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { RelatedTag as RelatedTagModel } from '@empathyco/x-types'\nimport type { ComputedRef } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { AnimationProp } from '../../../types/index'\nimport { relatedTagsXModule } from '../x-module'\nimport RelatedTag from './related-tag.vue'\n\n/**\n * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n * default to select from after a query is performed to fine-tune search.\n * For example, if you are searching for *lego*, different related tags could be *city*,\n * friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n * or *lego harry potter*.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RelatedTags',\n  xModule: relatedTagsXModule.name,\n  components: {\n    RelatedTag,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n\n    /**\n     * Flag to indicate if the curated tags should be displayed different.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n\n    /** Class inherited by content element. */\n    itemClass: String,\n  },\n  setup(props) {\n    const storedRelatedTags: ComputedRef<RelatedTagModel[]> = useGetter('relatedTags').relatedTags\n\n    const relatedTags = computed((): RelatedTagModel[] =>\n      storedRelatedTags.value.slice(0, props.maxItemsToRender),\n    )\n\n    return {\n      relatedTags,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-related-tags {\n  display: flex;\n  flex-flow: row nowrap;\n  list-style: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { StaggeredFadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\" />\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n    RelatedTag,\n  },\n}\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { ResultsList } from '@empathyco/x-components/search'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n    ResultsList,\n  },\n}\n</script>\n```\n\n## Customizing the related tags with classes\n\nThe `itemClass` prop can be used to add classes to the related tags.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\" itemClass=\"x-tag-outlined x-tag-auxiliary\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_renderSlot","highlightCurated","_mergeProps","_createVNode","itemClass","_normalizeClass","_createCommentVNode"],"mappings":";;;;;;gCAGsBA,gBAAM,CAAA,YAAA,CAAA,CAAA;SAH5B,IAIY,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAK,EAAA,CAAA;AAAA,IACL,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,gBAAA;AANJ,IAAA,WAAA,EAAA,cAAA;AAAA,GAAA,EAAA;;iBAUY,IAAU,CAAA,EAAAC,kBAAA;AAAA,QAAMC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,UAAA,KAAA;AACjB,UAAA,OAAAL,SAAA,EAAuB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAC5B,GAAU,EAAA,UAAA,CAAA,KAAA;AAAA,YAAA,KAAA,EAAA,sBAAA;YAOV,WAsBO,EAAA,kBAAA;AAAA,WAAA,EAAA;AApBF,YAAAG,UAAA,CAAA,IAAA,CAAA,MAAA,EAAmBC,aAAgB,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA;AAAA,cAAAC,WAAA,CACnC,qBAAuB,EAAA;AAAA,gBACvB,qBAvBX,IAuBkBC,CAAAA,gBAAAA;AAAAA,gBAAAA,aAAAA,EAAAA,UAAAA;AAGL,gBAAA,KAAA,EAAOC,eAYN,IAZsB,CAAA,SAAA,CAAA;AAAA,eAAA,EAAA;;AA1BpC,kBAAAL,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,qBAAA,EAAAE,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,iBAAA,CAAA;;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAI,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/related-tags/components/related-tags.vue2.js

@@ -1,14 +1,14 @@
 import { defineComponent, computed } from 'vue';
-import { relatedTagsXModule } from '../x-module.js';
-import { AnimationProp } from '../../../types/animation-prop.js';
 import { useGetter } from '../../../composables/use-getter.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
+import { relatedTagsXModule } from '../x-module.js';
 import RelatedTag from './related-tag.vue.js';
 
 /**
  * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by
  * default to select from after a query is performed to fine-tune search.
  * For example, if you are searching for *lego*, different related tags could be *city*,
- * *friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,
+ * friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,
  * or *lego harry potter*.
  *
  * @public
@@ -17,7 +17,7 @@ var _sfc_main = defineComponent({
     name: 'RelatedTags',
     xModule: relatedTagsXModule.name,
     components: {
-        RelatedTag
+        RelatedTag,
     },
     props: {
         /**
@@ -27,7 +27,7 @@ var _sfc_main = defineComponent({
          */
         animation: {
             type: AnimationProp,
-            default: 'ul'
+            default: 'ul',
         },
         /**
          * Number of related tags to be rendered.
@@ -42,20 +42,18 @@ var _sfc_main = defineComponent({
          */
         highlightCurated: {
             type: Boolean,
-            default: false
+            default: false,
         },
         /** Class inherited by content element. */
-        itemClass: String
+        itemClass: String,
     },
     setup(props) {
-        const storedRelatedTags = useGetter('relatedTags', [
-            'relatedTags'
-        ]).relatedTags;
+        const storedRelatedTags = useGetter('relatedTags').relatedTags;
         const relatedTags = computed(() => storedRelatedTags.value.slice(0, props.maxItemsToRender));
         return {
-            relatedTags
+            relatedTags,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/related-tags/components/related-tags.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-tags.vue2.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.query\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag\n          :highlightCurated=\"highlightCurated\"\n          :relatedTag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { relatedTagsXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/index';\n  import { useGetter } from '../../../composables/use-getter';\n  import RelatedTag from './related-tag.vue';\n\n  /**\n   * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n   * default to select from after a query is performed to fine-tune search.\n   * For example, if you are searching for *lego*, different related tags could be *city*,\n   * *friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n   * or *lego harry potter*.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedTags',\n    xModule: relatedTagsXModule.name,\n    components: {\n      RelatedTag\n    },\n    props: {\n      /**\n       * Animation component that will be used to animate the suggestion.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n\n      /**\n       * Number of related tags to be rendered.\n       *\n       * @public\n       */\n      maxItemsToRender: Number,\n\n      /**\n       * Flag to indicate if the curated tags should be displayed different.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean,\n        default: false\n      },\n\n      /** Class inherited by content element. */\n      itemClass: String\n    },\n    setup(props) {\n      const storedRelatedTags: ComputedRef<RelatedTagModel[]> = useGetter('relatedTags', [\n        'relatedTags'\n      ]).relatedTags;\n\n      const relatedTags = computed((): RelatedTagModel[] =>\n        storedRelatedTags.value.slice(0, props.maxItemsToRender)\n      );\n\n      return {\n        relatedTags\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-related-tags {\n    display: flex;\n    flex-flow: row nowrap;\n    list-style: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\" />\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      RelatedTag\n    }\n  };\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags,\n      ResultsList\n    }\n  };\n</script>\n```\n\n## Customizing the related tags with classes\n\nThe `itemClass` prop can be used to add classes to the related tags.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\" itemClass=\"x-tag-outlined x-tag-auxiliary\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAoDE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;QACV,UAAS;AACV,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AAExB;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;;AAGD,QAAA,SAAS,EAAE,MAAK;AACjB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,iBAAiB,GAAmC,SAAS,CAAC,aAAa,EAAE;YACjF,aAAY;SACb,CAAC,CAAC,WAAW,CAAA;QAEd,MAAM,WAAY,GAAE,QAAQ,CAAC,MAC3B,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAA,CACxD,CAAA;QAED,OAAO;YACL,WAAU;SACX,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"related-tags.vue2.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.query\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag\n          :highlight-curated=\"highlightCurated\"\n          :related-tag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template\n            #default=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n          >\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { RelatedTag as RelatedTagModel } from '@empathyco/x-types'\nimport type { ComputedRef } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { AnimationProp } from '../../../types/index'\nimport { relatedTagsXModule } from '../x-module'\nimport RelatedTag from './related-tag.vue'\n\n/**\n * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n * default to select from after a query is performed to fine-tune search.\n * For example, if you are searching for *lego*, different related tags could be *city*,\n * friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n * or *lego harry potter*.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RelatedTags',\n  xModule: relatedTagsXModule.name,\n  components: {\n    RelatedTag,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n\n    /**\n     * Flag to indicate if the curated tags should be displayed different.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n\n    /** Class inherited by content element. */\n    itemClass: String,\n  },\n  setup(props) {\n    const storedRelatedTags: ComputedRef<RelatedTagModel[]> = useGetter('relatedTags').relatedTags\n\n    const relatedTags = computed((): RelatedTagModel[] =>\n      storedRelatedTags.value.slice(0, props.maxItemsToRender),\n    )\n\n    return {\n      relatedTags,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-related-tags {\n  display: flex;\n  flex-flow: row nowrap;\n  list-style: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { StaggeredFadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\" />\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n    RelatedTag,\n  },\n}\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { ResultsList } from '@empathyco/x-components/search'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n    ResultsList,\n  },\n}\n</script>\n```\n\n## Customizing the related tags with classes\n\nThe `itemClass` prop can be used to add classes to the related tags.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\" itemClass=\"x-tag-outlined x-tag-auxiliary\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAuDA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;QACV,UAAU;AACX,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AAExB;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;;AAGD,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;QACT,MAAM,iBAAiB,GAAmC,SAAS,CAAC,aAAa,CAAC,CAAC,WAAU,CAAA;QAE7F,MAAM,WAAY,GAAE,QAAQ,CAAC,MAC3B,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAC1D,CAAA;QAEA,OAAO;YACL,WAAW;SACb,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/related-tags/store/actions/fetch-and-save-related-tags.action.js

@@ -1,13 +1,12 @@
 import { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils.js';
 
-// eslint-disable-next-line max-len
 const { fetchAndSave, cancelPrevious } = createFetchAndSaveActions({
-    fetch({ dispatch }, request) {
+    async fetch({ dispatch }, request) {
         return dispatch('fetchRelatedTags', request);
     },
     onSuccess({ commit }, relatedTags) {
         commit('setRelatedTags', relatedTags);
-    }
+    },
 });
 /**
  * Default implementation for {@link RelatedTagsActions.fetchAndSaveRelatedTags} action.

package/js/x-modules/related-tags/store/actions/fetch-and-save-related-tags.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"fetch-and-save-related-tags.action.js","sources":["../../../../../../src/x-modules/related-tags/store/actions/fetch-and-save-related-tags.action.ts"],"sourcesContent":["import { RelatedTag, RelatedTagsRequest } from '@empathyco/x-types';\n// eslint-disable-next-line max-len\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';\nimport { RelatedTagsActionContext } from '../types';\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n  RelatedTagsActionContext,\n  RelatedTagsRequest | null,\n  RelatedTag[]\n>({\n  fetch({ dispatch }, request) {\n    return dispatch('fetchRelatedTags', request);\n  },\n  onSuccess({ commit }, relatedTags) {\n    commit('setRelatedTags', relatedTags);\n  }\n});\n\n/**\n * Default implementation for {@link RelatedTagsActions.fetchAndSaveRelatedTags} action.\n *\n * @public\n */\nexport const fetchAndSaveRelatedTags = fetchAndSave;\n\n/**\n * Default implementation for {@link RelatedTagsActions.fetchAndSaveRelatedTags} action.\n *\n * @public\n */\nexport const cancelFetchAndSaveRelatedTags = cancelPrevious;\n"],"names":[],"mappings":";;AACA;AAIA,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,yBAAyB,CAIhE;AACA,IAAA,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAA;AACzB,QAAA,OAAO,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC;KAC9C;AACD,IAAA,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,EAAA;AAC/B,QAAA,MAAM,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;KACvC;AACF,CAAA,CAAC,CAAC;AAEH;;;;AAIG;AACI,MAAM,uBAAuB,GAAG,aAAa;AAEpD;;;;AAIG;AACI,MAAM,6BAA6B,GAAG;;;;"}
+{"version":3,"file":"fetch-and-save-related-tags.action.js","sources":["../../../../../../src/x-modules/related-tags/store/actions/fetch-and-save-related-tags.action.ts"],"sourcesContent":["import type { RelatedTag, RelatedTagsRequest } from '@empathyco/x-types'\n\nimport type { RelatedTagsActionContext } from '../types'\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils'\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n  RelatedTagsActionContext,\n  RelatedTagsRequest | null,\n  RelatedTag[]\n>({\n  async fetch({ dispatch }, request) {\n    return dispatch('fetchRelatedTags', request)\n  },\n  onSuccess({ commit }, relatedTags) {\n    commit('setRelatedTags', relatedTags)\n  },\n})\n\n/**\n * Default implementation for {@link RelatedTagsActions.fetchAndSaveRelatedTags} action.\n *\n * @public\n */\nexport const fetchAndSaveRelatedTags = fetchAndSave\n\n/**\n * Default implementation for {@link RelatedTagsActions.fetchAndSaveRelatedTags} action.\n *\n * @public\n */\nexport const cancelFetchAndSaveRelatedTags = cancelPrevious\n"],"names":[],"mappings":";;AAKA,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,yBAAyB,CAIhE;AACA,IAAA,MAAM,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAA;AAC/B,QAAA,OAAO,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAA;KAC7C;AACD,IAAA,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,EAAA;AAC/B,QAAA,MAAM,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAA;KACtC;AACF,CAAA,CAAC,CAAA;AAEF;;;;AAIG;AACI,MAAM,uBAAuB,GAAG,aAAY;AAEnD;;;;AAIG;AACI,MAAM,6BAA6B,GAAG;;;;"}

package/js/x-modules/related-tags/store/actions/fetch-related-tags.action.js

@@ -10,7 +10,7 @@ import { XPlugin } from '../../../../plugins/x-plugin.js';
  *
  * @public
  */
-const fetchRelatedTags = (_context, request) => {
+const fetchRelatedTags = async (_context, request) => {
     return request ? XPlugin.adapter.relatedTags(request).then(({ relatedTags }) => relatedTags) : [];
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"fetch-related-tags.action.js","sources":["../../../../../../src/x-modules/related-tags/store/actions/fetch-related-tags.action.ts"],"sourcesContent":["import { XPlugin } from '../../../../plugins/x-plugin';\nimport { RelatedTagsXStoreModule } from '../types';\n\n/**\n * Default implementation for the {@link RelatedTagsActions.fetchRelatedTags}.\n *\n * @param _context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param request - The related tags request to make.\n * @returns A Promise of RelatedTag[] that resolves when it fetches related tags.\n *\n * @public\n */\nexport const fetchRelatedTags: RelatedTagsXStoreModule['actions']['fetchRelatedTags'] = (\n  _context,\n  request\n) => {\n  return request ? XPlugin.adapter.relatedTags(request).then(({ relatedTags }) => relatedTags) : [];\n};\n"],"names":[],"mappings":";;AAGA;;;;;;;;;AASG;MACU,gBAAgB,GAA2D,CACtF,QAAQ,EACR,OAAO,KACL;AACF,IAAA,OAAO,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAC,GAAG,EAAE,CAAC;AACpG;;;;"}
+{"version":3,"file":"fetch-related-tags.action.js","sources":["../../../../../../src/x-modules/related-tags/store/actions/fetch-related-tags.action.ts"],"sourcesContent":["import type { RelatedTagsXStoreModule } from '../types'\nimport { XPlugin } from '../../../../plugins/x-plugin'\n\n/**\n * Default implementation for the {@link RelatedTagsActions.fetchRelatedTags}.\n *\n * @param _context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param request - The related tags request to make.\n * @returns A Promise of RelatedTag[] that resolves when it fetches related tags.\n *\n * @public\n */\nexport const fetchRelatedTags: RelatedTagsXStoreModule['actions']['fetchRelatedTags'] = async (\n  _context,\n  request,\n) => {\n  return request ? XPlugin.adapter.relatedTags(request).then(({ relatedTags }) => relatedTags) : []\n}\n"],"names":[],"mappings":";;AAGA;;;;;;;;;AASG;AACU,MAAA,gBAAgB,GAA2D,OACtF,QAAQ,EACR,OAAO,KACL;AACF,IAAA,OAAO,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAC,GAAG,EAAE,CAAA;AACnG;;;;"}

package/js/x-modules/related-tags/store/actions/set-url-params.action.js

@@ -10,7 +10,7 @@ function createRelatedTags(tags, query) {
     return tags.map(tag => ({
         tag,
         modelName: 'RelatedTag',
-        query: query ? `${query} ${tag}` : ''
+        query: query ? `${query} ${tag}` : '',
     }));
 }
 /**
@@ -18,7 +18,10 @@ function createRelatedTags(tags, query) {
  *
  * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,
  * provided by Vuex.
+ * @param context.commit - commit context.
  * @param urlParams - The url params from the url.
+ * @param urlParams.query - query urlParams.
+ * @param urlParams.tag - tag urlParams.
  *
  * @public
  */

package/js/x-modules/related-tags/store/actions/set-url-params.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"set-url-params.action.js","sources":["../../../../../../src/x-modules/related-tags/store/actions/set-url-params.action.ts"],"sourcesContent":["import { RelatedTag } from '@empathyco/x-types';\nimport { UrlParams } from '../../../../types/url-params';\nimport { RelatedTagsXStoreModule } from '../types';\n\n/**\n * Helper method which creates the {@link RelatedTag} entity from the string array `tag` of the url.\n *\n * @param tags - List of tags from the url.\n * @param query - Query from the url.\n *\n * @returns A list of {@link RelatedTag | related tags}.\n */\nfunction createRelatedTags(tags: string[], query: string): RelatedTag[] {\n  return tags.map(tag => ({\n    tag,\n    modelName: 'RelatedTag',\n    query: query ? `${query} ${tag}` : ''\n  }));\n}\n\n/**\n * Default implementation for the {@link RelatedTagsActions.setUrlParams}.\n *\n * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param urlParams - The url params from the url.\n *\n * @public\n */\nexport const setUrlParams: RelatedTagsXStoreModule['actions']['setUrlParams'] = (\n  { commit },\n  { query, tag }: UrlParams\n) => {\n  commit('setSelectedRelatedTags', createRelatedTags(tag, query));\n  commit('setQuery', query);\n};\n"],"names":[],"mappings":"AAIA;;;;;;;AAOG;AACH,SAAS,iBAAiB,CAAC,IAAc,EAAE,KAAa,EAAA;IACtD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK;QACtB,GAAG;AACH,QAAA,SAAS,EAAE,YAAY;AACvB,QAAA,KAAK,EAAE,KAAK,GAAG,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,GAAG,EAAE;AACtC,KAAA,CAAC,CAAC,CAAC;AACN,CAAC;AAED;;;;;;;;AAQG;AACI,MAAM,YAAY,GAAuD,CAC9E,EAAE,MAAM,EAAE,EACV,EAAE,KAAK,EAAE,GAAG,EAAa,KACvB;IACF,MAAM,CAAC,wBAAwB,EAAE,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;AAChE,IAAA,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AAC5B;;;;"}
+{"version":3,"file":"set-url-params.action.js","sources":["../../../../../../src/x-modules/related-tags/store/actions/set-url-params.action.ts"],"sourcesContent":["import type { RelatedTag } from '@empathyco/x-types'\nimport type { UrlParams } from '../../../../types/url-params'\nimport type { RelatedTagsXStoreModule } from '../types'\n\n/**\n * Helper method which creates the {@link RelatedTag} entity from the string array `tag` of the url.\n *\n * @param tags - List of tags from the url.\n * @param query - Query from the url.\n *\n * @returns A list of {@link RelatedTag | related tags}.\n */\nfunction createRelatedTags(tags: string[], query: string): RelatedTag[] {\n  return tags.map(tag => ({\n    tag,\n    modelName: 'RelatedTag',\n    query: query ? `${query} ${tag}` : '',\n  }))\n}\n\n/**\n * Default implementation for the {@link RelatedTagsActions.setUrlParams}.\n *\n * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param context.commit - commit context.\n * @param urlParams - The url params from the url.\n * @param urlParams.query - query urlParams.\n * @param urlParams.tag - tag urlParams.\n *\n * @public\n */\nexport const setUrlParams: RelatedTagsXStoreModule['actions']['setUrlParams'] = (\n  { commit },\n  { query, tag }: UrlParams,\n) => {\n  commit('setSelectedRelatedTags', createRelatedTags(tag, query))\n  commit('setQuery', query)\n}\n"],"names":[],"mappings":"AAIA;;;;;;;AAOG;AACH,SAAS,iBAAiB,CAAC,IAAc,EAAE,KAAa,EAAA;IACtD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK;QACtB,GAAG;AACH,QAAA,SAAS,EAAE,YAAY;AACvB,QAAA,KAAK,EAAE,KAAK,GAAG,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,GAAG,EAAE;AACtC,KAAA,CAAC,CAAC,CAAA;AACL,CAAC;AAED;;;;;;;;;;;AAWG;AACI,MAAM,YAAY,GAAuD,CAC9E,EAAE,MAAM,EAAE,EACV,EAAE,KAAK,EAAE,GAAG,EAAa,KACvB;IACF,MAAM,CAAC,wBAAwB,EAAE,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAA;AAC/D,IAAA,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,CAAA;AAC3B;;;;"}

package/js/x-modules/related-tags/store/actions/toggle-related-tag.action.js

@@ -4,7 +4,6 @@
  * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,
  * provided by Vuex.
  * @param relatedTag - The selected related tag.
- *
  * @public
  */
 const toggleRelatedTag = ({ commit, state: { selectedRelatedTags } }, relatedTag) => {

package/js/x-modules/related-tags/store/actions/toggle-related-tag.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-related-tag.action.js","sources":["../../../../../../src/x-modules/related-tags/store/actions/toggle-related-tag.action.ts"],"sourcesContent":["import { RelatedTag } from '@empathyco/x-types';\nimport { RelatedTagsXStoreModule } from '../types';\n\n/**\n * Default implementation for the {@link RelatedTagsActions.toggleRelatedTag}.\n *\n * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param relatedTag - The selected related tag.\n *\n * @public\n */\nexport const toggleRelatedTag: RelatedTagsXStoreModule['actions']['toggleRelatedTag'] = (\n  { commit, state: { selectedRelatedTags } },\n  relatedTag: RelatedTag\n) => {\n  const isRelatedTagSelected = selectedRelatedTags.includes(relatedTag);\n  if (isRelatedTagSelected) {\n    commit(\n      'setSelectedRelatedTags',\n      selectedRelatedTags.filter(rt => rt !== relatedTag)\n    );\n    commit('setRelatedTags', [relatedTag]);\n  } else {\n    commit('setSelectedRelatedTags', [...selectedRelatedTags, relatedTag]);\n    commit('setRelatedTags', []);\n  }\n};\n"],"names":[],"mappings":"AAGA;;;;;;;;AAQG;AACU,MAAA,gBAAgB,GAA2D,CACtF,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,EAAE,EAC1C,UAAsB,KACpB;IACF,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AACtE,IAAA,IAAI,oBAAoB,EAAE;AACxB,QAAA,MAAM,CACJ,wBAAwB,EACxB,mBAAmB,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,UAAU,CAAC,CACpD,CAAC;AACF,QAAA,MAAM,CAAC,gBAAgB,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;AACxC,KAAA;AAAM,SAAA;QACL,MAAM,CAAC,wBAAwB,EAAE,CAAC,GAAG,mBAAmB,EAAE,UAAU,CAAC,CAAC,CAAC;AACvE,QAAA,MAAM,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;AAC9B,KAAA;AACH;;;;"}
+{"version":3,"file":"toggle-related-tag.action.js","sources":["../../../../../../src/x-modules/related-tags/store/actions/toggle-related-tag.action.ts"],"sourcesContent":["import type { RelatedTag } from '@empathyco/x-types'\nimport type { RelatedTagsXStoreModule } from '../types'\n\n/**\n * Default implementation for the {@link RelatedTagsActions.toggleRelatedTag}.\n *\n * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param relatedTag - The selected related tag.\n * @public\n */\nexport const toggleRelatedTag: RelatedTagsXStoreModule['actions']['toggleRelatedTag'] = (\n  { commit, state: { selectedRelatedTags } },\n  relatedTag: RelatedTag,\n) => {\n  const isRelatedTagSelected = selectedRelatedTags.includes(relatedTag)\n  if (isRelatedTagSelected) {\n    commit(\n      'setSelectedRelatedTags',\n      selectedRelatedTags.filter(rt => rt !== relatedTag),\n    )\n    commit('setRelatedTags', [relatedTag])\n  } else {\n    commit('setSelectedRelatedTags', [...selectedRelatedTags, relatedTag])\n    commit('setRelatedTags', [])\n  }\n}\n"],"names":[],"mappings":"AAGA;;;;;;;AAOG;AACU,MAAA,gBAAgB,GAA2D,CACtF,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,EAAE,EAC1C,UAAsB,KACpB;IACF,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAA;AACrE,IAAA,IAAI,oBAAoB,EAAE;AACxB,QAAA,MAAM,CACJ,wBAAwB,EACxB,mBAAmB,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,UAAU,CAAC,CACpD,CAAA;AACD,QAAA,MAAM,CAAC,gBAAgB,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;AACvC,KAAA;AAAM,SAAA;QACL,MAAM,CAAC,wBAAwB,EAAE,CAAC,GAAG,mBAAmB,EAAE,UAAU,CAAC,CAAC,CAAA;AACtE,QAAA,MAAM,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAA;AAC7B,KAAA;AACH;;;;"}

package/js/x-modules/related-tags/store/emitters.js

@@ -1,3 +1,4 @@
+import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { createEmitterArrayFilter } from '../../../utils/array.js';
 import { relatedTagsXStoreModule } from './module.js';
@@ -12,8 +13,8 @@ const relatedTagsEmitters = createStoreEmitters(relatedTagsXStoreModule, {
     RelatedTagsRequestUpdated: (_, getters) => getters.request,
     SelectedRelatedTagsChanged: {
         selector: state => state.selectedRelatedTags,
-        filter: createEmitterArrayFilter('tag')
-    }
+        filter: createEmitterArrayFilter('tag'),
+    },
 });
 
 export { relatedTagsEmitters };

package/js/x-modules/related-tags/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/related-tags/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { createEmitterArrayFilter } from '../../../utils/array';\nimport { relatedTagsXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the related-tags module.\n *\n * @internal\n */\nexport const relatedTagsEmitters = createStoreEmitters(relatedTagsXStoreModule, {\n  RelatedTagsChanged: state => state.relatedTags,\n  RelatedTagsRequestUpdated: (_, getters) => getters.request,\n  SelectedRelatedTagsChanged: {\n    selector: state => state.selectedRelatedTags,\n    filter: createEmitterArrayFilter('tag')\n  }\n});\n"],"names":[],"mappings":";;;;AAIA;;;;AAIG;AACU,MAAA,mBAAmB,GAAG,mBAAmB,CAAC,uBAAuB,EAAE;AAC9E,IAAA,kBAAkB,EAAE,KAAK,IAAI,KAAK,CAAC,WAAW;IAC9C,yBAAyB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;AAC1D,IAAA,0BAA0B,EAAE;AAC1B,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,mBAAmB;AAC5C,QAAA,MAAM,EAAE,wBAAwB,CAAC,KAAK,CAAC;AACxC,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/related-tags/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store'\nimport { createEmitterArrayFilter } from '../../../utils/array'\nimport { relatedTagsXStoreModule } from './module'\n\n/**\n * {@link StoreEmitters} For the related-tags module.\n *\n * @internal\n */\nexport const relatedTagsEmitters = createStoreEmitters(relatedTagsXStoreModule, {\n  RelatedTagsChanged: state => state.relatedTags,\n  RelatedTagsRequestUpdated: (_, getters) => getters.request,\n  SelectedRelatedTagsChanged: {\n    selector: state => state.selectedRelatedTags,\n    filter: createEmitterArrayFilter('tag'),\n  },\n})\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AACU,MAAA,mBAAmB,GAAG,mBAAmB,CAAC,uBAAuB,EAAE;AAC9E,IAAA,kBAAkB,EAAE,KAAK,IAAI,KAAK,CAAC,WAAW;IAC9C,yBAAyB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;AAC1D,IAAA,0BAA0B,EAAE;AAC1B,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,mBAAmB;AAC5C,QAAA,MAAM,EAAE,wBAAwB,CAAC,KAAK,CAAC;AACxC,KAAA;AACF,CAAA;;;;"}

package/js/x-modules/related-tags/store/getters/query.getter.js

@@ -5,13 +5,11 @@ import { createRelatedTagsQueryGetter } from '../../../../store/utils/query.util
  *
  * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the related
  * tags' module.
- *
  * @returns The query with the selected related tags concatenated.
- *
  * @public
  */
 const query = createRelatedTagsQueryGetter({
-    getRelatedTags: state => state.selectedRelatedTags
+    getRelatedTags: state => state.selectedRelatedTags,
 });
 
 export { query };

package/js/x-modules/related-tags/store/getters/query.getter.js.map

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

package/js/x-modules/related-tags/store/getters/related-tags.getter.js

@@ -4,10 +4,9 @@
  * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the related
  * tags module.
  * @returns The related tags.
- *
  * @public
  */
-const relatedTags = ({ relatedTags, selectedRelatedTags }) => [...selectedRelatedTags, ...relatedTags];
+const relatedTags = ({ relatedTags, selectedRelatedTags, }) => [...selectedRelatedTags, ...relatedTags];
 
 export { relatedTags };
 //# sourceMappingURL=related-tags.getter.js.map