ngx-kit 7.1.0 → 7.3.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, EventEmitter, Injectable, InjectionToken, Directive, inject, Output, Input, HostListener } from '@angular/core';
+import { signal, EventEmitter, Injectable, InjectionToken, Directive, inject, Output, Input, model, input, output, effect, HostListener } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 /**
@@ -124,6 +124,7 @@ class DragRef {
     previousZIndex = '';
     moveDx = 0;
     moveDy = 0;
+    scrollCompensation = { x: 0, y: 0 };
     preview;
     previewOffsetX = 0;
     previewOffsetY = 0;
@@ -155,6 +156,7 @@ class DragRef {
         this.lastPointer = { ...pointer };
         this.moveDx = 0;
         this.moveDy = 0;
+        this.scrollCompensation = { x: 0, y: 0 };
         this.originDropList = this.dropList;
         this.originIndex = this.dropList?.getItemIndex(this) ?? -1;
         this.previousTransform = getComputedStyle(this.el).getPropertyValue('transform');
@@ -261,6 +263,7 @@ class DragRef {
         this.el.style.transform = this.previousTransform;
         this.el.style.visibility = this.sourceVisibility;
         this.el.style.pointerEvents = this.sourcePointerEvents;
+        this.scrollCompensation = { x: 0, y: 0 };
         this.endDrag();
     }
     get x() {
@@ -278,11 +281,32 @@ class DragRef {
     getPlaceholderElement() {
         return this.placeholder?.element;
     }
+    /**
+     * صدا زده می‌شود هر بار که container یا window در حین درگ اسکرول شود
+     * (چه توسط auto-scroll خودمان، چه با wheel/اسکرول‌بار دستی کاربر).
+     * transform را فوراً تصحیح می‌کند تا عنصر زیر پوینتر بماند.
+     */
+    notifyScroll(dx, dy) {
+        if (!this.isDragging())
+            return;
+        this.scrollCompensation = {
+            x: this.scrollCompensation.x + dx,
+            y: this.scrollCompensation.y + dy,
+        };
+        if (this.dropList) {
+            this.updatePreview();
+        }
+        else {
+            this.applyTransform();
+        }
+    }
     applyTransform() {
         const base = this.previousTransform && this.previousTransform !== 'none'
             ? this.previousTransform + ' '
             : '';
-        this.el.style.transform = `${base}translate3d(${this.moveDx}px, ${this.moveDy}px, 0)`;
+        const tx = this.moveDx + this.scrollCompensation.x;
+        const ty = this.moveDy + this.scrollCompensation.y;
+        this.el.style.transform = `${base}translate3d(${tx}px, ${ty}px, 0)`;
     }
     updatePreview() {
         if (!this.preview)
@@ -397,9 +421,7 @@ class PositionalSortStrategy {
             for (const node of Array.from(this.container.children)) {
                 if (node === placeholder)
                     return position;
-                if (node instanceof HTMLElement &&
-                    itemElements.has(node) &&
-                    node !== this.dragging?.el) {
+                if (node instanceof HTMLElement && itemElements.has(node) && node !== this.dragging?.el) {
                     position++;
                 }
             }
@@ -519,8 +541,7 @@ class PositionalSortStrategy {
             }
         }
         const target = best.rect;
-        const sameRow = y >= target.top - target.height * 0.35 &&
-            y <= target.bottom + target.height * 0.35;
+        const sameRow = y >= target.top - target.height * 0.35 && y <= target.bottom + target.height * 0.35;
         const before = sameRow
             ? this.rtl
                 ? x > target.left + target.width / 2
@@ -790,27 +811,22 @@ class DragDropService {
         this.activeDrag.set(null);
     }
     findDropList(point, current) {
-        const candidates = this.dropLists()
-            .filter((list) => {
+        const candidates = this.dropLists().filter((list) => {
             const r = list.el?.getBoundingClientRect();
-            return (!!r &&
-                point.x >= r.left &&
-                point.x <= r.right &&
-                point.y >= r.top &&
-                point.y <= r.bottom);
+            return (!!r && point.x >= r.left && point.x <= r.right && point.y >= r.top && point.y <= r.bottom);
         });
         // Staying over the current list should always win.
         if (current && candidates.includes(current))
             return current;
         // Never jump into an unrelated list just because it overlaps the pointer.
         // Prefer the smallest matching connected container (useful for nested lists).
-        return candidates
+        return (candidates
             .filter((list) => !current || current.isConnectedTo(list))
             .sort((a, b) => {
             const ra = a.el.getBoundingClientRect();
             const rb = b.el.getBoundingClientRect();
             return ra.width * ra.height - rb.width * rb.height;
-        })[0] ?? null;
+        })[0] ?? null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DragDropService, providedIn: 'root' });
@@ -899,16 +915,22 @@ class AutoScroller {
     raf = 0;
     container = window;
     speed = { x: 0, y: 0 };
+    onTick;
     edge;
     maxSpeed;
     constructor(edge = 56, maxSpeed = 18) {
         this.edge = edge;
         this.maxSpeed = maxSpeed;
     }
-    start(fromEl) {
+    /** onTick اجرا می‌شود بعد از هر گام اسکرول، تا با آخرین موقعیت pointer، sort/placeholder به‌روز شود. */
+    start(fromEl, onTick) {
+        this.container = findScrollableAncestor(fromEl);
+        this.onTick = onTick;
+    }
+    /** فقط container را عوض می‌کند بدون قطع حلقه‌ی در حال اجرا یا صفر کردن speed. */
+    retarget(fromEl) {
         this.container = findScrollableAncestor(fromEl);
     }
-    /** Call on every pointermove with the current client coordinates. */
     update(clientX, clientY) {
         const rect = getScrollRect(this.container);
         this.speed = {
@@ -924,6 +946,7 @@ class AutoScroller {
             cancelAnimationFrame(this.raf);
         this.raf = 0;
         this.speed = { x: 0, y: 0 };
+        this.onTick = undefined;
     }
     tick = () => {
         if (!this.speed.x && !this.speed.y) {
@@ -937,6 +960,9 @@ class AutoScroller {
             this.container.scrollLeft += this.speed.x;
             this.container.scrollTop += this.speed.y;
         }
+        // pointer ثابت مونده ولی محتوای زیرش اسکرول شده — پس sort/placeholder را
+        // دوباره با آخرین موقعیت شناخته‌شده اجرا کن.
+        this.onTick?.();
         this.raf = requestAnimationFrame(this.tick);
     };
 }
@@ -964,32 +990,46 @@ function findScrollableAncestor(el) {
     }
     return window;
 }
+function getScrollPosition(container) {
+    if (container instanceof Window) {
+        return { left: window.scrollX, top: window.scrollY };
+    }
+    return { left: container.scrollLeft, top: container.scrollTop };
+}
 
 const NGX_DRAGGABLE = new InjectionToken('ngx-draggable');
 const DEFAULT_KEYBOARD_STEP = 8;
 class NgxDraggable {
     host;
     renderer;
-    disabled = false;
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** Element whose rect constrains the drag. Now actually enforced. */
-    boundary;
-    dragRootElement = '';
+    boundary = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "boundary" }] : /* istanbul ignore next */ []));
+    dragRootElement = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragRootElement" }] : /* istanbul ignore next */ []));
     /** CSS selector for a drag handle. When set, only pointerdowns inside it start a drag. */
-    dragHandle = '';
+    dragHandle = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragHandle" }] : /* istanbul ignore next */ []));
     /** Restrict movement to a single axis. */
-    lockAxis;
+    lockAxis = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "lockAxis" }] : /* istanbul ignore next */ []));
     /** Minimum pointer travel (px) before a drag starts, so clicks still register normally. */
