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

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

@@ -1 +1 @@
-{"version":3,"file":"scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue"],"sourcesContent":["<template>\n  <BaseScroll\n    @scroll=\"emitScroll\"\n    @scroll:direction-change=\"emitScrollDirectionChange\"\n    @scroll:at-start=\"emitScrollAtStart\"\n    @scroll:almost-at-end=\"emitScrollAlmostAtEnd\"\n    @scroll:at-end=\"emitScrollAtEnd\"\n    v-on=\"$listeners\"\n    :id=\"id\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </BaseScroll>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { XOn } from '../../../components/decorators/bus.decorators';\n  import BaseScroll from '../../../components/scroll/base-scroll.vue';\n  import { ScrollDirection } from '../../../components/scroll/scroll.types';\n  import { scrollXModule } from '../x-module';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * Scrollable container that emits scroll related X Events. It exposes all the listeners\n   * and props from the {@link BaseScroll} component.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)],\n    components: { BaseScroll }\n  })\n  export default class Scroll extends Vue {\n    /**\n     * Id to identify the component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    public id!: string;\n\n    /**\n     * Emits the `UserScrolled` event.\n     *\n     * @param position - The new position of scroll.\n     * @internal\n     */\n    protected emitScroll(position: number): void {\n      this.$x.emit('UserScrolled', position, this.createEventMetadata());\n    }\n\n    /**\n     * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n     *\n     * @param direction - The new direction of scroll.\n     * @internal\n     */\n    protected emitScrollDirectionChange(direction: ScrollDirection): void {\n      this.$x.emit('UserChangedScrollDirection', direction, this.createEventMetadata());\n    }\n\n    /**\n     * Emits the 'UserReachedScrollStart' event when the user reaches the start.\n     *\n     * @param isAtStart - A boolean indicating if the scroll is at the ending position.\n     * @internal\n     */\n    protected emitScrollAtStart(isAtStart: boolean): void {\n      this.$x.emit('UserReachedScrollStart', isAtStart, this.createEventMetadata());\n    }\n\n    /**\n     * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n     *\n     * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n     * @internal\n     */\n    protected emitScrollAlmostAtEnd(isAlmostAtEnd: boolean): void {\n      this.$x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, this.createEventMetadata());\n    }\n\n    /**\n     * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n     *\n     * @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n     * @internal\n     */\n    protected emitScrollAtEnd(isAtEnd: boolean): void {\n      this.$x.emit('UserReachedScrollEnd', isAtEnd, this.createEventMetadata());\n    }\n\n    /**\n     * Creates a {@link WireMetadata} metadata object for all the emitted events.\n     *\n     * @internal\n     * @returns A new {@link WireMetadata} object.\n     */\n    protected createEventMetadata(): Partial<WireMetadata> {\n      return { target: this.$el as HTMLElement, id: this.id };\n    }\n\n    /**\n     * Scrolls to initial position when the user has clicked the scroll to top button.\n     *\n     * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n     * @internal\n     */\n    @XOn('UserClickedScrollToTop')\n    scrollToTop(scrollId: string): void {\n      if (scrollId === this.id && this.$el) {\n        this.$el?.scrollTo({ top: 0, behavior: 'smooth' });\n      }\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserScrolled`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted after the user scrolls in this container. The payload is the scroll top distance in\n  pixels.\n- [`UserChangedScrollDirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user changes the scroll direction. The payload is the new scrolling direction.\n- [`UserReachedScrollStart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user scrolls up to the initial position of the scroll.\n- [`UserAlmostReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user is about to reach the bottom part of the scroll.\n- [`UserReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user has reached the bottom part of the scroll.\n\n## Example\n\nThe Scroll is a component that wraps the BaseScroll and provides it for a unique id.\n\n### Customized usage\n\n#### Overriding the properties\n\nIt renders an element with scroll, with the content passed in the `default slot`.\n\n```vue\n<template>\n  <Scroll id=\"exampleScrollId\" throttleMs=\"50\" distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    }\n  };\n</script>\n```\n\n#### Using scroll events.\n\n```vue\n<template>\n  <Scroll\n    @scroll=\"scroll\"\n    @scroll:direction-change=\"scrollDirectionChange\"\n    @scroll:at-start=\"scrollAtStart\"\n    @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n    @scroll:at-end=\"scrollAtEnd\"\n    id=\"exampleScrollId\"\n    throttleMs=\"50\"\n    distanceToBottom=\"300\"\n  >\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart(isAtStart) {\n        console.log('scroll:at-start', isAtStart);\n      },\n      scrollAlmostAtEnd(isAlmostAtEnd) {\n        console.log('scroll:almost-at-end', isAlmostAtEnd);\n      },\n      scrollAtEnd(isAtEnd) {\n        console.log('scroll:at-end', isAtEnd);\n      }\n    }\n  };\n</script>\n```\n\n#### Using XEvents.\n\nYou can use the XEvents subscribing to them.\n\n```vue\n<template>\n  <Scroll throttleMs=\"50\" distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    },\n    mounted() {\n      this.$x.on('UserScrolled').subscribe(distance => {\n        console.log(distance);\n      });\n      this.$x.on('UserChangedScrollDirection').subscribe(direction => {\n        console.log(direction);\n      });\n      this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {\n        console.log(isAtStart);\n      });\n      this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n        console.log(isAlmostAtEnd);\n      });\n      this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n        console.log(isAtEnd);\n      });\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"scroll.vue.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue"],"sourcesContent":["<template>\n  <BaseScroll\n    ref=\"scrollRef\"\n    @scroll=\"emitScroll\"\n    @scroll:direction-change=\"emitScrollDirectionChange\"\n    @scroll:at-start=\"emitScrollAtStart\"\n    @scroll:almost-at-end=\"emitScrollAlmostAtEnd\"\n    @scroll:at-end=\"emitScrollAtEnd\"\n    :id=\"id\"\n  >\n    <slot />\n  </BaseScroll>\n</template>\n\n<script lang=\"ts\">\n  import { ComponentPublicInstance, defineComponent, ref } from 'vue';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import BaseScroll from '../../../components/scroll/base-scroll.vue';\n  import { ScrollDirection } from '../../../components/scroll/scroll.types';\n  import { scrollXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * Scrollable container that emits scroll related X Events. It exposes all the listeners\n   * and props from the {@link BaseScroll} component.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Scroll',\n    xModule: scrollXModule.name,\n    components: { BaseScroll },\n    props: {\n      /**\n       * Id to identify the component.\n       *\n       * @public\n       */\n      id: {\n        type: String,\n        default: MainScrollId\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const scrollRef = ref<ComponentPublicInstance>();\n\n      /**\n       * Creates a {@link WireMetadata} metadata object for all the emitted events.\n       *\n       * @internal\n       * @returns A new {@link WireMetadata} object.\n       */\n      const createEventMetadata = (): Partial<WireMetadata> => {\n        return {\n          target: scrollRef.value?.$el as HTMLElement,\n          id: props.id\n        };\n      };\n\n      /**\n       * Emits the `UserScrolled` event.\n       *\n       * @param position - The new position of scroll.\n       * @internal\n       */\n      const emitScroll = (position: number) => {\n        $x.emit('UserScrolled', position, createEventMetadata());\n      };\n\n      /**\n       * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n       *\n       * @param direction - The new direction of scroll.\n       * @internal\n       */\n      const emitScrollDirectionChange = (direction: ScrollDirection) => {\n        $x.emit('UserChangedScrollDirection', direction, createEventMetadata());\n      };\n\n      /**\n       * Emits the 'UserReachedScrollStart' event when the user reaches the start.\n       *\n       * @param isAtStart - A boolean indicating if the scroll is at the ending position.\n       * @internal\n       */\n      const emitScrollAtStart = (isAtStart: boolean) => {\n        $x.emit('UserReachedScrollStart', isAtStart, createEventMetadata());\n      };\n\n      /**\n       * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n       *\n       * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n       * @internal\n       */\n      const emitScrollAlmostAtEnd = (isAlmostAtEnd: boolean) => {\n        $x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, createEventMetadata());\n      };\n\n      /**\n       * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n       *\n       * @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n       * @internal\n       */\n      const emitScrollAtEnd = (isAtEnd: boolean) => {\n        $x.emit('UserReachedScrollEnd', isAtEnd, createEventMetadata());\n      };\n\n      /**\n       * Scrolls to initial position when the user has clicked the scroll to top button.\n       *\n       * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n       * @internal\n       */\n      $x.on('UserClickedScrollToTop', false).subscribe((scrollId: string) => {\n        if (scrollId === props.id && scrollRef.value) {\n          (scrollRef.value.$el as HTMLElement).scrollTo({ top: 0, behavior: 'smooth' });\n        }\n      });\n\n      return {\n        scrollRef,\n        emitScrollAtEnd,\n        emitScrollAlmostAtEnd,\n        emitScrollAtStart,\n        emitScrollDirectionChange,\n        emitScroll\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserScrolled`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted after the user scrolls in this container. The payload is the scroll top distance in\n  pixels.\n- [`UserChangedScrollDirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user changes the scroll direction. The payload is the new scrolling direction.\n- [`UserReachedScrollStart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user scrolls up to the initial position of the scroll.\n- [`UserAlmostReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user is about to reach the bottom part of the scroll.\n- [`UserReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user has reached the bottom part of the scroll.\n\n## Example\n\nThe Scroll is a component that wraps the BaseScroll and provides it for a unique id.\n\n### Customized usage\n\n#### Overriding the properties\n\nIt renders an element with scroll, with the content passed in the `default slot`.\n\n```vue\n<template>\n  <Scroll id=\"exampleScrollId\" throttleMs=\"50\" distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    }\n  };\n</script>\n```\n\n#### Using scroll events.\n\n```vue\n<template>\n  <Scroll\n    @scroll=\"scroll\"\n    @scroll:direction-change=\"scrollDirectionChange\"\n    @scroll:at-start=\"scrollAtStart\"\n    @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n    @scroll:at-end=\"scrollAtEnd\"\n    id=\"exampleScrollId\"\n    throttleMs=\"50\"\n    distanceToBottom=\"300\"\n  >\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart(isAtStart) {\n        console.log('scroll:at-start', isAtStart);\n      },\n      scrollAlmostAtEnd(isAlmostAtEnd) {\n        console.log('scroll:almost-at-end', isAlmostAtEnd);\n      },\n      scrollAtEnd(isAtEnd) {\n        console.log('scroll:at-end', isAtEnd);\n      }\n    }\n  };\n</script>\n```\n\n#### Using XEvents.\n\nYou can use the XEvents subscribing to them.\n\n```vue\n<template>\n  <Scroll throttleMs=\"50\" distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    },\n    mounted() {\n      this.$x.on('UserScrolled').subscribe(distance => {\n        console.log(distance);\n      });\n      this.$x.on('UserChangedScrollDirection').subscribe(direction => {\n        console.log(direction);\n      });\n      this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {\n        console.log(isAtStart);\n      });\n      this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n        console.log(isAlmostAtEnd);\n      });\n      this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n        console.log(isAtEnd);\n      });\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","emitScrollAlmostAtEnd","emitScrollAtEnd","_renderSlot"],"mappings":";;;;;gCACEA,gBAUa,CAAA,YAAA,CAAA,CAAA;AARV,EAAA,OAAAC,SAAA,EAAkB,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAClB,GAAA,EAAA,WAAA;AAAA,IACA,QAAA,EAAA,IAAA,CAAA,UAAA;AAAA,IACA,0BAAsBC,EAAAA,IAAAA,CAAAA,yBAAAA;AAAAA,IACtB,kBAAeC,EAAAA,IAAAA,CAAAA,iBAAAA;AAAAA,IACf,sBAAM,EAAA,IAAA,CAAA,qBAAA;AAAA,IAAA,gBAAA,EAAA,IAAA,CAAA,eAAA;AARX,IAAA,EAAA,EAAA,IAAA,CAAA,EAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

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

