@raintonic/formaui 0.2.0

package/fesm2022/raintonic-formaui-cdk-drag-drop.mjs

@@ -0,0 +1,806 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, input, output, inject, ElementRef, Renderer2, NgZone, Directive, effect, contentChildren } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+class FuiDragRegistryService {
+    activeDrag = signal(null, ...(ngDevMode ? [{ debugName: "activeDrag" }] : /* istanbul ignore next */ []));
+    _dropZones = new Set();
+    _sortables = new Set();
+    registerDropZone(zone) {
+        this._dropZones.add(zone);
+    }
+    unregisterDropZone(zone) {
+        this._dropZones.delete(zone);
+    }
+    registerSortable(sortable) {
+        this._sortables.add(sortable);
+    }
+    unregisterSortable(sortable) {
+        this._sortables.delete(sortable);
+    }
+    startDrag(drag) {
+        this.activeDrag.set(drag);
+    }
+    updateDrag(position, _event) {
+        const active = this.activeDrag();
+        if (active) {
+            active.currentPosition = position;
+            this.activeDrag.set({ ...active });
+        }
+    }
+    endDrag(_event) {
+        this.activeDrag.set(null);
+    }
+    cancelDrag() {
+        this.activeDrag.set(null);
+    }
+    getDropZoneAtPoint(point) {
+        const preview = this.activeDrag()?.previewElement;
+        if (preview) {
+            preview.style.pointerEvents = 'none';
+        }
+        const elementAtPoint = typeof document.elementFromPoint === 'function' ? document.elementFromPoint(point.x, point.y) : null;
+        if (preview) {
+            preview.style.pointerEvents = '';
+        }
+        if (!elementAtPoint) {
+            return null;
+        }
+        for (const zone of this._dropZones) {
+            if (zone.element.nativeElement.contains(elementAtPoint)) {
+                return zone;
+            }
+        }
+        return null;
+    }
+    getSortableAtPoint(point) {
+        const preview = this.activeDrag()?.previewElement;
+        if (preview) {
+            preview.style.pointerEvents = 'none';
+        }
+        const elementAtPoint = typeof document.elementFromPoint === 'function' ? document.elementFromPoint(point.x, point.y) : null;
+        if (preview) {
+            preview.style.pointerEvents = '';
+        }
+        if (!elementAtPoint) {
+            return null;
+        }
+        for (const sortable of this._sortables) {
+            if (sortable.element.nativeElement.contains(elementAtPoint)) {
+                return sortable;
+            }
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDragRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDragRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDragRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class FuiAutoScroller {
+    _rafId = null;
+    _scrollNode = null;
+    SCROLL_PROXIMITY_THRESHOLD = 30;
+    MAX_SCROLL_SPEED = 15;
+    checkAutoScroll(pointerPosition) {
+        const scrollNode = this._getScrollableAtPoint(pointerPosition);
+        if (!scrollNode) {
+            this._stopAutoScroll();
+            return;
+        }
+        this._scrollNode = scrollNode;
+        const rect = scrollNode.getBoundingClientRect();
+        let speedX = 0;
+        let speedY = 0;
+        if (pointerPosition.y - rect.top < this.SCROLL_PROXIMITY_THRESHOLD) {
+            speedY = -this._calculateSpeed(pointerPosition.y - rect.top);
+        }
+        if (rect.bottom - pointerPosition.y < this.SCROLL_PROXIMITY_THRESHOLD) {
+            speedY = this._calculateSpeed(rect.bottom - pointerPosition.y);
+        }
+        if (pointerPosition.x - rect.left < this.SCROLL_PROXIMITY_THRESHOLD) {
+            speedX = -this._calculateSpeed(pointerPosition.x - rect.left);
+        }
+        if (rect.right - pointerPosition.x < this.SCROLL_PROXIMITY_THRESHOLD) {
+            speedX = this._calculateSpeed(rect.right - pointerPosition.x);
+        }
+        if (speedX !== 0 || speedY !== 0) {
+            this._startAutoScroll(speedX, speedY);
+        }
+        else {
+            this._stopAutoScroll();
+        }
+    }
+    stop() {
+        this._stopAutoScroll();
+    }
+    destroy() {
+        this._stopAutoScroll();
+    }
+    _calculateSpeed(distanceFromEdge) {
+        const ratio = 1 - distanceFromEdge / this.SCROLL_PROXIMITY_THRESHOLD;
+        return Math.ceil(ratio * this.MAX_SCROLL_SPEED);
+    }
+    _startAutoScroll(speedX, speedY) {
+        if (this._rafId !== null) {
+            cancelAnimationFrame(this._rafId);
+        }
+        const scroll = () => {
+            if (this._scrollNode) {
+                this._scrollNode.scrollTop += speedY;
+                this._scrollNode.scrollLeft += speedX;
+            }
+            this._rafId = requestAnimationFrame(scroll);
+        };
+        this._rafId = requestAnimationFrame(scroll);
+    }
+    _stopAutoScroll() {
+        if (this._rafId !== null) {
+            cancelAnimationFrame(this._rafId);
+            this._rafId = null;
+        }
+    }
+    _getScrollableAtPoint(point) {
+        if (typeof document.elementFromPoint !== 'function') {
+            return null;
+        }
+        let element = document.elementFromPoint(point.x, point.y);
+        while (element) {
+            const style = window.getComputedStyle(element);
+            if ((style.overflowY === 'auto' || style.overflowY === 'scroll') && element.scrollHeight > element.clientHeight) {
+                return element;
+            }
+            if ((style.overflowX === 'auto' || style.overflowX === 'scroll') && element.scrollWidth > element.clientWidth) {
+                return element;
+            }
+            element = element.parentElement;
+        }
+        return null;
+    }
+}
+
+/**
+ * Internal helper that tracks positional state for a single drag operation.
+ * Used by FuiDragDirective to keep the directive itself cleaner.
+ */
+class FuiDragRef {
+    startPosition = { x: 0, y: 0 };
+    currentPosition = { x: 0, y: 0 };
+    _active = false;
+    get active() {
+        return this._active;
+    }
+    start(x, y) {
+        this.startPosition = { x, y };
+        this.currentPosition = { x, y };
+        this._active = true;
+    }
+    move(x, y) {
+        this.currentPosition = { x, y };
+    }
+    get distance() {
+        return {
+            x: this.currentPosition.x - this.startPosition.x,
+            y: this.currentPosition.y - this.startPosition.y,
+        };
+    }
+    reset() {
+        this.startPosition = { x: 0, y: 0 };
+        this.currentPosition = { x: 0, y: 0 };
+        this._active = false;
+    }
+}
+
+class FuiDragDirective {
+    fuiDragData = input(null, ...(ngDevMode ? [{ debugName: "fuiDragData" }] : /* istanbul ignore next */ []));
+    fuiDragDisabled = input(false, ...(ngDevMode ? [{ debugName: "fuiDragDisabled" }] : /* istanbul ignore next */ []));
+    fuiDragLockAxis = input('free', ...(ngDevMode ? [{ debugName: "fuiDragLockAxis" }] : /* istanbul ignore next */ []));
+    fuiDragPreviewTemplate = input(null, ...(ngDevMode ? [{ debugName: "fuiDragPreviewTemplate" }] : /* istanbul ignore next */ []));
+    fuiDragPlaceholderTemplate = input(null, ...(ngDevMode ? [{ debugName: "fuiDragPlaceholderTemplate" }] : /* istanbul ignore next */ []));
+    fuiDragBoundary = input(null, ...(ngDevMode ? [{ debugName: "fuiDragBoundary" }] : /* istanbul ignore next */ []));
+    fuiDragStarted = output();
+    fuiDragMoved = output();
+    fuiDragEnded = output();
+    fuiDragDropped = output();
+    element = inject((ElementRef));
+    _isDragging = signal(false, ...(ngDevMode ? [{ debugName: "_isDragging" }] : /* istanbul ignore next */ []));
+    _registry = inject(FuiDragRegistryService);
+    _renderer = inject(Renderer2);
+    _document = inject(DOCUMENT);
+    _ngZone = inject(NgZone);
+    _autoScroller = new FuiAutoScroller();
+    _dragRef = new FuiDragRef();
+    _previewElement = null;
+    _placeholderElement = null;
+    _pointerMoveHandler = null;
+    _pointerUpHandler = null;
+    _boundaryRect = null;
+    // Keyboard drag state
+    _keyboardDragging = false;
+    _keyboardPosition = { x: 0, y: 0 };
+    KEYBOARD_STEP = 10;
+    _onPointerDown(event) {
+        if (this.fuiDragDisabled() || event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        const startPosition = { x: event.clientX, y: event.clientY };
+        this._dragRef.start(startPosition.x, startPosition.y);
+        this._resolveBoundary();
+        this._previewElement = this._createPreview();
+        this._updatePreviewPosition(startPosition);
+        this._document.body.appendChild(this._previewElement);
+        // Create placeholder at source location
+        this._placeholderElement = this._createPlaceholder();
+        this.element.nativeElement.parentNode?.insertBefore(this._placeholderElement, this.element.nativeElement.nextSibling);
+        this._isDragging.set(true);
+        this._registry.startDrag({
+            source: this,
+            previewElement: this._previewElement,
+            placeholderElement: this._placeholderElement,
+            startPosition,
+            currentPosition: { ...startPosition },
+            data: this.fuiDragData(),
+        });
+        this.fuiDragStarted.emit({
+            source: this,
+            data: this.fuiDragData(),
+            pointerPosition: startPosition,
+            distance: { x: 0, y: 0 },
+            event,
+        });
+        this._ngZone.runOutsideAngular(() => {
+            this._pointerMoveHandler = (e) => {
+                this._onPointerMove(e);
+            };
+            this._pointerUpHandler = (e) => {
+                this._onPointerUp(e);
+            };
+            this._document.addEventListener('pointermove', this._pointerMoveHandler);
+            this._document.addEventListener('pointerup', this._pointerUpHandler);
+        });
+    }
+    _onPointerMove(event) {
+        const position = this._applyConstraints({ x: event.clientX, y: event.clientY });
+        this._dragRef.move(position.x, position.y);
+        if (this._previewElement) {
+            this._updatePreviewPosition(position);
+        }
+        this._autoScroller.checkAutoScroll(position);
+        this._registry.updateDrag(position, event);
+        this._ngZone.run(() => {
+            this.fuiDragMoved.emit({
+                source: this,
+                data: this.fuiDragData(),
+                pointerPosition: position,
+                distance: this._dragRef.distance,
+                event,
+            });
+        });
+    }
+    _onPointerUp(event) {
+        this._removeListeners();
+        this._autoScroller.stop();
+        const position = { x: event.clientX, y: event.clientY };
+        const dropZone = this._registry.getDropZoneAtPoint(position);
+        if (dropZone && !dropZone.fuiDropZoneDisabled()) {
+            const predicate = dropZone.fuiDropZonePredicate();
+            const accepted = !predicate || predicate(this);
+            if (accepted) {
+                this._ngZone.run(() => {
+                    const dropEvent = {
+                        source: this,
+                        dragData: this.fuiDragData(),
+                        dropZoneData: dropZone.fuiDropZoneData(),
+                        dropZone,
+                        isPointerOverContainer: true,
+                    };
+                    this.fuiDragDropped.emit(dropEvent);
+                    dropZone.fuiDropped.emit(dropEvent);
+                });
+            }
+        }
+        this._cleanupDrag();
+        this._ngZone.run(() => {
+            this._registry.endDrag(event);
+            this.fuiDragEnded.emit({
+                source: this,
+                data: this.fuiDragData(),
+                pointerPosition: position,
+                distance: this._dragRef.distance,
+                event,
+            });
+            this._isDragging.set(false);
+        });
+        this._dragRef.reset();
+    }
+    _onKeydown(event) {
+        if (this.fuiDragDisabled()) {
+            return;
+        }
+        if (!this._keyboardDragging) {
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+                this._startKeyboardDrag();
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                this._moveKeyboard(0, -this.KEYBOARD_STEP);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this._moveKeyboard(0, this.KEYBOARD_STEP);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this._moveKeyboard(-this.KEYBOARD_STEP, 0);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this._moveKeyboard(this.KEYBOARD_STEP, 0);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this._cancelKeyboardDrag();
+                break;
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                this._endKeyboardDrag();
+                break;
+        }
+    }
+    _startKeyboardDrag() {
+        const rect = this.element.nativeElement.getBoundingClientRect();
+        const startPosition = {
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2,
+        };
+        this._keyboardDragging = true;
+        this._keyboardPosition = { ...startPosition };
+        this._dragRef.start(startPosition.x, startPosition.y);
+        this._previewElement = this._createPreview();
+        this._updatePreviewPosition(startPosition);
+        this._document.body.appendChild(this._previewElement);
+        this._isDragging.set(true);
+        this._registry.startDrag({
+            source: this,
+            previewElement: this._previewElement,
+            startPosition,
+            currentPosition: { ...startPosition },
+            data: this.fuiDragData(),
+        });
+    }
+    _moveKeyboard(dx, dy) {
+        const axis = this.fuiDragLockAxis();
+        if (axis === 'x') {
+            dy = 0;
+        }
+        if (axis === 'y') {
+            dx = 0;
+        }
+        this._keyboardPosition.x += dx;
+        this._keyboardPosition.y += dy;
+        this._dragRef.move(this._keyboardPosition.x, this._keyboardPosition.y);
+        if (this._previewElement) {
+            this._updatePreviewPosition(this._keyboardPosition);
+        }
+    }
+    _endKeyboardDrag() {
+        const position = this._keyboardPosition;
+        const dropZone = this._registry.getDropZoneAtPoint(position);
+        if (dropZone && !dropZone.fuiDropZoneDisabled()) {
+            const predicate = dropZone.fuiDropZonePredicate();
+            const accepted = !predicate || predicate(this);
+            if (accepted) {
+                const dropEvent = {
+                    source: this,
+                    dragData: this.fuiDragData(),
+                    dropZoneData: dropZone.fuiDropZoneData(),
+                    dropZone,
+                    isPointerOverContainer: true,
+                };
+                this.fuiDragDropped.emit(dropEvent);
+                dropZone.fuiDropped.emit(dropEvent);
+            }
+        }
+        this._cleanupDrag();
+        this._registry.cancelDrag();
+        this._isDragging.set(false);
+        this._keyboardDragging = false;
+        this._dragRef.reset();
+    }
+    _cancelKeyboardDrag() {
+        this._cleanupDrag();
+        this._registry.cancelDrag();
+        this._isDragging.set(false);
+        this._keyboardDragging = false;
+        this._dragRef.reset();
+    }
+    _createPreview() {
+        const sourceEl = this.element.nativeElement;
+        const rect = sourceEl.getBoundingClientRect();
+        const preview = sourceEl.cloneNode(true);
+        preview.classList.add('fui-drag-preview');
+        preview.style.position = 'fixed';
+        preview.style.width = `${rect.width}px`;
+        preview.style.height = `${rect.height}px`;
+        preview.style.zIndex = '10000';
+        preview.style.pointerEvents = 'none';
+        preview.style.margin = '0';
+        return preview;
+    }
+    _createPlaceholder() {
+        const sourceEl = this.element.nativeElement;
+        const rect = sourceEl.getBoundingClientRect();
+        const placeholder = this._document.createElement('div');
+        placeholder.classList.add('fui-drag-placeholder');
+        placeholder.style.width = `${rect.width}px`;
+        placeholder.style.height = `${rect.height}px`;
+        placeholder.style.boxSizing = 'border-box';
+        return placeholder;
+    }
+    _updatePreviewPosition(position) {
+        if (!this._previewElement) {
+            return;
+        }
+        const sourceRect = this.element.nativeElement.getBoundingClientRect();
+        const offsetX = sourceRect.width / 2;
+        const offsetY = sourceRect.height / 2;
+        this._previewElement.style.left = `${position.x - offsetX}px`;
+        this._previewElement.style.top = `${position.y - offsetY}px`;
+    }
+    _applyConstraints(position) {
+        const axis = this.fuiDragLockAxis();
+        const start = this._dragRef.startPosition;
+        let { x, y } = position;
+        if (axis === 'x') {
+            y = start.y;
+        }
+        else if (axis === 'y') {
+            x = start.x;
+        }
+        if (this._boundaryRect) {
+            const rect = this._boundaryRect;
+            x = Math.max(rect.left, Math.min(x, rect.right));
+            y = Math.max(rect.top, Math.min(y, rect.bottom));
+        }
+        return { x, y };
+    }
+    /** Pattern allowing simple CSS selectors (tag, class, id, attribute selectors) */
+    static _SAFE_SELECTOR_PATTERN = /^[a-zA-Z0-9\-_.#\[\]=~|^$*:" >,+()]+$/;
+    _resolveBoundary() {
+        const boundary = this.fuiDragBoundary();
+        if (!boundary) {
+            this._boundaryRect = null;
+            return;
+        }
+        let boundaryElement = null;
+        if (typeof boundary === 'string') {
+            // Validate selector to prevent injection of malicious strings
+            if (!FuiDragDirective._SAFE_SELECTOR_PATTERN.test(boundary)) {
+                console.warn(`[FormaUI] Invalid drag boundary selector: "${boundary}"`);
+                this._boundaryRect = null;
+                return;
+            }
+            boundaryElement = this._document.querySelector(boundary);
+        }
+        else {
+            boundaryElement = boundary.nativeElement;
+        }
+        this._boundaryRect = boundaryElement ? boundaryElement.getBoundingClientRect() : null;
+    }
+    _cleanupDrag() {
+        if (this._previewElement?.parentNode) {
+            this._previewElement.parentNode.removeChild(this._previewElement);
+        }
+        this._previewElement = null;
+        if (this._placeholderElement?.parentNode) {
+            this._placeholderElement.parentNode.removeChild(this._placeholderElement);
+        }
+        this._placeholderElement = null;
+    }
+    _removeListeners() {
+        if (this._pointerMoveHandler) {
+            this._document.removeEventListener('pointermove', this._pointerMoveHandler);
+            this._pointerMoveHandler = null;
+        }
+        if (this._pointerUpHandler) {
+            this._document.removeEventListener('pointerup', this._pointerUpHandler);
+            this._pointerUpHandler = null;
+        }
+    }
+    ngOnDestroy() {
+        this._removeListeners();
+        this._cleanupDrag();
+        this._autoScroller.destroy();
+        this._dragRef.reset();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: FuiDragDirective, isStandalone: true, selector: "[fuiDrag]", inputs: { fuiDragData: { classPropertyName: "fuiDragData", publicName: "fuiDragData", isSignal: true, isRequired: false, transformFunction: null }, fuiDragDisabled: { classPropertyName: "fuiDragDisabled", publicName: "fuiDragDisabled", isSignal: true, isRequired: false, transformFunction: null }, fuiDragLockAxis: { classPropertyName: "fuiDragLockAxis", publicName: "fuiDragLockAxis", isSignal: true, isRequired: false, transformFunction: null }, fuiDragPreviewTemplate: { classPropertyName: "fuiDragPreviewTemplate", publicName: "fuiDragPreviewTemplate", isSignal: true, isRequired: false, transformFunction: null }, fuiDragPlaceholderTemplate: { classPropertyName: "fuiDragPlaceholderTemplate", publicName: "fuiDragPlaceholderTemplate", isSignal: true, isRequired: false, transformFunction: null }, fuiDragBoundary: { classPropertyName: "fuiDragBoundary", publicName: "fuiDragBoundary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fuiDragStarted: "fuiDragStarted", fuiDragMoved: "fuiDragMoved", fuiDragEnded: "fuiDragEnded", fuiDragDropped: "fuiDragDropped" }, host: { attributes: { "tabindex": "0" }, listeners: { "pointerdown": "_onPointerDown($event)", "keydown": "_onKeydown($event)" }, properties: { "class.fui-drag--dragging": "_isDragging()", "attr.aria-grabbed": "_isDragging()", "attr.aria-roledescription": "\"draggable item\"" }, classAttribute: "fui-drag" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDragDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuiDrag]',
+                    standalone: true,
+                    host: {
+                        class: 'fui-drag',
+                        '[class.fui-drag--dragging]': '_isDragging()',
+                        '[attr.aria-grabbed]': '_isDragging()',
+                        '[attr.aria-roledescription]': '"draggable item"',
+                        tabindex: '0',
+                        '(pointerdown)': '_onPointerDown($event)',
+                        '(keydown)': '_onKeydown($event)',
+                    },
+                }]
+        }], propDecorators: { fuiDragData: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiDragData", required: false }] }], fuiDragDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiDragDisabled", required: false }] }], fuiDragLockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiDragLockAxis", required: false }] }], fuiDragPreviewTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiDragPreviewTemplate", required: false }] }], fuiDragPlaceholderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiDragPlaceholderTemplate", required: false }] }], fuiDragBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiDragBoundary", required: false }] }], fuiDragStarted: [{ type: i0.Output, args: ["fuiDragStarted"] }], fuiDragMoved: [{ type: i0.Output, args: ["fuiDragMoved"] }], fuiDragEnded: [{ type: i0.Output, args: ["fuiDragEnded"] }], fuiDragDropped: [{ type: i0.Output, args: ["fuiDragDropped"] }] } });
+
+class FuiDropZoneDirective {
+    fuiDropZoneData = input(null, ...(ngDevMode ? [{ debugName: "fuiDropZoneData" }] : /* istanbul ignore next */ []));
+    fuiDropZoneDisabled = input(false, ...(ngDevMode ? [{ debugName: "fuiDropZoneDisabled" }] : /* istanbul ignore next */ []));
+    fuiDropZonePredicate = input(null, ...(ngDevMode ? [{ debugName: "fuiDropZonePredicate" }] : /* istanbul ignore next */ []));
+    fuiDropZoneEntered = output();
+    fuiDropZoneExited = output();
+    fuiDropped = output();
+    element = inject((ElementRef));
+    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
+    _isOver = signal(false, ...(ngDevMode ? [{ debugName: "_isOver" }] : /* istanbul ignore next */ []));
+    _registry = inject(FuiDragRegistryService);
+    _wasOver = false;
+    constructor() {
+        effect(() => {
+            const activeDrag = this._registry.activeDrag();
+            if (this.fuiDropZoneDisabled()) {
+                this._isActive.set(false);
+                this._isOver.set(false);
+                return;
+            }
+            if (activeDrag) {
+                this._isActive.set(true);
+                // Check if pointer is over this drop zone
+                const rect = this.element.nativeElement.getBoundingClientRect();
+                const pos = activeDrag.currentPosition;
+                const isOver = pos.x >= rect.left && pos.x <= rect.right && pos.y >= rect.top && pos.y <= rect.bottom;
+                this._isOver.set(isOver);
+                if (isOver && !this._wasOver) {
+                    this.fuiDropZoneEntered.emit({
+                        source: activeDrag.source,
+                        data: activeDrag.data,
+                        pointerPosition: activeDrag.currentPosition,
+                        distance: {
+                            x: activeDrag.currentPosition.x - activeDrag.startPosition.x,
+                            y: activeDrag.currentPosition.y - activeDrag.startPosition.y,
+                        },
+                        dropZone: this,
+                        event: null,
+                    });
+                }
+                else if (!isOver && this._wasOver) {
+                    this.fuiDropZoneExited.emit({
+                        source: activeDrag.source,
+                        data: activeDrag.data,
+                        pointerPosition: activeDrag.currentPosition,
+                        distance: {
+                            x: activeDrag.currentPosition.x - activeDrag.startPosition.x,
+                            y: activeDrag.currentPosition.y - activeDrag.startPosition.y,
+                        },
+                        dropZone: this,
+                        event: null,
+                    });
+                }
+                this._wasOver = isOver;
+            }
+            else {
+                this._isActive.set(false);
+                this._isOver.set(false);
+                this._wasOver = false;
+            }
+        });
+    }
+    ngOnInit() {
+        this._registry.registerDropZone(this);
+    }
+    ngOnDestroy() {
+        this._registry.unregisterDropZone(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDropZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: FuiDropZoneDirective, isStandalone: true, selector: "[fuiDropZone]", inputs: { fuiDropZoneData: { classPropertyName: "fuiDropZoneData", publicName: "fuiDropZoneData", isSignal: true, isRequired: false, transformFunction: null }, fuiDropZoneDisabled: { classPropertyName: "fuiDropZoneDisabled", publicName: "fuiDropZoneDisabled", isSignal: true, isRequired: false, transformFunction: null }, fuiDropZonePredicate: { classPropertyName: "fuiDropZonePredicate", publicName: "fuiDropZonePredicate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fuiDropZoneEntered: "fuiDropZoneEntered", fuiDropZoneExited: "fuiDropZoneExited", fuiDropped: "fuiDropped" }, host: { properties: { "class.fui-drop-zone--active": "_isActive()", "class.fui-drop-zone--over": "_isOver()", "attr.aria-dropeffect": "\"move\"" }, classAttribute: "fui-drop-zone" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDropZoneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuiDropZone]',
+                    standalone: true,
+                    host: {
+                        class: 'fui-drop-zone',
+                        '[class.fui-drop-zone--active]': '_isActive()',
+                        '[class.fui-drop-zone--over]': '_isOver()',
+                        '[attr.aria-dropeffect]': '"move"',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { fuiDropZoneData: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiDropZoneData", required: false }] }], fuiDropZoneDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiDropZoneDisabled", required: false }] }], fuiDropZonePredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiDropZonePredicate", required: false }] }], fuiDropZoneEntered: [{ type: i0.Output, args: ["fuiDropZoneEntered"] }], fuiDropZoneExited: [{ type: i0.Output, args: ["fuiDropZoneExited"] }], fuiDropped: [{ type: i0.Output, args: ["fuiDropped"] }] } });
+
+class FuiSortableDirective {
+    fuiSortableData = input.required(...(ngDevMode ? [{ debugName: "fuiSortableData" }] : /* istanbul ignore next */ []));
+    fuiSortableDisabled = input(false, ...(ngDevMode ? [{ debugName: "fuiSortableDisabled" }] : /* istanbul ignore next */ []));
+    fuiSortableOrientation = input('vertical', ...(ngDevMode ? [{ debugName: "fuiSortableOrientation" }] : /* istanbul ignore next */ []));
+    fuiSortableConnectedTo = input([], ...(ngDevMode ? [{ debugName: "fuiSortableConnectedTo" }] : /* istanbul ignore next */ []));
+    fuiSortableSorted = output();
+    fuiSortableTransferred = output();
+    element = inject((ElementRef));
+    _hasDragging = signal(false, ...(ngDevMode ? [{ debugName: "_hasDragging" }] : /* istanbul ignore next */ []));
+    _dragItems = contentChildren(FuiDragDirective, ...(ngDevMode ? [{ debugName: "_dragItems" }] : /* istanbul ignore next */ []));
+    _registry = inject(FuiDragRegistryService);
+    _activeDragStartIndex = -1;
+    _currentHoverIndex = -1;
+    _siblingRects = [];
+    constructor() {
+        effect(() => {
+            const activeDrag = this._registry.activeDrag();
+            if (this.fuiSortableDisabled()) {
+                this._hasDragging.set(false);
+                return;
+            }
+            if (activeDrag) {
+                const dragItems = this._dragItems();
+                const sourceIndex = dragItems.indexOf(activeDrag.source);
+                if (sourceIndex >= 0) {
+                    // Drag originated from this container
+                    this._hasDragging.set(true);
+                    if (this._activeDragStartIndex === -1) {
+                        this._activeDragStartIndex = sourceIndex;
+                        this._captureRects();
+                    }
+                    const insertIndex = this._getInsertionIndex(activeDrag.currentPosition);
+                    if (insertIndex !== this._currentHoverIndex) {
+                        this._currentHoverIndex = insertIndex;
+                        this._applyTransforms(sourceIndex, insertIndex);
+                    }
+                }
+                else {
+                    // Check if drag is over this container (cross-container)
+                    const rect = this.element.nativeElement.getBoundingClientRect();
+                    const pos = activeDrag.currentPosition;
+                    const isOver = pos.x >= rect.left && pos.x <= rect.right && pos.y >= rect.top && pos.y <= rect.bottom;
+                    if (isOver) {
+                        this._hasDragging.set(true);
+                    }
+                    else {
+                        this._hasDragging.set(false);
+                    }
+                }
+            }
+            else {
+                // Drag ended - check if we need to emit sort/transfer events
+                if (this._hasDragging() && this._activeDragStartIndex >= 0) {
+                    this._finalizeDrop();
+                }
+                this._hasDragging.set(false);
+                this._activeDragStartIndex = -1;
+                this._currentHoverIndex = -1;
+                this._clearTransforms();
+            }
+        });
+    }
+    ngOnInit() {
+        this._registry.registerSortable(this);
+    }
+    ngOnDestroy() {
+        this._registry.unregisterSortable(this);
+    }
+    _captureRects() {
+        const items = this._dragItems();
+        this._siblingRects = items.map((item) => item.element.nativeElement.getBoundingClientRect());
+    }
+    _getInsertionIndex(position) {
+        const orientation = this.fuiSortableOrientation();
+        for (let i = 0; i < this._siblingRects.length; i++) {
+            const rect = this._siblingRects[i];
+            if (orientation === 'vertical') {
+                const midY = rect.top + rect.height / 2;
+                if (position.y < midY) {
+                    return i;
+                }
+            }
+            else {
+                const midX = rect.left + rect.width / 2;
+                if (position.x < midX) {
+                    return i;
+                }
+            }
+        }
+        return this._siblingRects.length;
+    }
+    _applyTransforms(sourceIndex, insertIndex) {
+        const items = this._dragItems();
+        const orientation = this.fuiSortableOrientation();
+        items.forEach((item, i) => {
+            if (i === sourceIndex) {
+                return; // Skip the dragged item
+            }
+            const el = item.element.nativeElement;
+            let offset = 0;
+            if (sourceIndex < insertIndex) {
+                // Dragging down/right: shift items between source+1..insert up/left
+                if (i > sourceIndex && i < insertIndex) {
+                    const rect = this._siblingRects[sourceIndex];
+                    offset = orientation === 'vertical' ? -rect.height : -rect.width;
+                }
+            }
+            else if (sourceIndex > insertIndex) {
+                // Dragging up/left: shift items between insert..source-1 down/right
+                if (i >= insertIndex && i < sourceIndex) {
+                    const rect = this._siblingRects[sourceIndex];
+                    offset = orientation === 'vertical' ? rect.height : rect.width;
+                }
+            }
+            if (orientation === 'vertical') {
+                el.style.transform = offset ? `translateY(${offset}px)` : '';
+            }
+            else {
+                el.style.transform = offset ? `translateX(${offset}px)` : '';
+            }
+            el.style.transition = 'transform 150ms ease';
+        });
+    }
+    _clearTransforms() {
+        const items = this._dragItems();
+        items.forEach((item) => {
+            const el = item.element.nativeElement;
+            el.style.transform = '';
+            el.style.transition = '';
+        });
+    }
+    _finalizeDrop() {
+        if (this._currentHoverIndex >= 0 && this._currentHoverIndex !== this._activeDragStartIndex) {
+            const data = [...this.fuiSortableData()];
+            const [moved] = data.splice(this._activeDragStartIndex, 1);
+            const adjustedIndex = this._currentHoverIndex > this._activeDragStartIndex ? this._currentHoverIndex - 1 : this._currentHoverIndex;
+            data.splice(adjustedIndex, 0, moved);
+            this.fuiSortableSorted.emit({
+                data,
+                previousIndex: this._activeDragStartIndex,
+                currentIndex: adjustedIndex,
+                container: this,
+            });
+        }
+        this._clearTransforms();
+    }
+    /** Called by external sortables for cross-container transfers. */
+    emitTransfer(item, previousContainer, previousIndex, currentIndex) {
+        this.fuiSortableTransferred.emit({
+            item,
+            previousContainer,
+            container: this,
+            previousIndex,
+            currentIndex,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSortableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.6", type: FuiSortableDirective, isStandalone: true, selector: "[fuiSortable]", inputs: { fuiSortableData: { classPropertyName: "fuiSortableData", publicName: "fuiSortableData", isSignal: true, isRequired: true, transformFunction: null }, fuiSortableDisabled: { classPropertyName: "fuiSortableDisabled", publicName: "fuiSortableDisabled", isSignal: true, isRequired: false, transformFunction: null }, fuiSortableOrientation: { classPropertyName: "fuiSortableOrientation", publicName: "fuiSortableOrientation", isSignal: true, isRequired: false, transformFunction: null }, fuiSortableConnectedTo: { classPropertyName: "fuiSortableConnectedTo", publicName: "fuiSortableConnectedTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fuiSortableSorted: "fuiSortableSorted", fuiSortableTransferred: "fuiSortableTransferred" }, host: { properties: { "class.fui-sortable--dragging": "_hasDragging()" }, classAttribute: "fui-sortable" }, queries: [{ propertyName: "_dragItems", predicate: FuiDragDirective, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSortableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuiSortable]',
+                    standalone: true,
+                    host: {
+                        class: 'fui-sortable',
+                        '[class.fui-sortable--dragging]': '_hasDragging()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { fuiSortableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiSortableData", required: true }] }], fuiSortableDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiSortableDisabled", required: false }] }], fuiSortableOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiSortableOrientation", required: false }] }], fuiSortableConnectedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiSortableConnectedTo", required: false }] }], fuiSortableSorted: [{ type: i0.Output, args: ["fuiSortableSorted"] }], fuiSortableTransferred: [{ type: i0.Output, args: ["fuiSortableTransferred"] }], _dragItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FuiDragDirective), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuiDragDirective, FuiDragRegistryService, FuiDropZoneDirective, FuiSortableDirective };
+//# sourceMappingURL=raintonic-formaui-cdk-drag-drop.mjs.map