@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

@@ -1,88 +1,38 @@
-import script from './recommendations.vue2.js';
+import _sfc_main from './recommendations.vue2.js';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot } from 'vue';
 import './recommendations.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.recommendations.length
-    ? _c(
-        "NoElement",
-        [
-          _vm._t(
-            "layout",
-            function () {
-              return [
-                _c(
-                  _vm.animation,
-                  {
-                    tag: "component",
-                    staticClass: "x-recommendations",
-                    attrs: { tag: "ul", "data-test": "recommendations" },
-                  },
-                  _vm._l(_vm.recommendations, function (recommendation) {
-                    return _c(
-                      "li",
-                      {
-                        key: recommendation.id,
-                        staticClass: "x-recommendations__item",
-                        attrs: { "data-test": "recommendation-item" },
-                      },
-                      [
-                        _vm._t("default", null, {
-                          recommendation: recommendation,
-                        }),
-                      ],
-                      2
-                    )
-                  }),
-                  0
-                ),
-              ]
-            },
-            null,
-            { animation: _vm.animation, recommendations: _vm.recommendations }
-          ),
-        ],
-        2
-      )
-    : _vm._e()
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.recommendations.length ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.animation), {
+    key: 0,
+    tag: "ul",
+    "data-test": "recommendations",
+    class: "x-recommendations"
+  }, {
+    default: withCtx(() => [
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.recommendations, (recommendation) => {
+          return openBlock(), createElementBlock("li", {
+            key: recommendation.id,
+            class: "x-recommendations__item",
+            "data-test": "recommendation-item"
+          }, [
+            createCommentVNode("\n        @slot (Required) Recommendation content.\n        @binding {recommendation} recommendation - Recommendation data.\n      "),
+            renderSlot(_ctx.$slots, "default", { recommendation }, void 0, true)
+          ]);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ]),
+    _: 3
+    /* FORWARDED */
+  })) : createCommentVNode("v-if", true);
+}
+var recommendations = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-42c2816b"]]);
 
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-749c9ce8";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { recommendations as default };
 //# sourceMappingURL=recommendations.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"recommendations.vue.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <NoElement v-if=\"recommendations.length\">\n    <!--\n      @slot Customized Recommendations layout.\n          @binding {Result[]} recommendations - Recommendations to render.\n          @binding {Vue} animation - Animation to animate the elements.\n    -->\n    <slot name=\"layout\" v-bind=\"{ animation, recommendations }\">\n      <component :is=\"animation\" tag=\"ul\" data-test=\"recommendations\" class=\"x-recommendations\">\n        <li\n          v-for=\"recommendation in recommendations\"\n          :key=\"recommendation.id\"\n          class=\"x-recommendations__item\"\n          data-test=\"recommendation-item\"\n        >\n          <!--\n            @slot (Required) Recommendation content.\n            @binding {recommendation} recommendation - Recommendation data.\n          -->\n          <slot :recommendation=\"recommendation\" />\n        </li>\n      </component>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Prop, Provide } from 'vue-property-decorator';\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { NoElement } from '../../../components/no-element';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { PropsWithType } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { recommendationsXModule } from '../x-module';\n\n  /**\n   * It renders a list of recommendations from the\n   * {@link RecommendationsState.recommendations} state by default.\n   * The component provides the slot layout which wraps the whole component with the\n   * recommendations bounded. It also provides the default slot to customize the item, which is\n   * within the layout slot, with the recommendation bounded. Each recommendation should be\n   * represented by a {@link BaseResultLink} component besides any other component.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(recommendationsXModule)],\n    components: {\n      NoElement\n    }\n  })\n  export default class Recommendations extends Vue {\n    /**\n     * The module's list of recommendations.\n     *\n     * @public\n     */\n    @State('recommendations', 'recommendations')\n    public storedRecommendations!: Result[];\n\n    /**\n     * Animation component that will be used to animate the recommendations.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of recommendations to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    @Provide()\n    protected resultClickExtraEvents: PropsWithType<XEventsTypes, Result>[] = [\n      'UserClickedARecommendation'\n    ];\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     *\n     * @internal\n     */\n    protected get recommendations(): Result[] {\n      return this.storedRecommendations.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-recommendations {\n    display: flex;\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provides integration with other\nmodules such like the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations #default=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    #default=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\n  import Vue from 'vue';\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, and due to Vue 2\nlimitations you will only be allowed to render a single element inside the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations #layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n<script>\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"recommendations.vue.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"x-recommendations\"\n  >\n    <li\n      v-for=\"recommendation in recommendations\"\n      :key=\"recommendation.id\"\n      class=\"x-recommendations__item\"\n      data-test=\"recommendation-item\"\n    >\n      <!--\n        @slot (Required) Recommendation content.\n        @binding {recommendation} recommendation - Recommendation data.\n      -->\n      <slot :recommendation=\"recommendation\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { computed, defineComponent, provide, ComputedRef } from 'vue';\n  import { useState } from '../../../composables';\n  import { PropsWithType } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { recommendationsXModule } from '../x-module';\n  import { AnimationProp } from '../../../types';\n\n  /**\n   * It renders a list of recommendations from the\n   * {@link RecommendationsState.recommendations} state by default.\n   * The component provides the slot layout which wraps the whole component with the\n   * recommendations bounded. It also provides the default slot to customize the item, which is\n   * within the layout slot, with the recommendation bounded. Each recommendation should be\n   * represented by a {@link BaseResultLink} component besides any other component.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Recommendations',\n    xModule: recommendationsXModule.name,\n    props: {\n      /** Animation component that will be used to animate the recommendations. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /** Number of recommendations to be rendered. */\n      maxItemsToRender: Number\n    },\n    setup(props, { slots }) {\n      /** The module's list of recommendations. */\n      const storedRecommendations: ComputedRef<Result[]> = useState('recommendations', [\n        'recommendations'\n      ]).recommendations;\n\n      /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n      provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n        'UserClickedARecommendation'\n      ]);\n\n      /**\n       * Slices the recommendations from the state.\n       *\n       * @returns - The list of recommendations slice by the number of items to render.\n       */\n      const recommendations = computed<Result[]>(() =>\n        storedRecommendations.value.slice(0, props.maxItemsToRender)\n      );\n\n      /**\n       * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n       * first `vNode` to avoid Fragments and Text root nodes.\n       * If there are no recommendations, nothing is rendered.\n       *\n       * @remarks `slotProps` must be values without Vue reactivity and located inside the\n       * render-function to update the binding data properly.\n       *\n       * @returns The root `vNode` of the `layout` slot or empty string if there are\n       * no recommendations.\n       */\n      function renderLayoutSlot() {\n        const slotProps = {\n          animation: props.animation,\n          recommendations: recommendations.value\n        };\n        return recommendations.value.length ? slots.layout?.(slotProps)[0] : '';\n      }\n\n      /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const componentProps = { recommendations };\n      return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps;\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-recommendations {\n    display: flex;\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provides integration with other\nmodules such like the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations #default=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    #default=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\n  import Vue from 'vue';\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, and due to Vue 2\nlimitations you will only be allowed to render a single element inside the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations #layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n<script>\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SAFT,IAIY,CAAA,eAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAA,EAAA,CAAA;AAAA,IACA,GAAK,EAAA,IAAA;AAAA,IAAA,WAAA,EAAA,iBAAA;AANT,IAAA,KAAA,EAAA,mBAAA;AAAA,GAAA,EAAA;;AAUY,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAAiBC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,eAAA,EAAA,CAAA,cAAA,KAAA;AAClB,UAAA,OAAAL,SAAA,EAA0B,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAC/B,GAAU,EAAA,cAAA,CAAA,EAAA;AAAA,YAAA,KAAA,EAAA,yBAAA;AAEV,YAAA,WAAA,EAAA,qBAAA;AAAA,WAIA,EAAA;AAAA,YAAAG,kBAAA,CAAA,qIAAA,CAAA;;;AAlBN,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -1,10 +1,18 @@
