ngx-virtual-dnd 3.1.3 → 3.2.0-alpha.0

package/fesm2022/ngx-virtual-dnd.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, InjectionToken, computed, effect, Injectable, inject, NgZone, input, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injector, afterNextRender, viewChild, Directive, isDevMode, output, untracked, contentChild, EnvironmentInjector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { signal, InjectionToken, computed, effect, Injectable, inject, NgZone, input, ChangeDetectionStrategy, Component, DestroyRef, afterNextRender, ElementRef, Injector, untracked, viewChild, Directive, isDevMode, output, contentChild, EnvironmentInjector, TemplateRef, ViewContainerRef } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 
 /**
@@ -452,6 +452,25 @@ const VDND_SCROLL_CONTAINER = new InjectionToken('VDND_SCROLL_CONTAINER');
  */
 const VDND_VIRTUAL_VIEWPORT = new InjectionToken('VDND_VIRTUAL_VIEWPORT');
 
+/** Default shift animation duration (ms) used when the config omits `shiftDuration`. */
+const DEFAULT_SHIFT_DURATION = 200;
+/** Default shift animation easing used when the config omits `shiftEasing`. */
+const DEFAULT_SHIFT_EASING = 'cubic-bezier(0.2, 0, 0, 1)';
+/**
+ * Opt-in animation configuration. When provided, items displaced by the placeholder
+ * slide into their new position instead of jumping. Resolved through the element
+ * injector, so it can be provided app-wide or per component subtree.
+ *
+ * The animation is skipped when the user prefers reduced motion. Values are read each
+ * time an animation starts, so getters can toggle the animation at runtime.
+ *
+ * @example
+ * ```typescript
+ * providers: [{ provide: VDND_ANIMATION_CONFIG, useValue: { shiftDuration: 200 } }]
+ * ```
+ */
+const VDND_ANIMATION_CONFIG = new InjectionToken('VDND_ANIMATION_CONFIG');
+
 const INITIAL_CORE_STATE = {
     isDragging: false,
     draggedItem: null,
@@ -2426,6 +2445,181 @@ function createAutoScrollRegistration(options) {
     destroyRef.onDestroy(unregisterCurrent);
 }
 
+/** Layout changes smaller than this are ignored (sub-pixel rounding noise). */
+const MIN_SHIFT_PX = 0.5;
+/**
+ * FLIP animator for items displaced by the drag placeholder.
+ *
+ * Call `beforeUpdate()` before the DOM reflects a new drag/placeholder state. When the
+ * placeholder moved, it snapshots every rendered element's visual position, then after
+ * the render measures again and plays a compositor-only `transform` animation from the
+ * old position to the new one.
+ *
+ * Positions are measured relative to the scroll content, so scrolling (including
+ * programmatic scroll in the same tick) never animates. Measurements include any
+ * in-flight animation, so a new displacement retargets from where the item currently
+ * is instead of stacking or jumping. Elements whose target did not change keep their
+ * running animation untouched.
+ * @internal
+ */
+class ShiftAnimator {
+    #config;
+    #injector;
+    #getScrollElement;
+    #getEntries;
+    #running = new Map();
+    #snapshot = null;
+    #reducedMotionQuery;
+    #wasDragging = false;
+    #lastPlaceholderIndex = -1;
+    constructor(options) {
+        this.#config = options.config;
+        this.#injector = options.injector;
+        this.#getScrollElement = options.getScrollElement;
+        this.#getEntries = options.getEntries;
+    }
+    /**
+     * Notify the animator of the drag state about to be rendered.
+     * @param placeholderIndex placeholder index in this list, or -1 when not shown here
+     */
+    beforeUpdate(isDragging, placeholderIndex) {
+        const wasDragging = this.#wasDragging;
+        const previousIndex = this.#lastPlaceholderIndex;
+        this.#wasDragging = isDragging;
+        this.#lastPlaceholderIndex = placeholderIndex;
+        if (!isDragging) {
+            // Drop/cancel: the list re-renders with the committed order, so snap everything.
+            this.#snapshot = null;
+            if (wasDragging) {
+                this.cancelAll();
+            }
+            return;
+        }
+        // Drag start renders the placeholder in the hidden item's slot — nothing moves.
+        // A pending snapshot means another update already captured this tick's "before".
+        if (!wasDragging || placeholderIndex === previousIndex || this.#snapshot) {
+            return;
+        }
+        if (!this.#isEnabled()) {
+            return;
+        }
+        this.#snapshot = this.#measure();
+        afterNextRender(() => this.#play(), { injector: this.#injector });
+    }
+    /** Stop the shift animation on an element (e.g. before its view is recycled). */
+    cancel(element) {
+        const running = this.#running.get(element);
+        if (!running)
+            return;
+        this.#running.delete(element);
+        running.animation.cancel();
+    }
+    /** Stop every running shift animation. */
+    cancelAll() {
+        for (const running of this.#running.values()) {
+            running.animation.cancel();
+        }
+        this.#running.clear();
+    }
+    #isEnabled() {
+        if (this.#duration() <= 0)
+            return false;
+        if (typeof Element === 'undefined' || typeof Element.prototype.animate !== 'function') {
+            return false;
+        }
+        return !this.#prefersReducedMotion();
+    }
+    #duration() {
+        return this.#config.shiftDuration ?? DEFAULT_SHIFT_DURATION;
+    }
+    #prefersReducedMotion() {
+        if (this.#reducedMotionQuery === undefined) {
+            this.#reducedMotionQuery =
+                typeof matchMedia === 'function' ? matchMedia('(prefers-reduced-motion: reduce)') : null;
+        }
+        return this.#reducedMotionQuery?.matches ?? false;
+    }
+    /** Scroll-content origin, so positions are independent of the scroll offset. */
+    #origin() {
+        const scrollElement = this.#getScrollElement();
+        if (!scrollElement)
+            return { x: 0, y: 0 };
+        const rect = scrollElement.getBoundingClientRect();
+        return { x: rect.left - scrollElement.scrollLeft, y: rect.top - scrollElement.scrollTop };
+    }
+    #measure() {
+        const origin = this.#origin();
+        const positions = new Map();
+        for (const [key, element] of this.#getEntries()) {
+            const rect = element.getBoundingClientRect();
+            // Hidden (display: none) elements, such as the dragged item, have no box.
+            if (rect.width === 0 && rect.height === 0)
+                continue;
+            positions.set(element, { key, x: rect.left - origin.x, y: rect.top - origin.y });
+        }
+        return positions;
+    }
+    #play() {
+        const first = this.#snapshot;
+        this.#snapshot = null;
+        if (!first || !this.#wasDragging)
+            return;
+        const last = this.#measure();
+        const stale = [];
+        const shifts = [];
+        // Read phase — no writes until every element is measured.
+        for (const [element, to] of last) {
+            const from = first.get(element);
+            if (!from || !Object.is(from.key, to.key)) {
+                // Newly rendered or recycled for another item: must not animate from a stale offset.
+                stale.push(element);
+                continue;
+            }
+            const dx = from.x - to.x;
+            const dy = from.y - to.y;
+            if (Math.abs(dx) < MIN_SHIFT_PX && Math.abs(dy) < MIN_SHIFT_PX) {
+                continue;
+            }
+            // Both measurements include the in-flight offset, so the new animation must
+            // start from that offset plus the layout delta to continue from the current spot.
+            const current = this.#currentOffset(element);
+            shifts.push({ element, x: dx + current.x, y: dy + current.y });
+        }
+        // Write phase
+        for (const element of stale) {
+            this.cancel(element);
+        }
+        for (const shift of shifts) {
+            this.#start(shift.element, shift.x, shift.y);
+        }
+    }
+    #currentOffset(element) {
+        const running = this.#running.get(element);
+        // Effect-level easing makes `progress` the eased progress, i.e. the fraction travelled.
+        const progress = running?.animation.effect?.getComputedTiming().progress;
+        if (!running || progress === null || progress === undefined) {
+            return { x: 0, y: 0 };
+        }
+        const remaining = 1 - progress;
+        return { x: running.x * remaining, y: running.y * remaining };
+    }
+    #start(element, x, y) {
+        this.#running.get(element)?.animation.cancel();
+        const animation = element.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: 'translate(0px, 0px)' }], {
+            duration: this.#duration(),
+            easing: this.#config.shiftEasing ?? DEFAULT_SHIFT_EASING,
+            // Layer on top of any transform the consumer already applies to the item.
+            composite: 'add',
+        });
+        this.#running.set(element, { animation, x, y });
+        animation.onfinish = () => {
+            if (this.#running.get(element)?.animation === animation) {
+                this.#running.delete(element);
+            }
+        };
+    }
+}
+
 /**
  * A virtual scroll container that only renders visible items.
  *
@@ -2481,6 +2675,8 @@ class VirtualScrollContainerComponent {
     #observedElementByKey = new Map();
     /** Measured height from ResizeObserver (used when containerHeight is not provided) */
     #measuredHeight = signal(0, ...(ngDevMode ? [{ debugName: "#measuredHeight" }] : []));
