ngx-kit 9.2.1 → 9.2.3

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

@@ -593,6 +593,92 @@ class DragRef {
             this.applyTransform();
         }
     }
+    /**
+     * Keyboard sorting for list items: jump by whole SLOTS instead of pixels (an 8px step can
+     * never cross the centre of a 190px card), and hop to the neighbouring connected list when the
+     * edge of the current one is reached — Left/Right between kanban columns, Up/Down between
+     * the sections of a column. Returns `false` for free drags (use `nudge`).
+     */
+    nudgeToSlot(direction) {
+        if (!this.listDrag)
+            return false;
+        if (!this.isDragging())
+            this.startDrag(this.lastPointer);
+        const list = this.activeDropList;
+        if (!list?.el)
+            return true;
+        const vertical = direction === 'up' || direction === 'down';
+        const sign = direction === 'down' || direction === 'right' ? 1 : -1;
+        const cur = { x: this.startPointer.x + this.moveDx, y: this.startPointer.y + this.moveDy };
+        const listAxis = list.getAxis();
+        // A grid has no single main axis: step through its slots along the pressed key's axis.
+        const axis = listAxis === 'grid' ? (vertical ? 'y' : 'x') : listAxis;
+        let target = null;
+        if ((axis === 'y') === vertical)
+            target = this.neighbourSlot(list, axis, sign, cur);
+        target ??= this.neighbourList(list, vertical ? 'y' : 'x', sign, cur);
+        if (target)
+            this.dragMove(target);
+        return true;
+    }
+    neighbourSlot(list, axis, sign, cur) {
+        const mid = (r) => (axis === 'y' ? r.top + r.height / 2 : r.left + r.width / 2);
+        const slots = Array.from(list.el.children)
+            .filter((n) => n instanceof HTMLElement &&
+            n !== this.el &&
+            !n.classList.contains('ngx-drag-preview') &&
+            n.getClientRects().length > 0)
+            .map((el) => ({ el, r: el.getBoundingClientRect() }))
+            .sort((a, b) => mid(a.r) - mid(b.r));
+        const p = slots.findIndex((s) => s.el.classList.contains('ngx-drag-placeholder'));
+        const next = slots[p + sign];
+        if (p < 0 || !next)
+            return null;
+        // a little PAST the neighbour's centre, beyond the sort hysteresis
+        const past = mid(next.r) + 8 * sign;
+        return axis === 'y' ? { x: cur.x, y: past } : { x: past, y: cur.y };
+    }
+    neighbourList(from, along, sign, cur) {
+        const doc = this.el.ownerDocument;
+        const origin = visibleRect(from.el);
+        if (!origin)
+            return null;
+        let best = null;
+        for (const l of this.cachedLists) {
+            if (l === from || !l.el || l.el.ownerDocument !== doc)
+                continue;
+            const r = visibleRect(l.el);
+            if (!r || r.width < 8 || r.height < 8)
+                continue;
+            const dist = along === 'x'
+                ? (r.left + r.width / 2 - (origin.left + origin.width / 2)) * sign
+                : (r.top + r.height / 2 - (origin.top + origin.height / 2)) * sign;
+            if (dist <= 4)
+                continue;
+            let score;
+            if (along === 'x') {
+                // prefer the list that is level with the pointer
+                const off = Math.max(r.top - cur.y, 0, cur.y - r.bottom);
+                score = dist + off * 0.5;
+            }
+            else {
+                // Up/Down only moves between lists that overlap horizontally (sections of one column)
+                const overlap = Math.min(r.right, origin.right) - Math.max(r.left, origin.left);
+                if (overlap < Math.min(r.width, origin.width) * 0.5)
+                    continue;
+                score = dist;
+            }
+            if (!best || score < best.score)
+                best = { rect: r, score };
+        }
+        if (!best)
+            return null;
+        const r = best.rect;
+        const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+        return along === 'y'
+            ? { x: clamp(cur.x, r.left + 8, r.right - 8), y: sign > 0 ? r.top + 8 : r.bottom - 8 }
+            : { x: r.left + r.width / 2, y: clamp(cur.y, r.top + 8, r.bottom - 8) };
+    }
     nudge(dx, dy) {
         if (!this.isDragging())
             this.startDrag(this.lastPointer);
@@ -922,6 +1008,34 @@ function isDescendantOfList(list, ancestor) {
     }
     return false;
 }
