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

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,
@@ -1863,6 +1882,8 @@ class KeyboardDragService {
     #dragState = inject(DragStateService);
     /** Total item count for the current droppable (set by droppable on keyboard drag start) */
     #totalItemCount = signal(0, ...(ngDevMode ? [{ debugName: "#totalItemCount" }] : []));
+    /** Per-droppable callbacks that scroll the placeholder into view (see `registerRevealer`) */
+    #revealers = new Map();
     /** Whether a keyboard drag is currently active */
     isActive = computed(() => this.#dragState.isKeyboardDrag() && this.#dragState.isDragging(), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
     /** Current target index during keyboard navigation */
@@ -1898,9 +1919,10 @@ class KeyboardDragService {
         if (!this.isActive()) {
             return targetIndex;
         }
-        const totalItems = this.#totalItemCount();
-        const clampedIndex = Math.max(0, Math.min(targetIndex, totalItems));
+        const maxIndex = this.#maxTargetIndex(this.activeDroppableId());
+        const clampedIndex = Math.max(0, Math.min(targetIndex, maxIndex));
         this.#dragState.setKeyboardTargetIndex(clampedIndex);
+        this.#revealActivePlaceholder();
         return clampedIndex;
     }
     /**
@@ -1928,8 +1950,26 @@ class KeyboardDragService {
             return;
         }
         this.#totalItemCount.set(totalItemCount);
-        const clampedIndex = Math.max(0, Math.min(targetIndex, totalItemCount));
+        const clampedIndex = Math.max(0, Math.min(targetIndex, this.#maxTargetIndex(droppableId)));
         this.#dragState.setKeyboardActiveDroppable(droppableId, clampedIndex);
+        this.#revealActivePlaceholder();
+    }
+    /**
+     * Register the callback that scrolls a droppable's placeholder into view. It runs
+     * synchronously on every keyboard move into or within that droppable, so a drop that
+     * follows before the next render still lands inside the rendered range.
+     */
+    registerRevealer(droppableId, reveal) {
+        this.#revealers.set(droppableId, reveal);
+    }
+    /**
+     * Unregister a droppable's reveal callback. Ignored if another callback has since been
+     * registered under the same ID.
+     */
+    unregisterRevealer(droppableId, reveal) {
+        if (this.#revealers.get(droppableId) === reveal) {
+            this.#revealers.delete(droppableId);
+        }
     }
     /**
      * Complete the keyboard drag (Space or Enter to drop).
@@ -1955,6 +1995,22 @@ class KeyboardDragService {
     setTotalItemCount(count) {
         this.#totalItemCount.set(count);
     }
+    #revealActivePlaceholder() {
+        const droppableId = this.activeDroppableId();
+        if (droppableId !== null) {
+            this.#revealers.get(droppableId)?.();
+        }
+    }
+    /**
+     * Last valid target index in the given droppable. Targets use the drop convention (the item's
+     * final index after it leaves its source), so the source list ends at `totalItemCount - 1`,
+     * while any other list can be appended to at `totalItemCount`.
+     */
+    #maxTargetIndex(droppableId) {
+        const totalItems = this.#totalItemCount();
+        const isSourceList = droppableId !== null && droppableId === this.#dragState.sourceDroppableId();
+        return isSourceList ? Math.max(0, totalItems - 1) : totalItems;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KeyboardDragService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KeyboardDragService, providedIn: 'root' });
 }
@@ -2426,6 +2482,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.
  *
@@ -2468,6 +2699,7 @@ class VirtualScrollContainerComponent {
     #elementRef = inject((ElementRef));
     #autoScrollService = inject(AutoScrollService);
     #dragIndexCalculator = inject(DragIndexCalculatorService);
+    #keyboardDrag = inject(KeyboardDragService);
     #ngZone = inject(NgZone);
     #injector = inject(Injector);
     /** Cleanup function for scroll listener */
@@ -2481,6 +2713,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,43 +3007,29 @@ class VirtualScrollContainerComponent {
             const draggedIndex = this.#draggedItemIndex();
             strategy.setExcludedIndex(draggedIndex >= 0 ? draggedIndex : null);
         });