-    dragThreshold = 3;
+    dragThreshold = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragThreshold" }] : /* istanbul ignore next */ []));
     /** Pixel step used when dragging via the keyboard (arrow keys, focus required). */
-    keyboardStep = DEFAULT_KEYBOARD_STEP;
+    keyboardStep = input(DEFAULT_KEYBOARD_STEP, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboardStep" }] : /* istanbul ignore next */ []));
     /** Auto-scroll the nearest scrollable ancestor while dragging near its edge. */
-    autoScroll = true;
+    autoScroll = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoScroll" }] : /* istanbul ignore next */ []));
     set data(v) {
         this._ref.data = v;
     }
-    dragStart = new EventEmitter();
-    dragMove = new EventEmitter();
-    dragEnd = new EventEmitter();
+    dragStart = output();
+    dragMove = output();
+    dragEnd = output();
     _ref = new DragRef();
     dragging = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
@@ -1001,21 +1041,32 @@ class NgxDraggable {
     down = false;
     start = { x: 0, y: 0 };
     pointerId = -1;
+    lastPointer = { x: 0, y: 0 };
     removeDown;
     removeMove;
     removeUp;
     removeKeydown;
     removeEscape;
+    scrollTarget = window;
+    lastScroll = { left: 0, top: 0 };
+    lastWindowScroll = { left: 0, top: 0 };
+    removeContainerScroll;
+    removeWindowScroll;
     constructor(host, renderer) {
         this.host = host;
         this.renderer = renderer;
+        effect(() => {
+            this._ref.el = this.dragRootElement()
+                ? (this.host.nativeElement.closest(this.dragRootElement()) ?? this.host.nativeElement)
+                : this.host.nativeElement;
+        });
     }
     ngOnInit() {
-        this._ref.el = this.dragRootElement
-            ? (this.host.nativeElement.closest(this.dragRootElement) ?? this.host.nativeElement)
+        this._ref.el = this.dragRootElement()
+            ? (this.host.nativeElement.closest(this.dragRootElement()) ?? this.host.nativeElement)
             : this.host.nativeElement;
-        this._ref.boundary = this.boundary;
-        this._ref.lockAxis = this.lockAxis;
+        this._ref.boundary = this.boundary();
+        this._ref.lockAxis = this.lockAxis();
         this._ref.dropListGroup = this.group?._ref;
         this._ref.init();
         this._ref.withDropList(this.list?._ref ?? null);
@@ -1034,7 +1085,7 @@ class NgxDraggable {
         this._ref.dropList?.removeItem(this._ref);
     }
     pointerDown(e) {
-        if (this.disabled ||
+        if (this.disabled() ||
             e.button !== 0 ||
             // this.isInteractive(e.target) ||
             !this.isOnHandle(e.target))
@@ -1043,8 +1094,8 @@ class NgxDraggable {
         this.down = true;
         this.pointerId = e.pointerId;
         this.start = { x: e.clientX, y: e.clientY };
-        this._ref.boundary = this.boundary;
-        this._ref.lockAxis = this.lockAxis;
+        this._ref.boundary = this.boundary();
+        this._ref.lockAxis = this.lockAxis();
         this._ref.pointerDown(this.start);
         this.removeMove = this.renderer.listen(this.doc, 'pointermove', (ev) => this.pointerMove(ev));
         this.removeUp = this.renderer.listen(this.doc, 'pointerup', (ev) => this.pointerUp(ev));
@@ -1053,20 +1104,7 @@ class NgxDraggable {
                 this.cancel();
         });
     }
-    pointerMove(e) {
-        if (!this.down || e.pointerId !== this.pointerId)
-            return;
-        const p = { x: e.clientX, y: e.clientY };
-        if (!this.dragging() && Math.hypot(p.x - this.start.x, p.y - this.start.y) < this.dragThreshold)
-            return;
-        if (!this.dragging()) {
-            this._ref.startDrag(p);
-            this.dragging.set(true);
-            this.service.begin(this._ref);
-            if (this.autoScroll)
-                this.scroller.start(this._ref.el);
-            this.dragStart.emit(p);
-        }
+    applyDragUpdate(p) {
         this._ref.dragMove(p);
         const target = this.service.findDropList(p, this._ref.dropList);
         if (target !== this._ref.dropList) {
@@ -1075,22 +1113,70 @@ class NgxDraggable {
             if (target) {
                 this._ref.withDropList(target);
                 target.createPlaceholder(this._ref);
-                if (this.autoScroll) {
-                    this.scroller.stop();
-                    this.scroller.start(target.el);
-                }
+                if (this.autoScroll())
+                    this.scroller.retarget(target.el);
             }
-            else if (this.autoScroll) {
+            else if (this.autoScroll()) {
                 this.scroller.stop();
             }
         }
-        // Sorting uses the pointer against the currently active list. Its geometry
-        // is read live, so the placeholder and auto-scroll are both reflected.
         this._ref.dropList?.sortItem(this._ref, p);
-        if (this.autoScroll)
-            this.scroller.update(p.x, p.y);
         this.dragMove.emit(p);
     }
+    /** فراخوانی می‌شود دقیقاً وقتی drag واقعاً شروع می‌شود (چه با موس، چه با کیبورد). */
+    startScrollTracking() {
+        this.scrollTarget = findScrollableAncestor(this._ref.el);
+        this.lastScroll = getScrollPosition(this.scrollTarget);
+        this.lastWindowScroll = { left: window.scrollX, top: window.scrollY };
+        if (this.scrollTarget !== window) {
+            this.removeContainerScroll = this.renderer.listen(this.scrollTarget, 'scroll', () => this.handleContainerScroll());
+        }
+        // همیشه window رو هم جدا گوش می‌دیم؛ چون ممکنه container محلی نداشته باشیم
+        // ولی خودِ صفحه اسکرول بشه.
+        this.removeWindowScroll = this.renderer.listen('window', 'scroll', () => this.handleWindowScroll());
+    }
+    handleContainerScroll() {
+        const pos = getScrollPosition(this.scrollTarget);
+        const dx = pos.left - this.lastScroll.left;
+        const dy = pos.top - this.lastScroll.top;
+        this.lastScroll = pos;
+        this._ref.notifyScroll(dx, dy);
+    }
+    handleWindowScroll() {
+        const left = window.scrollX;
+        const top = window.scrollY;
+        const dx = left - this.lastWindowScroll.left;
+        const dy = top - this.lastWindowScroll.top;
+        this.lastWindowScroll = { left, top };
+        this._ref.notifyScroll(dx, dy);
+    }
+    stopScrollTracking() {
+        this.removeContainerScroll?.();
+        this.removeWindowScroll?.();
+        this.removeContainerScroll = this.removeWindowScroll = undefined;
+    }
+    pointerMove(e) {
+        if (!this.down || e.pointerId !== this.pointerId)
+            return;
+        const p = { x: e.clientX, y: e.clientY };
+        this.lastPointer = p;
+        if (!this.dragging() &&
+            Math.hypot(p.x - this.start.x, p.y - this.start.y) < this.dragThreshold())
+            return;
+        if (!this.dragging()) {
+            this._ref.startDrag(p);
+            this.dragging.set(true);
+            this.service.begin(this._ref);
+            this.startScrollTracking();
+            if (this.autoScroll()) {
+                this.scroller.start(this._ref.el, () => this.applyDragUpdate(this.lastPointer));
+            }
+            this.dragStart.emit(p);
+        }
+        this.applyDragUpdate(p);
+        if (this.autoScroll())
+            this.scroller.update(p.x, p.y);
+    }
     pointerUp(e) {
         if (!this.down || e.pointerId !== this.pointerId)
             return;
@@ -1112,6 +1198,7 @@ class NgxDraggable {
         this.dragging.set(false);
         this.down = false;
         this.scroller.stop();
+        this.stopScrollTracking();
         this.removeMove?.();
         this.removeUp?.();
         this.removeEscape?.();
@@ -1119,9 +1206,9 @@ class NgxDraggable {
     }
     /** Arrow-key movement for keyboard/assistive-tech users. Shift multiplies the step by 4. */
     keyDown(e) {
-        if (this.disabled)
+        if (this.disabled())
             return;
-        const step = this.keyboardStep * (e.shiftKey ? 4 : 1);
+        const step = this.keyboardStep() * (e.shiftKey ? 4 : 1);
         const deltas = {
             ArrowLeft: { x: -step, y: 0 },
             ArrowRight: { x: step, y: 0 },
@@ -1133,11 +1220,12 @@ class NgxDraggable {
             e.preventDefault();
             if (!this.dragging()) {
                 this._ref.pointerDown({ x: 0, y: 0 });
-                this._ref.boundary = this.boundary;
-                this._ref.lockAxis = this.lockAxis;
+                this._ref.boundary = this.boundary();
+                this._ref.lockAxis = this.lockAxis();
                 this._ref.startDrag({ x: 0, y: 0 });
                 this.dragging.set(true);
                 this.service.begin(this._ref);
+                this.startScrollTracking();
                 this.dragStart.emit({ x: 0, y: 0 });
             }
             this._ref.nudge(delta.x, delta.y);
@@ -1150,6 +1238,7 @@ class NgxDraggable {
             this.service.end(this._ref);
             this.dragEnd.emit(this._ref.pointer);
             this.dragging.set(false);
+            this.stopScrollTracking();
         }
         else if (e.key === 'Escape' && this.dragging()) {
             e.preventDefault();
@@ -1159,16 +1248,16 @@ class NgxDraggable {
         }
     }
     isOnHandle(target) {
-        if (!this.dragHandle)
+        if (!this.dragHandle())
             return true;
-        return target instanceof HTMLElement && !!target.closest(this.dragHandle);
+        return target instanceof HTMLElement && !!target.closest(this.dragHandle());
     }
     isInteractive(target) {
         return (target instanceof HTMLElement &&
             !!target.closest('button,a,input,textarea,select,[data-no-drag]'));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDraggable, isStandalone: true, selector: "[NgxDraggable],[ngxDraggable]", inputs: { disabled: "disabled", boundary: "boundary", dragRootElement: "dragRootElement", dragHandle: "dragHandle", lockAxis: "lockAxis", dragThreshold: "dragThreshold", keyboardStep: "keyboardStep", autoScroll: "autoScroll", data: "data" }, outputs: { dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "\"none\"", "attr.tabindex": "disabled ? null : 0", "attr.aria-grabbed": "dragging()" }, classAttribute: "ngx-draggable" }, providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxDraggable, isStandalone: true, selector: "[NgxDraggable],[ngxDraggable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, dragRootElement: { classPropertyName: "dragRootElement", publicName: "dragRootElement", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", dragRootElement: "dragRootElementChange", dragHandle: "dragHandleChange", dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "\"none\"", "attr.tabindex": "disabled() ? null : 0", "attr.aria-grabbed": "dragging()", "class.disable-drag": "disabled()" }, classAttribute: "ngx-draggable" }, providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, decorators: [{
             type: Directive,
@@ -1177,56 +1266,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                     providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }],
                     host: {
                         '[style.touch-action]': '"none"',
-                        '[attr.tabindex]': 'disabled ? null : 0',
+                        '[attr.tabindex]': 'disabled() ? null : 0',
                         '[attr.aria-grabbed]': 'dragging()',
                         class: 'ngx-draggable',
+                        '[class.disable-drag]': 'disabled()',
                     },
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { disabled: [{
-                type: Input
-            }], boundary: [{
-                type: Input
-            }], dragRootElement: [{
-                type: Input
-            }], dragHandle: [{
-                type: Input
-            }], lockAxis: [{
-                type: Input
-            }], dragThreshold: [{
-                type: Input
-            }], keyboardStep: [{
-                type: Input
-            }], autoScroll: [{
-                type: Input
-            }], data: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], dragRootElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragRootElement", required: false }] }, { type: i0.Output, args: ["dragRootElementChange"] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }, { type: i0.Output, args: ["dragHandleChange"] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], data: [{
                 type: Input,
                 args: ['data']
-            }], dragStart: [{
-                type: Output
-            }], dragMove: [{
-                type: Output
-            }], dragEnd: [{
-                type: Output
-            }] } });
+            }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
 
 const ALL_DIRECTIONS = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
 const KEYBOARD_STEP = 8;
 class NgxResizable {
     el;
-    disabled = false;
-    minWidth = 20;
-    minHeight = 20;
-    maxWidth = Infinity;
-    maxHeight = Infinity;
-    directions = [...ALL_DIRECTIONS];
-    grid;
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    minWidth = model(20, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    minHeight = model(20, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    maxWidth = model(Infinity, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    maxHeight = model(Infinity, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    directions = input([...ALL_DIRECTIONS], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "directions" }] : /* istanbul ignore next */ []));
+    grid = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "grid" }] : /* istanbul ignore next */ []));
     /** Element whose rect constrains the resize. Previously accepted nowhere on this directive. */
-    boundary;
+    boundary = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "boundary" }] : /* istanbul ignore next */ []));
     /** Pixel step used when resizing via the keyboard (arrow keys, focus required). */
