@sme.up/ketchup 9.1.0 → 9.3.0

package/dist/collection/managers/kup-scroll-on-hover/kup-scroll-on-hover.js

@@ -1,18 +1,18 @@
 var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-  if (kind === "m")
-    throw new TypeError("Private method is not writable");
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a setter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a getter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _KupScrollOnHover_instances, _KupScrollOnHover_arrowsContainer, _KupScrollOnHover_leftArrows, _KupScrollOnHover_rightArrows, _KupScrollOnHover_scrollEvent, _KupScrollOnHover_mousemoveEvent, _KupScrollOnHover_mouseleaveEvent, _KupScrollOnHover_rAF, _KupScrollOnHover_timeout, _KupScrollOnHover_initArrows;
 import { ScrollOnHoverDirection, } from "./kup-scroll-on-hover-declarations";
@@ -22,313 +22,313 @@ const dom = document.documentElement;
  * @module KupScrollOnHover
  */
 export class KupScrollOnHover {
-  /**
-   * Initializes KupScrollOnHover.
-   * @param {number} delay - Sets the time in milliseconds before the scrolling starts when mouse-hovering.
-   * @param {number} step - The amount in pixels for each scroll recursion.
-   */
-  constructor(delay, step) {
-    _KupScrollOnHover_instances.add(this);
-    _KupScrollOnHover_arrowsContainer.set(this, void 0);
-    _KupScrollOnHover_leftArrows.set(this, void 0);
-    _KupScrollOnHover_rightArrows.set(this, void 0);
-    _KupScrollOnHover_scrollEvent.set(this, void 0);
-    _KupScrollOnHover_mousemoveEvent.set(this, void 0);
-    _KupScrollOnHover_mouseleaveEvent.set(this, void 0);
-    _KupScrollOnHover_rAF.set(this, void 0);
-    _KupScrollOnHover_timeout.set(this, void 0);
-    this.delay = delay ? delay : 500;
-    this.managedElements = new Set();
-    this.step = step ? step : 50;
-    __classPrivateFieldSet(this, _KupScrollOnHover_mouseleaveEvent, (event) => this.stop(event.target), "f");
-    __classPrivateFieldSet(this, _KupScrollOnHover_mousemoveEvent, (event) => this.start(event), "f");
-    __classPrivateFieldSet(this, _KupScrollOnHover_rAF, null, "f");
-    __classPrivateFieldSet(this, _KupScrollOnHover_scrollEvent, (event) => this.updateChildren(event.target), "f");
-    __classPrivateFieldSet(this, _KupScrollOnHover_timeout, null, "f");
-  }
-  /**
-   * Watches the given element in order to trigger the scroll on hover when conditions are met.
-   * Children nodes with the "hover-scrolling-child" will be watched and scrolled when el scrolls.
-   * @param {KupScrollOnHoverElement} el - Element to watch.
-   * @param {boolean} vertical - Enables vertical scroll.
-   * @param {KupScrollOnHoverPercentages} percentages - Sets how big is the area in which the scroll is enabled.
-   * @param {number} step - The amount in pixels for each scroll recursion.
-   */
-  register(el, vertical, percentages, step) {
-    if (!__classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f")) {
-      __classPrivateFieldGet(this, _KupScrollOnHover_instances, "m", _KupScrollOnHover_initArrows).call(this);
+    /**
+     * Initializes KupScrollOnHover.
+     * @param {number} delay - Sets the time in milliseconds before the scrolling starts when mouse-hovering.
+     * @param {number} step - The amount in pixels for each scroll recursion.
+     */
+    constructor(delay, step) {
+        _KupScrollOnHover_instances.add(this);
+        _KupScrollOnHover_arrowsContainer.set(this, void 0);
+        _KupScrollOnHover_leftArrows.set(this, void 0);
+        _KupScrollOnHover_rightArrows.set(this, void 0);
+        _KupScrollOnHover_scrollEvent.set(this, void 0);
+        _KupScrollOnHover_mousemoveEvent.set(this, void 0);
+        _KupScrollOnHover_mouseleaveEvent.set(this, void 0);
+        _KupScrollOnHover_rAF.set(this, void 0);
+        _KupScrollOnHover_timeout.set(this, void 0);
+        this.delay = delay ? delay : 500;
+        this.managedElements = new Set();
+        this.step = step ? step : 50;
+        __classPrivateFieldSet(this, _KupScrollOnHover_mouseleaveEvent, (event) => this.stop(event.target), "f");
+        __classPrivateFieldSet(this, _KupScrollOnHover_mousemoveEvent, (event) => this.start(event), "f");
+        __classPrivateFieldSet(this, _KupScrollOnHover_rAF, null, "f");
+        __classPrivateFieldSet(this, _KupScrollOnHover_scrollEvent, (event) => this.updateChildren(event.target), "f");
+        __classPrivateFieldSet(this, _KupScrollOnHover_timeout, null, "f");
     }
-    el.style.overflowX = 'auto';
-    el.scrollOnHover = {
-      active: false,
-      children: el.querySelectorAll('.hover-scrolling-child'),
-      percentages: percentages
-        ? percentages
-        : { back: 0.1, forward: 0.9 },
-      rect: null,
-      step: step,
-      vertical: vertical || null,
-      x: 0,
-      y: 0,
-    };
-    if (el.scrollOnHover.children) {
-      el.addEventListener('scroll', __classPrivateFieldGet(this, _KupScrollOnHover_scrollEvent, "f"));
-    }
-    el.addEventListener('mousemove', __classPrivateFieldGet(this, _KupScrollOnHover_mousemoveEvent, "f"));
-    el.addEventListener('mouseleave', __classPrivateFieldGet(this, _KupScrollOnHover_mouseleaveEvent, "f"));
-    this.managedElements.add(el);
-  }
-  /**
-   * Removes the given element from ScrollOnHover watchlist.
-   * @param {KupScrollOnHoverElement} el - Element to unregister.
-   */
-  unregister(el) {
-    el.removeEventListener('scroll', __classPrivateFieldGet(this, _KupScrollOnHover_scrollEvent, "f"));
-    el.removeEventListener('mousemove', __classPrivateFieldGet(this, _KupScrollOnHover_mousemoveEvent, "f"));
-    el.removeEventListener('mouseleave', __classPrivateFieldGet(this, _KupScrollOnHover_mouseleaveEvent, "f"));
-    if (this.managedElements) {
-      this.managedElements.delete(el);
-    }
-  }
-  /**
-   * Returns whether an element was previously registered or not.
-   * @param {KupScrollOnHoverElement} el - Element to test.
-   * @returns {boolean} True if the element was registered.
-   */
-  isRegistered(el) {
-    return !this.managedElements ? false : this.managedElements.has(el);
-  }
-  /**
-   * When called, this function prepares the class for the scrolling process.
-   * @param {MouseEvent} event - The starter event, which should be a MouseMove event.
-   */
-  async start(event) {
-    const el = event.currentTarget;
-    el.scrollOnHover.rect = el.getBoundingClientRect();
-    el.scrollOnHover.x = event.clientX;
-    el.scrollOnHover.y = event.clientY;
-    __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").style.left = event.clientX + 'px';
-    __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").style.top = event.clientY + 'px';
-    if (el.scrollOnHover.active || __classPrivateFieldGet(this, _KupScrollOnHover_timeout, "f")) {
-      return;
+    /**
+     * Watches the given element in order to trigger the scroll on hover when conditions are met.
+     * Children nodes with the "hover-scrolling-child" will be watched and scrolled when el scrolls.
+     * @param {KupScrollOnHoverElement} el - Element to watch.
+     * @param {boolean} vertical - Enables vertical scroll.
+     * @param {KupScrollOnHoverPercentages} percentages - Sets how big is the area in which the scroll is enabled.
+     * @param {number} step - The amount in pixels for each scroll recursion.
+     */
+    register(el, vertical, percentages, step) {
+        if (!__classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f")) {
+            __classPrivateFieldGet(this, _KupScrollOnHover_instances, "m", _KupScrollOnHover_initArrows).call(this);
+        }
+        el.style.overflowX = 'auto';
+        el.scrollOnHover = {
+            active: false,
+            children: el.querySelectorAll('.hover-scrolling-child'),
+            percentages: percentages
+                ? percentages
+                : { back: 0.1, forward: 0.9 },
+            rect: null,
+            step: step,
+            vertical: vertical || null,
+            x: 0,
+            y: 0,
+        };
+        if (el.scrollOnHover.children) {
+            el.addEventListener('scroll', __classPrivateFieldGet(this, _KupScrollOnHover_scrollEvent, "f"));
+        }
+        el.addEventListener('mousemove', __classPrivateFieldGet(this, _KupScrollOnHover_mousemoveEvent, "f"));
+        el.addEventListener('mouseleave', __classPrivateFieldGet(this, _KupScrollOnHover_mouseleaveEvent, "f"));
+        this.managedElements.add(el);
     }
-    let trueHeight = el.clientHeight;
-    if (trueHeight === 0) {
-      trueHeight = el.offsetHeight;
+    /**
+     * Removes the given element from ScrollOnHover watchlist.
+     * @param {KupScrollOnHoverElement} el - Element to unregister.
+     */
+    unregister(el) {
+        el.removeEventListener('scroll', __classPrivateFieldGet(this, _KupScrollOnHover_scrollEvent, "f"));
+        el.removeEventListener('mousemove', __classPrivateFieldGet(this, _KupScrollOnHover_mousemoveEvent, "f"));
+        el.removeEventListener('mouseleave', __classPrivateFieldGet(this, _KupScrollOnHover_mouseleaveEvent, "f"));
+        if (this.managedElements) {
+            this.managedElements.delete(el);
+        }
     }
-    let trueWidth = el.clientWidth;
-    if (trueWidth === 0) {
-      trueWidth = el.offsetWidth;
+    /**
+     * Returns whether an element was previously registered or not.
+     * @param {KupScrollOnHoverElement} el - Element to test.
+     * @returns {boolean} True if the element was registered.
+     */
+    isRegistered(el) {
+        return !this.managedElements ? false : this.managedElements.has(el);
     }
-    if (el.scrollWidth > trueWidth + 10) {
-      if (trueWidth !== 0 && !el.scrollOnHover.active) {
-        const percRight = trueWidth - trueWidth * el.scrollOnHover.percentages.back;
-        const percLeft = trueWidth -
-          trueWidth * el.scrollOnHover.percentages.forward;
-        const elOffset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
-        const maxScrollLeft = el.scrollWidth - trueWidth;
-        const direction = elOffset < percLeft && el.scrollLeft !== 0
-          ? ScrollOnHoverDirection.LEFT
-          : elOffset > percRight &&
-            el.scrollLeft !== maxScrollLeft
-            ? ScrollOnHoverDirection.RIGHT
-            : null;
-        if (direction) {
-          for (let i = 0; i < 3; i++) {
-            if (direction === ScrollOnHoverDirection.LEFT) {
-              __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[i].classList.add('kup-activated');
+    /**
+     * When called, this function prepares the class for the scrolling process.
+     * @param {MouseEvent} event - The starter event, which should be a MouseMove event.
+     */
+    async start(event) {
+        const el = event.currentTarget;
+        el.scrollOnHover.rect = el.getBoundingClientRect();
+        el.scrollOnHover.x = event.clientX;
+        el.scrollOnHover.y = event.clientY;
+        __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").style.left = event.clientX + 'px';
+        __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").style.top = event.clientY + 'px';
+        if (el.scrollOnHover.active || __classPrivateFieldGet(this, _KupScrollOnHover_timeout, "f")) {
+            return;
+        }
+        let trueHeight = el.clientHeight;
+        if (trueHeight === 0) {
+            trueHeight = el.offsetHeight;
+        }
+        let trueWidth = el.clientWidth;
+        if (trueWidth === 0) {
+            trueWidth = el.offsetWidth;
+        }
+        if (el.scrollWidth > trueWidth + 10) {
+            if (trueWidth !== 0 && !el.scrollOnHover.active) {
+                const percRight = trueWidth - trueWidth * el.scrollOnHover.percentages.back;
+                const percLeft = trueWidth -
+                    trueWidth * el.scrollOnHover.percentages.forward;
+                const elOffset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
+                const maxScrollLeft = el.scrollWidth - trueWidth;
+                const direction = elOffset < percLeft && el.scrollLeft !== 0
+                    ? ScrollOnHoverDirection.LEFT
+                    : elOffset > percRight &&
+                        el.scrollLeft !== maxScrollLeft
+                        ? ScrollOnHoverDirection.RIGHT
+                        : null;
+                if (direction) {
+                    for (let i = 0; i < 3; i++) {
+                        if (direction === ScrollOnHoverDirection.LEFT) {
+                            __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[i].classList.add('kup-activated');
+                        }
+                        else {
+                            __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[i].classList.add('kup-activated');
+                        }
+                    }
+                    __classPrivateFieldSet(this, _KupScrollOnHover_timeout, setTimeout(() => {
+                        el.scrollOnHover.active = true;
+                        __classPrivateFieldSet(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
+                            dom.ketchup.scrollOnHover.run(el, maxScrollLeft, percRight, percLeft, direction);
+                        }), "f");
+                    }, this.delay), "f");
+                }
             }
-            else {
-              __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[i].classList.add('kup-activated');
+        }
+        if (el.scrollOnHover.vertical && el.scrollHeight > trueHeight + 10) {
+            if (trueHeight !== 0 && !el.scrollOnHover.active) {
+                const percBottom = trueHeight - trueHeight * el.scrollOnHover.percentages.back;
+                const percTop = trueHeight -
+                    trueHeight * el.scrollOnHover.percentages.forward;
+                const elOffset = el.scrollOnHover.y - el.scrollOnHover.rect.top;
+                const maxScrollTop = el.scrollHeight - trueHeight;
+                const direction = elOffset < percTop && el.scrollTop !== 0
+                    ? ScrollOnHoverDirection.TOP
+                    : elOffset > percBottom && el.scrollTop !== maxScrollTop
+                        ? ScrollOnHoverDirection.BOTTOM
+                        : null;
+                if (direction) {
+                    __classPrivateFieldSet(this, _KupScrollOnHover_timeout, setTimeout(() => {
+                        el.scrollOnHover.active = true;
+                        __classPrivateFieldSet(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
+                            dom.ketchup.scrollOnHover.run(el, maxScrollTop, percBottom, percTop, direction);
+                        }), "f");
+                    }, this.delay), "f");
+                }
             }
-          }
-          __classPrivateFieldSet(this, _KupScrollOnHover_timeout, setTimeout(() => {
-            el.scrollOnHover.active = true;
-            __classPrivateFieldSet(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
-              dom.ketchup.scrollOnHover.run(el, maxScrollLeft, percRight, percLeft, direction);
-            }), "f");
-          }, this.delay), "f");
         }
-      }
     }
-    if (el.scrollOnHover.vertical && el.scrollHeight > trueHeight + 10) {
-      if (trueHeight !== 0 && !el.scrollOnHover.active) {
-        const percBottom = trueHeight - trueHeight * el.scrollOnHover.percentages.back;
-        const percTop = trueHeight -
-          trueHeight * el.scrollOnHover.percentages.forward;
-        const elOffset = el.scrollOnHover.y - el.scrollOnHover.rect.top;
-        const maxScrollTop = el.scrollHeight - trueHeight;
-        const direction = elOffset < percTop && el.scrollTop !== 0
-          ? ScrollOnHoverDirection.TOP
-          : elOffset > percBottom && el.scrollTop !== maxScrollTop
-            ? ScrollOnHoverDirection.BOTTOM
-            : null;
-        if (direction) {
-          __classPrivateFieldSet(this, _KupScrollOnHover_timeout, setTimeout(() => {
-            el.scrollOnHover.active = true;
-            __classPrivateFieldSet(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
-              dom.ketchup.scrollOnHover.run(el, maxScrollTop, percBottom, percTop, direction);
-            }), "f");
-          }, this.delay), "f");
+    /**
+     * When called, this function stops the scrolling process.
+     * @param {KupScrollOnHoverElement} el - The scrolled element.
+     */
+    async stop(el) {
+        el.scrollOnHover.active = false;
+        cancelAnimationFrame(__classPrivateFieldGet(this, _KupScrollOnHover_rAF, "f"));
+        clearTimeout(__classPrivateFieldGet(this, _KupScrollOnHover_timeout, "f"));
+        __classPrivateFieldSet(this, _KupScrollOnHover_timeout, null, "f");
+        for (let i = 0; i < __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f").length; i++) {
+            __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[i].classList.remove('kup-activated');
+            __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[i].classList.remove('kup-animated');
+        }
+        for (let i = 0; i < __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f").length; i++) {
+            __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[i].classList.remove('kup-activated');
+            __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[i].classList.remove('kup-animated');
         }
-      }
-    }
-  }
-  /**
-   * When called, this function stops the scrolling process.
-   * @param {KupScrollOnHoverElement} el - The scrolled element.
-   */
-  async stop(el) {
-    el.scrollOnHover.active = false;
-    cancelAnimationFrame(__classPrivateFieldGet(this, _KupScrollOnHover_rAF, "f"));
-    clearTimeout(__classPrivateFieldGet(this, _KupScrollOnHover_timeout, "f"));
-    __classPrivateFieldSet(this, _KupScrollOnHover_timeout, null, "f");
-    for (let i = 0; i < __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f").length; i++) {
-      __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[i].classList.remove('kup-activated');
-      __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[i].classList.remove('kup-animated');
-    }
-    for (let i = 0; i < __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f").length; i++) {
-      __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[i].classList.remove('kup-activated');
-      __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[i].classList.remove('kup-animated');
-    }
-  }
-  /**
-   * The actual recursive scroll function.
-   * @param {KupScrollOnHoverElement} el - The scrolled element.
-   * @param {number} maxScrollLeft - Left coordinates to which the recursiveness must be stopped.
-   * @param {number} percForward - Range of the right (or bottom) area.
-   * @param {number} percBack - Range of the left (or top) scrollable area.
-   * @param {ScrollOnHoverDirection} direction - Direction of the scroll.
-   */
-  run(el, maxScrollLeft, percForward, percBack, direction) {
-    if (!el.scrollOnHover.active) {
-      this.stop(el);
-      return;
     }
-    let offset = 0;
-    switch (direction) {
-      case ScrollOnHoverDirection.BOTTOM:
-      case ScrollOnHoverDirection.TOP: {
-        offset = el.scrollOnHover.y - el.scrollOnHover.rect.top;
-        if (offset > percBack && offset < percForward) {
-          this.stop(el);
-          return;
+    /**
+     * The actual recursive scroll function.
+     * @param {KupScrollOnHoverElement} el - The scrolled element.
+     * @param {number} maxScrollLeft - Left coordinates to which the recursiveness must be stopped.
+     * @param {number} percForward - Range of the right (or bottom) area.
+     * @param {number} percBack - Range of the left (or top) scrollable area.
+     * @param {ScrollOnHoverDirection} direction - Direction of the scroll.
+     */
+    run(el, maxScrollLeft, percForward, percBack, direction) {
+        if (!el.scrollOnHover.active) {
+            this.stop(el);
+            return;
         }
-        break;
-      }
-      case ScrollOnHoverDirection.LEFT:
-      case ScrollOnHoverDirection.RIGHT: {
-        offset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
-        if (offset > percBack && offset < percForward) {
-          this.stop(el);
-          return;
+        let offset = 0;
+        switch (direction) {
+            case ScrollOnHoverDirection.BOTTOM:
+            case ScrollOnHoverDirection.TOP: {
+                offset = el.scrollOnHover.y - el.scrollOnHover.rect.top;
+                if (offset > percBack && offset < percForward) {
+                    this.stop(el);
+                    return;
+                }
+                break;
+            }
+            case ScrollOnHoverDirection.LEFT:
+            case ScrollOnHoverDirection.RIGHT: {
+                offset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
+                if (offset > percBack && offset < percForward) {
+                    this.stop(el);
+                    return;
+                }
+                break;
+            }
         }
-        break;
-      }
-    }
-    if (direction === ScrollOnHoverDirection.RIGHT &&
-      percForward > offset) {
-      this.stop(el);
-      return;
-    }
-    if (direction === ScrollOnHoverDirection.LEFT && percBack < offset) {
-      this.stop(el);
-      return;
-    }
-    if (direction === ScrollOnHoverDirection.TOP && percBack < offset) {
-      this.stop(el);
-      return;
-    }
-    if (direction === ScrollOnHoverDirection.BOTTOM &&
-      percForward > offset) {
-      this.stop(el);
-      return;
-    }
-    if (el.scrollOnHover.children) {
-      this.updateChildren(el);
-    }
-    let arrow;
-    switch (direction) {
-      case ScrollOnHoverDirection.BOTTOM: {
-        arrow = [];
-        if (el.scrollTop === maxScrollLeft) {
-          this.stop(el);
-          return;
+        if (direction === ScrollOnHoverDirection.RIGHT &&
+            percForward > offset) {
+            this.stop(el);
+            return;
         }
-        el.scrollTop += el.scrollOnHover.step
-          ? el.scrollOnHover.step
-          : this.step;
-        break;
-      }
-      case ScrollOnHoverDirection.LEFT: {
-        arrow = __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f");
-        if (el.scrollLeft === 0) {
-          this.stop(el);
-          return;
+        if (direction === ScrollOnHoverDirection.LEFT && percBack < offset) {
+            this.stop(el);
+            return;
         }
-        el.scrollLeft -= el.scrollOnHover.step
-          ? el.scrollOnHover.step
-          : this.step;
-        break;
-      }
-      case ScrollOnHoverDirection.RIGHT: {
-        arrow = __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f");
-        if (el.scrollLeft === maxScrollLeft) {
-          this.stop(el);
-          return;
+        if (direction === ScrollOnHoverDirection.TOP && percBack < offset) {
+            this.stop(el);
+            return;
         }
-        el.scrollLeft += el.scrollOnHover.step
-          ? el.scrollOnHover.step
-          : this.step;
-        break;
-      }
-      case ScrollOnHoverDirection.TOP: {
-        arrow = [];
-        if (el.scrollTop === 0) {
-          this.stop(el);
-          return;
+        if (direction === ScrollOnHoverDirection.BOTTOM &&
+            percForward > offset) {
+            this.stop(el);
+            return;
         }
-        el.scrollTop -= el.scrollOnHover.step
-          ? el.scrollOnHover.step
-          : this.step;
-        break;
-      }
-    }
-    for (let i = 0; i < arrow.length; i++) {
-      arrow[i].classList.add('kup-animated');
+        if (el.scrollOnHover.children) {
+            this.updateChildren(el);
+        }
+        let arrow;
+        switch (direction) {
+            case ScrollOnHoverDirection.BOTTOM: {
+                arrow = [];
+                if (el.scrollTop === maxScrollLeft) {
+                    this.stop(el);
+                    return;
+                }
+                el.scrollTop += el.scrollOnHover.step
+                    ? el.scrollOnHover.step
+                    : this.step;
+                break;
+            }
+            case ScrollOnHoverDirection.LEFT: {
+                arrow = __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f");
+                if (el.scrollLeft === 0) {
+                    this.stop(el);
+                    return;
+                }
+                el.scrollLeft -= el.scrollOnHover.step
+                    ? el.scrollOnHover.step
+                    : this.step;
+                break;
+            }
+            case ScrollOnHoverDirection.RIGHT: {
+                arrow = __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f");
+                if (el.scrollLeft === maxScrollLeft) {
+                    this.stop(el);
+                    return;
+                }
+                el.scrollLeft += el.scrollOnHover.step
+                    ? el.scrollOnHover.step
+                    : this.step;
+                break;
+            }
+            case ScrollOnHoverDirection.TOP: {
+                arrow = [];
+                if (el.scrollTop === 0) {
+                    this.stop(el);
+                    return;
+                }
+                el.scrollTop -= el.scrollOnHover.step
+                    ? el.scrollOnHover.step
+                    : this.step;
+                break;
+            }
+        }
+        for (let i = 0; i < arrow.length; i++) {
+            arrow[i].classList.add('kup-animated');
+        }
+        __classPrivateFieldSet(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
+            dom.ketchup.scrollOnHover.run(el, maxScrollLeft, percForward, percBack, direction);
+        }), "f");
     }
-    __classPrivateFieldSet(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
-      dom.ketchup.scrollOnHover.run(el, maxScrollLeft, percForward, percBack, direction);
-    }), "f");
-  }
-  /**
-   * Scrolls children of the element having the "hover-scrolling-child" class
-   * @param {KupScrollOnHoverElement} el - The scrolled element.
-   */
-  updateChildren(el) {
-    for (let i = 0; i < el.scrollOnHover.children.length; i++) {
-      el.scrollOnHover.children[i].scrollLeft = el.scrollLeft;
+    /**
+     * Scrolls children of the element having the "hover-scrolling-child" class
+     * @param {KupScrollOnHoverElement} el - The scrolled element.
+     */
+    updateChildren(el) {
+        for (let i = 0; i < el.scrollOnHover.children.length; i++) {
+            el.scrollOnHover.children[i].scrollLeft = el.scrollLeft;
+        }
     }
-  }
 }
 _KupScrollOnHover_arrowsContainer = new WeakMap(), _KupScrollOnHover_leftArrows = new WeakMap(), _KupScrollOnHover_rightArrows = new WeakMap(), _KupScrollOnHover_scrollEvent = new WeakMap(), _KupScrollOnHover_mousemoveEvent = new WeakMap(), _KupScrollOnHover_mouseleaveEvent = new WeakMap(), _KupScrollOnHover_rAF = new WeakMap(), _KupScrollOnHover_timeout = new WeakMap(), _KupScrollOnHover_instances = new WeakSet(), _KupScrollOnHover_initArrows = function _KupScrollOnHover_initArrows() {
-  __classPrivateFieldSet(this, _KupScrollOnHover_arrowsContainer, document.createElement('div'), "f");
-  __classPrivateFieldSet(this, _KupScrollOnHover_leftArrows, [], "f");
-  __classPrivateFieldSet(this, _KupScrollOnHover_rightArrows, [], "f");
-  __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").id = 'kup-scrolling-arrows';
-  for (let index = 1; index < 4; index++) {
-    const arrow = document.createElement('div');
-    arrow.setAttribute('class', 'kup-left-scrolling-arrow kup-arrow-' + index);
-    __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f").push(arrow);
-  }
-  for (let index = 1; index < 4; index++) {
-    const arrow = document.createElement('div');
-    arrow.setAttribute('class', 'kup-right-scrolling-arrow kup-arrow-' + index);
-    __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f").push(arrow);
-  }
-  __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").append(__classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[2], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[2]);
-  this.container = document.createElement('div');
-  this.container.setAttribute('kup-scroll-on-hover', '');
-  this.container.appendChild(__classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f"));
-  document.body.appendChild(this.container);
+    __classPrivateFieldSet(this, _KupScrollOnHover_arrowsContainer, document.createElement('div'), "f");
+    __classPrivateFieldSet(this, _KupScrollOnHover_leftArrows, [], "f");
+    __classPrivateFieldSet(this, _KupScrollOnHover_rightArrows, [], "f");
+    __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").id = 'kup-scrolling-arrows';
+    for (let index = 1; index < 4; index++) {
+        const arrow = document.createElement('div');
+        arrow.setAttribute('class', 'kup-left-scrolling-arrow kup-arrow-' + index);
+        __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f").push(arrow);
+    }
+    for (let index = 1; index < 4; index++) {
+        const arrow = document.createElement('div');
+        arrow.setAttribute('class', 'kup-right-scrolling-arrow kup-arrow-' + index);
+        __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f").push(arrow);
+    }
+    __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").append(__classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[2], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[2]);
+    this.container = document.createElement('div');
+    this.container.setAttribute('kup-scroll-on-hover', '');
+    this.container.appendChild(__classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f"));
+    document.body.appendChild(this.container);
 };