@empathyco/x-components 3.0.0-alpha.8 → 3.0.0-alpha.82

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

@@ -1,122 +1,139 @@
-import { __extends, __decorate } from 'tslib';
+import { __decorate } from 'tslib';
 import Vue from 'vue';
-import { Prop, Watch } from 'vue-property-decorator';
-import Component from 'vue-class-component';
+import { Prop, Watch, Component } from 'vue-property-decorator';
+import { throttle } from '../../utils/throttle.js';
+import { XOn } from '../decorators/bus.decorators.js';
 
 /**
  * Mixin to share Scroll logic.
  *
  * @public
  */
-var ScrollMixin = /** @class */ (function (_super) {
-    __extends(ScrollMixin, _super);
-    function ScrollMixin() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        /**
-         * Property for getting the current position of scroll.
-         *
-         * @internal
-         */
-        _this.currentPosition = 0;
-        /**
-         * Property for getting the previous position of scroll.
-         *
-         * @internal
-         */
-        _this.previousPosition = 0;
-        /**
-         * Property for getting the scroll height.
-         *
-         * @internal
-         */
-        _this.scrollHeight = 0;
+let ScrollMixin = 
+/* eslint-disable @typescript-eslint/unbound-method */
+class ScrollMixin extends Vue {
+    constructor() {
+        super(...arguments);
         /**
          * Property for getting the client height of scroll.
          *
          * @internal
          */
-        _this.clientHeight = 0;
-        return _this;
-    }
-    Object.defineProperty(ScrollMixin.prototype, "scrollEndPosition", {
-        /**
-         * Returns end position of scroll.
-         *
-         * @returns A number for knowing end position of scroll.
-         * @internal
-         */
-        get: function () {
-            return this.scrollHeight - this.clientHeight;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ScrollMixin.prototype, "distanceToEnd", {
-        /**
-         * Returns distance missing to end position position.
-         *
-         * @returns A number for knowing the distance missing to end position position.
-         * @internal
-         */
-        get: function () {
-            return this.scrollEndPosition - this.currentPosition;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ScrollMixin.prototype, "hasScrollReachedStart", {
-        /**
-         * Returns `true` when the scroll is at the initial position.
-         *
-         * @returns A boolean for knowing if the user scrolls to the start.
-         * @internal
-         */
-        get: function () {
-            return this.currentPosition === 0;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ScrollMixin.prototype, "scrollDirection", {
+        this.clientHeight = 0;
         /**
-         * Returns direction of scroll based in {@link ScrollDirection}.
+         * Property for getting the current position of scroll.
          *
-         * @returns The scroll direction.
          * @internal
          */
-        get: function () {
-            return this.currentPosition > this.previousPosition ? 'DOWN' : 'UP';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ScrollMixin.prototype, "hasScrollAlmostReachedEnd", {
+        this.currentPosition = 0;
         /**
-         * Returns `true` when the amount of pixels scrolled is greater than
-         * the {@link ScrollMixin.distanceToBottom}.
+         * Property for getting the previous position of scroll.
          *
-         * @returns A boolean for knowing if the user is about to reaching to the end.
          * @internal
          */
-        get: function () {
-            return !this.hasScrollReachedStart && this.distanceToBottom > this.distanceToEnd;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ScrollMixin.prototype, "hasScrollReachedEnd", {
+        this.previousPosition = 0;
         /**
-         * Returns `true` when there is no more content to scroll.
+         * Property for getting the scroll height.
          *
-         * @returns A boolean for knowing if the user scrolls to the end.
          * @internal
          */
-        get: function () {
-            return this.currentPosition === this.scrollEndPosition;
-        },
-        enumerable: true,
-        configurable: true
-    });
+        this.scrollHeight = 0;
+    }
+    /**
+     * Throttled version of the function that stores the DOM scroll related properties.
+     * The duration of the throttle is configured through the
+     * {@link ScrollMixin.throttleMs}.
+     *
+     * @returns A throttled version of the function to store the scroll data.
+     * @internal
+     */
+    get throttledStoreScrollData() {
+        return throttle(this.storeScrollData, this.throttleMs);
+    }
+    /**
+     * Returns distance missing to end position position.
+     *
+     * @returns A number for knowing the distance missing to end position position.
+     * @internal
+     */
+    get distanceToEnd() {
+        return this.scrollEndPosition - this.currentPosition;
+    }
+    /**
+     * Returns `true` when the amount of pixels scrolled is greater than
+     * the {@link ScrollMixin.distanceToBottom}.
+     *
+     * @returns A boolean for knowing if the user is about to reaching to the end.
+     * @internal
+     */
+    get hasScrollAlmostReachedEnd() {
+        return !this.hasScrollReachedStart && this.distanceToBottom > this.distanceToEnd;
+    }
+    /**
+     * Returns `true` when there is no more content to scroll.
+     *
+     * @returns A boolean for knowing if the user scrolls to the end.
+     * @internal
+     */
+    get hasScrollReachedEnd() {
+        return this.currentPosition === this.scrollEndPosition;
+    }
+    /**
+     * Returns `true` when the scroll is at the initial position.
+     *
+     * @returns A boolean for knowing if the user scrolls to the start.
+     * @internal
+     */
+    get hasScrollReachedStart() {
+        return this.currentPosition === 0;
+    }
+    /**
+     * Returns direction of scroll based in {@link ScrollDirection}.
+     *
+     * @returns The scroll direction.
+     * @internal
+     */
+    get scrollDirection() {
+        return this.currentPosition > this.previousPosition ? 'DOWN' : 'UP';
+    }
+    /**
+     * Returns end position of scroll.
+     *
+     * @returns A number for knowing end position of scroll.
+     * @internal
+     */
+    get scrollEndPosition() {
+        return this.scrollHeight - this.clientHeight;
+    }
+    /**
+     * Initialises DOM dependant scroll properties.
+     *
+     * @internal
+     */
+    mounted() {
+        this.$nextTick().then(() => {
+            if (!this.$el) {
+                // TODO Replace with Empathy's logger
+                // eslint-disable-next-line no-console
+                console.warn('[ScrollMixin]', 'Components using this mixin must set `this.$el` to the HTML node that is scrolling.');
+            }
+            else {
+                this.storeScrollData();
+            }
+        });
+    }
+    /**
+     * Resets the scroll position.
+     *
+     * @internal
+     */
+    resetScroll() {
+        this.$nextTick().then(() => {
+            if (this.resetOnChange) {
+                this.$el.scrollTo({ top: 0 });
+            }
+        });
+    }
     /**
      * Emits the `scroll` event.
      *
@@ -124,78 +141,106 @@ var ScrollMixin = /** @class */ (function (_super) {
      * @param oldScrollPosition - The old position of scroll.
      * @internal
      */
-    ScrollMixin.prototype.emitScroll = function (_newScrollPosition, oldScrollPosition) {
+    emitScroll(_newScrollPosition, oldScrollPosition) {
         this.$emit('scroll', this.currentPosition);
         this.previousPosition = oldScrollPosition;
-    };
-    /**
-     * Emits the `scroll:direction-change` event when the scrolling direction has changed.
-     *
-     * @param direction - The new direction of scroll.
-     * @internal
-     */
-    ScrollMixin.prototype.emitScrollDirection = function (direction) {
-        this.$emit('scroll:direction-change', direction);
-    };
+    }
     /**
      * Emits the 'scroll:at-start' event when the user reaches the start.
      *
      * @param isScrollAtStart - For knowing if the user reaches at start.
      * @internal
      */
-    ScrollMixin.prototype.emitScrollReachedAtStart = function (isScrollAtStart) {
-        if (isScrollAtStart) {
-            this.$emit('scroll:at-start');
-        }
-    };
+    emitScrollReachedAtStart(isScrollAtStart) {
+        this.$emit('scroll:at-start', isScrollAtStart);
+    }
     /**
      * Emits the 'scroll:almost-at-end' event when the user is about to reach to end.
      *
      * @param isScrollAlmostAtEnd - For knowing if the user is about to reach to end.
      * @internal
      */
-    ScrollMixin.prototype.emitScrollAlmostAtEnd = function (isScrollAlmostAtEnd) {
-        if (isScrollAlmostAtEnd) {
-            this.$emit('scroll:almost-at-end', this.distanceToEnd);
-        }
-    };
+    emitScrollAlmostAtEnd(isScrollAlmostAtEnd) {
+        this.$emit('scroll:almost-at-end', isScrollAlmostAtEnd);
+    }
     /**
      * Emits the 'scroll:at-end' event when the user reaches the end.
      *
      * @param isScrollAtEnd - For knowing if the user reaches at end.
      * @internal
      */
-    ScrollMixin.prototype.emitScrollAtEnd = function (isScrollAtEnd) {
-        if (isScrollAtEnd) {
-            this.$emit('scroll:at-end');
+    emitScrollAtEnd(isScrollAtEnd) {
+        this.$emit('scroll:at-end', isScrollAtEnd);
+    }
+    /**
+     * Emits the `scroll:direction-change` event when the scrolling direction has changed.
+     *
+     * @param direction - The new direction of scroll.
+     * @internal
+     */
+    emitScrollDirection(direction) {
+        this.$emit('scroll:direction-change', direction);
+    }
+    /**
+     * Updates scroll related properties.
+     *
+     * @internal
+     */
+    storeScrollData() {
+        if (this.$el) {
+            this.currentPosition = this.$el.scrollTop;
+            this.scrollHeight = this.$el.scrollHeight;
+            this.clientHeight = this.$el.clientHeight;
         }
-    };
-    __decorate([
-        Prop({ default: 100 })
-    ], ScrollMixin.prototype, "throttleMs", void 0);
-    __decorate([
-        Prop({ default: 100 })
-    ], ScrollMixin.prototype, "distanceToBottom", void 0);
-    __decorate([
-        Watch('currentPosition')
-    ], ScrollMixin.prototype, "emitScroll", null);
-    __decorate([
-        Watch('scrollDirection')
-    ], ScrollMixin.prototype, "emitScrollDirection", null);
-    __decorate([
-        Watch('hasScrollReachedStart')
-    ], ScrollMixin.prototype, "emitScrollReachedAtStart", null);
-    __decorate([
-        Watch('hasScrollAlmostReachedEnd')
-    ], ScrollMixin.prototype, "emitScrollAlmostAtEnd", null);
-    __decorate([
-        Watch('hasScrollReachedEnd')
-    ], ScrollMixin.prototype, "emitScrollAtEnd", null);
-    ScrollMixin = __decorate([
-        Component
-    ], ScrollMixin);
-    return ScrollMixin;
-}(Vue));
+    }
+};
+__decorate([
+    Prop({ default: 100 })
+], ScrollMixin.prototype, "distanceToBottom", void 0);
+__decorate([
+    Prop({ default: 100 })
+], ScrollMixin.prototype, "firstElementThresholdPx", void 0);
+__decorate([
+    Prop({ default: 100 })
+], ScrollMixin.prototype, "throttleMs", void 0);
+__decorate([
+    Prop({ type: Boolean, default: true })
+], ScrollMixin.prototype, "resetOnChange", void 0);
+__decorate([
+    Prop({
+        default: () => [
+            'SearchBoxQueryChanged',
+            'SortChanged',
+            'SelectedFiltersChanged',
+            'SelectedRelatedTagsChanged',
+            'UserChangedExtraParams'
+        ]
+    })
+], ScrollMixin.prototype, "resetOn", void 0);
+__decorate([
+    XOn(instance => instance.resetOn)
+], ScrollMixin.prototype, "resetScroll", null);
+__decorate([
+    Watch('currentPosition')
+], ScrollMixin.prototype, "emitScroll", null);
+__decorate([
+    Watch('hasScrollReachedStart')
+], ScrollMixin.prototype, "emitScrollReachedAtStart", null);
+__decorate([
+    Watch('hasScrollAlmostReachedEnd')
+], ScrollMixin.prototype, "emitScrollAlmostAtEnd", null);
+__decorate([
+    Watch('hasScrollReachedEnd')
+], ScrollMixin.prototype, "emitScrollAtEnd", null);
+__decorate([
+    Watch('scrollDirection')
+], ScrollMixin.prototype, "emitScrollDirection", null);
+ScrollMixin = __decorate([
+    Component
+    /* eslint-disable @typescript-eslint/unbound-method */
+], ScrollMixin);
+var ScrollMixin$1 = ScrollMixin;
+/*  eslint-enable @typescript-eslint/unbound-method */
 
-export default ScrollMixin;
+export { ScrollMixin$1 as default };
 //# sourceMappingURL=scroll.mixin.js.map

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 { Prop, Watch } from 'vue-property-decorator';\nimport Component from 'vue-class-component';\nimport { ScrollDirection } from './scroll.types';\n\n/**\n * Mixin to share Scroll logic.\n *\n * @public\n */\n@Component\nexport default class ScrollMixin extends Vue {\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   * 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  /**\n   * Property for getting the current position of scroll.\n   *\n   * @internal\n   */\n  protected currentPosition = 0;\n\n  /**\n   * Property for getting the previous position of scroll.\n   *\n   * @internal\n   */\n  protected previousPosition = 0;\n\n  /**\n   * Property for getting the scroll height.\n   *\n   * @internal\n   */\n  protected scrollHeight = 0;\n\n  /**\n   * Property for getting the client height of scroll.\n   *\n   * @internal\n   */\n  protected clientHeight = 0;\n\n  /**\n   * Property for getting the direction of scroll.\n   *\n   * @internal\n   */\n  protected direction!: ScrollDirection;\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   * 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 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 `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   * 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  emitScroll(_newScrollPosition: number, oldScrollPosition: number): void {\n    this.$emit('scroll', this.currentPosition);\n    this.previousPosition = oldScrollPosition;\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  emitScrollDirection(direction: ScrollDirection): void {\n    this.$emit('scroll:direction-change', direction);\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  emitScrollReachedAtStart(isScrollAtStart: boolean): void {\n    if (isScrollAtStart) {\n      this.$emit('scroll:at-start');\n    }\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  emitScrollAlmostAtEnd(isScrollAlmostAtEnd: boolean): void {\n    if (isScrollAlmostAtEnd) {\n      this.$emit('scroll:almost-at-end', this.distanceToEnd);\n    }\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  emitScrollAtEnd(isScrollAtEnd: boolean): void {\n    if (isScrollAtEnd) {\n      this.$emit('scroll:at-end');\n    }\n  }\n}\n"],"names":[],"mappings":";;;;;AAKA;;;;;AAMA;IAAyC,+BAAG;IAA5C;QAAA,qEAiLC;;;;;;QAzJW,qBAAe,GAAG,CAAC,CAAC;;;;;;QAOpB,sBAAgB,GAAG,CAAC,CAAC;;;;;;QAOrB,kBAAY,GAAG,CAAC,CAAC;;;;;;QAOjB,kBAAY,GAAG,CAAC,CAAC;;KAoI5B;IArHC,sBAAc,0CAAiB;;;;;;;aAA/B;YACE,OAAO,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;SAC9C;;;OAAA;IAQD,sBAAc,sCAAa;;;;;;;aAA3B;YACE,OAAO,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC;SACtD;;;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;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;;;;;;;;IAUD,gCAAU,GAAV,UAAW,kBAA0B,EAAE,iBAAyB;QAC9D,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC3C,IAAI,CAAC,gBAAgB,GAAG,iBAAiB,CAAC;KAC3C;;;;;;;IASD,yCAAmB,GAAnB,UAAoB,SAA0B;QAC5C,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;KAClD;;;;;;;IASD,8CAAwB,GAAxB,UAAyB,eAAwB;QAC/C,IAAI,eAAe,EAAE;YACnB,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;SAC/B;KACF;;;;;;;IASD,2CAAqB,GAArB,UAAsB,mBAA4B;QAChD,IAAI,mBAAmB,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SACxD;KACF;;;;;;;IASD,qCAAe,GAAf,UAAgB,aAAsB;QACpC,IAAI,aAAa,EAAE;YACjB,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;SAC7B;KACF;IAxKD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;mDACI;IAS3B;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;yDACU;IA0GjC;QADC,KAAK,CAAC,iBAAiB,CAAC;iDAIxB;IASD;QADC,KAAK,CAAC,iBAAiB,CAAC;0DAGxB;IASD;QADC,KAAK,CAAC,uBAAuB,CAAC;+DAK9B;IASD;QADC,KAAK,CAAC,2BAA2B,CAAC;4DAKlC;IASD;QADC,KAAK,CAAC,qBAAqB,CAAC;sDAK5B;IAhLkB,WAAW;QAD/B,SAAS;OACW,WAAW,CAiL/B;IAAD,kBAAC;CAAA,CAjLwC,GAAG;;;;"}
+{"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

@@ -1,12 +1,12 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.js';
-import script from './sliding-panel.vue_rollup-plugin-vue=script.js';
+import script from './sliding-panel.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/browser.mjs';
 
 /* script */
-var __vue_script__ = script;
+const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -16,7 +16,7 @@ var __vue_render__ = function() {
         {
           staticClass: "x-sliding-panel",
           class: _vm.cssClasses,
-          attrs: { "data-test": "sliding-panel" }
+          attrs: { "data-test": "sliding-panel" },
         },
         [
           _vm.showButtons
@@ -24,14 +24,15 @@ var __vue_render__ = function() {
                 "button",
                 {
                   staticClass:
-                    "x-sliding-panel__button x-sliding-panel__button-left x-button x-button--round",
+                    "x-sliding-panel__button x-sliding-panel__button-left x-button",
+                  class: _vm.buttonClass,
                   attrs: { "data-test": "sliding-panel-left-button" },
-                  on: { click: _vm.scrollLeft }
+                  on: { click: _vm.scrollLeft },
                 },
                 [
-                  _vm._t("sliding-panel-left-button", function() {
+                  _vm._t("sliding-panel-left-button", function () {
                     return [_vm._v("ᐸ")]
-                  })
+                  }),
                 ],
                 2
               )
@@ -46,8 +47,8 @@ var __vue_render__ = function() {
               on: {
                 scroll: _vm.debouncedUpdateScrollPosition,
                 transitionend: _vm.debouncedUpdateScrollPosition,
-                animationend: _vm.debouncedUpdateScrollPosition
-              }
+                animationend: _vm.debouncedUpdateScrollPosition,
+              },
             },
             [_vm._t("default")],
             2
@@ -58,18 +59,19 @@ var __vue_render__ = function() {
                 "button",
                 {
                   staticClass:
-                    "x-sliding-panel__button x-sliding-panel__button-right x-button x-button--round",
+                    "x-sliding-panel__button x-sliding-panel__button-right x-button",
+                  class: _vm.buttonClass,
                   attrs: { "data-test": "sliding-panel-right-button" },
-                  on: { click: _vm.scrollRight }
+                  on: { click: _vm.scrollRight },
                 },
                 [
-                  _vm._t("sliding-panel-right-button", function() {
+                  _vm._t("sliding-panel-right-button", function () {
                     return [_vm._v("ᐳ")]
-                  })
+                  }),
                 ],
                 2
               )
-            : _vm._e()
+            : _vm._e(),
         ]
       )
     : _vm._e()
@@ -78,24 +80,24 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__ = function (inject) {
-    if (!inject) { return }
-    inject("data-v-70e3e321_0", { source: ".x-sliding-panel[data-v-70e3e321] {\n  -ms-flex-align: center;\n      align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-flow: row nowrap;\n      flex-flow: row nowrap;\n  height: 100%;\n  position: relative;\n}\n.x-sliding-panel__button[data-v-70e3e321] {\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-70e3e321] {\n  left: 0;\n}\n.x-sliding-panel__button-right[data-v-70e3e321] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-70e3e321] {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 100%;\n      flex: 100%;\n  -ms-flex-flow: row nowrap;\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-70e3e321]::-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-70e3e321] {\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-70e3e321] {\n  opacity: 1;\n  pointer-events: all;\n}", map: undefined, media: undefined });
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
+    inject("data-v-1c771718_0", { source: ".x-sliding-panel[data-v-1c771718] {\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-1c771718] {\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-1c771718] {\n  left: 0;\n}\n.x-sliding-panel__button-right[data-v-1c771718] {\n  right: 0;\n}\n.x-sliding-panel__scroll[data-v-1c771718] {\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-1c771718]::-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-1c771718] {\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-1c771718] {\n  opacity: 1;\n  pointer-events: all;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-70e3e321";
+  const __vue_scope_id__ = "data-v-1c771718";
   /* module identifier */
-  var __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  var __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__ = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  var __vue_component__ = /*#__PURE__*/__vue_normalize__(
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
     __vue_inject_styles__,
     __vue_script__,
@@ -108,5 +110,5 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };
 //# sourceMappingURL=sliding-panel.vue.js.map

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>\n#Example\n\nThis component allows for any other component or element inside it to be horizontally navigable.\nIt also implements customizable buttons as well as other minor customizations to its\ngeneral behavior.\nThe component uses the method `scrollBy` from `Element` to function, and it doesn't work properly\nin all browsers. A polyfill for the `scrollBy` would be needed for the component to behave as\nexpected in 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\nscroll just 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\"\n      :class=\"buttonClass\"\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\"\n      :class=\"buttonClass\"\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     * CSS classes to add to the buttons.\n     *\n     * @public\n     */\n    @Prop()\n    public buttonClass?: string;\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":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}