@empathyco/x-components 3.0.0-alpha.39 → 3.0.0-alpha.40

package/docs/API-reference/api/x-components.wiremetadata.md

@@ -20,5 +20,6 @@ export interface WireMetadata
 |  [id?](./x-components.wiremetadata.id.md) | string | <i>(Optional)</i> The id of the component origin. |
 |  [location?](./x-components.wiremetadata.location.md) | [FeatureLocation](./x-components.featurelocation.md) | <i>(Optional)</i> The [FeatureLocation](./x-components.featurelocation.md) from where the event has been emitted. |
 |  [moduleName](./x-components.wiremetadata.modulename.md) | [XModuleName](./x-components.xmodulename.md) \| null | The [XModule](./x-components.xmodule.md) name that emitted the event or <code>null</code> if it has been emitted from an unknown module. |
+|  [oldValue?](./x-components.wiremetadata.oldvalue.md) | unknown | <i>(Optional)</i> The old value of a watched selector triggering an emitter. |
 |  [target?](./x-components.wiremetadata.target.md) | HTMLElement | <i>(Optional)</i> The DOM element that triggered the event emission. |
 

package/docs/API-reference/api/x-components.wiremetadata.oldvalue.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [WireMetadata](./x-components.wiremetadata.md) &gt; [oldValue](./x-components.wiremetadata.oldvalue.md)
+
+## WireMetadata.oldValue property
+
+The old value of a watched selector triggering an emitter.
+
+<b>Signature:</b>
+
+```typescript
+oldValue?: unknown;
+```

package/docs/API-reference/api/x-types.nextquery.iscurated.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [NextQuery](./x-types.nextquery.md) &gt; [isCurated](./x-types.nextquery.iscurated.md)
+
+## NextQuery.isCurated property
+
+If it's a curated next query.
+
+<b>Signature:</b>
+
+```typescript
+isCurated?: boolean;
+```

package/docs/API-reference/api/x-types.nextquery.md

@@ -13,3 +13,9 @@ export interface NextQuery extends NamedModel<'NextQuery'>, Required<Previewable
 ```
 <b>Extends:</b> [NamedModel](./x-types.namedmodel.md)<!-- -->&lt;'NextQuery'&gt;, Required&lt;[Previewable](./x-types.previewable.md)<!-- -->&gt;
 
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [isCurated?](./x-types.nextquery.iscurated.md) | boolean | <i>(Optional)</i> If it's a curated next query. |
+

package/docs/API-reference/components/common/scroll/x-components.base-scroll.md

@@ -11,12 +11,13 @@ knowing when the user scrolls, the direction of scroll and if user reaches the s
 
 ## Props
 
-| Name                                 | Description                                                                                                                                                                                                                     | Type                 | Default           |
-| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------------- |
-| <code>distanceToBottom</code>        | Distance to the end of the scroll that when reached will emit the<br />`scroll:about-to-end` event.                                                                                                                             | <code>number</code>  | <code>100</code>  |
-| <code>firstElementThresholdPx</code> | Positive vertical distance to still consider that the an element is the first one visible.<br />For example, if set to 100, after scrolling 100 pixels, the first rendered element<br />will still be considered the first one. | <code>number</code>  | <code>100</code>  |
-| <code>throttleMs</code>              | Time duration to ignore the subsequent scroll events after an emission.<br />Higher values will decrease events precision but can prevent performance issues.                                                                   | <code>number</code>  | <code>100</code>  |
-| <code>resetOnChange</code>           | If true (default), sets the scroll position to the top when certain events are emitted.                                                                                                                                         | <code>boolean</code> | <code>true</code> |
+| Name                                 | Description                                                                                                                                                                                                                     | Type                 | Default                                                                                                                                                                            |
+| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>distanceToBottom</code>        | Distance to the end of the scroll that when reached will emit the<br />`scroll:about-to-end` event.                                                                                                                             | <code>number</code>  | <code>100</code>                                                                                                                                                                   |
+| <code>firstElementThresholdPx</code> | Positive vertical distance to still consider that the an element is the first one visible.<br />For example, if set to 100, after scrolling 100 pixels, the first rendered element<br />will still be considered the first one. | <code>number</code>  | <code>100</code>                                                                                                                                                                   |
+| <code>throttleMs</code>              | Time duration to ignore the subsequent scroll events after an emission.<br />Higher values will decrease events precision but can prevent performance issues.                                                                   | <code>number</code>  | <code>100</code>                                                                                                                                                                   |
+| <code>resetOnChange</code>           | If true (default), sets the scroll position to the top when certain events are emitted.                                                                                                                                         | <code>boolean</code> | <code>true</code>                                                                                                                                                                  |
+| <code>resetOn</code>                 | List of events that should reset the scroll when emitted.                                                                                                                                                                       | <code>XEvent</code>  | <code>() => [<br /> 'SearchBoxQueryChanged',<br /> 'SortChanged',<br /> 'SelectedFiltersChanged',<br /> 'SelectedRelatedTagsChanged',<br /> 'UserChangedExtraParams'<br />]</code> |
 
 ## Events
 
@@ -36,10 +37,10 @@ knowing when the user scrolls, the direction of scroll and if user reaches the s
 
 ## Example
 
-The BaseScroll is a component that manage the states of scroll of a specified element. The component
-does the necessary calculations for knowing the direction of scroll, if the scroll has reached to
-start or to end, and is about to reaching to end. The components emits the next events depending of
-movement that realize the user:
+The `BaseScroll` is a component that manages the state of scroll of a specified element. The
+component does the necessary calculations for knowing the direction of scroll, if the scroll has
+reached to start or to end, and is about to reaching to end. The components emits the next events
+depending of movement that realize the user:
 
 ```vue
 <template>