+    /** Slides items displaced by the placeholder (only when VDND_ANIMATION_CONFIG is provided) */
+    #shiftAnimator = this.#createShiftAnimator();
     /** Template for rendering each item - passed as input instead of content child for reliability */
     itemTemplate = input.required(...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
     /** Unique ID for this scroll container (used for auto-scroll registration) */
@@ -2773,6 +2969,16 @@ class VirtualScrollContainerComponent {
             const draggedIndex = this.#draggedItemIndex();
             strategy.setExcludedIndex(draggedIndex >= 0 ? draggedIndex : null);
         });
+        // Snapshot item positions before the template re-renders the placeholder move.
+        // Component effects run before the component's own template is refreshed.
+        if (this.#shiftAnimator) {
+            const animator = this.#shiftAnimator;
+            effect(() => {
+                const isDragging = this.#dragState.isDragging();
+                const placeholderIndex = this.placeholderIndex();
+                untracked(() => animator.beforeUpdate(isDragging, placeholderIndex));
+            });
+        }
         // Keyboard drag autoscroll: scroll to keep target index visible
         effect(() => {
             // Only apply when this droppable is active during keyboard drag
@@ -2898,6 +3104,32 @@ class VirtualScrollContainerComponent {
         }
         this.#observedElementByKey.clear();
         this.#itemResizeObserver?.disconnect();
+        this.#shiftAnimator?.cancelAll();
+    }
+    #createShiftAnimator() {
+        const config = inject(VDND_ANIMATION_CONFIG, { optional: true });
+        if (!config)
+            return null;
+        return new ShiftAnimator({
+            config,
+            injector: this.#injector,
+            getScrollElement: () => this.#elementRef.nativeElement,
+            getEntries: () => this.#shiftAnimationEntries(),
+        });
+    }
+    /**
+     * Rendered item roots and the placeholder. `@for` never reuses a view for a different
+     * track key, so each element is its own stable identity.
+     */
+    *#shiftAnimationEntries() {
+        const wrapper = this.#elementRef.nativeElement.querySelector('.vdnd-virtual-scroll-content-wrapper');
+        if (!wrapper)
+            return;
+        for (const child of Array.from(wrapper.children)) {
+            if (child instanceof HTMLElement) {
+                yield [child, child];
+            }
+        }
     }
     /**
      * Set up ResizeObserver for measuring individual item heights.
@@ -3461,6 +3693,11 @@ class DroppableDirective {
     /** Emits when an item is dropped on this droppable */
     // eslint-disable-next-line @angular-eslint/no-output-native
     drop = output();