@@ -1,10 +1,7 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
-import { XOn } from '../../../components/decorators/bus.decorators.js';
-import __vue_component__ from '../../../components/scroll/base-scroll.vue.js';
+import { defineComponent, ref } from 'vue';
+import BaseScroll from '../../../components/scroll/base-scroll.vue.js';
 import { scrollXModule } from '../x-module.js';
+import { use$x } from '../../../composables/use-_x.js';
 import { MainScrollId } from './scroll.const.js';
 
 /**
@@ -13,86 +10,102 @@ import { MainScrollId } from './scroll.const.js';
  *
  * @public
  */
-let Scroll = class Scroll extends Vue {
-    /**
-     * Emits the `UserScrolled` event.
-     *
-     * @param position - The new position of scroll.
-     * @internal
-     */
-    emitScroll(position) {
-        this.$x.emit('UserScrolled', position, this.createEventMetadata());
-    }
-    /**
-     * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.
-     *
-     * @param direction - The new direction of scroll.
-     * @internal
-     */
-    emitScrollDirectionChange(direction) {
-        this.$x.emit('UserChangedScrollDirection', direction, this.createEventMetadata());
-    }
-    /**
-     * Emits the 'UserReachedScrollStart' event when the user reaches the start.
-     *
-     * @param isAtStart - A boolean indicating if the scroll is at the ending position.
-     * @internal
-     */
-    emitScrollAtStart(isAtStart) {
-        this.$x.emit('UserReachedScrollStart', isAtStart, this.createEventMetadata());
-    }
-    /**
-     * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.
-     *
-     * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.
-     * @internal
-     */
-    emitScrollAlmostAtEnd(isAlmostAtEnd) {
-        this.$x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, this.createEventMetadata());
-    }
-    /**
-     * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.
-     *
-     * @param isAtEnd - A boolean indicating if the scroll is at the ending position.
-     * @internal
-     */
-    emitScrollAtEnd(isAtEnd) {
-        this.$x.emit('UserReachedScrollEnd', isAtEnd, this.createEventMetadata());
-    }
-    /**
-     * Creates a {@link WireMetadata} metadata object for all the emitted events.
-     *
-     * @internal
-     * @returns A new {@link WireMetadata} object.
-     */
-    createEventMetadata() {
-        return { target: this.$el, id: this.id };
-    }
-    /**
-     * Scrolls to initial position when the user has clicked the scroll to top button.
-     *
-     * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.
-     * @internal
-     */
-    scrollToTop(scrollId) {
-        if (scrollId === this.id && this.$el) {
-            this.$el?.scrollTo({ top: 0, behavior: 'smooth' });
+var _sfc_main = defineComponent({
+    name: 'Scroll',
+    xModule: scrollXModule.name,
+    components: { BaseScroll },
+    props: {
+        /**
+         * Id to identify the component.
+         *
+         * @public
+         */
+        id: {
+            type: String,
+            default: MainScrollId
         }
+    },
+    setup(props) {
+        const $x = use$x();
+        const scrollRef = ref();
+        /**
+         * Creates a {@link WireMetadata} metadata object for all the emitted events.
+         *
+         * @internal
+         * @returns A new {@link WireMetadata} object.
+         */
+        const createEventMetadata = () => {
+            return {
+                target: scrollRef.value?.$el,
+                id: props.id
+            };
+        };
+        /**
+         * Emits the `UserScrolled` event.
+         *
+         * @param position - The new position of scroll.
+         * @internal
+         */
+        const emitScroll = (position) => {
+            $x.emit('UserScrolled', position, createEventMetadata());
+        };
+        /**
+         * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.
+         *
+         * @param direction - The new direction of scroll.
+         * @internal
+         */
+        const emitScrollDirectionChange = (direction) => {
+            $x.emit('UserChangedScrollDirection', direction, createEventMetadata());
+        };
+        /**
+         * Emits the 'UserReachedScrollStart' event when the user reaches the start.
+         *
+         * @param isAtStart - A boolean indicating if the scroll is at the ending position.
+         * @internal
+         */
+        const emitScrollAtStart = (isAtStart) => {
+            $x.emit('UserReachedScrollStart', isAtStart, createEventMetadata());
+        };
+        /**
+         * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.
+         *
+         * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.
+         * @internal
+         */
+        const emitScrollAlmostAtEnd = (isAlmostAtEnd) => {
+            $x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, createEventMetadata());
+        };
+        /**
+         * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.
+         *
+         * @param isAtEnd - A boolean indicating if the scroll is at the ending position.
+         * @internal
+         */
+        const emitScrollAtEnd = (isAtEnd) => {
+            $x.emit('UserReachedScrollEnd', isAtEnd, createEventMetadata());
+        };
+        /**
+         * Scrolls to initial position when the user has clicked the scroll to top button.
+         *
+         * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.
+         * @internal
+         */
+        $x.on('UserClickedScrollToTop', false).subscribe((scrollId) => {
+            if (scrollId === props.id && scrollRef.value) {
+                scrollRef.value.$el.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+        });
+        return {
+            scrollRef,
+            emitScrollAtEnd,
+            emitScrollAlmostAtEnd,
+            emitScrollAtStart,
+            emitScrollDirectionChange,
+            emitScroll
+        };
     }
-};
-__decorate([
-    Prop({ default: MainScrollId })
-], Scroll.prototype, "id", void 0);
-__decorate([
-    XOn('UserClickedScrollToTop')
-], Scroll.prototype, "scrollToTop", null);
-Scroll = __decorate([
-    Component({
-        mixins: [xComponentMixin(scrollXModule)],
-        components: { BaseScroll: __vue_component__ }
-    })
-], Scroll);
-var script = Scroll;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=scroll.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"scroll.vue2.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { XOn } from '../../../components/decorators/bus.decorators';\n  import BaseScroll from '../../../components/scroll/base-scroll.vue';\n  import { ScrollDirection } from '../../../components/scroll/scroll.types';\n  import { scrollXModule } from '../x-module';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * Scrollable container that emits scroll related X Events. It exposes all the listeners\n   * and props from the {@link BaseScroll} component.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(scrollXModule)],\n    components: { BaseScroll }\n  })\n  export default class Scroll extends Vue {\n    /**\n     * Id to identify the component.\n     *\n     * @public\n     */\n    @Prop({ default: MainScrollId })\n    public id!: string;\n\n    /**\n     * Emits the `UserScrolled` event.\n     *\n     * @param position - The new position of scroll.\n     * @internal\n     */\n    protected emitScroll(position: number): void {\n      this.$x.emit('UserScrolled', position, this.createEventMetadata());\n    }\n\n    /**\n     * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n     *\n     * @param direction - The new direction of scroll.\n     * @internal\n     */\n    protected emitScrollDirectionChange(direction: ScrollDirection): void {\n      this.$x.emit('UserChangedScrollDirection', direction, this.createEventMetadata());\n    }\n\n    /**\n     * Emits the 'UserReachedScrollStart' event when the user reaches the start.\n     *\n     * @param isAtStart - A boolean indicating if the scroll is at the ending position.\n     * @internal\n     */\n    protected emitScrollAtStart(isAtStart: boolean): void {\n      this.$x.emit('UserReachedScrollStart', isAtStart, this.createEventMetadata());\n    }\n\n    /**\n     * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n     *\n     * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n     * @internal\n     */\n    protected emitScrollAlmostAtEnd(isAlmostAtEnd: boolean): void {\n      this.$x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, this.createEventMetadata());\n    }\n\n    /**\n     * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n     *\n     * @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n     * @internal\n     */\n    protected emitScrollAtEnd(isAtEnd: boolean): void {\n      this.$x.emit('UserReachedScrollEnd', isAtEnd, this.createEventMetadata());\n    }\n\n    /**\n     * Creates a {@link WireMetadata} metadata object for all the emitted events.\n     *\n     * @internal\n     * @returns A new {@link WireMetadata} object.\n     */\n    protected createEventMetadata(): Partial<WireMetadata> {\n      return { target: this.$el as HTMLElement, id: this.id };\n    }\n\n    /**\n     * Scrolls to initial position when the user has clicked the scroll to top button.\n     *\n     * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n     * @internal\n     */\n    @XOn('UserClickedScrollToTop')\n    scrollToTop(scrollId: string): void {\n      if (scrollId === this.id && this.$el) {\n        this.$el?.scrollTo({ top: 0, behavior: 'smooth' });\n      }\n    }\n  }\n"],"names":["BaseScroll"],"mappings":";;;;;;;;;AA0BE;;;;;AAKG;AAKY,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,GAAG,CAAA;AASrC;;;;;AAKG;AACO,IAAA,UAAU,CAAC,QAAgB,EAAA;AACnC,QAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACpE;AAED;;;;;AAKG;AACO,IAAA,yBAAyB,CAAC,SAA0B,EAAA;AAC5D,QAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACnF;AAED;;;;;AAKG;AACO,IAAA,iBAAiB,CAAC,SAAkB,EAAA;AAC5C,QAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KAC/E;AAED;;;;;AAKG;AACO,IAAA,qBAAqB,CAAC,aAAsB,EAAA;AACpD,QAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,aAAa,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACvF;AAED;;;;;AAKG;AACO,IAAA,eAAe,CAAC,OAAgB,EAAA;AACxC,QAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KAC3E;AAED;;;;;AAKG;IACO,mBAAmB,GAAA;AAC3B,QAAA,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;KACzD;AAED;;;;;AAKG;AAEH,IAAA,WAAW,CAAC,QAAgB,EAAA;QAC1B,IAAI,QAAQ,KAAK,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,GAAG,EAAE;AACpC,YAAA,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;AACpD,SAAA;KACF;CACF,CAAA;AA1EC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;AACb,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,IAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAqEnB,UAAA,CAAA;IADC,GAAG,CAAC,wBAAwB,CAAC;AAK7B,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,aAAA,EAAA,IAAA,CAAA,CAAA;AAhFkB,MAAM,GAAA,UAAA,CAAA;AAJ1B,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;QACxC,UAAU,EAAE,cAAEA,iBAAU,EAAE;KAC3B,CAAC;AACmB,CAAA,EAAA,MAAM,CAiF1B,CAAA;aAjFoB,MAAM;;;;"}
+{"version":3,"file":"scroll.vue2.js","sources":["../../../../../src/x-modules/scroll/components/scroll.vue"],"sourcesContent":["<template>\n  <BaseScroll\n    ref=\"scrollRef\"\n    @scroll=\"emitScroll\"\n    @scroll:direction-change=\"emitScrollDirectionChange\"\n    @scroll:at-start=\"emitScrollAtStart\"\n    @scroll:almost-at-end=\"emitScrollAlmostAtEnd\"\n    @scroll:at-end=\"emitScrollAtEnd\"\n    :id=\"id\"\n  >\n    <slot />\n  </BaseScroll>\n</template>\n\n<script lang=\"ts\">\n  import { ComponentPublicInstance, defineComponent, ref } from 'vue';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import BaseScroll from '../../../components/scroll/base-scroll.vue';\n  import { ScrollDirection } from '../../../components/scroll/scroll.types';\n  import { scrollXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * Scrollable container that emits scroll related X Events. It exposes all the listeners\n   * and props from the {@link BaseScroll} component.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Scroll',\n    xModule: scrollXModule.name,\n    components: { BaseScroll },\n    props: {\n      /**\n       * Id to identify the component.\n       *\n       * @public\n       */\n      id: {\n        type: String,\n        default: MainScrollId\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const scrollRef = ref<ComponentPublicInstance>();\n\n      /**\n       * Creates a {@link WireMetadata} metadata object for all the emitted events.\n       *\n       * @internal\n       * @returns A new {@link WireMetadata} object.\n       */\n      const createEventMetadata = (): Partial<WireMetadata> => {\n        return {\n          target: scrollRef.value?.$el as HTMLElement,\n          id: props.id\n        };\n      };\n\n      /**\n       * Emits the `UserScrolled` event.\n       *\n       * @param position - The new position of scroll.\n       * @internal\n       */\n      const emitScroll = (position: number) => {\n        $x.emit('UserScrolled', position, createEventMetadata());\n      };\n\n      /**\n       * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.\n       *\n       * @param direction - The new direction of scroll.\n       * @internal\n       */\n      const emitScrollDirectionChange = (direction: ScrollDirection) => {\n        $x.emit('UserChangedScrollDirection', direction, createEventMetadata());\n      };\n\n      /**\n       * Emits the 'UserReachedScrollStart' event when the user reaches the start.\n       *\n       * @param isAtStart - A boolean indicating if the scroll is at the ending position.\n       * @internal\n       */\n      const emitScrollAtStart = (isAtStart: boolean) => {\n        $x.emit('UserReachedScrollStart', isAtStart, createEventMetadata());\n      };\n\n      /**\n       * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.\n       *\n       * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.\n       * @internal\n       */\n      const emitScrollAlmostAtEnd = (isAlmostAtEnd: boolean) => {\n        $x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, createEventMetadata());\n      };\n\n      /**\n       * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.\n       *\n       * @param isAtEnd - A boolean indicating if the scroll is at the ending position.\n       * @internal\n       */\n      const emitScrollAtEnd = (isAtEnd: boolean) => {\n        $x.emit('UserReachedScrollEnd', isAtEnd, createEventMetadata());\n      };\n\n      /**\n       * Scrolls to initial position when the user has clicked the scroll to top button.\n       *\n       * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.\n       * @internal\n       */\n      $x.on('UserClickedScrollToTop', false).subscribe((scrollId: string) => {\n        if (scrollId === props.id && scrollRef.value) {\n          (scrollRef.value.$el as HTMLElement).scrollTo({ top: 0, behavior: 'smooth' });\n        }\n      });\n\n      return {\n        scrollRef,\n        emitScrollAtEnd,\n        emitScrollAlmostAtEnd,\n        emitScrollAtStart,\n        emitScrollDirectionChange,\n        emitScroll\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserScrolled`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted after the user scrolls in this container. The payload is the scroll top distance in\n  pixels.\n- [`UserChangedScrollDirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user changes the scroll direction. The payload is the new scrolling direction.\n- [`UserReachedScrollStart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user scrolls up to the initial position of the scroll.\n- [`UserAlmostReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user is about to reach the bottom part of the scroll.\n- [`UserReachedScrollEnd`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  emitted when the user has reached the bottom part of the scroll.\n\n## Example\n\nThe Scroll is a component that wraps the BaseScroll and provides it for a unique id.\n\n### Customized usage\n\n#### Overriding the properties\n\nIt renders an element with scroll, with the content passed in the `default slot`.\n\n```vue\n<template>\n  <Scroll id=\"exampleScrollId\" throttleMs=\"50\" distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    }\n  };\n</script>\n```\n\n#### Using scroll events.\n\n```vue\n<template>\n  <Scroll\n    @scroll=\"scroll\"\n    @scroll:direction-change=\"scrollDirectionChange\"\n    @scroll:at-start=\"scrollAtStart\"\n    @scroll:almost-at-end=\"scrollAlmostAtEnd\"\n    @scroll:at-end=\"scrollAtEnd\"\n    id=\"exampleScrollId\"\n    throttleMs=\"50\"\n    distanceToBottom=\"300\"\n  >\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      },\n      scrollDirectionChange(direction) {\n        console.log('scroll:direction-change', direction);\n      },\n      scrollAtStart(isAtStart) {\n        console.log('scroll:at-start', isAtStart);\n      },\n      scrollAlmostAtEnd(isAlmostAtEnd) {\n        console.log('scroll:almost-at-end', isAlmostAtEnd);\n      },\n      scrollAtEnd(isAtEnd) {\n        console.log('scroll:at-end', isAtEnd);\n      }\n    }\n  };\n</script>\n```\n\n#### Using XEvents.\n\nYou can use the XEvents subscribing to them.\n\n```vue\n<template>\n  <Scroll throttleMs=\"50\" distanceToBottom=\"300\">\n    <div class=\"content-scroll\">\n      <span>content1</span>\n      <span>content1</span>\n    </div>\n  </Scroll>\n</template>\n\n<script>\n  import { Scroll } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollIdTest',\n    components: {\n      Scroll\n    },\n    mounted() {\n      this.$x.on('UserScrolled').subscribe(distance => {\n        console.log(distance);\n      });\n      this.$x.on('UserChangedScrollDirection').subscribe(direction => {\n        console.log(direction);\n      });\n      this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {\n        console.log(isAtStart);\n      });\n      this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {\n        console.log(isAlmostAtEnd);\n      });\n      this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {\n        console.log(isAtEnd);\n      });\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAuBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,UAAS,EAAG;AAC1B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,YAAW;AACtB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,YAAY,GAAG,EAA2B,CAAA;AAEhD;;;;;AAKE;QACF,MAAM,mBAAoB,GAAE,MAA6B;YACvD,OAAO;AACL,gBAAA,MAAM,EAAE,SAAS,CAAC,KAAK,EAAE,GAAkB;gBAC3C,EAAE,EAAE,KAAK,CAAC,EAAC;aACZ,CAAA;AACH,SAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,aAAa,CAAC,QAAgB,KAAK;YACvC,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC,CAAA;AAC1D,SAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,yBAAwB,GAAI,CAAC,SAA0B,KAAK;YAChE,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,CAAA;AACzE,SAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,iBAAgB,GAAI,CAAC,SAAkB,KAAK;YAChD,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,CAAA;AACrE,SAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,qBAAoB,GAAI,CAAC,aAAsB,KAAK;YACxD,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,aAAa,EAAE,mBAAmB,EAAE,CAAC,CAAA;AAC7E,SAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,eAAc,GAAI,CAAC,OAAgB,KAAK;YAC5C,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,OAAO,EAAE,mBAAmB,EAAE,CAAC,CAAA;AACjE,SAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,EAAE,CAAC,EAAE,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,QAAgB,KAAK;YACrE,IAAI,QAAO,KAAM,KAAK,CAAC,EAAC,IAAK,SAAS,CAAC,KAAK,EAAE;AAC3C,gBAAA,SAAS,CAAC,KAAK,CAAC,GAAmB,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAO,EAAG,CAAC,CAAA;AAC/E,aAAA;AACF,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,SAAS;YACT,eAAe;YACf,qBAAqB;YACrB,iBAAiB;YACjB,yBAAyB;YACzB,UAAS;SACV,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/scroll/store/module.js

@@ -1,5 +1,3 @@
-import Vue from 'vue';
-
 /**
  * {@link XStoreModule} For the scroll module.
  *
@@ -14,13 +12,13 @@ const scrollXStoreModule = {
     mutations: {
         setScrollComponentState(state, { id, newState }) {
             if (!state.data[id]) {
-                Vue.set(state.data, id, {
+                state.data[id] = {
                     hasReachedStart: false,
                     hasAlmostReachedEnd: false,
                     hasReachedEnd: false,
                     position: 0,
                     direction: 'UP'
-                });
+                };
             }
             Object.assign(state.data[id], newState);
         },

package/js/x-modules/scroll/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/scroll/store/module.ts"],"sourcesContent":["import Vue from 'vue';\nimport { ScrollComponentState, ScrollXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the scroll module.\n *\n * @internal\n */\nexport const scrollXStoreModule: ScrollXStoreModule = {\n  state: () => ({\n    data: {},\n    pendingScrollTo: ''\n  }),\n  getters: {},\n  mutations: {\n    setScrollComponentState(state, { id, newState }) {\n      if (!state.data[id]) {\n        Vue.set<ScrollComponentState>(state.data, id, {\n          hasReachedStart: false,\n          hasAlmostReachedEnd: false,\n          hasReachedEnd: false,\n          position: 0,\n          direction: 'UP'\n        });\n      }\n      Object.assign(state.data[id], newState);\n    },\n    setPendingScrollTo(state, pendingScrollTo) {\n      state.pendingScrollTo = pendingScrollTo;\n    }\n  },\n  actions: {}\n};\n"],"names":[],"mappings":";;AAGA;;;;AAIG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,eAAe,EAAE,EAAE;KACpB,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;AACT,QAAA,uBAAuB,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAA;AAC7C,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;gBACnB,GAAG,CAAC,GAAG,CAAuB,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE;AAC5C,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,mBAAmB,EAAE,KAAK;AAC1B,oBAAA,aAAa,EAAE,KAAK;AACpB,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,SAAS,EAAE,IAAI;AAChB,iBAAA,CAAC,CAAC;AACJ,aAAA;AACD,YAAA,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;SACzC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAA;AACvC,YAAA,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;SACzC;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/scroll/store/module.ts"],"sourcesContent":["import { ScrollXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the scroll module.\n *\n * @internal\n */\nexport const scrollXStoreModule: ScrollXStoreModule = {\n  state: () => ({\n    data: {},\n    pendingScrollTo: ''\n  }),\n  getters: {},\n  mutations: {\n    setScrollComponentState(state, { id, newState }) {\n      if (!state.data[id]) {\n        state.data[id] = {\n          hasReachedStart: false,\n          hasAlmostReachedEnd: false,\n          hasReachedEnd: false,\n          position: 0,\n          direction: 'UP'\n        };\n      }\n      Object.assign(state.data[id], newState);\n    },\n    setPendingScrollTo(state, pendingScrollTo) {\n      state.pendingScrollTo = pendingScrollTo;\n    }\n  },\n  actions: {}\n};\n"],"names":[],"mappings":"AAEA;;;;AAIG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,eAAe,EAAE,EAAE;KACpB,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;AACT,QAAA,uBAAuB,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAA;AAC7C,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnB,gBAAA,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG;AACf,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,mBAAmB,EAAE,KAAK;AAC1B,oBAAA,aAAa,EAAE,KAAK;AACpB,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,SAAS,EAAE,IAAI;iBAChB,CAAC;AACH,aAAA;AACD,YAAA,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;SACzC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAA;AACvC,YAAA,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;SACzC;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/scroll/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { scrollEmitters } from './store/emitters';\nimport { scrollXStoreModule } from './store/module';\nimport { ScrollXStoreModule } from './store/types';\nimport { scrollWiring } from './wiring';\n\n/**\n * Scroll {@link XModule} alias.\n *\n * @public\n */\nexport type ScrollXModule = XModule<ScrollXStoreModule>;\n\n/**\n * Scroll {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `empathize` entry point.\n *\n * @public\n */\nexport const scrollXModule: ScrollXModule = {\n  name: 'scroll',\n  storeModule: scrollXStoreModule,\n  storeEmitters: scrollEmitters,\n  wiring: scrollWiring\n};\n"],"names":[],"mappings":";;;;AAaA;;;;;AAKG;AACU,MAAA,aAAa,GAAkB;AAC1C,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,WAAW,EAAE,kBAAkB;AAC/B,IAAA,aAAa,EAAE,cAAc;AAC7B,IAAA,MAAM,EAAE,YAAY;;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/scroll/x-module.ts"],"sourcesContent":["import { XPlugin } from '../../plugins/x-plugin';\nimport { XModule } from '../x-modules.types';\nimport { scrollEmitters } from './store/emitters';\nimport { scrollXStoreModule } from './store/module';\nimport { ScrollXStoreModule } from './store/types';\nimport { scrollWiring } from './wiring';\n\n/**\n * Scroll {@link XModule} alias.\n *\n * @public\n */\nexport type ScrollXModule = XModule<ScrollXStoreModule>;\n\n/**\n * Scroll {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `empathize` entry point.\n *\n * @public\n */\nexport const scrollXModule: ScrollXModule = {\n  name: 'scroll',\n  storeModule: scrollXStoreModule,\n  storeEmitters: scrollEmitters,\n  wiring: scrollWiring\n};\n\nXPlugin.registerXModule(scrollXModule);\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,aAAa,GAAkB;AAC1C,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,WAAW,EAAE,kBAAkB;AAC/B,IAAA,aAAa,EAAE,cAAc;AAC7B,IAAA,MAAM,EAAE,YAAY;EACpB;AAEF,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC;;;;"}

package/js/x-modules/search/components/banner.vue.js

@@ -1,85 +1,40 @@
-import script from './banner.vue2.js';
+import _sfc_main from './banner.vue2.js';
+import { openBlock, createBlock, resolveDynamicComponent, mergeProps, toHandlers, withCtx, createElementVNode, createElementBlock, normalizeClass, toDisplayString, createCommentVNode } from 'vue';
 import './banner.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return !_vm.imageFailed
-    ? _c(
-        _vm.banner.url ? "a" : "figure",
-        _vm._g(
-          {
-            tag: "component",
-            staticClass: "x-banner",
-            attrs: { href: _vm.banner.url, "data-test": "banner" },
-          },
-          _vm.banner.url ? _vm.anchorEvents() : {}
-        ),
-        [
-          _c("img", {
-            staticClass: "x-banner__image",
-            attrs: {
-              src: _vm.banner.image,
-              alt: _vm.banner.title ? _vm.banner.title : "Banner",
-              "data-test": "banner-image",
-            },
-            on: {
-              error: function ($event) {
-                _vm.imageFailed = true;
-              },
-            },
-          }),
-          _vm.banner.title
-            ? _c(
-                "h2",
-                {
-                  staticClass: "x-banner__title",
-                  class: _vm.titleClass,
-                  attrs: { "data-test": "banner-title" },
-                },
-                [_vm._v(" " + _vm._s(_vm.banner.title) + " ")]
-              )
-            : _vm._e(),
-        ]
-      )
-    : _vm._e()
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+const _hoisted_1 = ["src", "alt"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return !_ctx.imageFailed ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.banner.url ? "a" : "figure"), mergeProps({ key: 0 }, toHandlers(_ctx.banner.url ? _ctx.anchorEvents() : {}), {
+    href: _ctx.banner.url,
+    class: "x-banner",
+    "data-test": "banner"
+  }), {
+    default: withCtx(() => [
+      createElementVNode("img", {
+        onError: _cache[0] || (_cache[0] = ($event) => _ctx.imageFailed = true),
+        src: _ctx.banner.image,
+        alt: _ctx.banner.title ? _ctx.banner.title : "Banner",
+        class: "x-banner__image",
+        "data-test": "banner-image"
+      }, null, 40, _hoisted_1),
+      _ctx.banner.title ? (openBlock(), createElementBlock(
+        "h2",
+        {
+          key: 0,
+          class: normalizeClass(["x-banner__title", _ctx.titleClass]),
+          "data-test": "banner-title"
+        },
+        toDisplayString(_ctx.banner.title),
+        3
+        /* TEXT, CLASS */
+      )) : createCommentVNode("v-if", true)
+    ]),
+    _: 1
+    /* STABLE */
+  }, 16, ["href"])) : createCommentVNode("v-if", true);
+}
+var banner = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-569db620"]]);
 
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { banner as default };
 //# sourceMappingURL=banner.vue.js.map

package/js/x-modules/search/components/banner.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"banner.url ? 'a' : 'figure'\"\n    v-if=\"!imageFailed\"\n    v-on=\"banner.url ? anchorEvents() : {}\"\n    :href=\"banner.url\"\n    class=\"x-banner\"\n    data-test=\"banner\"\n  >\n    <img\n      @error=\"imageFailed = true\"\n      :src=\"banner.image\"\n      :alt=\"banner.title ? banner.title : 'Banner'\"\n      class=\"x-banner__image\"\n      data-test=\"banner-image\"\n    />\n    <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n      {{ banner.title }}\n    </h2>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Banner as BannerModel } from '@empathyco/x-types';\n  import { Component, Prop } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { searchXModule } from '../x-module';\n  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';\n\n  /**.\n   * A banner result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is the first item in the grid or it can be placed in the middle of them\n   * and fill the whole row where appears.\n   * The banner may be clickable or non-clickable depending on whether it has an associated URL\n   * or not. It contains an image and, optionally, a title. In case the image does not\n   * load due to an error the banner will not be rendered.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `titleClass`.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule), dynamicPropsMixin(['titleClass'])]\n  })\n  export default class Banner extends Vue {\n    /**\n     * The banner data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public banner!: BannerModel;\n\n    /**\n     * Flag to handle banner image errors.\n     *\n     * @public\n     */\n    protected imageFailed = false;\n\n    /**\n     * Emits the banner click event.\n     *\n     * @internal\n     */\n    protected emitClickEvent(): void {\n      this.$x.emit('UserClickedABanner', this.banner);\n    }\n\n    /**\n     * Returns the events supported by the anchor.\n     *\n     * @returns Events supported by the anchor.\n     *\n     * @internal\n     */\n    protected anchorEvents(): Partial<{\n      [key in keyof GlobalEventHandlersEventMap]: () => void;\n    }> {\n      return {\n        click: () => this.emitClickEvent(),\n        auxclick: () => this.emitClickEvent(),\n        contextmenu: () => this.emitClickEvent()\n      };\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-banner {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n\n    &__image {\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n  <Banner :banner=\"banner\" />\n</template>\n\n<script>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\n          modelName: 'Banner',\n          id: 'banner-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts',\n          position: 1\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n  <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\n          modelName: 'Banner',\n          id: 'banner-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts',\n          position: 1\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"banner.url ? 'a' : 'figure'\"\n    v-if=\"!imageFailed\"\n    v-on=\"banner.url ? anchorEvents() : {}\"\n    :href=\"banner.url\"\n    class=\"x-banner\"\n    data-test=\"banner\"\n  >\n    <img\n      @error=\"imageFailed = true\"\n      :src=\"banner.image\"\n      :alt=\"banner.title ? banner.title : 'Banner'\"\n      class=\"x-banner__image\"\n      data-test=\"banner-image\"\n    />\n    <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n      {{ banner.title }}\n    </h2>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Banner as BannerModel } from '@empathyco/x-types';\n  import { defineComponent, PropType, ref } from 'vue';\n  import { useXBus } from '../../../composables/use-x-bus';\n  import { searchXModule } from '../x-module';\n\n  /**.\n   * A banner result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is the first item in the grid or it can be placed in the middle of them\n   * and fill the whole row where appears.\n   * The banner may be clickable or non-clickable depending on whether it has an associated URL\n   * or not. It contains an image and, optionally, a title. In case the image does not\n   * load due to an error the banner will not be rendered.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `titleClass`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Banner',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * The banner data.\n       *\n       * @public\n       */\n      banner: {\n        type: Object as PropType<BannerModel>,\n        required: true\n      },\n      titleClass: String\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * Flag to handle banner image errors.\n       *\n       * @public\n       */\n      const imageFailed = ref(false);\n\n      /**\n       * Emits the banner click event.\n       *\n       * @internal\n       */\n      const emitClickEvent = (): void => {\n        xBus.emit('UserClickedABanner', props.banner);\n      };\n\n      /**\n       * Returns the events supported by the anchor.\n       *\n       * @returns Events supported by the anchor.\n       *\n       * @internal\n       */\n      const anchorEvents = (): Partial<{\n        [key in keyof GlobalEventHandlersEventMap]: () => void;\n      }> => ({\n        click: () => emitClickEvent(),\n        auxclick: () => emitClickEvent(),\n        contextmenu: () => emitClickEvent()\n      });\n\n      return {\n        imageFailed,\n        anchorEvents\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-banner {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n  }\n\n  .x-banner__image {\n    width: 100%;\n    object-fit: contain;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n  <Banner :banner=\"banner\" />\n</template>\n\n<script>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\n          modelName: 'Banner',\n          id: 'banner-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts',\n          position: 1\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n  <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\n          modelName: 'Banner',\n          id: 'banner-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts',\n          position: 1\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["banner","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createElementVNode","_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode"],"mappings":";;;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAGJ,EAAA,OAAA,CAAA,IAAA,CAAMA,0BACS,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,MAAA,CAAA,GAAA,GAAA,GAAA,GAAA,QAAA,CAAA,EAAAC,UAAA,CAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,CAAA,GAAA,GAAA,IAAA,CAAA,YAAA,EAAA,GAAA,EAAA,CAAA,EAAA;AAAA,IAChB,WAAS,MAAC,CAAA,GAAA;AAAA,IAAA,KAAA,EAAA,UAAA;AAPd,IAAA,WAAA,EAAA,QAAA;AAAA,GASI,CAAA,EAAA;AAAA,IAAA,OAAA,EACGC,OAAK,CAAA,MAAA;AAAA,MAAAC,kBAAA,CACO,KAAK,EAAA;AAAA,QACjB,OAAKN,EAAAA,MAAAA,CAAM,CAAC,CAAA,KAAK,OAAGA,CAAY,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,WAAA,GAAA,IAAA,CAAA;AAAA,QACjC,KAAK,IAAC,CAAA,MAAA,CAAA,KAAA;AAAA,QACN,iBAAU,KAAc,GAAA,IAAA,CAAA,MAAA,CAAA,KAAA,GAAA,QAAA;AAAA,QAAA,KAAA,EAAA,iBAAA;QAEhBA,WAAO,EAAA,cAAA;AAAA,OAEZ,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;AAAA,MAlBT,IAAA,CAAA,MAAA,CAAA,KAAA,IAAAO,SAAA,EAAA,EAAAC,kBAAA;AAAA,QAgBkC,IAAA;AAAA,QAAA;AAAA,UAAsC,GAAA,EAAA,CAAA;AAAA,UAAA,KAAA,EAAAC,cAAA,CAC/DT,CAAY,iBAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAAA,UAjBrB,WAAA,EAAA,cAAA;AAAA,SAAA;;;;AAAA,OAAA,IAAAU,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,EAAA,EAAA,CAAA,MAAA,CAAA,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/search/components/banner.vue2.js

@@ -1,9 +1,6 @@
-import { __decorate } from 'tslib';
-import { Prop, Component } from 'vue-property-decorator';
-import Vue from 'vue';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent, ref } from 'vue';
+import { useXBus } from '../../../composables/use-x-bus.js';
 import { searchXModule } from '../x-module.js';
