@sme.up/ketchup 8.0.2 → 8.2.0

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

@@ -1,334 +1,334 @@
-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;
-};
-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);
-};
-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';
-const dom = document.documentElement;
-/**
- * Lets the user scroll an element's overflow by hovering with the mouse on its left/right edge.
- * @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);
-    }
-    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;
-    }
-    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");
-        }
-      }
-    }
-    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');
-    }
-  }
-  /**
-   * 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;
-        }
-        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;
-      }
-    }
-    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;
-        }
-        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");
-  }
-  /**
-   * 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);
-};
+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;
+};
+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);
+};
+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';
+const dom = document.documentElement;
+/**
+ * Lets the user scroll an element's overflow by hovering with the mouse on its left/right edge.
+ * @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);
+    }
+    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;
+    }
+    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");
+        }
+      }
+    }
+    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');
+    }
+  }
+  /**
+   * 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;
+        }
+        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;
+      }
+    }
+    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;
+        }
+        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");
+  }
+  /**
+   * 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);
+};