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

package/js/components/icons/arrow-right.vue.js

@@ -0,0 +1,61 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+import script from './arrow-right.vue_rollup-plugin-vue=script.js';
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function (_h, _vm) {
+  var _c = _vm._c;
+  return _c(
+    "svg",
+    {
+      class: ["x-icon"].concat(_vm.data.staticClass, _vm.data.class),
+      attrs: {
+        viewBox: "0 0 16 16",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+      },
+    },
+    [
+      _c("g", { attrs: { fill: "none", "fill-rule": "evenodd" } }, [
+        _c("line", { attrs: { x1: "13", y1: "8", x2: "3", y2: "8" } }),
+        _vm._v(" "),
+        _c("polyline", { attrs: { points: "8 13 13 8 8 3" } }) ]) ]
+  )
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  var __vue_inject_styles__ = undefined;
+  /* scoped */
+  var __vue_scope_id__ = undefined;
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = true;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+//# sourceMappingURL=arrow-right.vue.js.map

package/js/components/icons/arrow-right.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-right.vue.js","sources":["../../../../src/components/icons/arrow-right.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <line x1=\"13\" y1=\"8\" x2=\"3\" y2=\"8\" />\n      <polyline points=\"8 13 13 8 8 3\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/icons/arrow-right.vue_rollup-plugin-vue=script.js

@@ -0,0 +1,4 @@
+var script = {};
+
+export default script;
+//# sourceMappingURL=arrow-right.vue_rollup-plugin-vue=script.js.map

package/js/components/icons/arrow-right.vue_rollup-plugin-vue=script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-right.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/icons/arrow-right.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nexport default {};\n"],"names":[],"mappings":"AAgBA,aAAe,EAAE;;;;"}

package/js/components/icons/arrow-up.vue.js

@@ -0,0 +1,61 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+import script from './arrow-up.vue_rollup-plugin-vue=script.js';
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function (_h, _vm) {
+  var _c = _vm._c;
+  return _c(
+    "svg",
+    {
+      class: ["x-icon"].concat(_vm.data.staticClass, _vm.data.class),
+      attrs: {
+        viewBox: "0 0 16 16",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+      },
+    },
+    [
+      _c("g", { attrs: { fill: "none", "fill-rule": "evenodd" } }, [
+        _c("line", { attrs: { x1: "8", y1: "13", x2: "8", y2: "3" } }),
+        _vm._v(" "),
+        _c("polyline", { attrs: { points: "3 8 8 3 13 8" } }) ]) ]
+  )
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  var __vue_inject_styles__ = undefined;
+  /* scoped */
+  var __vue_scope_id__ = undefined;
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = true;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+//# sourceMappingURL=arrow-up.vue.js.map

package/js/components/icons/arrow-up.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-up.vue.js","sources":["../../../../src/components/icons/arrow-up.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <line x1=\"8\" y1=\"13\" x2=\"8\" y2=\"3\" />\n      <polyline points=\"3 8 8 3 13 8\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/icons/arrow-up.vue_rollup-plugin-vue=script.js

@@ -0,0 +1,4 @@
+var script = {};
+
+export default script;
+//# sourceMappingURL=arrow-up.vue_rollup-plugin-vue=script.js.map

package/js/components/icons/arrow-up.vue_rollup-plugin-vue=script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-up.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/icons/arrow-up.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nexport default {};\n"],"names":[],"mappings":"AAgBA,aAAe,EAAE;;;;"}

package/js/components/icons/grid-2-rows.vue.js

@@ -0,0 +1,65 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+import script from './grid-2-rows.vue_rollup-plugin-vue=script.js';
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function (_h, _vm) {
+  var _c = _vm._c;
+  return _c(
+    "svg",
+    {
+      class: ["x-icon"].concat(_vm.data.staticClass, _vm.data.class),
+      attrs: {
+        viewBox: "0 0 16 16",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        "xmlns:xlink": "http://www.w3.org/1999/xlink",
+      },
+    },
+    [
+      _c("g", { attrs: { fill: "none", "fill-rule": "evenodd" } }, [
+        _c("rect", {
+          attrs: { x: "2.5", y: "2.5", width: "11", height: "4.4" },
+        }),
+        _vm._v(" "),
+        _c("rect", {
+          attrs: { x: "2.5", y: "9.1", width: "11", height: "4.4" },
+        }) ]) ]
+  )
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  var __vue_inject_styles__ = undefined;
+  /* scoped */
+  var __vue_scope_id__ = undefined;
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = true;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+//# sourceMappingURL=grid-2-rows.vue.js.map

package/js/components/icons/grid-2-rows.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-2-rows.vue.js","sources":["../../../../src/components/icons/grid-2-rows.vue"],"sourcesContent":["<template functional>\n  <svg\n    :class=\"['x-icon'].concat(data.staticClass, data.class)\"\n    viewBox=\"0 0 16 16\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <rect x=\"2.5\" y=\"2.5\" width=\"11\" height=\"4.4\" />\n      <rect x=\"2.5\" y=\"9.1\" width=\"11\" height=\"4.4\" />\n    </g>\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/icons/grid-2-rows.vue_rollup-plugin-vue=script.js

@@ -0,0 +1,4 @@
+var script = {};
+
+export default script;
+//# sourceMappingURL=grid-2-rows.vue_rollup-plugin-vue=script.js.map

package/js/components/icons/grid-2-rows.vue_rollup-plugin-vue=script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-2-rows.vue_rollup-plugin-vue=script.js","sources":["../../../../src/components/icons/grid-2-rows.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nexport default {};\n"],"names":[],"mappings":"AAgBA,aAAe,EAAE;;;;"}

package/js/components/icons/tag.vue.js

@@ -16,7 +16,7 @@ var __vue_render__ = function (_h, _vm) {
     [
       _c("path", {
         attrs: {
-          d: "m6.336 13.594 4.143 4.144a1.155 1.155 0 0 0 1.635 0l4.963-4.959V7h-5.778l-4.963 4.964a1.156 1.156 0 0 0 0 1.63zM14.188 9.89h-.006",
+          d: "m6.3 13.6 4.1 4.1a1.2 1.2 0 0 0 1.6 0l5-5V7h-5.8l-5 5a1.1 1.1 0 0 0 0 1.6zM14.1 9.9h-0",
           "stroke-linecap": "round",
           "stroke-linejoin": "round",
         },

package/js/components/icons/tag.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.vue.js","sources":["../../../../src/components/icons/tag.vue"],"sourcesContent":["<template functional>\n  <svg :class=\"['x-icon'].concat(data.staticClass, data.class)\" viewBox=\"0 0 24 24\">\n    <!-- eslint-disable max-len -->\n    <path\n      d=\"m6.336 13.594 4.143 4.144a1.155 1.155 0 0 0 1.635 0l4.963-4.959V7h-5.778l-4.963 4.964a1.156 1.156 0 0 0 0 1.63zM14.188 9.89h-.006\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tag.vue.js","sources":["../../../../src/components/icons/tag.vue"],"sourcesContent":["<template functional>\n  <svg :class=\"['x-icon'].concat(data.staticClass, data.class)\" viewBox=\"0 0 24 24\">\n    <!-- eslint-disable max-len -->\n    <path\n      d=\"m6.3 13.6 4.1 4.1a1.2 1.2 0 0 0 1.6 0l5-5V7h-5.8l-5 5a1.1 1.1 0 0 0 0 1.6zM14.1 9.9h-0\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</template>\n\n<script lang=\"ts\">\n  export default {};\n</script>\n"],"names":["const"],"mappings":";;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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":"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"}
+{"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 */

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

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"$slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollLeft\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-left x-button x-button--round\"\n      data-test=\"sliding-panel-left-button\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainer\"\n      @scroll=\"debouncedUpdateScrollPosition\"\n      @transitionend=\"debouncedUpdateScrollPosition\"\n      @animationend=\"debouncedUpdateScrollPosition\"\n      class=\"x-list x-list--horizontal x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollRight\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-right x-button x-button--round\"\n      data-test=\"sliding-panel-right-button\"\n    >\n      <!-- @slot Right button content -->\n      <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n\n  /**\n   * Horizontal slide panel component. The content that is provided to this component would be\n   * navigable horizontally using two navigational buttons.\n   *\n   * @public\n   */\n  @Component\n  export default class SlidingPanel extends Vue {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     */\n    @Prop({ default: 0.7 })\n    protected scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     */\n    @Prop({ default: true })\n    protected showButtons!: boolean;\n\n    /**\n     * MutationObserver that watches for changes inside the wrapping div to update\n     * the scroll position.\n     */\n    protected scrollObserver = new MutationObserver(\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.restoreAndUpdateScroll\n    );\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    mounted(): void {\n      this.scrollObserver.observe(this.$refs.scrollContainer, {\n        attributes: false,\n        childList: true,\n        subtree: true,\n        characterData: false\n      });\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      window?.addEventListener('resize', this.debouncedUpdateScrollPosition);\n\n      this.updateScrollPosition();\n    }\n\n    beforeDestroy(): void {\n      this.scrollObserver.disconnect();\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      window?.removeEventListener('resize', this.debouncedUpdateScrollPosition);\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n      this.isScrollAtStart = !scrollLeft;\n      /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n       *  less than the scroll width even when the scroll is at the end */\n      this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element towards the provided scroll value.\n     *\n     * @param scrollValue - The value the scroll will go towards.\n     *\n     * @remarks this function uses the scrollBy from Element and it's not available in all browsers.\n     *\n     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel--at-start': this.isScrollAtStart,\n        'x-sliding-panel--at-end': this.isScrollAtEnd\n      };\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    height: 100%;\n    position: relative;\n\n    &__button {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: all ease-out 0.2s;\n      z-index: 2; /* To overlay the design system gradient with z-index:1 */\n\n      &-left {\n        left: 0;\n      }\n\n      &-right {\n        right: 0;\n      }\n    }\n\n    &__scroll {\n      display: flex;\n      flex: 100%;\n      flex-flow: row nowrap;\n      overflow: auto;\n      scrollbar-width: none; // Firefox\n      -ms-overflow-style: none; // IE\n\n      // Chrome, Edge & Safari\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) {\n      .x-sliding-panel__button-left {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) {\n      .x-sliding-panel__button-right {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component allows for any other component or element inside it to be horizontally navigable. It\nalso implements customizable buttons as well as other minor customizations to its general behavior.\nThe component uses the method `scrollBy` from `Element` to function, and it doesn't work properly in\nall browsers. A polyfill for the `scrollBy` would be needed for the component to behave as expected\nin those browsers.\n\n### Default usage\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<SlidingPanel>\n  <RelatedTags />\n</SlidingPanel>\n```\n\n### Behavior customization\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`.\n\n```vue\n<SlidingPanel :scrollFactor=\"1.2\">\n  <RelatedTags />\n</SlidingPanel>\n```\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<SlidingPanel :showButtons=\"isMobile\">\n  <RelatedTags />\n</SlidingPanel>\n```\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<SlidingPanel>\n  <template #sliding-panel-left-button>\n    Left\n  </template>\n  <RelatedTags />\n  <template #sliding-panel-right-button>\n    Right\n  </template>\n</SlidingPanel>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"$slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollLeft\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-left x-button x-button--round\"\n      data-test=\"sliding-panel-left-button\"\n    >\n      <!-- @slot Left button content -->\n      <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n    </button>\n    <div\n      ref=\"scrollContainer\"\n      @scroll=\"debouncedUpdateScrollPosition\"\n      @transitionend=\"debouncedUpdateScrollPosition\"\n      @animationend=\"debouncedUpdateScrollPosition\"\n      class=\"x-list x-list--horizontal x-sliding-panel__scroll\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <button\n      v-if=\"showButtons\"\n      @click=\"scrollRight\"\n      class=\"x-sliding-panel__button x-sliding-panel__button-right x-button x-button--round\"\n      data-test=\"sliding-panel-right-button\"\n    >\n      <!-- @slot Right button content -->\n      <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n  import { Debounce } from './decorators/debounce.decorators';\n\n  /**\n   * This component allows for any other component or element inside it to be horizontally\n   * navigable. It also implements customizable buttons as well as other minor customizations to its\n   * general behavior.\n   *\n   * @public\n   */\n  @Component\n  export default class SlidingPanel extends Vue {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     *\n     * @public\n     */\n    @Prop({ default: 0.7 })\n    public scrollFactor!: number;\n\n    /**\n     * Would make the navigation buttons visible when they're needed or always hide them.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public showButtons!: boolean;\n\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public resetOnContentChange!: boolean;\n\n    /**\n     * Indicates if the scroll is at the start of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtStart = true;\n\n    /**\n     * Indicates if the scroll is at the end of the sliding panel.\n     *\n     * @internal\n     */\n    protected isScrollAtEnd = true;\n\n    /**\n     * HTMLElement referencing the scroll of the component.\n     *\n     * @internal\n     */\n    public $refs!: {\n      scrollContainer: HTMLElement;\n    };\n\n    /**\n     * CSS classes to apply based on the scroll position.\n     *\n     * @returns The CSS classes to apply.\n     *\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-sliding-panel--at-start': this.isScrollAtStart,\n        'x-sliding-panel--at-end': this.isScrollAtEnd\n      };\n    }\n\n    /**\n     * Initialises browser platform code:\n     * - Creates a mutation observer to detect content changes and reset scroll position.\n     * - Stores initial size and scroll position values.\n     *\n     * @internal\n     */\n    mounted(): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n      resizeObserver.observe(this.$el);\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n      this.$watch(\n        () => this.resetOnContentChange,\n        shouldReset => {\n          if (shouldReset) {\n            contentChangedObserver.observe(this.$refs.scrollContainer, {\n              attributes: false,\n              childList: true,\n              subtree: true,\n              characterData: false\n            });\n          } else {\n            contentChangedObserver.disconnect();\n          }\n        },\n        { immediate: true }\n      );\n      this.$on('hook:beforeDestroy', () => {\n        contentChangedObserver.disconnect();\n        resizeObserver.disconnect();\n      });\n\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Resets the scroll and updates the values of the scroll for the buttons to react.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    restoreAndUpdateScroll(): void {\n      this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Updates the values of the scroll positions to show or hide the buttons depending on it.\n     *\n     * @internal\n     */\n    protected updateScrollPosition(): void {\n      const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n      this.isScrollAtStart = !scrollLeft;\n      /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n       *  less than the scroll width even when the scroll is at the end */\n      this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n    }\n\n    /**\n     * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n     * method.\n     *\n     * @internal\n     */\n    @Debounce(100, { leading: true })\n    debouncedUpdateScrollPosition(): void {\n      this.updateScrollPosition();\n    }\n\n    /**\n     * Scrolls the wrapper element to the left.\n     *\n     * @internal\n     */\n    protected scrollLeft(): void {\n      this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element to the right.\n     *\n     * @internal\n     */\n    protected scrollRight(): void {\n      this.scrollTo(this.$refs.scrollContainer.clientWidth);\n    }\n\n    /**\n     * Scrolls the wrapper element towards the provided scroll value.\n     *\n     * @param scrollValue - The value the scroll will go towards.\n     *\n     * @internal\n     */\n    protected scrollTo(scrollValue: number): void {\n      this.$refs.scrollContainer.scrollBy({\n        left: scrollValue * this.scrollFactor,\n        behavior: 'smooth'\n      });\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-sliding-panel {\n    align-items: center;\n    display: flex;\n    flex-flow: row nowrap;\n    height: 100%;\n    position: relative;\n\n    &__button {\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: all ease-out 0.2s;\n      z-index: 2; /* To overlay the design system gradient with z-index:1 */\n\n      &-left {\n        left: 0;\n      }\n\n      &-right {\n        right: 0;\n      }\n    }\n\n    &__scroll {\n      display: flex;\n      flex: 100%;\n      flex-flow: row nowrap;\n      overflow: auto;\n      scrollbar-width: none; // Firefox\n      -ms-overflow-style: none; // IE\n\n      // Chrome, Edge & Safari\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    }\n\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) {\n      .x-sliding-panel__button-left {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n\n    &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) {\n      .x-sliding-panel__button-right {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    },\n    data() {\n      return {\n        items: 4,\n        resetOnContentChange: false\n      };\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SlidingPanelDemo',\n    components: {\n      SlidingPanel\n    }\n  };\n</script>\n\n<style>\n  .x-sliding-panel {\n    width: 200px;\n  }\n\n  .item {\n    display: inline-block;\n    width: 100px;\n  }\n</style>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/sliding-panel.vue_rollup-plugin-vue=script.js

@@ -4,8 +4,9 @@ import { Prop, Component } from 'vue-property-decorator';
 import { Debounce } from './decorators/debounce.decorators.js';
 
 /**
- * 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.
  *
  * @public
  */
@@ -13,38 +14,69 @@ var SlidingPanel = /** @class */ (function (_super) {
     __extends(SlidingPanel, _super);
     function SlidingPanel() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        /**
-         * MutationObserver that watches for changes inside the wrapping div to update
-         * the scroll position.
-         */
-        _this.scrollObserver = new MutationObserver(
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        _this.restoreAndUpdateScroll);
         /**
          * Indicates if the scroll is at the start of the sliding panel.
+         *
+         * @internal
          */
         _this.isScrollAtStart = true;
         /**
          * Indicates if the scroll is at the end of the sliding panel.
+         *
+         * @internal
          */
         _this.isScrollAtEnd = true;
         return _this;
     }
+    Object.defineProperty(SlidingPanel.prototype, "cssClasses", {
+        /**
+         * CSS classes to apply based on the scroll position.
+         *
+         * @returns The CSS classes to apply.
+         *
+         * @internal
+         */
+        get: function () {
+            return {
+                'x-sliding-panel--at-start': this.isScrollAtStart,
+                'x-sliding-panel--at-end': this.isScrollAtEnd
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Initialises browser platform code:
+     * - Creates a mutation observer to detect content changes and reset scroll position.
+     * - Stores initial size and scroll position values.
+     *
+     * @internal
+     */
     SlidingPanel.prototype.mounted = function () {
-        this.scrollObserver.observe(this.$refs.scrollContainer, {
-            attributes: false,
-            childList: true,
-            subtree: true,
-            characterData: false
-        });
+        var _this = this;
         // eslint-disable-next-line @typescript-eslint/unbound-method
-        window === null || window === void 0 ? void 0 : window.addEventListener('resize', this.debouncedUpdateScrollPosition);
-        this.updateScrollPosition();
-    };
-    SlidingPanel.prototype.beforeDestroy = function () {
-        this.scrollObserver.disconnect();
+        var resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);
+        resizeObserver.observe(this.$el);
         // eslint-disable-next-line @typescript-eslint/unbound-method
-        window === null || window === void 0 ? void 0 : window.removeEventListener('resize', this.debouncedUpdateScrollPosition);
+        var contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);
+        this.$watch(function () { return _this.resetOnContentChange; }, function (shouldReset) {
+            if (shouldReset) {
+                contentChangedObserver.observe(_this.$refs.scrollContainer, {
+                    attributes: false,
+                    childList: true,
+                    subtree: true,
+                    characterData: false
+                });
+            }
+            else {
+                contentChangedObserver.disconnect();
+            }
+        }, { immediate: true });
+        this.$on('hook:beforeDestroy', function () {
+            contentChangedObserver.disconnect();
+            resizeObserver.disconnect();
+        });
+        this.updateScrollPosition();
     };
     /**
      * Resets the scroll and updates the values of the scroll for the buttons to react.
@@ -97,8 +129,6 @@ var SlidingPanel = /** @class */ (function (_super) {
      *
      * @param scrollValue - The value the scroll will go towards.
      *
-     * @remarks this function uses the scrollBy from Element and it's not available in all browsers.
-     *
      * @internal
      */
     SlidingPanel.prototype.scrollTo = function (scrollValue) {
@@ -107,29 +137,15 @@ var SlidingPanel = /** @class */ (function (_super) {
             behavior: 'smooth'
         });
     };
-    Object.defineProperty(SlidingPanel.prototype, "cssClasses", {
-        /**
-         * CSS classes to apply based on the scroll position.
-         *
-         * @returns The CSS classes to apply.
-         *
-         * @internal
-         */
-        get: function () {
-            return {
-                'x-sliding-panel--at-start': this.isScrollAtStart,
-                'x-sliding-panel--at-end': this.isScrollAtEnd
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
     __decorate([
         Prop({ default: 0.7 })
     ], SlidingPanel.prototype, "scrollFactor", void 0);
     __decorate([
         Prop({ default: true })
     ], SlidingPanel.prototype, "showButtons", void 0);
+    __decorate([
+        Prop({ default: true })
+    ], SlidingPanel.prototype, "resetOnContentChange", void 0);
     __decorate([
         Debounce(100, { leading: true })
     ], SlidingPanel.prototype, "restoreAndUpdateScroll", null);