-import { __decorate } from 'tslib';
-import { Prop, Provide, Component } from 'vue-property-decorator';
-import Vue from 'vue';
-import { State } from '../../../components/decorators/store.decorators.js';
-import { NoElement } from '../../../components/no-element.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent, provide, computed } from 'vue';
+import '../../../composables/create-use-device.js';
+import '@vue/devtools-api';
+import '../../../plugins/devtools/timeline.devtools.js';
+import '@empathyco/x-utils';
+import 'rxjs/operators';
+import 'rxjs';
+import '../../../plugins/devtools/colors.utils.js';
+import '../../../plugins/x-bus.js';
+import '../../../plugins/x-plugin.js';
+import 'vuex';
+import '@vueuse/core';
+import { useState } from '../../../composables/use-state.js';
 import { recommendationsXModule } from '../x-module.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
 
 /**
  * It renders a list of recommendations from the
@@ -16,50 +24,57 @@ import { recommendationsXModule } from '../x-module.js';
  *
  * @public
  */
-let Recommendations = class Recommendations extends Vue {
-    constructor() {
-        super(...arguments);
+var _sfc_main = defineComponent({
+    name: 'Recommendations',
+    xModule: recommendationsXModule.name,
+    props: {
+        /** Animation component that will be used to animate the recommendations. */
+        animation: {
+            type: AnimationProp,
+            default: 'ul'
+        },
+        /** Number of recommendations to be rendered. */
+        maxItemsToRender: Number
+    },
+    setup(props, { slots }) {
+        /** The module's list of recommendations. */
+        const storedRecommendations = useState('recommendations', [
+            'recommendations'
+        ]).recommendations;
+        /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */
+        provide('resultClickExtraEvents', [
+            'UserClickedARecommendation'
+        ]);
         /**
-         * The additional events to be emitted by the mandatory {@link BaseResultLink} component.
+         * Slices the recommendations from the state.
          *
-         * @public
+         * @returns - The list of recommendations slice by the number of items to render.
          */
-        this.resultClickExtraEvents = [
-            'UserClickedARecommendation'
-        ];
-    }
-    /**
-     * Slices the recommendations from the state.
-     *
-     * @returns - The list of recommendations slice by the number of items to render.
-     *
-     * @internal
-     */
-    get recommendations() {
-        return this.storedRecommendations.slice(0, this.maxItemsToRender);
-    }
-};
-__decorate([
-    State('recommendations', 'recommendations')
-], Recommendations.prototype, "storedRecommendations", void 0);
-__decorate([
-    Prop({ default: 'ul' })
-], Recommendations.prototype, "animation", void 0);
-__decorate([
-    Prop()
-], Recommendations.prototype, "maxItemsToRender", void 0);
-__decorate([
-    Provide()
-], Recommendations.prototype, "resultClickExtraEvents", void 0);
-Recommendations = __decorate([
-    Component({
-        mixins: [xComponentMixin(recommendationsXModule)],
-        components: {
-            NoElement
+        const recommendations = computed(() => storedRecommendations.value.slice(0, props.maxItemsToRender));
+        /**
+         * Render function to execute the `layout` slot, binding `slotsProps` and getting only the
+         * first `vNode` to avoid Fragments and Text root nodes.
+         * If there are no recommendations, nothing is rendered.
+         *
+         * @remarks `slotProps` must be values without Vue reactivity and located inside the
+         * render-function to update the binding data properly.
+         *
+         * @returns The root `vNode` of the `layout` slot or empty string if there are
+         * no recommendations.
+         */
+        function renderLayoutSlot() {
+            const slotProps = {
+                animation: props.animation,
+                recommendations: recommendations.value
+            };
+            return recommendations.value.length ? slots.layout?.(slotProps)[0] : '';
         }
-    })
-], Recommendations);
-var script = Recommendations;
+        /* Hack to render through a render-function, the `layout` slot or, in its absence,
+         the component itself. It is the alternative for the NoElement antipattern. */
+        const componentProps = { recommendations };
+        return (slots.layout ? renderLayoutSlot : componentProps);
+    }
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=recommendations.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"recommendations.vue2.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { Component, Prop, Provide } from 'vue-property-decorator';\n  import { Result } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { NoElement } from '../../../components/no-element';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { PropsWithType } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { recommendationsXModule } from '../x-module';\n\n  /**\n   * It renders a list of recommendations from the\n   * {@link RecommendationsState.recommendations} state by default.\n   * The component provides the slot layout which wraps the whole component with the\n   * recommendations bounded. It also provides the default slot to customize the item, which is\n   * within the layout slot, with the recommendation bounded. Each recommendation should be\n   * represented by a {@link BaseResultLink} component besides any other component.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(recommendationsXModule)],\n    components: {\n      NoElement\n    }\n  })\n  export default class Recommendations extends Vue {\n    /**\n     * The module's list of recommendations.\n     *\n     * @public\n     */\n    @State('recommendations', 'recommendations')\n    public storedRecommendations!: Result[];\n\n    /**\n     * Animation component that will be used to animate the recommendations.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of recommendations to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    @Provide()\n    protected resultClickExtraEvents: PropsWithType<XEventsTypes, Result>[] = [\n      'UserClickedARecommendation'\n    ];\n\n    /**\n     * Slices the recommendations from the state.\n     *\n     * @returns - The list of recommendations slice by the number of items to render.\n     *\n     * @internal\n     */\n    protected get recommendations(): Result[] {\n      return this.storedRecommendations.slice(0, this.maxItemsToRender);\n    }\n  }\n"],"names":[],"mappings":";;;;;;;;AAqCE;;;;;;;;;AASG;AAOY,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,GAAG,CAAA;AAAjC,IAAA,WAAA,GAAA;;AAyBb;;;;AAIG;AAEO,QAAA,IAAA,CAAA,sBAAsB,GAA0C;YACxE,4BAA4B;SAC7B,CAAC;KAYH;AAVC;;;;;;AAMG;AACH,IAAA,IAAc,eAAe,GAAA;AAC3B,QAAA,OAAO,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACnE;CACF,CAAA;AAtCC,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;AACJ,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQxC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACE,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ1B,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AAC6B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQpC,UAAA,CAAA;AADC,IAAA,OAAO,EAAE;AAGR,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,wBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAjCiB,eAAe,GAAA,UAAA,CAAA;AANnC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC;AACjD,QAAA,UAAU,EAAE;YACV,SAAS;AACV,SAAA;KACF,CAAC;AACmB,CAAA,EAAA,eAAe,CA6CnC,CAAA;aA7CoB,eAAe;;;;"}
+{"version":3,"file":"recommendations.vue2.js","sources":["../../../../../src/x-modules/recommendations/components/recommendations.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"recommendations.length\"\n    tag=\"ul\"\n    data-test=\"recommendations\"\n    class=\"x-recommendations\"\n  >\n    <li\n      v-for=\"recommendation in recommendations\"\n      :key=\"recommendation.id\"\n      class=\"x-recommendations__item\"\n      data-test=\"recommendation-item\"\n    >\n      <!--\n        @slot (Required) Recommendation content.\n        @binding {recommendation} recommendation - Recommendation data.\n      -->\n      <slot :recommendation=\"recommendation\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { computed, defineComponent, provide, ComputedRef } from 'vue';\n  import { useState } from '../../../composables';\n  import { PropsWithType } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { recommendationsXModule } from '../x-module';\n  import { AnimationProp } from '../../../types';\n\n  /**\n   * It renders a list of recommendations from the\n   * {@link RecommendationsState.recommendations} state by default.\n   * The component provides the slot layout which wraps the whole component with the\n   * recommendations bounded. It also provides the default slot to customize the item, which is\n   * within the layout slot, with the recommendation bounded. Each recommendation should be\n   * represented by a {@link BaseResultLink} component besides any other component.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Recommendations',\n    xModule: recommendationsXModule.name,\n    props: {\n      /** Animation component that will be used to animate the recommendations. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /** Number of recommendations to be rendered. */\n      maxItemsToRender: Number\n    },\n    setup(props, { slots }) {\n      /** The module's list of recommendations. */\n      const storedRecommendations: ComputedRef<Result[]> = useState('recommendations', [\n        'recommendations'\n      ]).recommendations;\n\n      /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */\n      provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n        'UserClickedARecommendation'\n      ]);\n\n      /**\n       * Slices the recommendations from the state.\n       *\n       * @returns - The list of recommendations slice by the number of items to render.\n       */\n      const recommendations = computed<Result[]>(() =>\n        storedRecommendations.value.slice(0, props.maxItemsToRender)\n      );\n\n      /**\n       * Render function to execute the `layout` slot, binding `slotsProps` and getting only the\n       * first `vNode` to avoid Fragments and Text root nodes.\n       * If there are no recommendations, nothing is rendered.\n       *\n       * @remarks `slotProps` must be values without Vue reactivity and located inside the\n       * render-function to update the binding data properly.\n       *\n       * @returns The root `vNode` of the `layout` slot or empty string if there are\n       * no recommendations.\n       */\n      function renderLayoutSlot() {\n        const slotProps = {\n          animation: props.animation,\n          recommendations: recommendations.value\n        };\n        return recommendations.value.length ? slots.layout?.(slotProps)[0] : '';\n      }\n\n      /* Hack to render through a render-function, the `layout` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const componentProps = { recommendations };\n      return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps;\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-recommendations {\n    display: flex;\n    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events, but it makes components such as `BaseResultLink` emit additional\nevents:\n\n- [`UserClickedARecommendation`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the link of a recommendation.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Topclicked service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example on how the recommendations are rendered. You can customize how each\nresult is rendered by using the `default` slot. It is highly recommended to use base components such\nas the `BaseResultLink` or the `BaseResultAddToCart`, as they provides integration with other\nmodules such like the `tagging` one.\n\n```vue live\n<template>\n  <Recommendations #default=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the component will render a maximum of 4 result recommendations, and will use the\n`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.\n\n```vue live\n<template>\n  <Recommendations\n    #default=\"{ recommendation }\"\n    :maxItemsToRender=\"4\"\n    animation=\"StaggeredFadeAndSlide\"\n  >\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n      <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n    </BaseResultLink>\n    <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n  </Recommendations>\n</template>\n<script>\n  import Vue from 'vue';\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n\n### Play with the layout\n\nIn this example you can build your own layout, and the `Recommendations` component will just act as\na provider of the result recommendations data. Using the component this way, and due to Vue 2\nlimitations you will only be allowed to render a single element inside the `layout` slot.\n\n```vue live\n<template>\n  <Recommendations #layout=\"{ recommendations }\">\n    <div class=\"x-recommendations\">\n      <article\n        class=\"x-recommendations-list\"\n        v-for=\"recommendation in recommendations\"\n        :key=\"recommendation.id\"\n      >\n        <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n          <img :src=\"recommendation.images[0]\" class=\"x-recommendations__image\" />\n          <span class=\"x-recommendations__title\">{{ recommendation.name }}</span>\n        </BaseResultLink>\n        <BaseResultAddToCart>Add to cart</BaseResultAddToCart>\n      </article>\n    </div>\n  </Recommendations>\n</template>\n<script>\n  import { Recommendations } from '@empathyco/x-components/recommendations';\n  import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components';\n\n  export default {\n    name: 'RecommendationsDemo',\n    components: {\n      Recommendations,\n      BaseResultLink,\n      BaseResultAddToCart\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgCE;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,sBAAsB,CAAC,IAAI;AACpC,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;;AAED,QAAA,gBAAgB,EAAE,MAAK;AACxB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;;AAEpB,QAAA,MAAM,qBAAqB,GAA0B,QAAQ,CAAC,iBAAiB,EAAE;YAC/E,iBAAgB;SACjB,CAAC,CAAC,eAAe,CAAA;;QAGlB,OAAO,CAAwC,wBAAwB,EAAE;YACvE,4BAA2B;AAC5B,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,eAAgB,GAAE,QAAQ,CAAW,MACzC,qBAAqB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAA,CAC5D,CAAA;AAED;;;;;;;;;;AAUE;AACF,QAAA,SAAS,gBAAgB,GAAA;AACvB,YAAA,MAAM,YAAY;gBAChB,SAAS,EAAE,KAAK,CAAC,SAAS;gBAC1B,eAAe,EAAE,eAAe,CAAC,KAAI;aACtC,CAAA;YACD,OAAO,eAAe,CAAC,KAAK,CAAC,MAAO,GAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAE,GAAE,EAAE,CAAA;SACzE;AAEA;AAC6E;AAC7E,QAAA,MAAM,cAAe,GAAE,EAAE,iBAAiB,CAAA;AAC1C,QAAA,QAAQ,KAAK,CAAC,MAAO,GAAE,gBAAiB,GAAE,cAAc,EAA0B;KACpF;AACD,CAAA,CAAC;;;;"}

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

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-recommendations[data-v-749c9ce8] {\n  display: flex;\n  list-style-type: none;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/x-modules/recommendations/components/recommendations.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".x-recommendations[data-v-42c2816b]{display:flex;list-style-type:none}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=recommendations.vue3.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"recommendations.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"recommendations.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin.js';
 import { recommendationsEmitters } from './store/emitters.js';
 import { recommendationsXStoreModule } from './store/module.js';
 import { recommendationsWiring } from './wiring.js';
@@ -13,7 +14,8 @@ const recommendationsXModule = {
     storeModule: recommendationsXStoreModule,
     storeEmitters: recommendationsEmitters,
     wiring: recommendationsWiring
-};
+};
+XPlugin.registerXModule(recommendationsXModule);
 
 export { recommendationsXModule };
 //# sourceMappingURL=x-module.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/recommendations/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { recommendationsEmitters } from './store/emitters';\nimport { recommendationsXStoreModule } from './store/module';\nimport { RecommendationsXStoreModule } from './store/types';\nimport { recommendationsWiring } from './wiring';\n\n/**\n * Recommendations {@link XModule} alias.\n *\n * @public\n */\n\nexport type RecommendationsXModule = XModule<RecommendationsXStoreModule>;\n/**\n * Recommendations {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `recommendations` entry point.\n *\n * @public\n */\n\nexport const recommendationsXModule: RecommendationsXModule = {\n  name: 'recommendations',\n  storeModule: recommendationsXStoreModule,\n  storeEmitters: recommendationsEmitters,\n  wiring: recommendationsWiring\n};\n"],"names":[],"mappings":";;;;AAaA;;;;;AAKG;AAEU,MAAA,sBAAsB,GAA2B;AAC5D,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,WAAW,EAAE,2BAA2B;AACxC,IAAA,aAAa,EAAE,uBAAuB;AACtC,IAAA,MAAM,EAAE,qBAAqB;;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/recommendations/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { recommendationsEmitters } from './store/emitters';\nimport { recommendationsXStoreModule } from './store/module';\nimport { RecommendationsXStoreModule } from './store/types';\nimport { recommendationsWiring } from './wiring';\n\n/**\n * Recommendations {@link XModule} alias.\n *\n * @public\n */\n\nexport type RecommendationsXModule = XModule<RecommendationsXStoreModule>;\n/**\n * Recommendations {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `recommendations` entry point.\n *\n * @public\n */\n\nexport const recommendationsXModule: RecommendationsXModule = {\n  name: 'recommendations',\n  storeModule: recommendationsXStoreModule,\n  storeEmitters: recommendationsEmitters,\n  wiring: recommendationsWiring\n};\n\nXPlugin.registerXModule(recommendationsXModule);\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AAEU,MAAA,sBAAsB,GAA2B;AAC5D,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,WAAW,EAAE,2BAA2B;AACxC,IAAA,aAAa,EAAE,uBAAuB;AACtC,IAAA,MAAM,EAAE,qBAAqB;EAC7B;AAEF,OAAO,CAAC,eAAe,CAAC,sBAAsB,CAAC;;;;"}

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

@@ -1,70 +1,31 @@
-import script from './related-tag.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './related-tag.vue2.js';
+import { openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
     "button",
     {
-      staticClass: "x-tag x-related-tag",
-      class: _vm.dynamicClasses,
-      attrs: { "data-test": "related-tag" },
-      on: { click: _vm.clickRelatedTag },
+      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"
     },
     [
-      _vm._t(
-        "default",
-        function () {
-          return [_vm._v(_vm._s(_vm.relatedTag.tag))]
-        },
-        null,
-        {
-          relatedTag: _vm.relatedTag,
-          isSelected: _vm.isSelected,
-          shouldHighlightCurated: _vm.shouldHighlightCurated,
-        }
-      ),
+      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),
+          1
+          /* TEXT */
+        )
+      ])
     ],
     2
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
+    /* CLASS */
   );
