@empathyco/x-components 3.0.0-alpha.29 → 3.0.0-alpha.32

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

@@ -5,7 +5,7 @@ import script from './query-suggestions.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,19 +15,19 @@ var __vue_render__ = function() {
       suggestions: _vm.suggestions,
       "data-test": "query-suggestions",
       animation: _vm.animation,
-      maxItemsToRender: _vm.maxItemsToRender
+      maxItemsToRender: _vm.maxItemsToRender,
     },
     scopedSlots: _vm._u(
       [
         {
           key: "default",
-          fn: function(ref) {
+          fn: function (ref) {
             var suggestion = ref.suggestion;
             var index = ref.index;
             return [
               _vm._t(
                 "suggestion",
-                function() {
+                function () {
                   return [
                     _c("QuerySuggestion", {
                       staticClass: "x-query-suggestions__suggestion",
@@ -36,34 +36,29 @@ var __vue_render__ = function() {
                         [
                           {
                             key: "default",
-                            fn: function(ref) {
+                            fn: function (ref) {
                               var queryHTML = ref.queryHTML;
                               return [
                                 _vm._t("suggestion-content", null, null, {
                                   suggestion: suggestion,
                                   index: index,
-                                  queryHTML: queryHTML
-                                })
-                              ]
-                            }
-                          }
-                        ],
+                                  queryHTML: queryHTML,
+                                }) ]
+                            },
+                          } ],
                         null,
                         true
-                      )
-                    })
-                  ]
+                      ),
+                    }) ]
                 },
                 null,
                 { suggestion: suggestion, index: index }
-              )
-            ]
-          }
-        }
-      ],
+              ) ]
+          },
+        } ],
       null,
       true
-    )
+    ),
   })
 };
 var __vue_staticRenderFns__ = [];

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