+    /**
+     * Emits each time the placeholder moves within this droppable during a drag
+     * (every item displacement) — e.g. to trigger haptic feedback.
+     */
+    placeholderMove = output();
     /** Whether this droppable is currently being targeted */
     isActive = computed(() => {
         const activeId = this.#dragState.activeDroppableId();
@@ -3473,6 +3710,27 @@ class DroppableDirective {
         }
         return this.#dragState.placeholderId();
     }, ...(ngDevMode ? [{ debugName: "placeholderId" }] : []));
+    /**
+     * The placeholder's insertion index in this droppable (DropEvent convention),
+     * or null when the placeholder is not here.
+     */
+    #placeholderInsertionIndex = computed(() => {
+        if (!this.isActive() || !this.#dragState.isDragging()) {
+            return null;
+        }
+        const sourceIndex = this.#dragState.sourceIndex();
+        return normalizeDropDestinationIndex({
+            sourceIndex: sourceIndex ?? -1,
+            placeholderIndex: this.#dragState.placeholderIndex(),
+            // Without a known source index there is no hidden-source adjustment to undo
+            sourceDroppableId: sourceIndex === null ? null : this.#dragState.sourceDroppableId(),
+            activeDroppableId: this.vdndDroppable(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "#placeholderInsertionIndex" }] : []));
+    /** Last insertion index reported via placeholderMove (null when not here) */
+    #lastPlaceholderIndex = null;
+    /** Drag whose initial placeholder position has already been seen by this droppable */
+    #placeholderTrackedDrag = null;
     /** Track previous active state to detect the drag-end transition */
     #wasActive = false;
     /**
@@ -3502,6 +3760,10 @@ class DroppableDirective {
                 this.#positionCalculator.notifyCandidatesChanged(group);
             }
         });
+        effect(() => {
+            const currentIndex = this.#placeholderInsertionIndex();
+            untracked(() => this.#handlePlaceholderMove(currentIndex));
+        });
         // React to state changes and handle drop events.
         //
         // Keyed only on the low-frequency fields (isActive/isDragging/draggedItem). The final
@@ -3551,6 +3813,37 @@ class DroppableDirective {
             this.#positionCalculator.notifyCandidatesChanged(group);
         }
     }
+    /**
+     * Emit placeholderMove when the placeholder moved within (or entered) this droppable.
+     */
+    #handlePlaceholderMove(currentIndex) {
+        let previousIndex = this.#lastPlaceholderIndex;
+        this.#lastPlaceholderIndex = currentIndex;
+        const draggedItem = this.#dragState.draggedItem();
+        if (currentIndex === null || currentIndex === previousIndex || !draggedItem) {
+            return;
+        }
+        // The drag's first placement in the source list starts from the item's own slot:
+        // nothing is displaced when the placeholder simply takes the hidden item's place.
+        const isFirstPlacement = this.#placeholderTrackedDrag !== draggedItem;
+        this.#placeholderTrackedDrag = draggedItem;
+        const sourceDroppableId = this.#dragState.sourceDroppableId();
+        const sourceIndex = this.#dragState.sourceIndex();
+        if (isFirstPlacement && sourceDroppableId === this.vdndDroppable() && sourceIndex !== null) {
+            if (currentIndex === sourceIndex) {
+                return;
+            }
+            previousIndex = sourceIndex;
+        }
+        this.placeholderMove.emit({
+            draggableId: draggedItem.draggableId,
+            sourceDroppableId: sourceDroppableId ?? '',
+            droppableId: this.vdndDroppable(),
+            previousIndex,
+            currentIndex,
+            data: draggedItem.data,
+        });
+    }
     /**
      * Handle a drop on this droppable.
      */