-        // Keyboard drag autoscroll: scroll to keep target index visible
-        effect(() => {
-            // Only apply when this droppable is active during keyboard drag
-            if (!this.#dragState.isKeyboardDrag())
-                return;
-            const activeDroppable = this.#dragState.activeDroppableId();
-            if (activeDroppable !== this.droppableId())
-                return;
-            const targetIndex = this.#dragState.keyboardTargetIndex();
-            if (targetIndex === null)
-                return;
-            const strategy = this.#strategy();
-            strategy.version();
-            const height = this.effectiveHeight();
-            if (height <= 0)
+        // 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: keep the placeholder visible. Arrow keys call
+        // #revealPlaceholder synchronously (through KeyboardDragService) so a drop right after a
+        // move never lands outside the rendered range; this effect re-runs it when item
+        // measurements or the viewport height change during the drag.
+        effect((onCleanup) => {
+            const droppableId = this.droppableId();
+            if (!droppableId)
                 return;
-            const element = this.#elementRef.nativeElement;
-            const currentScrollTop = element.scrollTop;
-            // Calculate target item position using strategy
-            const targetTop = strategy.getOffsetForIndex(targetIndex);
-            const targetBottom = targetTop + strategy.getItemHeight(targetIndex);
-            // Calculate visible range
-            const viewportTop = currentScrollTop;
-            const viewportBottom = currentScrollTop + height;
-            // Check if target is fully visible
-            if (targetTop < viewportTop) {
-                // Target is above viewport - scroll up
-                element.scrollTop = targetTop;
-                this.#scrollTop.set(targetTop);
-            }
-            else if (targetBottom > viewportBottom) {
-                // Target is below viewport - scroll down
-                const newScrollTop = targetBottom - height;
-                element.scrollTop = newScrollTop;
-                this.#scrollTop.set(newScrollTop);
-            }
+            const reveal = () => untracked(() => this.#revealPlaceholder());
+            this.#keyboardDrag.registerRevealer(droppableId, reveal);
+            onCleanup(() => this.#keyboardDrag.unregisterRevealer(droppableId, reveal));
         });
+        effect(() => this.#revealPlaceholder());
         // Preserve scroll position when drag ends at bottom of list.
         // Safety net: totalHeight no longer shrinks during drag (getTotalHeight
         // ignores exclusion), but this logic remains as harmless protection
@@ -2890,6 +3110,50 @@ class VirtualScrollContainerComponent {
             this.#observeRenderedItems();
         }
     }
+    /**
+     * Scroll so the placeholder is fully visible during a keyboard drag into this list.
+     * Reads only signals and strategy offsets, so it works before the placeholder renders.
+     */
+    #revealPlaceholder() {
+        // Only apply when this droppable is active during keyboard drag
+        if (!this.#dragState.isKeyboardDrag())
+            return;
+        const activeDroppable = this.#dragState.activeDroppableId();
+        if (activeDroppable !== this.droppableId())
+            return;
+        // The placeholder renders before the item at placeholderIndex. Below the source in the
+        // same list that is keyboardTargetIndex + 1: the dragged item's slot is excluded.
+        if (this.#dragState.keyboardTargetIndex() === null)
+            return;
+        const placeholderIndex = this.placeholderIndex();
+        if (placeholderIndex < 0)
+            return;
+        const strategy = this.#strategy();
+        strategy.version();
+        const height = this.effectiveHeight();
+        if (height <= 0)
+            return;
+        const element = this.#elementRef.nativeElement;
+        const currentScrollTop = element.scrollTop;
+        // Calculate placeholder position using strategy
+        const targetTop = strategy.getOffsetForIndex(placeholderIndex);
+        const targetBottom = targetTop + this.placeholderHeight();
+        // Calculate visible range
+        const viewportTop = currentScrollTop;
+        const viewportBottom = currentScrollTop + height;
+        // Check if target is fully visible
+        if (targetTop < viewportTop) {
+            // Target is above viewport - scroll up
+            element.scrollTop = targetTop;
+            this.#scrollTop.set(targetTop);
+        }
+        else if (targetBottom > viewportBottom) {
+            // Target is below viewport - scroll down
+            const newScrollTop = targetBottom - height;
+            element.scrollTop = newScrollTop;
+            this.#scrollTop.set(newScrollTop);
+        }
+    }
     ngOnDestroy() {
         this.#scrollCleanup?.();
         this.#resizeCleanup?.();
@@ -2898,6 +3162,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 +3751,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 +3768,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 +3818,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 +3871,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 +4005,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 +4022,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 +4111,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 +4123,7 @@ class VirtualSortableListComponent {
       [disabled]="disabled()"
       [constrainToContainer]="constrainToContainer()"
       (drop)="drop.emit($event)"
+      (placeholderMove)="placeholderMove.emit($event)"
     >
       <vdnd-virtual-scroll
         [items]="items()"
@@ -3787,7 +4141,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 +4156,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 +4175,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
@@ -4457,9 +4812,13 @@ class KeyboardDragHandler {
             sourceIndex,
             destinationIndex,
         });
+        // The item stays in its source list when there is no valid target
+        const fallbackDroppableId = hasValidTarget
+            ? activeDroppableId
+            : this.#deps.dragState.sourceDroppableId();
         this.#deps.keyboardDrag.completeKeyboardDrag();
         // Restore focus to the moved element after state updates
-        this.#restoreFocus(ctx.draggableId);
+        this.#restoreFocus(ctx.draggableId, fallbackDroppableId);
     }
     /**
      * Cancel a keyboard drag operation.
@@ -4467,6 +4826,8 @@ class KeyboardDragHandler {
     cancel() {
         const ctx = this.#deps.getContext();
         const sourceIndex = this.#deps.dragState.sourceIndex() ?? 0;
+        // A cancelled item goes back to its source list
+        const sourceDroppableId = this.#deps.dragState.sourceDroppableId();
         // Remove document listener
         this.#cleanupDocumentListener();
         // Clear droppable metadata cache from this drag session
@@ -4482,7 +4843,7 @@ class KeyboardDragHandler {
         });
         this.#deps.keyboardDrag.cancelKeyboardDrag();
         // Restore focus to the original element after state updates
-        this.#restoreFocus(ctx.draggableId);
+        this.#restoreFocus(ctx.draggableId, sourceDroppableId);
     }
     /**
      * Teardown — remove any active document listener.
@@ -4497,20 +4858,21 @@ class KeyboardDragHandler {
      *
      * Uses EnvironmentInjector to ensure callback runs even if the directive
      * is destroyed during cross-list moves.
+     *
+     * `fallbackDroppableId` is the list whose first draggable gets focus when the element is not
+     * rendered (for example scrolled out of a virtual list). Callers read it before ending the
+     * drag, which clears the drag state.
      */
-    #restoreFocus(draggableId) {
-        // Capture the destination droppable BEFORE scheduling afterNextRender
-        // (the directive may be destroyed during cross-list moves)
-        const destinationDroppableId = this.#deps.dragState.activeDroppableId();
+    #restoreFocus(draggableId, fallbackDroppableId) {
         afterNextRender(() => {
             const element = queryByAttribute(document, 'data-draggable-id', draggableId);
             if (element) {
                 element.focus();
             }
-            else if (destinationDroppableId) {
-                // Fallback: focus the first draggable in the destination container
-                const destination = queryByAttribute(document, 'data-droppable-id', destinationDroppableId);
-                const firstDraggable = destination?.querySelector('[data-draggable-id]');
+            else if (fallbackDroppableId) {
+                // Fallback: focus the first draggable in the list the item ended up in
+                const container = queryByAttribute(document, 'data-droppable-id', fallbackDroppableId);
+                const firstDraggable = container?.querySelector('[data-draggable-id]');
                 firstDraggable?.focus();
             }
         }, { injector: this.#deps.envInjector });
@@ -5537,6 +5899,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 +5952,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 +6153,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 +6251,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 +6296,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 +6343,7 @@ class VirtualForDirective {
             if (showPlaceholder && placeholderIndex === i && !placeholderInserted) {
                 itemsToRender.push({
                     type: 'placeholder',
-                    key: '__placeholder__',
+                    key: PLACEHOLDER_KEY,
                     context: null,
                     visualIndex: placeholderIndex,
                 });
@@ -5961,7 +6367,7 @@ class VirtualForDirective {
         if (showPlaceholder && placeholderIndex >= items.length && !placeholderInserted) {
             itemsToRender.push({
                 type: 'placeholder',
-                key: '__placeholder__',
+                key: PLACEHOLDER_KEY,
                 context: null,
                 visualIndex: placeholderIndex,
             });
@@ -6004,6 +6410,7 @@ class VirtualForDirective {
                     this.#viewContainer.detach(index);
                 }
                 this.#unobserveViewElements(view);
+                this.#cancelShiftAnimation(view);
                 this.#viewPool.push(view);
                 this.#activeViews.delete(key);
             }
@@ -6398,5 +6805,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