@@ -1 +1 @@
-{"version":3,"file":"query-suggestions.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestions.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"suggestions\"\n    class=\"x-query-suggestions\"\n    data-test=\"query-suggestions\"\n    :animation=\"animation\"\n    :maxItemsToRender=\"maxItemsToRender\"\n  >\n    <template #default=\"{ suggestion, index }\">\n      <!--\n        @slot Custom component that replaces the `QuerySuggestion` component\n            @binding {Suggestion} suggestion - Query Suggestion data\n            @binding {number} index - Query Suggestion index\n      -->\n      <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n        <QuerySuggestion :suggestion=\"suggestion\" class=\"x-query-suggestions__suggestion\">\n          <template #default=\"{ queryHTML }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the `QuerySuggestion` default content\n                  @binding {Suggestion} suggestion - Query Suggestion data\n                  @binding {string} queryHTML - Suggestion’s query with the matching part wrapped in a HTML span tag\n                  @binding {number} index - Query Suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, queryHTML }\" />\n          </template>\n        </QuerySuggestion>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { querySuggestionsXModule } from '../x-module';\n  import QuerySuggestion from './query-suggestion.vue';\n\n  /**\n   * This component renders a list of possible search queries to select from as a query is entered\n   * in the input field. By default, this is a list of\n   * [`QuerySuggestion`](./x-components.query-suggestion.md) components.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseSuggestions, QuerySuggestion },\n    mixins: [xComponentMixin(querySuggestionsXModule)]\n  })\n  export default class QuerySuggestions extends Vue {\n    /**\n     * The module's list of suggestions.\n     *\n     * @internal\n     */\n    @Getter('querySuggestions', 'querySuggestions')\n    public suggestions!: Suggestion[];\n\n    /**\n     * Animation component for `QuerySuggestions`.\n     *\n     * @public\n     */\n    @Prop()\n    protected animation!: Vue;\n\n    /**\n     * Number of query suggestions to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n  }\n</script>\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 <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example, a list of query suggestions is displayed. See how the suggestions change as you\ntype “puzzle”. If you click on a suggestion, the search term in the search input is updated and the\nquery suggestions are changed to reflect the new search term.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestions,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the\nmatching query suggestions are shuffled with a slight delay as more letters of the term are typed.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions animation=\"StaggeredFadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Register the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestions,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nHere, the `suggestion` binding property passes the suggestion data.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ queryHTML }\">\n        <span v-html=\"queryHTML\" />\n      </QuerySuggestion>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestion, QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestion,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n\n<!-- prettier-ignore-start -->\n::: danger\nIf you're not using the [`QuerySuggestion`](./query-suggestion.md) component, then\nyou must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in\n`QuerySuggestions`.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <button @click=\"emitSuggestionClickedEvents($event, suggestion)\">\n        {{ suggestion.query }}\n      </button>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    },\n    methods: {\n      emitSuggestionClickedEvents(event, suggestion) {\n        this.$x.emit('UserAcceptedAQuery', suggestion.query, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedASuggestion', suggestion, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedAQuerySuggestion', suggestion, {\n          target: event.target\n        });\n      }\n    }\n  };\n</script>\n```\n\n:::\n<!-- prettier-ignore-end -->\n\n### Play with suggestion-content slot\n\nIn this example, the `suggestion` and `queryHTML` bindings have been passed in the\n`suggestion-content` slot to paint the resulting query suggestions in blue.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion-content=\"{ suggestion, queryHTML }\">\n      <span :aria-label=\"`Select ${suggestion.query}`\" style=\"color: blue;\" v-html=\"queryHTML\" />\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `QuerySuggestions`\ncomponent communicates with the [`SearchInput`](../search-box/x-components.search-input.md),\nupdating the term in the search input.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"query-suggestions.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestions.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"suggestions\"\n    class=\"x-query-suggestions\"\n    data-test=\"query-suggestions\"\n    :animation=\"animation\"\n    :maxItemsToRender=\"maxItemsToRender\"\n  >\n    <template #default=\"{ suggestion, index }\">\n      <!--\n        @slot Custom component that replaces the `QuerySuggestion` component\n            @binding {Suggestion} suggestion - Query Suggestion data\n            @binding {number} index - Query Suggestion index\n      -->\n      <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n        <QuerySuggestion :suggestion=\"suggestion\" class=\"x-query-suggestions__suggestion\">\n          <template #default=\"{ queryHTML }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the `QuerySuggestion` default content\n                  @binding {Suggestion} suggestion - Query Suggestion data\n                  @binding {string} queryHTML - Suggestion’s query with the matching part wrapped in a HTML span tag\n                  @binding {number} index - Query Suggestion index\n            -->\n            <!-- eslint-enable max-len -->\n            <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, queryHTML }\" />\n          </template>\n        </QuerySuggestion>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { Suggestion } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { querySuggestionsXModule } from '../x-module';\n  import QuerySuggestion from './query-suggestion.vue';\n\n  /**\n   * This component renders a list of possible search queries to select from as a query is entered\n   * in the input field. By default, this is a list of\n   * [`QuerySuggestion`](./x-components.query-suggestion.md) components.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseSuggestions, QuerySuggestion },\n    mixins: [xComponentMixin(querySuggestionsXModule)]\n  })\n  export default class QuerySuggestions extends Vue {\n    /**\n     * The module's list of suggestions.\n     *\n     * @internal\n     */\n    @Getter('querySuggestions', 'querySuggestions')\n    public suggestions!: Suggestion[];\n\n    /**\n     * Animation component for `QuerySuggestions`.\n     *\n     * @public\n     */\n    @Prop()\n    protected animation!: Vue;\n\n    /**\n     * Number of query suggestions to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n  }\n</script>\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 <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example, a list of query suggestions is displayed. See how the suggestions change as you\ntype “puzzle”. If you click on a suggestion, the search term in the search input is updated and the\nquery suggestions are changed to reflect the new search term.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestions,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the\nmatching query suggestions are shuffled with a slight delay as more letters of the term are typed.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions animation=\"StaggeredFadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Register the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestions,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with suggestion slot\n\nHere, the `suggestion` binding property passes the suggestion data.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ queryHTML }\">\n        <span v-html=\"queryHTML\" />\n      </QuerySuggestion>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestion, QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      QuerySuggestion,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n\n<!-- prettier-ignore-start -->\n::: danger\nIf you're not using the [`QuerySuggestion`](./query-suggestion.md) component, then\nyou must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in\n`QuerySuggestions`.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <button @click=\"emitSuggestionClickedEvents($event, suggestion)\">\n        {{ suggestion.query }}\n      </button>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    },\n    methods: {\n      emitSuggestionClickedEvents(event, suggestion) {\n        this.$x.emit('UserAcceptedAQuery', suggestion.query, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedASuggestion', suggestion, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedAQuerySuggestion', suggestion, {\n          target: event.target\n        });\n      }\n    }\n  };\n</script>\n```\n\n:::\n<!-- prettier-ignore-end -->\n\n### Play with suggestion-content slot\n\nIn this example, the `suggestion` and `queryHTML` bindings have been passed in the\n`suggestion-content` slot to paint the resulting query suggestions in blue.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion-content=\"{ suggestion, queryHTML }\">\n      <span :aria-label=\"`Select ${suggestion.query}`\" style=\"color: blue;\" v-html=\"queryHTML\" />\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `QuerySuggestions`\ncomponent communicates with the [`SearchInput`](../search-box/x-components.search-input.md),\nupdating the term in the search input.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -6,7 +6,7 @@ import script from './recommendations.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -16,39 +16,36 @@ var __vue_render__ = function() {
         [
           _vm._t(
             "layout",
-            function() {
+            function () {
               return [
                 _c(
                   _vm.animation,
                   {
                     tag: "component",
                     staticClass: "x-list x-recommendations",
-                    attrs: { tag: "ul", "data-test": "recommendations" }
+                    attrs: { tag: "ul", "data-test": "recommendations" },
                   },
-                  _vm._l(_vm.recommendations, function(recommendation) {
+                  _vm._l(_vm.recommendations, function (recommendation) {
                     return _c(
                       "li",
                       {
                         key: recommendation.id,
                         staticClass: "x-recommendations__item",
-                        attrs: { "data-test": "recommendation-item" }
+                        attrs: { "data-test": "recommendation-item" },
                       },
                       [
                         _vm._t("default", null, {
-                          recommendation: recommendation
-                        })
-                      ],
+                          recommendation: recommendation,
+                        }) ],
                       2
                     )
                   }),
                   0
-                )
-              ]
+                ) ]
             },
             null,
             { animation: _vm.animation, recommendations: _vm.recommendations }
-          )
-        ],
+          ) ],
         2
       )
     : _vm._e()

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\n        :is=\"animation\"\n        tag=\"ul\"\n        data-test=\"recommendations\"\n        class=\"x-list 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    </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 | 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 | result link 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    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nIt renders a list of recommendations from recommendations state by default. The component provides\nthe slot layout which wraps the whole component with the recommendations bound. It also provides the\ndefault slot to customize the item, which is within the layout slot, with the recommendation bound.\nEach recommendation should be represented by a BaseResultLink component besides any other component.\n\n## Basic example\n\n## Adding a custom BaseResultLink component\n\nA BaseResultLink **must** be used inside the Recommendations component. In the example below the\nBaseResultLink default slot is filled with an image of the result and a span for the title. Besides\nthat, an additional button has been added.\n\n```vue\n<Recommendations>\n  <template #default=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <template #default=\"{ result }\">\n        <img :src=\"result.images[0]\" class=\"x-recommendations__image\"/>\n        <span class=\"x-recommendations__title\">{{ result.name }}</span>\n      </template>\n    </BaseResultLink>\n    <button>Custom Behaviour</button>\n  </template>\n</Recommendations>\n```\n\n## Overriding layout content\n\nIt renders a list of recommendations customizing the layout slot. In the example below, instead of\nusing the default Recommendations content, a BaseGrid component is used to render the\nrecommendations.\n\n```vue\n<Recommendations :animation=\"staggeredFadeAndSlide\">\n  <template #layout=\"{ recommendations, animation }\">\n    <BaseGrid :items=\"recommendations\" :animation=\"animation\">\n      <template #result=\"{ item }\">\n        <BaseResultLink :result=\"item\">\n          <BaseResultImage :result=\"item\" />\n          <span class=\"x-result__title\">{{ item.name }}</span>\n        </BaseResultLink>\n      </template>\n    </BaseGrid>\n  </template>\n</Recommendations>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedARecommendation`: the event is emitted after the user clicks the button.\n- A list of events emitted by the `BaseResultLink`.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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\n        :is=\"animation\"\n        tag=\"ul\"\n        data-test=\"recommendations\"\n        class=\"x-list 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    </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 | 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 | result link 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    list-style-type: none;\n  }\n</style>\n\n<docs lang=\"mdx\">\n# Examples\n\nIt renders a list of recommendations from recommendations state by default. The component provides\nthe slot layout which wraps the whole component with the recommendations bound. It also provides the\ndefault slot to customize the item, which is within the layout slot, with the recommendation bound.\nEach recommendation should be represented by a BaseResultLink component besides any other component.\n\n## Basic example\n\n## Adding a custom BaseResultLink component\n\nA BaseResultLink **must** be used inside the Recommendations component. In the example below the\nBaseResultLink default slot is filled with an image of the result and a span for the title. Besides\nthat, an additional button has been added.\n\n```vue\n<Recommendations>\n  <template #default=\"{ recommendation }\">\n    <BaseResultLink :result=\"recommendation\" class=\"x-recommendations__link\">\n      <template #default=\"{ result }\">\n        <img :src=\"result.images[0]\" class=\"x-recommendations__image\"/>\n        <span class=\"x-recommendations__title\">{{ result.name }}</span>\n      </template>\n    </BaseResultLink>\n    <button>Custom Behaviour</button>\n  </template>\n</Recommendations>\n```\n\n## Overriding layout content\n\nIt renders a list of recommendations customizing the layout slot. In the example below, instead of\nusing the default Recommendations content, a BaseGrid component is used to render the\nrecommendations.\n\n```vue\n<Recommendations :animation=\"staggeredFadeAndSlide\">\n  <template #layout=\"{ recommendations, animation }\">\n    <BaseGrid :items=\"recommendations\" :animation=\"animation\">\n      <template #result=\"{ item }\">\n        <BaseResultLink :result=\"item\">\n          <BaseResultImage :result=\"item\" />\n          <span class=\"x-result__title\">{{ item.name }}</span>\n        </BaseResultLink>\n      </template>\n    </BaseGrid>\n  </template>\n</Recommendations>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items.\n\n_Type “puzzle” or another toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedARecommendation`: the event is emitted after the user clicks the button.\n- A list of events emitted by the `BaseResultLink`.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -6,27 +6,27 @@ import script from './related-tag.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c(
-    "BaseEventButton",
+    "button",
     {
       staticClass: "x-tag x-related-tag",
       class: _vm.dynamicClasses,
-      attrs: { events: _vm.events, "data-test": "related-tag" }
+      attrs: { "data-test": "related-tag" },
+      on: { click: _vm.emitEvents },
     },
     [
       _vm._t(
         "default",
-        function() {
+        function () {
           return [_vm._v(_vm._s(_vm.relatedTag.tag))]
         },
         null,
         { relatedTag: _vm.relatedTag, isSelected: _vm.isSelected }
-      )
-    ],
+      ) ],
     2
   )
 };
