@empathyco/x-components 3.0.0-alpha.30 → 3.0.0-alpha.34

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,7 +6,7 @@ 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;
@@ -16,18 +16,21 @@ var __vue_render__ = function() {
       staticClass: "x-tag x-related-tag",
       class: _vm.dynamicClasses,
       attrs: { "data-test": "related-tag" },
-      on: { click: _vm.emitEvents }
+      on: { click: _vm.emitEvents },
     },
     [
       _vm._t(
         "default",
-        function() {
+        function () {
           return [_vm._v(_vm._s(_vm.relatedTag.tag))]
         },
         null,
-        { relatedTag: _vm.relatedTag, isSelected: _vm.isSelected }
-      )
-    ],
+        {
+          relatedTag: _vm.relatedTag,
+          isSelected: _vm.isSelected,
+          shouldHighlightCurated: _vm.shouldHighlightCurated,
+        }
+      ) ],
     2
   )
 };
@@ -37,11 +40,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-fdaef8d0_0", { source: ".x-related-tag[data-v-fdaef8d0] {\n  white-space: nowrap;\n}\n.x-related-tag--is-selected[data-v-fdaef8d0] {\n  background: lightgrey;\n}", map: undefined, media: undefined });
+    inject("data-v-6081d22c_0", { source: ".x-related-tag[data-v-6081d22c] {\n  white-space: nowrap;\n}\n.x-related-tag--is-selected[data-v-6081d22c] {\n  background: lightgrey;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-fdaef8d0";
+  var __vue_scope_id__ = "data-v-6081d22c";
   /* 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  <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 { 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     * 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 emiting this selection events.\n      this.$x.emit(\n        this.isSelected ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n        this.relatedTag,\n        {\n          target: this.$el as HTMLElement\n        }\n      );\n      this.$x.emit('UserPickedARelatedTag', this.relatedTag, {\n        target: this.$el as HTMLElement\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      @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     * 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     * 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-tag--is-curated': this.shouldHighlightCurated,\n        'x-related-tag--is-curated': this.shouldHighlightCurated,\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 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`](./../../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

@@ -17,6 +17,18 @@ var RelatedTag = /** @class */ (function (_super) {
     function RelatedTag() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    /**
+     * 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.
      *
@@ -24,13 +36,9 @@ var RelatedTag = /** @class */ (function (_super) {
      */
     RelatedTag.prototype.emitEvents = function () {
         // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the
-        // isSelected value before emiting this selection events.
-        this.$x.emit(this.isSelected ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag', this.relatedTag, {
-            target: this.$el
-        });
-        this.$x.emit('UserPickedARelatedTag', this.relatedTag, {
-            target: this.$el
-        });
+        // 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", {
         /**
@@ -46,6 +54,21 @@ var RelatedTag = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(RelatedTag.prototype, "shouldHighlightCurated", {
+        /**
+         * Check if the related tag is curated and should be highlighted.
+         *
+         * @returns True if the related tag is curated and should be highlighted.
+         *
+         * @internal
+         */
+        get: function () {
+            var _a;
+            return this.highlightCurated && ((_a = this.relatedTag.isCurated) !== null && _a !== void 0 ? _a : false);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(RelatedTag.prototype, "dynamicClasses", {
         /**
          * Adds the dynamic css classes to the component.
@@ -56,6 +79,8 @@ var RelatedTag = /** @class */ (function (_super) {
          */
         get: function () {
             return {
+                'x-tag--is-curated': this.shouldHighlightCurated,
+                'x-related-tag--is-curated': this.shouldHighlightCurated,
                 'x-tag--is-selected': this.isSelected,
                 'x-related-tag--is-selected': this.isSelected
             };
@@ -63,6 +88,9 @@ var RelatedTag = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    __decorate([
+        Prop({ default: false, type: Boolean })
+    ], RelatedTag.prototype, "highlightCurated", void 0);
     __decorate([
         Prop({ required: true })
     ], RelatedTag.prototype, "relatedTag", void 0);

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 { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { VueCSSClasses } from '../../../utils/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   * 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 emiting this selection events.\n    this.$x.emit(\n      this.isSelected ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n      this.relatedTag,\n      {\n        target: this.$el as HTMLElement\n      }\n    );\n    this.$x.emit('UserPickedARelatedTag', this.relatedTag, {\n      target: this.$el as HTMLElement\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":";;;;;;;AAyBA;;;;;;;AAUA;IAAwC,8BAAG;IAA3C;;KA4DC;;;;;;IAvCW,+BAAU,GAApB;;;QAGE,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,IAAI,CAAC,UAAU,GAAG,2BAA2B,GAAG,yBAAyB,EACzE,IAAI,CAAC,UAAU,EACf;YACE,MAAM,EAAE,IAAI,CAAC,GAAkB;SAChC,CACF,CAAC;QACF,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,UAAU,EAAE;YACrD,MAAM,EAAE,IAAI,CAAC,GAAkB;SAChC,CAAC,CAAC;KACJ;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;IApDD;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,CA4D9B;IAAD,iBAAC;CAAA,CA5DuC,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\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   * 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   * 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   * 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-tag--is-curated': this.shouldHighlightCurated,\n      'x-related-tag--is-curated': this.shouldHighlightCurated,\n      'x-tag--is-selected': this.isSelected,\n      'x-related-tag--is-selected': this.isSelected\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;AA2BA;;;;;;;AAUA;IAAwC,8BAAG;IAA3C;;KAyFC;;;;;;;IA5DW,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,8CAAsB;;;;;;;;aAApC;;YACE,OAAO,IAAI,CAAC,gBAAgB,KAAK,MAAA,IAAI,CAAC,UAAU,CAAC,SAAS,mCAAI,KAAK,CAAC,CAAC;SACtE;;;OAAA;IASD,sBAAc,sCAAc;;;;;;;;aAA5B;YACE,OAAO;gBACL,mBAAmB,EAAE,IAAI,CAAC,sBAAsB;gBAChD,2BAA2B,EAAE,IAAI,CAAC,sBAAsB;gBACxD,oBAAoB,EAAE,IAAI,CAAC,UAAU;gBACrC,4BAA4B,EAAE,IAAI,CAAC,UAAU;aAC9C,CAAC;SACH;;;OAAA;IAjFD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACH;IAOrC;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACc;IAOvC;QADC,KAAK,CAAC,aAAa,EAAE,qBAAqB,CAAC;2DACG;IArB5B,UAAU;QAH9B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,UAAU,CAyF9B;IAAD,iBAAC;CAAA,CAzFuC,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,48 +16,55 @@ 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 },
+                      attrs: {
+                        highlightCurated: _vm.highlightCurated,
+                        relatedTag: relatedTag,
+                      },
                       scopedSlots: _vm._u(
                         [
                           {
                             key: "default",
-                            fn: function(ref) {
+                            fn: function (ref) {
                               var relatedTag = ref.relatedTag;
                               var isSelected = ref.isSelected;
+                              var shouldHighlightCurated =
+                                ref.shouldHighlightCurated;
                               return [
                                 _vm._t("related-tag-content", null, null, {
                                   relatedTag: relatedTag,
-                                  isSelected: isSelected
-                                })
-                              ]
-                            }
-                          }
-                        ],
+                                  isSelected: isSelected,
+                                  shouldHighlightCurated:
+                                    shouldHighlightCurated,
+                                }) ]
+                            },
+                          } ],
                         null,
                         true
-                      )
-                    })
-                  ]
+                      ),
+                    }) ]
                 },