@@ -3654,7 +3947,7 @@ class DroppableDirective {
         return this.#elementRef.nativeElement.scrollHeight;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DroppableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DroppableDirective, isStandalone: true, selector: "[vdndDroppable]", inputs: { vdndDroppable: { classPropertyName: "vdndDroppable", publicName: "vdndDroppable", isSignal: true, isRequired: true, transformFunction: null }, vdndDroppableGroup: { classPropertyName: "vdndDroppableGroup", publicName: "vdndDroppableGroup", isSignal: true, isRequired: false, transformFunction: null }, vdndDroppableData: { classPropertyName: "vdndDroppableData", publicName: "vdndDroppableData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null }, constrainToContainer: { classPropertyName: "constrainToContainer", publicName: "constrainToContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drop: "drop" }, host: { properties: { "attr.data-droppable-id": "vdndDroppable()", "attr.data-droppable-group": "effectiveGroup()", "attr.data-droppable-disabled": "disabled() || null", "attr.data-constrain-to-container": "constrainToContainer() || null", "attr.aria-dropeffect": "\"move\"", "class.vdnd-droppable": "true", "class.vdnd-droppable-active": "isActive()", "class.vdnd-droppable-disabled": "disabled()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DroppableDirective, isStandalone: true, selector: "[vdndDroppable]", inputs: { vdndDroppable: { classPropertyName: "vdndDroppable", publicName: "vdndDroppable", isSignal: true, isRequired: true, transformFunction: null }, vdndDroppableGroup: { classPropertyName: "vdndDroppableGroup", publicName: "vdndDroppableGroup", isSignal: true, isRequired: false, transformFunction: null }, vdndDroppableData: { classPropertyName: "vdndDroppableData", publicName: "vdndDroppableData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null }, constrainToContainer: { classPropertyName: "constrainToContainer", publicName: "constrainToContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drop: "drop", placeholderMove: "placeholderMove" }, host: { properties: { "attr.data-droppable-id": "vdndDroppable()", "attr.data-droppable-group": "effectiveGroup()", "attr.data-droppable-disabled": "disabled() || null", "attr.data-constrain-to-container": "constrainToContainer() || null", "attr.aria-dropeffect": "\"move\"", "class.vdnd-droppable": "true", "class.vdnd-droppable-active": "isActive()", "class.vdnd-droppable-disabled": "disabled()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DroppableDirective, decorators: [{
             type: Directive,
@@ -3671,7 +3964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class.vdnd-droppable-disabled]': 'disabled()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { vdndDroppable: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppable", required: true }] }], vdndDroppableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppableGroup", required: false }] }], vdndDroppableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppableData", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], constrainToContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "constrainToContainer", required: false }] }], drop: [{ type: i0.Output, args: ["drop"] }] } });
+        }], ctorParameters: () => [], propDecorators: { vdndDroppable: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppable", required: true }] }], vdndDroppableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppableGroup", required: false }] }], vdndDroppableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppableData", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], constrainToContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "constrainToContainer", required: false }] }], drop: [{ type: i0.Output, args: ["drop"] }], placeholderMove: [{ type: i0.Output, args: ["placeholderMove"] }] } });
 
 /**
  * A high-level component that combines droppable, virtual scroll, and placeholder
@@ -3760,8 +4053,10 @@ class VirtualSortableListComponent {
     /** Emits when an item is dropped on this list */
     // eslint-disable-next-line @angular-eslint/no-output-native
     drop = output();