@@ -49,8 +50,8 @@ movement that realize the user:
     @scroll:at-start="scrollAtStart"
     @scroll:almost-at-end="scrollAlmostAtEnd"
     @scroll:at-end="scrollAtEnd"
-    throttleMs="1000"
-    distanceToBottom="200"
+    :throttleMs="1000"
+    :distanceToBottom="200"
   >
     <template>
       <div class="content-scroll">
@@ -96,15 +97,7 @@ Set to false the reset scroll on query change feature which is true by default.
 
 ```vue
 <template>
-  <BaseScroll
-    @scroll="scroll"
-    @scroll:direction-change="scrollDirectionChange"
-    @scroll:at-start="scrollAtStart"
-    @scroll:almost-at-end="scrollAlmostAtEnd"
-    @scroll:at-end="scrollAtEnd"
-    throttleMs="1000"
-    distanceToBottom="200"
-  >
+  <BaseScroll @scroll="scroll" :resetOnChange="false">
     <template>
       <div class="content-scroll">
         <span>content1</span>
@@ -125,18 +118,44 @@ export default {
   methods: {
     scroll(position) {
       console.log("scroll", position);
-    },
-    scrollDirectionChange(direction) {
-      console.log("scroll:direction-change", direction);
-    },
-    scrollAtStart() {
-      console.log("scroll:at-start");
-    },
-    scrollAlmostAtEnd(distance) {
-      console.log("scroll:almost-at-end", distance);
-    },
-    scrollAtEnd() {
-      console.log("scroll:at-end");
+    }
+  }
+};
+</script>
+```
+
+### Reset scroll
+
+You can configure which events reset the scroll position using the `resetOn` prop.
+
+```vue
+<template>
+  <BaseScroll @scroll="scroll" :resetOn="resetScrollEvents">
+    <template>
+      <div class="content-scroll">
+        <span>content1</span>
+        <span>content1</span>
+      </div>
+    </template>
+  </BaseScroll>
+</template>
+
+<script>
+import { BaseScroll } from "@empathyco/x-components";
+
+export default {
+  name: "ScrollTest",
+  components: {
+    BaseScroll
+  },
+  data() {
+    return {
+      resetScrollEvents: ["UserAcceptedAQuery"]
+    };
+  },
+  methods: {
+    scroll(position) {
+      console.log("scroll", position);
     }
   }
 };

package/docs/API-reference/components/common/x-components.sliding-panel.md

@@ -6,15 +6,17 @@ title: SlidingPanel
 
 # SlidingPanel
 
-Horizontal slide panel component. The content that is provided to this component would be
-navigable horizontally using two navigational buttons.
+This component allows for any other component or element inside it to be horizontally
+navigable. It also implements customizable buttons as well as other minor customizations to its
+general behavior.
 
 ## Props
 
-| Name                      | Description                                                                                  | Type                 | Default           |
-| ------------------------- | -------------------------------------------------------------------------------------------- | -------------------- | ----------------- |
-| <code>scrollFactor</code> | Scroll factor that will dictate how much the scroll moves when pressing a navigation button. | <code>number</code>  | <code>0.7</code>  |
-| <code>showButtons</code>  | Would make the navigation buttons visible when they're needed or always hide them.           | <code>boolean</code> | <code>true</code> |
+| Name                              | Description                                                                                                         | Type                 | Default           |
+| --------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------------- |
+| <code>scrollFactor</code>         | Scroll factor that will dictate how much the scroll moves when pressing a navigation button.                        | <code>number</code>  | <code>0.7</code>  |
+| <code>showButtons</code>          | Would make the navigation buttons visible when they're needed or always hide them.                                  | <code>boolean</code> | <code>true</code> |
+| <code>resetOnContentChange</code> | When true, whenever the DOM content in the sliding panel slot changes, it will reset<br />the scroll position to 0. | <code>boolean</code> | <code>true</code> |
 
 ## Slots
 
@@ -24,57 +26,214 @@ navigable horizontally using two navigational buttons.
 | <code>default</code>                    | (Required) Sliding panel content | None                                      |
 | <code>sliding-panel-right-button</code> | Right button content             | None                                      |
 
-## Examples
+## Events
 
-This component allows for any other component or element inside it to be horizontally navigable. It
-also implements customizable buttons as well as other minor customizations to its general behavior.
-The component uses the method `scrollBy` from `Element` to function, and it doesn't work properly in
-all browsers. A polyfill for the `scrollBy` would be needed for the component to behave as expected
-in those browsers.
+This component emits no events.
 
-### Default usage
+## See it in action
 
 Simplest implementation of the component, just a list-based component inside its slot.
 
 ```vue
-<SlidingPanel>
-  <RelatedTags />
-</SlidingPanel>
+<template>
+  <SlidingPanel>
+    <div class="item">Item 1</div>
+    <div class="item">Item 2</div>
+    <div class="item">Item 3</div>
+    <div class="item">Item 4</div>
+  </SlidingPanel>
+</template>
+
+<script>
+import { SlidingPanel } from "@empathyco/x-components";
+
+export default {
+  name: "SlidingPanelDemo",
+  components: {
+    SlidingPanel
+  }
+};
+</script>
+
+<style>
+.x-sliding-panel {
+  width: 200px;
+}
+
+.item {
+  display: inline-block;
+  width: 100px;
+}
+</style>
 ```
 
-### Behavior customization
+### Play with props
 
-Edit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`.
+#### Modifying scroll buttons travel distance
+
+Edit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`
+prop.
 
 ```vue
