ngx-virtual-dnd 1.2.2 → 1.2.3

package/fesm2022/ngx-virtual-dnd.mjs

@@ -824,13 +824,10 @@ class ElementCloneService {
                 placeholder.style.cssText = `
           width: 100%;
           height: 100%;
-          background: #333;
           display: flex;
           align-items: center;
           justify-content: center;
-          color: #666;
         `;
-                placeholder.textContent = 'Video';
                 video.replaceWith(placeholder);
             }
         });
@@ -841,13 +838,9 @@ class ElementCloneService {
             const iframeStyles = window.getComputedStyle(iframe);
             placeholder.style.width = iframeStyles.width;
             placeholder.style.height = iframeStyles.height;
-            placeholder.style.background = '#f0f0f0';
-            placeholder.style.border = '1px solid #ddd';
             placeholder.style.display = 'flex';
             placeholder.style.alignItems = 'center';
             placeholder.style.justifyContent = 'center';
-            placeholder.style.color = '#999';
-            placeholder.textContent = 'Embedded content';
             iframe.replaceWith(placeholder);
         });
     }
@@ -1020,6 +1013,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
+/**
+ * Service that manages a shared overlay container appended to `document.body`.
+ *
+ * Elements placed inside the overlay container escape any ancestor CSS `transform`,
+ * `perspective`, or `filter` that would create a new containing block for
+ * `position: fixed` children. This ensures viewport-relative positioning works
+ * correctly regardless of where the consuming component sits in the DOM tree.
+ *
+ * Mirrors the strategy used by Angular CDK's `OverlayContainer`.
+ */
+class OverlayContainerService {
+    #containerElement = null;
+    /**
+     * Returns the shared overlay container element, lazily creating it on first access.
+     * Returns `null` in non-browser environments (SSR).
+     */
+    getContainerElement() {
+        if (typeof document === 'undefined') {
+            return null;
+        }
+        if (!this.#containerElement) {
+            this.#containerElement = document.createElement('div');
+            this.#containerElement.classList.add('vdnd-overlay-container');
+            document.body.appendChild(this.#containerElement);
+        }
+        return this.#containerElement;
+    }
+    ngOnDestroy() {
+        this.#containerElement?.remove();
+        this.#containerElement = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OverlayContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OverlayContainerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OverlayContainerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /**
  * Renders an empty placeholder that takes up space in the document flow.
  *
@@ -1605,8 +1639,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 /**
  * Renders a preview of the dragged item that follows the cursor.
  *
- * This component should be placed at the root of your application (or at least
- * outside of any scrollable containers) to ensure the preview is always visible.
+ * The component automatically teleports itself into a body-level overlay container,
+ * so it works correctly even inside ancestors with CSS `transform` (e.g. Ionic pages).
+ * It can be placed anywhere in the component tree.
  *
  * @example
  * ```html
@@ -1619,6 +1654,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  */
 class DragPreviewComponent {
     dragState = inject(DragStateService);
+    #overlayContainer = inject(OverlayContainerService);
+    #elementRef = inject((ElementRef));
     /** Optional custom template for the preview */
     previewTemplate = input(...(ngDevMode ? [undefined, { debugName: "previewTemplate" }] : []));
     /** Offset from cursor to preview (to avoid cursor being on top of preview) */
@@ -1633,6 +1670,14 @@ class DragPreviewComponent {
         return this.dragState.draggedItem()?.clonedElement ?? null;
     }, ...(ngDevMode ? [{ debugName: "clonedElement" }] : []));
     constructor() {
+        // Teleport host element into the body-level overlay container after first render.
+        // This escapes any ancestor CSS transforms that would break position: fixed.
+        afterNextRender(() => {
+            const container = this.#overlayContainer.getContainerElement();
+            if (container) {
+                container.appendChild(this.#elementRef.nativeElement);
+            }
+        });
         // Effect to insert the cloned element into the container
         effect(() => {
             const container = this.cloneContainer()?.nativeElement;
@@ -1648,6 +1693,9 @@ class DragPreviewComponent {
             }
         });
     }
+    ngOnDestroy() {
+        this.#elementRef.nativeElement.remove();
+    }
     /** Whether the preview is visible */
     isVisible = computed(() => {
         return this.dragState.isDragging() && this.dragState.cursorPosition() !== null;
@@ -1709,6 +1757,7 @@ class DragPreviewComponent {
     @if (isVisible()) {
       <div
         class="vdnd-drag-preview"
+        data-testid="vdnd-drag-preview"
         [style.position]="'fixed'"
         [style.left.px]="0"
         [style.top.px]="0"
@@ -1718,7 +1767,6 @@ class DragPreviewComponent {
         [style.height.px]="dimensions().height"
         [style.pointer-events]="'none'"
         [style.z-index]="1000"
-        [style.opacity]="0.9"
       >
         @if (previewTemplate()) {
           <ng-container *ngTemplateOutlet="previewTemplate()!; context: templateContext()">
@@ -1732,7 +1780,7 @@ class DragPreviewComponent {
         }
       </div>
     }
-  `, isInline: true, styles: [".vdnd-drag-preview{box-sizing:border-box}.vdnd-drag-preview-clone{width:100%;height:100%;box-shadow:0 4px 12px #00000026;border-radius:4px;overflow:hidden}.vdnd-drag-preview-default{padding:8px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".vdnd-drag-preview{box-sizing:border-box}.vdnd-drag-preview-clone{width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DragPreviewComponent, decorators: [{
             type: Component,
@@ -1740,6 +1788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
     @if (isVisible()) {
       <div
         class="vdnd-drag-preview"
+        data-testid="vdnd-drag-preview"
         [style.position]="'fixed'"
         [style.left.px]="0"
         [style.top.px]="0"
@@ -1749,7 +1798,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         [style.height.px]="dimensions().height"
         [style.pointer-events]="'none'"
         [style.z-index]="1000"
-        [style.opacity]="0.9"
       >
         @if (previewTemplate()) {
           <ng-container *ngTemplateOutlet="previewTemplate()!; context: templateContext()">
@@ -1763,7 +1811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         }
       </div>
     }
-  `, styles: [".vdnd-drag-preview{box-sizing:border-box}.vdnd-drag-preview-clone{width:100%;height:100%;box-shadow:0 4px 12px #00000026;border-radius:4px;overflow:hidden}.vdnd-drag-preview-default{padding:8px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026}\n"] }]
+  `, styles: [".vdnd-drag-preview{box-sizing:border-box}.vdnd-drag-preview-clone{width:100%;height:100%;overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { previewTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewTemplate", required: false }] }], cursorOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "cursorOffset", required: false }] }], cloneContainer: [{ type: i0.ViewChild, args: ['cloneContainer', { isSignal: true }] }] } });
 
 /**
@@ -1796,7 +1844,8 @@ class PlaceholderComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PlaceholderComponent, isStandalone: true, selector: "vdnd-placeholder", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height.px": "height()", "attr.data-draggable-id": "\"placeholder\"" }, classAttribute: "vdnd-placeholder" }, ngImport: i0, template: `
     @if (template()) {
       <ng-container
-        *ngTemplateOutlet="template()!; context: { $implicit: height(), height: height() }">
+        *ngTemplateOutlet="template()!; context: { $implicit: height(), height: height() }"
+      >
       </ng-container>
     }
   `, isInline: true, styles: [":host{display:block;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1810,7 +1859,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     }, template: `
     @if (template()) {
       <ng-container
-        *ngTemplateOutlet="template()!; context: { $implicit: height(), height: height() }">
+        *ngTemplateOutlet="template()!; context: { $implicit: height(), height: height() }"
+      >
       </ng-container>
     }
   `, styles: [":host{display:block;box-sizing:border-box}\n"] }]
@@ -1867,6 +1917,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndGroup", required: true }] }] } });
 
+/**
+ * Creates a computed signal that resolves the effective group name for a draggable or droppable.
+ *
+ * Resolution order:
+ * 1. Explicit group input (vdndDraggableGroup or vdndDroppableGroup)
+ * 2. Inherited group from parent vdndGroup directive
+ * 3. null (with dev-mode warning)
+ *
+ * @example
+ * ```typescript
+ * readonly #effectiveGroup = createEffectiveGroupSignal({
+ *   explicitGroup: this.vdndDraggableGroup,
+ *   parentGroup: this.#parentGroup,
+ *   elementId: this.vdndDraggable,
+ *   elementType: 'draggable',
+ * });
+ * ```
+ */
+function createEffectiveGroupSignal(options) {
+    const { explicitGroup, parentGroup, elementId, elementType } = options;
+    // State object to track whether we've warned (mutable closure state)
+    const state = { hasWarnedMissingGroup: false };
+    return computed(() => {
+        const explicit = explicitGroup();
+        if (explicit)
+            return explicit;
+        const inherited = parentGroup?.group();
+        if (inherited)
+            return inherited;
+        if (isDevMode() && !state.hasWarnedMissingGroup) {
+            const directive = elementType === 'draggable' ? 'vdndDraggable' : 'vdndDroppable';
+            const groupInput = elementType === 'draggable' ? 'vdndDraggableGroup' : 'vdndDroppableGroup';
+            const action = elementType === 'draggable' ? 'Drag' : 'Dropping';
+            console.warn(`[ngx-virtual-dnd] [${directive}="${elementId()}"] requires a group. ` +
+                `Either set ${groupInput} or wrap in a vdndGroup directive. ` +
+                `${action} will be disabled for this element.`);
+            state.hasWarnedMissingGroup = true;
+        }
+        return null;
+    });
+}
+
 /**
  * Marks an element as a valid drop target within the virtual scroll drag-and-drop system.
  *
@@ -1904,22 +1996,12 @@ class DroppableDirective {
      * Resolved group name - uses explicit input or falls back to parent group.
      * Returns null (and disables dropping) if neither is available.
      */
-    #hasWarnedMissingGroup = false;
-    effectiveGroup = computed(() => {
-        const explicit = this.vdndDroppableGroup();
-        if (explicit)
-            return explicit;
-        const inherited = this.#parentGroup?.group();
-        if (inherited)
-            return inherited;
-        if (isDevMode() && !this.#hasWarnedMissingGroup) {
-            console.warn(`[ngx-virtual-dnd] [vdndDroppable="${this.vdndDroppable()}"] requires a group. ` +
-                'Either set vdndDroppableGroup or wrap in a vdndGroup directive. ' +
-                'Dropping will be disabled for this element.');
-            this.#hasWarnedMissingGroup = true;
-        }
-        return null;
-    }, ...(ngDevMode ? [{ debugName: "effectiveGroup" }] : []));
+    effectiveGroup = createEffectiveGroupSignal({
+        explicitGroup: this.vdndDroppableGroup,
+        parentGroup: this.#parentGroup,
+        elementId: this.vdndDroppable,
+        elementType: 'droppable',
+    });
     /** Optional data associated with this droppable */
     vdndDroppableData = input(...(ngDevMode ? [undefined, { debugName: "vdndDroppableData" }] : []));
     /** Whether this droppable is disabled */
@@ -2945,22 +3027,12 @@ class DraggableDirective {
      * Resolved group name - uses explicit input or falls back to parent group.
      * Returns null (and disables drag) if neither is available.
      */
-    #hasWarnedMissingGroup = false;
-    #effectiveGroup = computed(() => {
-        const explicit = this.vdndDraggableGroup();
-        if (explicit)
-            return explicit;
-        const inherited = this.#parentGroup?.group();
-        if (inherited)
-            return inherited;
-        if (isDevMode() && !this.#hasWarnedMissingGroup) {
-            console.warn(`[ngx-virtual-dnd] [vdndDraggable="${this.vdndDraggable()}"] requires a group. ` +
-                'Either set vdndDraggableGroup or wrap in a vdndGroup directive. ' +
-                'Drag will be disabled for this element.');
-            this.#hasWarnedMissingGroup = true;
-        }
-        return null;
-    }, ...(ngDevMode ? [{ debugName: "#effectiveGroup" }] : []));
+    #effectiveGroup = createEffectiveGroupSignal({
+        explicitGroup: this.vdndDraggableGroup,
+        parentGroup: this.#parentGroup,
+        elementId: this.vdndDraggable,
+        elementType: 'draggable',
+    });
     /** Optional data associated with this draggable */
     vdndDraggableData = input(...(ngDevMode ? [undefined, { debugName: "vdndDraggableData" }] : []));
     /** Whether this draggable is disabled */
@@ -4067,7 +4139,6 @@ class VirtualForDirective {
     #updateViews() {
         const items = this.vdndVirtualForOf();
         const { start, end } = this.#renderRange();
-        const trackByFn = this.vdndVirtualForTrackBy();
         const itemHeight = this.vdndVirtualForItemHeight();
         const placeholderIndex = this.#placeholderIndex();
         const showPlaceholder = this.#shouldShowPlaceholder();
@@ -4079,18 +4150,45 @@ class VirtualForDirective {
             draggedIndex >= 0 &&
             isSourceList &&
             draggedIndex < items.length;
-        // Notify viewport of render start index for wrapper positioning.
-        // Adjust when the dragged item is above the rendered range so the wrapper
-        // stays aligned with the collapsed list (dragged item is display:none).
-        const shouldAdjustRenderStart = this.#useViewportPositioning &&
-            this.#dragState.isDragging() &&
-            isSourceList &&
-            draggedIndex >= 0 &&
-            draggedIndex < start;
+        // Notify viewport of render start index for wrapper positioning
+        this.#notifyViewportRenderStart(start, isSourceList, draggedIndex);
+        // 1. Build the list of items to render
+        const itemsToRender = this.#calculateItemsToRender({
+            items,
+            start,
+            end,
+            showPlaceholder,
+            placeholderIndex,
+            shouldKeepDragged,
+            draggedIndex,
+        });
+        // 2. Reconcile views with the DOM
+        const placeholderDomPosition = this.#reconcileViews(itemsToRender, showPlaceholder, itemHeight);
+        // 3. Position placeholder in DOM
+        this.#positionPlaceholder(showPlaceholder, placeholderDomPosition, itemHeight);
+        // 4. Trim view pool to prevent memory bloat
+        this.#trimViewPool();
+    }
+    /**
+     * Notify viewport of render start index for wrapper positioning.
+     * Adjusts when the dragged item is above the rendered range.
+     */
+    #notifyViewportRenderStart(start, isSourceList, draggedIndex) {
+        if (!this.#useViewportPositioning)
+            return;
+        const shouldAdjustRenderStart = this.#dragState.isDragging() && isSourceList && draggedIndex >= 0 && draggedIndex < start;
         const renderStartIndex = shouldAdjustRenderStart ? Math.max(0, start - 1) : start;
         this.#viewport?.setRenderStartIndex(renderStartIndex);
-        // 1. Calculate which keys we need and build the ordered list of items to render
+    }
+    /**
+     * Calculate the list of items to render, including placeholder positioning
+     * and keeping the dragged item alive when scrolled out of range.
+     */
+    #calculateItemsToRender(params) {
+        const { items, start, end, showPlaceholder, placeholderIndex, shouldKeepDragged, draggedIndex, } = params;
+        const trackByFn = this.vdndVirtualForTrackBy();
         const itemsToRender = [];
+        // Build render list for visible range
         for (let i = start; i <= end && i < items.length; i++) {
             // Insert placeholder before item at placeholderIndex
             if (showPlaceholder &&
@@ -4117,7 +4215,7 @@ class VirtualForDirective {
                 visualIndex: i,
             });
         }
-        // If placeholder is at the end (after all rendered items), add it
+        // Add placeholder at end if needed
         if (showPlaceholder &&
             placeholderIndex >= items.length &&
             !itemsToRender.some((r) => r.type === 'placeholder')) {
@@ -4128,8 +4226,7 @@ class VirtualForDirective {
                 visualIndex: placeholderIndex,
             });
         }
-        // Keep the dragged item view alive when it scrolls out of range.
-        // This prevents the draggable directive from being recycled during long autoscrolls.
+        // Keep dragged item view alive when scrolled out of range
         if (shouldKeepDragged && (draggedIndex < start || draggedIndex > end)) {
             const draggedItem = items[draggedIndex];
             const draggedKey = trackByFn(draggedIndex, draggedItem);
@@ -4149,8 +4246,17 @@ class VirtualForDirective {
                 });
             }
         }
+        return itemsToRender;
+    }
+    /**
+     * Reconcile views with the calculated items to render.
+     * Moves unused views to pool, updates existing views, creates new views as needed.
+     * Returns the DOM position where placeholder should be inserted.
+     */
+    #reconcileViews(itemsToRender, showPlaceholder, itemHeight) {
+        // Determine which keys we need
         const neededKeys = new Set(itemsToRender.filter((r) => r.type === 'item').map((item) => item.key));
-        // 2. Remove views we no longer need (move to pool)
+        // Move unused views to pool
         for (const [key, view] of this.#activeViews) {
             if (!neededKeys.has(key)) {
                 const index = this.#viewContainer.indexOf(view);
@@ -4166,36 +4272,16 @@ class VirtualForDirective {
             this.#placeholder.remove();
             this.#placeholderInDom = false;
         }
-        // 3. First, process all item views (placeholder is handled separately via DOM)
+        // Process items and track placeholder position
         let viewContainerIndex = 0;
-        let placeholderDomPosition = -1; // Track where placeholder should go in DOM
+        let placeholderDomPosition = -1;
         for (const entry of itemsToRender) {
             if (entry.type === 'placeholder') {
-                // Remember the DOM position for placeholder (based on how many items rendered before it)
                 placeholderDomPosition = viewContainerIndex;
                 continue;
             }
-            // Handle regular item
-            const { key, context } = entry;
-            let view = this.#activeViews.get(key);
-            if (view) {
-                // View exists - update context in place (no DOM manipulation needed)
-                Object.assign(view.context, context);
-                view.markForCheck();
-            }
-            else {
-                // Need a new view - try pool first, then create
-                view = this.#viewPool.pop();
-                if (view) {
-                    Object.assign(view.context, context);
-                    view.markForCheck();
-                }
-                else {
-                    view = this.#templateRef.createEmbeddedView(context);
-                }
-                this.#activeViews.set(key, view);
-            }
-            // Ensure view is in ViewContainerRef at correct position
+            const view = this.#getOrCreateView(entry.key, entry.context);
+            // Ensure view is at correct position in ViewContainerRef
             const currentIndex = this.#viewContainer.indexOf(view);
             if (currentIndex !== viewContainerIndex) {
                 if (currentIndex >= 0) {
@@ -4205,60 +4291,99 @@ class VirtualForDirective {
                     this.#viewContainer.insert(view, viewContainerIndex);
                 }
             }
-            // Apply absolute positioning only when NOT inside a viewport component
-            // (viewport provides wrapper-based transform positioning)
+            // Apply absolute positioning when not using viewport wrapper
             if (!this.#useViewportPositioning) {
-                const topOffset = entry.visualIndex * itemHeight;
-                for (const node of view.rootNodes) {
-                    if (node instanceof HTMLElement) {
-                        node.style.position = 'absolute';
-                        node.style.top = `${topOffset}px`;
-                        node.style.left = '0';
-                        node.style.right = '0';
-                    }
-                }
+                this.#applyAbsolutePositioning(view, entry.visualIndex * itemHeight);
             }
             viewContainerIndex++;
         }
-        // 4. Handle placeholder DOM insertion (separate from ViewContainerRef)
-        if (showPlaceholder && this.#placeholder && placeholderDomPosition >= 0) {
-            this.#placeholder.style.height = `${itemHeight}px`;
-            // Get the container element (parent of views)
-            const container = this.#viewContainer.element.nativeElement.parentElement;
-            if (container) {
-                // Find the element to insert before (nth child, excluding spacers and placeholder itself)
-                const children = Array.from(container.children).filter((el) => {
-                    const element = el;
-                    return (!element.classList.contains('vdnd-drag-placeholder') &&
-                        !element.classList.contains('vdnd-virtual-for-spacer') &&
-                        !element.classList.contains('vdnd-content-spacer'));
-                });
-                const insertBeforeEl = children[placeholderDomPosition] ?? null;
-                if (!this.#placeholderInDom) {
-                    if (insertBeforeEl) {
-                        container.insertBefore(this.#placeholder, insertBeforeEl);
-                    }
-                    else {
-                        container.appendChild(this.#placeholder);
-                    }
-                    this.#placeholderInDom = true;
+        return placeholderDomPosition;
+    }
+    /**
+     * Get an existing view or create/recycle one from the pool.
+     */
+    #getOrCreateView(key, context) {
+        let view = this.#activeViews.get(key);
+        if (view) {
+            // Update existing view context
+            Object.assign(view.context, context);
+            view.markForCheck();
+        }
+        else {
+            // Try pool first, then create new
+            view = this.#viewPool.pop();
+            if (view) {
+                Object.assign(view.context, context);
+                view.markForCheck();
+            }
+            else {
+                view = this.#templateRef.createEmbeddedView(context);
+            }
+            this.#activeViews.set(key, view);
+        }
+        return view;
+    }
+    /**
+     * Apply absolute positioning styles to a view's root nodes.
+     */
+    #applyAbsolutePositioning(view, topOffset) {
+        for (const node of view.rootNodes) {
+            if (node instanceof HTMLElement) {
+                node.style.position = 'absolute';
+                node.style.top = `${topOffset}px`;
+                node.style.left = '0';
+                node.style.right = '0';
+            }
+        }
+    }
+    /**
+     * Position the placeholder element in the DOM at the correct index.
+     */
+    #positionPlaceholder(showPlaceholder, placeholderDomPosition, itemHeight) {
+        if (!showPlaceholder || !this.#placeholder || placeholderDomPosition < 0) {
+            return;
+        }
+        this.#placeholder.style.height = `${itemHeight}px`;
+        const container = this.#viewContainer.element.nativeElement.parentElement;
+        if (!container)
+            return;
+        // Find children excluding spacers and placeholder itself
+        const children = Array.from(container.children).filter((el) => {
+            const element = el;
+            return (!element.classList.contains('vdnd-drag-placeholder') &&
+                !element.classList.contains('vdnd-virtual-for-spacer') &&
+                !element.classList.contains('vdnd-content-spacer'));
+        });
+        const insertBeforeEl = children[placeholderDomPosition] ?? null;
+        if (!this.#placeholderInDom) {
+            // First insertion
+            if (insertBeforeEl) {
+                container.insertBefore(this.#placeholder, insertBeforeEl);
+            }
+            else {
+                container.appendChild(this.#placeholder);
+            }
+            this.#placeholderInDom = true;
+        }
+        else {
+            // Move to correct position if needed
+            const currentNextSibling = this.#placeholder.nextElementSibling;
+            if (insertBeforeEl !== currentNextSibling) {
+                if (insertBeforeEl) {
+                    container.insertBefore(this.#placeholder, insertBeforeEl);
                 }
                 else {
-                    // Move placeholder to correct position if needed
-                    const currentNextSibling = this.#placeholder.nextElementSibling;
-                    if (insertBeforeEl !== currentNextSibling) {
-                        if (insertBeforeEl) {
-                            container.insertBefore(this.#placeholder, insertBeforeEl);
-                        }
-                        else {
-                            container.appendChild(this.#placeholder);
-                        }
-                    }
+                    container.appendChild(this.#placeholder);
                 }
             }
         }
-        // 4. Destroy unused views in pool (keep some for reuse)
-        while (this.#viewPool.length > 10) {
+    }
+    /**
+     * Trim the view pool to prevent memory bloat, keeping a reasonable buffer.
+     */
+    #trimViewPool() {
+        const maxPoolSize = 10;
+        while (this.#viewPool.length > maxPoolSize) {
             const view = this.#viewPool.pop();
             view?.destroy();
         }
@@ -4471,5 +4596,5 @@ function removeAt(list, index) {
  * Generated bundle index. Do not edit.
  */
 
-export { AutoScrollService, DragPlaceholderComponent, DragPreviewComponent, DragStateService, DraggableDirective, DroppableDirective, DroppableGroupDirective, END_OF_LIST, ElementCloneService, INITIAL_DRAG_STATE, KeyboardDragService, 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, DragPlaceholderComponent, DragPreviewComponent, DragStateService, DraggableDirective, DroppableDirective, DroppableGroupDirective, END_OF_LIST, ElementCloneService, 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 };
 //# sourceMappingURL=ngx-virtual-dnd.mjs.map