ngx-kit 7.1.0 → 7.3.0

package/fesm2022/ngx-kit-webflow.mjs

@@ -1,709 +0,0 @@
-import * as i0 from '@angular/core';
-import { signal, Injectable, computed, inject, ElementRef, Renderer2, NgZone, EventEmitter, HostBinding, Output, Input, Directive, ChangeDetectionStrategy, Component } from '@angular/core';
-
-/**
- * DragDropService
- * -------------------------------------------------------------
- * وضعیت سراسریِ «چه چیزی الان در حال درگ است» را نگه می‌دارد.
- * فقط signal، بدون هیچ Subject/Observable اضافه — سبک و قابل‌پیش‌بینی.
- */
-class DragDropService {
-    /** id آیتمی که هم‌اکنون درگ می‌شود، یا null */
-    activeId = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
-    /** آخرین نتیجهٔ محاسبه‌شدهٔ drop توسط DropPositionService */
-    pendingDrop = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pendingDrop" }] : /* istanbul ignore next */ []));
-    startDrag(id) {
-        this.activeId.set(id);
-        this.pendingDrop.set(null);
-    }
-    setPendingDrop(result) {
-        this.pendingDrop.set(result);
-    }
-    endDrag() {
-        const result = this.pendingDrop();
-        this.activeId.set(null);
-        this.pendingDrop.set(null);
-        return result;
-    }
-    get isDragging() {
-        return this.activeId() !== 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' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DragDropService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/**
- * DropPositionService
- * -------------------------------------------------------------
- * قلب الگوریتمِ «دقیقاً مثل Webflow» اینجاست.
- *
- * نکتهٔ کلیدی پرفورمنسی: این سرویس هیچ‌وقت روی همهٔ آیتم‌های لیست حلقه نمی‌زند.
- * فقط با استفاده از event delegation (یک لیستنر روی کانتینر) و event.target
- * دقیقاً همان یک المنتی که ماوس رویش است پیدا می‌شود -> O(1) صرف‌نظر از
- * تعداد آیتم‌ها (چه ۱۰ تا باشند چه ۱۰,۰۰۰ تا).
- *
- * منطق تشخیص zone (همانی که Webflow استفاده می‌کند):
- *  ۱. جهت چیدمان پدرِ آیتم هدف را می‌خوانیم (row یا column؛ از flex-direction
- *     یا داده‌شده به‌صورت دستی).
- *  ۲. موقعیت نسبی ماوس داخل rect آیتم هدف را به درصد تبدیل می‌کنیم.
- *  ۳. اگر آیتم هدف خودش یک container (قابل‌نست) باشد و ماوس در «هستهٔ
- *     مرکزی» rect باشد (مثلاً ۲۵٪ تا ۷۵٪ در هر دو محور) -> zone = inside.
- *  ۴. در غیر این صورت، محور اصلیِ چیدمان (که هم‌ردیفی معنی می‌دهد) با
- *     نوار نازک لبه (٪ آستانه) بررسی می‌شود:
- *       - چیدمان row:    نزدیک لبهٔ چپ/راست -> before/after (کنار هم)
- *                        نزدیک لبهٔ بالا/پایین -> above/below (ردیف جدید)
- *       - چیدمان column:  برعکسِ بالا
- */
-const EDGE_THRESHOLD = 0.33; // ۳۳٪ نزدیک هر لبه => درج در همان محور
-const NEST_CORE = 0.25; // فاصله از هر لبه برای اینکه «هسته» حساب شود
-class DropPositionService {
-    _indicator = signal({
-        visible: false,
-        orientation: null,
-        x: 0,
-        y: 0,
-        length: 0,
-        highlightRect: null,
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_indicator" }] : /* istanbul ignore next */ []));
-    /** استیت فقط‌خواندنیِ اندیکاتور برای بایند در تمپلیت */
-    indicator = computed(() => this._indicator(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
-    lastTargetId = null;
-    lastZone = null;
-    /**
-     * فراخوانی در هر pointermove حین درگ.
-     * targetEl باید همان element.closest('[data-flow-id]') باشد که در
-     * دایرکتیو کانتینر با event delegation پیدا شده — نه یک لوپ روی آیتم‌ها.
-     */
-    evaluate(params) {
-        const { targetEl, targetId, isContainer, parentAxis, clientX, clientY } = params;
-        const rect = targetEl.getBoundingClientRect();
-        const rx = clamp((clientX - rect.left) / rect.width, 0, 1);
-        const ry = clamp((clientY - rect.top) / rect.height, 0, 1);
-        let zone;
-        const insideCore = isContainer &&
-            rx > NEST_CORE && rx < 1 - NEST_CORE &&
-            ry > NEST_CORE && ry < 1 - NEST_CORE;
-        if (insideCore) {
-            zone = 'inside';
-        }
-        else if (parentAxis === 'row') {
-            if (rx < EDGE_THRESHOLD)
-                zone = 'before';
-            else if (rx > 1 - EDGE_THRESHOLD)
-                zone = 'after';
-            else
-                zone = ry < 0.5 ? 'above' : 'below';
-        }
-        else {
-            if (ry < EDGE_THRESHOLD)
-                zone = 'above';
-            else if (ry > 1 - EDGE_THRESHOLD)
-                zone = 'below';
-            else
-                zone = rx < 0.5 ? 'before' : 'after';
-        }
-        this.lastTargetId = targetId;
-        this.lastZone = zone;
-        this.paintIndicator(rect, zone);
-        return { targetId, zone };
-    }
-    /** رسم خط/کادر راهنما - فقط نوشتن به یک signal، بدون لمس بقیهٔ DOM */
-    paintIndicator(rect, zone) {
-        const asRect = {
-            top: rect.top, left: rect.left, width: rect.width, height: rect.height,
-            right: rect.right, bottom: rect.bottom,
-        };
-        if (zone === 'inside') {
-            this._indicator.set({
-                visible: true,
-                orientation: null,
-                x: 0, y: 0, length: 0,
-                highlightRect: asRect,
-            });
-            return;
-        }
-        if (zone === 'above' || zone === 'below') {
-            this._indicator.set({
-                visible: true,
-                orientation: 'h',
-                x: rect.left,
-                y: zone === 'above' ? rect.top : rect.bottom,
-                length: rect.width,
-                highlightRect: null,
-            });
-        }
-        else {
-            this._indicator.set({
-                visible: true,
-                orientation: 'v',
-                x: zone === 'before' ? rect.left : rect.right,
-                y: rect.top,
-                length: rect.height,
-                highlightRect: null,
-            });
-        }
-    }
-    clear() {
-        this.lastTargetId = null;
-        this.lastZone = null;
-        this._indicator.set({
-            visible: false, orientation: null, x: 0, y: 0, length: 0, highlightRect: null,
-        });
-    }
-    get current() {
-        if (!this.lastTargetId || !this.lastZone)
-            return null;
-        return { targetId: this.lastTargetId, zone: this.lastZone };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DropPositionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DropPositionService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DropPositionService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-function clamp(v, min, max) {
-    return Math.max(min, Math.min(max, v));
-}
-
-/**
- * ngxDraggable
- * -------------------------------------------------------------
- * تنها دایرکتیو مسئول درگ. کل منطق حرکت با CSS transform (translate3d)
- * روی خودِ عنصر درگ‌شونده انجام می‌شود — نه با جابجایی واقعی در DOM لیست.
- * جابجاییِ واقعیِ داده فقط یک‌بار، در لحظهٔ drop، از طریق خروجی
- * (flowDrop) اتفاق می‌افتد و آن‌وقت مصرف‌کننده (کامپوننت کانتینر) با
- * *ngFor + trackBy مدل را آپدیت می‌کند.
- *
- * دلیل مقیاس‌پذیری با هزاران آیتم:
- *  - در حین pointermove هیچ آیتم دیگری لمس/محاسبه نمی‌شود.
- *  - listener مربوط به تشخیص هدف روی کانتینر (event delegation) است،
- *    نه روی تک‌تک آیتم‌ها (این بخش در ContainerDropzoneDirective است).
- *  - آپدیت transform با requestAnimationFrame throttle می‌شود تا از
- *    چندبار layout/paint در هر فریم جلوگیری شود.
- */
-class DraggableDirective {
-    el = inject((ElementRef)).nativeElement;
-    renderer = inject(Renderer2);
-    zone = inject(NgZone);
-    dragDrop = inject(DragDropService);
-    dropPos = inject(DropPositionService);
-    /** شناسهٔ یکتای بلاک — برای شناسایی هنگام درگ لازم است */
-    ngxDraggableId;
-    /** غیرفعال کردن موقت درگ (مثلاً حین ادیت متن داخل بلاک) */
-    ngxDraggableDisabled = false;
-    /** هندلِ اختصاصی؛ اگر ندهی، کل عنصر هندل می‌شود */
-    ngxDragHandleSelector = null;
-    flowDragStart = new EventEmitter();
-    flowDragEnd = new EventEmitter();
-    dragging = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
-    get draggingClass() { return this.dragging(); }
-    get touchAction() { return 'none'; }
-    startX = 0;
-    startY = 0;
-    originLeft = 0;
-    originTop = 0;
-    rafId = null;
-    pendingTransform = null;
-    cleanupFns = [];
-    constructor() {
-        this.zone.runOutsideAngular(() => {
-            this.cleanupFns.push(this.renderer.listen(this.el, 'pointerdown', (e) => this.onPointerDown(e)));
-        });
-    }
-    onPointerDown(e) {
-        if (this.ngxDraggableDisabled)
-            return;
-        if (e.button !== 0)
-            return;
-        if (this.ngxDragHandleSelector) {
-            const handle = this.el.querySelector(this.ngxDragHandleSelector);
-            if (!handle || !handle.contains(e.target))
-                return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        const rect = this.el.getBoundingClientRect();
-        this.startX = e.clientX;
-        this.startY = e.clientY;
-        this.originLeft = rect.left;
-        this.originTop = rect.top;
-        this.el.setPointerCapture(e.pointerId);
-        this.dragging.set(true);
-        this.dragDrop.startDrag(this.ngxDraggableId);
-        this.zone.run(() => {
-            this.flowDragStart.emit({
-                id: this.ngxDraggableId,
-                pointerId: e.pointerId,
-                originRect: {
-                    top: rect.top, left: rect.left, width: rect.width, height: rect.height,
-                    right: rect.right, bottom: rect.bottom,
-                },
-            });
-        });
-        this.renderer.addClass(this.el, 'ngx-drag-ghost');
-        const move = (ev) => this.onPointerMove(ev);
-        const up = (ev) => this.onPointerUp(ev, move, up);
-        this.el.addEventListener('pointermove', move);
-        this.el.addEventListener('pointerup', up);
-        this.el.addEventListener('pointercancel', up);
-    }
-    onPointerMove(e) {
-        const dx = e.clientX - this.startX;
-        const dy = e.clientY - this.startY;
-        this.pendingTransform = { x: dx, y: dy };
-        if (this.rafId === null) {
-            this.rafId = requestAnimationFrame(() => {
-                this.rafId = null;
-                if (!this.pendingTransform)
-                    return;
-                // تنها لمسِ DOM در کل چرخهٔ درگ: نوشتن transform روی خودِ عنصر.
-                this.renderer.setStyle(this.el, 'transform', `translate3d(${this.pendingTransform.x}px, ${this.pendingTransform.y}px, 0)`);
-            });
-        }
-        // نتیجهٔ zone فعلی (اگر کانتینر آن را محاسبه کرده) در سرویس در دسترس است.
-    }
-    onPointerUp(e, move, up) {
-        this.el.removeEventListener('pointermove', move);
-        this.el.removeEventListener('pointerup', up);
-        this.el.removeEventListener('pointercancel', up);
-        if (this.rafId !== null) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = null;
-        }
-        this.renderer.removeStyle(this.el, 'transform');
-        this.renderer.removeClass(this.el, 'ngx-drag-ghost');
-        this.dragging.set(false);
-        const result = this.dragDrop.endDrag();
-        this.dropPos.clear();
-        this.zone.run(() => {
-            this.flowDragEnd.emit({ id: this.ngxDraggableId, drop: result });
-        });
-    }
-    ngOnDestroy() {
-        this.cleanupFns.forEach((fn) => fn());
-        if (this.rafId !== null)
-            cancelAnimationFrame(this.rafId);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DraggableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: DraggableDirective, isStandalone: true, selector: "[ngxDraggable]", inputs: { ngxDraggableId: "ngxDraggableId", ngxDraggableDisabled: "ngxDraggableDisabled", ngxDragHandleSelector: "ngxDragHandleSelector" }, outputs: { flowDragStart: "flowDragStart", flowDragEnd: "flowDragEnd" }, host: { properties: { "class.ngx-dragging": "this.draggingClass", "style.touchAction": "this.touchAction" } }, exportAs: ["ngxDraggable"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DraggableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngxDraggable]',
-                    standalone: true,
-                    exportAs: 'ngxDraggable',
-                }]
-        }], ctorParameters: () => [], propDecorators: { ngxDraggableId: [{
-                type: Input,
-                args: [{ required: true }]
-            }], ngxDraggableDisabled: [{
-                type: Input
-            }], ngxDragHandleSelector: [{
-                type: Input
-            }], flowDragStart: [{
-                type: Output
-            }], flowDragEnd: [{
-                type: Output
-            }], draggingClass: [{
-                type: HostBinding,
-                args: ['class.ngx-dragging']
-            }], touchAction: [{
-                type: HostBinding,
-                args: ['style.touchAction']
-            }] } });
-
-/**
- * ngxResizable
- * -------------------------------------------------------------
- * تنها دایرکتیو مسئول ریسایز. مستقل از DraggableDirective.
- * روی عنصر اصلی قرار می‌گیرد و به همراه ۸ هندل (که خودت در تمپلیت با
- * class مشخص می‌کنی، مثلاً <span class="rz-handle" data-handle="se">)
- * کار می‌کند.
- *
- * فقط CSS width/height/left/top آپدیت می‌شود (از طریق خروجی flowResize)
- * و مصرف‌کننده تصمیم می‌گیرد این مقادیر را چطور به مدل/استایل بایند کند —
- * دایرکتیو خودش مستقیماً مدل داده را تغییر نمی‌دهد.
- */
-class ResizableDirective {
-    el = inject((ElementRef)).nativeElement;
-    renderer = inject(Renderer2);
-    zone = inject(NgZone);
-    ngxResizableId;
-    ngxResizableMinWidth = 24;
-    ngxResizableMinHeight = 24;
-    ngxResizableDisabled = false;
-    /** انتخاب‌گر هندل‌ها؛ باید attribute یا data-handle داشته باشند */
-    ngxResizeHandleSelector = '[data-handle]';
-    flowResizeStart = new EventEmitter();
-    flowResizeMove = new EventEmitter();
-    flowResizeEnd = new EventEmitter();
-    resizing = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
-    startX = 0;
-    startY = 0;
-    startW = 0;
-    startH = 0;
-    handle = 'se';
-    rafId = null;
-    pending = null;
-    unlisten = null;
-    constructor() {
-        this.zone.runOutsideAngular(() => {
-            this.unlisten = this.renderer.listen(this.el, 'pointerdown', (e) => this.onDown(e));
-        });
-    }
-    onDown(e) {
-        if (this.ngxResizableDisabled)
-            return;
-        const handleEl = e.target?.closest(this.ngxResizeHandleSelector);
-        if (!handleEl || !this.el.contains(handleEl))
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        this.handle = handleEl.getAttribute('data-handle') || 'se';
-        const rect = this.el.getBoundingClientRect();
-        this.startX = e.clientX;
-        this.startY = e.clientY;
-        this.startW = rect.width;
-        this.startH = rect.height;
-        e.target.setPointerCapture(e.pointerId);
-        this.resizing.set(true);
-        this.zone.run(() => this.flowResizeStart.emit({ id: this.ngxResizableId, handle: this.handle }));
-        const move = (ev) => this.onMove(ev);
-        const up = (ev) => this.onUp(ev, move, up);
-        handleEl.addEventListener('pointermove', move);
-        handleEl.addEventListener('pointerup', up);
-        handleEl.addEventListener('pointercancel', up);
-    }
-    onMove(e) {
-        const dx = e.clientX - this.startX;
-        const dy = e.clientY - this.startY;
-        const h = this.handle;
-        let w = this.startW;
-        let ht = this.startH;
-        let ox = 0, oy = 0;
-        if (h.includes('e'))
-            w = this.startW + dx;
-        if (h.includes('w')) {
-            w = this.startW - dx;
-            ox = dx;
-        }
-        if (h.includes('s'))
-            ht = this.startH + dy;
-        if (h.includes('n')) {
-            ht = this.startH - dy;
-            oy = dy;
-        }
-        w = Math.max(this.ngxResizableMinWidth, w);
-        ht = Math.max(this.ngxResizableMinHeight, ht);
-        this.pending = { w, h: ht, ox, oy };
-        if (this.rafId === null) {
-            this.rafId = requestAnimationFrame(() => {
-                this.rafId = null;
-                if (!this.pending)
-                    return;
-                this.zone.run(() => {
-                    this.flowResizeMove.emit({
-                        id: this.ngxResizableId, handle: this.handle,
-                        width: this.pending.w, height: this.pending.h,
-                        offsetX: this.pending.ox, offsetY: this.pending.oy,
-                    });
-                });
-            });
-        }
-    }
-    onUp(e, move, up) {
-        const handleEl = e.target;
-        handleEl.removeEventListener('pointermove', move);
-        handleEl.removeEventListener('pointerup', up);
-        handleEl.removeEventListener('pointercancel', up);
-        if (this.rafId !== null) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = null;
-        }
-        this.resizing.set(false);
-        if (this.pending) {
-            this.zone.run(() => {
-                this.flowResizeEnd.emit({
-                    id: this.ngxResizableId, handle: this.handle,
-                    width: this.pending.w, height: this.pending.h,
-                    offsetX: this.pending.ox, offsetY: this.pending.oy,
-                });
-            });
-        }
-        this.pending = null;
-    }
-    ngOnDestroy() {
-        this.unlisten?.();
-        if (this.rafId !== null)
-            cancelAnimationFrame(this.rafId);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: ResizableDirective, isStandalone: true, selector: "[ngxResizable]", inputs: { ngxResizableId: "ngxResizableId", ngxResizableMinWidth: "ngxResizableMinWidth", ngxResizableMinHeight: "ngxResizableMinHeight", ngxResizableDisabled: "ngxResizableDisabled", ngxResizeHandleSelector: "ngxResizeHandleSelector" }, outputs: { flowResizeStart: "flowResizeStart", flowResizeMove: "flowResizeMove", flowResizeEnd: "flowResizeEnd" }, exportAs: ["ngxResizable"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ResizableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngxResizable]',
-                    standalone: true,
-                    exportAs: 'ngxResizable',
-                }]
-        }], ctorParameters: () => [], propDecorators: { ngxResizableId: [{
-                type: Input,
-                args: [{ required: true }]
-            }], ngxResizableMinWidth: [{
-                type: Input
-            }], ngxResizableMinHeight: [{
-                type: Input
-            }], ngxResizableDisabled: [{
-                type: Input
-            }], ngxResizeHandleSelector: [{
-                type: Input
-            }], flowResizeStart: [{
-                type: Output
-            }], flowResizeMove: [{
-                type: Output
-            }], flowResizeEnd: [{
-                type: Output
-            }] } });
-
-/**
- * ngxDropzoneContainer
- * -------------------------------------------------------------
- * روی هر کانتینری که فرزندانش قابل‌درگ‌اند‌دراپ هستند قرار می‌گیرد
- * (چه ریشهٔ صفحه، چه یک بلاک تو‌در‌تو).
- *
- * فقط یک pointermove-listener سراسری (روی document، حین یک درگ فعال)
- * دارد و با event.target.closest('[data-flow-id]') هدف را پیدا می‌کند.
- * این یعنی صرف‌نظر از اینکه چند هزار فرزند وجود دارد، هزینهٔ هر حرکتِ
- * ماوس ثابت (O(1)) است — نه O(n).
- *
- * هر فرزند مستقیمِ قابل‌درگ باید attribute زیر را داشته باشد
- * (به‌صورت خودکار توسط DraggableDirective/تمپلیت ست می‌شود):
- *   [attr.data-flow-id]="item.id"
- *   [attr.data-flow-container]="isContainer ? '' : null"
- */
-class DropzoneContainerDirective {
-    el = inject((ElementRef)).nativeElement;
-    zone = inject(NgZone);
-    renderer = inject(Renderer2);
-    dragDrop = inject(DragDropService);
-    dropPos = inject(DropPositionService);
-    /** جهت چیدمان فرزندان مستقیم این کانتینر */
-    ngxDropzoneAxis = 'row';
-    /** آیا خودِ این کانتینر می‌تواند میزبان nest شدن باشد */
-    ngxDropzoneNestable = true;
-    unlistenMove = null;
-    unlistenLeave = null;
-    ngOnInit() {
-        this.zone.runOutsideAngular(() => {
-            this.unlistenMove = this.renderer.listen(this.el, 'pointermove', (e) => {
-                if (!this.dragDrop.isDragging)
-                    return;
-                this.handleMove(e);
-            });
-        });
-    }
-    handleMove(e) {
-        const targetEl = e.target?.closest('[data-flow-id]');
-        if (!targetEl || !this.el.contains(targetEl) || targetEl === this.el)
-            return;
-        const targetId = targetEl.getAttribute('data-flow-id');
-        const activeId = this.dragDrop.activeId();
-        if (!targetId || targetId === activeId)
-            return; // نمی‌توان روی خودش دراپ کرد
-        const isContainer = this.ngxDropzoneNestable && targetEl.hasAttribute('data-flow-container');
-        const result = this.dropPos.evaluate({
-            targetEl,
-            targetId,
-            isContainer,
-            parentAxis: this.ngxDropzoneAxis,
-            clientX: e.clientX,
-            clientY: e.clientY,
-        });
-        this.dragDrop.setPendingDrop(result);
-    }
-    ngOnDestroy() {
-        this.unlistenMove?.();
-        this.unlistenLeave?.();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DropzoneContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: DropzoneContainerDirective, isStandalone: true, selector: "[ngxDropzoneContainer]", inputs: { ngxDropzoneAxis: "ngxDropzoneAxis", ngxDropzoneNestable: "ngxDropzoneNestable" }, exportAs: ["ngxDropzoneContainer"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DropzoneContainerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngxDropzoneContainer]',
-                    standalone: true,
-                    exportAs: 'ngxDropzoneContainer',
-                }]
-        }], propDecorators: { ngxDropzoneAxis: [{
-                type: Input
-            }], ngxDropzoneNestable: [{
-                type: Input
-            }] } });
-
-/**
- * FlowDropIndicatorComponent
- * -------------------------------------------------------------
- * یک‌بار در ریشهٔ صفحه‌ساز قرار می‌گیرد (position: fixed).
- * تنها المنتی است که در طول درگ مدام آپدیت می‌شود؛ بقیهٔ آیتم‌های
- * لیست دست‌نخورده باقی می‌مانند. کاملاً با computed از signal سرویس
- * تغذیه می‌شود، بدون هیچ منطق اضافه در کامپوننت.
- */
-class FlowDropIndicatorComponent {
-    dropPos = inject(DropPositionService);
-    indicator = computed(() => this.dropPos.indicator(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FlowDropIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: FlowDropIndicatorComponent, isStandalone: true, selector: "flow-drop-indicator", ngImport: i0, template: `
-    @if (indicator().visible) {
-      @if (indicator().highlightRect; as r) {
-        <div class="flow-nest-highlight"
-             [style.top.px]="r.top" [style.left.px]="r.left"
-             [style.width.px]="r.width" [style.height.px]="r.height">
-        </div>
-      } @else if (indicator().orientation === 'h') {
-        <div class="flow-indicator flow-indicator--h"
-             [style.top.px]="indicator().y" [style.left.px]="indicator().x"
-             [style.width.px]="indicator().length">
-        </div>
-      } @else if (indicator().orientation === 'v') {
-        <div class="flow-indicator flow-indicator--v"
-             [style.top.px]="indicator().y" [style.left.px]="indicator().x"
-             [style.height.px]="indicator().length">
-        </div>
-      }
-    }
-  `, isInline: true, styles: [":host{position:fixed;inset:0;pointer-events:none;z-index:9999}.flow-indicator{position:fixed;background:var(--flow-accent, #146ef5);border-radius:2px;pointer-events:none}.flow-indicator--h{height:3px;transform:translateY(-1.5px)}.flow-indicator--v{width:3px;transform:translate(-1.5px)}.flow-nest-highlight{position:fixed;border:2px solid var(--flow-accent, #146ef5);background:color-mix(in srgb,var(--flow-accent, #146ef5) 10%,transparent);border-radius:4px;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FlowDropIndicatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'flow-drop-indicator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (indicator().visible) {
-      @if (indicator().highlightRect; as r) {
-        <div class="flow-nest-highlight"
-             [style.top.px]="r.top" [style.left.px]="r.left"
-             [style.width.px]="r.width" [style.height.px]="r.height">
-        </div>
-      } @else if (indicator().orientation === 'h') {
-        <div class="flow-indicator flow-indicator--h"
-             [style.top.px]="indicator().y" [style.left.px]="indicator().x"
-             [style.width.px]="indicator().length">
-        </div>
-      } @else if (indicator().orientation === 'v') {
-        <div class="flow-indicator flow-indicator--v"
-             [style.top.px]="indicator().y" [style.left.px]="indicator().x"
-             [style.height.px]="indicator().length">
-        </div>
-      }
-    }
-  `, styles: [":host{position:fixed;inset:0;pointer-events:none;z-index:9999}.flow-indicator{position:fixed;background:var(--flow-accent, #146ef5);border-radius:2px;pointer-events:none}.flow-indicator--h{height:3px;transform:translateY(-1.5px)}.flow-indicator--v{width:3px;transform:translate(-1.5px)}.flow-nest-highlight{position:fixed;border:2px solid var(--flow-accent, #146ef5);background:color-mix(in srgb,var(--flow-accent, #146ef5) 10%,transparent);border-radius:4px;pointer-events:none}\n"] }]
-        }] });
-
-/**
- * FlowTreeService
- * -------------------------------------------------------------
- * مدل درختیِ صفحه (دقیقاً همان چیزی که Webflow "Element Panel" اسمش
- * می‌گذارد). تغییر مدل فقط در لحظهٔ drop رخ می‌دهد (نه در هر
- * pointermove) — به همین دلیل حتی با هزاران بلاک، re-render فقط
- * یک‌بار در پایان درگ اتفاق می‌افتد.
- *
- * پیاده‌سازی immutable-ish: فقط مسیر تغییر‌یافته کپی می‌شود، نه کل
- * درخت (structural sharing) تا با درخت‌های بزرگ هم CPU/GC اذیت نشود.
- */
-class FlowTreeService {
-    _root = signal({
-        id: 'root', type: 'root', axis: 'column', isContainer: true, children: [],
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_root" }] : /* istanbul ignore next */ []));
-    root = computed(() => this._root(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
-    setRoot(node) {
-        this._root.set(node);
-    }
-    applyDrop(draggedId, drop) {
-        const currentRoot = this._root();
-        const dragged = findAndRemove(currentRoot, draggedId);
-        if (!dragged.node)
-            return;
-        const afterRemoval = dragged.tree;
-        const inserted = insertRelativeTo(afterRemoval, drop.targetId, drop.zone, dragged.node);
-        if (inserted)
-            this._root.set(inserted);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FlowTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FlowTreeService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FlowTreeService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-function findAndRemove(node, id) {
-    let removed = null;
-    const idx = node.children.findIndex((c) => c.id === id);
-    if (idx !== -1) {
-        removed = node.children[idx];
-        const children = [...node.children.slice(0, idx), ...node.children.slice(idx + 1)];
-        return { tree: { ...node, children }, node: removed };
-    }
-    let changed = false;
-    const newChildren = node.children.map((c) => {
-        if (removed)
-            return c;
-        const res = findAndRemove(c, id);
-        if (res.node) {
-            removed = res.node;
-            changed = true;
-            return res.tree;
-        }
-        return c;
-    });
-    return { tree: changed ? { ...node, children: newChildren } : node, node: removed };
-}
-function insertRelativeTo(node, targetId, zone, toInsert) {
-    const idx = node.children.findIndex((c) => c.id === targetId);
-    if (idx !== -1) {
-        if (zone === 'inside') {
-            const target = node.children[idx];
-            const updatedTarget = { ...target, children: [...target.children, toInsert] };
-            const children = [...node.children];
-            children[idx] = updatedTarget;
-            return { ...node, children };
-        }
-        const insertAt = zone === 'before' || zone === 'above' ? idx : idx + 1;
-        const children = [...node.children.slice(0, insertAt), toInsert, ...node.children.slice(insertAt)];
-        return { ...node, children };
-    }
-    for (let i = 0; i < node.children.length; i++) {
-        const res = insertRelativeTo(node.children[i], targetId, zone, toInsert);
-        if (res) {
-            const children = [...node.children];
-            children[i] = res;
-            return { ...node, children };
-        }
-    }
-    return null;
-}
-
-/**
- * ngx-flowbuilder — مدل‌های پایه
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DragDropService, DraggableDirective, DropPositionService, DropzoneContainerDirective, FlowDropIndicatorComponent, FlowTreeService, ResizableDirective };
-//# sourceMappingURL=ngx-kit-webflow.mjs.map