-                { relatedTag: relatedTag }
-              )
-            ],
+                null,
+                {
+                  relatedTag: relatedTag,
+                  highlightCurated: _vm.highlightCurated,
+                }
+              ) ],
             2
           )
         }),
@@ -71,11 +78,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-4afc43ea_0", { source: ".x-related-tags[data-v-4afc43ea] {\n  display: flex;\n  list-style: none;\n}", map: undefined, media: undefined });
+    inject("data-v-04493c4b_0", { source: ".x-related-tags[data-v-04493c4b] {\n  display: flex;\n  list-style: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-4afc43ea";
+  var __vue_scope_id__ = "data-v-04493c4b";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

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        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag :highlightCurated=\"highlightCurated\" :relatedTag=\"relatedTag\">\n          <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import 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    /**\n     * Flag to indicate if the curated tags should be displayed different.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\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/related-tags/components/related-tags.vue_rollup-plugin-vue=script.js

@@ -33,6 +33,9 @@ var RelatedTags = /** @class */ (function (_super) {
     __decorate([
         Prop()
     ], RelatedTags.prototype, "maxItemsToRender", void 0);
+    __decorate([
+        Prop({ default: false, type: Boolean })
+    ], RelatedTags.prototype, "highlightCurated", void 0);
     __decorate([
         Getter('relatedTags', 'relatedTags')
     ], RelatedTags.prototype, "storedRelatedTags", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"related-tags.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.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\n\n\n\n\n\n\n\nimport { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { relatedTagsXModule } from '../x-module';\nimport RelatedTag from './related-tag.vue';\n\n/**\n * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n * default to select from after a query is performed to fine-tune search.\n * For example, if you are searching for *lego*, different related tags could be *city*,\n * *friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n * or *lego harry potter*.\n *\n * @public\n */\n@Component({\n  components: { RelatedTag },\n  mixins: [xComponentMixin(relatedTagsXModule)]\n})\nexport 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"],"names":[],"mappings":";;;;;;;;AA2CA;;;;;;;;;AAaA;IAAyC,+BAAG;IAA5C;;KAuBC;IAHC,sBAAc,oCAAW;aAAzB;YACE,OAAO,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAC/D;;;OAAA;IAfD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACE;IAQ1B;QADC,IAAI,EAAE;yDAC6B;IAGpC;QADC,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC;0DACQ;IAlB1B,WAAW;QAJ/B,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,UAAU,YAAA,EAAE;YAC1B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,WAAW,CAuB/B;IAAD,kBAAC;CAAA,CAvBwC,GAAG;;;;"}
+{"version":3,"file":"related-tags.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.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\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { relatedTagsXModule } from '../x-module';\nimport RelatedTag from './related-tag.vue';\n\n/**\n * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n * default to select from after a query is performed to fine-tune search.\n * For example, if you are searching for *lego*, different related tags could be *city*,\n * *friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n * or *lego harry potter*.\n *\n * @public\n */\n@Component({\n  components: { RelatedTag },\n  mixins: [xComponentMixin(relatedTagsXModule)]\n})\nexport 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  /**\n   * Flag to indicate if the curated tags should be displayed different.\n   *\n   * @public\n   */\n  @Prop({ default: false, type: Boolean })\n  protected highlightCurated!: boolean;\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"],"names":[],"mappings":";;;;;;;;AAiDA;;;;;;;;;AAaA;IAAyC,+BAAG;IAA5C;;KA+BC;IAHC,sBAAc,oCAAW;aAAzB;YACE,OAAO,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAC/D;;;OAAA;IAvBD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACE;IAQ1B;QADC,IAAI,EAAE;yDAC6B;IAQpC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDACH;IAGrC;QADC,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC;0DACQ;IA1B1B,WAAW;QAJ/B,SAAS,CAAC;YACT,UAAU,EAAE,EAAE,UAAU,YAAA,EAAE;YAC1B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;SAC9C,CAAC;OACmB,WAAW,CA+B/B;IAAD,kBAAC;CAAA,CA/BwC,GAAG;;;;"}

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

@@ -5,7 +5,7 @@ import script from './main-scroll-item.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;

package/js/x-modules/scroll/components/main-scroll-item.vue_rollup-plugin-vue=script.js

@@ -63,6 +63,7 @@ import '../../../components/icons/plus.vue.js';
 import '../../../components/icons/search.vue.js';
 import '../../../components/icons/show.vue.js';
 import '../../../components/icons/search-tiny.vue.js';
+import '../../../components/icons/tag.vue.js';
 import '../../../components/icons/trash-open.vue.js';
 import '../../../components/icons/trash.vue.js';
 import '../../../components/icons/trending-tiny.vue.js';
@@ -106,6 +107,8 @@ import { ScrollObserverKey } from './scroll.const.js';
 import '../../../components/layouts/multi-column-max-width-layout.vue.js';
 import '../../../components/layouts/single-column-layout.vue.js';
 import '../../../components/location-provider.vue.js';
+import '../../../components/global-x-bus.vue.js';
+import '../../../components/snippet-callbacks.vue.js';
 import '../../../components/items-list-injection.mixin.js';
 
 /**

package/js/x-modules/scroll/components/main-scroll-item.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"main-scroll-item.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll-item.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\nimport { Identifiable } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement, State, xComponentMixin } from '../../../components';\nimport { XInject } from '../../../components/decorators/injection.decorators';\nimport { scrollXModule } from '../x-module';\nimport { ScrollObserverKey } from './scroll.const';\nimport { 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})\nexport 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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;;;;;AASA;IAA4C,kCAAG;IAA/C;;KAiFC;;;;;;;;;IAhCO,gCAAO,GAAb;;;;4BACE,qBAAM,IAAI,CAAC,SAAS,EAAE,EAAA;;wBAAtB,SAAsB,CAAC;;wBAEvB,IAAI,CAAC,MAAM,CAAC,0BAA0B,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;;;;;KAChF;;;;;;IAOD,sCAAa,GAAb;;QACE,MAAA,IAAI,CAAC,wBAAwB,0CAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACpD;;;;;;;IAQD,oCAAW,GAAX,UACE,WAA4C,EAC5C,WAA4C;QAE5C,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC;YAC1B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;SACxC;KACF;IAlED;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gDACE;IAQ3B;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAM,OAAA,SAAS,GAAA,EAAE,CAAC;+CACF;IASjC;QADC,KAAK,CAAC,QAAQ,EAAE,iBAAiB,CAAC;2DACH;IAQhC;QADC,OAAO,CAAC,iBAAiB,CAAC;oEACuC;IAvC/C,cAAc;QAHlC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,cAAc,CAiFlC;IAAD,qBAAC;CAAA,CAjF2C,GAAG;;;;"}
+{"version":3,"file":"main-scroll-item.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/main-scroll-item.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\nimport { Identifiable } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement, State, xComponentMixin } from '../../../components';\nimport { XInject } from '../../../components/decorators/injection.decorators';\nimport { scrollXModule } from '../x-module';\nimport { ScrollObserverKey } from './scroll.const';\nimport { 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})\nexport 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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;;;;;AASA;IAA4C,kCAAG;IAA/C;;KAiFC;;;;;;;;;IAhCO,gCAAO,GAAb;;;;4BACE,qBAAM,IAAI,CAAC,SAAS,EAAE,EAAA;;wBAAtB,SAAsB,CAAC;;wBAEvB,IAAI,CAAC,MAAM,CAAC,0BAA0B,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;;;;;KAChF;;;;;;IAOD,sCAAa,GAAb;;QACE,MAAA,IAAI,CAAC,wBAAwB,0CAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACpD;;;;;;;IAQD,oCAAW,GAAX,UACE,WAA4C,EAC5C,WAA4C;QAE5C,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC;YAC1B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;SACxC;KACF;IAlED;QADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gDACE;IAQ3B;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAM,OAAA,SAAS,GAAA,EAAE,CAAC;+CACF;IASjC;QADC,KAAK,CAAC,QAAQ,EAAE,iBAAiB,CAAC;2DACH;IAQhC;QADC,OAAO,CAAC,iBAAiB,CAAC;oEACuC;IAvC/C,cAAc;QAHlC,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACzC,CAAC;OACmB,cAAc,CAiFlC;IAAD,qBAAC;CAAA,CAjF2C,GAAG;;;;"}

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

@@ -5,7 +5,7 @@ import script from './scroll-to-top.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;
@@ -19,15 +19,14 @@ var __vue_render__ = function() {
             _vm._g(
               {
                 staticClass: "x-button x-scroll-to-top",
-                attrs: { "data-test": "scroll-to-top", events: _vm.events }
+                attrs: { "data-test": "scroll-to-top", events: _vm.events },
               },
               _vm.$listeners
             ),
             [_vm._t("default")],
             2
           )
-        : _vm._e()
-    ],
+        : _vm._e() ],
     1
   )
 };

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

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <BaseEventButton\n      v-if=\"isVisible\"\n      v-on=\"$listeners\"\n      class=\"x-button x-scroll-to-top\"\n      data-test=\"scroll-to-top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { State, xComponentMixin } from '../../../components';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { NoElement } from '../../../components/no-element';\n  import { Dictionary } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { ScrollComponentState } from '../store';\n  import { scrollXModule } from '../x-module';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * The `ScrollToTop` component is a button that the user can click to make a container scroll\n   * up to its initial position.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)],\n    components: { BaseEventButton }\n  })\n  export default class ScrollToTop extends Vue {\n    /**\n     * Animation to use for showing/hiding the button.\n     *\n     * @public\n     */\n    @Prop({ default: () => NoElement })\n    public animation!: Vue | string;\n\n    /**\n     * Threshold in pixels from the top to show the button.\n     *\n     * @public\n     */\n    @Prop()\n    public thresholdPx?: number;\n\n    /**\n     * Id of the target scroll component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    public scrollId!: string;\n\n    /**\n     * State of all the scroll components in this module.\n     *\n     * @internal\n     */\n    // TODO: Directly retrieve the needed data in this computed property\n    @State('scroll', 'data')\n    public scrollPositionsMap!: Dictionary<ScrollComponentState>;\n\n    /**\n     * The scroll data retrieved for this component.\n     *\n     * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n     * passed. Otherwise it returns `null`.\n     * @internal\n     */\n    protected get scrollData(): ScrollComponentState {\n      return this.scrollId && this.scrollPositionsMap[this.scrollId]\n        ? this.scrollPositionsMap[this.scrollId]\n        : {\n            position: 0,\n            direction: 'UP',\n            hasReachedStart: false,\n            hasAlmostReachedEnd: false,\n            hasReachedEnd: false\n          };\n    }\n\n    /**\n     * Event that will be emitted when the scroll to top is clicked.\n     *\n     * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n     * @internal\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return { UserClickedScrollToTop: this.scrollId };\n    }\n\n    /**\n     * Checks if the thresholdPx prop has been provided and if it is a number.\n     *\n     * @returns If the thresholdPx is a number or not.\n     * @internal\n     */\n    protected get useThresholdStrategy(): boolean {\n      return typeof this.thresholdPx === 'number';\n    }\n\n    /**\n     * Checks if the threshold has been reached in case the threshold strategy is in use.\n     *\n     * @returns If the scrollTop is bigger than the thresholdPx.\n     * @internal\n     */\n    protected get isThresholdReached(): boolean {\n      return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx!;\n    }\n\n    /**\n     * Whether if the button is visible or not depending on the strategy being used.\n     *\n     * @returns If the button should be visible or not.\n     * @internal\n     */\n    protected get isVisible(): boolean {\n      return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;\n    }\n\n    /**\n     * Returns if the scroll has almost reached its end or not.\n     *\n     * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n     * @internal\n     */\n    protected get hasAlmostReachedScrollEnd(): boolean {\n      return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\n## Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script>\n  import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollToTopTest',\n    components: {\n      ScrollToTop\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedScrollToTop`: the event is emitted after the user clicks the button. The event payload\n  is the id of the scroll that it going to be scrolled.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"scroll-to-top.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <BaseEventButton\n      v-if=\"isVisible\"\n      v-on=\"$listeners\"\n      class=\"x-button x-scroll-to-top\"\n      data-test=\"scroll-to-top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { State, xComponentMixin } from '../../../components';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { NoElement } from '../../../components/no-element';\n  import { Dictionary } from '../../../utils';\n  import { XEventsTypes } from '../../../wiring';\n  import { ScrollComponentState } from '../store';\n  import { scrollXModule } from '../x-module';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * The `ScrollToTop` component is a button that the user can click to make a container scroll\n   * up to its initial position.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)],\n    components: { BaseEventButton }\n  })\n  export default class ScrollToTop extends Vue {\n    /**\n     * Animation to use for showing/hiding the button.\n     *\n     * @public\n     */\n    @Prop({ default: () => NoElement })\n    public animation!: Vue | string;\n\n    /**\n     * Threshold in pixels from the top to show the button.\n     *\n     * @public\n     */\n    @Prop()\n    public thresholdPx?: number;\n\n    /**\n     * Id of the target scroll component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    public scrollId!: string;\n\n    /**\n     * State of all the scroll components in this module.\n     *\n     * @internal\n     */\n    // TODO: Directly retrieve the needed data in this computed property\n    @State('scroll', 'data')\n    public scrollPositionsMap!: Dictionary<ScrollComponentState>;\n\n    /**\n     * The scroll data retrieved for this component.\n     *\n     * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n     * passed. Otherwise it returns `null`.\n     * @internal\n     */\n    protected get scrollData(): ScrollComponentState {\n      return this.scrollId && this.scrollPositionsMap[this.scrollId]\n        ? this.scrollPositionsMap[this.scrollId]\n        : {\n            position: 0,\n            direction: 'UP',\n            hasReachedStart: false,\n            hasAlmostReachedEnd: false,\n            hasReachedEnd: false\n          };\n    }\n\n    /**\n     * Event that will be emitted when the scroll to top is clicked.\n     *\n     * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n     * @internal\n     */\n    protected get events(): Partial<XEventsTypes> {\n      return { UserClickedScrollToTop: this.scrollId };\n    }\n\n    /**\n     * Checks if the thresholdPx prop has been provided and if it is a number.\n     *\n     * @returns If the thresholdPx is a number or not.\n     * @internal\n     */\n    protected get useThresholdStrategy(): boolean {\n      return typeof this.thresholdPx === 'number';\n    }\n\n    /**\n     * Checks if the threshold has been reached in case the threshold strategy is in use.\n     *\n     * @returns If the scrollTop is bigger than the thresholdPx.\n     * @internal\n     */\n    protected get isThresholdReached(): boolean {\n      return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx!;\n    }\n\n    /**\n     * Whether if the button is visible or not depending on the strategy being used.\n     *\n     * @returns If the button should be visible or not.\n     * @internal\n     */\n    protected get isVisible(): boolean {\n      return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;\n    }\n\n    /**\n     * Returns if the scroll has almost reached its end or not.\n     *\n     * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n     * @internal\n     */\n    protected get hasAlmostReachedScrollEnd(): boolean {\n      return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n# Examples\n\n## Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script>\n  import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollToTopTest',\n    components: {\n      ScrollToTop\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedScrollToTop`: the event is emitted after the user clicks the button. The event payload\n  is the id of the scroll that it going to be scrolled.\n</docs>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/scroll/components/scroll-to-top.vue_rollup-plugin-vue=script.js

@@ -63,6 +63,7 @@ import '../../../components/icons/plus.vue.js';
 import '../../../components/icons/search.vue.js';
 import '../../../components/icons/show.vue.js';
 import '../../../components/icons/search-tiny.vue.js';
+import '../../../components/icons/tag.vue.js';
 import '../../../components/icons/trash-open.vue.js';
 import '../../../components/icons/trash.vue.js';
 import '../../../components/icons/trending-tiny.vue.js';
@@ -106,6 +107,8 @@ import { MainScrollId } from './scroll.const.js';
 import '../../../components/layouts/multi-column-max-width-layout.vue.js';
 import '../../../components/layouts/single-column-layout.vue.js';
 import '../../../components/location-provider.vue.js';
+import '../../../components/global-x-bus.vue.js';
+import '../../../components/snippet-callbacks.vue.js';
 import '../../../components/items-list-injection.mixin.js';
 
 /**

package/js/x-modules/scroll/components/scroll-to-top.vue_rollup-plugin-vue=script.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\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 { State, xComponentMixin } from '../../../components';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { NoElement } from '../../../components/no-element';\nimport { Dictionary } from '../../../utils';\nimport { XEventsTypes } from '../../../wiring';\nimport { ScrollComponentState } from '../store';\nimport { scrollXModule } from '../x-module';\nimport { MainScrollId } from './scroll.const';\n\n/**\n * The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(scrollXModule)],\n  components: { BaseEventButton }\n})\nexport default class ScrollToTop extends Vue {\n  /**\n   * Animation to use for showing/hiding the button.\n   *\n   * @public\n   */\n  @Prop({ default: () => NoElement })\n  public animation!: Vue | string;\n\n  /**\n   * Threshold in pixels from the top to show the button.\n   *\n   * @public\n   */\n  @Prop()\n  public thresholdPx?: number;\n\n  /**\n   * Id of the target scroll component.\n   *\n   * @public\n   */\n  @Prop({ default: MainScrollId })\n  public scrollId!: string;\n\n  /**\n   * State of all the scroll components in this module.\n   *\n   * @internal\n   */\n  // TODO: Directly retrieve the needed data in this computed property\n  @State('scroll', 'data')\n  public scrollPositionsMap!: Dictionary<ScrollComponentState>;\n\n  /**\n   * The scroll data retrieved for this component.\n   *\n   * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n   * passed. Otherwise it returns `null`.\n   * @internal\n   */\n  protected get scrollData(): ScrollComponentState {\n    return this.scrollId && this.scrollPositionsMap[this.scrollId]\n      ? this.scrollPositionsMap[this.scrollId]\n      : {\n          position: 0,\n          direction: 'UP',\n          hasReachedStart: false,\n          hasAlmostReachedEnd: false,\n          hasReachedEnd: false\n        };\n  }\n\n  /**\n   * Event that will be emitted when the scroll to top is clicked.\n   *\n   * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n   * @internal\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return { UserClickedScrollToTop: this.scrollId };\n  }\n\n  /**\n   * Checks if the thresholdPx prop has been provided and if it is a number.\n   *\n   * @returns If the thresholdPx is a number or not.\n   * @internal\n   */\n  protected get useThresholdStrategy(): boolean {\n    return typeof this.thresholdPx === 'number';\n  }\n\n  /**\n   * Checks if the threshold has been reached in case the threshold strategy is in use.\n   *\n   * @returns If the scrollTop is bigger than the thresholdPx.\n   * @internal\n   */\n  protected get isThresholdReached(): boolean {\n    return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx!;\n  }\n\n  /**\n   * Whether if the button is visible or not depending on the strategy being used.\n   *\n   * @returns If the button should be visible or not.\n   * @internal\n   */\n  protected get isVisible(): boolean {\n    return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;\n  }\n\n  /**\n   * Returns if the scroll has almost reached its end or not.\n   *\n   * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n   * @internal\n   */\n  protected get hasAlmostReachedScrollEnd(): boolean {\n    return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;;;;;;AAUA;IAAyC,+BAAG;IAA5C;;KAsGC;IA7DC,sBAAc,mCAAU;;;;;;;;aAAxB;YACE,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;kBAC1D,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;kBACtC;oBACE,QAAQ,EAAE,CAAC;oBACX,SAAS,EAAE,IAAI;oBACf,eAAe,EAAE,KAAK;oBACtB,mBAAmB,EAAE,KAAK;oBAC1B,aAAa,EAAE,KAAK;iBACrB,CAAC;SACP;;;OAAA;IAQD,sBAAc,+BAAM;;;;;;;aAApB;YACE,OAAO,EAAE,sBAAsB,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;SAClD;;;OAAA;IAQD,sBAAc,6CAAoB;;;;;;;aAAlC;YACE,OAAO,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC;SAC7C;;;OAAA;IAQD,sBAAc,2CAAkB;;;;;;;aAAhC;YACE,OAAO,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAY,CAAC;SAClF;;;OAAA;IAQD,sBAAc,kCAAS;;;;;;;aAAvB;YACE,OAAO,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,yBAAyB,CAAC;SAC7F;;;OAAA;IAQD,sBAAc,kDAAyB;;;;;;;aAAvC;YACE,OAAO,IAAI,CAAC,UAAU,CAAC,mBAAmB,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,KAAK,MAAM,CAAC;SACpF;;;OAAA;IA9FD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAM,OAAA,SAAS,GAAA,EAAE,CAAC;kDACH;IAQhC;QADC,IAAI,EAAE;oDACqB;IAQ5B;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;iDACP;IASzB;QADC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC;2DACqC;IAhC1C,WAAW;QAJ/B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACxC,UAAU,EAAE,EAAE,eAAe,iBAAA,EAAE;SAChC,CAAC;OACmB,WAAW,CAsG/B;IAAD,kBAAC;CAAA,CAtGwC,GAAG;;;;"}
+{"version":3,"file":"scroll-to-top.vue_rollup-plugin-vue=script.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\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 { State, xComponentMixin } from '../../../components';\nimport BaseEventButton from '../../../components/base-event-button.vue';\nimport { NoElement } from '../../../components/no-element';\nimport { Dictionary } from '../../../utils';\nimport { XEventsTypes } from '../../../wiring';\nimport { ScrollComponentState } from '../store';\nimport { scrollXModule } from '../x-module';\nimport { MainScrollId } from './scroll.const';\n\n/**\n * The `ScrollToTop` component is a button that the user can click to make a container scroll\n * up to its initial position.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(scrollXModule)],\n  components: { BaseEventButton }\n})\nexport default class ScrollToTop extends Vue {\n  /**\n   * Animation to use for showing/hiding the button.\n   *\n   * @public\n   */\n  @Prop({ default: () => NoElement })\n  public animation!: Vue | string;\n\n  /**\n   * Threshold in pixels from the top to show the button.\n   *\n   * @public\n   */\n  @Prop()\n  public thresholdPx?: number;\n\n  /**\n   * Id of the target scroll component.\n   *\n   * @public\n   */\n  @Prop({ default: MainScrollId })\n  public scrollId!: string;\n\n  /**\n   * State of all the scroll components in this module.\n   *\n   * @internal\n   */\n  // TODO: Directly retrieve the needed data in this computed property\n  @State('scroll', 'data')\n  public scrollPositionsMap!: Dictionary<ScrollComponentState>;\n\n  /**\n   * The scroll data retrieved for this component.\n   *\n   * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n   * passed. Otherwise it returns `null`.\n   * @internal\n   */\n  protected get scrollData(): ScrollComponentState {\n    return this.scrollId && this.scrollPositionsMap[this.scrollId]\n      ? this.scrollPositionsMap[this.scrollId]\n      : {\n          position: 0,\n          direction: 'UP',\n          hasReachedStart: false,\n          hasAlmostReachedEnd: false,\n          hasReachedEnd: false\n        };\n  }\n\n  /**\n   * Event that will be emitted when the scroll to top is clicked.\n   *\n   * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n   * @internal\n   */\n  protected get events(): Partial<XEventsTypes> {\n    return { UserClickedScrollToTop: this.scrollId };\n  }\n\n  /**\n   * Checks if the thresholdPx prop has been provided and if it is a number.\n   *\n   * @returns If the thresholdPx is a number or not.\n   * @internal\n   */\n  protected get useThresholdStrategy(): boolean {\n    return typeof this.thresholdPx === 'number';\n  }\n\n  /**\n   * Checks if the threshold has been reached in case the threshold strategy is in use.\n   *\n   * @returns If the scrollTop is bigger than the thresholdPx.\n   * @internal\n   */\n  protected get isThresholdReached(): boolean {\n    return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx!;\n  }\n\n  /**\n   * Whether if the button is visible or not depending on the strategy being used.\n   *\n   * @returns If the button should be visible or not.\n   * @internal\n   */\n  protected get isVisible(): boolean {\n    return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;\n  }\n\n  /**\n   * Returns if the scroll has almost reached its end or not.\n   *\n   * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n   * @internal\n   */\n  protected get hasAlmostReachedScrollEnd(): boolean {\n    return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;;;;;;AAUA;IAAyC,+BAAG;IAA5C;;KAsGC;IA7DC,sBAAc,mCAAU;;;;;;;;aAAxB;YACE,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;kBAC1D,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;kBACtC;oBACE,QAAQ,EAAE,CAAC;oBACX,SAAS,EAAE,IAAI;oBACf,eAAe,EAAE,KAAK;oBACtB,mBAAmB,EAAE,KAAK;oBAC1B,aAAa,EAAE,KAAK;iBACrB,CAAC;SACP;;;OAAA;IAQD,sBAAc,+BAAM;;;;;;;aAApB;YACE,OAAO,EAAE,sBAAsB,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;SAClD;;;OAAA;IAQD,sBAAc,6CAAoB;;;;;;;aAAlC;YACE,OAAO,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC;SAC7C;;;OAAA;IAQD,sBAAc,2CAAkB;;;;;;;aAAhC;YACE,OAAO,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAY,CAAC;SAClF;;;OAAA;IAQD,sBAAc,kCAAS;;;;;;;aAAvB;YACE,OAAO,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,yBAAyB,CAAC;SAC7F;;;OAAA;IAQD,sBAAc,kDAAyB;;;;;;;aAAvC;YACE,OAAO,IAAI,CAAC,UAAU,CAAC,mBAAmB,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,KAAK,MAAM,CAAC;SACpF;;;OAAA;IA9FD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAM,OAAA,SAAS,GAAA,EAAE,CAAC;kDACH;IAQhC;QADC,IAAI,EAAE;oDACqB;IAQ5B;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;iDACP;IASzB;QADC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC;2DACqC;IAhC1C,WAAW;QAJ/B,SAAS,CAAC;YACT,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACxC,UAAU,EAAE,EAAE,eAAe,iBAAA,EAAE;SAChC,CAAC;OACmB,WAAW,CAsG/B;IAAD,kBAAC;CAAA,CAtGwC,GAAG;;;;"}