ngx-kit 8.0.2 → 8.1.0

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

@@ -1,5 +1,5 @@
 import * as i0 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 { signal, EventEmitter, Injectable, InjectionToken, inject, ApplicationRef, Directive, model, input, output, Renderer2, effect, ContentChild, Input, HostListener, Output, ElementRef } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 /**
@@ -79,103 +79,87 @@ function adjustForZoom(value) {
     return zoom ? value / zoom : value;
 }
 
-/**
- * Copy the browser-resolved visual state of an element.
- *
- * A drag preview is moved to <body>, so selectors depending on ancestors no
- * longer apply. Copying computed styles (including custom properties) makes
- * the preview visually independent from the original DOM subtree.
- */
-function copyComputedStyle(source, target) {
-    copyStyleValues(source, target);
-    // Make the preview deterministic once it is taken out of normal flow (root only:
-    // descendants keep their own margins so the internal layout is unchanged).
-    target.style.setProperty('margin', '0', 'important');
-    target.style.setProperty('box-sizing', 'border-box', 'important');
-}
-function copyStyleValues(source, target) {
-    const computed = window.getComputedStyle(source);
-    for (let i = 0; i < computed.length; i++) {
-        const property = computed.item(i);
-        const value = computed.getPropertyValue(property);
-        if (value) {
-            target.style.setProperty(property, value, computed.getPropertyPriority(property));
+/** Above any app chrome (modals, sticky headers) but below the browser's own UI. */
+const PREVIEW_Z_INDEX = '2147483000';
+class DragPreviewRef {
+    tpl;
+    /** Set by `ngxDragPreview` so the embedded view can join Angular's change-detection tree. */
+    appRef;
+    element;
+    isCustom = false;
+    _view;
+    attach(dragEl, rect) {
+        const doc = dragEl.ownerDocument;
+        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.nodeType === Node.ELEMENT_NODE);
+            if (!element) {
+                this.appRef?.detachView(this._view);
+                this._view.destroy();
+                this._view = undefined;
+                throw new Error('ngxDragPreview template must contain exactly one HTMLElement root node ');
+            }
+            this.element = element;
+            this.isCustom = true;
+        }
+        else {
+            this.isCustom = false;
+            const preview = dragEl.cloneNode(true);
+            this.element = preview;
+            // Avoid duplicated ids in the document.
+            this.element.removeAttribute('id');
+            this.element.querySelectorAll('[id]').forEach((n) => n.removeAttribute('id'));
+            this.element.classList.add('ngx-drag-preview');
+            this.element.setAttribute('aria-hidden', 'true');
+            this.element.setAttribute('inert', '');
+            Object.assign(this.element.style, {
+                width: `${rect.width}px`,
+                height: `${rect.height}px`,
+                margin: '0',
+                boxSizing: 'border-box',
+            });
         }
+        Object.assign(this.element.style, {
+            position: 'fixed',
+            top: `${rect.top}px`,
+            bottom: 'auto',
+            pointerEvents: 'none',
+            transition: 'none',
+            animation: 'none',
+            transform: 'none',
+            visibility: 'visible',
+            display: this.element.style.display === 'none' ? '' : this.element.style.display,
+            willChange: 'transform',
+            zIndex: PREVIEW_Z_INDEX,
+        });
+        if (isRtl(doc.body)) {
+            Object.assign(this.element.style, {
+                right: `${window.innerWidth - rect.right}px`,
+                left: 'auto',
+            });
+        }
+        else {
+            Object.assign(this.element.style, {
+                left: `${rect.left}px`,
+                right: 'auto',
+            });
+        }
+        doc.body.appendChild(this.element);
+        return this.element;
     }
-}
-function copyComputedStyleTree(source, target) {
-    copyComputedStyle(source, target);
-    copyDescendants(source, target);
-}
-function copyDescendants(source, target) {
-    const sourceChildren = Array.from(source.children);
-    const targetChildren = Array.from(target.children);
-    const count = Math.min(sourceChildren.length, targetChildren.length);
-    for (let i = 0; i < count; i++) {
-        copyStyleValues(sourceChildren[i], targetChildren[i]);
-        copyDescendants(sourceChildren[i], targetChildren[i]);
+    detach() {
+        this.element?.remove();
+        if (this._view) {
+            this.appRef?.detachView(this._view);
+            this._view.destroy();
+            this._view = undefined;
+        }
+        this.element = undefined;
     }
 }
-/** Backward-compatible helper retained for consumers of older versions. */
-function copyEssentialStyles(source, target) {
-    copyComputedStyle(source, target);
-    target.style.setProperty('box-sizing', 'border-box');
-}
-function combineTransforms(transform, initialTransform) {
-    return initialTransform && initialTransform !== 'none'
-        ? transform + ' ' + initialTransform
-        : transform;
-}
-
-/** Above any app chrome (modals, sticky headers) but below the browser's own UI. */
-const PREVIEW_Z_INDEX = '2147483000';
-/**
- * Creates the visual that follows the pointer while an item of a drop list is dragged.
- *
- * It is appended to `<body>` with `position: fixed`, so no ancestor of the original item
- * (`overflow: hidden`, scroll containers, clipping, transformed/positioned parents) can clip
- * or offset it. Computed styles are copied recursively first, because once the clone leaves
- * its list every selector that depended on an ancestor (`.column .card {}`) and every
- * inherited property (font, colour, `direction`) would otherwise be lost.
- *
- * Only used for drop-list drags. Free drag never calls this.
- */
-function cloneDragElementInBody(dragEl, rect, pointerX, pointerY) {
-    const doc = dragEl.ownerDocument;
-    const preview = dragEl.cloneNode(true);
-    // Avoid duplicated ids in the document.
-    preview.removeAttribute('id');
-    preview.querySelectorAll('[id]').forEach((n) => n.removeAttribute('id'));
-    preview.classList.add('ngx-drag-preview');
-    preview.setAttribute('aria-hidden', 'true');
-    preview.setAttribute('inert', '');
-    copyComputedStyleTree(dragEl, preview);
-    Object.assign(preview.style, {
-        position: 'fixed',
-        top: `${rect.top}px`,
-        left: `${rect.left}px`,
-        right: 'auto',
-        bottom: 'auto',
-        width: `${rect.width}px`,
-        height: `${rect.height}px`,
-        margin: '0',
-        pointerEvents: 'none',
-        boxSizing: 'border-box',
-        transition: 'none',
-        animation: 'none',
-        transform: 'none',
-        visibility: 'visible',
-        display: preview.style.display === 'none' ? '' : preview.style.display,
-        willChange: 'transform',
-        zIndex: PREVIEW_Z_INDEX,
-    });
-    doc.body.appendChild(preview);
-    return {
-        element: preview,
-        offsetX: pointerX - rect.left,
-        offsetY: pointerY - rect.top,
-    };
-}
 
 let zIndexCounter = 1000;
 class DragRef {
@@ -196,6 +180,7 @@ class DragRef {
     placeholder;
     originDropList = null;
     originIndex = -1;
+    preview;
     isDragging = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
     position = signal({ x: 0, y: 0 }, /* @ts-ignore */
@@ -208,9 +193,6 @@ class DragRef {
     moveDx = 0;
     moveDy = 0;
     scrollCompensation = { x: 0, y: 0 };
-    preview;
-    previewOffsetX = 0;
-    previewOffsetY = 0;
     sourceVisibility = '';
     sourceDisplay = '';
     sourcePointerEvents = '';
@@ -283,12 +265,8 @@ class DragRef {
          */
         if (list) {
             this.listDrag = true;
-            // Order matters: clone while the source is still visible and fully styled, hide it,
-            // and only THEN measure (the placeholder takes over the source's slot).
-            const preview = cloneDragElementInBody(this.el, this.startRect, pointer.x, pointer.y);
-            this.preview = preview.element;
-            this.previewOffsetX = preview.offsetX;
-            this.previewOffsetY = preview.offsetY;
+            this.preview ??= new DragPreviewRef();
+            this.preview.attach(this.el, this.startRect);
             this.el.style.visibility = 'hidden';
             this.el.style.display = 'none';
             this.el.style.pointerEvents = 'none';
@@ -350,7 +328,7 @@ class DragRef {
         this.isDragging.set(false);
         this.placeholder?.detach();
         this.placeholder = undefined;
-        this.preview?.remove();
+        this.preview?.detach();
         this.preview = undefined;
         this.el.classList.remove('ngx-draggable--dragging');
         this.el.style.visibility = this.sourceVisibility;
@@ -564,7 +542,7 @@ class DragRef {
         const event = target?._finish(this, true) ?? null;
         for (const l of this.cachedLists)
             l._release(this);
-        this.preview?.remove();
+        this.preview?.detach();
         this.preview = undefined;
         this.placeholder = undefined;
         this.activeDropList = null;
@@ -584,9 +562,9 @@ class DragRef {
             target.onDrop.emit(event);
     }
     updatePreview() {
-        if (!this.preview)
+        if (!this.preview || !this.preview.element)
             return;
-        this.preview.style.transform = `translate3d(${this.moveDx}px, ${this.moveDy}px, 0)`;
+        this.preview.element.style.transform = `translate3d(${this.moveDx}px, ${this.moveDy}px, 0)`;
     }
 }
 /** Is `list` nested (at any depth) inside `ancestor`, per the parent/child list tree? */
@@ -598,18 +576,64 @@ function isDescendantOfList(list, ancestor) {
     return false;
 }
 
+class ElementHelper {
+    static collectionHas(a, b) {
+        //helper function (see below)
+        for (var i = 0, len = a.length; i < len; i++) {
+            if (a[i] == b)
+                return true;
+        }
+        return false;
+    }
+    static findParentBySelector(elm, selector) {
+        var all = document.querySelectorAll(selector);
+        var cur = elm.parentNode;
+        while (cur && !ElementHelper.collectionHas(all, cur)) {
+            //keep going up until you find a match
+            cur = cur.parentNode; //go up
+        }
+        return cur; //will return null if not found
+    }
+}
+function getFirstLevelDraggables(container) {
+    const all = Array.from(container.querySelectorAll('.ngx-draggable:not(.dragging)'));
+    const firstLevel = [];
+    for (const el of all) {
+        let parent = el.parentElement;
+        let isNested = false;
+        while (parent && parent !== container) {
+            if (parent.classList.contains('ngx-draggable')) {
+                isNested = true;
+                break;
+            }
+            parent = parent.parentElement;
+        }
+        if (!isNested) {
+            firstLevel.push(el);
+        }
+    }
+    return firstLevel;
+}
+function isElementNode(node) {
+    return node?.nodeType === Node.ELEMENT_NODE;
+}
+function isDocumentNode(node) {
+    return node?.nodeType === Node.DOCUMENT_NODE;
+}
+function isShadowRootNode(node) {
+    return node?.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 'host' in node;
+}
+function getOwnerWindow(node) {
+    return node?.ownerDocument?.defaultView ?? null;
+}
+function isWindow(value) {
+    return (value != null &&
+        typeof value === 'object' &&
+        'window' in value &&
+        value.window === value);
+}
+
 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;
@@ -626,7 +650,7 @@ class PlaceHolderRef {
                 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);
+                const element = this._view.rootNodes.find((node) => isElementNode(node));
                 if (!element) {
                     this.appRef?.detachView(this._view);
                     this._view.destroy();
@@ -1142,14 +1166,15 @@ class SortSession {
         let slot = -1;
         let allOthers = 0;
         for (const node of Array.from(this.container.children)) {
-            if (!(node instanceof HTMLElement))
+            if (!isElementNode(node))
                 continue;
-            const isSlot = node === this.placeholder;
-            if (!isSlot && !this.itemElements.has(node))
+            const el = node;
+            const isSlot = el === this.placeholder;
+            if (!isSlot && !this.itemElements.has(el))
                 continue;
             const modelIdx = isSlot ? -1 : allOthers++;
-            const rect = node.getBoundingClientRect();
-            const off = this.applied.get(node);
+            const rect = el.getBoundingClientRect();
+            const off = this.applied.get(el);
             const box = toBox(rect);
             if (off) {
                 // Strip our own displacement so the snapshot always describes the *undisplaced* layout.
@@ -1165,14 +1190,14 @@ class SortSession {
                 slot = entries.length;
             else
                 otherModelIndex.push(modelIdx);
-            const known = previous.get(node);
+            const known = previous.get(el);
             entries.push(known ?? {
-                el: node,
+                el: el,
                 isSlot,
-                base: initialTransform(node),
-                savedTransform: node.style.transform,
-                savedTransition: node.style.transition,
-                savedWillChange: node.style.willChange,
+                base: initialTransform(el),
+                savedTransform: el.style.transform,
+                savedTransition: el.style.transition,
+                savedWillChange: el.style.willChange,
             });
             boxes.push(box);
         }
@@ -1752,12 +1777,15 @@ class DropListRef {
         const els = [];
         const boxes = [];
         for (const node of Array.from(this.el.children)) {
-            if (!(node instanceof HTMLElement) || !others.has(node))
+            if (!isElementNode(node))
                 continue;
-            const r = node.getBoundingClientRect();
+            const el = node;
+            if (!others.has(el))
+                continue;
+            const r = el.getBoundingClientRect();
             if (r.width === 0 && r.height === 0)
                 continue;
-            els.push(node);
+            els.push(el);
             boxes.push(toBox(r));
         }
         if (!els.length)
@@ -1782,15 +1810,16 @@ class DropListRef {
                 byElement.set(d.el, d);
         let index = 0;
         for (const node of Array.from(this.el.children)) {
-            if (!(node instanceof HTMLElement))
+            if (!isElementNode(node))
                 continue;
-            if (node === this.placeholder?.element)
+            const el = node;
+            if (el === this.placeholder?.element)
                 continue;
-            if (node.classList.contains('ngx-drag-placeholder'))
+            if (el.classList.contains('ngx-drag-placeholder'))
                 continue;
-            if (node.classList.contains('ngx-drag-preview'))
+            if (el.classList.contains('ngx-drag-preview'))
                 continue;
-            const ref = byElement.get(node);
+            const ref = byElement.get(el);
             if (!ref)
                 continue;
             if (ref === item)
@@ -1887,19 +1916,6 @@ 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) {
@@ -1930,13 +1946,25 @@ class DragDropService {
     findAncestorDropList(start) {
         let node = start;
         while (node) {
-            if (node instanceof HTMLElement) {
+            if (isElementNode(node)) {
                 const found = this.listsByEl.get(node);
                 if (found) {
                     return found;
                 }
             }
-            node = node instanceof ShadowRoot ? node.host : node.parentNode;
+            if (isShadowRootNode(node) && 'host' in node) {
+                node = node.host;
+                continue;
+            }
+            if (isDocumentNode(node)) {
+                const frame = node.defaultView?.frameElement;
+                if (frame) {
+                    node = frame;
+                    continue;
+                }
+                break;
+            }
+            node = node.parentNode;
         }
         return null;
     }
@@ -1944,13 +1972,31 @@ class DragDropService {
     findAncestorGroup(start) {
         let node = start;
         while (node) {
-            if (node instanceof HTMLElement) {
+            // HTMLElement / SVGElement / ...
+            if (isElementNode(node)) {
                 const found = this.groupsByEl.get(node);
                 if (found) {
                     return found;
                 }
             }
-            node = node instanceof ShadowRoot ? node.host : node.parentNode;
+            // ShadowRoot
+            // ShadowRoot یک DocumentFragment است و در iframe ممکن است
+            if (isShadowRootNode(node) && 'host' in node && node.host) {
+                node = node.host;
+                continue;
+            }
+            // iframe Document
+            // 9 === DOCUMENT_NODE
+            if (node.nodeType === 9) {
+                const frame = node.defaultView?.frameElement;
+                if (frame) {
+                    node = frame;
+                    continue;
+                }
+                // root document
+                break;
+            }
+            node = node.parentNode;
         }
         return null;
     }
@@ -2059,15 +2105,16 @@ class AutoScroller {
             this.raf = 0;
             return;
         }
-        if (this.container instanceof Window) {
-            this.container.scrollBy(this.speed.x, this.speed.y);
+        const container = this.container;
+        if (isWindow(container)) {
+            container.scrollBy(this.speed.x, this.speed.y);
         }
         else {
-            this.container.scrollLeft += this.speed.x;
-            this.container.scrollTop += this.speed.y;
+            container.scrollLeft += this.speed.x;
+            container.scrollTop += this.speed.y;
         }
-        // pointer ثابت مونده ولی محتوای زیرش اسکرول شده — پس sort/placeholder را
-        // دوباره با آخرین موقعیت شناخته‌شده اجرا کن.
+        // Pointer ثابت مانده ولی محتوا اسکرول شده؛
+        // بنابراین موقعیت placeholder/sort را دوباره محاسبه کن.
         this.onTick?.();
         this.raf = requestAnimationFrame(this.tick);
     };
@@ -2080,7 +2127,7 @@ function edgeSpeed(pos, min, max, edge, maxSpeed) {
     return 0;
 }
 function getScrollRect(container) {
-    if (container instanceof Window) {
+    if (isWindow(container)) {
         return { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
     }
     return container.getBoundingClientRect();
@@ -2090,19 +2137,53 @@ function findScrollableAncestor(el) {
     while (node) {
         const style = getComputedStyle(node);
         const scrollable = /(auto|scroll|overlay)/.test(style.overflowY + style.overflowX);
-        if (scrollable && node.scrollHeight > node.clientHeight)
+        if (scrollable && node.scrollHeight > node.clientHeight) {
             return node;
+        }
         node = node.parentElement;
     }
-    return window;
+    return el.ownerDocument.defaultView ?? window;
 }
 function getScrollPosition(container) {
-    if (container instanceof Window) {
+    if (isWindow(container)) {
         return { left: window.scrollX, top: window.scrollY };
     }
     return { left: container.scrollLeft, top: container.scrollTop };
 }
 
+const NGX_DRAG_PREVIEW = new InjectionToken('ngx_drag_preview');
+/**
+ * Custom preview content, from `*ngxDragPreview` inside the `ngxDraggable`.
+ *
+ * @example
+ *  ```html
+ *  <div ngxDropList>
+ *   <div ngxDraggable>
+ *     <span class="my-preview" *ngxDragPreview></span>
+ *     ...
+ *   </div>
+ * </div>
+ *  ```
+ */
+class NgxDragPreview {
+    tpl;
+    _ref = new DragPreviewRef();
+    constructor(tpl) {
+        this.tpl = tpl;
+        this._ref.tpl = tpl;
+        this._ref.appRef = inject(ApplicationRef);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDragPreview, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDragPreview, isStandalone: true, selector: "[ngxDragPreview]", providers: [{ provide: NGX_DRAG_PREVIEW, useExisting: NgxDragPreview }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDragPreview, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxDragPreview]',
+                    providers: [{ provide: NGX_DRAG_PREVIEW, useExisting: NgxDragPreview }],
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 /** Pointer events already claimed by an (inner) draggable. */
 const claimedPointerEvents = new WeakSet();
 const NGX_DRAGGABLE = new InjectionToken('ngx-draggable');
@@ -2134,6 +2215,7 @@ class NgxDraggable {
     set data(v) {
         this._ref.data = v;
     }
+    customPreview;
     dragStart = output();
     dragMove = output();
     dragEnd = output();
@@ -2187,6 +2269,11 @@ class NgxDraggable {
         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));
     }
+    ngAfterContentInit() {
+        if (this.customPreview) {
+            this._ref.preview = this.customPreview._ref;
+        }
+    }
     ngOnDestroy() {
         this.removeDown?.();
         this.removeMove?.();
@@ -2216,12 +2303,13 @@ class NgxDraggable {
         e.preventDefault();
         this.down = true;
         this.pointerId = e.pointerId;
+        this._ref.el.setPointerCapture(this.pointerId);
         this.start = { x: e.clientX, y: e.clientY };
         this._ref.boundary = this.boundary();
         this._ref.lockAxis = this.lockAxis();
         this._ref.pointerDown(this.start);
-        this.removeMove = this.renderer.listen(this.doc, 'pointermove', (ev) => this.pointerMove(ev));
-        this.removeUp = this.renderer.listen(this.doc, 'pointerup', (ev) => this.pointerUp(ev));
+        this.removeMove = this.renderer.listen(this._ref.el, 'pointermove', (ev) => this.pointerMove(ev));
+        this.removeUp = this.renderer.listen(this._ref.el, 'pointerup', (ev) => this.pointerUp(ev));
         this.removeEscape = this.renderer.listen(this.doc, 'keydown', (ev) => {
             if (ev.key === 'Escape' && this.dragging())
                 this.cancel();
@@ -2299,6 +2387,9 @@ class NgxDraggable {
     pointerUp(e) {
         if (!this.down || e.pointerId !== this.pointerId)
             return;
+        if (this._ref.el.hasPointerCapture(this.pointerId)) {
+            this._ref.el.releasePointerCapture(this.pointerId);
+        }
         if (this.dragging()) {
             // Also when released OUTSIDE every list: endDrag() rolls the drag back and cleans up.
             if (this._ref.isListDrag) {
@@ -2395,14 +2486,16 @@ class NgxDraggable {
     isOnHandle(target) {
         if (!this.dragHandle())
             return true;
+        // TODO notsafe instanseof: node.nodeType === Node.ELEMENT_NODE
         return target instanceof HTMLElement && !!target.closest(this.dragHandle());
     }
     isInteractive(target) {
+        // TODO notsafe instanseof: node.nodeType === Node.ELEMENT_NODE
         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 }], 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 });
+    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 }], queries: [{ propertyName: "customPreview", first: true, predicate: NgxDragPreview, descendants: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, decorators: [{
             type: Directive,
@@ -2420,6 +2513,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         }], 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']
+            }], customPreview: [{
+                type: ContentChild,
+                args: [NgxDragPreview]
             }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
 
 const ALL_DIRECTIONS = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
@@ -2726,6 +2822,7 @@ class NgxResizable {
         /**
          * Explicit resize handle has priority.
          */
+        // TODO notsafe instanceof:node.nodeType === Node.ELEMENT_NODE
         const handle = e.target instanceof HTMLElement
             ? e.target.closest('[data-ngx-resize-handle]')
             : null;
@@ -2798,6 +2895,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             }] } });
 
 const NGX_PLACEHOLDER = new InjectionToken('ngx-place-holder');
+/**
+ * Custom placeholder content, from `*ngxPlaceholder` inside the `ngxDropList`.
+ *
+ * @example
+ *   ```html
+ *   <div ngxDropList>
+ *     <span class="my-placeholder" *ngxPlaceholder></span>
+ *     ...
+ *   </div>
+ *  ```
+ */
 class NgxPlaceholder {
     tpl;
     _ref = new PlaceHolderRef();
@@ -2843,11 +2951,6 @@ class NgxDropList {
     }
     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);
@@ -2962,5 +3065,5 @@ function clamp(v, max) {
  * Generated bundle index. Do not edit.
  */
 
-export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, findScrollableAncestor, getPageZoom, getScrollPosition, isRtl, moveItemInArray, resolveLogicalDirection, transferArrayItem };
+export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DRAG_PREVIEW, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDragPreview, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, findScrollableAncestor, getPageZoom, getScrollPosition, isRtl, moveItemInArray, resolveLogicalDirection, transferArrayItem };
 //# sourceMappingURL=ngx-kit-drag-resize.mjs.map