-<SlidingPanel :scrollFactor="1.2">
-  <RelatedTags />
-</SlidingPanel>
+<template>
+  <SlidingPanel :scrollFactor="1.5">
+    <div class="item">Item 1</div>
+    <div class="item">Item 2</div>
+    <div class="item">Item 3</div>
+    <div class="item">Item 4</div>
+  </SlidingPanel>
+</template>
+
+<script>
+import { SlidingPanel } from "@empathyco/x-components";
+
+export default {
+  name: "SlidingPanelDemo",
+  components: {
+    SlidingPanel
+  }
+};
+</script>
+
+<style>
+.x-sliding-panel {
+  width: 200px;
+}
+
+.item {
+  display: inline-block;
+  width: 100px;
+}
+</style>
 ```
 
+#### Hiding scroll buttons
+
 Hide the navigational buttons completely by setting the `showButtons` prop to `false`. This is
 intended to be used when other scrolling options are available, like in mobile, where you can scroll
 just by swiping.
 
 ```vue
-<SlidingPanel :showButtons="isMobile">
-  <RelatedTags />
-</SlidingPanel>
+<template>
+  <SlidingPanel :showButtons="false">
+    <div class="item">Item 1</div>
+    <div class="item">Item 2</div>
+    <div class="item">Item 3</div>
+    <div class="item">Item 4</div>
+  </SlidingPanel>
+</template>
+
+<script>
+import { SlidingPanel } from "@empathyco/x-components";
+
+export default {
+  name: "SlidingPanelDemo",
+  components: {
+    SlidingPanel
+  }
+};
+</script>
+
+<style>
+.x-sliding-panel {
+  width: 200px;
+}
+
+.item {
+  display: inline-block;
+  width: 100px;
+}
+</style>
+```
+
+#### Disabling reset the scroll when content changes
+
+By default, whenever the content of the sliding panel changes, it auto resets its scroll position.
+You can disable this behavior setting the `resetOnContentChange` prop to `false`.
+
+```vue
+<template>
+  <div>
+    <button @click="items++">Add item</button>
+    <label>
+      <input type="checkbox" v-model="resetOnContentChange" />
+      Reset content onchange
+    </label>
+    <SlidingPanel :resetOnContentChange="resetOnContentChange">
+      <div class="item" v-for="item in items" :key="item">Item {{ item }}</div>
+    </SlidingPanel>
+  </div>
+</template>
+
+<script>
+import { SlidingPanel } from "@empathyco/x-components";
+
+export default {
+  name: "SlidingPanelDemo",
+  components: {
+    SlidingPanel
+  },
+  data() {
+    return {
+      items: 4,
+      resetOnContentChange: false
+    };
+  }
+};
+</script>
+
+<style>
+.x-sliding-panel {
+  width: 200px;
+}
+
+.item {
+  display: inline-block;
+  width: 100px;
+}
+</style>
 ```
 
+## Extending the component
+
 ### Overriding Button content
 
 By default the buttons show an arrow depicting the direction the scroll would go to when clicked,
 but this content can be customized with anything, from characters to SVG and images.
 
 ```vue