-    keyboardStep = KEYBOARD_STEP;
-    resizeStart = new EventEmitter();
-    resizeMove = new EventEmitter();
-    resizeEnd = new EventEmitter();
+    keyboardStep = input(KEYBOARD_STEP, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboardStep" }] : /* istanbul ignore next */ []));
+    resizeStart = output();
+    resizeMove = output();
+    resizeEnd = output();
     resizing = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
     direction = 'se';
@@ -1244,7 +1321,7 @@ class NgxResizable {
         this.el = el;
     }
     onPointerDown(e) {
-        if (this.disabled || e.button !== 0) {
+        if (this.disabled() || e.button !== 0) {
             return;
         }
         const dir = this.hitDirection(e);
@@ -1313,11 +1390,11 @@ class NgxResizable {
         this.finish();
     }
     onHandleKeyDown(e) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         const rtl = isRtl(this.el.nativeElement);
-        const step = this.keyboardStep * (e.shiftKey ? 4 : 1);
+        const step = this.keyboardStep() * (e.shiftKey ? 4 : 1);
         let dw = 0;
         let dh = 0;
         if (e.key === 'ArrowRight') {
@@ -1337,8 +1414,8 @@ class NgxResizable {
         }
         e.preventDefault();
         const rect = this.el.nativeElement.getBoundingClientRect();
-        const width = this.clampGrid(Math.max(this.minWidth, Math.min(this.maxWidth, rect.width + dw)), 'x');
-        const height = this.clampGrid(Math.max(this.minHeight, Math.min(this.maxHeight, rect.height + dh)), 'y');
+        const width = this.clampGrid(Math.max(this.minWidth(), Math.min(this.maxWidth(), rect.width + dw)), 'x');
+        const height = this.clampGrid(Math.max(this.minHeight(), Math.min(this.maxHeight(), rect.height + dh)), 'y');
         this.el.nativeElement.style.width = `${width}px`;
         this.el.nativeElement.style.height = `${height}px`;
         const out = {
@@ -1382,8 +1459,8 @@ class NgxResizable {
         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');
+        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.
          *
@@ -1404,7 +1481,7 @@ class NgxResizable {
          * Boundary constraint.
          */
         if (this.boundary) {
-            const clamped = clampResizeWithinBoundary(this.boundary.getBoundingClientRect(), this.start, width, height, moveLeft, moveTop);
+            const clamped = clampResizeWithinBoundary(this.boundary()?.getBoundingClientRect(), this.start, width, height, moveLeft, moveTop);
             width = clamped.width;
             height = clamped.height;
             moveLeft = clamped.left;
@@ -1473,7 +1550,7 @@ class NgxResizable {
             `${baseTransform}translate3d(` + `${correctionX}px, ` + `${correctionY}px, 0)`;
     }
     clampGrid(value, axis) {
-        const grid = typeof this.grid === 'number' ? this.grid : this.grid?.[axis];
+        const grid = typeof this.grid() === 'number' ? this.grid : this.grid()?.[axis];
         if (!grid || grid <= 0) {
             return value;
         }
@@ -1488,7 +1565,7 @@ class NgxResizable {
     resolvedDirections() {
         const rtl = isRtl(this.el.nativeElement);
         const set = new Set();
-        for (const direction of this.directions) {
+        for (const direction of this.directions()) {
             set.add(resolveLogicalDirection(direction, rtl));
         }
         return [...set];
@@ -1547,7 +1624,7 @@ class NgxResizable {
         return this.resolvedDirections().includes(direction) ? direction : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxResizable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxResizable, isStandalone: true, selector: "[NgxResizable],[ngxResizable]", inputs: { disabled: "disabled", minWidth: "minWidth", minHeight: "minHeight", maxWidth: "maxWidth", maxHeight: "maxHeight", directions: "directions", grid: "grid", boundary: "boundary", keyboardStep: "keyboardStep" }, outputs: { resizeStart: "resizeStart", resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "document:pointermove": "onPointerMove($event)", "document:pointerup": "onPointerUp($event)", "document:keydown": "onDocumentKeyDown($event)", "keydown": "onHandleKeyDown($event)" }, properties: { "style.touch-action": "\"none\"" }, classAttribute: "ngx-resizable" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxResizable, isStandalone: true, selector: "[NgxResizable],[ngxResizable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, directions: { classPropertyName: "directions", publicName: "directions", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", minWidth: "minWidthChange", minHeight: "minHeightChange", maxWidth: "maxWidthChange", maxHeight: "maxHeightChange", resizeStart: "resizeStart", resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "document:pointermove": "onPointerMove($event)", "document:pointerup": "onPointerUp($event)", "document:keydown": "onDocumentKeyDown($event)", "keydown": "onHandleKeyDown($event)" }, properties: { "style.touch-action": "\"none\"" }, classAttribute: "ngx-resizable" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxResizable, decorators: [{
             type: Directive,
@@ -1558,31 +1635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         class: 'ngx-resizable',
                     },
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{
-                type: Input
-            }], minWidth: [{
-                type: Input
-            }], minHeight: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], maxHeight: [{
-                type: Input
-            }], directions: [{
-                type: Input
-            }], grid: [{
-                type: Input
-            }], boundary: [{
-                type: Input
-            }], keyboardStep: [{
-                type: Input
-            }], resizeStart: [{
-                type: Output
-            }], resizeMove: [{
-                type: Output
-            }], resizeEnd: [{
-                type: Output
-            }], onPointerDown: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }, { type: i0.Output, args: ["minWidthChange"] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }, { type: i0.Output, args: ["minHeightChange"] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }, { type: i0.Output, args: ["maxWidthChange"] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }, { type: i0.Output, args: ["maxHeightChange"] }], directions: [{ type: i0.Input, args: [{ isSignal: true, alias: "directions", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], resizeMove: [{ type: i0.Output, args: ["resizeMove"] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }], onPointerDown: [{
                 type: HostListener,
                 args: ['pointerdown', ['$event']]
             }], onPointerMove: [{
@@ -1660,5 +1713,5 @@ function clamp(v, max) {
  * Generated bundle index. Do not edit.
  */
 
-export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, getPageZoom, isRtl, moveItemInArray, resolveLogicalDirection, transferArrayItem };
+export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, findScrollableAncestor, getPageZoom, getScrollPosition, isRtl, moveItemInArray, resolveLogicalDirection, transferArrayItem };
 //# sourceMappingURL=ngx-kit-drag-resize.mjs.map