+    /** Emits each time the placeholder moves within this list (every item displacement) */
+    placeholderMove = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VirtualSortableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: VirtualSortableListComponent, isStandalone: true, selector: "vdnd-sortable-list", inputs: { droppableId: { classPropertyName: "droppableId", publicName: "droppableId", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, dynamicItemHeight: { classPropertyName: "dynamicItemHeight", publicName: "dynamicItemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemIdFn: { classPropertyName: "itemIdFn", publicName: "itemIdFn", isSignal: true, isRequired: true, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: true, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, droppableData: { classPropertyName: "droppableData", publicName: "droppableData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, containerHeight: { classPropertyName: "containerHeight", publicName: "containerHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null }, constrainToContainer: { classPropertyName: "constrainToContainer", publicName: "constrainToContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drop: "drop" }, host: { classAttribute: "vdnd-sortable-list" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: VirtualSortableListComponent, isStandalone: true, selector: "vdnd-sortable-list", inputs: { droppableId: { classPropertyName: "droppableId", publicName: "droppableId", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, dynamicItemHeight: { classPropertyName: "dynamicItemHeight", publicName: "dynamicItemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemIdFn: { classPropertyName: "itemIdFn", publicName: "itemIdFn", isSignal: true, isRequired: true, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: true, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, droppableData: { classPropertyName: "droppableData", publicName: "droppableData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, containerHeight: { classPropertyName: "containerHeight", publicName: "containerHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null }, constrainToContainer: { classPropertyName: "constrainToContainer", publicName: "constrainToContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drop: "drop", placeholderMove: "placeholderMove" }, host: { classAttribute: "vdnd-sortable-list" }, ngImport: i0, template: `
     <div
       class="vdnd-sortable-list-droppable"
       [vdndDroppable]="droppableId()"
@@ -3770,6 +4065,7 @@ class VirtualSortableListComponent {
       [disabled]="disabled()"
       [constrainToContainer]="constrainToContainer()"
       (drop)="drop.emit($event)"
+      (placeholderMove)="placeholderMove.emit($event)"
     >
       <vdnd-virtual-scroll
         [items]="items()"
@@ -3787,7 +4083,7 @@ class VirtualSortableListComponent {
       >
       </vdnd-virtual-scroll>
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: VirtualScrollContainerComponent, selector: "vdnd-virtual-scroll", inputs: ["itemTemplate", "scrollContainerId", "autoScrollEnabled", "autoScrollConfig", "items", "itemHeight", "dynamicItemHeight", "containerHeight", "overscan", "stickyItemIds", "itemIdFn", "trackByFn", "droppableId", "autoStickyDraggedItem"] }, { kind: "directive", type: DroppableDirective, selector: "[vdndDroppable]", inputs: ["vdndDroppable", "vdndDroppableGroup", "vdndDroppableData", "disabled", "autoScrollEnabled", "autoScrollConfig", "constrainToContainer"], outputs: ["drop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: VirtualScrollContainerComponent, selector: "vdnd-virtual-scroll", inputs: ["itemTemplate", "scrollContainerId", "autoScrollEnabled", "autoScrollConfig", "items", "itemHeight", "dynamicItemHeight", "containerHeight", "overscan", "stickyItemIds", "itemIdFn", "trackByFn", "droppableId", "autoStickyDraggedItem"] }, { kind: "directive", type: DroppableDirective, selector: "[vdndDroppable]", inputs: ["vdndDroppable", "vdndDroppableGroup", "vdndDroppableData", "disabled", "autoScrollEnabled", "autoScrollConfig", "constrainToContainer"], outputs: ["drop", "placeholderMove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VirtualSortableListComponent, decorators: [{
             type: Component,
@@ -3802,6 +4098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
       [disabled]="disabled()"
       [constrainToContainer]="constrainToContainer()"
       (drop)="drop.emit($event)"
+      (placeholderMove)="placeholderMove.emit($event)"
     >
       <vdnd-virtual-scroll
         [items]="items()"
@@ -3820,7 +4117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
       </vdnd-virtual-scroll>
     </div>
   `, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { droppableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableId", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: true }] }], dynamicItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicItemHeight", required: false }] }], itemIdFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemIdFn", required: true }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: true }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], droppableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableData", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], containerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], constrainToContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "constrainToContainer", required: false }] }], drop: [{ type: i0.Output, args: ["drop"] }] } });
