ngx-kit 8.0.0 → 8.0.1

package/fesm2022/ngx-kit-drag-resize.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, EventEmitter, Injectable, InjectionToken, inject, ElementRef, Injector, Directive, ContentChild, Output, Input, model, input, output, effect, HostListener } from '@angular/core';
+import { signal, EventEmitter, Injectable, InjectionToken, model, input, output, inject, Renderer2, effect, Input, Directive, HostListener, ApplicationRef, ContentChild, Output, ElementRef } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 /**
@@ -218,6 +218,14 @@ class DragRef {
     /** True while a drop-list drag (body preview + placeholder) is in progress. Free drag: always false. */
     listDrag = false;
     cachedLists = [];
+    /**
+     * Candidate lists for hit-testing, filtered (connected to the origin; not inside the dragged
+     * element) and sorted deepest-first — both computed ONCE, not on every pointer move, since
+     * neither ever changes mid-drag. Kept in sync with the live registry (see `dropListsSnapshot`)
+     * so a list that appears or disappears mid-drag (e.g. behind an `@if`) is still picked up.
+     */
+    dropCandidates = [];
+    dropListsSnapshot = null;
     lastEffective = { x: 0, y: 0 };
     scrollListener;
     resizeListener;
@@ -432,19 +440,13 @@ class DragRef {
     beginListDrag(origin, pointer) {
         const doc = this.el.ownerDocument;
         const win = doc.defaultView ?? window;
-        const lists = new Set([origin]);
-        for (const l of this.service?.dropLists() ?? [])
-            lists.add(l);
-        this.cachedLists = Array.from(lists);
-        // Foreign lists are measured as they are now (no placeholder in them yet)...
-        for (const l of this.cachedLists)
-            if (l !== origin)
-                l._cacheGeometry();
+        this.dropListsSnapshot = null; // force refreshDropCandidates() to do a full pass below
+        this.refreshDropCandidates(origin);
         this.lastEffective = { ...pointer };
         this.activeDropList = origin;
         origin.enter(this, pointer.x, pointer.y);
-        // ...the origin list AFTER its placeholder took over the source's slot, so its box still
-        // covers the whole list (the hidden source no longer occupies space).
+        // The origin is (re-)measured AFTER its placeholder took over the source's slot, so its box
+        // still covers the whole list (the hidden source no longer occupies space).
         origin._cacheGeometry();
         this.scrollListener = () => {
             for (const l of this.cachedLists)
@@ -460,24 +462,91 @@ class DragRef {
         doc.addEventListener('scroll', this.scrollListener, { capture: true, passive: true });
         win.addEventListener('resize', this.resizeListener, { passive: true });
     }
-    /** Decide which list is under the pointer, switch if needed, then re-sort in the active one. */
+    /**
+     * Recomputes which registered lists are valid targets for this drag — connected to the
+     * origin, and not nested inside the element being dragged — plus each one's nesting depth.
+     *
+     * `DragDropService.dropLists()` is an Angular signal: its array is a NEW reference only when a
+     * list actually registers or unregisters, so the check below is a single reference comparison
+     * on every pointer move and the (heavier) connectivity/containment/depth work below it only
+     * runs on the rare event a list appears or disappears mid-drag — never on every pointer move.
+     */
+    refreshDropCandidates(origin) {
+        const all = this.service?.dropLists() ?? [];
+        if (all === this.dropListsSnapshot)
+            return;
+        this.dropListsSnapshot = all;
+        const already = new Set(this.dropCandidates.map((c) => c.list));
+        const next = [{ list: origin, depth: origin.depth }];
+        for (const l of all) {
+            if (l === origin || !l.el || !origin.isConnectedTo(l))
+                continue;
+            if (this.el !== l.el && this.el.contains(l.el))
+                continue;
+            if (!already.has(l))
+                l._cacheGeometry(); // newly eligible mid-drag: measure it now
+            next.push({ list: l, depth: l.depth });
+        }
+        this.dropCandidates = next;
+        this.cachedLists = next.map((c) => c.list);
+    }
+    /**
+     * Decide which list is under the pointer, switch if needed, then re-sort in the active one.
+     *
+     * The origin list is the one exception to "exiting a list resets/releases it": while the
+     * pointer dives into one of the origin's OWN nested lists (at any depth), the origin's
+     * placeholder and sibling displacement are left exactly as they are — frozen, not reset —
+     * so returning to the origin's own level doesn't snap items back and then forward again.
+     * Every OTHER (foreign) list still fully releases the moment the pointer leaves it, exactly
+     * as before; nesting multiple foreign sessions alive at once would let their own internal
+     * sibling displacement compound in ways a single flat `ancestorOffset` cannot represent.
+     */
     updateDropTarget(pointer) {
         const origin = this.originDropList;
         if (!origin)
             return;
-        const next = this.service
-            ? this.service.findDropList(pointer, this.activeDropList, origin, this.el)
-            : origin._containsPoint(pointer.x, pointer.y)
-                ? origin
-                : null;
-        if (next !== this.activeDropList) {
-            this.activeDropList?.exit(this);
-            this.activeDropList = next;
-            next?.enter(this, pointer.x, pointer.y);
+        this.refreshDropCandidates(origin);
+        const next = this.resolveDropList(pointer);
+        if (next === this.activeDropList) {
+            next?.sortItem(this, pointer);
+            return;
+        }
+        const prev = this.activeDropList;
+        if (prev && prev !== origin)
+            prev.exit(this);
+        const nextWithinOrigin = !!next && (next === origin || isDescendantOfList(next, origin));
+        if (nextWithinOrigin) {
+            if (prev === origin)
+                origin._freeze(); // no longer the innermost, but stays engaged
         }
         else {
-            next?.sortItem(this, pointer);
+            origin.exit(this); // truly outside the origin's territory now: reset it (idempotent)
         }
+        this.activeDropList = next;
+        next?.enter(this, pointer.x, pointer.y); // fresh entry, or resumes a still-alive (frozen) session
+    }
+    /**
+     * Innermost connected list under the pointer, from the precomputed candidates: deeper always
+     * beats shallower; among lists at the same depth (unrelated, visually overlapping lists) the
+     * currently active one is kept to avoid flicker, otherwise the smaller one wins. No DOM
+     * reads and no `.contains()` calls happen here — everything needed was precomputed above.
+     */
+    resolveDropList(pointer) {
+        let best = null;
+        let bestDepth = -1;
+        for (const { list, depth } of this.dropCandidates) {
+            if (!list._containsPoint(pointer.x, pointer.y))
+                continue;
+            if (!best || depth > bestDepth) {
+                best = list;
+                bestDepth = depth;
+            }
+            else if (depth === bestDepth && best !== this.activeDropList) {
+                if (list === this.activeDropList || list._area() < best._area())
+                    best = list;
+            }
+        }
+        return best;
     }
     /**
      * Single teardown path for every way a drop-list drag can end (drop on a list, drop outside,
@@ -500,6 +569,8 @@ class DragRef {
         this.placeholder = undefined;
         this.activeDropList = null;
         this.cachedLists = [];
+        this.dropCandidates = [];
+        this.dropListsSnapshot = null;
         this.listDrag = false;
         // The source element is put back exactly as it was (its transform was never touched).
         this.el.classList.remove('ngx-draggable--dragging');
@@ -518,43 +589,56 @@ class DragRef {
         this.preview.style.transform = `translate3d(${this.moveDx}px, ${this.moveDy}px, 0)`;
     }
 }
+/** Is `list` nested (at any depth) inside `ancestor`, per the parent/child list tree? */
+function isDescendantOfList(list, ancestor) {
+    for (let p = list.parentList; p; p = p.parentList) {
+        if (p === ancestor)
+            return true;
+    }
+    return false;
+}
 
 class PlaceHolderRef {
+    /**
+     * Custom placeholder content, from `*ngxPlaceholder` inside the `ngxDropList`. When unset,
+     * `attach()` falls back to a shallow clone of the dragged element (previous behaviour).
+     *
+     * Example:
+     *
+     *   <div ngxDropList>
+     *     <span class="my-placeholder" *ngxPlaceholder></span>
+     *     ...
+     *   </div>
+     */
     tpl;
+    /** Set by `NgxPlaceholder` so the embedded view can join Angular's change-detection tree. */
+    appRef;
     dropList;
     element;
     _visible = false;
-    /**
-     * Angular embedded view created from `tpl`.
-     */
     _view;
+    /** True once `this.element` was built from `tpl` (as opposed to the fallback clone). */
+    isCustom = false;
     attach(container, source, reference) {
-        /**
-         * If the placeholder has a template, render the template instead of
-         * cloning the dragged element.
-         *
-         * Example:
-         *
-         * <span class="placeholder" *ngxPlaceholder></span>
-         */
         if (!this.element) {
             if (this.tpl) {
                 this._view = this.tpl.createEmbeddedView({});
+                this.appRef?.attachView(this._view);
                 // Render bindings inside the embedded view before we move its DOM nodes.
                 this._view.detectChanges();
                 const element = this._view.rootNodes.find((node) => node instanceof HTMLElement);
                 if (!element) {
+                    this.appRef?.detachView(this._view);
                     this._view.destroy();
                     this._view = undefined;
-                    throw new Error('ngxPlaceholder template must contain at least one HTMLElement root node.');
+                    throw new Error('ngxPlaceholder template must contain exactly one HTMLElement root node ' +
+                        '(other root nodes, if any, are ignored).');
                 }
                 this.element = element;
+                this.isCustom = true;
             }
             else {
-                /**
-                 * Backward-compatible fallback:
-                 * if no ngxPlaceholder template was supplied, keep the old behavior.
-                 */
+                // Fallback: keep the same tag/attributes as the dragged item so selectors such as
                 // ".list > article" and grid/flex item rules continue to apply.
                 this.element = source.cloneNode(false);
                 this.element.removeAttribute('id');
@@ -562,20 +646,26 @@ class PlaceHolderRef {
                 this.element.setAttribute('aria-hidden', 'true');
                 this.element.setAttribute('inert', '');
                 this.element.removeAttribute('tabindex');
+                this.isCustom = false;
             }
         }
-        // The placeholder must never inherit a live drag transform/animation. `transform` and
-        // `transition` are deliberately NOT forced with !important: the sort session drives them
-        // to slide the placeholder (translate3d) to the current insertion slot.
+        // Safety overrides that apply regardless of who authored the element: it must never
+        // inherit a live drag transform/animation (transform/transition are left free for the
+        // sort session to drive, translate3d-ing the placeholder to the current insertion slot),
+        // never intercept pointer events, and never be display:none.
         this.element.style.removeProperty('transform');
         this.element.style.removeProperty('transition');
         this.element.style.removeProperty('will-change');
         this.element.style.setProperty('animation', 'none', 'important');
         this.element.style.setProperty('pointer-events', 'none', 'important');
         this.element.style.setProperty('visibility', 'visible', 'important');
-        this.element.style.setProperty('opacity', '0.16', 'important');
-        this.element.style.setProperty('outline', '2px dashed currentColor', 'important');
-        this.element.style.setProperty('outline-offset', '-2px', 'important');
+        if (!this.isCustom) {
+            // Only the auto-generated clone gets the default "phantom box" look. A custom
+            // *ngxPlaceholder template is styled entirely by the caller.
+            this.element.style.setProperty('opacity', '0.16', 'important');
+            this.element.style.setProperty('outline', '2px dashed currentColor', 'important');
+            this.element.style.setProperty('outline-offset', '-2px', 'important');
+        }
         this._visible = true;
         if (reference && reference.parentNode === container) {
             if (this.element !== reference)
@@ -586,10 +676,17 @@ class PlaceHolderRef {
         }
         return this.element;
     }
+    /** True while the currently attached element came from a custom `*ngxPlaceholder` template. */
+    get custom() {
+        return this.isCustom;
+    }
     detach() {
         this.element?.remove();
-        this._view?.destroy();
-        this._view = undefined;
+        if (this._view) {
+            this.appRef?.detachView(this._view);
+            this._view.destroy();
+            this._view = undefined;
+        }
         this.element = undefined;
         this._visible = false;
     }
@@ -936,8 +1033,10 @@ class SortSession {
     disposed = false;
     /** undefined = not created yet, null = this layout has no whitespace separators. */
     spacer;
+    onOffsetChange;
     constructor(init) {
         this.spacer = init.spacer;
+        this.onOffsetChange = init.onOffsetChange;
         this.container = init.container;
         this.placeholder = init.placeholder;
         this.itemElements = init.itemElements;
@@ -1026,6 +1125,8 @@ class SortSession {
             e.el.style.transform = e.savedTransform;
             e.el.style.transition = e.savedTransition;
             e.el.style.willChange = e.savedWillChange;
+            if (this.applied.has(e.el))
+                this.onOffsetChange?.(e.el, { x: 0, y: 0 });
         }
         this.applied.clear();
         this.spacer?.remove();
@@ -1104,6 +1205,7 @@ class SortSession {
             this.applied.set(e.el, off);
             e.el.style.transform = `translate3d(${off.x}px, ${off.y}px, 0)${e.base}`;
         }
+        this.onOffsetChange?.(e.el, off);
     }
     // ---------------------------------------------------------------------------------------
     // flow strategy (single placeholder move + FLIP transforms)
@@ -1164,6 +1266,8 @@ class SortSession {
         for (const e of this.entries) {
             e.el.style.transition = 'none';
             e.el.style.transform = e.savedTransform;
+            if (this.applied.has(e.el))
+                this.onOffsetChange?.(e.el, { x: 0, y: 0 });
         }
         this.applied.clear();
     }
@@ -1248,6 +1352,16 @@ class DropListRef {
     sortAnimationDuration = 200;
     _draggables = new Set();
     onDrop = new EventEmitter();
+    /**
+     * Nesting: the nearest ENCLOSING drop list (null for a top-level list), and this list's own
+     * direct nested lists — i.e. lists whose nearest enclosing list is this one, not a list at any
+     * depth. Set by `NgxDropList` at init from a `skipSelf` DI lookup. Used for two things: (1)
+     * `depth` for "innermost wins" in `DragRef`'s target resolution, without any DOM `.contains()`
+     * calls on the hot path, and (2) cascading `_setAncestorOffset` (below) to every list nested
+     * inside an item that gets displaced by sorting, at any depth.
+     */
+    parentList = null;
+    childLists = new Set();
     session = null;
     placeholder;
     customPlaceholder;
@@ -1258,6 +1372,96 @@ class DropListRef {
     /** Pre-insertion geometry of a foreign list, restored when the drag leaves it. */
     naturalHit = null;
     hitCached = false;
+    /**
+     * Screen-space offset contributed by displaced ANCESTOR item(s) (see `parentList` above).
+     * `{0,0}` outside of that (the overwhelmingly common case). Kept as a SUM of independent
+     * per-source contributions, not a single overwritten value: while the pointer hovers a
+     * FOREIGN (non-origin) list nested inside the origin's own displaced item, up to two ancestor
+     * sessions can be displacing this list at once — the origin's (frozen, still active further
+     * up) and that foreign list's own — and one clearing its contribution on release must not
+     * wipe out the other's, still-active, contribution.
+     */
+    ancestorContributions = new Map();
+    ancestorOffset = { x: 0, y: 0 };
+    /** Entries this list itself pushed via a one-time placeholder-insertion reflow (see below). */
+    reflowContributions = new Map();
+    /** How many enclosing drop lists this one is nested inside. Root lists are depth 0. */
+    get depth() {
+        let d = 0;
+        for (let p = this.parentList; p; p = p.parentList)
+            d++;
+        return d;
+    }
+    _registerChild(child) {
+        child.parentList = this;
+        this.childLists.add(child);
+    }
+    _unregisterChild(child) {
+        if (child.parentList === this)
+            child.parentList = null;
+        this.childLists.delete(child);
+    }
+    /**
+     * One ancestor SESSION's contribution to this list's total displacement just changed (or
+     * cleared, `{0,0}`). `source` identifies WHICH session — the list whose own item is doing the
+     * displacing — so that this list's own recomputed total is a SUM across every currently-active
+     * source, and cascades the SAME (source, offset) pair on to every nested list at any depth
+     * unchanged, so a list several levels down stays hit-testable at its true on-screen position
+     * regardless of which ancestor(s) are currently sorting.
+     */
+    _setAncestorOffset(source, offset) {
+        const prev = this.ancestorContributions.get(source);
+        if (prev && prev.x === offset.x && prev.y === offset.y)
+            return;
+        if (offset.x === 0 && offset.y === 0)
+            this.ancestorContributions.delete(source);
+        else
+            this.ancestorContributions.set(source, offset);
+        let x = 0;
+        let y = 0;
+        for (const o of this.ancestorContributions.values()) {
+            x += o.x;
+            y += o.y;
+        }
+        if (x === this.ancestorOffset.x && y === this.ancestorOffset.y)
+            return; // no net change
+        this.ancestorOffset = { x, y };
+        for (const child of this.childLists)
+            child._setAncestorOffset(source, offset);
+    }
+    /** Which of this list's DIRECT nested lists live inside `el`, notified of its new offset. */
+    propagateOffset(el, offset) {
+        for (const child of this.childLists) {
+            if (el.contains(child.el))
+                child._setAncestorOffset(this, offset);
+        }
+    }
+    /** Rects, right now, of every `other` entry that contains one of this list's nested lists. */
+    trackedEntryRects(others) {
+        const map = new Map();
+        for (const child of this.childLists) {
+            for (const el of others) {
+                if (el.contains(child.el)) {
+                    if (!map.has(el))
+                        map.set(el, el.getBoundingClientRect());
+                    break;
+                }
+            }
+        }
+        return map;
+    }
+    /** Turns the real reflow a fresh placeholder insertion just caused into ordinary offsets. */
+    propagateReflow(before) {
+        for (const [el, prev] of before) {
+            const now = el.getBoundingClientRect();
+            const dx = now.left - prev.left;
+            const dy = now.top - prev.top;
+            if (dx || dy) {
+                this.propagateOffset(el, { x: dx, y: dy });
+                this.reflowContributions.set(el, { x: dx, y: dy });
+            }
+        }
+    }
     addItem(item) {
         this._draggables.add(item);
     }
@@ -1274,9 +1478,24 @@ class DropListRef {
     // ---------------------------------------------------------------------------------------
     // hit testing (cached for the duration of a drag)
     // ---------------------------------------------------------------------------------------
-    /** Measure the list and its clipping ancestors once, at drag start. */
+    /**
+     * Measure the list and its clipping ancestors once, at drag start (or the moment a nested
+     * list becomes a candidate mid-drag). `measureHit` reads live `getBoundingClientRect()`s,
+     * which already include any `translate3d` an ancestor item's displacement has applied — so if
+     * this list is currently offset (nested inside a sibling that sorting is displacing right
+     * now), the measurement is normalized back to the zero-offset frame `_containsPoint` expects,
+     * by subtracting that offset straight back out. Without this, entering a nested list while
+     * its ancestor is mid-displacement would double-count the offset on every check afterwards.
+     */
     _cacheGeometry() {
-        this.hit = measureHit(this.el);
+        const hit = measureHit(this.el);
+        if (hit && (this.ancestorOffset.x || this.ancestorOffset.y)) {
+            hit.box.left -= this.ancestorOffset.x;
+            hit.box.right -= this.ancestorOffset.x;
+            hit.box.top -= this.ancestorOffset.y;
+            hit.box.bottom -= this.ancestorOffset.y;
+        }
+        this.hit = hit;
         this.hitCached = true;
     }
     /**
@@ -1289,11 +1508,14 @@ class DropListRef {
         const hit = this.hitCached ? this.hit : measureHit(this.el);
         if (!hit)
             return false;
-        let d = hit.frame.delta();
-        if (!boxContains(hit.box, x + d.x, y + d.y))
+        // The list's own box shifts with any ancestor displacement; a clip window (a scroll/overflow
+        // ancestor) normally does not, since it is not itself an item being sorted, so it is tested
+        // against the raw pointer.
+        const d0 = hit.frame.delta();
+        if (!boxContains(hit.box, x - this.ancestorOffset.x + d0.x, y - this.ancestorOffset.y + d0.y))
             return false;
         for (const clip of hit.clips) {
-            d = clip.frame.delta();
+            const d = clip.frame.delta();
             if (!boxContains(clip.box, x + d.x, y + d.y))
                 return false;
         }
@@ -1326,7 +1548,9 @@ class DropListRef {
     /** The drag pointer entered this list (or the drag started inside it). */
     enter(drag, x = 0, y = 0) {
         if (this.session && this.activeDrag === drag) {
-            // Re-entering the list the drag started in: its session (and slot) are still alive.
+            // Resuming a session that's still alive: either this is the origin list (its slot is
+            // always kept), or the pointer dove into one of its own nested lists and came back up
+            // (frozen rather than released in `exit()`, see there).
             this.hovered = true;
             this.el.classList.add('ngx-drop-list--active');
             drag.placeholder = this.placeholder;
@@ -1350,6 +1574,11 @@ class DropListRef {
         return s.modelIndex;
     }
     /** The pointer left this list. */
+    /**
+     * The pointer truly left this list (as opposed to moving deeper into one of its own nested
+     * lists — see `DragRef`'s chain tracking, which never calls `exit()` for a list that remains
+     * an ancestor of the new target, so this always means "left this list's territory").
+     */
     exit(drag) {
         if (!this.session || this.activeDrag !== drag)
             return;
@@ -1364,6 +1593,17 @@ class DropListRef {
             this.releaseSession(drag);
         }
     }
+    /**
+     * The pointer dove into one of this list's own nested lists: this list is no longer the
+     * innermost target, but it isn't being left either — its placeholder and sibling displacement
+     * stay exactly as they are (avoids a snap-back-then-forward flicker), only the "currently
+     * hovered" bookkeeping (and its visual highlight) is cleared. `DragRef`'s chain tracking calls
+     * this instead of `exit()` for every list that remains an ancestor of the new target.
+     */
+    _freeze() {
+        this.hovered = false;
+        this.el.classList.remove('ngx-drop-list--active');
+    }
     /**
      * Ends the drag for this list. Returns the drop event when the pointer was released over this
      * list, `null` otherwise (nothing to emit). All transient state is disposed either way.
@@ -1407,6 +1647,12 @@ class DropListRef {
         this.releaseSession(drag);
         this.hit = null;
         this.hitCached = false;
+        // `ancestorOffset` is deliberately NOT reset here: `enter()` calls this unconditionally as a
+        // safety-clear on every (re-)entry, including while a currently-active ancestor transform
+        // still legitimately applies to this list. It self-corrects when that transform actually
+        // reverts to zero, via the `onOffsetChange` cascade (see `_setAncestorOffset`), which also
+        // covers the true end of a drag (the displaced list's own session disposes and reports
+        // every entry back to `{0,0}`).
     }
     /** Dispose the sort session, placeholder and drag ownership. */
     releaseSession(drag) {
@@ -1414,6 +1660,14 @@ class DropListRef {
             return;
         this.session?.dispose();
         this.session = null;
+        if (this.reflowContributions.size) {
+            // The one-time reflow from this list's own placeholder insertion (see `propagateReflow`)
+            // never went through the session's own `applied` map, so its `dispose()` above cannot
+            // have cleared it — do that here instead, or it would linger as a stale contribution.
+            for (const [el] of this.reflowContributions)
+                this.propagateOffset(el, { x: 0, y: 0 });
+            this.reflowContributions.clear();
+        }
         this.placeholder?.detach();
         if (this.activeDrag && this.activeDrag.placeholder === this.placeholder) {
             this.activeDrag.placeholder = undefined;
@@ -1442,16 +1696,30 @@ class DropListRef {
         if (origin) {
             // The placeholder takes over the exact slot of the (now hidden) source element.
             ph.attach(this.el, drag.el, drag.el);
+            this.lockPlaceholderGeometry(drag, ph, drag.start);
         }
         else {
             ph.detach();
+            // Only the "other" entries that contain a nested list are worth measuring (usually none,
+            // or very few, even in a large tree): inserting the placeholder is a REAL DOM node, so it
+            // shifts later siblings via ordinary CSS reflow, not `translate3d` — a one-time event this
+            // list's own SortSession never reports through `onOffsetChange`, since (being sized and
+            // positioned by `foreignInsertionReference` to already match where it belongs) it never
+            // needs to actually transform anything afterwards. Measuring the small tracked set just
+            // before and after the insertion turns that one-time reflow into an ordinary ancestor
+            // contribution, exactly like any other displaced entry.
+            const tracked = this.childLists.size ? this.trackedEntryRects(others) : null;
             const reference = this.foreignInsertionReference(others, pointer, axis, rtl);
             ph.attach(this.el, drag.el, reference);
+            // Sized to its final footprint BEFORE measuring the reflow it causes: an unsized clone
+            // (still near-zero height) wouldn't have pushed `others` at all yet.
+            this.lockPlaceholderGeometry(drag, ph, drag.start);
+            if (tracked)
+                this.propagateReflow(tracked);
             spacer = makeSpacer(this.el);
             if (spacer)
                 this.el.insertBefore(spacer, reference ?? ph.element);
         }
-        this.lockPlaceholderGeometry(drag, ph.element, drag.start);
         this.placeholder = ph;
         this.activeDrag = drag;
         this.isOrigin = origin;
@@ -1464,13 +1732,16 @@ class DropListRef {
             fallbackRtl: rtl,
             animationMs: this.sortAnimationDuration,
             spacer,
+            onOffsetChange: this.childLists.size
+                ? (el, offset) => this.propagateOffset(el, offset)
+                : undefined,
         });
         if (!origin && this.hitCached) {
             // Inserting the placeholder made this list bigger; the grown box is what the user sees
             // (and must be able to reach, e.g. to append below the last item). The natural box comes
             // back on exit, so entering/leaving at the old edge cannot flicker.
             this.naturalHit = this.hit;
-            this.hit = measureHit(this.el);
+            this._cacheGeometry();
         }
     }
     /**
@@ -1528,12 +1799,16 @@ class DropListRef {
         }
         return -1;
     }
-    lockPlaceholderGeometry(drag, placeholder, rect) {
-        const set = (k, v) => placeholder.style.setProperty(k, v);
-        // The clone was taken from the source, which may already carry drag-time inline styles.
-        placeholder.style.display = drag.originalDisplay;
+    lockPlaceholderGeometry(drag, ph, rect) {
+        const placeholder = ph.element;
+        const set = (k, v) => placeholder.style.setProperty(k, v, 'important');
         placeholder.style.zIndex = '';
         placeholder.style.removeProperty('will-change');
+        if (ph.custom)
+            return;
+        placeholder.style.display = drag.originalDisplay;
+        // Occupies exactly the dragged item's footprint, so the gap reserved in the list — and the
+        // sibling-displacement math derived from it — matches the item's real size.
         set('width', `${rect.width}px`);
         set('height', `${rect.height}px`);
         // set('min-width', `${rect.width}px`);
@@ -1593,7 +1868,6 @@ function measureHit(el) {
  * Lists register themselves automatically when `NgxDropListGroup` wraps them.
  */
 class DropListGroupRef {
-    el;
     lists = new Set();
     add(list) {
         this.lists.add(list);
@@ -1613,6 +1887,21 @@ class DragDropService {
     ...(ngDevMode ? [{ debugName: "dropLists" }] : /* istanbul ignore next */ []));
     activeDrag = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeDrag" }] : /* istanbul ignore next */ []));
+    /**
+     * DOM-position registries, used to find the nearest enclosing list/group by walking real
+     * ancestor elements instead of Angular's element-injector tree.
+     *
+     * This matters for `ngTemplateOutlet`-based recursive trees (a list of items whose own
+     * children are rendered by re-invoking the SAME `<ng-template>`, as in a tree/outliner UI):
+     * each invocation gets a FRESH embedded view whose injector context is wherever the outlet
+     * was written in the template, not wherever its content ends up in the DOM. So `inject(TOKEN,
+     * {skipSelf})` from one recursion level can never see a provider from another level — the
+     * only fix within Angular's own DI is to manually thread `ngTemplateOutletInjector` through
+     * every recursive call, which isn't reasonable to require of every consumer of this library.
+     * A plain DOM walk has no such limitation: it only cares where elements actually ended up.
+     */
+    listsByEl = new Map();
+    groupsByEl = new Map();
     registerDragItem(ref) {
         this.drags.update((items) => (items.includes(ref) ? items : [...items, ref]));
     }
@@ -1623,9 +1912,37 @@ class DragDropService {
     }
     registerDropList(ref) {
         this.dropLists.update((items) => (items.includes(ref) ? items : [...items, ref]));
+        if (ref.el)
+            this.listsByEl.set(ref.el, ref);
     }
     removeDropList(ref) {
         this.dropLists.update((items) => items.filter((x) => x !== ref));
+        if (ref.el && this.listsByEl.get(ref.el) === ref)
+            this.listsByEl.delete(ref.el);
+    }
+    registerGroup(el, ref) {
+        this.groupsByEl.set(el, ref);
+    }
+    removeGroup(el) {
+        this.groupsByEl.delete(el);
+    }
+    /** Nearest registered drop list starting at (and including) `start`, walking up the DOM. */
+    findAncestorDropList(start) {
+        for (let n = start; n; n = n.parentElement) {
+            const found = this.listsByEl.get(n);
+            if (found)
+                return found;
+        }
+        return null;
+    }
+    /** Nearest registered drop-list group starting at (and including) `start`, walking up the DOM. */
+    findAncestorGroup(start) {
+        for (let n = start; n; n = n.parentElement) {
+            const found = this.groupsByEl.get(n);
+            if (found)
+                return found;
+        }
+        return null;
     }
     begin(ref) {
         this.activeDrag.set(ref);
@@ -1685,118 +2002,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-const NGX_DROPLIST_GROUP = new InjectionToken('ngx-drop-list-group');
-/** Wrap several `ngxDropList`s to let items move freely between them. */
-class NgxDropListGroup {
-    _ref = new DropListGroupRef();
-    el = inject((ElementRef));
-    injector = inject(Injector);
-    constructor() {
-        this._ref.el = this.el.nativeElement;
-    }
-    ngOnDestroy() {
-        this._ref.lists.clear();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropListGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDropListGroup, isStandalone: true, selector: "[NgxDropListGroup],[ngxDropListGroup]", providers: [{ provide: NGX_DROPLIST_GROUP, useExisting: NgxDropListGroup }], exportAs: ["ngxDropListGroup"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropListGroup, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[NgxDropListGroup],[ngxDropListGroup]',
-                    providers: [{ provide: NGX_DROPLIST_GROUP, useExisting: NgxDropListGroup }],
-                    exportAs: 'ngxDropListGroup',
-                }]
-        }], ctorParameters: () => [] });
-
-const NGX_PLACEHOLDER = new InjectionToken('ngx-place-holder');
-class NgxPlaceholder {
-    tpl;
-    _ref = new PlaceHolderRef();
-    list = inject(NGX_DROPLIST, { optional: true, skipSelf: true });
-    constructor(tpl) {
-        this.tpl = tpl;
-        this._ref.tpl = tpl;
-        this._ref.dropList = this.list?._ref;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPlaceholder, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxPlaceholder, isStandalone: true, selector: "[NgxPlaceholder],[ngxPlaceholder]", providers: [{ provide: NGX_PLACEHOLDER, useExisting: NgxPlaceholder }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPlaceholder, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[NgxPlaceholder],[ngxPlaceholder]',
-                    providers: [{ provide: NGX_PLACEHOLDER, useExisting: NgxPlaceholder }],
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
-
-const NGX_DROPLIST = new InjectionToken('ngx-drop-list');
-class NgxDropList {
-    el;
-    _ref = new DropListRef();
-    set data(value) {
-        this._ref.data = value;
-    }
-    set connectedTo(value) {
-        this._ref.connectedTo = value ?? [];
-    }
-    set disableSort(value) {
-        this._ref.disableSort = value === true;
-    }
-    drop = new EventEmitter();
-    customPlaceholder;
-    sub;
-    service = inject(DragDropService);
-    group = inject(NGX_DROPLIST_GROUP, { optional: true, skipSelf: true });
-    constructor(el) {
-        this.el = el;
-    }
-    ngOnInit() {
-        this._ref.el = this.el.nativeElement;
-        this._ref.dropListGroup = this.group?._ref ?? null;
-        // console.log('list:', this._ref.el, 'group:', this._ref.dropListGroup?.el);
-        // Previously the group directive never actually tracked its lists — fixed here.
-        this.group?._ref.add(this._ref);
-        this.sub = this._ref.onDrop.subscribe((e) => this.drop.emit(e));
-        this.service.registerDropList(this._ref);
-    }
-    ngAfterContentInit() {
-        if (this.customPlaceholder) {
-            this._ref.customPlaceholder = this.customPlaceholder._ref;
-        }
-    }
-    ngOnDestroy() {
-        this.sub?.unsubscribe();
-        this._ref._release();
-        this.group?._ref.remove(this._ref);
-        this.service.removeDropList(this._ref);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropList, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDropList, isStandalone: true, selector: "[NgxDropList],[ngxDropList]", inputs: { data: "data", connectedTo: "connectedTo", disableSort: "disableSort" }, outputs: { drop: "drop" }, host: { classAttribute: "ngx-drop-list" }, providers: [{ provide: NGX_DROPLIST, useExisting: NgxDropList }], queries: [{ propertyName: "customPlaceholder", first: true, predicate: NgxPlaceholder, descendants: true }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropList, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[NgxDropList],[ngxDropList]',
-                    providers: [{ provide: NGX_DROPLIST, useExisting: NgxDropList }],
-                    host: { class: 'ngx-drop-list' },
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
-                type: Input,
-                args: ['data']
-            }], connectedTo: [{
-                type: Input
-            }], disableSort: [{
-                type: Input
-            }], drop: [{
-                type: Output
-            }], customPlaceholder: [{
-                type: ContentChild,
-                args: [NgxPlaceholder, {
-                        descendants: true,
-                    }]
-            }] } });
-
 /**
  * Auto-scrolls the nearest scrollable ancestor (or window) while the pointer
  * is dragged near the edge of the scrollable viewport. Direction-agnostic —
@@ -1894,7 +2099,6 @@ const NGX_DRAGGABLE = new InjectionToken('ngx-draggable');
 const DEFAULT_KEYBOARD_STEP = 8;
 class NgxDraggable {
     host;
-    renderer;
     disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** Element whose rect constrains the drag. Now actually enforced. */
@@ -1928,8 +2132,6 @@ class NgxDraggable {
     ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
     doc = inject(DOCUMENT);
     service = inject(DragDropService);
-    list = inject(NGX_DROPLIST, { optional: true, skipSelf: true });
-    group = inject(NGX_DROPLIST_GROUP, { optional: true, skipSelf: true });
     scroller = new AutoScroller();
     down = false;
     start = { x: 0, y: 0 };
@@ -1947,9 +2149,9 @@ class NgxDraggable {
     lastWindowScroll = { left: 0, top: 0 };
     removeContainerScroll;
     removeWindowScroll;
-    constructor(host, renderer) {
+    renderer = inject(Renderer2);
+    constructor(host) {
         this.host = host;
-        this.renderer = renderer;
         effect(() => {
             this._ref.el = this.dragRootElement()
                 ? (this.host.nativeElement.closest(this.dragRootElement()) ?? this.host.nativeElement)
@@ -1962,10 +2164,15 @@ class NgxDraggable {
             : this.host.nativeElement;
         this._ref.boundary = this.boundary();
         this._ref.lockAxis = this.lockAxis();
-        this._ref.dropListGroup = this.group?._ref;
+        // Found by walking the real DOM, not Angular's element-injector tree — see the matching
+        // comment in `ngx-drop-list.directive.ts` for why: a draggable rendered by a recursively
+        // invoked `ngTemplateOutlet` needs this just as much as a nested list does.
+        const parentEl = this.host.nativeElement.parentElement;
+        const list = this.service.findAncestorDropList(parentEl);
+        this._ref.dropListGroup = list?.dropListGroup ?? this.service.findAncestorGroup(parentEl);
         this._ref.service = this.service;
         this._ref.init();
-        this._ref.withDropList(this.list?._ref ?? null);
+        this._ref.withDropList(list ?? null);
         this.service.registerDragItem(this._ref);
         this.removeDown = this.renderer.listen(this.host.nativeElement, 'pointerdown', (e) => this.pointerDown(e));
         this.removeKeydown = this.renderer.listen(this.host.nativeElement, 'keydown', (e) => this.keyDown(e));
@@ -2144,7 +2351,9 @@ class NgxDraggable {
                 // that keyboard sorting resolves against real geometry.
                 const inList = !!this._ref.dropList && this._ref.dropList.el === this._ref.el.parentElement;
                 const r = this._ref.el.getBoundingClientRect();
-                const origin = inList ? { x: r.left + r.width / 2, y: r.top + r.height / 2 } : { x: 0, y: 0 };
+                const origin = inList
+                    ? { x: r.left + r.width / 2, y: r.top + r.height / 2 }
+                    : { x: 0, y: 0 };
                 this._ref.pointerDown(origin);
                 this._ref.boundary = this.boundary();
                 this._ref.lockAxis = this.lockAxis();
@@ -2182,7 +2391,7 @@ class NgxDraggable {
         return (target instanceof HTMLElement &&
             !!target.closest('button,a,input,textarea,select,[data-no-drag]'));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxDraggable, isStandalone: true, selector: "[NgxDraggable],[ngxDraggable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, dragRootElement: { classPropertyName: "dragRootElement", publicName: "dragRootElement", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", dragRootElement: "dragRootElementChange", dragHandle: "dragHandleChange", dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "\"none\"", "attr.tabindex": "disabled() ? null : 0", "attr.aria-grabbed": "dragging()", "class.disable-drag": "disabled()" }, classAttribute: "ngx-draggable" }, providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, decorators: [{
@@ -2198,7 +2407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         '[class.disable-drag]': 'disabled()',
                     },
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], dragRootElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragRootElement", required: false }] }, { type: i0.Output, args: ["dragRootElementChange"] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }, { type: i0.Output, args: ["dragHandleChange"] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], data: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], dragRootElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragRootElement", required: false }] }, { type: i0.Output, args: ["dragRootElementChange"] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }, { type: i0.Output, args: ["dragHandleChange"] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], data: [{
                 type: Input,
                 args: ['data']
             }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
@@ -2578,6 +2787,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
+const NGX_PLACEHOLDER = new InjectionToken('ngx-place-holder');
+class NgxPlaceholder {
+    tpl;
+    _ref = new PlaceHolderRef();
+    list = inject(NGX_DROPLIST, { optional: true, skipSelf: true });
+    constructor(tpl) {
+        this.tpl = tpl;
+        this._ref.tpl = tpl;
+        this._ref.dropList = this.list?._ref;
+        // Lets the embedded view join Angular's change-detection tree (matters in zoneless apps,
+        // and for app-stability tracking) instead of being rendered once and left dangling.
+        this._ref.appRef = inject(ApplicationRef);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPlaceholder, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxPlaceholder, isStandalone: true, selector: "[NgxPlaceholder],[ngxPlaceholder]", providers: [{ provide: NGX_PLACEHOLDER, useExisting: NgxPlaceholder }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPlaceholder, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NgxPlaceholder],[ngxPlaceholder]',
+                    providers: [{ provide: NGX_PLACEHOLDER, useExisting: NgxPlaceholder }],
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+const NGX_DROPLIST = new InjectionToken('ngx-drop-list');
+class NgxDropList {
+    el;
+    _ref = new DropListRef();
+    set data(value) {
+        this._ref.data = value;
+    }
+    set connectedTo(value) {
+        this._ref.connectedTo = value ?? [];
+    }
+    set disableSort(value) {
+        this._ref.disableSort = value === true;
+    }
+    drop = new EventEmitter();
+    customPlaceholder;
+    sub;
+    service = inject(DragDropService);
+    constructor(el) {
+        this.el = el;
+    }
+    ngOnInit() {
+        this._ref.el = this.el.nativeElement;
+        // Found by walking the real DOM (not Angular's element-injector tree): a list rendered by a
+        // recursively-invoked `ngTemplateOutlet` (a tree/outliner UI, where every level re-uses the
+        // SAME `<ng-template>`) gets a fresh injector context per invocation, so `inject(TOKEN,
+        // {skipSelf})` can never see a provider from another recursion level — the DOM position is
+        // what actually determines nesting/grouping for this library's purposes anyway.
+        const parentEl = this.el.nativeElement.parentElement;
+        const group = this.service.findAncestorGroup(parentEl);
+        const parent = this.service.findAncestorDropList(parentEl);
+        this._ref.dropListGroup = group ?? null;
+        group?.add(this._ref);
+        parent?._registerChild(this._ref);
+        this.sub = this._ref.onDrop.subscribe((e) => this.drop.emit(e));
+        this.service.registerDropList(this._ref);
+    }
+    ngAfterContentInit() {
+        if (this.customPlaceholder) {
+            this._ref.customPlaceholder = this.customPlaceholder._ref;
+        }
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+        this._ref._release();
+        this._ref.parentList?._unregisterChild(this._ref);
+        this._ref.dropListGroup?.remove(this._ref);
+        this.service.removeDropList(this._ref);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropList, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDropList, isStandalone: true, selector: "[NgxDropList],[ngxDropList]", inputs: { data: "data", connectedTo: "connectedTo", disableSort: "disableSort" }, outputs: { drop: "drop" }, host: { classAttribute: "ngx-drop-list" }, providers: [{ provide: NGX_DROPLIST, useExisting: NgxDropList }], queries: [{ propertyName: "customPlaceholder", first: true, predicate: NgxPlaceholder, descendants: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NgxDropList],[ngxDropList]',
+                    providers: [{ provide: NGX_DROPLIST, useExisting: NgxDropList }],
+                    host: { class: 'ngx-drop-list' },
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], connectedTo: [{
+                type: Input
+            }], disableSort: [{
+                type: Input
+            }], drop: [{
+                type: Output
+            }], customPlaceholder: [{
+                type: ContentChild,
+                args: [NgxPlaceholder, {
+                        descendants: true,
+                    }]
+            }] } });
+
+const NGX_DROPLIST_GROUP = new InjectionToken('ngx-drop-list-group');
+/** Wrap several `ngxDropList`s to let items move freely between them. */
+class NgxDropListGroup {
+    _ref = new DropListGroupRef();
+    el = inject((ElementRef));
+    service = inject(DragDropService);
+    ngOnInit() {
+        // Registered by DOM element (not just provided via DI) so a list nested inside a recursive
+        // `ngTemplateOutlet` tree can still find this group by walking its real ancestors — see the
+        // comment on `DragDropService`'s registries for why DI alone can't do this.
+        this.service.registerGroup(this.el.nativeElement, this._ref);
+    }
+    ngOnDestroy() {
+        this._ref.lists.clear();
+        this.service.removeGroup(this.el.nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropListGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDropListGroup, isStandalone: true, selector: "[NgxDropListGroup],[ngxDropListGroup]", providers: [{ provide: NGX_DROPLIST_GROUP, useExisting: NgxDropListGroup }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropListGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NgxDropListGroup],[ngxDropListGroup]',
+                    providers: [{ provide: NGX_DROPLIST_GROUP, useExisting: NgxDropListGroup }],
+                }]
+        }] });
+
 function moveItemInArray(array, from, to) {
     const f = clamp(from, array.length - 1);
     const t = clamp(to, array.length - 1);