-import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin.js';
 
 /**.
  * A banner result is just an item that has been inserted into the search results to advertise
@@ -18,48 +15,55 @@ import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin.js';
  *
  * @public
  */
-let Banner = class Banner extends Vue {
-    constructor() {
-        super(...arguments);
+var _sfc_main = defineComponent({
+    name: 'Banner',
+    xModule: searchXModule.name,
+    props: {
+        /**
+         * The banner data.
+         *
+         * @public
+         */
+        banner: {
+            type: Object,
+            required: true
+        },
+        titleClass: String
+    },
+    setup(props) {
+        const xBus = useXBus();
         /**
          * Flag to handle banner image errors.
          *
          * @public
          */
-        this.imageFailed = false;
-    }
-    /**
-     * Emits the banner click event.
-     *
-     * @internal
-     */
-    emitClickEvent() {
-        this.$x.emit('UserClickedABanner', this.banner);
-    }
-    /**
-     * Returns the events supported by the anchor.
-     *
-     * @returns Events supported by the anchor.
-     *
-     * @internal
-     */
-    anchorEvents() {
+        const imageFailed = ref(false);
+        /**
+         * Emits the banner click event.
+         *
+         * @internal
+         */
+        const emitClickEvent = () => {
+            xBus.emit('UserClickedABanner', props.banner);
+        };
+        /**
+         * Returns the events supported by the anchor.
+         *
+         * @returns Events supported by the anchor.
+         *
+         * @internal
+         */
+        const anchorEvents = () => ({
+            click: () => emitClickEvent(),
+            auxclick: () => emitClickEvent(),
+            contextmenu: () => emitClickEvent()
+        });
         return {
-            click: () => this.emitClickEvent(),
-            auxclick: () => this.emitClickEvent(),
-            contextmenu: () => this.emitClickEvent()
+            imageFailed,
+            anchorEvents
         };
     }
-};
-__decorate([
-    Prop({ required: true })
-], Banner.prototype, "banner", void 0);
-Banner = __decorate([
-    Component({
-        mixins: [xComponentMixin(searchXModule), dynamicPropsMixin(['titleClass'])]
-    })
-], Banner);
-var script = Banner;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=banner.vue2.js.map