-<SlidingPanel>
-  <template #sliding-panel-left-button>
-    Left
-  </template>
-  <RelatedTags />
-  <template #sliding-panel-right-button>
-    Right
-  </template>
-</SlidingPanel>
+<template>
+  <SlidingPanel>
+    <template #sliding-panel-left-button>Left</template>
+    <template #default>
+      <div class="item">Item 1</div>
+      <div class="item">Item 2</div>
+      <div class="item">Item 3</div>
+      <div class="item">Item 4</div>
+    </template>
+    <template #sliding-panel-right-button>Right</template>
+  </SlidingPanel>
+</template>
+
+<script>
+import { SlidingPanel } from "@empathyco/x-components";
+
+export default {
+  name: "SlidingPanelDemo",
+  components: {
+    SlidingPanel
+  }
+};
+</script>
+
+<style>
+.x-sliding-panel {
+  width: 200px;
+}
+
+.item {
+  display: inline-block;
+  width: 100px;
+}
+</style>
 ```

package/docs/API-reference/components/scroll/x-components.scroll.md

@@ -6,17 +6,14 @@ title: Scroll
 
 # Scroll
 
-Base scroll component that depending on base scroll component and the user interaction emits
-different x events for knowing when the user scrolls, the direction of scroll and if user
-reaches the start or end.
+Scrollable container that emits scroll related X Events. It exposes all the listeners
+and props from the {@link BaseScroll} component.
 
 ## Props
 
-| Name                          | Description                                                                                                                                                   | Type                | Default                   |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------------------- |
-| <code>throttleMs</code>       | Time duration to ignore the subsequent scroll events after an emission.<br />Higher values will decrease events precision but can prevent performance issues. | <code>number</code> | <code></code>             |
-| <code>distanceToBottom</code> | Distance to the end of the scroll that when reached will emit the<br />`scroll:about-to-end` event.                                                           | <code>number</code> | <code></code>             |
-| <code>id</code>               | Id to identify the component.                                                                                                                                 | <code>string</code> | <code>MainScrollId</code> |
+| Name            | Description                   | Type                | Default                   |
+| --------------- | ----------------------------- | ------------------- | ------------------------- |
+| <code>id</code> | Id to identify the component. | <code>string</code> | <code>MainScrollId</code> |
 
 ## Slots
 

package/js/components/scroll/base-scroll.vue.js

@@ -27,11 +27,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-3b6a5d44_0", { source: ".x-base-scroll[data-v-3b6a5d44] {\n  overflow-y: var(--x-string-overflow-scroll, auto);\n}", map: undefined, media: undefined });
+    inject("data-v-437d066c_0", { source: ".x-base-scroll[data-v-437d066c] {\n  overflow-y: var(--x-string-overflow-scroll, auto);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-3b6a5d44";
+  var __vue_scope_id__ = "data-v-437d066c";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/scroll/base-scroll.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-scroll.vue.js","sources":["../../../../src/components/scroll/base-scroll.vue"],"sourcesContent":["<template>\n  <div @scroll=\"throttledStoreScrollData\" class=\"x-scroll x-base-scroll\" data-test=\"base-scroll\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component } from 'vue-property-decorator';\n  import ScrollMixin from './scroll.mixin';\n\n  /**\n   * Base scroll component that depending on the user interactivity emits different events for\n   * knowing when the user scrolls, the direction of scroll and if user reaches the start or end.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseScroll extends mixins(ScrollMixin) {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-base-scroll {\n    overflow-y: var(--x-string-overflow-scroll, auto);\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe BaseScroll is a component that manage the states of scroll of a specified element. The component\ndoes the necessary calculations for knowing the direction of scroll, if the scroll has reached to\nstart or to end, and is about to reaching to end. The components emits the next events depending of\nmovement that realize the user:\n\n```vue\n<template>\n  <BaseScroll\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    throttleMs=\"1000\"\n    distanceToBottom=\"200\"\n  >\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\n  import { BaseScroll } from '@empathyco/x-components';\n\n  export default {\n    name: 'ScrollTest',\n    components: {\n      BaseScroll\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() {\n        console.log('scroll:at-start');\n      },\n      scrollAlmostAtEnd(distance) {\n        console.log('scroll:almost-at-end', distance);\n      },\n      scrollAtEnd() {\n        console.log('scroll:at-end');\n      }\n    }\n  };\n</script>\n```\n\n### Avoid reset scroll on query change\n\nSet to false the reset scroll on query change feature which is true by default.\n\n```vue\n<template>\n  <BaseScroll\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    throttleMs=\"1000\"\n    distanceToBottom=\"200\"\n  >\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\n  import { BaseScroll } from '@empathyco/x-components';\n\n  export default {\n    name: 'ScrollTest',\n    components: {\n      BaseScroll\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() {\n        console.log('scroll:at-start');\n      },\n      scrollAlmostAtEnd(distance) {\n        console.log('scroll:almost-at-end', distance);\n      },\n      scrollAtEnd() {\n        console.log('scroll:at-end');\n      }\n    }\n  };\n</script>\n```\n\n## Vue Events:\n\n- `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll\n  top distance in pixels.\n- `scroll:direction-change`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `scroll:at-start`: the event is emitted when the user scrolls up to the initial position of the\n  scroll.\n- `scroll:almost-at-end`: the event is emitted when the user is about to reach the bottom part of\n  the scroll.\n- `scroll:at-end`: the event is emitted when the user has reached the bottom part of the scroll.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-scroll.vue.js","sources":["../../../../src/components/scroll/base-scroll.vue"],"sourcesContent":["<template>\n  <div @scroll=\"throttledStoreScrollData\" class=\"x-scroll x-base-scroll\" data-test=\"base-scroll\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { mixins } from 'vue-class-component';\n  import { Component } from 'vue-property-decorator';\n  import ScrollMixin from './scroll.mixin';\n\n  /**\n   * Base scroll component that depending on the user interactivity emits different events for\n   * knowing when the user scrolls, the direction of scroll and if user reaches the start or end.\n   *\n   * @public\n   */\n  @Component\n  export default class BaseScroll extends mixins(ScrollMixin) {}\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-base-scroll {\n    overflow-y: var(--x-string-overflow-scroll, auto);\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `BaseScroll` is a component that manages the state of scroll of a specified element. The\ncomponent does the necessary calculations for knowing the direction of scroll, if the scroll has\nreached to start or to end, and is about to reaching to end. The components emits the next events\ndepending of movement that realize the user:\n\n```vue\n<template>\n  <BaseScroll\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    :throttleMs=\"1000\"\n    :distanceToBottom=\"200\"\n  >\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\n  import { BaseScroll } from '@empathyco/x-components';\n\n  export default {\n    name: 'ScrollTest',\n    components: {\n      BaseScroll\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() {\n        console.log('scroll:at-start');\n      },\n      scrollAlmostAtEnd(distance) {\n        console.log('scroll:almost-at-end', distance);\n      },\n      scrollAtEnd() {\n        console.log('scroll:at-end');\n      }\n    }\n  };\n</script>\n```\n\n### Avoid reset scroll on query change\n\nSet to false the reset scroll on query change feature which is true by default.\n\n```vue\n<template>\n  <BaseScroll @scroll=\"scroll\" :resetOnChange=\"false\">\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\n  import { BaseScroll } from '@empathyco/x-components';\n\n  export default {\n    name: 'ScrollTest',\n    components: {\n      BaseScroll\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      }\n    }\n  };\n</script>\n```\n\n### Reset scroll\n\nYou can configure which events reset the scroll position using the `resetOn` prop.\n\n```vue\n<template>\n  <BaseScroll @scroll=\"scroll\" :resetOn=\"resetScrollEvents\">\n    <template>\n      <div class=\"content-scroll\">\n        <span>content1</span>\n        <span>content1</span>\n      </div>\n    </template>\n  </BaseScroll>\n</template>\n\n<script>\n  import { BaseScroll } from '@empathyco/x-components';\n\n  export default {\n    name: 'ScrollTest',\n    components: {\n      BaseScroll\n    },\n    data() {\n      return {\n        resetScrollEvents: ['UserAcceptedAQuery']\n      };\n    },\n    methods: {\n      scroll(position) {\n        console.log('scroll', position);\n      }\n    }\n  };\n</script>\n```\n\n## Vue Events:\n\n- `scroll`: the event is emitted after the user scrolls in this container. The payload is the scroll\n  top distance in pixels.\n- `scroll:direction-change`: the event is emitted when the user changes the scroll direction. The\n  payload is the new scrolling direction.\n- `scroll:at-start`: the event is emitted when the user scrolls up to the initial position of the\n  scroll.\n- `scroll:almost-at-end`: the event is emitted when the user is about to reach the bottom part of\n  the scroll.\n- `scroll:at-end`: the event is emitted when the user has reached the bottom part of the scroll.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/scroll/scroll.mixin.js

@@ -237,12 +237,18 @@ var ScrollMixin = /** @class */ (function (_super) {
         Prop({ type: Boolean, default: true })
     ], ScrollMixin.prototype, "resetOnChange", void 0);
     __decorate([
-        XOn([
-            'SearchBoxQueryChanged',
-            'SortChanged',
-            'SelectedFiltersChanged',
-            'SelectedRelatedTagsChanged'
-        ])
+        Prop({
+            default: function () { return [
+                'SearchBoxQueryChanged',
+                'SortChanged',
+                'SelectedFiltersChanged',
+                'SelectedRelatedTagsChanged',
+                'UserChangedExtraParams'
+            ]; }
+        })
+    ], ScrollMixin.prototype, "resetOn", void 0);
+    __decorate([
+        XOn(function (instance) { return instance.resetOn; })
     ], ScrollMixin.prototype, "resetScroll", null);
     __decorate([
         Watch('currentPosition')

package/js/components/scroll/scroll.mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll.mixin.js","sources":["../../../../src/components/scroll/scroll.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport { throttle } from '../../utils/throttle';\nimport { XOn } from '../decorators/bus.decorators';\nimport { ScrollDirection } from './scroll.types';\n\n/**\n * Mixin to share Scroll logic.\n *\n * @public\n */\n@Component\n/* eslint-disable @typescript-eslint/unbound-method */\nexport default class ScrollMixin extends Vue {\n  /**\n   * The scrolling container reference.\n   *\n   * @public\n   */\n  public $el!: HTMLElement;\n  /**\n   * Distance to the end of the scroll that when reached will emit the\n   * `scroll:about-to-end` event.\n   *\n   * @public\n   */\n  @Prop({ default: 100 })\n  public distanceToBottom!: number;\n  /**\n   * Positive vertical distance to still consider that the an element is the first one visible.\n   * For example, if set to 100, after scrolling 100 pixels, the first rendered element\n   * will still be considered the first one.\n   */\n  @Prop({ default: 100 })\n  public firstElementThresholdPx!: number;\n  /**\n   * Time duration to ignore the subsequent scroll events after an emission.\n   * Higher values will decrease events precision but can prevent performance issues.\n   *\n   * @public\n   */\n  @Prop({ default: 100 })\n  public throttleMs!: number;\n\n  /**\n   * If true (default), sets the scroll position to the top when certain events are emitted.\n   *\n   * @public\n   */\n  @Prop({ type: Boolean, default: true })\n  protected resetOnChange!: boolean;\n  /**\n   * Property for getting the client height of scroll.\n   *\n   * @internal\n   */\n  protected clientHeight = 0;\n  /**\n   * Property for getting the current position of scroll.\n   *\n   * @internal\n   */\n  protected currentPosition = 0;\n  /**\n   * Property for getting the direction of scroll.\n   *\n   * @internal\n   */\n  protected direction!: ScrollDirection;\n  /**\n   * Property for getting the previous position of scroll.\n   *\n   * @internal\n   */\n  protected previousPosition = 0;\n  /**\n   * Property for getting the scroll height.\n   *\n   * @internal\n   */\n  protected scrollHeight = 0;\n\n  /**\n   * Throttled version of the function that stores the DOM scroll related properties.\n   * The duration of the throttle is configured through the\n   * {@link ScrollMixin.throttleMs}.\n   *\n   * @returns A throttled version of the function to store the scroll data.\n   * @internal\n   */\n  protected get throttledStoreScrollData(): () => void {\n    return throttle(this.storeScrollData, this.throttleMs);\n  }\n\n  /**\n   * Returns distance missing to end position position.\n   *\n   * @returns A number for knowing the distance missing to end position position.\n   * @internal\n   */\n  protected get distanceToEnd(): number {\n    return this.scrollEndPosition - this.currentPosition;\n  }\n\n  /**\n   * Returns `true` when the amount of pixels scrolled is greater than\n   * the {@link ScrollMixin.distanceToBottom}.\n   *\n   * @returns A boolean for knowing if the user is about to reaching to the end.\n   * @internal\n   */\n  protected get hasScrollAlmostReachedEnd(): boolean {\n    return !this.hasScrollReachedStart && this.distanceToBottom > this.distanceToEnd;\n  }\n\n  /**\n   * Returns `true` when there is no more content to scroll.\n   *\n   * @returns A boolean for knowing if the user scrolls to the end.\n   * @internal\n   */\n  protected get hasScrollReachedEnd(): boolean {\n    return this.currentPosition === this.scrollEndPosition;\n  }\n\n  /**\n   * Returns `true` when the scroll is at the initial position.\n   *\n   * @returns A boolean for knowing if the user scrolls to the start.\n   * @internal\n   */\n  protected get hasScrollReachedStart(): boolean {\n    return this.currentPosition === 0;\n  }\n\n  /**\n   * Returns direction of scroll based in {@link ScrollDirection}.\n   *\n   * @returns The scroll direction.\n   * @internal\n   */\n  protected get scrollDirection(): ScrollDirection {\n    return this.currentPosition > this.previousPosition ? 'DOWN' : 'UP';\n  }\n\n  /**\n   * Returns end position of scroll.\n   *\n   * @returns A number for knowing end position of scroll.\n   * @internal\n   */\n  protected get scrollEndPosition(): number {\n    return this.scrollHeight - this.clientHeight;\n  }\n\n  /**\n   * Initialises DOM dependant scroll properties.\n   *\n   * @internal\n   */\n  mounted(): void {\n    this.$nextTick().then(() => {\n      if (!this.$el) {\n        // TODO Replace with Empathy's logger\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ScrollMixin]',\n          'Components using this mixin must set `this.$el` to the HTML node that is scrolling.'\n        );\n      } else {\n        this.storeScrollData();\n      }\n    });\n  }\n\n  /**\n   * Resets the scroll position.\n   *\n   * @internal\n   */\n  @XOn([\n    'SearchBoxQueryChanged',\n    'SortChanged',\n    'SelectedFiltersChanged',\n    'SelectedRelatedTagsChanged'\n  ])\n  resetScroll(): void {\n    this.$nextTick().then(() => {\n      if (this.resetOnChange) {\n        this.$el.scrollTo({ top: 0 });\n      }\n    });\n  }\n\n  /**\n   * Emits the `scroll` event.\n   *\n   * @param _newScrollPosition - The new position of scroll.\n   * @param oldScrollPosition - The old position of scroll.\n   * @internal\n   */\n  @Watch('currentPosition')\n  protected emitScroll(_newScrollPosition: number, oldScrollPosition: number): void {\n    this.$emit('scroll', this.currentPosition);\n    this.previousPosition = oldScrollPosition;\n  }\n\n  /**\n   * Emits the 'scroll:at-start' event when the user reaches the start.\n   *\n   * @param isScrollAtStart - For knowing if the user reaches at start.\n   * @internal\n   */\n  @Watch('hasScrollReachedStart')\n  protected emitScrollReachedAtStart(isScrollAtStart: boolean): void {\n    this.$emit('scroll:at-start', isScrollAtStart);\n  }\n\n  /**\n   * Emits the 'scroll:almost-at-end' event when the user is about to reach to end.\n   *\n   * @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end.\n   * @internal\n   */\n  @Watch('hasScrollAlmostReachedEnd')\n  protected emitScrollAlmostAtEnd(isScrollAlmostAtEnd: boolean): void {\n    this.$emit('scroll:almost-at-end', isScrollAlmostAtEnd);\n  }\n\n  /**\n   * Emits the 'scroll:at-end' event when the user reaches the end.\n   *\n   * @param isScrollAtEnd - For knowing if the user reaches at end.\n   * @internal\n   */\n  @Watch('hasScrollReachedEnd')\n  protected emitScrollAtEnd(isScrollAtEnd: boolean): void {\n    this.$emit('scroll:at-end', isScrollAtEnd);\n  }\n\n  /**\n   * Emits the `scroll:direction-change` event when the scrolling direction has changed.\n   *\n   * @param direction - The new direction of scroll.\n   * @internal\n   */\n  @Watch('scrollDirection')\n  protected emitScrollDirection(direction: ScrollDirection): void {\n    this.$emit('scroll:direction-change', direction);\n  }\n\n  /**\n   * Updates scroll related properties.\n   *\n   * @internal\n   */\n  protected storeScrollData(): void {\n    if (this.$el) {\n      this.currentPosition = this.$el.scrollTop;\n      this.scrollHeight = this.$el.scrollHeight;\n      this.clientHeight = this.$el.clientHeight;\n    }\n  }\n}\n/*  eslint-enable @typescript-eslint/unbound-method */\n"],"names":[],"mappings":";;;;;;AAMA;;;;;AAOA;IAAyC,+BAAG;;IAA5C;QAAA,qEA0PC;;;;;;QA/MW,kBAAY,GAAG,CAAC,CAAC;;;;;;QAMjB,qBAAe,GAAG,CAAC,CAAC;;;;;;QAYpB,sBAAgB,GAAG,CAAC,CAAC;;;;;;QAMrB,kBAAY,GAAG,CAAC,CAAC;;KAuL5B;IA7KC,sBAAc,iDAAwB;;;;;;;;;aAAtC;YACE,OAAO,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;SACxD;;;OAAA;IAQD,sBAAc,sCAAa;;;;;;;aAA3B;YACE,OAAO,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC;SACtD;;;OAAA;IASD,sBAAc,kDAAyB;;;;;;;;aAAvC;YACE,OAAO,CAAC,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC;SAClF;;;OAAA;IAQD,sBAAc,4CAAmB;;;;;;;aAAjC;YACE,OAAO,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,iBAAiB,CAAC;SACxD;;;OAAA;IAQD,sBAAc,8CAAqB;;;;;;;aAAnC;YACE,OAAO,IAAI,CAAC,eAAe,KAAK,CAAC,CAAC;SACnC;;;OAAA;IAQD,sBAAc,wCAAe;;;;;;;aAA7B;YACE,OAAO,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAC;SACrE;;;OAAA;IAQD,sBAAc,0CAAiB;;;;;;;aAA/B;YACE,OAAO,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;SAC9C;;;OAAA;;;;;;IAOD,6BAAO,GAAP;QAAA,iBAaC;QAZC,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC;YACpB,IAAI,CAAC,KAAI,CAAC,GAAG,EAAE;;;gBAGb,OAAO,CAAC,IAAI,CACV,eAAe,EACf,qFAAqF,CACtF,CAAC;aACH;iBAAM;gBACL,KAAI,CAAC,eAAe,EAAE,CAAC;aACxB;SACF,CAAC,CAAC;KACJ;;;;;;IAaD,iCAAW,GAAX;QANA,iBAYC;QALC,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC;YACpB,IAAI,KAAI,CAAC,aAAa,EAAE;gBACtB,KAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;aAC/B;SACF,CAAC,CAAC;KACJ;;;;;;;;IAUS,gCAAU,GAApB,UAAqB,kBAA0B,EAAE,iBAAyB;QACxE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC3C,IAAI,CAAC,gBAAgB,GAAG,iBAAiB,CAAC;KAC3C;;;;;;;IASS,8CAAwB,GAAlC,UAAmC,eAAwB;QACzD,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC;KAChD;;;;;;;IASS,2CAAqB,GAA/B,UAAgC,mBAA4B;QAC1D,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,CAAC;KACzD;;;;;;;IASS,qCAAe,GAAzB,UAA0B,aAAsB;QAC9C,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;KAC5C;;;;;;;IASS,yCAAmB,GAA7B,UAA8B,SAA0B;QACtD,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;KAClD;;;;;;IAOS,qCAAe,GAAzB;QACE,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC;YAC1C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC;YAC1C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC;SAC3C;KACF;IA3OD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;yDACU;IAOjC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;gEACiB;IAQxC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;mDACI;IAQ3B;QADC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACL;IAwIlC;QANC,GAAG,CAAC;YACH,uBAAuB;YACvB,aAAa;YACb,wBAAwB;YACxB,4BAA4B;SAC7B,CAAC;kDAOD;IAUD;QADC,KAAK,CAAC,iBAAiB,CAAC;iDAIxB;IASD;QADC,KAAK,CAAC,uBAAuB,CAAC;+DAG9B;IASD;QADC,KAAK,CAAC,2BAA2B,CAAC;4DAGlC;IASD;QADC,KAAK,CAAC,qBAAqB,CAAC;sDAG5B;IASD;QADC,KAAK,CAAC,iBAAiB,CAAC;0DAGxB;IA5OkB,WAAW;QAF/B,SAAS;;OAEW,WAAW,CA0P/B;IAAD,kBAAC;CAAA,CA1PwC,GAAG,GA0P3C;AACD;;;;"}
+{"version":3,"file":"scroll.mixin.js","sources":["../../../../src/components/scroll/scroll.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { Component, Prop, Watch } from 'vue-property-decorator';\nimport { throttle } from '../../utils/throttle';\nimport { XEvent } from '../../wiring/events.types';\nimport { XOn } from '../decorators/bus.decorators';\nimport { ScrollDirection } from './scroll.types';\n\n/**\n * Mixin to share Scroll logic.\n *\n * @public\n */\n@Component\n/* eslint-disable @typescript-eslint/unbound-method */\nexport default class ScrollMixin extends Vue {\n  /**\n   * The scrolling container reference.\n   *\n   * @public\n   */\n  public $el!: HTMLElement;\n  /**\n   * Distance to the end of the scroll that when reached will emit the\n   * `scroll:about-to-end` event.\n   *\n   * @public\n   */\n  @Prop({ default: 100 })\n  public distanceToBottom!: number;\n  /**\n   * Positive vertical distance to still consider that the an element is the first one visible.\n   * For example, if set to 100, after scrolling 100 pixels, the first rendered element\n   * will still be considered the first one.\n   */\n  @Prop({ default: 100 })\n  public firstElementThresholdPx!: number;\n  /**\n   * Time duration to ignore the subsequent scroll events after an emission.\n   * Higher values will decrease events precision but can prevent performance issues.\n   *\n   * @public\n   */\n  @Prop({ default: 100 })\n  public throttleMs!: number;\n\n  /**\n   * If true (default), sets the scroll position to the top when certain events are emitted.\n   *\n   * @public\n   */\n  @Prop({ type: Boolean, default: true })\n  protected resetOnChange!: boolean;\n\n  /**\n   * List of events that should reset the scroll when emitted.\n   *\n   * @public\n   */\n  @Prop({\n    default: () => [\n      'SearchBoxQueryChanged',\n      'SortChanged',\n      'SelectedFiltersChanged',\n      'SelectedRelatedTagsChanged',\n      'UserChangedExtraParams'\n    ]\n  })\n  public resetOn!: XEvent;\n\n  /**\n   * Property for getting the client height of scroll.\n   *\n   * @internal\n   */\n  protected clientHeight = 0;\n  /**\n   * Property for getting the current position of scroll.\n   *\n   * @internal\n   */\n  protected currentPosition = 0;\n  /**\n   * Property for getting the direction of scroll.\n   *\n   * @internal\n   */\n  protected direction!: ScrollDirection;\n  /**\n   * Property for getting the previous position of scroll.\n   *\n   * @internal\n   */\n  protected previousPosition = 0;\n  /**\n   * Property for getting the scroll height.\n   *\n   * @internal\n   */\n  protected scrollHeight = 0;\n\n  /**\n   * Throttled version of the function that stores the DOM scroll related properties.\n   * The duration of the throttle is configured through the\n   * {@link ScrollMixin.throttleMs}.\n   *\n   * @returns A throttled version of the function to store the scroll data.\n   * @internal\n   */\n  protected get throttledStoreScrollData(): () => void {\n    return throttle(this.storeScrollData, this.throttleMs);\n  }\n\n  /**\n   * Returns distance missing to end position position.\n   *\n   * @returns A number for knowing the distance missing to end position position.\n   * @internal\n   */\n  protected get distanceToEnd(): number {\n    return this.scrollEndPosition - this.currentPosition;\n  }\n\n  /**\n   * Returns `true` when the amount of pixels scrolled is greater than\n   * the {@link ScrollMixin.distanceToBottom}.\n   *\n   * @returns A boolean for knowing if the user is about to reaching to the end.\n   * @internal\n   */\n  protected get hasScrollAlmostReachedEnd(): boolean {\n    return !this.hasScrollReachedStart && this.distanceToBottom > this.distanceToEnd;\n  }\n\n  /**\n   * Returns `true` when there is no more content to scroll.\n   *\n   * @returns A boolean for knowing if the user scrolls to the end.\n   * @internal\n   */\n  protected get hasScrollReachedEnd(): boolean {\n    return this.currentPosition === this.scrollEndPosition;\n  }\n\n  /**\n   * Returns `true` when the scroll is at the initial position.\n   *\n   * @returns A boolean for knowing if the user scrolls to the start.\n   * @internal\n   */\n  protected get hasScrollReachedStart(): boolean {\n    return this.currentPosition === 0;\n  }\n\n  /**\n   * Returns direction of scroll based in {@link ScrollDirection}.\n   *\n   * @returns The scroll direction.\n   * @internal\n   */\n  protected get scrollDirection(): ScrollDirection {\n    return this.currentPosition > this.previousPosition ? 'DOWN' : 'UP';\n  }\n\n  /**\n   * Returns end position of scroll.\n   *\n   * @returns A number for knowing end position of scroll.\n   * @internal\n   */\n  protected get scrollEndPosition(): number {\n    return this.scrollHeight - this.clientHeight;\n  }\n\n  /**\n   * Initialises DOM dependant scroll properties.\n   *\n   * @internal\n   */\n  mounted(): void {\n    this.$nextTick().then(() => {\n      if (!this.$el) {\n        // TODO Replace with Empathy's logger\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ScrollMixin]',\n          'Components using this mixin must set `this.$el` to the HTML node that is scrolling.'\n        );\n      } else {\n        this.storeScrollData();\n      }\n    });\n  }\n\n  /**\n   * Resets the scroll position.\n   *\n   * @internal\n   */\n  @XOn(instance => (instance as ScrollMixin).resetOn)\n  resetScroll(): void {\n    this.$nextTick().then(() => {\n      if (this.resetOnChange) {\n        this.$el.scrollTo({ top: 0 });\n      }\n    });\n  }\n\n  /**\n   * Emits the `scroll` event.\n   *\n   * @param _newScrollPosition - The new position of scroll.\n   * @param oldScrollPosition - The old position of scroll.\n   * @internal\n   */\n  @Watch('currentPosition')\n  protected emitScroll(_newScrollPosition: number, oldScrollPosition: number): void {\n    this.$emit('scroll', this.currentPosition);\n    this.previousPosition = oldScrollPosition;\n  }\n\n  /**\n   * Emits the 'scroll:at-start' event when the user reaches the start.\n   *\n   * @param isScrollAtStart - For knowing if the user reaches at start.\n   * @internal\n   */\n  @Watch('hasScrollReachedStart')\n  protected emitScrollReachedAtStart(isScrollAtStart: boolean): void {\n    this.$emit('scroll:at-start', isScrollAtStart);\n  }\n\n  /**\n   * Emits the 'scroll:almost-at-end' event when the user is about to reach to end.\n   *\n   * @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end.\n   * @internal\n   */\n  @Watch('hasScrollAlmostReachedEnd')\n  protected emitScrollAlmostAtEnd(isScrollAlmostAtEnd: boolean): void {\n    this.$emit('scroll:almost-at-end', isScrollAlmostAtEnd);\n  }\n\n  /**\n   * Emits the 'scroll:at-end' event when the user reaches the end.\n   *\n   * @param isScrollAtEnd - For knowing if the user reaches at end.\n   * @internal\n   */\n  @Watch('hasScrollReachedEnd')\n  protected emitScrollAtEnd(isScrollAtEnd: boolean): void {\n    this.$emit('scroll:at-end', isScrollAtEnd);\n  }\n\n  /**\n   * Emits the `scroll:direction-change` event when the scrolling direction has changed.\n   *\n   * @param direction - The new direction of scroll.\n   * @internal\n   */\n  @Watch('scrollDirection')\n  protected emitScrollDirection(direction: ScrollDirection): void {\n    this.$emit('scroll:direction-change', direction);\n  }\n\n  /**\n   * Updates scroll related properties.\n   *\n   * @internal\n   */\n  protected storeScrollData(): void {\n    if (this.$el) {\n      this.currentPosition = this.$el.scrollTop;\n      this.scrollHeight = this.$el.scrollHeight;\n      this.clientHeight = this.$el.clientHeight;\n    }\n  }\n}\n/*  eslint-enable @typescript-eslint/unbound-method */\n"],"names":[],"mappings":"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"}

package/js/components/sliding-panel.vue.js

@@ -77,11 +77,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-6800b566_0", { source: ".x-sliding-panel[data-v-6800b566] {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  height: 100%;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-6800b566] {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2;\n  /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel__button-left[data-v-6800b566] {\n  left: 0;\n}\n.x-sliding-panel__button-right[data-v-6800b566] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-6800b566] {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-6800b566]::-webkit-scrollbar {\n  display: none;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) .x-sliding-panel__button-left[data-v-6800b566] {\n  opacity: 1;\n  pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) .x-sliding-panel__button-right[data-v-6800b566] {\n  opacity: 1;\n  pointer-events: all;\n}", map: undefined, media: undefined });
+    inject("data-v-561f2662_0", { source: ".x-sliding-panel[data-v-561f2662] {\n  align-items: center;\n  display: flex;\n  flex-flow: row nowrap;\n  height: 100%;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-561f2662] {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all ease-out 0.2s;\n  z-index: 2;\n  /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel__button-left[data-v-561f2662] {\n  left: 0;\n}\n.x-sliding-panel__button-right[data-v-561f2662] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-561f2662] {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-561f2662]::-webkit-scrollbar {\n  display: none;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) .x-sliding-panel__button-left[data-v-561f2662] {\n  opacity: 1;\n  pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) .x-sliding-panel__button-right[data-v-561f2662] {\n  opacity: 1;\n  pointer-events: all;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-6800b566";
+  var __vue_scope_id__ = "data-v-561f2662";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */