@ship-ui/core 0.22.16 → 0.22.17

package/fesm2022/ship-ui-core-ship-sortable.mjs

@@ -1,13 +1,27 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, ElementRef, Renderer2, signal, input, model, output, effect, HostListener, Directive, computed } from '@angular/core';
+import { Injectable, inject, DOCUMENT, ElementRef, Renderer2, signal, input, model, output, effect, HostListener, Directive, computed } from '@angular/core';
 import { isObservable, firstValueFrom } from 'rxjs';
 
-var _a;
+class ShipSortableService {
+    constructor() {
+        this.activeSource = null;
+        this.activeDraggedElement = null;
+        this.activeTarget = null;
+        this.activeInstances = new Set();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSortableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSortableService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSortableService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 function createSortableManager(signals, config) {
     const isSingle = typeof signals === 'function';
     return {
         async drop(event) {
-            // 1. Await API Authorization (RxJS or Promises)
             if (config?.onBeforeDrop) {
                 const result = config.onBeforeDrop(event);
                 let accept = false;
@@ -21,12 +35,10 @@ function createSortableManager(signals, config) {
                     accept = result;
                 }
                 if (!accept)
-                    return; // Drop rejected, UI stays exactly as it was
+                    return;
             }
-            // 2. Perform UI Signal Update
             const isCrossDrop = event.previousContainer !== event.container;
             if (!isCrossDrop) {
-                // Internal Reorder (moveIndex)
                 let targetSignal;
                 if (isSingle) {
                     targetSignal = signals;
@@ -40,7 +52,6 @@ function createSortableManager(signals, config) {
                 }
             }
             else {
-                // Cross DropTransfer
                 if (isSingle) {
                     console.warn('Cross drops require a dictionary of signals in createSortableManager');
                     return;
@@ -66,6 +77,7 @@ function createSortableManager(signals, config) {
 }
 class ShipSortable {
     constructor() {
+        this.#sortableService = inject(ShipSortableService);
         this.#document = inject(DOCUMENT);
         this.#selfEl = inject((ElementRef));
         this.#renderer = inject(Renderer2);
@@ -79,6 +91,10 @@ class ShipSortable {
         ...(ngDevMode ? [{ debugName: "sortingMode" }] : /* istanbul ignore next */ []));
         this.treeItems = model([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "treeItems" }] : /* istanbul ignore next */ []));
+        this.touchEnabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touchEnabled" }] : /* istanbul ignore next */ []));
+        this.touchActivation = input('longpress', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touchActivation" }] : /* istanbul ignore next */ []));
         this.sortDrop = output();
         this.afterDrop = output();
         this.crossDrop = output();
@@ -98,6 +114,13 @@ class ShipSortable {
         this.abortController = null;
         this.isDropping = false;
         this.isCrossTarget = false;
+        this.touchDragTimer = null;
+        this.touchStartCoordinates = null;
+        this.isTouchDragging = false;
+        this.touchGhostEl = null;
+        this.touchOffset = { x: 0, y: 0 };
+        this.#boundTouchMove = this.onTouchMove.bind(this);
+        this.#boundTouchEnd = this.onTouchEnd.bind(this);
         this.draggingEffect = effect(() => {
             if (this.sortingMode() === 'tree') {
                 return;
@@ -159,6 +182,12 @@ class ShipSortable {
             for (const el of els) {
                 el.addEventListener('dragstart', (e) => this.dragStart(e), { signal: this.abortController.signal });
                 el.addEventListener('dragend', () => this.dragEnd(), { signal: this.abortController.signal });
+                if (this.touchEnabled()) {
+                    el.addEventListener('touchstart', (e) => this.onTouchStart(e, el), {
+                        signal: this.abortController.signal,
+                        passive: false,
+                    });
+                }
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "draggablesEffect" }] : /* istanbul ignore next */ []));
@@ -171,11 +200,11 @@ class ShipSortable {
                         if (this.isDropping) {
                             this.isDropping = false;
                             this.#cleanupDragState();
-                            if (_a.activeTarget === this) {
-                                _a.activeTarget = null;
+                            if (this.#sortableService.activeTarget === this) {
+                                this.#sortableService.activeTarget = null;
                             }
-                            if (_a.activeSource === this) {
-                                _a.activeSource = null;
+                            if (this.#sortableService.activeSource === this) {
+                                this.#sortableService.activeSource = null;
                             }
                         }
                     }
@@ -183,13 +212,13 @@ class ShipSortable {
             })
             : undefined;
     }
+    #sortableService;
     #document;
     #selfEl;
     #renderer;
     #crossSpacerEl;
-    static { this.activeSource = null; }
-    static { this.activeDraggedElement = null; }
-    static { this.activeTarget = null; }
+    #boundTouchMove;
+    #boundTouchEnd;
     getIndexOfElement(element) {
         return this.dragables().findIndex((el) => el === element);
     }
@@ -210,9 +239,9 @@ class ShipSortable {
                 }
             }
             e.dataTransfer.effectAllowed = 'move';
-            _a.activeSource = this;
-            _a.activeDraggedElement = draggedElement;
-            _a.activeTarget = this;
+            this.#sortableService.activeSource = this;
+            this.#sortableService.activeDraggedElement = draggedElement;
+            this.#sortableService.activeTarget = this;
             this.isCrossTarget = false;
             const containerRect = this.#selfEl.nativeElement.getBoundingClientRect();
             const container = this.#selfEl.nativeElement;
@@ -255,28 +284,35 @@ class ShipSortable {
         }
     }
     ngOnInit() {
+        this.#sortableService.activeInstances.add(this);
         if (typeof MutationObserver !== 'undefined') {
             this.#dragableObserver.observe(this.#selfEl.nativeElement, { childList: true });
         }
     }
     dragEnter(e) {
-        if (!_a.activeSource || _a.activeSource === this)
+        this.processDragEnter();
+    }
+    processDragEnter() {
+        if (!this.#sortableService.activeSource || this.#sortableService.activeSource === this)
             return;
-        const sourceGroup = _a.activeSource.sortableGroup();
+        const sourceGroup = this.#sortableService.activeSource.sortableGroup();
         const currentGroup = this.sortableGroup();
-        const sourceManager = _a.activeSource.shSortable();
+        const sourceManager = this.#sortableService.activeSource.shSortable();
         const currentManager = this.shSortable();
         const isSameGroup = !!(sourceGroup && currentGroup && sourceGroup === currentGroup);
         const isSameManager = !!(sourceManager?.drop && currentManager?.drop && sourceManager === currentManager);
         if (isSameGroup || isSameManager) {
-            _a.activeTarget = this;
-            _a.activeSource.dragToIndex.set(-1);
+            if (this.#sortableService.activeTarget && this.#sortableService.activeTarget !== this && this.#sortableService.activeTarget !== this.#sortableService.activeSource) {
+                this.#sortableService.activeTarget.processDragLeave(0, 0, null, true);
+            }
+            this.#sortableService.activeTarget = this;
+            this.#sortableService.activeSource.dragToIndex.set(-1);
             // Setup Target Placeholder if we are just entering
             if (!this.isCrossTarget) {
                 this.isCrossTarget = true;
                 this.#renderer.addClass(this.#selfEl.nativeElement, 'dragging');
                 // Compute cross-target positions by temporarily appending the active ghost to measure layout flow
-                const sourceElement = _a.activeDraggedElement;
+                const sourceElement = this.#sortableService.activeDraggedElement;
                 const tempElement = sourceElement.cloneNode(true);
                 this.#renderer.setStyle(tempElement, 'transform', '');
                 // Ensure it doesn't have the original ghost state yet to measure flow without its potential transition scaling
@@ -307,39 +343,47 @@ class ShipSortable {
         }
     }
     dragLeave(e) {
-        if (!_a.activeSource || _a.activeSource === this)
+        this.processDragLeave(e.clientX, e.clientY, e.relatedTarget);
+    }
+    processDragLeave(clientX, clientY, relatedTarget, force = false) {
+        if (!this.#sortableService.activeSource || this.#sortableService.activeSource === this)
             return;
-        if (e.relatedTarget) {
-            if (this.#selfEl.nativeElement.contains(e.relatedTarget)) {
-                return;
+        if (!force) {
+            if (relatedTarget) {
+                if (this.#selfEl.nativeElement.contains(relatedTarget)) {
+                    return;
+                }
+            }
+            else {
+                const rect = this.#selfEl.nativeElement.getBoundingClientRect();
+                const isOutside = clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom;
+                if (!isOutside)
+                    return;
             }
-        }
-        else {
-            const rect = this.#selfEl.nativeElement.getBoundingClientRect();
-            const isOutside = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
-            if (!isOutside)
-                return;
         }
         if (this.isCrossTarget) {
             this.#cleanupDragState();
-            if (_a.activeTarget === this) {
-                _a.activeTarget = _a.activeSource;
+            if (this.#sortableService.activeTarget === this) {
+                this.#sortableService.activeTarget = this.#sortableService.activeSource;
             }
         }
     }
     dragOver(e) {
         e.preventDefault();
         e.dataTransfer.dropEffect = 'move';
-        if (_a.activeTarget !== this)
+        this.processDragOver(e.clientX, e.clientY, e.target);
+    }
+    processDragOver(clientX, clientY, targetElementUnderTouch) {
+        if (this.#sortableService.activeTarget !== this)
             return;
         if (this.sortingMode() === 'tree') {
-            const targetElement = e.target;
-            const hoveredDraggable = targetElement.closest('[draggable]');
+            const targetElement = targetElementUnderTouch || this.#document.elementFromPoint(clientX, clientY);
+            const hoveredDraggable = targetElement?.closest('[draggable]');
             if (hoveredDraggable && this.#selfEl.nativeElement.contains(hoveredDraggable)) {
                 const targetIdx = this.getIndexOfElement(hoveredDraggable);
                 if (targetIdx !== -1) {
                     const rect = hoveredDraggable.getBoundingClientRect();
-                    const relativeY = (e.clientY - rect.top) / rect.height;
+                    const relativeY = (clientY - rect.top) / rect.height;
                     const isFolder = hoveredDraggable.hasAttribute('sortable-folder') ||
                         hoveredDraggable.getAttribute('sortable-folder') === 'true' ||
                         hoveredDraggable.hasAttribute('sortable-dir') ||
@@ -385,8 +429,8 @@ class ShipSortable {
         const container = this.#selfEl.nativeElement;
         const containerRect = container.getBoundingClientRect();
         // Convert viewport coordinates to container-relative coordinate space
-        const mouseX = e.clientX - containerRect.left - container.clientLeft + container.scrollLeft;
-        const mouseY = e.clientY - containerRect.top - container.clientTop + container.scrollTop;
+        const mouseX = clientX - containerRect.left - container.clientLeft + container.scrollLeft;
+        const mouseY = clientY - containerRect.top - container.clientTop + container.scrollTop;
         let closestSlotIndex = -1;
         let minDistance = Infinity;
         const positions = this.initialPositions();
@@ -404,6 +448,156 @@ class ShipSortable {
             this.dragToIndex.set(closestSlotIndex);
         }
     }
+    onTouchStart(e, el) {
+        if (!this.touchEnabled() || this.touchActivation() === 'none') {
+            return;
+        }
+        const touch = e.touches[0];
+        const targetEl = touch.target;
+        const isSortingHandle = targetEl.hasAttribute('sort-handle') || targetEl.closest('[sort-handle]') !== null;
+        const hasHandle = el.querySelector('[sort-handle]') !== null;
+        if (hasHandle && !isSortingHandle) {
+            return;
+        }
+        if (this.touchActivation() === 'handle') {
+            if (!isSortingHandle) {
+                return;
+            }
+            e.preventDefault();
+            this.startTouchDrag(touch, el);
+        }
+        else if (this.touchActivation() === 'longpress') {
+            this.touchStartCoordinates = { x: touch.clientX, y: touch.clientY };
+            this.#document.addEventListener('touchmove', this.#boundTouchMove, { passive: false });
+            this.#document.addEventListener('touchend', this.#boundTouchEnd, { passive: false });
+            this.#document.addEventListener('touchcancel', this.#boundTouchEnd, { passive: false });
+            this.touchDragTimer = setTimeout(() => {
+                this.startTouchDrag(touch, el);
+            }, 300);
+        }
+    }
+    startTouchDrag(touch, el) {
+        this.isTouchDragging = true;
+        this.#sortableService.activeSource = this;
+        this.#sortableService.activeDraggedElement = el;
+        this.#sortableService.activeTarget = this;
+        this.isCrossTarget = false;
+        const containerRect = this.#selfEl.nativeElement.getBoundingClientRect();
+        const container = this.#selfEl.nativeElement;
+        const positions = Array.from(this.dragables()).map((item) => {
+            const rect = item.getBoundingClientRect();
+            return {
+                x: rect.left - containerRect.left - container.clientLeft + container.scrollLeft,
+                y: rect.top - containerRect.top - container.clientTop + container.scrollTop,
+                width: rect.width,
+                height: rect.height,
+            };
+        });
+        this.initialPositions.set(positions);
+        const rect = el.getBoundingClientRect();
+        this.touchOffset = {
+            x: touch.clientX - rect.left,
+            y: touch.clientY - rect.top,
+        };
+        const ghost = el.cloneNode(true);
+        ghost.style.position = 'fixed';
+        ghost.style.width = `${rect.width}px`;
+        ghost.style.height = `${rect.height}px`;
+        ghost.style.left = `${rect.left}px`;
+        ghost.style.top = `${rect.top}px`;
+        ghost.style.pointerEvents = 'none';
+        ghost.style.zIndex = '9999';
+        ghost.style.opacity = '0.8';
+        ghost.style.boxShadow = '0 5px 15px rgba(0,0,0,0.3)';
+        ghost.style.margin = '0';
+        ghost.style.transform = '';
+        ghost.classList.add('sortable-ghost-touch');
+        this.#document.body.appendChild(ghost);
+        this.touchGhostEl = ghost;
+        const draggedElementIndex = this.getIndexOfElement(el);
+        this.dragStartIndex.set(draggedElementIndex);
+        this.dragToIndex.set(draggedElementIndex);
+        this.#renderer.addClass(el, 'sortable-ghost');
+        this.#renderer.addClass(this.#selfEl.nativeElement, 'dragging');
+        if (this.touchActivation() === 'handle') {
+            this.touchStartCoordinates = { x: touch.clientX, y: touch.clientY };
+            this.#document.addEventListener('touchmove', this.#boundTouchMove, { passive: false });
+            this.#document.addEventListener('touchend', this.#boundTouchEnd, { passive: false });
+            this.#document.addEventListener('touchcancel', this.#boundTouchEnd, { passive: false });
+        }
+    }
+    onTouchMove(e) {
+        const touch = e.touches[0];
+        const clientX = touch.clientX;
+        const clientY = touch.clientY;
+        if (!this.isTouchDragging) {
+            if (this.touchStartCoordinates) {
+                const dx = clientX - this.touchStartCoordinates.x;
+                const dy = clientY - this.touchStartCoordinates.y;
+                if (Math.hypot(dx, dy) > 8) {
+                    this.cancelTouchDrag();
+                }
+            }
+            return;
+        }
+        e.preventDefault();
+        if (this.touchGhostEl) {
+            const x = clientX - this.touchOffset.x;
+            const y = clientY - this.touchOffset.y;
+            this.touchGhostEl.style.left = `${x}px`;
+            this.touchGhostEl.style.top = `${y}px`;
+        }
+        const elementUnderTouch = this.#document.elementFromPoint(clientX, clientY);
+        let targetInstance = null;
+        if (elementUnderTouch) {
+            for (const instance of this.#sortableService.activeInstances) {
+                if (instance.#selfEl.nativeElement === elementUnderTouch || instance.#selfEl.nativeElement.contains(elementUnderTouch)) {
+                    targetInstance = instance;
+                    break;
+                }
+            }
+        }
+        if (targetInstance) {
+            if (this.#sortableService.activeTarget !== targetInstance) {
+                if (this.#sortableService.activeTarget) {
+                    this.#sortableService.activeTarget.processDragLeave(clientX, clientY, null, true);
+                }
+                this.#sortableService.activeTarget = targetInstance;
+                targetInstance.processDragEnter();
+            }
+            this.#sortableService.activeTarget.processDragOver(clientX, clientY, elementUnderTouch);
+        }
+        else {
+            if (this.#sortableService.activeTarget && this.#sortableService.activeTarget !== this.#sortableService.activeSource) {
+                this.#sortableService.activeTarget.processDragLeave(clientX, clientY, null, true);
+            }
+        }
+    }
+    onTouchEnd(e) {
+        const wasDragging = this.isTouchDragging;
+        this.cancelTouchDrag();
+        if (wasDragging) {
+            this.isTouchDragging = false;
+            if (this.#sortableService.activeTarget) {
+                this.#sortableService.activeTarget.drop();
+            }
+            if (this.touchGhostEl) {
+                this.touchGhostEl.remove();
+                this.touchGhostEl = null;
+            }
+            this.dragEnd();
+        }
+    }
+    cancelTouchDrag() {
+        if (this.touchDragTimer) {
+            clearTimeout(this.touchDragTimer);
+            this.touchDragTimer = null;
+        }
+        this.touchStartCoordinates = null;
+        this.#document.removeEventListener('touchmove', this.#boundTouchMove);
+        this.#document.removeEventListener('touchend', this.#boundTouchEnd);
+        this.#document.removeEventListener('touchcancel', this.#boundTouchEnd);
+    }
     #clearTreeHoverClasses() {
         const dragables = this.dragables();
         for (const el of dragables) {
@@ -432,17 +626,17 @@ class ShipSortable {
         return targetVisualIndex;
     }
     drop() {
-        if (!_a.activeSource)
+        if (!this.#sortableService.activeSource)
             return;
         // Immediately kill drag transitions before any signal updates
-        this.#renderer.removeClass(_a.activeSource.#selfEl.nativeElement, 'dragging');
+        this.#renderer.removeClass(this.#sortableService.activeSource.#selfEl.nativeElement, 'dragging');
         this.#renderer.removeClass(this.#selfEl.nativeElement, 'dragging');
         if (this.sortingMode() === 'tree') {
             this.isDropping = true;
-            if (_a.activeSource !== this) {
-                _a.activeSource.isDropping = true;
+            if (this.#sortableService.activeSource !== this) {
+                this.#sortableService.activeSource.isDropping = true;
             }
-            const prevIdx = _a.activeSource.dragStartIndex();
+            const prevIdx = this.#sortableService.activeSource.dragStartIndex();
             const currIdx = this.dragToIndex();
             const pos = this.treeHoverPosition();
             if (prevIdx !== -1 && currIdx !== -1 && pos) {
@@ -460,12 +654,12 @@ class ShipSortable {
                 }
             }
             this.#cleanupDragState();
-            if (_a.activeSource !== this) {
-                _a.activeSource.#cleanupDragState();
+            if (this.#sortableService.activeSource !== this) {
+                this.#sortableService.activeSource.#cleanupDragState();
             }
             return;
         }
-        if (_a.activeSource === this) {
+        if (this.#sortableService.activeSource === this) {
             // Internal Drop
             if (this.dragStartIndex() !== -1 && this.dragToIndex() !== -1 && this.dragStartIndex() !== this.dragToIndex()) {
                 this.isDropping = true;
@@ -484,14 +678,14 @@ class ShipSortable {
                 }
             }
         }
-        else if (_a.activeTarget === this && this.isCrossTarget) {
+        else if (this.#sortableService.activeTarget === this && this.isCrossTarget) {
             // Cross Drop
             this.isDropping = true;
-            _a.activeSource.isDropping = true;
+            this.#sortableService.activeSource.isDropping = true;
             const event = {
-                previousContainer: _a.activeSource,
+                previousContainer: this.#sortableService.activeSource,
                 container: this,
-                previousIndex: _a.activeSource.dragStartIndex(),
+                previousIndex: this.#sortableService.activeSource.dragStartIndex(),
                 currentIndex: this.dragToIndex(),
             };
             if (this.shSortable()?.drop) {
@@ -500,26 +694,26 @@ class ShipSortable {
             else {
                 this.sortDrop.emit(event);
                 this.crossDrop.emit({
-                    previousContainer: _a.activeSource,
+                    previousContainer: this.#sortableService.activeSource,
                     currentContainer: this,
-                    previousIndex: _a.activeSource.dragStartIndex(),
+                    previousIndex: this.#sortableService.activeSource.dragStartIndex(),
                     currentIndex: this.dragToIndex(),
                 });
             }
         }
     }
     dragEnd() {
-        if (_a.activeSource) {
-            _a.activeSource.#renderer.removeClass(_a.activeSource.#selfEl.nativeElement, 'dragging');
-            _a.activeSource.#cleanupDragState();
+        if (this.#sortableService.activeSource) {
+            this.#sortableService.activeSource.#renderer.removeClass(this.#sortableService.activeSource.#selfEl.nativeElement, 'dragging');
+            this.#sortableService.activeSource.#cleanupDragState();
         }
-        if (_a.activeTarget && _a.activeTarget !== _a.activeSource) {
-            _a.activeTarget.#renderer.removeClass(_a.activeTarget.#selfEl.nativeElement, 'dragging');
-            _a.activeTarget.#cleanupDragState();
+        if (this.#sortableService.activeTarget && this.#sortableService.activeTarget !== this.#sortableService.activeSource) {
+            this.#sortableService.activeTarget.#renderer.removeClass(this.#sortableService.activeTarget.#selfEl.nativeElement, 'dragging');
+            this.#sortableService.activeTarget.#cleanupDragState();
         }
-        _a.activeSource = null;
-        _a.activeTarget = null;
-        _a.activeDraggedElement = null;
+        this.#sortableService.activeSource = null;
+        this.#sortableService.activeTarget = null;
+        this.#sortableService.activeDraggedElement = null;
     }
     #cleanupDragState() {
         this.#renderer.removeClass(this.#selfEl.nativeElement, 'dragging');
@@ -549,13 +743,13 @@ class ShipSortable {
     }
     #dragableObserver;
     ngOnDestroy() {
+        this.#sortableService.activeInstances.delete(this);
         this.#dragableObserver?.disconnect();
         this.abortController?.abort();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSortable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ShipSortable, isStandalone: true, selector: "[shSortable]", inputs: { shSortable: { classPropertyName: "shSortable", publicName: "shSortable", isSignal: true, isRequired: false, transformFunction: null }, sortableGroup: { classPropertyName: "sortableGroup", publicName: "sortableGroup", isSignal: true, isRequired: false, transformFunction: null }, sortingMode: { classPropertyName: "sortingMode", publicName: "sortingMode", isSignal: true, isRequired: false, transformFunction: null }, treeItems: { classPropertyName: "treeItems", publicName: "treeItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeItems: "treeItemsChange", sortDrop: "sortDrop", afterDrop: "afterDrop", crossDrop: "crossDrop", treeDrop: "treeDrop" }, host: { listeners: { "dragenter": "dragEnter($event)", "dragleave": "dragLeave($event)", "dragover": "dragOver($event)", "drop": "drop()" }, properties: { "class.sh-sortable-tree": "sortingMode() === 'tree'" }, classAttribute: "sh-sortable" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ShipSortable, isStandalone: true, selector: "[shSortable]", inputs: { shSortable: { classPropertyName: "shSortable", publicName: "shSortable", isSignal: true, isRequired: false, transformFunction: null }, sortableGroup: { classPropertyName: "sortableGroup", publicName: "sortableGroup", isSignal: true, isRequired: false, transformFunction: null }, sortingMode: { classPropertyName: "sortingMode", publicName: "sortingMode", isSignal: true, isRequired: false, transformFunction: null }, treeItems: { classPropertyName: "treeItems", publicName: "treeItems", isSignal: true, isRequired: false, transformFunction: null }, touchEnabled: { classPropertyName: "touchEnabled", publicName: "touchEnabled", isSignal: true, isRequired: false, transformFunction: null }, touchActivation: { classPropertyName: "touchActivation", publicName: "touchActivation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeItems: "treeItemsChange", sortDrop: "sortDrop", afterDrop: "afterDrop", crossDrop: "crossDrop", treeDrop: "treeDrop" }, host: { listeners: { "dragenter": "dragEnter($event)", "dragleave": "dragLeave($event)", "dragover": "dragOver($event)", "drop": "drop()" }, properties: { "class.sh-sortable-tree": "sortingMode() === 'tree'" }, classAttribute: "sh-sortable" }, ngImport: i0 }); }
 }
-_a = ShipSortable;
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSortable, decorators: [{
             type: Directive,
             args: [{
@@ -566,7 +760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                         '[class.sh-sortable-tree]': "sortingMode() === 'tree'",
                     },
                 }]
-        }], propDecorators: { shSortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "shSortable", required: false }] }], sortableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortableGroup", required: false }] }], sortingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingMode", required: false }] }], treeItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeItems", required: false }] }, { type: i0.Output, args: ["treeItemsChange"] }], sortDrop: [{ type: i0.Output, args: ["sortDrop"] }], afterDrop: [{ type: i0.Output, args: ["afterDrop"] }], crossDrop: [{ type: i0.Output, args: ["crossDrop"] }], treeDrop: [{ type: i0.Output, args: ["treeDrop"] }], dragEnter: [{
+        }], propDecorators: { shSortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "shSortable", required: false }] }], sortableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortableGroup", required: false }] }], sortingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingMode", required: false }] }], treeItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeItems", required: false }] }, { type: i0.Output, args: ["treeItemsChange"] }], touchEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchEnabled", required: false }] }], touchActivation: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchActivation", required: false }] }], sortDrop: [{ type: i0.Output, args: ["sortDrop"] }], afterDrop: [{ type: i0.Output, args: ["afterDrop"] }], crossDrop: [{ type: i0.Output, args: ["crossDrop"] }], treeDrop: [{ type: i0.Output, args: ["treeDrop"] }], dragEnter: [{
                 type: HostListener,
                 args: ['dragenter', ['$event']]
             }], dragLeave: [{
@@ -714,5 +908,5 @@ function createTreeSortableManager(nodesSignal, config) {
  * Generated bundle index. Do not edit.
  */
 
-export { ShipSortable, createSortableManager, createTreeSortableManager, moveIndex, transferArrayItem };
+export { ShipSortable, ShipSortableService, createSortableManager, createTreeSortableManager, moveIndex, transferArrayItem };
 //# sourceMappingURL=ship-ui-core-ship-sortable.mjs.map