ngx-vflow 1.8.0 → 1.8.2

package/esm2022/lib/vflow/directives/lazy-for.directive.mjs

@@ -0,0 +1,243 @@
+import { ChangeDetectorRef, DestroyRef, Directive, inject, Input, IterableDiffers, TemplateRef, ViewContainerRef, isDevMode, } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, animationFrames, bufferCount, concatMap, delayWhen, finalize, from, of, take, takeUntil, tap, } from 'rxjs';
+import * as i0 from "@angular/core";
+/** Enum with lazy render directive state */
+var LazyForState;
+(function (LazyForState) {
+    /** Directive is in idle state */
+    LazyForState["idle"] = "idle";
+    /** Directive is rendering */
+    LazyForState["rendering"] = "rendering";
+})(LazyForState || (LazyForState = {}));
+/**
+ * Context for an element in lazyFor
+ */
+class LazyForContextModel {
+    /** Whether the element is first */
+    get first() {
+        return this.index === 0;
+    }
+    /** Whether the element is last */
+    get last() {
+        return this.index === this.count - 1;
+    }
+    /** Whether the element is even */
+    get even() {
+        return this.index % 2 === 0;
+    }
+    /** Whether the element is odd */
+    get odd() {
+        return !this.even;
+    }
+    constructor($implicit, lazyFor, index, count) {
+        this.$implicit = $implicit;
+        this.lazyFor = lazyFor;
+        this.index = index;
+        this.count = count;
+    }
+}
+export class LazyForDirective {
+    /**
+     * Asserts the correct type of the context for the template that `lazyFor` will render.
+     *
+     * The presence of this method is a signal to the Ivy template type-check compiler that the
+     * `lazyFor` structural directive renders its template with a specific context type.
+     */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    //#region INPUTS
+    /** Setter for the array to be rendered by the directive */
+    set lazyForOf(lazyFor) {
+        this._lazyFor = lazyFor;
+        this._lazyForDirty = true;
+    }
+    /**
+     * Input - setter for TrackBy function
+     * @description is required
+     */
+    set lazyForTrackBy(fn) {
+        if (isDevMode() && fn !== null && typeof fn !== 'function') {
+            console.warn(`trackBy must be a function, but received ${JSON.stringify(fn)}. ` +
+                `See https://angular.io/api/common/NgForOf#change-propagation for more information.`);
+        }
+        this._trackByFn = fn;
+    }
+    /**
+     * Setter for the number of items that will be rendered per frame
+     * @param value number of items that will be rendered per frame
+     */
+    set lazyForItemsPerFrame(value) {
+        if (value <= 0) {
+            if (isDevMode()) {
+                console.warn('Items per frame parameter cannot be lower than 0! Input value was ignored');
+            }
+            return;
+        }
+        this._itemsPerFrame = value;
+    }
+    /** Setter for array item template */
+    set lazyForTemplate(value) {
+        if (value) {
+            this._template = value;
+        }
+    }
+    /** Getter for TrackBy function */
+    get lazyForTrackBy() {
+        return this._trackByFn;
+    }
+    //#endregion
+    constructor() {
+        this._template = inject(TemplateRef);
+        this._viewContainer = inject(ViewContainerRef);
+        this._differs = inject(IterableDiffers);
+        this._cdr = inject(ChangeDetectorRef);
+        this._destroyRef$ = inject(DestroyRef);
+        //#region PROPERTIES
+        /** Array for rendering */
+        this._lazyFor = null;
+        /** lazyFor initialization flag */
+        this._lazyForDirty = true;
+        /** Differ for tracking changes in input array */
+        this._differ = null;
+        /** Number of items to be rendered per frame */
+        this._itemsPerFrame = 5;
+        /** Directive state */
+        this._lazyForState = LazyForState.idle;
+        //#endregion
+        //#region RXJS
+        /** Private subject for stopping dynamic render process */
+        this._rerenderUnsub$ = new Subject();
+        this._destroyRef$.onDestroy(() => this._viewContainer.clear());
+    }
+    /** ngDoCheck hook */
+    ngDoCheck() {
+        if (this._lazyForDirty) {
+            this._lazyForDirty = false;
+            const value = this._lazyFor;
+            if (!this._differ && value) {
+                this._differ = this._differs.find(value).create(this.lazyForTrackBy);
+            }
+        }
+        if (this._differ) {
+            let changes = this._differ.diff(this._lazyFor);
+            if (changes) {
+                if (this._lazyForState === LazyForState.rendering) {
+                    /**
+                     * If the array changed during an active render process
+                     * Need to clear container of all views
+                     * And restart rendering from the beginning.
+                     */
+                    this._rerenderUnsub$.next();
+                    changes = this._differ.diff([]);
+                    changes = this._differ.diff(this._lazyFor);
+                    this._viewContainer.clear();
+                    if (changes) {
+                        this.applyChanges(changes);
+                    }
+                }
+                else {
+                    this.applyChanges(changes);
+                }
+            }
+        }
+    }
+    /**
+     * Apply changes detected by differ
+     * @param changes changes
+     */
+    applyChanges(changes) {
+        const itemDataListToRender = [];
+        changes.forEachOperation((item, adjustedPreviousIndex, currentIndex) => {
+            const itemToPush = {
+                item: { ...item },
+                adjustedPreviousIndex,
+                currentIndex,
+            };
+            itemDataListToRender.push(itemToPush);
+        });
+        this.performLazyRender(itemDataListToRender, changes);
+    }
+    /**
+     * Perform lazy rendering
+     * @param itemDataListToRender list of items to render
+     * @param changes changes
+     */
+    performLazyRender(itemDataListToRender, changes) {
+        this.updateLazyForState(LazyForState.rendering);
+        this._rerenderUnsub$.next();
+        from(itemDataListToRender)
+            .pipe(bufferCount(this._itemsPerFrame), concatMap((itemList) => of(itemList).pipe(delayWhen(() => animationFrames()))), tap((itemList) => {
+            for (let i = 0; i < itemList.length; i++) {
+                const data = itemList[i];
+                if (data.item.previousIndex === null) {
+                    this._viewContainer.createEmbeddedView(this._template, new LazyForContextModel(data.item.item, this._lazyFor, -1, -1), data.currentIndex === null ? undefined : data.currentIndex);
+                }
+                else if (data.currentIndex === null) {
+                    this._viewContainer.remove(data.adjustedPreviousIndex === null ? undefined : data.adjustedPreviousIndex);
+                }
+                else if (data.adjustedPreviousIndex !== null) {
+                    const view = this._viewContainer.get(data.adjustedPreviousIndex);
+                    this._viewContainer.move(view, data.currentIndex);
+                    this.applyViewChange(view, data.item);
+                }
+            }
+            this.updateViewContext();
+            this._cdr.markForCheck();
+        }), 
+        /** Using take we automatically unsubscribe from the stream when rendering is complete */
+        take(Math.ceil(itemDataListToRender.length / this._itemsPerFrame)), takeUntil(this._rerenderUnsub$), takeUntilDestroyed(this._destroyRef$), finalize(() => {
+            changes.forEachIdentityChange((record) => {
+                const viewRef = (this._viewContainer.get(record.currentIndex));
+                this.applyViewChange(viewRef, record);
+            });
+            this.updateLazyForState(LazyForState.idle);
+        }))
+            .subscribe();
+    }
+    /** Update context (without implicit$) for elements inside view */
+    updateViewContext() {
+        for (let i = 0, ilen = this._viewContainer.length; i < ilen; i++) {
+            const viewRef = (this._viewContainer.get(i));
+            const context = viewRef.context;
+            context.index = i;
+            context.count = ilen;
+            context.lazyFor = this._lazyFor;
+        }
+    }
+    /**
+     * Apply implicit$ context
+     * @param view view
+     * @param record data
+     */
+    applyViewChange(view, record) {
+        view.context.$implicit = record.item;
+    }
+    /**
+     * Update directive state
+     * @param stateToSet state to set
+     */
+    updateLazyForState(stateToSet) {
+        this._lazyForState = stateToSet;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: LazyForDirective, isStandalone: true, selector: "[lazyFor][lazyForOf]", inputs: { lazyForOf: "lazyForOf", lazyForTrackBy: "lazyForTrackBy", lazyForItemsPerFrame: "lazyForItemsPerFrame", lazyForTemplate: "lazyForTemplate" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyForDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lazyFor][lazyForOf]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { lazyForOf: [{
+                type: Input
+            }], lazyForTrackBy: [{
+                type: Input,
+                args: [{ required: true }]
+            }], lazyForItemsPerFrame: [{
+                type: Input
+            }], lazyForTemplate: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF6eS1mb3IuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXZmbG93LWxpYi9zcmMvbGliL3ZmbG93L2RpcmVjdGl2ZXMvbGF6eS1mb3IuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxpQkFBaUIsRUFDakIsVUFBVSxFQUNWLFNBQVMsRUFHVCxNQUFNLEVBQ04sS0FBSyxFQUlMLGVBQWUsRUFFZixXQUFXLEVBRVgsZ0JBQWdCLEVBRWhCLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNoRSxPQUFPLEVBQ0wsT0FBTyxFQUNQLGVBQWUsRUFDZixXQUFXLEVBQ1gsU0FBUyxFQUNULFNBQVMsRUFDVCxRQUFRLEVBQ1IsSUFBSSxFQUNKLEVBQUUsRUFDRixJQUFJLEVBQ0osU0FBUyxFQUNULEdBQUcsR0FDSixNQUFNLE1BQU0sQ0FBQzs7QUFFZCw0Q0FBNEM7QUFDNUMsSUFBSyxZQUtKO0FBTEQsV0FBSyxZQUFZO0lBQ2YsaUNBQWlDO0lBQ2pDLDZCQUFhLENBQUE7SUFDYiw2QkFBNkI7SUFDN0IsdUNBQXVCLENBQUE7QUFDekIsQ0FBQyxFQUxJLFlBQVksS0FBWixZQUFZLFFBS2hCO0FBRUQ7O0dBRUc7QUFDSCxNQUFNLG1CQUFtQjtJQUN2QixtQ0FBbUM7SUFDbkMsSUFBVyxLQUFLO1FBQ2QsT0FBTyxJQUFJLENBQUMsS0FBSyxLQUFLLENBQUMsQ0FBQztJQUMxQixDQUFDO0lBRUQsa0NBQWtDO0lBQ2xDLElBQVcsSUFBSTtRQUNiLE9BQU8sSUFBSSxDQUFDLEtBQUssS0FBSyxJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRUQsa0NBQWtDO0lBQ2xDLElBQVcsSUFBSTtRQUNiLE9BQU8sSUFBSSxDQUFDLEtBQUssR0FB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Q0FBQztJQUVEOzs7O09BSUc7SUFDSyxlQUFlLENBQUMsSUFBNkMsRUFBRSxNQUErQjtRQUNwRyxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDO0lBQ3ZDLENBQUM7SUFFRDs7O09BR0c7SUFDSyxrQkFBa0IsQ0FBQyxVQUF3QjtRQUNqRCxJQUFJLENBQUMsYUFBYSxHQUFHLFVBQVUsQ0FBQztJQUNsQyxDQUFDOytHQXZPVSxnQkFBZ0I7bUdBQWhCLGdCQUFnQjs7NEZBQWhCLGdCQUFnQjtrQkFKNUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsc0JBQXNCO29CQUNoQyxVQUFVLEVBQUUsSUFBSTtpQkFDakI7d0RBd0JZLFNBQVM7c0JBRG5CLEtBQUs7Z0JBV0ssY0FBYztzQkFEeEIsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBZ0JkLG9CQUFvQjtzQkFEOUIsS0FBSztnQkFlSyxlQUFlO3NCQUR6QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIERlc3Ryb3lSZWYsXG4gIERpcmVjdGl2ZSxcbiAgRG9DaGVjayxcbiAgRW1iZWRkZWRWaWV3UmVmLFxuICBpbmplY3QsXG4gIElucHV0LFxuICBJdGVyYWJsZUNoYW5nZVJlY29yZCxcbiAgSXRlcmFibGVDaGFuZ2VzLFxuICBJdGVyYWJsZURpZmZlcixcbiAgSXRlcmFibGVEaWZmZXJzLFxuICBOZ0l0ZXJhYmxlLFxuICBUZW1wbGF0ZVJlZixcbiAgVHJhY2tCeUZ1bmN0aW9uLFxuICBWaWV3Q29udGFpbmVyUmVmLFxuICBWaWV3UmVmLFxuICBpc0Rldk1vZGUsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgdGFrZVVudGlsRGVzdHJveWVkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHtcbiAgU3ViamVjdCxcbiAgYW5pbWF0aW9uRnJhbWVzLFxuICBidWZmZXJDb3VudCxcbiAgY29uY2F0TWFwLFxuICBkZWxheVdoZW4sXG4gIGZpbmFsaXplLFxuICBmcm9tLFxuICBvZixcbiAgdGFrZSxcbiAgdGFrZVVudGlsLFxuICB0YXAsXG59IGZyb20gJ3J4anMnO1xuXG4vKiogRW51bSB3aXRoIGxhenkgcmVuZGVyIGRpcmVjdGl2ZSBzdGF0ZSAqL1xuZW51bSBMYXp5Rm9yU3RhdGUge1xuICAvKiogRGlyZWN0aXZlIGlzIGluIGlkbGUgc3RhdGUgKi9cbiAgaWRsZSA9ICdpZGxlJyxcbiAgLyoqIERpcmVjdGl2ZSBpcyByZW5kZXJpbmcgKi9cbiAgcmVuZGVyaW5nID0gJ3JlbmRlcmluZycsXG59XG5cbi8qKlxuICogQ29udGV4dCBmb3IgYW4gZWxlbWVudCBpbiBsYXp5Rm9yXG4gKi9cbmNsYXNzIExhenlGb3JDb250ZXh0TW9kZWw8VCwgVSBleHRlbmRzIE5nSXRlcmFibGU8VD4gPSBOZ0l0ZXJhYmxlPFQ+PiB7XG4gIC8qKiBXaGV0aGVyIHRoZSBlbGVtZW50IGlzIGZpcnN0ICovXG4gIHB1YmxpYyBnZXQgZmlyc3QoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuaW5kZXggPT09IDA7XG4gIH1cblxuICAvKiogV2hldGhlciB0aGUgZWxlbWVudCBpcyBsYXN0ICovXG4gIHB1YmxpYyBnZXQgbGFzdCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5pbmRleCA9PT0gdGhpcy5jb3VudCAtIDE7XG4gIH1cblxuICAvKiogV2hldGhlciB0aGUgZWxlbWVudCBpcyBldmVuICovXG4gIHB1YmxpYyBnZXQgZXZlbigpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5pbmRleCAlIDIgPT09IDA7XG4gIH1cblxuICAvKiogV2hldGhlciB0aGUgZWxlbWVudCBpcyBvZGQgKi9cbiAgcHVibGljIGdldCBvZGQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuICF0aGlzLmV2ZW47XG4gIH1cblxuICBjb25zdHJ1Y3RvcihcbiAgICBwdWJsaWMgJGltcGxpY2l0OiBULFxuICAgIHB1YmxpYyBsYXp5Rm9yOiBVLFxuICAgIHB1YmxpYyBpbmRleDogbnVtYmVyLFxuICAgIHB1YmxpYyBjb3VudDogbnVtYmVyLFxuICApIHt9XG59XG5cbnR5cGUgTGF6eUZvckl0ZW08VD4gPSB7XG4gIGl0ZW06IEl0ZXJhYmxlQ2hhbmdlUmVjb3JkPFQ+O1xuICBhZGp1c3RlZFByZXZpb3VzSW5kZXg6IG51bWJlciB8IG51bGw7XG4gIGN1cnJlbnRJbmRleDogbnVtYmVyIHwgbnVsbDtcbn07XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tsYXp5Rm9yXVtsYXp5Rm9yT2ZdJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgTGF6eUZvckRpcmVjdGl2ZTxULCBVIGV4dGVuZHMgTmdJdGVyYWJsZTxUPiA9IE5nSXRlcmFibGU8VD4+IGltcGxlbWVudHMgRG9DaGVjayB7XG4gIHByaXZhdGUgX3RlbXBsYXRlID0gaW5qZWN0PFRlbXBsYXRlUmVmPExhenlGb3JDb250ZXh0TW9kZWw8VCwgVT4+PihUZW1wbGF0ZVJlZik7XG4gIHByaXZhdGUgX3ZpZXdDb250YWluZXIgPSBpbmplY3QoVmlld0NvbnRhaW5lclJlZik7XG4gIHByaXZhdGUgX2RpZmZlcnMgPSBpbmplY3QoSXRlcmFibGVEaWZmZXJzKTtcbiAgcHJpdmF0ZSBfY2RyID0gaW5qZWN0KENoYW5nZURldGVjdG9yUmVmKTtcbiAgcHJpdmF0ZSBfZGVzdHJveVJlZiQgPSBpbmplY3QoRGVzdHJveVJlZik7XG5cbiAgLyoqXG4gICAqIEFzc2VydHMgdGhlIGNvcnJlY3QgdHlwZSBvZiB0aGUgY29udGV4dCBmb3IgdGhlIHRlbXBsYXRlIHRoYXQgYGxhenlGb3JgIHdpbGwgcmVuZGVyLlxuICAgKlxuICAgKiBUaGUgcHJlc2VuY2Ugb2YgdGhpcyBtZXRob2QgaXMgYSBzaWduYWwgdG8gdGhlIEl2eSB0ZW1wbGF0ZSB0eXBlLWNoZWNrIGNvbXBpbGVyIHRoYXQgdGhlXG4gICAqIGBsYXp5Rm9yYCBzdHJ1Y3R1cmFsIGRpcmVjdGl2ZSByZW5kZXJzIGl0cyB0ZW1wbGF0ZSB3aXRoIGEgc3BlY2lmaWMgY29udGV4dCB0eXBlLlxuICAgKi9cbiAgcHVibGljIHN0YXRpYyBuZ1RlbXBsYXRlQ29udGV4dEd1YXJkPFQsIFUgZXh0ZW5kcyBOZ0l0ZXJhYmxlPFQ+PihcbiAgICBkaXI6IExhenlGb3JEaXJlY3RpdmU8VCwgVT4sXG4gICAgY3R4OiBhbnksXG4gICk6IGN0eCBpcyBMYXp5Rm9yQ29udGV4dE1vZGVsPFQsIFU+IHtcbiAgICByZXR1cm4gdHJ1ZTtcbiAgfVxuXG4gIC8vI3JlZ2lvbiBJTlBVVFNcbiAgLyoqIFNldHRlciBmb3IgdGhlIGFycmF5IHRvIGJlIHJlbmRlcmVkIGJ5IHRoZSBkaXJlY3RpdmUgKi9cbiAgQElucHV0KClcbiAgcHVibGljIHNldCBsYXp5Rm9yT2YobGF6eUZvcjogKFUgJiBOZ0l0ZXJhYmxlPFQ+KSB8IHVuZGVmaW5lZCB8IG51bGwpIHtcbiAgICB0aGlzLl9sYXp5Rm9yID0gbGF6eUZvcjtcbiAgICB0aGlzLl9sYXp5Rm9yRGlydHkgPSB0cnVlO1xuICB9XG5cbiAgLyoqXG4gICAqIElucHV0IC0gc2V0dGVyIGZvciBUcmFja0J5IGZ1bmN0aW9uXG4gICAqIEBkZXNjcmlwdGlvbiBpcyByZXF1aXJlZFxuICAgKi9cbiAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSlcbiAgcHVibGljIHNldCBsYXp5Rm9yVHJhY2tCeShmbjogVHJhY2tCeUZ1bmN0aW9uPFQ+KSB7XG4gICAgaWYgKGlzRGV2TW9kZSgpICYmIGZuICE9PSBudWxsICYmIHR5cGVvZiBmbiAhPT0gJ2Z1bmN0aW9uJykge1xuICAgICAgY29uc29sZS53YXJuKFxuICAgICAgICBgdHJhY2tCeSBtdXN0IGJlIGEgZnVuY3Rpb24sIGJ1dCByZWNlaXZlZCAke0pTT04uc3RyaW5naWZ5KGZuKX0uIGAgK1xuICAgICAgICAgIGBTZWUgaHR0cHM6Ly9hbmd1bGFyLmlvL2FwaS9jb21tb24vTmdGb3JPZiNjaGFuZ2UtcHJvcGFnYXRpb24gZm9yIG1vcmUgaW5mb3JtYXRpb24uYCxcbiAgICAgICk7XG4gICAgfVxuICAgIHRoaXMuX3RyYWNrQnlGbiA9IGZuO1xuICB9XG5cbiAgLyoqXG4gICAqIFNldHRlciBmb3IgdGhlIG51bWJlciBvZiBpdGVtcyB0aGF0IHdpbGwgYmUgcmVuZGVyZWQgcGVyIGZyYW1lXG4gICAqIEBwYXJhbSB2YWx1ZSBudW1iZXIgb2YgaXRlbXMgdGhhdCB3aWxsIGJlIHJlbmRlcmVkIHBlciBmcmFtZVxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIHNldCBsYXp5Rm9ySXRlbXNQZXJGcmFtZSh2YWx1ZTogbnVtYmVyKSB7XG4gICAgaWYgKHZhbHVlIDw9IDApIHtcbiAgICAgIGlmIChpc0Rldk1vZGUoKSkge1xuICAgICAgICBjb25zb2xlLndhcm4oJ0l0ZW1zIHBlciBmcmFtZSBwYXJhbWV0ZXIgY2Fubm90IGJlIGxvd2VyIHRoYW4gMCEgSW5wdXQgdmFsdWUgd2FzIGlnbm9yZWQnKTtcbiAgICAgIH1cblxuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMuX2l0ZW1zUGVyRnJhbWUgPSB2YWx1ZTtcbiAgfVxuXG4gIC8qKiBTZXR0ZXIgZm9yIGFycmF5IGl0ZW0gdGVtcGxhdGUgKi9cbiAgQElucHV0KClcbiAgcHVibGljIHNldCBsYXp5Rm9yVGVtcGxhdGUodmFsdWU6IFRlbXBsYXRlUmVmPExhenlGb3JDb250ZXh0TW9kZWw8VCwgVT4+KSB7XG4gICAgaWYgKHZhbHVlKSB7XG4gICAgICB0aGlzLl90ZW1wbGF0ZSA9IHZhbHVlO1xuICAgIH1cbiAgfVxuXG4gIC8qKiBHZXR0ZXIgZm9yIFRyYWNrQnkgZnVuY3Rpb24gKi9cbiAgcHVibGljIGdldCBsYXp5Rm9yVHJhY2tCeSgpOiBUcmFja0J5RnVuY3Rpb248VD4ge1xuICAgIHJldHVybiB0aGlzLl90cmFja0J5Rm47XG4gIH1cblxuICAvLyNyZWdpb24gUFJPUEVSVElFU1xuICAvKiogQXJyYXkgZm9yIHJlbmRlcmluZyAqL1xuICBwcml2YXRlIF9sYXp5Rm9yOiBVIHwgdW5kZWZpbmVkIHwgbnVsbCA9IG51bGw7XG4gIC8qKiBsYXp5Rm9yIGluaXRpYWxpemF0aW9uIGZsYWcgKi9cbiAgcHJpdmF0ZSBfbGF6eUZvckRpcnR5OiBib29sZWFuID0gdHJ1ZTtcbiAgLyoqIERpZmZlciBmb3IgdHJhY2tpbmcgY2hhbmdlcyBpbiBpbnB1dCBhcnJheSAqL1xuICBwcml2YXRlIF9kaWZmZXI6IEl0ZXJhYmxlRGlmZmVyPFQ+IHwgbnVsbCA9IG51bGw7XG4gIC8qKiB0cmFja0J5IGZ1bmN0aW9uICovXG4gIHByaXZhdGUgX3RyYWNrQnlGbiE6IFRyYWNrQnlGdW5jdGlvbjxUPjtcbiAgLyoqIE51bWJlciBvZiBpdGVtcyB0byBiZSByZW5kZXJlZCBwZXIgZnJhbWUgKi9cbiAgcHJpdmF0ZSBfaXRlbXNQZXJGcmFtZTogbnVtYmVyID0gNTtcbiAgLyoqIERpcmVjdGl2ZSBzdGF0ZSAqL1xuICBwcml2YXRlIF9sYXp5Rm9yU3RhdGU6IExhenlGb3JTdGF0ZSA9IExhenlGb3JTdGF0ZS5pZGxlO1xuICAvLyNlbmRyZWdpb25cblxuICAvLyNyZWdpb24gUlhKU1xuICAvKiogUHJpdmF0ZSBzdWJqZWN0IGZvciBzdG9wcGluZyBkeW5hbWljIHJlbmRlciBwcm9jZXNzICovXG4gIHByaXZhdGUgcmVhZG9ubHkgX3JlcmVuZGVyVW5zdWIkOiBTdWJqZWN0PHZvaWQ+ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcbiAgLy8jZW5kcmVnaW9uXG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgdGhpcy5fZGVzdHJveVJlZiQub25EZXN0cm95KCgpID0+IHRoaXMuX3ZpZXdDb250YWluZXIuY2xlYXIoKSk7XG4gIH1cblxuICAvKiogbmdEb0NoZWNrIGhvb2sgKi9cbiAgcHVibGljIG5nRG9DaGVjaygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5fbGF6eUZvckRpcnR5KSB7XG4gICAgICB0aGlzLl9sYXp5Rm9yRGlydHkgPSBmYWxzZTtcbiAgICAgIGNvbnN0IHZhbHVlOiBVIHwgdW5kZWZpbmVkIHwgbnVsbCA9IHRoaXMuX2xhenlGb3I7XG4gICAgICBpZiAoIXRoaXMuX2RpZmZlciAmJiB2YWx1ZSkge1xuICAgICAgICB0aGlzLl9kaWZmZXIgPSB0aGlzLl9kaWZmZXJzLmZpbmQodmFsdWUpLmNyZWF0ZSh0aGlzLmxhenlGb3JUcmFja0J5KTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICBpZiAodGhpcy5fZGlmZmVyKSB7XG4gICAgICBsZXQgY2hhbmdlczogSXRlcmFibGVDaGFuZ2VzPFQ+IHwgbnVsbCA9IHRoaXMuX2RpZmZlci5kaWZmKHRoaXMuX2xhenlGb3IpO1xuICAgICAgaWYgKGNoYW5nZXMpIHtcbiAgICAgICAgaWYgKHRoaXMuX2xhenlGb3JTdGF0ZSA9PT0gTGF6eUZvclN0YXRlLnJlbmRlcmluZykge1xuICAgICAgICAgIC8qKlxuICAgICAgICAgICAqIElmIHRoZSBhcnJheSBjaGFuZ2VkIGR1cmluZyBhbiBhY3RpdmUgcmVuZGVyIHByb2Nlc3NcbiAgICAgICAgICAgKiBOZWVkIHRvIGNsZWFyIGNvbnRhaW5lciBvZiBhbGwgdmlld3NcbiAgICAgICAgICAgKiBBbmQgcmVzdGFydCByZW5kZXJpbmcgZnJvbSB0aGUgYmVnaW5uaW5nLlxuICAgICAgICAgICAqL1xuICAgICAgICAgIHRoaXMuX3JlcmVuZGVyVW5zdWIkLm5leHQoKTtcbiAgICAgICAgICBjaGFuZ2VzID0gdGhpcy5fZGlmZmVyLmRpZmYoW10pO1xuICAgICAgICAgIGNoYW5nZXMgPSB0aGlzLl9kaWZmZXIuZGlmZih0aGlzLl9sYXp5Rm9yKTtcbiAgICAgICAgICB0aGlzLl92aWV3Q29udGFpbmVyLmNsZWFyKCk7XG4gICAgICAgICAgaWYgKGNoYW5nZXMpIHtcbiAgICAgICAgICAgIHRoaXMuYXBwbHlDaGFuZ2VzKGNoYW5nZXMpO1xuICAgICAgICAgIH1cbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICB0aGlzLmFwcGx5Q2hhbmdlcyhjaGFuZ2VzKTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiBBcHBseSBjaGFuZ2VzIGRldGVjdGVkIGJ5IGRpZmZlclxuICAgKiBAcGFyYW0gY2hhbmdlcyBjaGFuZ2VzXG4gICAqL1xuICBwcml2YXRlIGFwcGx5Q2hhbmdlcyhjaGFuZ2VzOiBJdGVyYWJsZUNoYW5nZXM8VD4pOiB2b2lkIHtcbiAgICBjb25zdCBpdGVtRGF0YUxpc3RUb1JlbmRlcjogQXJyYXk8TGF6eUZvckl0ZW08VD4+ID0gW107XG4gICAgY2hhbmdlcy5mb3JFYWNoT3BlcmF0aW9uKFxuICAgICAgKGl0ZW06IEl0ZXJhYmxlQ2hhbmdlUmVjb3JkPFQ+LCBhZGp1c3RlZFByZXZpb3VzSW5kZXg6IG51bWJlciB8IG51bGwsIGN1cnJlbnRJbmRleDogbnVtYmVyIHwgbnVsbCkgPT4ge1xuICAgICAgICBjb25zdCBpdGVtVG9QdXNoOiBMYXp5Rm9ySXRlbTxUPiA9IHtcbiAgICAgICAgICBpdGVtOiB7IC4uLml0ZW0gfSxcbiAgICAgICAgICBhZGp1c3RlZFByZXZpb3VzSW5kZXgsXG4gICAgICAgICAgY3VycmVudEluZGV4LFxuICAgICAgICB9O1xuICAgICAgICBpdGVtRGF0YUxpc3RUb1JlbmRlci5wdXNoKGl0ZW1Ub1B1c2gpO1xuICAgICAgfSxcbiAgICApO1xuXG4gICAgdGhpcy5wZXJmb3JtTGF6eVJlbmRlcihpdGVtRGF0YUxpc3RUb1JlbmRlciwgY2hhbmdlcyk7XG4gIH1cblxuICAvKipcbiAgICogUGVyZm9ybSBsYXp5IHJlbmRlcmluZ1xuICAgKiBAcGFyYW0gaXRlbURhdGFMaXN0VG9SZW5kZXIgbGlzdCBvZiBpdGVtcyB0byByZW5kZXJcbiAgICogQHBhcmFtIGNoYW5nZXMgY2hhbmdlc1xuICAgKi9cbiAgcHJpdmF0ZSBwZXJmb3JtTGF6eVJlbmRlcihpdGVtRGF0YUxpc3RUb1JlbmRlcjogQXJyYXk8TGF6eUZvckl0ZW08VD4+LCBjaGFuZ2VzOiBJdGVyYWJsZUNoYW5nZXM8VD4pOiB2b2lkIHtcbiAgICB0aGlzLnVwZGF0ZUxhenlGb3JTdGF0ZShMYXp5Rm9yU3RhdGUucmVuZGVyaW5nKTtcbiAgICB0aGlzLl9yZXJlbmRlclVuc3ViJC5uZXh0KCk7XG5cbiAgICBmcm9tKGl0ZW1EYXRhTGlzdFRvUmVuZGVyKVxuICAgICAgLnBpcGUoXG4gICAgICAgIGJ1ZmZlckNvdW50KHRoaXMuX2l0ZW1zUGVyRnJhbWUpLFxuICAgICAgICBjb25jYXRNYXAoKGl0ZW1MaXN0KSA9PiBvZihpdGVtTGlzdCkucGlwZShkZWxheVdoZW4oKCkgPT4gYW5pbWF0aW9uRnJhbWVzKCkpKSksXG4gICAgICAgIHRhcCgoaXRlbUxpc3Q6IEFycmF5PExhenlGb3JJdGVtPFQ+PikgPT4ge1xuICAgICAgICAgIGZvciAobGV0IGk6IG51bWJlciA9IDA7IGkgPCBpdGVtTGlzdC5sZW5ndGg7IGkrKykge1xuICAgICAgICAgICAgY29uc3QgZGF0YTogTGF6eUZvckl0ZW08VD4gPSBpdGVtTGlzdFtpXTtcblxuICAgICAgICAgICAgaWYgKGRhdGEuaXRlbS5wcmV2aW91c0luZGV4ID09PSBudWxsKSB7XG4gICAgICAgICAgICAgIHRoaXMuX3ZpZXdDb250YWluZXIuY3JlYXRlRW1iZWRkZWRWaWV3KFxuICAgICAgICAgICAgICAgIHRoaXMuX3RlbXBsYXRlLFxuICAgICAgICAgICAgICAgIG5ldyBMYXp5Rm9yQ29udGV4dE1vZGVsPFQsIFU+KGRhdGEuaXRlbS5pdGVtLCB0aGlzLl9sYXp5Rm9yISwgLTEsIC0xKSxcbiAgICAgICAgICAgICAgICBkYXRhLmN1cnJlbnRJbmRleCA9PT0gbnVsbCA/IHVuZGVmaW5lZCA6IGRhdGEuY3VycmVudEluZGV4LFxuICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgfSBlbHNlIGlmIChkYXRhLmN1cnJlbnRJbmRleCA9PT0gbnVsbCkge1xuICAgICAgICAgICAgICB0aGlzLl92aWV3Q29udGFpbmVyLnJlbW92ZShkYXRhLmFkanVzdGVkUHJldmlvdXNJbmRleCA9PT0gbnVsbCA/IHVuZGVmaW5lZCA6IGRhdGEuYWRqdXN0ZWRQcmV2aW91c0luZGV4KTtcbiAgICAgICAgICAgIH0gZWxzZSBpZiAoZGF0YS5hZGp1c3RlZFByZXZpb3VzSW5kZXggIT09IG51bGwpIHtcbiAgICAgICAgICAgICAgY29uc3QgdmlldzogVmlld1JlZiB8IG51bGwgPSB0aGlzLl92aWV3Q29udGFpbmVyLmdldChkYXRhLmFkanVzdGVkUHJldmlvdXNJbmRleCkhO1xuICAgICAgICAgICAgICB0aGlzLl92aWV3Q29udGFpbmVyLm1vdmUodmlldywgZGF0YS5jdXJyZW50SW5kZXgpO1xuICAgICAgICAgICAgICB0aGlzLmFwcGx5Vmlld0NoYW5nZSh2aWV3IGFzIEVtYmVkZGVkVmlld1JlZjxMYXp5Rm9yQ29udGV4dE1vZGVsPFQsIFU+PiwgZGF0YS5pdGVtKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9XG5cbiAgICAgICAgICB0aGlzLnVwZGF0ZVZpZXdDb250ZXh0KCk7XG5cbiAgICAgICAgICB0aGlzLl9jZHIubWFya0ZvckNoZWNrKCk7XG4gICAgICAgIH0pLFxuICAgICAgICAvKiogVXNpbmcgdGFrZSB3ZSBhdXRvbWF0aWNhbGx5IHVuc3Vic2NyaWJlIGZyb20gdGhlIHN0cmVhbSB3aGVuIHJlbmRlcmluZyBpcyBjb21wbGV0ZSAqL1xuICAgICAgICB0YWtlKE1hdGguY2VpbChpdGVtRGF0YUxpc3RUb1JlbmRlci5sZW5ndGggLyB0aGlzLl9pdGVtc1BlckZyYW1lKSksXG4gICAgICAgIHRha2VVbnRpbCh0aGlzLl9yZXJlbmRlclVuc3ViJCksXG4gICAgICAgIHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLl9kZXN0cm95UmVmJCksXG4gICAgICAgIGZpbmFsaXplKCgpID0+IHtcbiAgICAgICAgICBjaGFuZ2VzLmZvckVhY2hJZGVudGl0eUNoYW5nZSgocmVjb3JkOiBhbnkpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IHZpZXdSZWY6IEVtYmVkZGVkVmlld1JlZjxMYXp5Rm9yQ29udGV4dE1vZGVsPFQsIFU+PiA9IDxFbWJlZGRlZFZpZXdSZWY8TGF6eUZvckNvbnRleHRNb2RlbDxULCBVPj4+KFxuICAgICAgICAgICAgICB0aGlzLl92aWV3Q29udGFpbmVyLmdldChyZWNvcmQuY3VycmVudEluZGV4KVxuICAgICAgICAgICAgKTtcbiAgICAgICAgICAgIHRoaXMuYXBwbHlWaWV3Q2hhbmdlKHZpZXdSZWYsIHJlY29yZCk7XG4gICAgICAgICAgfSk7XG4gICAgICAgICAgdGhpcy51cGRhdGVMYXp5Rm9yU3RhdGUoTGF6eUZvclN0YXRlLmlkbGUpO1xuICAgICAgICB9KSxcbiAgICAgIClcbiAgICAgIC5zdWJzY3JpYmUoKTtcbiAgfVxuXG4gIC8qKiBVcGRhdGUgY29udGV4dCAod2l0aG91dCBpbXBsaWNpdCQpIGZvciBlbGVtZW50cyBpbnNpZGUgdmlldyAqL1xuICBwcml2YXRlIHVwZGF0ZVZpZXdDb250ZXh0KCk6IHZvaWQge1xuICAgIGZvciAobGV0IGk6IG51bWJlciA9IDAsIGlsZW46IG51bWJlciA9IHRoaXMuX3ZpZXdDb250YWluZXIubGVuZ3RoOyBpIDwgaWxlbjsgaSsrKSB7XG4gICAgICBjb25zdCB2aWV3UmVmOiBFbWJlZGRlZFZpZXdSZWY8TGF6eUZvckNvbnRleHRNb2RlbDxULCBVPj4gPSA8RW1iZWRkZWRWaWV3UmVmPExhenlGb3JDb250ZXh0TW9kZWw8VCwgVT4+PihcbiAgICAgICAgdGhpcy5fdmlld0NvbnRhaW5lci5nZXQoaSlcbiAgICAgICk7XG4gICAgICBjb25zdCBjb250ZXh0OiBMYXp5Rm9yQ29udGV4dE1vZGVsPFQsIFU+ID0gdmlld1JlZi5jb250ZXh0O1xuICAgICAgY29udGV4dC5pbmRleCA9IGk7XG4gICAgICBjb250ZXh0LmNvdW50ID0gaWxlbjtcbiAgICAgIGNvbnRleHQubGF6eUZvciA9IHRoaXMuX2xhenlGb3IhO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiBBcHBseSBpbXBsaWNpdCQgY29udGV4dFxuICAgKiBAcGFyYW0gdmlldyB2aWV3XG4gICAqIEBwYXJhbSByZWNvcmQgZGF0YVxuICAgKi9cbiAgcHJpdmF0ZSBhcHBseVZpZXdDaGFuZ2UodmlldzogRW1iZWRkZWRWaWV3UmVmPExhenlGb3JDb250ZXh0TW9kZWw8VD4+LCByZWNvcmQ6IEl0ZXJhYmxlQ2hhbmdlUmVjb3JkPFQ+KTogdm9pZCB7XG4gICAgdmlldy5jb250ZXh0LiRpbXBsaWNpdCA9IHJlY29yZC5pdGVtO1xuICB9XG5cbiAgLyoqXG4gICAqIFVwZGF0ZSBkaXJlY3RpdmUgc3RhdGVcbiAgICogQHBhcmFtIHN0YXRlVG9TZXQgc3RhdGUgdG8gc2V0XG4gICAqL1xuICBwcml2YXRlIHVwZGF0ZUxhenlGb3JTdGF0ZShzdGF0ZVRvU2V0OiBMYXp5Rm9yU3RhdGUpOiB2b2lkIHtcbiAgICB0aGlzLl9sYXp5Rm9yU3RhdGUgPSBzdGF0ZVRvU2V0O1xuICB9XG59XG4iXX0=

package/fesm2022/ngx-vflow.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, NgZone, viewChild, Component, ChangeDetectionStrategy, output, HostListener, Injector, runInInjectionContext, contentChild, Input, forwardRef } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, NgZone, viewChild, Component, ChangeDetectionStrategy, output, HostListener, Injector, runInInjectionContext, isDevMode, ViewContainerRef, IterableDiffers, ChangeDetectorRef, Input, contentChild, forwardRef } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
-import { switchMap, merge, fromEvent, tap, Subject, Observable, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, animationFrameScheduler, share, startWith, of } from 'rxjs';
+import { switchMap, merge, fromEvent, tap, Subject, Observable, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, animationFrameScheduler, share, startWith, from, bufferCount, concatMap, of, delayWhen, animationFrames, take, takeUntil, finalize } from 'rxjs';
 import { toObservable, takeUntilDestroyed, outputFromObservable, toSignal } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { __decorate } from 'tslib';
@@ -2269,14 +2269,14 @@ class EdgeComponent {
         this.connectionController?.startReconnection(handle, this.model());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeComponent, isStandalone: true, selector: "g[edge]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeTemplate: { classPropertyName: "edgeTemplate", publicName: "edgeTemplate", isSignal: true, isRequired: false, transformFunction: null }, edgeLabelHtmlTemplate: { classPropertyName: "edgeLabelHtmlTemplate", publicName: "edgeLabelHtmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isReconnecting() ? \"hidden\" : \"visible\"" }, classAttribute: "selectable" }, ngImport: i0, template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerStartUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (pointerStart)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable === true || model().reconnectable === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable === true || model().reconnectable === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: ["model", "edgeModel", "point", "htmlTemplate"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeComponent, isStandalone: true, selector: "g[edge]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeTemplate: { classPropertyName: "edgeTemplate", publicName: "edgeTemplate", isSignal: true, isRequired: false, transformFunction: null }, edgeLabelHtmlTemplate: { classPropertyName: "edgeLabelHtmlTemplate", publicName: "edgeLabelHtmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isReconnecting() ? \"hidden\" : \"visible\"" }, classAttribute: "selectable" }, ngImport: i0, template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (pointerStart)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable === true || model().reconnectable === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable === true || model().reconnectable === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: ["model", "edgeModel", "point", "htmlTemplate"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'g[edge]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'selectable',
                         '[style.visibility]': 'isReconnecting() ? "hidden" : "visible"',
-                    }, imports: [NgTemplateOutlet, EdgeLabelComponent, PointerDirective], template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerStartUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (pointerStart)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable === true || model().reconnectable === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable === true || model().reconnectable === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"] }]
+                    }, imports: [NgTemplateOutlet, EdgeLabelComponent, PointerDirective], template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (pointerStart)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable === true || model().reconnectable === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable === true || model().reconnectable === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"] }]
         }] });
 
 class HandleService {
@@ -3232,6 +3232,245 @@ function getSpacePoints(point, groups) {
     return result;
 }
 
+/** Enum with lazy render directive state */
+var LazyForState;
+(function (LazyForState) {
+    /** Directive is in idle state */
+    LazyForState["idle"] = "idle";
+    /** Directive is rendering */
+    LazyForState["rendering"] = "rendering";
+})(LazyForState || (LazyForState = {}));
+/**
+ * Context for an element in lazyFor
+ */
+class LazyForContextModel {
+    /** Whether the element is first */
+    get first() {
+        return this.index === 0;
+    }
+    /** Whether the element is last */
+    get last() {
+        return this.index === this.count - 1;
+    }
+    /** Whether the element is even */
+    get even() {
+        return this.index % 2 === 0;
+    }
+    /** Whether the element is odd */
+    get odd() {
+        return !this.even;
+    }
+    constructor($implicit, lazyFor, index, count) {
+        this.$implicit = $implicit;
+        this.lazyFor = lazyFor;
+        this.index = index;
+        this.count = count;
+    }
+}
+class LazyForDirective {
+    /**
+     * Asserts the correct type of the context for the template that `lazyFor` will render.
+     *
+     * The presence of this method is a signal to the Ivy template type-check compiler that the
+     * `lazyFor` structural directive renders its template with a specific context type.
+     */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    //#region INPUTS
+    /** Setter for the array to be rendered by the directive */
+    set lazyForOf(lazyFor) {
+        this._lazyFor = lazyFor;
+        this._lazyForDirty = true;
+    }
+    /**
+     * Input - setter for TrackBy function
+     * @description is required
+     */
+    set lazyForTrackBy(fn) {
+        if (isDevMode() && fn !== null && typeof fn !== 'function') {
+            console.warn(`trackBy must be a function, but received ${JSON.stringify(fn)}. ` +
+                `See https://angular.io/api/common/NgForOf#change-propagation for more information.`);
+        }
+        this._trackByFn = fn;
+    }
+    /**
+     * Setter for the number of items that will be rendered per frame
+     * @param value number of items that will be rendered per frame
+     */
+    set lazyForItemsPerFrame(value) {
+        if (value <= 0) {
+            if (isDevMode()) {
+                console.warn('Items per frame parameter cannot be lower than 0! Input value was ignored');
+            }
+            return;
+        }
+        this._itemsPerFrame = value;
+    }
+    /** Setter for array item template */
+    set lazyForTemplate(value) {
+        if (value) {
+            this._template = value;
+        }
+    }
+    /** Getter for TrackBy function */
+    get lazyForTrackBy() {
+        return this._trackByFn;
+    }
+    //#endregion
+    constructor() {
+        this._template = inject(TemplateRef);
+        this._viewContainer = inject(ViewContainerRef);
+        this._differs = inject(IterableDiffers);
+        this._cdr = inject(ChangeDetectorRef);
+        this._destroyRef$ = inject(DestroyRef);
+        //#region PROPERTIES
+        /** Array for rendering */
+        this._lazyFor = null;
+        /** lazyFor initialization flag */
+        this._lazyForDirty = true;
+        /** Differ for tracking changes in input array */
+        this._differ = null;
+        /** Number of items to be rendered per frame */
+        this._itemsPerFrame = 5;
+        /** Directive state */
+        this._lazyForState = LazyForState.idle;
+        //#endregion
+        //#region RXJS
+        /** Private subject for stopping dynamic render process */
+        this._rerenderUnsub$ = new Subject();
+        this._destroyRef$.onDestroy(() => this._viewContainer.clear());
+    }
+    /** ngDoCheck hook */
+    ngDoCheck() {
+        if (this._lazyForDirty) {
+            this._lazyForDirty = false;
+            const value = this._lazyFor;
+            if (!this._differ && value) {
+                this._differ = this._differs.find(value).create(this.lazyForTrackBy);
+            }
+        }
+        if (this._differ) {
+            let changes = this._differ.diff(this._lazyFor);
+            if (changes) {
+                if (this._lazyForState === LazyForState.rendering) {
+                    /**
+                     * If the array changed during an active render process
+                     * Need to clear container of all views
+                     * And restart rendering from the beginning.
+                     */
+                    this._rerenderUnsub$.next();
+                    changes = this._differ.diff([]);
+                    changes = this._differ.diff(this._lazyFor);
+                    this._viewContainer.clear();
+                    if (changes) {
+                        this.applyChanges(changes);
+                    }
+                }
+                else {
+                    this.applyChanges(changes);
+                }
+            }
+        }
+    }
+    /**
+     * Apply changes detected by differ
+     * @param changes changes
+     */
+    applyChanges(changes) {
+        const itemDataListToRender = [];
+        changes.forEachOperation((item, adjustedPreviousIndex, currentIndex) => {
+            const itemToPush = {
+                item: { ...item },
+                adjustedPreviousIndex,
+                currentIndex,
+            };
+            itemDataListToRender.push(itemToPush);
+        });
+        this.performLazyRender(itemDataListToRender, changes);
+    }
+    /**
+     * Perform lazy rendering
+     * @param itemDataListToRender list of items to render
+     * @param changes changes
+     */
+    performLazyRender(itemDataListToRender, changes) {
+        this.updateLazyForState(LazyForState.rendering);
+        this._rerenderUnsub$.next();
+        from(itemDataListToRender)
+            .pipe(bufferCount(this._itemsPerFrame), concatMap((itemList) => of(itemList).pipe(delayWhen(() => animationFrames()))), tap((itemList) => {
+            for (let i = 0; i < itemList.length; i++) {
+                const data = itemList[i];
+                if (data.item.previousIndex === null) {
+                    this._viewContainer.createEmbeddedView(this._template, new LazyForContextModel(data.item.item, this._lazyFor, -1, -1), data.currentIndex === null ? undefined : data.currentIndex);
+                }
+                else if (data.currentIndex === null) {
+                    this._viewContainer.remove(data.adjustedPreviousIndex === null ? undefined : data.adjustedPreviousIndex);
+                }
+                else if (data.adjustedPreviousIndex !== null) {
+                    const view = this._viewContainer.get(data.adjustedPreviousIndex);
+                    this._viewContainer.move(view, data.currentIndex);
+                    this.applyViewChange(view, data.item);
+                }
+            }
+            this.updateViewContext();
+            this._cdr.markForCheck();
+        }), 
+        /** Using take we automatically unsubscribe from the stream when rendering is complete */
+        take(Math.ceil(itemDataListToRender.length / this._itemsPerFrame)), takeUntil(this._rerenderUnsub$), takeUntilDestroyed(this._destroyRef$), finalize(() => {
+            changes.forEachIdentityChange((record) => {
+                const viewRef = (this._viewContainer.get(record.currentIndex));
+                this.applyViewChange(viewRef, record);
+            });
+            this.updateLazyForState(LazyForState.idle);
+        }))
+            .subscribe();
+    }
+    /** Update context (without implicit$) for elements inside view */
+    updateViewContext() {
+        for (let i = 0, ilen = this._viewContainer.length; i < ilen; i++) {
+            const viewRef = (this._viewContainer.get(i));
+            const context = viewRef.context;
+            context.index = i;
+            context.count = ilen;
+            context.lazyFor = this._lazyFor;
+        }
+    }
+    /**
+     * Apply implicit$ context
+     * @param view view
+     * @param record data
+     */
+    applyViewChange(view, record) {
+        view.context.$implicit = record.item;
+    }
+    /**
+     * Update directive state
+     * @param stateToSet state to set
+     */
+    updateLazyForState(stateToSet) {
+        this._lazyForState = stateToSet;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: LazyForDirective, isStandalone: true, selector: "[lazyFor][lazyForOf]", inputs: { lazyForOf: "lazyForOf", lazyForTrackBy: "lazyForTrackBy", lazyForItemsPerFrame: "lazyForItemsPerFrame", lazyForTemplate: "lazyForTemplate" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyForDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lazyFor][lazyForOf]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { lazyForOf: [{
+                type: Input
+            }], lazyForTrackBy: [{
+                type: Input,
+                args: [{ required: true }]
+            }], lazyForItemsPerFrame: [{
+                type: Input
+            }], lazyForTemplate: [{
+                type: Input
+            }] } });
+
 const changesControllerHostDirective = {
     directive: ChangesControllerDirective,
     outputs: [
@@ -3546,7 +3785,7 @@ class VflowComponent {
             ComponentEventBusService,
             KeyboardService,
             OverlaysService,
-        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "nodeSvgTemplateDirective", first: true, predicate: NodeSvgTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["model", "nodeTemplate", "nodeSvgTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "nodeSvgTemplateDirective", first: true, predicate: NodeSvgTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      <svg:g\n        *lazyFor=\"let model of groups(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n\n      <!-- Edges  -->\n      <svg:g\n        *lazyFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n      <!-- Nodes -->\n      <svg:g\n        *lazyFor=\"let model of nonGroups(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n        [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      <svg:g\n        *lazyFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n      <!-- Nodes -->\n      <svg:g\n        *lazyFor=\"let model of nodeModels(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n        [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["model", "nodeTemplate", "nodeSvgTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LazyForDirective, selector: "[lazyFor][lazyForOf]", inputs: ["lazyForOf", "lazyForTrackBy", "lazyForItemsPerFrame", "lazyForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -3577,7 +3816,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NodeComponent,
                         EdgeComponent,
                         NgTemplateOutlet,
-                    ], template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      @for (model of edgeModels(); track trackEdges($index, model)) {\n        <svg:g\n          edge\n          [model]=\"model\"\n          [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n          [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n      }\n      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [model]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\" />\n      }\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
+                        LazyForDirective,
+                    ], template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n  <defs flowDefs [markers]=\"markers()\" />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      <svg:g\n        *lazyFor=\"let model of groups(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n\n      <!-- Edges  -->\n      <svg:g\n        *lazyFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n      <!-- Nodes -->\n      <svg:g\n        *lazyFor=\"let model of nonGroups(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n        [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n    }\n\n    @if (!optimization().detachedGroupsLayer) {\n      <!-- Edges  -->\n      <svg:g\n        *lazyFor=\"let model of edgeModels(); trackBy: trackEdges\"\n        edge\n        [model]=\"model\"\n        [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n        [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n      <!-- Nodes -->\n      <svg:g\n        *lazyFor=\"let model of nodeModels(); trackBy: trackNodes\"\n        node\n        [model]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n        [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\" />\n    }\n  </svg:g>\n\n  <!-- Minimap -->\n  @if (minimap(); as minimap) {\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  }\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
         }], propDecorators: { view: [{
                 type: Input
             }], minZoom: [{