+        }], propDecorators: { droppableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableId", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: true }] }], dynamicItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicItemHeight", required: false }] }], itemIdFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemIdFn", required: true }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: true }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], droppableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableData", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], containerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], constrainToContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "constrainToContainer", required: false }] }], drop: [{ type: i0.Output, args: ["drop"] }], placeholderMove: [{ type: i0.Output, args: ["placeholderMove"] }] } });
 
 /**
  * A virtual viewport component that provides efficient wrapper-based positioning
@@ -5537,6 +5834,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { scrollContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainerId", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }] } });
 
+/** Render-queue key of the placeholder entry */
+const PLACEHOLDER_KEY = '__placeholder__';
 /**
  * A structural directive for virtual scrolling within custom scroll containers.
  * Provides maximum flexibility for advanced use cases where the component wrapper
@@ -5588,6 +5887,8 @@ class VirtualForDirective {
      * When present, droppableId is inherited automatically.
      */
     #droppable = inject(DroppableDirective, { optional: true });
+    /** Slides items displaced by the placeholder (only when VDND_ANIMATION_CONFIG is provided) */
+    #shiftAnimator = this.#createShiftAnimator();
     /** Whether we're inside a viewport component (use wrapper positioning) */
     #useViewportPositioning = this.#viewport !== null;
     /** Pool of views for reuse */
@@ -5787,6 +6088,31 @@ class VirtualForDirective {
         this.#placeholder?.remove();
         // Clean up ResizeObserver
         this.#resizeObserver?.disconnect();
+        this.#shiftAnimator?.cancelAll();
+    }
+    #createShiftAnimator() {
+        const config = inject(VDND_ANIMATION_CONFIG, { optional: true });
+        if (!config)
+            return null;
+        return new ShiftAnimator({
+            config,
+            injector: this.#injector,
+            getScrollElement: () => this.#scrollContainer.nativeElement,
+            getEntries: () => this.#shiftAnimationEntries(),
+        });
+    }
+    /** Rendered item root elements (keyed by trackBy key) plus the placeholder. */
+    *#shiftAnimationEntries() {
+        for (const [key, view] of this.#activeViews) {
+            for (const node of view.rootNodes) {
+                if (node instanceof HTMLElement) {
+                    yield [key, node];
+                }
+            }
+        }
+        if (this.#placeholder && this.#placeholderInDom) {
+            yield [PLACEHOLDER_KEY, this.#placeholder];
+        }
     }
     /**
      * Create the placeholder element for drag operations.
@@ -5860,6 +6186,19 @@ class VirtualForDirective {
             }
         }
     }
+    /**
+     * Stop any shift animation on a view about to be pooled — a recycled view must not
+     * carry an in-flight offset over to the item it renders next.
+     */
+    #cancelShiftAnimation(view) {
+        if (!this.#shiftAnimator)
+            return;
+        for (const node of view.rootNodes) {
+            if (node instanceof HTMLElement) {
+                this.#shiftAnimator.cancel(node);
+            }
+        }
+    }
     /**
      * Stop observing an element's root nodes.
      */