@@ -36,11 +36,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-98aec53e_0", { source: ".x-related-tag[data-v-98aec53e] {\n  white-space: nowrap;\n}\n.x-related-tag--is-selected[data-v-98aec53e] {\n  background: lightgrey;\n}", map: undefined, media: undefined });
+    inject("data-v-0dfb94a8_0", { source: ".x-related-tag[data-v-0dfb94a8] {\n  white-space: nowrap;\n}\n.x-related-tag--is-selected[data-v-0dfb94a8] {\n  background: lightgrey;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-98aec53e";
+  var __vue_scope_id__ = "data-v-0dfb94a8";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

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  <BaseEventButton\n    :events=\"events\"\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      -->\n    <slot v-bind=\"{ relatedTag, isSelected }\">{{ relatedTag.tag }}</slot>\n  </BaseEventButton>\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 BaseEventButton from '../../../components/base-event-button.vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { RelatedTagsXEvents } from '../events.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    components: { BaseEventButton },\n    mixins: [xComponentMixin(relatedTagsXModule)]\n  })\n  export default class RelatedTag extends Vue {\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     * Events list which is going to be emitted when a related tag is selected.\n     *\n     * @returns The {@link XEvent | XEvents} to emit.\n     *\n     * @internal\n     */\n    protected get events(): Partial<RelatedTagsXEvents> {\n      return this.isSelected\n        ? {\n            UserPickedARelatedTag: this.relatedTag,\n            UserDeselectedARelatedTag: this.relatedTag\n          }\n        : {\n            UserPickedARelatedTag: this.relatedTag,\n            UserSelectedARelatedTag: this.relatedTag\n          };\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     * 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-tag--is-selected': this.isSelected,\n        'x-related-tag--is-selected': this.isSelected\n      };\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-related-tag {\n    white-space: nowrap;\n\n    &--is-selected {\n      background: lightgrey;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Dynamic classes\n\n`RelatedTag` uses the `x-related-tag--is-selected` dynamic CSS class so you can style it when is\nselected.\n\n## Events\n\nThis component emits the following events:\n\n- [`UserDeselectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\n- [`UserPickedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\n- [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\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\n<template>\n  <RelatedTag :relatedTag=\"tag\"></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          previous: 'toy',\n          query: 'toy story',\n          selected: false,\n          tag: 'story'\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\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          previous: 'toy',\n          query: 'toy story',\n          selected: false,\n          tag: 'story'\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\n<template>\n  <RelatedTag :relatedTag=\"tag\" @UserSelectedARelatedTag=\"alertRelatedTag\"></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          previous: 'toy',\n          query: 'toy story',\n          selected: false,\n          tag: 'story'\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":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"related-tag.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"emitEvents\"\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      -->\n    <slot v-bind=\"{ relatedTag, isSelected }\">{{ 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     * 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     * Generates the {@link WireMetadata | event metadata} 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     * 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-tag--is-selected': this.isSelected,\n        'x-related-tag--is-selected': this.isSelected\n      };\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-related-tag {\n    white-space: nowrap;\n\n    &--is-selected {\n      background: lightgrey;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Dynamic classes\n\n`RelatedTag` uses the `x-related-tag--is-selected` dynamic CSS class so you can style it when is\nselected.\n\n## Events\n\nThis component emits the following events:\n\n- [`UserDeselectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\n- [`UserPickedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\n- [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\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\n<template>\n  <RelatedTag :relatedTag=\"tag\"></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          previous: 'toy',\n          query: 'toy story',\n          selected: false,\n          tag: 'story'\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\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          previous: 'toy',\n          query: 'toy story',\n          selected: false,\n          tag: 'story'\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\n<template>\n  <RelatedTag :relatedTag=\"tag\" @UserSelectedARelatedTag=\"alertRelatedTag\"></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          previous: 'toy',\n          query: 'toy story',\n          selected: false,\n          tag: 'story'\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":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/related-tags/components/related-tag.vue_rollup-plugin-vue=script.js

@@ -1,7 +1,6 @@
 import { __extends, __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
-import BaseEventButton from '../../../components/base-event-button.vue.js';
 import { State } from '../../../components/decorators/store.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
 import { relatedTagsXModule } from '../x-module.js';
@@ -18,28 +17,29 @@ var RelatedTag = /** @class */ (function (_super) {
     function RelatedTag() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    Object.defineProperty(RelatedTag.prototype, "events", {
-        /**
-         * Events list which is going to be emitted when a related tag is selected.
-         *
-         * @returns The {@link XEvent | XEvents} to emit.
-         *
-         * @internal
-         */
-        get: function () {
-            return this.isSelected
-                ? {
-                    UserPickedARelatedTag: this.relatedTag,
-                    UserDeselectedARelatedTag: this.relatedTag
-                }
-                : {
-                    UserPickedARelatedTag: this.relatedTag,
-                    UserSelectedARelatedTag: this.relatedTag
-                };
-        },
-        enumerable: false,
-        configurable: true
-    });
+    /**
+     * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.
+     *
+     * @returns The {@link WireMetadata} object omitting the moduleName.
+     * @internal
+     */
+    RelatedTag.prototype.createEventMetadata = function () {
+        return {
+            target: this.$el,
+            feature: 'related_tag'
+        };
+    };
+    /**
+     * Emits events when the button is clicked.
+     *
+     * @public
+     */
+    RelatedTag.prototype.emitEvents = function () {
+        // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the
+        // isSelected value before emitting this selection events.
+        this.$x.emit(this.isSelected ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag', this.relatedTag, this.createEventMetadata());
+        this.$x.emit('UserPickedARelatedTag', this.relatedTag, this.createEventMetadata());
+    };
     Object.defineProperty(RelatedTag.prototype, "isSelected", {
         /**
          * Check if the related tag is selected or not.
@@ -79,7 +79,6 @@ var RelatedTag = /** @class */ (function (_super) {
     ], RelatedTag.prototype, "selectedRelatedTags", void 0);
     RelatedTag = __decorate([
         Component({
-            components: { BaseEventButton: BaseEventButton },
             mixins: [xComponentMixin(relatedTagsXModule)]
         })
     ], RelatedTag);

package/js/x-modules/related-tags/components/related-tag.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-tag.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { VueCSSClasses } from '../../../utils/types';\nimport { RelatedTagsXEvents } from '../events.types';\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 */\n@Component({\n  components: { BaseEventButton },\n  mixins: [xComponentMixin(relatedTagsXModule)]\n})\nexport default class RelatedTag extends Vue {\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   * Events list which is going to be emitted when a related tag is selected.\n   *\n   * @returns The {@link XEvent | XEvents} to emit.\n   *\n   * @internal\n   */\n  protected get events(): Partial<RelatedTagsXEvents> {\n    return this.isSelected\n      ? {\n          UserPickedARelatedTag: this.relatedTag,\n          UserDeselectedARelatedTag: this.relatedTag\n        }\n      : {\n          UserPickedARelatedTag: this.relatedTag,\n          UserSelectedARelatedTag: this.relatedTag\n        };\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   * 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-tag--is-selected': this.isSelected,\n      'x-related-tag--is-selected': this.isSelected\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AA2BA;;;;;;;AAWA;IAAwC,8BAAG;IAA3C;;KA2DC;IApCC,sBAAc,8BAAM;;;;;;;;aAApB;YACE,OAAO,IAAI,CAAC,UAAU;kBAClB;oBACE,qBAAqB,EAAE,IAAI,CAAC,UAAU;oBACtC,yBAAyB,EAAE,IAAI,CAAC,UAAU;iBAC3C;kBACD;oBACE,qBAAqB,EAAE,IAAI,CAAC,UAAU;oBACtC,uBAAuB,EAAE,IAAI,CAAC,UAAU;iBACzC,CAAC;SACP;;;OAAA;IASD,sBAAc,kCAAU;;;;;;;;aAAxB;YACE,OAAO,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC3D;;;OAAA;IASD,sBAAc,sCAAc;;;;;;;;aAA5B;YACE,OAAO;gBACL,oBAAoB,EAAE,IAAI,CAAC,UAAU;gBACrC,4BAA4B,EAAE,IAAI,CAAC,UAAU;aAC9C,CAAC;SACH;;;OAAA;IAnDD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACc;IAOvC;QADC,KAAK,CAAC,aAAa,EAAE,qBAAqB,CAAC;2DACG;IAd5B,UAAU;QAJ9B,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,eAAe,iBAAA,EAAE;YAC/B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,UAAU,CA2D9B;IAAD,iBAAC;CAAA,CA3DuC,GAAG;;;;"}
+{"version":3,"file":"related-tag.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { VueCSSClasses } from '../../../utils/types';\nimport { WireMetadata } from '../../../wiring/wiring.types';\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 */\n@Component({\n  mixins: [xComponentMixin(relatedTagsXModule)]\n})\nexport default class RelatedTag extends Vue {\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   * Generates the {@link WireMetadata | event metadata} 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   * 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-tag--is-selected': this.isSelected,\n      'x-related-tag--is-selected': this.isSelected\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;AA0BA;;;;;;;AAUA;IAAwC,8BAAG;IAA3C;;KAqEC;;;;;;;IA/CW,wCAAmB,GAA7B;QACE,OAAO;YACL,MAAM,EAAE,IAAI,CAAC,GAAkB;YAC/B,OAAO,EAAE,aAAa;SACvB,CAAC;KACH;;;;;;IAOS,+BAAU,GAApB;;;QAGE,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,IAAI,CAAC,UAAU,GAAG,2BAA2B,GAAG,yBAAyB,EACzE,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,mBAAmB,EAAE,CAC3B,CAAC;QACF,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACpF;IASD,sBAAc,kCAAU;;;;;;;;aAAxB;YACE,OAAO,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC3D;;;OAAA;IASD,sBAAc,sCAAc;;;;;;;;aAA5B;YACE,OAAO;gBACL,oBAAoB,EAAE,IAAI,CAAC,UAAU;gBACrC,4BAA4B,EAAE,IAAI,CAAC,UAAU;aAC9C,CAAC;SACH;;;OAAA;IA7DD;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACc;IAOvC;QADC,KAAK,CAAC,aAAa,EAAE,qBAAqB,CAAC;2DACG;IAd5B,UAAU;QAH9B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,UAAU,CAqE9B;IAAD,iBAAC;CAAA,CArEuC,GAAG;;;;"}

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

@@ -6,7 +6,7 @@ import script from './related-tags.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -16,20 +16,20 @@ var __vue_render__ = function() {
         {
           tag: "component",
           staticClass: "x-list x-related-tags",
-          attrs: { tag: "ul", "data-test": "related-tags" }
+          attrs: { tag: "ul", "data-test": "related-tags" },
         },
-        _vm._l(_vm.relatedTags, function(relatedTag) {
+        _vm._l(_vm.relatedTags, function (relatedTag) {
           return _c(
             "li",
             {
               key: relatedTag.tag,
               staticClass: "x-related-tags__item",
-              attrs: { "data-test": "related-tag-item" }
+              attrs: { "data-test": "related-tag-item" },
             },
             [
               _vm._t(
                 "related-tag",
-                function() {
+                function () {
                   return [
                     _c("RelatedTag", {
                       attrs: { relatedTag: relatedTag },
@@ -37,27 +37,23 @@ var __vue_render__ = function() {
                         [
                           {
                             key: "default",
-                            fn: function(ref) {
+                            fn: function (ref) {
                               var relatedTag = ref.relatedTag;
                               var isSelected = ref.isSelected;
                               return [
                                 _vm._t("related-tag-content", null, null, {
                                   relatedTag: relatedTag,
-                                  isSelected: isSelected
-                                })
-                              ]
-                            }
-                          }
-                        ],
+                                  isSelected: isSelected,
+                                }) ]
+                            },
+                          } ],
                         null,
                         true
-                      )
-                    })
-                  ]
+                      ),
+                    }) ]
                 },
                 { relatedTag: relatedTag }
-              )
-            ],
+              ) ],
             2
           )
         }),

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-list x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.tag\"\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       -->\n      <slot name=\"related-tag\" :relatedTag=\"relatedTag\">\n        <RelatedTag :relatedTag=\"relatedTag\">\n          <template #default=\"{ relatedTag, isSelected }\">\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            -->\n            <slot name=\"related-tag-content\" v-bind=\"{ relatedTag, isSelected }\" />\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 Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { relatedTagsXModule } from '../x-module';\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  @Component({\n    components: { RelatedTag },\n    mixins: [xComponentMixin(relatedTagsXModule)]\n  })\n  export default class RelatedTags extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    @Getter('relatedTags', 'relatedTags')\n    public storedRelatedTags!: RelatedTagModel[];\n\n    protected get relatedTags(): RelatedTagModel[] {\n      return this.storedRelatedTags.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-related-tags {\n    display: flex;\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 toy and press enter._\n\n```vue\n<template>\n  <div>\n    <SearchInput></SearchInput>\n    <RelatedTags></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 toy and press Enter to see the related tags with the animation effect._\n\n```vue\n<template>\n  <div>\n    <SearchInput></SearchInput>\n    <RelatedTags animation=\"StaggeredFadeAndSlide\" :maxItemsToRender=\"3\"></RelatedTags>\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  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 toy and see how the related tags can be rendered._\n\n```vue\n<template>\n  <div>\n    <SearchInput></SearchInput>\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :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 toy and see how the related tags are rendered._\n\n```vue\n<template>\n  <div>\n    <SearchInput></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 toy and see how the related tags can be rendered._\n\n```vue\n<template>\n  <div>\n    <SearchInput></SearchInput>\n    <RelatedTags></RelatedTags>\n    <ResultsList></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</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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-list x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.tag\"\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       -->\n      <slot name=\"related-tag\" :relatedTag=\"relatedTag\">\n        <RelatedTag :relatedTag=\"relatedTag\">\n          <template #default=\"{ relatedTag, isSelected }\">\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            -->\n            <slot name=\"related-tag-content\" v-bind=\"{ relatedTag, isSelected }\" />\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 Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { relatedTagsXModule } from '../x-module';\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  @Component({\n    components: { RelatedTag },\n    mixins: [xComponentMixin(relatedTagsXModule)]\n  })\n  export default class RelatedTags extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    @Getter('relatedTags', 'relatedTags')\n    public storedRelatedTags!: RelatedTagModel[];\n\n    protected get relatedTags(): RelatedTagModel[] {\n      return this.storedRelatedTags.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-related-tags {\n    display: flex;\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 toy and press enter._\n\n```vue\n<template>\n  <div>\n    <SearchInput></SearchInput>\n    <RelatedTags></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 toy and press Enter to see the related tags with the animation effect._\n\n```vue\n<template>\n  <div>\n    <SearchInput></SearchInput>\n    <RelatedTags animation=\"StaggeredFadeAndSlide\" :maxItemsToRender=\"3\"></RelatedTags>\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  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 toy and see how the related tags can be rendered._\n\n```vue\n<template>\n  <div>\n    <SearchInput></SearchInput>\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :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 toy and see how the related tags are rendered._\n\n```vue\n<template>\n  <div>\n    <SearchInput></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 toy and see how the related tags can be rendered._\n\n```vue\n<template>\n  <div>\n    <SearchInput></SearchInput>\n    <RelatedTags></RelatedTags>\n    <ResultsList></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</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/scroll/components/main-scroll-item.vue.js

@@ -0,0 +1,52 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+import script from './main-scroll-item.vue_rollup-plugin-vue=script.js';
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    _vm.tag,
+    { tag: "component", attrs: { "data-scroll": _vm.item.id } },
+    [_vm._t("default")],
+    2
+  )
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  var __vue_inject_styles__ = undefined;
+  /* scoped */
+  var __vue_scope_id__ = undefined;
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __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 default __vue_component__;
+//# sourceMappingURL=main-scroll-item.vue.js.map

package/js/x-modules/scroll/components/main-scroll-item.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-scroll-item.vue.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll-item.vue"],"sourcesContent":["<template>\n  <component :is=\"tag\" :data-scroll=\"item.id\">\n    <slot />\n  </component>\n</template>\n<script lang=\"ts\">\n  import { Identifiable } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { NoElement, State, xComponentMixin } from '../../../components';\n  import { XInject } from '../../../components/decorators/injection.decorators';\n  import { scrollXModule } from '../x-module';\n  import { ScrollObserverKey } from './scroll.const';\n  import { ScrollVisibilityObserver } from './scroll.types';\n\n  /**\n   * Wrapper for elements contained in the {@link MainScroll} that should store/restore its\n   * position.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)]\n  })\n  export default class MainScrollItem extends Vue {\n    /**\n     * Rendered HTML node.\n     *\n     * @public\n     */\n    public $el!: HTMLElement;\n\n    /**\n     * The item data. Used to set the scroll identifier.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public item!: Identifiable;\n\n    /**\n     * The tag to render.\n     *\n     * @public\n     */\n    @Prop({ default: () => NoElement })\n    public tag!: string | typeof Vue;\n\n    /**\n     * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}\n     * `id` property, this component should be scrolled into view.\n     *\n     * @internal\n     */\n    @State('scroll', 'pendingScrollTo')\n    public pendingScrollTo!: string;\n\n    /**\n     * Observer to detect the first visible element.\n     *\n     * @internal\n     */\n    @XInject(ScrollObserverKey)\n    public firstVisibleItemObserver!: ScrollVisibilityObserver | null;\n\n    /**\n     * Initialise scroll behavior.\n     * - Observes the rendered element to detect if it is the first visible item.\n     * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the\n     * element into the first position of the view.\n     *\n     * @internal\n     */\n    async mounted(): Promise<void> {\n      await this.$nextTick(); // Mounted does not guarantee that child components are mounted too\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.$watch('firstVisibleItemObserver', this.observeItem, { immediate: true });\n    }\n\n    /**\n     * Detaches the observer from the rendered element to prevent memory leaks.\n     *\n     * @internal\n     */\n    beforeDestroy(): void {\n      this.firstVisibleItemObserver?.unobserve(this.$el);\n    }\n\n    /**\n     * Initialises the element visibility observation, stopping the previous one if it has.\n     *\n     * @param newObserver - The new observer for the HTML element.\n     * @param oldObserver - The old observer for the HTML element.\n     */\n    observeItem(\n      newObserver: ScrollVisibilityObserver | null,\n      oldObserver: ScrollVisibilityObserver | null\n    ): void {\n      oldObserver?.unobserve(this.$el);\n      newObserver?.observe(this.$el);\n      if (this.pendingScrollTo === this.item.id) {\n        this.$el.scrollIntoView();\n        this.$x.emit('ScrollRestoreSucceeded');\n      }\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis components emits the following events:\n\n- [`ScrollRestoreSucceeded`](./../../api/x-components.scrollxevents.md)\n\n## See it in action\n\nThis component has no predefined template. It renders whatever you decide using the `tag` prop. It's\nmain purpose is to help storing and restoring the scroll position so URLs can be shared, and also to\nallow users to smoothly navigate back and forth.\n\nTo do so, it must be wrapped with the `MainScroll` component. In the following example we make use\nof all of these components. The URL is modified as the user scrolls.\n\n```vue\n<template>\n  <div>\n    <UrlHandler />\n    <SearchInput />\n\n    <MainScroll>\n      <Scroll>\n        <ResultsList #result=\"{ item }\">\n          <MainScrollItem :item=\"item\" tag=\"article\">\n            <BaseResultLink :item=\"item\">\n              <img :src=\"item.images[0]\" />\n              <p>{{ item.title }}</p>\n            </BaseResultLink>\n          </MainScrollItem>\n        </ResultsList>\n      </Scroll>\n    </MainScroll>\n  </div>\n</template>\n\n<script>\n  import { MainScroll, Scroll, MainScrollItem } from '@empathyco/x-components/scroll';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { UrlHandler } from '@empathyco/x-components/url';\n\n  export default {\n    name: 'ScrollItemDemo',\n    components: {\n      Scroll,\n      ResultsList,\n      MainScroll,\n      MainScrollItem,\n      SearchInput,\n      UrlHandler\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}