slick-components 17.0.18 → 17.0.20

package/fesm2022/slick-components.mjs

@@ -23,7 +23,7 @@ class SlickInitParams {
     }
 }
 class SlickInitService {
-    static { this.version = "17.0.18"; }
+    static { this.version = "17.0.20"; }
     constructor() { }
     static init(initParams) {
         console.info(`Slick Components Version ${SlickInitService.version}`);
@@ -3457,6 +3457,8 @@ class SlickDropListDirective {
         this.fnMouseDown = (e) => this.mouseDown(e);
         this.fnMouseMove = (e) => this.mouseMove(e);
         this.fnMouseUp = () => this.mouseUp();
+        this.fnMouseOver = (e) => this.mouseOver(e);
+        this.isScrolling = false;
         this.el = el.nativeElement;
         this.el.setAttribute("drop-list-uuid", this.uuid);
     }
@@ -3468,6 +3470,18 @@ class SlickDropListDirective {
         document.removeEventListener("mousedown", this.fnMouseDown, true);
         document.removeEventListener("mousemove", this.fnMouseMove, true);
         document.removeEventListener("mouseup", this.fnMouseUp, true);
+        document.removeEventListener("mouseover", this.fnMouseOver, true);
+    }
+    mouseOver(e) {
+        const currentTarget = e.target;
+        // Find the parent with 'drop-list-uuid' attribute and check if it matches
+        const parent = SlickUtilsService.findParentByAttr(currentTarget, 'drop-list-uuid', this.uuid);
+        if (!parent) {
+            if (this.isScrolling) {
+                this.stopAutoScrolling();
+                return;
+            }
+        }
     }
     async mouseDown(e, target = null) {
         this.isAdding = false;
@@ -3476,6 +3490,7 @@ class SlickDropListDirective {
             return;
         document.removeEventListener("mouseup", this.fnMouseUp, true);
         document.removeEventListener("mousemove", this.fnMouseMove, true);
+        document.removeEventListener("mouseover", this.fnMouseOver, true);
         document.addEventListener("mouseup", this.fnMouseUp, true);
         document.addEventListener("mousemove", this.fnMouseMove, true);
         if (!target)
@@ -3487,6 +3502,7 @@ class SlickDropListDirective {
         if (grabEls.length > 0 && !SlickUtilsService.findParent(target, "slick-drop-list-grab"))
             return true;
         this.isMoving = true;
+        document.addEventListener("mouseover", this.fnMouseOver, true);
         const dropListItem = SlickUtilsService.findParent(target, "slick-drop-list-item");
         if (!dropListItem) {
             console.error("Can't find item element");
@@ -3530,6 +3546,23 @@ class SlickDropListDirective {
             this.onSlickDropListEnter.emit({ idx: idx, ready: this.newItemReady.bind(this) });
             return;
         }
+        // Handle auto-scrolling
+        this.handleAutoScroll(e);
+        // Handle redrawing selected item
+        this.handleRedraw(e);
+    }
+    getScrollableParent(element) {
+        let parent = element.parentElement;
+        while (parent) {
+            const overflowY = window.getComputedStyle(parent).overflowY;
+            if (overflowY === 'auto' || overflowY === 'scroll') {
+                return parent; // Found a scrollable parent
+            }
+            parent = parent.parentElement;
+        }
+        return null; // No scrollable parent found
+    }
+    handleRedraw(e) {
         // Find which element the mouse is over
         const dropListItems = this.el.querySelectorAll(".slick-drop-list-item");
         for (let i = 0; i < dropListItems.length; i++) {
@@ -3551,9 +3584,62 @@ class SlickDropListDirective {
             }
         }
     }
+    handleAutoScroll(e) {
+        const scrollMargin = 50; // Distance from the top/bottom to trigger scrolling
+        const scrollableParent = this.getScrollableParent(e.target);
+        if (!scrollableParent)
+            return;
+        const parentRect = scrollableParent.getBoundingClientRect();
+        const offsetY = e.clientY - parentRect.top; // Mouse position relative to container
+        const scrollTop = scrollableParent.scrollTop;
+        const maxScroll = scrollableParent.scrollHeight - scrollableParent.clientHeight;
+        // Determine if scrolling should occur
+        let scrollDirection = 0;
+        if (offsetY < scrollMargin && scrollTop > 0) {
+            scrollDirection = -1; // Scroll up
+        }
+        else if (offsetY > parentRect.height - scrollMargin && scrollTop < maxScroll) {
+            scrollDirection = 1; // Scroll down
+        }
+        if (scrollDirection !== 0) {
+            if (!this.isScrolling) {
+                this.isScrolling = true;
+                this.startAutoScrolling(scrollableParent, e, scrollDirection);
+            }
+        }
+        else {
+            this.stopAutoScrolling();
+        }
+    }
+    startAutoScrolling(scrollableParent, e, direction) {
+        const scrollSpeed = 10; // Base scroll speed
+        const scroll = () => {
+            if (!this.isScrolling)
+                return;
+            const scrollTop = scrollableParent.scrollTop;
+            const maxScroll = scrollableParent.scrollHeight - scrollableParent.clientHeight;
+            // Stop scrolling if we've reached the limits
+            if ((direction === -1 && scrollTop <= 0) || (direction === 1 && scrollTop >= maxScroll)) {
+                this.stopAutoScrolling();
+                return;
+            }
+            // Perform the scroll
+            scrollableParent.scrollBy(0, direction * scrollSpeed);
+            // Continue scrolling if the mouse is still near the edge
+            requestAnimationFrame(scroll);
+            // Keep redrawing while we are scrolling so it doesnt look laggy
+            this.handleRedraw(e);
+        };
+        requestAnimationFrame(scroll);
+    }
+    stopAutoScrolling() {
+        this.isScrolling = false;
+    }
     mouseUp() {
         document.removeEventListener("mouseup", this.fnMouseUp, true);
         document.removeEventListener("mousemove", this.fnMouseMove, true);
+        document.removeEventListener("mouseover", this.fnMouseOver, true);
+        this.stopAutoScrolling();
         if (!this.isMoving)
             return;
         this.isMoving = false;