@@ -5892,6 +6231,8 @@ class VirtualForDirective {
             draggedIndex >= 0 &&
             isSourceList &&
             draggedIndex < items.length;
+        // Snapshot positions before the DOM changes so displaced items can slide
+        this.#shiftAnimator?.beforeUpdate(this.#dragState.isDragging(), placeholderIndex);
         // Notify viewport of render start index for wrapper positioning
         this.#notifyViewportRenderStart(start);
         // 1. Build the list of items to render
@@ -5937,7 +6278,7 @@ class VirtualForDirective {
             if (showPlaceholder && placeholderIndex === i && !placeholderInserted) {
                 itemsToRender.push({
                     type: 'placeholder',
-                    key: '__placeholder__',
+                    key: PLACEHOLDER_KEY,
                     context: null,
                     visualIndex: placeholderIndex,
                 });
@@ -5961,7 +6302,7 @@ class VirtualForDirective {
         if (showPlaceholder && placeholderIndex >= items.length && !placeholderInserted) {
             itemsToRender.push({
                 type: 'placeholder',
-                key: '__placeholder__',
+                key: PLACEHOLDER_KEY,
                 context: null,
                 visualIndex: placeholderIndex,
             });
@@ -6004,6 +6345,7 @@ class VirtualForDirective {
                     this.#viewContainer.detach(index);
                 }
                 this.#unobserveViewElements(view);
+                this.#cancelShiftAnimation(view);
                 this.#viewPool.push(view);
                 this.#activeViews.delete(key);
             }
@@ -6398,5 +6740,5 @@ function removeAt(list, index) {
  * Generated bundle index. Do not edit.
  */
 
-export { AutoScrollService, ContentHeaderDirective, DragPlaceholderComponent, DragPreviewComponent, DragStateService, DraggableDirective, DroppableDirective, DroppableGroupDirective, DynamicHeightStrategy, END_OF_LIST, ElementCloneService, FixedHeightStrategy, INITIAL_DRAG_STATE, KeyboardDragService, OverlayContainerService, PlaceholderComponent, PositionCalculatorService, ScrollableDirective, VDND_GROUP_TOKEN, VDND_SCROLL_CONTAINER, VDND_VIRTUAL_VIEWPORT, VirtualContentComponent, VirtualForDirective, VirtualScrollContainerComponent, VirtualSortableListComponent, VirtualViewportComponent, applyMove, insertAt, isNoOpDrop, moveItem, removeAt, reorderItems };
+export { AutoScrollService, ContentHeaderDirective, DragPlaceholderComponent, DragPreviewComponent, DragStateService, DraggableDirective, DroppableDirective, DroppableGroupDirective, DynamicHeightStrategy, END_OF_LIST, ElementCloneService, FixedHeightStrategy, INITIAL_DRAG_STATE, KeyboardDragService, OverlayContainerService, PlaceholderComponent, PositionCalculatorService, ScrollableDirective, VDND_ANIMATION_CONFIG, VDND_GROUP_TOKEN, VDND_SCROLL_CONTAINER, VDND_VIRTUAL_VIEWPORT, VirtualContentComponent, VirtualForDirective, VirtualScrollContainerComponent, VirtualSortableListComponent, VirtualViewportComponent, applyMove, insertAt, isNoOpDrop, moveItem, removeAt, reorderItems };
 //# sourceMappingURL=ngx-virtual-dnd.mjs.map