+/** The part of `el` that is actually on screen (clipped by scroll containers and the viewport). */
+function visibleRect(el) {
+    const win = el.ownerDocument.defaultView;
+    if (!win)
+        return null;
+    const r = el.getBoundingClientRect();
+    let left = r.left;
+    let top = r.top;
+    let right = r.right;
+    let bottom = r.bottom;
+    for (let n = el.parentElement; n; n = n.parentElement) {
+        const cs = win.getComputedStyle(n);
+        if (cs.overflowX === 'visible' && cs.overflowY === 'visible')
+            continue;
+        const nr = n.getBoundingClientRect();
+        left = Math.max(left, nr.left);
+        top = Math.max(top, nr.top);
+        right = Math.min(right, nr.right);
+        bottom = Math.min(bottom, nr.bottom);
+    }
+    left = Math.max(left, 0);
+    top = Math.max(top, 0);
+    right = Math.min(right, win.innerWidth);
+    bottom = Math.min(bottom, win.innerHeight);
+    if (right <= left || bottom <= top)
+        return null;
+    return { left, top, right, bottom, width: right - left, height: bottom - top };
+}
 
 class ElementHelper {
     static collectionHas(a, b) {
@@ -1713,6 +1827,10 @@ class DropListRef {
     parentList = null;
     childLists = new Set();
     session = null;
+    /** Main axis of this list: the measured one while sorting, else a CSS-based guess. */
+    getAxis() {
+        return this.session?.axis ?? fallbackAxis(this.el);
+    }
     placeholder;
     customPlaceholder;
     activeDrag = null;
@@ -2436,7 +2554,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  */
 class AutoScroller {
     raf = 0;
-    container;
+    /** Nearest scroller per axis: a kanban column scrolls vertically while its BOARD scrolls horizontally. */
+    containerX;
+    containerY;
     win;
     /** Document the pointer coordinates (`update(x, y)`) are expressed in. */
     pointerDoc;
@@ -2453,36 +2573,40 @@ class AutoScroller {
     start(fromEl, onTick) {
         this.win = fromEl.ownerDocument.defaultView ?? undefined;
         this.pointerDoc = fromEl.ownerDocument;
-        this.container = findScrollableAncestor(fromEl);
+        this.retarget(fromEl);
         this.onTick = onTick;
     }
     /** فقط container را عوض می‌کند بدون قطع حلقه‌ی در حال اجرا یا صفر کردن speed. */
     retarget(fromEl) {
-        this.container = findScrollableAncestor(fromEl);
+        this.containerX = findScrollableAncestorForAxis(fromEl, 'x');
+        this.containerY = findScrollableAncestorForAxis(fromEl, 'y');
     }
     update(clientX, clientY) {
+        this.speed = {
+            x: this.axisSpeed(this.containerX, 'x', clientX, clientY),
+            y: this.axisSpeed(this.containerY, 'y', clientX, clientY),
+        };
+        if ((this.speed.x || this.speed.y) && !this.raf) {
+            this.raf = this.win?.requestAnimationFrame(this.tick) ?? 0;
+        }
+    }
+    axisSpeed(container, axis, clientX, clientY) {
         // The scroll container may live in another document (a page-builder iframe). Its rect is in
         // THAT document's viewport pixels, so bring the pointer into the same space first.
         let x = clientX;
         let y = clientY;
-        const containerDoc = documentOf(this.container);
+        const containerDoc = documentOf(container);
         if (this.pointerDoc && containerDoc && containerDoc !== this.pointerDoc) {
             const p = convertPointBetweenDocuments({ x, y }, this.pointerDoc, containerDoc);
-            if (!p) {
-                this.speed = { x: 0, y: 0 };
-                return;
-            }
+            if (!p)
+                return 0;
             x = p.x;
             y = p.y;
         }
-        const rect = getScrollRect(this.container);
-        this.speed = {
-            x: edgeSpeed(x, rect.left, rect.right, this.edge, this.maxSpeed),
-            y: edgeSpeed(y, rect.top, rect.bottom, this.edge, this.maxSpeed),
-        };
-        if ((this.speed.x || this.speed.y) && !this.raf) {
-            this.raf = this.win?.requestAnimationFrame(this.tick) ?? 0;
-        }
+        const rect = getScrollRect(container);
+        return axis === 'x'
+            ? edgeSpeed(x, rect.left, rect.right, this.edge, this.maxSpeed)
+            : edgeSpeed(y, rect.top, rect.bottom, this.edge, this.maxSpeed);
     }
     stop() {
         if (this.raf)
@@ -2494,14 +2618,14 @@ class AutoScroller {
         this.win = undefined;
         this.pointerDoc = undefined;
     }
-    tick = () => {
-        if (!this.speed.x && !this.speed.y) {
-            this.raf = 0;
+    /** Scrolls one container by a speed measured in viewport pixels (carrying sub-pixel remainders). */
+    scrollContainer(container, sx, sy) {
+        if (!sx && !sy)
             return;
-        }
-        const container = this.container;
-        // Edge speed is measured in viewport pixels; an element's scrollLeft/Top are local to it.
-        const local = isWindow(container) ? this.speed : viewportDeltaToLocal(container, this.speed);
+        // An element's scrollLeft/Top are local to it; a window's are viewport pixels already.
+        const local = isWindow(container)
+            ? { x: sx, y: sy }
+            : viewportDeltaToLocal(container, { x: sx, y: sy });
         // Browsers snap scroll offsets to whole pixels, so a slow speed (< 1px/frame, i.e. when the
         // pointer has just entered the edge zone) would never move anything. Carry the remainder.
         this.carry.x += local.x;
@@ -2510,11 +2634,23 @@ class AutoScroller {
         const dy = Math.trunc(this.carry.y);
         this.carry.x -= dx;
         this.carry.y -= dy;
-        if (dx || dy) {
-            // `behavior: 'instant'` matters: with `scroll-behavior: smooth` on <html> or on the scroller
-            // (very common in apps) every per-frame scroll would start a new animation that cancels the
-            // previous one, and the list would not move at all.
+        // `behavior: 'instant'` matters: with `scroll-behavior: smooth` on <html> or on the scroller
+        // (very common in apps) every per-frame scroll would start a new animation that cancels the
+        // previous one, and the list would not move at all.
+        if (dx || dy)
             container.scrollBy({ left: dx, top: dy, behavior: 'instant' });
+    }
+    tick = () => {
+        if (!this.speed.x && !this.speed.y) {
+            this.raf = 0;
+            return;
+        }
+        if (this.containerX === this.containerY) {
+            this.scrollContainer(this.containerX, this.speed.x, this.speed.y);
+        }
+        else {
+            this.scrollContainer(this.containerX, this.speed.x, 0);
+            this.scrollContainer(this.containerY, 0, this.speed.y);
         }
         // Pointer ثابت مانده ولی محتوا اسکرول شده؛
         // بنابراین موقعیت placeholder/sort را دوباره محاسبه کن.
@@ -2557,7 +2693,8 @@ function findScrollableAncestor(el) {
             break;
         const style = win.getComputedStyle(node);
         const scrollable = /(auto|scroll|overlay)/.test(style.overflowY + style.overflowX);
-        if (scrollable && (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth)) {
+        if (scrollable &&
+            (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth)) {
             // <html>/<body> scroll the whole document: their own rect spans the full (tall) page, so
             // edge detection must use the window's viewport instead.
             const doc = node.ownerDocument;
@@ -2569,6 +2706,26 @@ function findScrollableAncestor(el) {
     }
     return el.ownerDocument.defaultView ?? el;
 }
+/** Nearest ancestor that can scroll along ONE axis (`<html>`/`<body>` resolve to the window). */
+function findScrollableAncestorForAxis(el, axis) {
+    let node = el;
+    while (node) {
+        const win = node.ownerDocument.defaultView;
+        if (!win)
+            break;
+        const style = win.getComputedStyle(node);
+        const overflow = axis === 'x' ? style.overflowX : style.overflowY;
+        const canScroll = axis === 'x' ? node.scrollWidth > node.clientWidth : node.scrollHeight > node.clientHeight;
+        if (/(auto|scroll|overlay)/.test(overflow) && canScroll) {
+            const doc = node.ownerDocument;
+            if (node === doc.documentElement || node === doc.body)
+                return win;
+            return node;
+        }
+        node = node.parentElement;
+    }
+    return el.ownerDocument.defaultView ?? el;
+}
 function getScrollPosition(container) {
     if (isWindow(container)) {
         return { left: container.scrollX, top: container.scrollY };
@@ -2781,7 +2938,7 @@ 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._ref.el.ownerDocument.body);
+                this.scroller.retarget(after?.el ?? this._ref.dropList?.el ?? this._ref.el);
         }
         this.dragMove.emit(p);
     }
@@ -2953,7 +3110,13 @@ class NgxDraggable {
                 this.beginKeyboardSession();
                 this.dragStart.emit(origin);
             }
-            this._ref.nudge(delta.x, delta.y);
+            // Holding the key down repeats faster than the 200ms slide animation settles.
+            if (e.repeat && this._ref.isListDrag)
+                return;
+            const name = { ArrowLeft: 'left', ArrowRight: 'right', ArrowUp: 'up', ArrowDown: 'down' }[e.key];
+            // List items hop by whole slots / neighbouring lists; free drags move by `keyboardStep` px.
+            if (!this._ref.nudgeToSlot(name))
+                this._ref.nudge(delta.x, delta.y);
             this.dragMove.emit(this._ref.pointer);
             return;
         }
@@ -3006,11 +3169,11 @@ class NgxDraggable {
         if (!this.dragHandle())
             return true;
         // TODO notsafe instanseof: node.nodeType === Node.ELEMENT_NODE
-        return isElementTarget(target) && !!target.closest(this.dragHandle());
+        return isElementTarget$1(target) && !!target.closest(this.dragHandle());
     }
     /** Should a press on `target` be left alone (no drag)? */
     isExcluded(target) {
-        if (!isElementTarget(target))
+        if (!isElementTarget$1(target))
             return false;
         const selector = this.noDragSelector();
         if (selector && target.closest(selector))
@@ -3044,11 +3207,11 @@ function isEditableOrInteractive(el) {
     return !!el.closest('button,a[href],input,textarea,select,[contenteditable]:not([contenteditable="false"])');
 }
 function isEditableTarget(target) {
-    if (!isElementTarget(target))
+    if (!isElementTarget$1(target))
         return false;
     return !!target.closest('input,textarea,select,[contenteditable]:not([contenteditable="false"])');
 }
-function isElementTarget(target) {
+function isElementTarget$1(target) {
     return (!!target &&
         typeof target === 'object' &&
         'nodeType' in target &&
@@ -3058,6 +3221,43 @@ function isElementTarget(target) {
 
 const ALL_DIRECTIONS = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
 const KEYBOARD_STEP = 8;
+/**
+ * Elements matching this selector keep their normal pointer/touch behaviour.
+ * Add data-ngx-resize-ignore to any custom interactive widget that should never
+ * initiate resizing when it is close to the panel edge.
+ */
+const INTERACTIVE_SELECTOR = [
+    'input',
+    'textarea',
+    'select',
+    'option',
+    'button',
+    'a',
+    'summary',
+    '[contenteditable="true"]',
+    'audio',
+    'video',
+    'iframe',
+    'label',
+    '[role="textbox"]',
+    '[role="menuitem"]',
+    '[role="tab"]',
+    'mat-slider',
+    'mat-select',
+    'mat-checkbox',
+    'mat-radio-button',
+    'mat-slide-toggle',
+    '.mat-mdc-slider',
+    '.mat-mdc-select',
+    '[role="button"]',
+    '[role="slider"]',
+    '[role="switch"]',
+    '[role="checkbox"]',
+    '[role="radio"]',
+    '[role="combobox"]',
+    '[role="listbox"]',
+    '[data-ngx-resize-ignore]',
+].join(',');
 class NgxResizable {
     el;
     disabled = model(false, /* @ts-ignore */
@@ -3087,14 +3287,16 @@ class NgxResizable {
     ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
     direction = 'se';
     start;
-    pointer = {
-        x: 0,
-        y: 0,
-    };
+    pointer = { x: 0, y: 0 };
     beforeTransition = '';
     beforeWidth = '';
     beforeHeight = '';
-    beforeTransform = '';
+    beforeTranslate = '';
+    baseComputedTranslate = 'none';
+    keyboardBaseTranslate = null;
+    keyboardBaseInlineTranslate = '';
+    startMatrix = { a: 1, b: 0, c: 0, d: 1 };
+    pointerInverse = invertLinear({ a: 1, b: 0, c: 0, d: 1 });
     pointerId = -1;
     startWidth = 0;
     startHeight = 0;
@@ -3110,47 +3312,43 @@ class NgxResizable {
         }
     }
     onPointerDown(e) {
-        if (this.disabled() || e.button !== 0) {
+        if (this.disabled() || e.button !== 0 || this.resizing())
             return;
-        }
         const dir = this.hitDirection(e);
-        if (!dir) {
+        if (dir)
+            this.beginResize(e, dir);
+    }
+    /** Entry point used by the typed NgxResizeHandle directive. */
+    beginResize(e, direction) {
+        if (this.disabled() || e.button !== 0 || this.resizing())
+            return;
+        const dir = resolveLogicalDirection(direction, isRtl(this.el.nativeElement));
+        if (!this.resolvedDirections().includes(dir))
             return;
-        }
         e.preventDefault();
-        e.stopPropagation();
-        e.stopImmediatePropagation();
         const element = this.el.nativeElement;
         this.direction = dir;
         this.pointerId = e.pointerId;
-        /**
-         * This is the actual visual rectangle.
-         * It already contains any transform created by DragRef.
-         */
         this.start = element.getBoundingClientRect();
-        this.pointer = {
-            x: e.clientX,
-            y: e.clientY,
-        };
+        this.pointer = { x: e.clientX, 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.
-         *
-         * Resize will temporarily add its own translation
-         * on top of this transform.
-         */
-        this.beforeTransform = element.style.transform;
+        this.beforeTranslate = element.style.translate;
+        this.baseComputedTranslate =
+            element.ownerDocument.defaultView?.getComputedStyle(element).translate ?? 'none';
+        this.keyboardBaseTranslate = null;
+        this.startMatrix = getLocalToViewportMatrix(element);
+        this.pointerInverse = invertLinear(this.startMatrix);
+        this.startWidth = readBorderBoxSize(element, 'x');
+        this.startHeight = readBorderBoxSize(element, 'y');
         this.resizing.set(true);
         element.style.transition = 'none';
         try {
             element.setPointerCapture?.(e.pointerId);
         }
         catch {
-            /* synthetic / already-ended pointer: document listeners below still receive the events */
+            // Document listeners remain as a fallback.
         }
         const doc = element.ownerDocument;
         this.removeDocumentListeners = [
@@ -3165,29 +3363,23 @@ class NgxResizable {
         this.resizeStart.emit(out);
     }
     onPointerMove(e) {
-        if (!this.resizing() || e.pointerId !== this.pointerId) {
+        if (!this.resizing() || e.pointerId !== this.pointerId)
             return;
-        }
         const out = this.calculate(e);
         this.apply(out);
         this.resizeMove.emit(out);
     }
     onPointerUp(e) {
-        if (!this.resizing() || e.pointerId !== this.pointerId) {
+        if (!this.resizing() || e.pointerId !== this.pointerId)
             return;
-        }
         const out = this.calculate(e);
         this.apply(out);
         this.resizeEnd.emit(out);
         this.finish();
     }
     onDocumentKeyDown(e) {
-        if (!this.resizing()) {
+        if (!this.resizing() || e.key !== 'Escape')
             return;
-        }
-        if (e.key !== 'Escape') {
-            return;
-        }
         e.preventDefault();
         this.restoreBeforeResize();
         this.finish();
@@ -3202,115 +3394,187 @@ class NgxResizable {
         const element = this.el.nativeElement;
         element.style.width = this.beforeWidth;
         element.style.height = this.beforeHeight;
-        element.style.transform = this.beforeTransform;
+        element.style.translate = this.beforeTranslate;
     }
+    /**
+     * Keyboard resizing respects the configured directions.
+     * The arrow keys move the active physical edge:
+     * - if only west is enabled, horizontal keys operate on west;
+     * - if only east is enabled, horizontal keys operate on east;
+     * - north/south follow the same rule vertically.
+     * Disabled axes are never modified.
+     */
     onHandleKeyDown(e) {
-        if (this.disabled()) {
+        if (this.disabled() || this.resizing())
             return;
-        }
-        // Only when the resizable element itself is focused: arrow keys pressed inside an input /
-        // contenteditable that lives in the block are caret movement, not a resize request.
-        if (e.target !== this.el.nativeElement) {
+        if (e.target !== this.el.nativeElement)
             return;
-        }
-        const rtl = isRtl(this.el.nativeElement);
-        const step = this.keyboardStep() * (e.shiftKey ? 4 : 1);
+        if (this.isEditableTarget(e.target))
+            return;
+        const allowed = this.resolvedDirections();
+        const horizontalEdge = this.chooseAxisEdge(allowed, 'x', e.key);
+        const verticalEdge = this.chooseAxisEdge(allowed, 'y', e.key);
         let dw = 0;
         let dh = 0;
-        if (e.key === 'ArrowRight') {
-            dw = rtl ? -step : step;
+        const configuredStep = this.keyboardStep();
+        const step = (Number.isFinite(configuredStep) ? Math.max(1, configuredStep) : KEYBOARD_STEP) *
+            (e.shiftKey ? 4 : 1);
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+            if (!horizontalEdge)
+                return;
+            const positive = e.key === 'ArrowRight';
+            const rtl = isRtl(this.el.nativeElement);
+            const physicalDelta = (positive ? 1 : -1) * (rtl ? -1 : 1);
+            // East edge follows pointer direction; west edge moves the opposite way
+            // relative to the resulting width.
+            dw = horizontalEdge === 'e' ? physicalDelta * step : -physicalDelta * step;
+        }
+        else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            if (!verticalEdge)
+                return;
+            const physicalDelta = e.key === 'ArrowDown' ? 1 : -1;
+            dh = verticalEdge === 's' ? physicalDelta * step : -physicalDelta * step;
+        }
+        else {
+            return;
+        }
+        e.preventDefault();
+        const element = this.el.nativeElement;
+        const oldWidth = readBorderBoxSize(element, 'x');
+        const oldHeight = readBorderBoxSize(element, 'y');
+        let width = oldWidth;
+        let height = oldHeight;
+        if (dw !== 0) {
+            width = this.clampSize(oldWidth + dw, 'x');
         }
-        else if (e.key === 'ArrowLeft') {
-            dw = rtl ? step : -step;
+        if (dh !== 0) {
+            height = this.clampSize(oldHeight + dh, 'y');
+        }
+        // Keep the opposite edge fixed for west/north keyboard resizing.
+        const rect = element.getBoundingClientRect();
+        const matrix = getLocalToViewportMatrix(element);
+        const scaleX = Math.hypot(matrix.a, matrix.b) || 1;
+        const scaleY = Math.hypot(matrix.c, matrix.d) || 1;
+        let moveLeft = horizontalEdge === 'w' ? (oldWidth - width) * scaleX : 0;
+        let moveTop = verticalEdge === 'n' ? (oldHeight - height) * scaleY : 0;
+        const boundary = this.boundary();
+        if (boundary) {
+            const clamped = clampResizeWithinBoundary(boundary.getBoundingClientRect(), rect, width * scaleX, height * scaleY, moveLeft, moveTop);
+            width = clamped.width / scaleX;
+            height = clamped.height / scaleY;
+            moveLeft = clamped.left;
+            moveTop = clamped.top;
         }
-        else if (e.key === 'ArrowDown') {
-            dh = step;
+        // Keyboard resize keeps a stable base translation and recomputes the total offset
+        // on every key press. This prevents an ever-growing chain of calc()/translate values.
+        if (this.keyboardBaseTranslate === null) {
+            const computed = element.ownerDocument.defaultView?.getComputedStyle(element);
+            this.keyboardBaseTranslate = computed?.translate ?? 'none';
+            this.keyboardBaseInlineTranslate = element.style.translate;
         }
-        else if (e.key === 'ArrowUp') {
-            dh = -step;
+        const style = this.toStyleSize(width, height);
+        element.style.width = `${style.width}px`;
+        element.style.height = `${style.height}px`;
+        element.style.translate = this.keyboardBaseInlineTranslate;
+        // Keep the opposite edge fixed without touching `transform` (owned by NgxDraggable).
+        const current = element.getBoundingClientRect();
+        const correctionX = rect.left + moveLeft - current.left;
+        const correctionY = rect.top + moveTop - current.top;
+        if (correctionX || correctionY) {
+            const local = viewportDeltaToLocal(element, { x: correctionX, y: correctionY });
+            writeTranslateWithOffset(element, this.keyboardBaseTranslate, local);
         }
         else {
-            return;
+            element.style.translate = this.keyboardBaseInlineTranslate;
         }
-        e.preventDefault();
-        const rect = this.el.nativeElement.getBoundingClientRect();
-        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');
-        const styled = this.toStyleSize(width, height);
-        this.el.nativeElement.style.width = `${styled.width}px`;
-        this.el.nativeElement.style.height = `${styled.height}px`;
         const out = {
             width,
             height,
-            moveLeft: 0,
-            moveTop: 0,
-            left: rect.left,
-            top: rect.top,
-            direction: 'se',
+            moveLeft,
+            moveTop,
+            left: rect.left + moveLeft,
+            top: rect.top + moveTop,
+            direction: this.keyboardDirection(horizontalEdge, verticalEdge),
         };
+        this.resizeStart.emit(out);
         this.resizeMove.emit(out);
         this.resizeEnd.emit(out);
     }
+    chooseAxisEdge(allowed, axis, key) {
+        if (axis === 'x') {
+            const hasWest = allowed.some((d) => d.includes('w'));
+            const hasEast = allowed.some((d) => d.includes('e'));
+            if (key === 'ArrowLeft') {
+                if (hasWest)
+                    return 'w';
+                if (hasEast)
+                    return 'e';
+            }
+            if (key === 'ArrowRight') {
+                if (hasEast)
+                    return 'e';
+                if (hasWest)
+                    return 'w';
+            }
+        }
+        else {
+            const hasNorth = allowed.some((d) => d.includes('n'));
+            const hasSouth = allowed.some((d) => d.includes('s'));
+            if (key === 'ArrowUp') {
+                if (hasNorth)
+                    return 'n';
+                if (hasSouth)
+                    return 's';
+            }
+            if (key === 'ArrowDown') {
+                if (hasSouth)
+                    return 's';
+                if (hasNorth)
+                    return 'n';
+            }
+        }
+        return null;
+    }
+    keyboardDirection(horizontal, vertical) {
+        if (horizontal && vertical)
+            return `${vertical}${horizontal}`;
+        return horizontal ?? vertical ?? 'se';
+    }
+    isEditableTarget(target) {
+        if (!isElementTarget(target))
+            return false;
+        return !!target.closest(INTERACTIVE_SELECTOR);
+    }
     calculate(e) {
-        const localDelta = viewportDeltaToLocal(this.el.nativeElement, {
+        const delta = applyLinear(this.pointerInverse, {
             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
-         */
-        if (this.direction.includes('e')) {
-            width += dx;
-        }
-        /**
-         * West
-         */
-        if (this.direction.includes('w')) {
-            width -= dx;
-        }
-        /**
-         * South
-         */
-        if (this.direction.includes('s')) {
-            height += dy;
-        }
-        /**
-         * North
-         */
-        if (this.direction.includes('n')) {
-            height -= dy;
-        }
-        width = this.clampGrid(Math.max(this.minWidth(), Math.min(this.maxWidth(), width)), 'x');
-        height = this.clampGrid(Math.max(this.minHeight(), Math.min(this.maxHeight(), height)), 'y');
-        /**
-         * Calculate the intended visual position.
-         *
-         * 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;
+        if (this.direction.includes('e'))
+            width += delta.x;
+        if (this.direction.includes('w'))
+            width -= delta.x;
+        if (this.direction.includes('s'))
+            height += delta.y;
+        if (this.direction.includes('n'))
+            height -= delta.y;
+        width = this.clampSize(width, 'x');
+        height = this.clampSize(height, 'y');
+        const scaleX = Math.hypot(this.startMatrix.a, this.startMatrix.b) || 1;
+        const scaleY = Math.hypot(this.startMatrix.c, this.startMatrix.d) || 1;
         let left = this.start.left;
         let top = this.start.top;
-        if (this.direction.includes('w')) {
+        if (this.direction.includes('w'))
             left = this.start.right - width * scaleX;
-        }
-        if (this.direction.includes('n')) {
+        if (this.direction.includes('n'))
             top = this.start.bottom - height * scaleY;
-        }
         let moveLeft = left - this.start.left;
         let moveTop = top - this.start.top;
-        /**
-         * Boundary constraint.
-         */
-        const boundaryEl = this.boundary();
-        if (boundaryEl) {
-            const clamped = clampResizeWithinBoundary(boundaryEl.getBoundingClientRect(), this.start, width * scaleX, height * scaleY, moveLeft, moveTop);
+        const boundary = this.boundary();
+        if (boundary) {
+            const clamped = clampResizeWithinBoundary(boundary.getBoundingClientRect(), this.start, width * scaleX, height * scaleY, moveLeft, moveTop);
             width = clamped.width / scaleX;
             height = clamped.height / scaleY;
             moveLeft = clamped.left;
@@ -3330,63 +3594,22 @@ class NgxResizable {
     }
     apply(out) {
         const element = this.el.nativeElement;
-        /**
-         * Always reset to the transform that existed before
-         * this resize operation started.
-         *
-         * This prevents resize corrections from accumulating.
-         */
-        element.style.transform = this.beforeTransform;
-        /**
-         * Apply the actual size first.
-         *
-         * Changing width/height may cause the browser to re-layout
-         * the element, especially for relative/flex/grid/static layouts.
-         */
+        element.style.translate = this.beforeTranslate;
         const style = this.toStyleSize(out.width, out.height);
         element.style.width = `${style.width}px`;
         element.style.height = `${style.height}px`;
-        /**
-         * Force/read layout after changing the size.
-         */
         const current = element.getBoundingClientRect();
-        /**
-         * These are the positions where the element MUST visually be.
-         *
-         * `out.moveLeft` / `out.moveTop` are calculated in `calculate()`
-         * from the original visual rectangle.
-         */
         const targetLeft = this.start.left + out.moveLeft;
         const targetTop = this.start.top + out.moveTop;
-        /**
-         * Browser's actual position after width/height changed.
-         *
-         * The difference between target and current position is the
-         * correction that must be applied using transform.
-         */
         const correctionX = targetLeft - current.left;
         const correctionY = targetTop - current.top;
-        const hasCorrection = correctionX !== 0 || correctionY !== 0;
-        if (!hasCorrection) {
-            element.style.transform = this.beforeTransform;
+        if (!correctionX && !correctionY) {
+            element.style.translate = this.beforeTranslate;
             return;
         }
-        /**
-         * Preserve DragRef's existing transform and add only the
-         * 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(` + `${localCorrection.x}px, ` + `${localCorrection.y}px, 0)`;
+        const local = viewportDeltaToLocal(element, { x: correctionX, y: correctionY });
+        writeTranslateWithOffset(element, this.baseComputedTranslate, local);
     }
-    /**
-     * `offsetWidth/Height` (what we measure and report) are BORDER-box sizes. The inline
-     * `width/height` we write are interpreted according to `box-sizing`: for the CSS default
-     * (`content-box`) writing the border-box number would make a padded/bordered block jump by
-     * its padding+border the instant a resize starts. Convert so the box is exactly the size
-     * reported in `IResizableOutput`.
-     */
     toStyleSize(width, height) {
         const el = this.el.nativeElement;
         const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
@@ -3395,17 +3618,25 @@ class NgxResizable {
         const px = (v) => Number.parseFloat(v) || 0;
         const extraX = px(cs.paddingLeft) + px(cs.paddingRight) + px(cs.borderLeftWidth) + px(cs.borderRightWidth);
         const extraY = px(cs.paddingTop) + px(cs.paddingBottom) + px(cs.borderTopWidth) + px(cs.borderBottomWidth);
-        return { width: Math.max(0, width - extraX), height: Math.max(0, height - extraY) };
+        return {
+            width: Math.max(0, width - extraX),
+            height: Math.max(0, height - extraY),
+        };
     }
-    clampGrid(value, axis) {
-        const g = this.grid();
-        // NOTE: the previous code returned the input *signal function* for a numeric grid, so every
-        // snapped size became NaN and the resize silently stopped working.
-        const grid = typeof g === 'number' ? g : g?.[axis];
-        if (!grid || !Number.isFinite(grid) || grid <= 0) {
-            return value;
-        }
-        return Math.round(value / grid) * grid;
+    clampSize(value, axis) {
+        const minInput = axis === 'x' ? this.minWidth() : this.minHeight();
+        const maxInput = axis === 'x' ? this.maxWidth() : this.maxHeight();
+        const min = Number.isFinite(minInput) ? Math.max(0, minInput) : 0;
+        const max = Number.isFinite(maxInput) ? Math.max(min, maxInput) : Infinity;
+        const bounded = Math.min(max, Math.max(min, Number.isFinite(value) ? value : min));
+        const grid = this.grid();
+        const step = typeof grid === 'number' ? grid : grid?.[axis];
+        if (!step || !Number.isFinite(step) || step <= 0)
+            return bounded;
+        // Snap relative to the minimum, then clamp again so grid rounding can never
+        // violate the configured min/max constraints.
+        const snapped = min + Math.round((bounded - min) / step) * step;
+        return Math.min(max, Math.max(min, snapped));
     }
     finish() {
         this.resizing.set(false);
@@ -3421,9 +3652,12 @@ class NgxResizable {
             }
         }
         catch {
-            /* already released */
+            // Pointer capture may already have been released.
         }
-        this.beforeTransform = '';
+        this.beforeTranslate = '';
+        this.baseComputedTranslate = 'none';
+        this.keyboardBaseTranslate = null;
+        this.keyboardBaseInlineTranslate = '';
     }
     resolvedDirections() {
         const rtl = isRtl(this.el.nativeElement);
@@ -3435,68 +3669,59 @@ class NgxResizable {
     }
     hitDirection(e) {
         const element = this.el.nativeElement;
-        const rect = element.getBoundingClientRect();
-        const edge = Math.min(12, Math.max(6, Math.min(rect.width, rect.height) * 0.18));
-        const isLeft = e.clientX - rect.left <= edge;
-        const isRight = rect.right - e.clientX <= edge;
-        const isTop = e.clientY - rect.top <= edge;
-        const isBottom = rect.bottom - e.clientY <= edge;
-        /**
-         * Explicit resize handle has priority.
-         */
-        // TODO notsafe instanceof:node.nodeType === Node.ELEMENT_NODE
-        const handle = isHTMLElementTarget(e.target)
-            ? e.target.closest('[data-ngx-resize-handle]')
+        const target = e.target;
+        // Explicit handles are allowed even when they are inside the panel.
+        const handle = isElementTarget(target)
+            ? target.closest('[data-ngx-resize-handle]')
             : null;
         if (handle && element.contains(handle)) {
             const raw = handle.dataset['ngxResizeHandle'];
-            if (!raw) {
+            if (!raw)
                 return null;
-            }
             const resolved = resolveLogicalDirection(raw, isRtl(element));
             return this.resolvedDirections().includes(resolved) ? resolved : null;
         }
-        /**
-         * These are PHYSICAL screen directions.
-         *
-         * left  -> w
-         * right -> e
-         *
-         * RTL is handled only when a logical direction
-         * such as "start" / "end" is requested.
-         */
-        const direction = isTop && isLeft
-            ? 'nw'
-            : isTop && isRight
-                ? 'ne'
-                : isBottom && isLeft
-                    ? 'sw'
-                    : isBottom && isRight
-                        ? 'se'
-                        : isTop
-                            ? 'n'
-                            : isRight
-                                ? 'e'
-                                : isBottom
-                                    ? 's'
-                                    : isLeft
-                                        ? 'w'
-                                        : null;
-        if (!direction) {
+        // Never steal pointer events from nested interactive controls.
+        if (isElementTarget(target) && target.closest(INTERACTIVE_SELECTOR))
             return null;
-        }
-        return this.resolvedDirections().includes(direction) ? direction : null;
+        const rect = element.getBoundingClientRect();
+        const edge = Math.min(12, Math.max(6, Math.min(rect.width, rect.height) * 0.18));
+        const isLeft = e.clientX - rect.left <= edge;
+        const isRight = rect.right - e.clientX <= edge;
+        const isTop = e.clientY - rect.top <= edge;
+        const isBottom = rect.bottom - e.clientY <= edge;
+        const candidates = [];
+        if (isTop && isLeft)
+            candidates.push('nw', 'n', 'w');
+        else if (isTop && isRight)
+            candidates.push('ne', 'n', 'e');
+        else if (isBottom && isLeft)
+            candidates.push('sw', 's', 'w');
+        else if (isBottom && isRight)
+            candidates.push('se', 's', 'e');
+        else if (isTop)
+            candidates.push('n');
+        else if (isRight)
+            candidates.push('e');
+        else if (isBottom)
+            candidates.push('s');
+        else if (isLeft)
+            candidates.push('w');
+        const allowed = new Set(this.resolvedDirections());
+        return candidates.find((candidate) => allowed.has(candidate)) ?? 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)", "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: { "attr.aria-keyshortcuts": "\"ArrowLeft ArrowRight ArrowUp ArrowDown\"" }, classAttribute: "ngx-resizable" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxResizable, decorators: [{
             type: Directive,
             args: [{
                     selector: '[NgxResizable],[ngxResizable]',
                     host: {
-                        '[style.touch-action]': '"none"',
                         class: 'ngx-resizable',
+                        // Do not set touch-action:none on the whole panel: it breaks nested controls.
+                        //  '[style.touch-action]': '"none"',
+                        '[attr.aria-keyshortcuts]': '"ArrowLeft ArrowRight ArrowUp ArrowDown"',
                     },
                 }]
         }], 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: [{
@@ -3506,13 +3731,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
-function isHTMLElementTarget(target) {
+function isElementTarget(target) {
     return (!!target &&
         typeof target === 'object' &&
         'nodeType' in target &&
         target.nodeType === 1 &&
         'closest' in target);
 }
+function readBorderBoxSize(element, axis) {
+    const win = element.ownerDocument.defaultView;
+    const style = win?.getComputedStyle(element);
+    if (!style)
+        return axis === 'x' ? element.offsetWidth : element.offsetHeight;
+    const horizontal = axis === 'x';
+    const size = Number.parseFloat(horizontal ? style.width : style.height) || 0;
+    if (style.boxSizing === 'border-box')
+        return size;
+    const px = (value) => Number.parseFloat(value) || 0;
+    return (size +
+        (horizontal
+            ? px(style.paddingLeft) +
+                px(style.paddingRight) +
+                px(style.borderLeftWidth) +
+                px(style.borderRightWidth)
+            : px(style.paddingTop) +
+                px(style.paddingBottom) +
+                px(style.borderTopWidth) +
+                px(style.borderBottomWidth)));
+}
+/**
+ * Compose a resize-only offset with the existing CSS individual `translate` value.
+ * Keeping the original CSS tokens (instead of parseFloat) preserves percentages, calc(),
+ * and variables. The `transform` channel remains exclusively owned by NgxDraggable.
+ */
+function writeTranslateWithOffset(element, baseValue, offset) {
+    const [baseX, baseY, baseZ] = splitCssComponents(!baseValue || baseValue === 'none' ? '0px 0px 0px' : baseValue);
+    const x = offset.x ? `calc(${baseX ?? '0px'} ${formatOffset(offset.x)})` : (baseX ?? '0px');
+    const y = offset.y ? `calc(${baseY ?? '0px'} ${formatOffset(offset.y)})` : (baseY ?? '0px');
+    element.style.translate = `${x} ${y} ${baseZ ?? '0px'}`;
+}
+function splitCssComponents(value) {
+    const result = [];
+    let depth = 0;
+    let token = '';
+    for (const char of value.trim()) {
+        if (char === '(')
+            depth++;
+        if (char === ')')
+            depth = Math.max(0, depth - 1);
+        if (/\s/.test(char) && depth === 0) {
+            if (token)
+                result.push(token);
+            token = '';
+        }
+        else {
+            token += char;
+        }
+    }
+    if (token)
+        result.push(token);
+    return result;
+}
+function formatOffset(value) {
+    return value < 0
+        ? `- ${Number(Math.abs(value).toFixed(4))}px`
+        : `+ ${Number(value.toFixed(4))}px`;
+}
 
 const NGX_PLACEHOLDER = new InjectionToken('ngx-place-holder');
 /**
@@ -3656,6 +3940,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 }]
         }] });
 
+/**
+ * Typed handle API. Prefer ngxResizeHandle="se" in templates; the legacy
+ * data-ngx-resize-handle attribute remains available for backwards compatibility.
+ */
+class NgxResizeHandle {
+    ngxResizeHandle = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngxResizeHandle" }] : /* istanbul ignore next */ []));
+    parent = inject(NgxResizable, { optional: true, skipSelf: true });
+    onPointerDown(event) {
+        this.parent?.beginResize(event, this.ngxResizeHandle());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxResizeHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxResizeHandle, isStandalone: true, selector: "[ngxResizeHandle]", inputs: { ngxResizeHandle: { classPropertyName: "ngxResizeHandle", publicName: "ngxResizeHandle", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "style.touch-action": "\"none\"", "style.user-select": "\"none\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxResizeHandle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxResizeHandle]',
+                    standalone: true,
+                    host: {
+                        '[style.touch-action]': '"none"',
+                        '[style.user-select]': '"none"',
+                    },
+                }]
+        }], propDecorators: { ngxResizeHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxResizeHandle", required: true }] }], onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }] } });
+
 function moveItemInArray(array, from, to) {
     const f = clamp(from, array.length - 1);
     const t = clamp(to, array.length - 1);
@@ -3741,5 +4054,5 @@ function getCleanHtml(el, options) {
  * Generated bundle index. Do not edit.
  */
 
-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, getCleanHtml, getPageZoom, getScrollPosition, isRtl, moveItemInArray, resolveLogicalDirection, stripEditorArtifacts, 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, NgxResizeHandle, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, findScrollableAncestor, findScrollableAncestorForAxis, getCleanHtml, getPageZoom, getScrollPosition, isRtl, moveItemInArray, resolveLogicalDirection, stripEditorArtifacts, transferArrayItem };
 //# sourceMappingURL=ngx-kit-drag-resize.mjs.map