ngx-kit 9.0.0 → 9.1.0

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

@@ -1,6 +1,5 @@
 import * as i0 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';
 
 /**
  * Boundary clamping utilities.
@@ -70,15 +69,67 @@ function clampResizeWithinBoundary(boundaryRect, startRect, width, height, left,
     return { width: clampedWidth, height: clampedHeight, left: clampedLeft, top: clampedTop };
 }
 /** Current page zoom level (1 = 100%). Falls back to devicePixelRatio pre visualViewport. */
-function getPageZoom() {
-    return window.visualViewport?.scale ?? window.devicePixelRatio ?? 1;
+function getPageZoom(element) {
+    const win = element?.ownerDocument.defaultView ?? (typeof window !== 'undefined' ? window : null);
+    return win?.visualViewport?.scale ?? win?.devicePixelRatio ?? 1;
 }
 /** Adjusts a raw pointer-derived value for the current page zoom level. */
-function adjustForZoom(value) {
-    const zoom = getPageZoom();
+function adjustForZoom(value, element) {
+    const zoom = getPageZoom(element);
     return zoom ? value / zoom : value;
 }
 
+/** Base (LTR) physical direction for every logical direction. */
+const LTR_BASE = {
+    start: 'w',
+    end: 'e',
+    'n-start': 'nw',
+    'n-end': 'ne',
+    's-start': 'sw',
+    's-end': 'se',
+};
+/** Mirrors the horizontal component of a physical direction. 'n' / 's' pass through unchanged. */
+const MIRROR = {
+    n: 'n',
+    s: 's',
+    e: 'w',
+    w: 'e',
+    ne: 'nw',
+    nw: 'ne',
+    se: 'sw',
+    sw: 'se',
+};
+function isLogicalDirection(dir) {
+    return Object.prototype.hasOwnProperty.call(LTR_BASE, dir);
+}
+/**
+ * True when `element` sits inside a right-to-left context.
+ *
+ * Reads the *computed* `direction` style instead of `element.dir`, because
+ * `direction` is inherited and is almost never set on the resizable element
+ * itself - it's usually set on `<html>`, `<body>`, or some ancestor wrapper.
+ */
+function isRtl(element) {
+    const win = element.ownerDocument.defaultView;
+    return win ? win.getComputedStyle(element).direction === 'rtl' : false;
+}
+/**
+ * Resolves a logical direction ('start' | 'end' | 'n-start' | 'n-end' | 's-start' | 's-end')
+ * to a physical, viewport-space direction ('n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw')
+ * based on `rtl`.
+ *
+ * Physical directions pass through untouched, so it's always safe to call this
+ * even when `dir` might already be physical (e.g. resolving a direction that was
+ * already resolved once before).
+ */
+function resolveLogicalDirection(dir, rtl) {
+    if (!isLogicalDirection(dir)) {
+        return dir;
+    }
+    const base = LTR_BASE[dir];
+    return rtl ? MIRROR[base] : base;
+}
+
 /** Above any app chrome (modals, sticky headers) but below the browser's own UI. */
 const PREVIEW_Z_INDEX = '2147483000';
 class DragPreviewRef {
@@ -135,9 +186,10 @@ class DragPreviewRef {
             willChange: 'transform',
             zIndex: PREVIEW_Z_INDEX,
         });
+        const win = doc.defaultView;
         if (isRtl(doc.body)) {
             Object.assign(this.element.style, {
-                right: `${window.innerWidth - rect.right}px`,
+                right: `${(win?.innerWidth ?? rect.right) - rect.right}px`,
                 left: 'auto',
             });
         }
@@ -147,7 +199,7 @@ class DragPreviewRef {
                 right: 'auto',
             });
         }
-        doc.body.appendChild(this.element);
+        (doc.body ?? doc.documentElement).appendChild(this.element);
         return this.element;
     }
     detach() {
@@ -161,6 +213,139 @@ class DragPreviewRef {
     }
 }
 
