ngx-kit 9.2.2 → 9.2.4

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

@@ -2804,6 +2804,7 @@ class NgxDraggable {
      * When `true`, presses on native interactive controls (`button, a, input, textarea, select`,
      * `[contenteditable]`) do not start a drag either. Off by default so that a page-builder canvas
      * block can be grabbed by its own button/link, which is exactly what you want while editing.
+     * @default false
      */
     ignoreInteractive = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ignoreInteractive" }] : /* istanbul ignore next */ []));
@@ -2889,17 +2890,15 @@ class NgxDraggable {
         this._ref.dropList?.removeItem(this._ref);
     }
     pointerDown(e) {
-        if (this.disabled() ||
-            e.button !== 0 ||
-            this.isExcluded(e.target) ||
-            !this.isOnHandle(e.target))
+        if (this.disabled() || e.button !== 0 || !this.isOnHandle(e.target))
             return;
         // Nested draggables: pointerdown bubbles, so without this an ancestor draggable would start
         // its own drag from the very same gesture. The innermost enabled draggable claims it.
         if (claimedPointerEvents.has(e))
             return;
         claimedPointerEvents.add(e);
-        e.preventDefault();
+        if (this.ignoreInteractive())
+            e.preventDefault();
         this.down = true;
         this.keyboardDrag = false;
         this.pointerId = e.pointerId;
@@ -3169,16 +3168,7 @@ class NgxDraggable {
         if (!this.dragHandle())
             return true;
         // TODO notsafe instanseof: node.nodeType === Node.ELEMENT_NODE
-        return isElementTarget(target) && !!target.closest(this.dragHandle());
-    }
-    /** Should a press on `target` be left alone (no drag)? */
-    isExcluded(target) {
-        if (!isElementTarget(target))
-            return false;
-        const selector = this.noDragSelector();
-        if (selector && target.closest(selector))
-            return true;
-        return this.ignoreInteractive() && isEditableOrInteractive(target);
+        return isElementTarget$1(target) && !!target.closest(this.dragHandle());
     }
     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 }, noDragSelector: { classPropertyName: "noDragSelector", publicName: "noDragSelector", isSignal: true, isRequired: false, transformFunction: null }, ignoreInteractive: { classPropertyName: "ignoreInteractive", publicName: "ignoreInteractive", 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 });
@@ -3203,15 +3193,12 @@ 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 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 &&
@@ -3221,6 +3208,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 */
@@ -3250,14 +3274,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;
@@ -3273,47 +3299,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 = [
@@ -3328,29 +3350,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();
@@ -3365,115 +3381,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 if (e.key === 'ArrowLeft') {
-            dw = rtl ? step : -step;
+        else {
+            return;
         }
-        else if (e.key === 'ArrowDown') {
-            dh = step;
+        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');
+        }
+        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 === 'ArrowUp') {
-            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;
+        }
+        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;
@@ -3493,63 +3581,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);
@@ -3558,17 +3605,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);
@@ -3584,9 +3639,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);
@@ -3598,68 +3656,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: [{
@@ -3669,13 +3718,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');
 /**
@@ -3819,6 +3927,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);
@@ -3904,5 +4041,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, findScrollableAncestorForAxis, 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