+}
+var RelatedTag = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { __vue_component__ as default };
+export { RelatedTag as default };
 //# sourceMappingURL=related-tag.vue.js.map

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    @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 Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { 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   */\n  @Component({\n    mixins: [xComponentMixin(relatedTagsXModule)]\n  })\n  export default class RelatedTag extends Vue {\n    /**\n     * Indicates if the curated related tag should be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n    /**\n     * The related tag model data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected relatedTag!: RelatedTagModel;\n    /**\n     * The selected related tags.\n     *\n     * @internal\n     */\n    @State('relatedTags', 'selectedRelatedTags')\n    public selectedRelatedTags!: RelatedTagModel[];\n\n    /**\n     * Blurs the related tag if it is selected.\n     *\n     * @public\n     */\n    protected blurRelatedTag(): void {\n      if (this.isSelected) {\n        (this.$el as HTMLElement).blur();\n      }\n    }\n\n    /**\n     * Handles the click on the button.\n     *\n     * @public\n     */\n    protected clickRelatedTag(): void {\n      this.emitEvents();\n      this.blurRelatedTag();\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    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$el as HTMLElement,\n        feature: 'related_tag'\n      };\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\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      this.$x.emit(\n        this.isSelected ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n        this.relatedTag,\n        this.createEventMetadata()\n      );\n      this.$x.emit('UserPickedARelatedTag', this.relatedTag, this.createEventMetadata());\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    protected get isSelected(): boolean {\n      return this.selectedRelatedTags.includes(this.relatedTag);\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    protected get shouldHighlightCurated(): boolean {\n      return this.highlightCurated && (this.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    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-selected': this.isSelected,\n        'x-related-tag--is-selected': this.isSelected,\n        'x-related-tag--is-curated': this.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":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;;"}