+function viewportDeltaToLocal(element, delta, includeElementTransform = true) {
+    const matrix = getLocalToViewportMatrix(element, includeElementTransform);
+    const determinant = matrix.a * matrix.d - matrix.b * matrix.c;
+    if (!Number.isFinite(determinant) || Math.abs(determinant) < 1e-8) {
+        // A zero-scale ancestor has no invertible coordinate space. Avoid NaN/Infinity.
+        return { x: 0, y: 0 };
+    }
+    const inverseA = matrix.d / determinant;
+    const inverseB = -matrix.b / determinant;
+    const inverseC = -matrix.c / determinant;
+    const inverseD = matrix.a / determinant;
+    return {
+        x: inverseA * delta.x + inverseC * delta.y,
+        y: inverseB * delta.x + inverseD * delta.y,
+    };
+}
+function localDeltaToViewport(element, delta) {
+    const matrix = getLocalToViewportMatrix(element);
+    return {
+        x: matrix.a * delta.x + matrix.c * delta.y,
+        y: matrix.b * delta.x + matrix.d * delta.y,
+    };
+}
+/** Returns the composed 2D linear transform from element-local to viewport space. */
+function getLocalToViewportMatrix(element, includeElementTransform = true) {
+    const win = element.ownerDocument.defaultView;
+    if (!win || typeof win.DOMMatrix !== 'function') {
+        return { a: 1, b: 0, c: 0, d: 1 };
+    }
+    let result = { a: 1, b: 0, c: 0, d: 1 };
+    let current = includeElementTransform ? element : element.parentElement;
+    while (current) {
+        const style = win.getComputedStyle(current);
+        const transform = style.transform;
+        if (transform && transform !== 'none') {
+            try {
+                const matrix = new win.DOMMatrix(transform);
+                result = multiplyLinear({ a: matrix.a, b: matrix.b, c: matrix.c, d: matrix.d }, result);
+            }
+            catch {
+                // Ignore unsupported/malformed transforms and continue with remaining ancestors.
+            }
+        }
+        // CSS `zoom` is not represented consistently in computed `transform` across browsers.
+        const zoom = Number.parseFloat(style.getPropertyValue('zoom'));
+        if (Number.isFinite(zoom) && zoom > 0 && zoom !== 1) {
+            result = multiplyLinear({ a: zoom, b: 0, c: 0, d: zoom }, result);
+        }
+        current = current.parentElement;
+    }
+    return result;
+}
+function multiplyLinear(left, right) {
+    return {
+        a: left.a * right.a + left.c * right.b,
+        b: left.b * right.a + left.d * right.b,
+        c: left.a * right.c + left.c * right.d,
+        d: left.b * right.c + left.d * right.d,
+    };
+}
+/**
+ * Converts a client-space point from one same-origin Document viewport to another.
+ * The conversion walks both frameElement chains through their common top-level document.
+ * Cross-origin frame boundaries cannot be inspected and return null.
+ */
+function convertPointBetweenDocuments(point, fromDocument, toDocument) {
+    if (fromDocument === toDocument)
+        return { ...point };
+    const toTop = (doc, value) => {
+        let current = doc;
+        let result = { ...value };
+        const visited = new Set();
+        while (current.defaultView?.frameElement) {
+            if (visited.has(current))
+                return null;
+            visited.add(current);
+            let frame;
+            try {
+                frame = current.defaultView.frameElement;
+            }
+            catch {
+                return null;
+            }
+            const iframe = frame;
+            const rect = iframe.getBoundingClientRect();
+            const scaleX = iframe.offsetWidth ? rect.width / iframe.offsetWidth : 1;
+            const scaleY = iframe.offsetHeight ? rect.height / iframe.offsetHeight : 1;
+            result = {
+                x: rect.left + iframe.clientLeft * scaleX + result.x * scaleX,
+                y: rect.top + iframe.clientTop * scaleY + result.y * scaleY,
+            };
+            current = iframe.ownerDocument;
+        }
+        return { document: current, point: result };
+    };
+    const from = toTop(fromDocument, point);
+    if (!from)
+        return null;
+    const targetFrames = [];
+    let current = toDocument;
+    const visited = new Set();
+    while (current && current !== from.document) {
+        if (visited.has(current))
+            return null;
+        visited.add(current);
+        let frame;
+        try {
+            frame = current.defaultView?.frameElement ?? null;
+        }
+        catch {
+            return null;
+        }
+        if (!frame)
+            return null;
+        targetFrames.push(frame);
+        current = frame.ownerDocument;
+    }
+    if (current !== from.document)
+        return null;
+    let result = from.point;
+    for (let i = targetFrames.length - 1; i >= 0; i--) {
+        const iframe = targetFrames[i];
+        const rect = iframe.getBoundingClientRect();
+        const scaleX = iframe.offsetWidth ? rect.width / iframe.offsetWidth : 1;
+        const scaleY = iframe.offsetHeight ? rect.height / iframe.offsetHeight : 1;
+        result = {
+            x: (result.x - rect.left) / scaleX - iframe.clientLeft,
+            y: (result.y - rect.top) / scaleY - iframe.clientTop,
+        };
+    }
+    return result;
+}
+
 let zIndexCounter = 1000;
 class DragRef {
     data;
@@ -197,6 +382,8 @@ class DragRef {
     sourceDisplay = '';
     sourcePointerEvents = '';
     sourceTransition = '';
+    sourceWillChange = '';
+    sourceTransform = '';
     /** True while a drop-list drag (body preview + placeholder) is in progress. Free drag: always false. */
     listDrag = false;
     cachedLists = [];
@@ -212,7 +399,9 @@ class DragRef {
     scrollListener;
     resizeListener;
     init() {
-        this.previousTransform = getComputedStyle?.(this.el)?.getPropertyValue?.('transform');
+        this.previousTransform =
+            this.el.ownerDocument.defaultView?.getComputedStyle(this.el).transform ?? '';
+        this.sourceTransform = this.el.style.transform;
     }
     withDropList(list) {
         if (this.dropList === list)
@@ -242,13 +431,16 @@ class DragRef {
         const list = this.dropList && this.dropList.el === this.el.parentElement ? this.dropList : null;
         this.originDropList = list;
         this.originIndex = list?.getItemIndex(this) ?? -1;
-        this.previousTransform = getComputedStyle(this.el).getPropertyValue('transform');
+        const win = this.el.ownerDocument.defaultView;
+        this.previousTransform = win?.getComputedStyle(this.el).transform ?? '';
+        this.sourceTransform = this.el.style.transform;
         this.isDragging.set(true);
         this.previousZIndex = this.el.style.zIndex;
         this.sourceVisibility = this.el.style.visibility;
         this.sourceDisplay = this.el.style.display;
         this.sourcePointerEvents = this.el.style.pointerEvents;
         this.sourceTransition = this.el.style.transition;
+        this.sourceWillChange = this.el.style.willChange;
         this.el.classList.add('ngx-draggable--dragging');
         this.el.style.willChange = 'transform';
         this.el.style.transition = 'none';
@@ -334,7 +526,8 @@ class DragRef {
         this.el.style.visibility = this.sourceVisibility;
         this.el.style.display = this.sourceDisplay;
         this.el.style.pointerEvents = this.sourcePointerEvents;
-        this.el.style.willChange = '';
+        this.el.style.willChange = this.sourceWillChange;
+        this.el.style.transition = this.sourceTransition;
         this.el.style.zIndex = this.previousZIndex;
     }
     cancelDrag() {
@@ -350,7 +543,7 @@ class DragRef {
             return;
         }
         // ---- free drag: unchanged ----
-        this.el.style.transform = this.previousTransform;
+        this.el.style.transform = this.sourceTransform;
         this.el.style.visibility = this.sourceVisibility;
         this.el.style.pointerEvents = this.sourcePointerEvents;
         this.scrollCompensation = { x: 0, y: 0 };
@@ -358,10 +551,24 @@ class DragRef {
     }
     /** Abort without emitting anything (the directive was destroyed mid-drag). Idempotent. */
     dispose() {
-        if (!this.listDrag)
+        if (!this.isDragging())
             return;
         this.isDragging.set(false);
-        this.finishListDrag(false);
+        this.position.set({ x: 0, y: 0 });
+        if (this.listDrag) {
+            this.finishListDrag(false);
+            return;
+        }
+        this.el.style.transform = this.sourceTransform;
+        this.el.style.visibility = this.sourceVisibility;
+        this.el.style.display = this.sourceDisplay;
+        this.el.style.pointerEvents = this.sourcePointerEvents;
+        this.el.style.transition = this.sourceTransition;
+        this.el.style.willChange = this.sourceWillChange;
+        this.el.style.zIndex = this.previousZIndex;
+        this.el.classList.remove('ngx-draggable--dragging');
+        this.scrollCompensation = { x: 0, y: 0 };
+        this.position.set({ x: 0, y: 0 });
     }
     /** True while a drop-list drag is running. */
     get isListDrag() {
@@ -410,14 +617,17 @@ class DragRef {
             : '';
         const tx = this.moveDx + this.scrollCompensation.x;
         const ty = this.moveDy + this.scrollCompensation.y;
-        this.el.style.transform = `${base}translate3d(${tx}px, ${ty}px, 0)`;
+        const local = viewportDeltaToLocal(this.el, { x: tx, y: ty });
+        this.el.style.transform = `${base}translate3d(${local.x}px, ${local.y}px, 0)`;
     }
     // -------------------------------------------------------------------------------------
     // drop-list drag
     // -------------------------------------------------------------------------------------
     beginListDrag(origin, pointer) {
         const doc = this.el.ownerDocument;
-        const win = doc.defaultView ?? window;
+        const win = doc.defaultView;
+        if (!win)
+            return;
         this.dropListsSnapshot = null; // force refreshDropCandidates() to do a full pass below
         this.refreshDropCandidates(origin);
         this.lastEffective = { ...pointer };
@@ -484,9 +694,11 @@ class DragRef {
         if (!origin)
             return;
         this.refreshDropCandidates(origin);
-        const next = this.resolveDropList(pointer);
+        const resolved = this.resolveDropList(pointer);
+        const next = resolved?.list ?? null;
+        const targetPointer = resolved?.pointer ?? pointer;
         if (next === this.activeDropList) {
-            next?.sortItem(this, pointer);
+            next?.sortItem(this, targetPointer);
             return;
         }
         const prev = this.activeDropList;
@@ -501,7 +713,7 @@ class DragRef {
             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
+        next?.enter(this, targetPointer.x, targetPointer.y); // coordinates belong to the target document
     }
     /**
      * Innermost connected list under the pointer, from the precomputed candidates: deeper always
@@ -513,15 +725,22 @@ class DragRef {
         let best = null;
         let bestDepth = -1;
         for (const { list, depth } of this.dropCandidates) {
-            if (!list._containsPoint(pointer.x, pointer.y))
+            const targetDocument = list.el?.ownerDocument;
+            if (!targetDocument)
+                continue;
+            // Pointer coordinates originate in the draggable's document. A same-origin iframe has
+            // its own viewport coordinate space, so convert before testing its DropList geometry.
+            const targetPoint = convertPointBetweenDocuments(pointer, this.el.ownerDocument, targetDocument);
+            if (!targetPoint || !list._containsPoint(targetPoint.x, targetPoint.y))
                 continue;
             if (!best || depth > bestDepth) {
-                best = list;
+                best = { list, pointer: targetPoint };
                 bestDepth = depth;
             }
-            else if (depth === bestDepth && best !== this.activeDropList) {
-                if (list === this.activeDropList || list._area() < best._area())
-                    best = list;
+            else if (depth === bestDepth && best.list !== this.activeDropList) {
+                if (list === this.activeDropList || list._area() < best.list._area()) {
+                    best = { list, pointer: targetPoint };
+                }
             }
         }
         return best;
@@ -536,7 +755,7 @@ class DragRef {
         if (this.scrollListener)
             doc.removeEventListener('scroll', this.scrollListener, { capture: true });
         if (this.resizeListener)
-            (doc.defaultView ?? window).removeEventListener('resize', this.resizeListener);
+            doc.defaultView?.removeEventListener('resize', this.resizeListener);
         this.scrollListener = this.resizeListener = undefined;
         const target = commit ? this.activeDropList : null;
         const event = target?._finish(this, true) ?? null;
@@ -556,7 +775,7 @@ class DragRef {
         this.el.style.display = this.sourceDisplay;
         this.el.style.pointerEvents = this.sourcePointerEvents;
         this.el.style.transition = this.sourceTransition;
-        this.el.style.willChange = '';
+        this.el.style.willChange = this.sourceWillChange;
         this.el.style.zIndex = this.previousZIndex;
         if (event && target)
             target.onDrop.emit(event);
@@ -564,6 +783,7 @@ class DragRef {
     updatePreview() {
         if (!this.preview || !this.preview.element)
             return;
+        // Preview is fixed in the source document's viewport coordinate space.
         this.preview.element.style.transform = `translate3d(${this.moveDx}px, ${this.moveDy}px, 0)`;
     }
 }
@@ -586,7 +806,7 @@ class ElementHelper {
         return false;
     }
     static findParentBySelector(elm, selector) {
-        var all = document.querySelectorAll(selector);
+        var all = elm.ownerDocument.querySelectorAll(selector);
         var cur = elm.parentNode;
         while (cur && !ElementHelper.collectionHas(all, cur)) {
             //keep going up until you find a match
@@ -615,15 +835,17 @@ function getFirstLevelDraggables(container) {
     return firstLevel;
 }
 function isElementNode(node) {
-    return node?.nodeType === Node.ELEMENT_NODE;
+    return node?.nodeType === Node.ELEMENT_NODE; // 1
 }
 function isDocumentNode(node) {
-    return node?.nodeType === Node.DOCUMENT_NODE;
+    return node?.nodeType === Node.DOCUMENT_NODE; // 9
 }
 function isShadowRootNode(node) {
     return node?.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 'host' in node;
 }
 function getOwnerWindow(node) {
+    if (isDocumentNode(node))
+        return node.defaultView;
     return node?.ownerDocument?.defaultView ?? null;
 }
 function isWindow(value) {
@@ -950,7 +1172,7 @@ class ScrollFrame {
      * @param start   first element to inspect (walks up through its ancestors)
      * @param includeStart whether `start` itself counts (true for a list whose own scroll moves its items)
      */
-    constructor(start, includeStart = true, win = window) {
+    constructor(start, includeStart = true, win = start?.ownerDocument.defaultView ?? null) {
         this.win = win;
         let node = includeStart ? start : (start?.parentElement ?? null);
         const root = start?.ownerDocument.documentElement;
@@ -960,7 +1182,8 @@ class ScrollFrame {
                 this.targets.push(node);
             node = node.parentElement;
         }
-        this.targets.push(win);
+        if (win)
+            this.targets.push(win);
         this.origin = this.read();
     }
     /** Call when any scroll event fires. */
@@ -980,23 +1203,26 @@ class ScrollFrame {
         let x = 0;
         let y = 0;
         for (const t of this.targets) {
-            if (t === this.win) {
+            if (this.win && t === this.win) {
                 x += this.win.scrollX;
                 y += this.win.scrollY;
             }
             else {
-                x += t.scrollLeft;
-                y += t.scrollTop;
+                const el = t;
+                // Element scroll offsets are local CSS pixels; geometry snapshots are viewport pixels.
+                const delta = localDeltaToViewport(el, { x: el.scrollLeft, y: el.scrollTop });
+                x += delta.x;
+                y += delta.y;
             }
         }
         return { x, y };
     }
 }
 function scrolls(el) {
-    const s = getComputedStyle?.(el);
+    const s = el.ownerDocument.defaultView?.getComputedStyle(el);
     // `hidden` containers still scroll programmatically; `clip` never does.
     const scrollish = (v) => v === 'auto' || v === 'scroll' || v === 'overlay' || v === 'hidden';
-    return scrollish(s.overflowX) || scrollish(s.overflowY);
+    return !!s && (scrollish(s.overflowX) || scrollish(s.overflowY));
 }
 
 /**
@@ -1007,7 +1233,7 @@ function scrolls(el) {
  */
 function makeSpacer(container) {
     for (const n of Array.from(container.childNodes)) {
-        if (n.nodeType === Node.TEXT_NODE && n.nodeValue && /^\s+$/.test(n.nodeValue)) {
+        if (n.nodeType === 3 && n.nodeValue && /^\s+$/.test(n.nodeValue)) {
             return container.ownerDocument.createTextNode(n.nodeValue);
         }
     }
@@ -1215,6 +1441,7 @@ class SortSession {
         const horizontal = this.model.axis === 'x';
         this.entries.forEach((e, i) => {
             const o = offsets[i];
+            // `o` is derived from DOMRect measurements (viewport CSS pixels).
             this.setOffset(e, horizontal ? { x: o, y: 0 } : { x: 0, y: o });
         });
     }
@@ -1228,7 +1455,8 @@ class SortSession {
         }
         else {
             this.applied.set(e.el, off);
-            e.el.style.transform = `translate3d(${off.x}px, ${off.y}px, 0)${e.base}`;
+            const local = viewportDeltaToLocal(e.el, off, false);
+            e.el.style.transform = `translate3d(${local.x}px, ${local.y}px, 0)${e.base}`;
         }
         this.onOffsetChange?.(e.el, off);
     }
@@ -1253,7 +1481,8 @@ class SortSession {
             const dx = first[i].left - last[i].left;
             const dy = first[i].top - last[i].top;
             if (this.animationMs > 0 && (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5)) {
-                e.el.style.transform = `translate3d(${dx}px, ${dy}px, 0)${e.base}`;
+                const local = viewportDeltaToLocal(e.el, { x: dx, y: dy }, false);
+                e.el.style.transform = `translate3d(${local.x}px, ${local.y}px, 0)${e.base}`;
                 moved.push(e);
             }
         });
@@ -1298,63 +1527,10 @@ class SortSession {
     }
 }
 function initialTransform(el) {
-    const t = getComputedStyle?.(el)?.transform;
+    const t = el.ownerDocument.defaultView?.getComputedStyle(el).transform;
     return t && t !== 'none' ? ` ${t}` : '';
 }
 
-/** Base (LTR) physical direction for every logical direction. */
-const LTR_BASE = {
-    start: 'w',
-    end: 'e',
-    'n-start': 'nw',
-    'n-end': 'ne',
-    's-start': 'sw',
-    's-end': 'se',
-};
-/** Mirrors the horizontal component of a physical direction. 'n' / 's' pass through unchanged. */
-const MIRROR = {
-    n: 'n',
-    s: 's',
-    e: 'w',
-    w: 'e',
-    ne: 'nw',
-    nw: 'ne',
-    se: 'sw',
-    sw: 'se',
-};
-function isLogicalDirection(dir) {
-    return Object.prototype.hasOwnProperty.call(LTR_BASE, dir);
-}
-/**
- * True when `element` sits inside a right-to-left context.
- *
- * Reads the *computed* `direction` style instead of `element.dir`, because
- * `direction` is inherited and is almost never set on the resizable element
- * itself - it's usually set on `<html>`, `<body>`, or some ancestor wrapper.
- */
-function isRtl(element) {
-    if (typeof window === 'undefined') {
-        return false;
-    }
-    return window.getComputedStyle(element).direction === 'rtl';
-}
-/**
- * Resolves a logical direction ('start' | 'end' | 'n-start' | 'n-end' | 's-start' | 's-end')
- * to a physical, viewport-space direction ('n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw')
- * based on `rtl`.
- *
- * Physical directions pass through untouched, so it's always safe to call this
- * even when `dir` might already be physical (e.g. resolving a direction that was
- * already resolved once before).
- */
-function resolveLogicalDirection(dir, rtl) {
-    if (!isLogicalDirection(dir)) {
-        return dir;
-    }
-    const base = LTR_BASE[dir];
-    return rtl ? MIRROR[base] : base;
-}
-
 /**
  * A drop list.
  *
@@ -1853,13 +2029,14 @@ class DropListRef {
 }
 /** Orientation to assume while a list has fewer than two items to measure. */
 function fallbackAxis(container) {
-    const s = getComputedStyle(container);
-    if (s.display.includes('flex'))
+    const win = container.ownerDocument.defaultView;
+    const s = win?.getComputedStyle(container);
+    if (s?.display.includes('flex'))
         return s.flexDirection.startsWith('column') ? 'y' : 'x';
-    if (s.display.includes('grid'))
+    if (s?.display.includes('grid'))
         return 'y';
     const child = container.firstElementChild;
-    if (child && getComputedStyle(child).display.startsWith('inline'))
+    if (child && win?.getComputedStyle(child).display.startsWith('inline'))
         return 'x';
     return 'y';
 }
@@ -1871,7 +2048,9 @@ function measureHit(el) {
     const clips = [];
     const root = el.ownerDocument.documentElement;
     for (let node = el.parentElement; node && node !== root; node = node.parentElement) {
-        const s = getComputedStyle(node);
+        const s = node.ownerDocument.defaultView?.getComputedStyle(node);
+        if (!s)
+            continue;
         const cx = s.overflowX !== 'visible';
         const cy = s.overflowY !== 'visible';
         if (!cx && !cy)
@@ -1957,6 +2136,8 @@ class DragDropService {
                 continue;
             }
             if (isDocumentNode(node)) {
+                // Same-origin iframe: continue the logical DOM ancestry through its frame element.
+                // This lets a DropList inside an iframe inherit an outer NgxDropListGroup.
                 const frame = node.defaultView?.frameElement;
                 if (frame) {
                     node = frame;
@@ -1985,15 +2166,13 @@ class DragDropService {
                 node = node.host;
                 continue;
             }
-            // iframe Document
-            // 9 === DOCUMENT_NODE
+            // Cross a same-origin iframe boundary so groups can connect lists in both documents.
             if (node.nodeType === 9) {
                 const frame = node.defaultView?.frameElement;
                 if (frame) {
                     node = frame;
                     continue;
                 }
-                // root document
                 break;
             }
             node = node.parentNode;
@@ -2030,12 +2209,16 @@ class DragDropService {
         if (!source)
             return null;
         let best = null;
+        const sourceDocument = dragEl?.ownerDocument ?? source.el?.ownerDocument;
+        if (!sourceDocument)
+            return null;
         for (const list of this.dropLists()) {
             if (!list.el || !source.isConnectedTo(list))
                 continue;
             if (dragEl && dragEl !== list.el && dragEl.contains(list.el))
                 continue;
-            if (!list._containsPoint(point.x, point.y))
+            const targetPoint = convertPointBetweenDocuments(point, sourceDocument, list.el.ownerDocument);
+            if (!targetPoint || !list._containsPoint(targetPoint.x, targetPoint.y))
                 continue;
             if (!best)
                 best = list;
@@ -2065,7 +2248,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  */
 class AutoScroller {
     raf = 0;
-    container = window;
+    container;
+    win;
     speed = { x: 0, y: 0 };
     onTick;
     edge;
@@ -2076,6 +2260,7 @@ class AutoScroller {
     }
     /** onTick اجرا می‌شود بعد از هر گام اسکرول، تا با آخرین موقعیت pointer، sort/placeholder به‌روز شود. */
     start(fromEl, onTick) {
+        this.win = fromEl.ownerDocument.defaultView ?? undefined;
         this.container = findScrollableAncestor(fromEl);
         this.onTick = onTick;
     }
@@ -2090,15 +2275,16 @@ class AutoScroller {
             y: edgeSpeed(clientY, rect.top, rect.bottom, this.edge, this.maxSpeed),
         };
         if ((this.speed.x || this.speed.y) && !this.raf) {
-            this.raf = requestAnimationFrame(this.tick);
+            this.raf = this.win?.requestAnimationFrame(this.tick) ?? 0;
         }
     }
     stop() {
         if (this.raf)
-            cancelAnimationFrame(this.raf);
+            this.win?.cancelAnimationFrame(this.raf);
         this.raf = 0;
         this.speed = { x: 0, y: 0 };
         this.onTick = undefined;
+        this.win = undefined;
     }
     tick = () => {
         if (!this.speed.x && !this.speed.y) {
@@ -2110,13 +2296,15 @@ class AutoScroller {
             container.scrollBy(this.speed.x, this.speed.y);
         }
         else {
-            container.scrollLeft += this.speed.x;
-            container.scrollTop += this.speed.y;
+            // Edge speed is measured in viewport pixels; scrollLeft/Top are local to the scroller.
+            const local = viewportDeltaToLocal(container, this.speed);
+            container.scrollLeft += local.x;
+            container.scrollTop += local.y;
         }
         // Pointer ثابت مانده ولی محتوا اسکرول شده؛
         // بنابراین موقعیت placeholder/sort را دوباره محاسبه کن.
         this.onTick?.();
-        this.raf = requestAnimationFrame(this.tick);
+        this.raf = this.win?.requestAnimationFrame(this.tick) ?? 0;
     };
 }
 function edgeSpeed(pos, min, max, edge, maxSpeed) {
@@ -2128,25 +2316,28 @@ function edgeSpeed(pos, min, max, edge, maxSpeed) {
 }
 function getScrollRect(container) {
     if (isWindow(container)) {
-        return { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
+        return { left: 0, top: 0, right: container.innerWidth, bottom: container.innerHeight };
     }
     return container.getBoundingClientRect();
 }
 function findScrollableAncestor(el) {
     let node = el;
     while (node) {
-        const style = getComputedStyle(node);
+        const win = node.ownerDocument.defaultView;
+        if (!win)
+            break;
+        const style = win.getComputedStyle(node);
         const scrollable = /(auto|scroll|overlay)/.test(style.overflowY + style.overflowX);
         if (scrollable && node.scrollHeight > node.clientHeight) {
             return node;
         }
         node = node.parentElement;
     }
-    return el.ownerDocument.defaultView ?? window;
+    return el.ownerDocument.defaultView ?? el;
 }
 function getScrollPosition(container) {
     if (isWindow(container)) {
-        return { left: window.scrollX, top: window.scrollY };
+        return { left: container.scrollX, top: container.scrollY };
     }
     return { left: container.scrollLeft, top: container.scrollTop };
 }
@@ -2222,7 +2413,6 @@ class NgxDraggable {
     _ref = new DragRef();
     dragging = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
-    doc = inject(DOCUMENT);
     service = inject(DragDropService);
     scroller = new AutoScroller();
     down = false;
@@ -2236,7 +2426,7 @@ class NgxDraggable {
     removeEscape;
     removeCancel;
     removeLostCapture;
-    scrollTarget = window;
+    scrollTarget;
     lastScroll = { left: 0, top: 0 };
     lastWindowScroll = { left: 0, top: 0 };
     removeContainerScroll;
@@ -2251,6 +2441,8 @@ class NgxDraggable {
         });
     }
     ngOnInit() {
+        this.scrollTarget =
+            this.host.nativeElement.ownerDocument.defaultView ?? this.host.nativeElement;
         this._ref.el = this.dragRootElement()
             ? (this.host.nativeElement.closest(this.dragRootElement()) ?? this.host.nativeElement)
             : this.host.nativeElement;
@@ -2310,12 +2502,13 @@ class NgxDraggable {
         this._ref.pointerDown(this.start);
         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) => {
+        const doc = this._ref.el.ownerDocument;
+        this.removeEscape = this.renderer.listen(doc, 'keydown', (ev) => {
             if (ev.key === 'Escape' && this.dragging())
                 this.cancel();
         });
-        this.removeCancel = this.renderer.listen(this.doc, 'pointercancel', (ev) => this.pointerCancel(ev));
-        this.removeLostCapture = this.renderer.listen(this.doc, 'lostpointercapture', (ev) => this.pointerCancel(ev));
+        this.removeCancel = this.renderer.listen(doc, 'pointercancel', (ev) => this.pointerCancel(ev));
+        this.removeLostCapture = this.renderer.listen(doc, 'lostpointercapture', (ev) => this.pointerCancel(ev));
     }
     applyDragUpdate(p) {
         const before = this._ref.activeDropList;
@@ -2326,32 +2519,39 @@ class NgxDraggable {
             const after = this._ref.activeDropList;
             // Follow the hovered list; outside every list, scroll the page.
             if (after !== before)
-                this.scroller.retarget(after?.el ?? this.doc.body);
+                this.scroller.retarget(after?.el ?? this._ref.el.ownerDocument.body);
         }
         this.dragMove.emit(p);
     }
     /** فراخوانی می‌شود دقیقاً وقتی drag واقعاً شروع می‌شود (چه با موس، چه با کیبورد). */
     startScrollTracking() {
+        const win = this._ref.el.ownerDocument.defaultView;
         this.scrollTarget = findScrollableAncestor(this._ref.el);
         this.lastScroll = getScrollPosition(this.scrollTarget);
-        this.lastWindowScroll = { left: window.scrollX, top: window.scrollY };
-        if (this.scrollTarget !== window) {
+        this.lastWindowScroll = { left: win?.scrollX ?? 0, top: win?.scrollY ?? 0 };
+        if (win && this.scrollTarget !== win) {
             this.removeContainerScroll = this.renderer.listen(this.scrollTarget, 'scroll', () => this.handleContainerScroll());
         }
         // همیشه window رو هم جدا گوش می‌دیم؛ چون ممکنه container محلی نداشته باشیم
         // ولی خودِ صفحه اسکرول بشه.
-        this.removeWindowScroll = this.renderer.listen('window', 'scroll', () => this.handleWindowScroll());
+        if (win) {
+            this.removeWindowScroll = this.renderer.listen(win, 'scroll', () => this.handleWindowScroll());
+        }
     }
     handleContainerScroll() {
         const pos = getScrollPosition(this.scrollTarget);
         const dx = pos.left - this.lastScroll.left;
         const dy = pos.top - this.lastScroll.top;
         this.lastScroll = pos;
-        this._ref.notifyScroll(dx, dy);
+        const viewportDelta = localDeltaToViewport(this.scrollTarget, { x: dx, y: dy });
+        this._ref.notifyScroll(viewportDelta.x, viewportDelta.y);
     }
     handleWindowScroll() {
-        const left = window.scrollX;
-        const top = window.scrollY;
+        const win = this._ref.el.ownerDocument.defaultView;
+        if (!win)
+            return;
+        const left = win.scrollX;
+        const top = win.scrollY;
         const dx = left - this.lastWindowScroll.left;
         const dy = top - this.lastWindowScroll.top;
         this.lastWindowScroll = { left, top };
@@ -2392,14 +2592,14 @@ class NgxDraggable {
         }
         if (this.dragging()) {
             // Also when released OUTSIDE every list: endDrag() rolls the drag back and cleans up.
-            if (this._ref.isListDrag) {
-                // The release position is authoritative for the drop target (a fast flick may end with
-                // a pointerup that has no preceding pointermove at that position).
-                const p = { x: e.clientX, y: e.clientY };
-                if (p.x !== this.lastPointer.x || p.y !== this.lastPointer.y)
-                    this._ref.dragMove(p);
-                this._ref.endDrag();
+            // The release position is authoritative for list sorting (a fast flick may end with
+            // a pointerup that has no preceding pointermove at that position).
+            const p = { x: e.clientX, y: e.clientY };
+            if (this._ref.isListDrag && (p.x !== this.lastPointer.x || p.y !== this.lastPointer.y)) {
+                this._ref.dragMove(p);
             }
+            // endDrag must run for free drags too, otherwise their lifecycle never completes.
+            this._ref.endDrag();
             this.service.end(this._ref);
         }
         this.finish();
@@ -2409,7 +2609,7 @@ class NgxDraggable {
     pointerCancel(e) {
         if (!this.down || e.pointerId !== this.pointerId)
             return;
-        if (this.dragging() && this._ref.isListDrag) {
+        if (this.dragging()) {
             this.cancel();
             return;
         }
@@ -2421,6 +2621,9 @@ class NgxDraggable {
         this.finish();
     }
     finish() {
+        if (this.pointerId >= 0 && this._ref.el.hasPointerCapture?.(this.pointerId)) {
+            this._ref.el.releasePointerCapture(this.pointerId);
+        }
         this.dragging.set(false);
         this.down = false;
         this.scroller.stop();
@@ -2473,26 +2676,24 @@ class NgxDraggable {
             this._ref.endDrag();
             this.service.end(this._ref);
             this.dragEnd.emit(this._ref.pointer);
-            this.dragging.set(false);
-            this.stopScrollTracking();
+            this.finish();
         }
         else if (e.key === 'Escape' && this.dragging()) {
             e.preventDefault();
             this._ref.cancelDrag();
             this.service.end(this._ref);
-            this.dragging.set(false);
+            this.finish();
         }
     }
     isOnHandle(target) {
         if (!this.dragHandle())
             return true;
         // TODO notsafe instanseof: node.nodeType === Node.ELEMENT_NODE
-        return target instanceof HTMLElement && !!target.closest(this.dragHandle());
+        return isElementTarget(target) && !!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]'));
+        return (isElementTarget(target) && !!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 }], queries: [{ propertyName: "customPreview", first: true, predicate: NgxDragPreview, descendants: true }], ngImport: i0 });
@@ -2517,6 +2718,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: ContentChild,
                 args: [NgxDragPreview]
             }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
+function isElementTarget(target) {
+    return (!!target &&
+        typeof target === 'object' &&
+        'nodeType' in target &&
+        target.nodeType === 1 &&
+        'closest' in target);
+}
 
 const ALL_DIRECTIONS = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
 const KEYBOARD_STEP = 8;
@@ -2558,9 +2766,19 @@ class NgxResizable {
     beforeHeight = '';
     beforeTransform = '';
     pointerId = -1;
+    startWidth = 0;
+    startHeight = 0;
+    removeDocumentListeners = [];
+    renderer = inject(Renderer2);
     constructor(el) {
         this.el = el;
     }
+    ngOnDestroy() {
+        if (this.resizing()) {
+            this.restoreBeforeResize();
+            this.finish();
+        }
+    }
     onPointerDown(e) {
         if (this.disabled() || e.button !== 0) {
             return;
@@ -2585,6 +2803,10 @@ class NgxResizable {
             y: e.clientY,
         };
         this.beforeTransition = element.style.transition;
+        this.beforeWidth = element.style.width;
+        this.beforeHeight = element.style.height;
+        this.startWidth = element.offsetWidth;
+        this.startHeight = element.offsetHeight;
         /**
          * Keep DragRef's transform as the immutable base.
          *
@@ -2595,6 +2817,14 @@ class NgxResizable {
         this.resizing.set(true);
         element.style.transition = 'none';
         element.setPointerCapture?.(e.pointerId);
+        const doc = element.ownerDocument;
+        this.removeDocumentListeners = [
+            this.renderer.listen(doc, 'pointermove', (event) => this.onPointerMove(event)),
+            this.renderer.listen(doc, 'pointerup', (event) => this.onPointerUp(event)),
+            this.renderer.listen(doc, 'pointercancel', (event) => this.onPointerCancel(event)),
+            this.renderer.listen(doc, 'lostpointercapture', (event) => this.onPointerCancel(event)),
+            this.renderer.listen(doc, 'keydown', (event) => this.onDocumentKeyDown(event)),
+        ];
         const out = this.calculate(e);
         this.apply(out);
         this.resizeStart.emit(out);
@@ -2624,11 +2854,20 @@ class NgxResizable {
             return;
         }
         e.preventDefault();
+        this.restoreBeforeResize();
+        this.finish();
+    }
+    onPointerCancel(e) {
+        if (!this.resizing() || e.pointerId !== this.pointerId)
+            return;
+        this.restoreBeforeResize();
+        this.finish();
+    }
+    restoreBeforeResize() {
         const element = this.el.nativeElement;
         element.style.width = this.beforeWidth;
         element.style.height = this.beforeHeight;
         element.style.transform = this.beforeTransform;
-        this.finish();
     }
     onHandleKeyDown(e) {
         if (this.disabled()) {
@@ -2655,8 +2894,8 @@ class NgxResizable {
         }
         e.preventDefault();
         const rect = this.el.nativeElement.getBoundingClientRect();
-        const width = this.clampGrid(Math.max(this.minWidth(), Math.min(this.maxWidth(), rect.width + dw)), 'x');
-        const height = this.clampGrid(Math.max(this.minHeight(), Math.min(this.maxHeight(), rect.height + dh)), 'y');
+        const width = this.clampGrid(Math.max(this.minWidth(), Math.min(this.maxWidth(), this.el.nativeElement.offsetWidth + dw)), 'x');
+        const height = this.clampGrid(Math.max(this.minHeight(), Math.min(this.maxHeight(), this.el.nativeElement.offsetHeight + dh)), 'y');
         this.el.nativeElement.style.width = `${width}px`;
         this.el.nativeElement.style.height = `${height}px`;
         const out = {
@@ -2672,10 +2911,14 @@ class NgxResizable {
         this.resizeEnd.emit(out);
     }
     calculate(e) {
-        const dx = e.clientX - this.pointer.x;
-        const dy = e.clientY - this.pointer.y;
-        let width = this.start.width;
-        let height = this.start.height;
+        const localDelta = viewportDeltaToLocal(this.el.nativeElement, {
+            x: e.clientX - this.pointer.x,
+            y: e.clientY - this.pointer.y,
+        });
+        const dx = localDelta.x;
+        const dy = localDelta.y;
+        let width = this.startWidth;
+        let height = this.startHeight;
         /**
          * East
          */
@@ -2708,13 +2951,16 @@ class NgxResizable {
          * This is useful for boundary calculations and
          * emitted resize events.
          */
+        const matrix = getLocalToViewportMatrix(this.el.nativeElement);
+        const scaleX = Math.hypot(matrix.a, matrix.b) || 1;
+        const scaleY = Math.hypot(matrix.c, matrix.d) || 1;
         let left = this.start.left;
         let top = this.start.top;
         if (this.direction.includes('w')) {
-            left = this.start.right - width;
+            left = this.start.right - width * scaleX;
         }
         if (this.direction.includes('n')) {
-            top = this.start.bottom - height;
+            top = this.start.bottom - height * scaleY;
         }
         let moveLeft = left - this.start.left;
         let moveTop = top - this.start.top;
@@ -2722,9 +2968,9 @@ class NgxResizable {
          * Boundary constraint.
          */
         if (this.boundary) {
-            const clamped = clampResizeWithinBoundary(this.boundary()?.getBoundingClientRect(), this.start, width, height, moveLeft, moveTop);
-            width = clamped.width;
-            height = clamped.height;
+            const clamped = clampResizeWithinBoundary(this.boundary()?.getBoundingClientRect(), this.start, width * scaleX, height * scaleY, moveLeft, moveTop);
+            width = clamped.width / scaleX;
+            height = clamped.height / scaleY;
             moveLeft = clamped.left;
             moveTop = clamped.top;
             left = this.start.left + moveLeft;
@@ -2787,8 +3033,9 @@ class NgxResizable {
          * correction required by Resize.
          */
         const baseTransform = this.beforeTransform && this.beforeTransform !== 'none' ? `${this.beforeTransform} ` : '';
+        const localCorrection = viewportDeltaToLocal(element, { x: correctionX, y: correctionY });
         element.style.transform =
-            `${baseTransform}translate3d(` + `${correctionX}px, ` + `${correctionY}px, 0)`;
+            `${baseTransform}translate3d(` + `${localCorrection.x}px, ` + `${localCorrection.y}px, 0)`;
     }
     clampGrid(value, axis) {
         const grid = typeof this.grid() === 'number' ? this.grid : this.grid()?.[axis];
@@ -2800,7 +3047,14 @@ class NgxResizable {
     finish() {
         this.resizing.set(false);
         this.el.nativeElement.style.transition = this.beforeTransition;
+        const pointerId = this.pointerId;
         this.pointerId = -1;
+        for (const remove of this.removeDocumentListeners)
+            remove();
+        this.removeDocumentListeners = [];
+        if (pointerId >= 0 && this.el.nativeElement.hasPointerCapture?.(pointerId)) {
+            this.el.nativeElement.releasePointerCapture(pointerId);
+        }
         this.beforeTransform = '';
     }
     resolvedDirections() {
@@ -2823,7 +3077,7 @@ class NgxResizable {
          * Explicit resize handle has priority.
          */
         // TODO notsafe instanceof:node.nodeType === Node.ELEMENT_NODE
-        const handle = e.target instanceof HTMLElement
+        const handle = isHTMLElementTarget(e.target)
             ? e.target.closest('[data-ngx-resize-handle]')
             : null;
         if (handle && element.contains(handle)) {
@@ -2866,7 +3120,7 @@ class NgxResizable {
         return this.resolvedDirections().includes(direction) ? direction : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxResizable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxResizable, isStandalone: true, selector: "[NgxResizable],[ngxResizable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, directions: { classPropertyName: "directions", publicName: "directions", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", minWidth: "minWidthChange", minHeight: "minHeightChange", maxWidth: "maxWidthChange", maxHeight: "maxHeightChange", resizeStart: "resizeStart", resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "document:pointermove": "onPointerMove($event)", "document:pointerup": "onPointerUp($event)", "document:keydown": "onDocumentKeyDown($event)", "keydown": "onHandleKeyDown($event)" }, properties: { "style.touch-action": "\"none\"" }, classAttribute: "ngx-resizable" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxResizable, isStandalone: true, selector: "[NgxResizable],[ngxResizable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, directions: { classPropertyName: "directions", publicName: "directions", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", minWidth: "minWidthChange", minHeight: "minHeightChange", maxWidth: "maxWidthChange", maxHeight: "maxHeightChange", resizeStart: "resizeStart", resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "keydown": "onHandleKeyDown($event)" }, properties: { "style.touch-action": "\"none\"" }, classAttribute: "ngx-resizable" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxResizable, decorators: [{
             type: Directive,
@@ -2880,19 +3134,17 @@ 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"] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }, { type: i0.Output, args: ["minWidthChange"] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }, { type: i0.Output, args: ["minHeightChange"] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }, { type: i0.Output, args: ["maxWidthChange"] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }, { type: i0.Output, args: ["maxHeightChange"] }], directions: [{ type: i0.Input, args: [{ isSignal: true, alias: "directions", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], resizeMove: [{ type: i0.Output, args: ["resizeMove"] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }], onPointerDown: [{
                 type: HostListener,
                 args: ['pointerdown', ['$event']]
-            }], onPointerMove: [{
-                type: HostListener,
-                args: ['document:pointermove', ['$event']]
-            }], onPointerUp: [{
-                type: HostListener,
-                args: ['document:pointerup', ['$event']]
-            }], onDocumentKeyDown: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
             }], onHandleKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
+function isHTMLElementTarget(target) {
+    return (!!target &&
+        typeof target === 'object' &&
+        'nodeType' in target &&
+        target.nodeType === 1 &&
+        'closest' in target);
+}
 
 const NGX_PLACEHOLDER = new InjectionToken('ngx-place-holder');
 /**