ngx-vflow 0.15.0 → 1.0.0

package/fesm2022/ngx-vflow.mjs

@@ -1,13 +1,12 @@
-import * as i1 from '@angular/common';
-import { NgIf, NgFor, NgTemplateOutlet, NgComponentOutlet, KeyValuePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, EventEmitter, Output, DestroyRef, Input, runInInjectionContext, Component, Injector, ChangeDetectionStrategy, HostListener, ViewChild, NgZone, ContentChild, NgModule } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, output, DestroyRef, EventEmitter, OutputEmitterRef, input, viewChild, Component, ChangeDetectionStrategy, Injector, runInInjectionContext, HostListener, NgZone, contentChild, Input, forwardRef } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
-import { switchMap, merge, fromEvent, tap, Subject, observeOn, animationFrameScheduler, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, share, Observable, startWith, of } from 'rxjs';
-import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { switchMap, merge, fromEvent, tap, Subject, Observable, observeOn, animationFrameScheduler, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, share, startWith, of } from 'rxjs';
+import { toObservable, takeUntilDestroyed, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
 import { __decorate } from 'tslib';
+import { NgTemplateOutlet, NgComponentOutlet, KeyValuePipe } from '@angular/common';
 
 function getNodesBounds(nodes) {
     if (nodes.length === 0) {
@@ -129,10 +128,10 @@ class FlowEntitiesService {
     getDetachedEdges() {
         return this.edges().filter(e => e.detached());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowEntitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowEntitiesService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowEntitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowEntitiesService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowEntitiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowEntitiesService, decorators: [{
             type: Injectable
         }] });
 
@@ -154,12 +153,6 @@ function clamp(value, min = 0, max = 1) {
 class FlowSettingsService {
     constructor() {
         this.entitiesSelectable = signal(true);
-        /**
-         * Global setting with handle positions. Nodes derive this value
-         *
-         * @deprecated
-         */
-        this.handlePositions = signal({ source: 'right', target: 'left' });
         /**
          * @see {VflowComponent.view}
          */
@@ -176,10 +169,10 @@ class FlowSettingsService {
         this.maxZoom = signal(3);
         this.background = signal({ type: 'solid', color: '#fff' });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSettingsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSettingsService, decorators: [{
             type: Injectable
         }] });
 
@@ -225,10 +218,10 @@ class ViewportService {
                 .map(nodeId => this.entitiesService.nodes().find(({ node }) => node.id === nodeId))
                 .filter((node) => !!node);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewportService, decorators: [{
             type: Injectable
         }] });
 
@@ -240,13 +233,14 @@ class RootSvgReferenceDirective {
     constructor() {
         this.element = inject(ElementRef).nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgReferenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootSvgReferenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: RootSvgReferenceDirective, isStandalone: true, selector: "svg[rootSvgRef]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgReferenceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootSvgReferenceDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'svg[rootSvgRef]'
+                    standalone: true,
+                    selector: 'svg[rootSvgRef]',
                 }]
         }] });
 
@@ -307,12 +301,12 @@ class KeyboardService {
     isActiveAction(action) {
         return this.actionsActive[action];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyboardService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class SelectionService {
     constructor() {
@@ -353,10 +347,10 @@ class SelectionService {
             entity.selected.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectionService, decorators: [{
             type: Injectable
         }] });
 
@@ -437,12 +431,15 @@ class MapContextDirective {
             .call(this.zoomBehavior)
             .on('dblclick.zoom', null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MapContextDirective, selector: "g[mapContext]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: MapContextDirective, isStandalone: true, selector: "g[mapContext]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapContextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapContextDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'g[mapContext]' }]
+            args: [{
+                    standalone: true,
+                    selector: 'g[mapContext]',
+                }]
         }] });
 const mapTransformToViewportState = (transform) => ({ zoom: transform.k, x: transform.x, y: transform.y });
 const evTarget = (anyEvent) => {
@@ -530,10 +527,10 @@ class DraggableService {
             // we only can move current node if it's not selected
             : [model];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableService, decorators: [{
             type: Injectable
         }] });
 function moveNode(model, point) {
@@ -552,67 +549,85 @@ class EdgeTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EdgeTemplateDirective, selector: "ng-template[edge]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EdgeTemplateDirective, isStandalone: true, selector: "ng-template[edge]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTemplateDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[edge]' }]
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[edge]',
+                }]
         }] });
 class ConnectionTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ConnectionTemplateDirective, selector: "ng-template[connection]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionTemplateDirective, isStandalone: true, selector: "ng-template[connection]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectionTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionTemplateDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[connection]' }]
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[connection]'
+                }]
         }] });
 class EdgeLabelHtmlTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeLabelHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EdgeLabelHtmlTemplateDirective, selector: "ng-template[edgeLabelHtml]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EdgeLabelHtmlTemplateDirective, isStandalone: true, selector: "ng-template[edgeLabelHtml]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeLabelHtmlTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelHtmlTemplateDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[edgeLabelHtml]' }]
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[edgeLabelHtml]'
+                }]
         }] });
 class NodeHtmlTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NodeHtmlTemplateDirective, selector: "ng-template[nodeHtml]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeHtmlTemplateDirective, isStandalone: true, selector: "ng-template[nodeHtml]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeHtmlTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHtmlTemplateDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[nodeHtml]' }]
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[nodeHtml]'
+                }]
         }] });
 class GroupNodeTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupNodeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupNodeTemplateDirective, selector: "ng-template[groupNode]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupNodeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: GroupNodeTemplateDirective, isStandalone: true, selector: "ng-template[groupNode]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupNodeTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupNodeTemplateDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[groupNode]' }]
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[groupNode]'
+                }]
         }] });
 class HandleTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HandleTemplateDirective, selector: "ng-template[handle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: HandleTemplateDirective, isStandalone: true, selector: "ng-template[handle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleTemplateDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[handle]' }]
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[handle]'
+                }]
         }] });
 
 function addNodesToEdges(nodes, edges) {
@@ -642,10 +657,10 @@ class FlowStatusService {
     setConnectionEndStatus(source, target, sourceHandle, targetHandle) {
         this.status.set({ state: 'connection-end', payload: { source, target, sourceHandle, targetHandle } });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowStatusService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowStatusService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowStatusService, decorators: [{
             type: Injectable
         }] });
 /**
@@ -703,7 +718,7 @@ class ConnectionControllerDirective {
          * Also it's important to note, that this event only fires when connection is valid by validator function in `ConnectionSettings`,
          * by default without passing the validator every connection concidered valid.
          */
-        this.onConnect = new EventEmitter();
+        this.onConnect = output();
         this.statusService = inject(FlowStatusService);
         this.flowEntitiesService = inject(FlowEntitiesService);
         this.connectEffect = effect(() => {
@@ -718,7 +733,7 @@ class ConnectionControllerDirective {
                         source: status.payload.source,
                         sourceHandle: status.payload.sourceHandle,
                         target: status.payload.target,
-                        targetHandle: status.payload.targetHandle
+                        targetHandle: status.payload.targetHandle,
                     });
                     source = adjusted.source;
                     target = adjusted.target;
@@ -731,8 +746,10 @@ class ConnectionControllerDirective {
                 const targetHandleId = targetHandle.rawHandle.id;
                 const connectionModel = this.flowEntitiesService.connection();
                 const connection = {
-                    source: sourceId, target: targetId,
-                    sourceHandle: sourceHandleId, targetHandle: targetHandleId
+                    source: sourceId,
+                    target: targetId,
+                    sourceHandle: sourceHandleId,
+                    targetHandle: targetHandleId,
                 };
                 if (connectionModel.validator(connection)) {
                     this.onConnect.emit(connection);
@@ -757,7 +774,7 @@ class ConnectionControllerDirective {
                     source: status.payload.source,
                     sourceHandle: status.payload.sourceHandle,
                     target: handle.parentNode,
-                    targetHandle: handle
+                    targetHandle: handle,
                 });
                 source = adjusted.source;
                 target = adjusted.target;
@@ -768,7 +785,7 @@ class ConnectionControllerDirective {
                 source: source.node.id,
                 target: target.node.id,
                 sourceHandle: sourceHandle.rawHandle.id,
-                targetHandle: targetHandle.rawHandle.id
+                targetHandle: targetHandle.rawHandle.id,
             });
             // TODO: check how react flow handles highlight of handle
             // if direction changes
@@ -800,18 +817,16 @@ class ConnectionControllerDirective {
             () => this.statusService.setIdleStatus());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectionControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ConnectionControllerDirective, isStandalone: true, selector: "[connectionController]", outputs: { onConnect: "onConnect" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionControllerDirective, isStandalone: true, selector: "[connectionController]", outputs: { onConnect: "onConnect" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectionControllerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[connectionController]',
-                    standalone: true
+                    standalone: true,
                 }]
-        }], propDecorators: { onConnect: [{
-                type: Output
-            }] } });
+        }] });
 
 class ComponentEventBusService {
     constructor() {
@@ -821,89 +836,120 @@ class ComponentEventBusService {
     pushEvent(event) {
         this._event$.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentEventBusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentEventBusService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentEventBusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentEventBusService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentEventBusService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Service to fix cyclic dependency between node and resizable component
+ */
+class NodeAccessorService {
+    constructor() {
+        this.model = signal(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeAccessorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeAccessorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentEventBusService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeAccessorService, decorators: [{
             type: Injectable
         }] });
 
 class CustomNodeBaseComponent {
     constructor() {
         this.eventBus = inject(ComponentEventBusService);
+        this.nodeService = inject(NodeAccessorService);
         this.destroyRef = inject(DestroyRef);
         /**
          * Signal with selected state of node
          */
-        this.selected = signal(false);
+        this.selected = this.nodeService.model().selected;
         this.data = signal(undefined);
     }
-    set _selected(value) {
-        this.selected.set(value);
-    }
     ngOnInit() {
-        this.trackEvents()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe();
+        this.trackEvents().pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
     }
     trackEvents() {
         const props = Object.getOwnPropertyNames(this);
-        const emitters = new Map();
+        const emittersOrRefs = new Map();
         for (const prop of props) {
             const field = this[prop];
             if (field instanceof EventEmitter) {
-                emitters.set(field, prop);
+                emittersOrRefs.set(field, prop);
+            }
+            if (field instanceof OutputEmitterRef) {
+                emittersOrRefs.set(outputRefToObservable(field), prop);
             }
         }
-        return merge(...Array.from(emitters.keys()).map(emitter => emitter.pipe(tap((event) => {
+        return merge(...Array.from(emittersOrRefs.keys()).map((emitter) => emitter.pipe(tap((event) => {
             this.eventBus.pushEvent({
-                nodeId: this.node.id,
-                eventName: emitters.get(emitter),
-                eventPayload: event
+                nodeId: this.nodeService.model()?.node.id ?? '',
+                eventName: emittersOrRefs.get(emitter),
+                eventPayload: event,
             });
         }))));
     }
-    ;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomNodeBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomNodeBaseComponent, inputs: { _selected: "_selected" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomNodeBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: CustomNodeBaseComponent, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomNodeBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomNodeBaseComponent, decorators: [{
             type: Directive
-        }], propDecorators: { _selected: [{
-                type: Input
-            }] } });
+        }] });
+function outputRefToObservable(ref) {
+    return new Observable((subscriber) => {
+        const subscription = ref.subscribe((value) => {
+            subscriber.next(value);
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    });
+}
 
 class CustomNodeComponent extends CustomNodeBaseComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Reference to node bound to this component
+         */
+        this.node = input.required();
+    }
     ngOnInit() {
-        if (this.node.data) {
-            this.data.set(this.node.data);
+        if (this.node().data) {
+            this.data.set(this.node().data);
         }
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomNodeComponent, inputs: { node: "node" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: CustomNodeComponent, inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomNodeComponent, decorators: [{
             type: Directive
-        }], propDecorators: { node: [{
-                type: Input
-            }] } });
+        }] });
 
 class CustomDynamicNodeComponent extends CustomNodeBaseComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Reference to node bound to this component
+         */
+        this.node = input.required();
+    }
     ngOnInit() {
-        if (this.node.data) {
-            this.data = this.node.data;
+        const data = this.node().data;
+        if (data) {
+            this.data = data;
         }
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomDynamicNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomDynamicNodeComponent, inputs: { node: "node" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDynamicNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: CustomDynamicNodeComponent, inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomDynamicNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDynamicNodeComponent, decorators: [{
             type: Directive
-        }], propDecorators: { node: [{
-                type: Input
-            }] } });
+        }] });
 
 function isStaticNode(node) {
     return typeof node.point !== 'function';
@@ -977,9 +1023,6 @@ class NodeModel {
             return { x, y };
         });
         this.pointTransform = computed(() => `translate(${this.globalPoint().x}, ${this.globalPoint().y})`);
-        // Now source and handle positions derived from parent flow
-        this.sourcePosition = computed(() => this.flowSettingsService.handlePositions().source);
-        this.targetPosition = computed(() => this.flowSettingsService.handlePositions().target);
         this.handles = signal([]);
         this.handles$ = toObservable(this.handles);
         this.draggable = signal(true);
@@ -992,12 +1035,9 @@ class NodeModel {
         // Default node specific thing
         this.text = this.createTextSignal();
         // Component node specific thing
-        this.componentTypeInputs = computed(() => {
-            return {
-                node: this.node,
-                _selected: this.selected()
-            };
-        });
+        this.componentTypeInputs = {
+            node: this.node,
+        };
         this.parent = computed(() => this.entitiesService.nodes().find(n => n.node.id === this.parentId()) ?? null);
         this.children = computed(() => this.entitiesService.nodes().filter(n => n.parentId() === this.node.id));
         this.color = signal(NodeModel.defaultColor);
@@ -1213,6 +1253,176 @@ function getPointOnBezier(sourcePoint, targetPoint, sourceControl, targetControl
     return getPointOnLineByRatio(getPointOnLineByRatio(fromSourceToFirstControl, fromFirstControlToSecond, ratio), getPointOnLineByRatio(fromFirstControlToSecond, fromSecondControlToTarget, ratio), ratio);
 }
 
+const handleDirections = {
+    left: { x: -1, y: 0 },
+    right: { x: 1, y: 0 },
+    top: { x: 0, y: -1 },
+    bottom: { x: 0, y: 1 },
+};
+function getEdgeCenter(source, target) {
+    const xOffset = Math.abs(target.x - source.x) / 2;
+    const centerX = target.x < source.x ? target.x + xOffset : target.x - xOffset;
+    const yOffset = Math.abs(target.y - source.y) / 2;
+    const centerY = target.y < source.y ? target.y + yOffset : target.y - yOffset;
+    return [centerX, centerY, xOffset, yOffset];
+}
+const getDirection = ({ source, sourcePosition = 'bottom', target, }) => {
+    if (sourcePosition === 'left' || sourcePosition === 'right') {
+        return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 };
+    }
+    return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 };
+};
+const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
+// ith this function we try to mimic a orthogonal edge routing behaviour
+// It's not as good as a real orthogonal edge routing but it's faster and good enough as a default for step and smooth step edges
+function getPoints({ source, sourcePosition = 'bottom', target, targetPosition = 'top', offset, }) {
+    const sourceDir = handleDirections[sourcePosition];
+    const targetDir = handleDirections[targetPosition];
+    const sourceGapped = { x: source.x + sourceDir.x * offset, y: source.y + sourceDir.y * offset };
+    const targetGapped = { x: target.x + targetDir.x * offset, y: target.y + targetDir.y * offset };
+    const dir = getDirection({
+        source: sourceGapped,
+        sourcePosition,
+        target: targetGapped,
+    });
+    const dirAccessor = dir.x !== 0 ? 'x' : 'y';
+    const currDir = dir[dirAccessor];
+    let points = [];
+    let centerX, centerY;
+    const sourceGapOffset = { x: 0, y: 0 };
+    const targetGapOffset = { x: 0, y: 0 };
+    const [defaultCenterX, defaultCenterY] = getEdgeCenter(source, target);
+    // opposite handle positions, default case
+    if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
+        centerX = defaultCenterX;
+        centerY = defaultCenterY;
+        //    --->
+        //    |
+        // >---
+        const verticalSplit = [
+            { x: centerX, y: sourceGapped.y },
+            { x: centerX, y: targetGapped.y },
+        ];
+        //    |
+        //  ---
+        //  |
+        const horizontalSplit = [
+            { x: sourceGapped.x, y: centerY },
+            { x: targetGapped.x, y: centerY },
+        ];
+        if (sourceDir[dirAccessor] === currDir) {
+            points = dirAccessor === 'x' ? verticalSplit : horizontalSplit;
+        }
+        else {
+            points = dirAccessor === 'x' ? horizontalSplit : verticalSplit;
+        }
+    }
+    else {
+        // sourceTarget means we take x from source and y from target, targetSource is the opposite
+        const sourceTarget = [{ x: sourceGapped.x, y: targetGapped.y }];
+        const targetSource = [{ x: targetGapped.x, y: sourceGapped.y }];
+        // this handles edges with same handle positions
+        if (dirAccessor === 'x') {
+            points = sourceDir.x === currDir ? targetSource : sourceTarget;
+        }
+        else {
+            points = sourceDir.y === currDir ? sourceTarget : targetSource;
+        }
+        if (sourcePosition === targetPosition) {
+            const diff = Math.abs(source[dirAccessor] - target[dirAccessor]);
+            // if an edge goes from right to right for example (sourcePosition === targetPosition) and the distance between source.x and target.x is less than the offset, the added point and the gapped source/target will overlap. This leads to a weird edge path. To avoid this we add a gapOffset to the source/target
+            if (diff <= offset) {
+                const gapOffset = Math.min(offset - 1, offset - diff);
+                if (sourceDir[dirAccessor] === currDir) {
+                    sourceGapOffset[dirAccessor] = (sourceGapped[dirAccessor] > source[dirAccessor] ? -1 : 1) * gapOffset;
+                }
+                else {
+                    targetGapOffset[dirAccessor] = (targetGapped[dirAccessor] > target[dirAccessor] ? -1 : 1) * gapOffset;
+                }
+            }
+        }
+        // these are conditions for handling mixed handle positions like Right -> Bottom for example
+        if (sourcePosition !== targetPosition) {
+            const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x';
+            const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite];
+            const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite];
+            const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite];
+            const flipSourceTarget = (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) ||
+                (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo)));
+            if (flipSourceTarget) {
+                points = dirAccessor === 'x' ? sourceTarget : targetSource;
+            }
+        }
+        const sourceGapPoint = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y };
+        const targetGapPoint = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y };
+        const maxXDistance = Math.max(Math.abs(sourceGapPoint.x - points[0].x), Math.abs(targetGapPoint.x - points[0].x));
+        const maxYDistance = Math.max(Math.abs(sourceGapPoint.y - points[0].y), Math.abs(targetGapPoint.y - points[0].y));
+        // we want to place the label on the longest segment of the edge
+        if (maxXDistance >= maxYDistance) {
+            centerX = (sourceGapPoint.x + targetGapPoint.x) / 2;
+            centerY = points[0].y;
+        }
+        else {
+            centerX = points[0].x;
+            centerY = (sourceGapPoint.y + targetGapPoint.y) / 2;
+        }
+    }
+    const pathPoints = [
+        source,
+        { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y },
+        ...points,
+        { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y },
+        target,
+    ];
+    return [pathPoints, centerX, centerY];
+}
+function getBend(a, b, c, size) {
+    const bendSize = Math.min(distance(a, b) / 2, distance(b, c) / 2, size);
+    const { x, y } = b;
+    // no bend
+    if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {
+        return `L${x} ${y}`;
+    }
+    // first segment is horizontal
+    if (a.y === y) {
+        const xDir = a.x < c.x ? -1 : 1;
+        const yDir = a.y < c.y ? 1 : -1;
+        return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`;
+    }
+    const xDir = a.x < c.x ? 1 : -1;
+    const yDir = a.y < c.y ? -1 : 1;
+    return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
+}
+function smoothStepPath(source, target, sourcePosition, targetPosition, borderRadius = 5) {
+    const [points, labelX, labelY] = getPoints({
+        source,
+        sourcePosition,
+        target,
+        targetPosition,
+        offset: 20
+    });
+    const path = points.reduce((res, p, i) => {
+        let segment = '';
+        if (i > 0 && i < points.length - 1) {
+            segment = getBend(points[i - 1], p, points[i + 1], borderRadius);
+        }
+        else {
+            segment = `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`;
+        }
+        res += segment;
+        return res;
+    }, '');
+    return {
+        path,
+        points: {
+            // TODO start and end points temporary unavailable for this path
+            start: { x: labelX, y: labelY },
+            center: { x: labelX, y: labelY },
+            end: { x: labelX, y: labelY },
+        }
+    };
+}
+
 class EdgeModel {
     constructor(edge) {
         this.edge = edge;
@@ -1282,6 +1492,10 @@ class EdgeModel {
                     return straightPath(source.pointAbsolute(), target.pointAbsolute(), this.usingPoints);
                 case 'bezier':
                     return bezierPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position, this.usingPoints);
+                case 'smooth-step':
+                    return smoothStepPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position);
+                case 'step':
+                    return smoothStepPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position, 0);
             }
         });
         this.edgeLabels = {};
@@ -1359,10 +1573,10 @@ class NodesChangeService {
         // you can't get valid list of detached edges
         observeOn(asyncScheduler, DELAY_FOR_SCHEDULER));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodesChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodesChangeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodesChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodesChangeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodesChangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodesChangeService, decorators: [{
             type: Injectable
         }] });
 
@@ -1403,10 +1617,10 @@ class EdgeChangesService {
         // right after [nodes] input change
         observeOn(asyncScheduler));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeChangesService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeChangesService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeChangesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeChangesService, decorators: [{
             type: Injectable
         }] });
 
@@ -1417,146 +1631,65 @@ class ChangesControllerDirective {
         /**
          * Watch nodes change
          */
-        this.onNodesChange = this.nodesChangeService.changes$;
-        this.onNodesChangePosition = this.nodeChangesOfType('position');
-        this.onNodesChangePositionSignle = this.singleChange(this.nodeChangesOfType('position'));
-        this.onNodesChangePositionMany = this.manyChanges(this.nodeChangesOfType('position'));
-        this.onNodesChangeSize = this.nodeChangesOfType('size');
-        this.onNodesChangeSizeSingle = this.singleChange(this.nodeChangesOfType('size'));
-        this.onNodesChangeSizeMany = this.manyChanges(this.nodeChangesOfType('size'));
-        this.onNodesChangeAdd = this.nodeChangesOfType('add');
-        this.onNodesChangeAddSingle = this.singleChange(this.nodeChangesOfType('add'));
-        this.onNodesChangeAddMany = this.manyChanges(this.nodeChangesOfType('add'));
-        this.onNodesChangeRemove = this.nodeChangesOfType('remove');
-        this.onNodesChangeRemoveSingle = this.singleChange(this.nodeChangesOfType('remove'));
-        this.onNodesChangeRemoveMany = this.manyChanges(this.nodeChangesOfType('remove'));
-        this.onNodesChangeSelect = this.nodeChangesOfType('select');
-        this.onNodesChangeSelectSingle = this.singleChange(this.nodeChangesOfType('select'));
-        this.onNodesChangeSelectMany = this.manyChanges(this.nodeChangesOfType('select'));
+        this.onNodesChange = outputFromObservable(this.nodesChangeService.changes$);
+        this.onNodesChangePosition = outputFromObservable(this.nodeChangesOfType('position'), { alias: 'onNodesChange.position' });
+        this.onNodesChangePositionSignle = outputFromObservable(this.singleChange(this.nodeChangesOfType('position')), { alias: 'onNodesChange.position.single' });
+        this.onNodesChangePositionMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('position')), { alias: 'onNodesChange.position.many' });
+        this.onNodesChangeSize = outputFromObservable(this.nodeChangesOfType('size'), { alias: 'onNodesChange.size' });
+        this.onNodesChangeSizeSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('size')), { alias: 'onNodesChange.size.single' });
+        this.onNodesChangeSizeMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('size')), { alias: 'onNodesChange.size.many' });
+        this.onNodesChangeAdd = outputFromObservable(this.nodeChangesOfType('add'), { alias: 'onNodesChange.add' });
+        this.onNodesChangeAddSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('add')), { alias: 'onNodesChange.add.single' });
+        this.onNodesChangeAddMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('add')), { alias: 'onNodesChange.add.many' });
+        this.onNodesChangeRemove = outputFromObservable(this.nodeChangesOfType('remove'), { alias: 'onNodesChange.remove' });
+        this.onNodesChangeRemoveSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('remove')), { alias: 'onNodesChange.remove.single' });
+        this.onNodesChangeRemoveMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('remove')), { alias: 'onNodesChange.remove.many' });
+        this.onNodesChangeSelect = outputFromObservable(this.nodeChangesOfType('select'), { alias: 'onNodesChange.select' });
+        this.onNodesChangeSelectSingle = outputFromObservable(this.singleChange(this.nodeChangesOfType('select')), { alias: 'onNodesChange.select.single' });
+        this.onNodesChangeSelectMany = outputFromObservable(this.manyChanges(this.nodeChangesOfType('select')), { alias: 'onNodesChange.select.many' });
         /**
          * Watch edges change
          */
-        this.onEdgesChange = this.edgesChangeService.changes$;
-        this.onNodesChangeDetached = this.edgeChangesOfType('detached');
-        this.onNodesChangeDetachedSingle = this.singleChange(this.edgeChangesOfType('detached'));
-        this.onNodesChangeDetachedMany = this.manyChanges(this.edgeChangesOfType('detached'));
-        this.onEdgesChangeAdd = this.edgeChangesOfType('add');
-        this.onEdgeChangeAddSingle = this.singleChange(this.edgeChangesOfType('add'));
-        this.onEdgeChangeAddMany = this.manyChanges(this.edgeChangesOfType('add'));
-        this.onEdgeChangeRemove = this.edgeChangesOfType('remove');
-        this.onEdgeChangeRemoveSingle = this.singleChange(this.edgeChangesOfType('remove'));
-        this.onEdgeChangeRemoveMany = this.manyChanges(this.edgeChangesOfType('remove'));
-        this.onEdgeChangeSelect = this.edgeChangesOfType('select');
-        this.onEdgeChangeSelectSingle = this.singleChange(this.edgeChangesOfType('select'));
-        this.onEdgeChangeSelectMany = this.manyChanges(this.edgeChangesOfType('select'));
+        this.onEdgesChange = outputFromObservable(this.edgesChangeService.changes$);
+        this.onNodesChangeDetached = outputFromObservable(this.edgeChangesOfType('detached'), { alias: 'onEdgesChange.detached' });
+        this.onNodesChangeDetachedSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('detached')), { alias: 'onEdgesChange.detached.single' });
+        this.onNodesChangeDetachedMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('detached')), { alias: 'onEdgesChange.detached.many' });
+        this.onEdgesChangeAdd = outputFromObservable(this.edgeChangesOfType('add'), { alias: 'onEdgesChange.add' });
+        this.onEdgeChangeAddSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('add')), { alias: 'onEdgesChange.add.single' });
+        this.onEdgeChangeAddMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('add')), { alias: 'onEdgesChange.add.many' });
+        this.onEdgeChangeRemove = outputFromObservable(this.edgeChangesOfType('remove'), { alias: 'onEdgesChange.remove' });
+        this.onEdgeChangeRemoveSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('remove')), { alias: 'onEdgesChange.remove.single' });
+        this.onEdgeChangeRemoveMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('remove')), { alias: 'onEdgesChange.remove.many' });
+        this.onEdgeChangeSelect = outputFromObservable(this.edgeChangesOfType('select'), { alias: 'onEdgesChange.select' });
+        this.onEdgeChangeSelectSingle = outputFromObservable(this.singleChange(this.edgeChangesOfType('select')), { alias: 'onEdgesChange.select.single' });
+        this.onEdgeChangeSelectMany = outputFromObservable(this.manyChanges(this.edgeChangesOfType('select')), { alias: 'onEdgesChange.select.many' });
     }
     nodeChangesOfType(type) {
-        return this.nodesChangeService.changes$.pipe(map(changes => changes.filter((c) => c.type === type)), filter(changes => !!changes.length));
+        return this.nodesChangeService.changes$.pipe(map((changes) => changes.filter((c) => c.type === type)), filter((changes) => !!changes.length));
     }
     edgeChangesOfType(type) {
-        return this.edgesChangeService.changes$.pipe(map(changes => changes.filter((c) => c.type === type)), filter(changes => !!changes.length));
+        return this.edgesChangeService.changes$.pipe(map((changes) => changes.filter((c) => c.type === type)), filter((changes) => !!changes.length));
     }
     singleChange(changes$) {
-        return changes$.pipe(filter(changes => changes.length === 1), map(([first]) => first));
+        return changes$.pipe(filter((changes) => changes.length === 1), map(([first]) => first));
     }
     manyChanges(changes$) {
-        return changes$.pipe(filter(changes => changes.length > 1));
+        return changes$.pipe(filter((changes) => changes.length > 1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChangesControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChangesControllerDirective, isStandalone: true, selector: "[changesController]", outputs: { onNodesChange: "onNodesChange", onNodesChangePosition: "onNodesChange.position", onNodesChangePositionSignle: "onNodesChange.position.single", onNodesChangePositionMany: "onNodesChange.position.many", onNodesChangeSize: "onNodesChange.size", onNodesChangeSizeSingle: "onNodesChange.size.single", onNodesChangeSizeMany: "onNodesChange.size.many", onNodesChangeAdd: "onNodesChange.add", onNodesChangeAddSingle: "onNodesChange.add.single", onNodesChangeAddMany: "onNodesChange.add.many", onNodesChangeRemove: "onNodesChange.remove", onNodesChangeRemoveSingle: "onNodesChange.remove.single", onNodesChangeRemoveMany: "onNodesChange.remove.many", onNodesChangeSelect: "onNodesChange.select", onNodesChangeSelectSingle: "onNodesChange.select.single", onNodesChangeSelectMany: "onNodesChange.select.many", onEdgesChange: "onEdgesChange", onNodesChangeDetached: "onEdgesChange.detached", onNodesChangeDetachedSingle: "onEdgesChange.detached.single", onNodesChangeDetachedMany: "onEdgesChange.detached.many", onEdgesChangeAdd: "onEdgesChange.add", onEdgeChangeAddSingle: "onEdgesChange.add.single", onEdgeChangeAddMany: "onEdgesChange.add.many", onEdgeChangeRemove: "onEdgesChange.remove", onEdgeChangeRemoveSingle: "onEdgesChange.remove.single", onEdgeChangeRemoveMany: "onEdgesChange.remove.many", onEdgeChangeSelect: "onEdgesChange.select", onEdgeChangeSelectSingle: "onEdgesChange.select.single", onEdgeChangeSelectMany: "onEdgesChange.select.many" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChangesControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ChangesControllerDirective, isStandalone: true, selector: "[changesController]", outputs: { onNodesChange: "onNodesChange", onNodesChangePosition: "onNodesChange.position", onNodesChangePositionSignle: "onNodesChange.position.single", onNodesChangePositionMany: "onNodesChange.position.many", onNodesChangeSize: "onNodesChange.size", onNodesChangeSizeSingle: "onNodesChange.size.single", onNodesChangeSizeMany: "onNodesChange.size.many", onNodesChangeAdd: "onNodesChange.add", onNodesChangeAddSingle: "onNodesChange.add.single", onNodesChangeAddMany: "onNodesChange.add.many", onNodesChangeRemove: "onNodesChange.remove", onNodesChangeRemoveSingle: "onNodesChange.remove.single", onNodesChangeRemoveMany: "onNodesChange.remove.many", onNodesChangeSelect: "onNodesChange.select", onNodesChangeSelectSingle: "onNodesChange.select.single", onNodesChangeSelectMany: "onNodesChange.select.many", onEdgesChange: "onEdgesChange", onNodesChangeDetached: "onEdgesChange.detached", onNodesChangeDetachedSingle: "onEdgesChange.detached.single", onNodesChangeDetachedMany: "onEdgesChange.detached.many", onEdgesChangeAdd: "onEdgesChange.add", onEdgeChangeAddSingle: "onEdgesChange.add.single", onEdgeChangeAddMany: "onEdgesChange.add.many", onEdgeChangeRemove: "onEdgesChange.remove", onEdgeChangeRemoveSingle: "onEdgesChange.remove.single", onEdgeChangeRemoveMany: "onEdgesChange.remove.many", onEdgeChangeSelect: "onEdgesChange.select", onEdgeChangeSelectSingle: "onEdgesChange.select.single", onEdgeChangeSelectMany: "onEdgesChange.select.many" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChangesControllerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChangesControllerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[changesController]',
-                    standalone: true
+                    standalone: true,
                 }]
-        }], propDecorators: { onNodesChange: [{
-                type: Output
-            }], onNodesChangePosition: [{
-                type: Output,
-                args: ['onNodesChange.position']
-            }], onNodesChangePositionSignle: [{
-                type: Output,
-                args: ['onNodesChange.position.single']
-            }], onNodesChangePositionMany: [{
-                type: Output,
-                args: ['onNodesChange.position.many']
-            }], onNodesChangeSize: [{
-                type: Output,
-                args: ['onNodesChange.size']
-            }], onNodesChangeSizeSingle: [{
-                type: Output,
-                args: ['onNodesChange.size.single']
-            }], onNodesChangeSizeMany: [{
-                type: Output,
-                args: ['onNodesChange.size.many']
-            }], onNodesChangeAdd: [{
-                type: Output,
-                args: ['onNodesChange.add']
-            }], onNodesChangeAddSingle: [{
-                type: Output,
-                args: ['onNodesChange.add.single']
-            }], onNodesChangeAddMany: [{
-                type: Output,
-                args: ['onNodesChange.add.many']
-            }], onNodesChangeRemove: [{
-                type: Output,
-                args: ['onNodesChange.remove']
-            }], onNodesChangeRemoveSingle: [{
-                type: Output,
-                args: ['onNodesChange.remove.single']
-            }], onNodesChangeRemoveMany: [{
-                type: Output,
-                args: ['onNodesChange.remove.many']
-            }], onNodesChangeSelect: [{
-                type: Output,
-                args: ['onNodesChange.select']
-            }], onNodesChangeSelectSingle: [{
-                type: Output,
-                args: ['onNodesChange.select.single']
-            }], onNodesChangeSelectMany: [{
-                type: Output,
-                args: ['onNodesChange.select.many']
-            }], onEdgesChange: [{
-                type: Output
-            }], onNodesChangeDetached: [{
-                type: Output,
-                args: ['onEdgesChange.detached']
-            }], onNodesChangeDetachedSingle: [{
-                type: Output,
-                args: ['onEdgesChange.detached.single']
-            }], onNodesChangeDetachedMany: [{
-                type: Output,
-                args: ['onEdgesChange.detached.many']
-            }], onEdgesChangeAdd: [{
-                type: Output,
-                args: ['onEdgesChange.add']
-            }], onEdgeChangeAddSingle: [{
-                type: Output,
-                args: ['onEdgesChange.add.single']
-            }], onEdgeChangeAddMany: [{
-                type: Output,
-                args: ['onEdgesChange.add.many']
-            }], onEdgeChangeRemove: [{
-                type: Output,
-                args: ['onEdgesChange.remove']
-            }], onEdgeChangeRemoveSingle: [{
-                type: Output,
-                args: ['onEdgesChange.remove.single']
-            }], onEdgeChangeRemoveMany: [{
-                type: Output,
-                args: ['onEdgesChange.remove.many']
-            }], onEdgeChangeSelect: [{
-                type: Output,
-                args: ['onEdgesChange.select']
-            }], onEdgeChangeSelectSingle: [{
-                type: Output,
-                args: ['onEdgesChange.select.single']
-            }], onEdgeChangeSelectMany: [{
-                type: Output,
-                args: ['onEdgesChange.select.many']
-            }] } });
+        }] });
+
+function isGroupNode(node) {
+    return node.node.type === 'default-group' || node.node.type === 'template-group';
+}
 
 class NodeRenderingService {
     constructor() {
@@ -1565,6 +1698,12 @@ class NodeRenderingService {
             return this.flowEntitiesService.nodes()
                 .sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
         });
+        this.groups = computed(() => {
+            return this.nodes().filter(n => isGroupNode(n));
+        });
+        this.nonGroups = computed(() => {
+            return this.nodes().filter(n => !isGroupNode(n));
+        });
         this.maxOrder = computed(() => {
             return Math.max(...this.flowEntitiesService.nodes().map((n) => n.renderOrder()));
         });
@@ -1579,10 +1718,10 @@ class NodeRenderingService {
             .filter(n => n.parent() === node)
             .forEach(n => this.pullNode(n));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeRenderingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeRenderingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService, decorators: [{
             type: Injectable
         }] });
 
@@ -1634,12 +1773,15 @@ class RootPointerDirective {
     setInitialTouch(event) {
         this.initialTouch$.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootPointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootPointerDirective, selector: "svg[rootPointer]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootPointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: RootPointerDirective, isStandalone: true, selector: "svg[rootPointer]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootPointerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootPointerDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'svg[rootPointer]' }]
+            args: [{
+                    standalone: true,
+                    selector: 'svg[rootPointer]',
+                }]
         }] });
 
 class SpacePointContextDirective {
@@ -1668,12 +1810,15 @@ class SpacePointContextDirective {
         point.y = documentPoint.y;
         return point.matrixTransform(this.host.getScreenCTM().inverse());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpacePointContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpacePointContextDirective, selector: "g[spacePointContext]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpacePointContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SpacePointContextDirective, isStandalone: true, selector: "g[spacePointContext]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpacePointContextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpacePointContextDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'g[spacePointContext]' }]
+            args: [{
+                    standalone: true,
+                    selector: 'g[spacePointContext]',
+                }]
         }] });
 
 function transformBackground(background) {
@@ -1710,8 +1855,8 @@ class OverlaysService {
     removeToolbar(toolbar) {
         this.toolbars.update((toolbars) => toolbars.filter(t => t !== toolbar));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OverlaysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OverlaysService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlaysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlaysService }); }
 }
 __decorate([
     Microtask
@@ -1719,10 +1864,105 @@ __decorate([
 __decorate([
     Microtask
 ], OverlaysService.prototype, "removeToolbar", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OverlaysService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlaysService, decorators: [{
             type: Injectable
         }], propDecorators: { addToolbar: [], removeToolbar: [] } });
 
+class EdgeLabelComponent {
+    constructor() {
+        // TODO: too many inputs
+        this.model = input.required();
+        this.edgeModel = input.required();
+        this.point = input({ x: 0, y: 0 });
+        this.htmlTemplate = input();
+        this.edgeLabelWrapperRef = viewChild.required('edgeLabelWrapper');
+        /**
+         * Centered point of label
+         *
+         * TODO: maybe put it into EdgeLabelModel
+         */
+        this.edgeLabelPoint = computed(() => {
+            const point = this.point();
+            const { width, height } = this.model().size();
+            return {
+                x: point.x - width / 2,
+                y: point.y - height / 2,
+            };
+        });
+    }
+    ngAfterViewInit() {
+        // this is a fix for visual artifact in chrome that for some reason adresses only for edge label.
+        // the bug reproduces if edgeLabelWrapperRef size fully matched the size of parent foreignObject
+        const MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME = 2;
+        const width = this.edgeLabelWrapperRef().nativeElement.clientWidth +
+            MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
+        const height = this.edgeLabelWrapperRef().nativeElement.clientHeight +
+            MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
+        this.model().size.set({ width, height });
+    }
+    getLabelContext() {
+        return {
+            $implicit: {
+                edge: this.edgeModel().edge,
+                label: this.model().edgeLabel,
+            },
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeLabelComponent, isStandalone: true, selector: "g[edgeLabel]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeModel: { classPropertyName: "edgeModel", publicName: "edgeModel", isSignal: true, isRequired: true, transformFunction: null }, point: { classPropertyName: "point", publicName: "point", isSignal: true, isRequired: false, transformFunction: null }, htmlTemplate: { classPropertyName: "htmlTemplate", publicName: "htmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "edgeLabelWrapperRef", first: true, predicate: ["edgeLabelWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (model().edgeLabel.type === \"html-template\" && htmlTemplate()) {\n  @if (htmlTemplate(); as htmlTemplate) {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model().size().width\"\n      [attr.height]=\"model().size().height\"\n    >\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n        <ng-container\n          *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\"\n        />\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+__decorate([
+    Microtask
+], EdgeLabelComponent.prototype, "ngAfterViewInit", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (model().edgeLabel.type === \"html-template\" && htmlTemplate()) {\n  @if (htmlTemplate(); as htmlTemplate) {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model().size().width\"\n      [attr.height]=\"model().size().height\"\n    >\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n        <ng-container\n          *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\"\n        />\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
+        }], propDecorators: { ngAfterViewInit: [] } });
+
+class EdgeComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        this.selectionService = inject(SelectionService);
+        this.flowSettingsService = inject(FlowSettingsService);
+        this.model = input.required();
+        this.edgeTemplate = input();
+        this.edgeLabelHtmlTemplate = input();
+        this.markerStartUrl = computed(() => {
+            const marker = this.model().edge.markers?.start;
+            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
+        });
+        this.markerEndUrl = computed(() => {
+            const marker = this.model().edge.markers?.end;
+            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
+        });
+    }
+    ngOnInit() {
+        this.edgeContext = {
+            $implicit: {
+                // TODO: check if edge could change
+                edge: this.model().edge,
+                path: computed(() => this.model().path().path),
+                markerStart: this.markerStartUrl,
+                markerEnd: this.markerEndUrl,
+                selected: this.model().selected.asReadonly(),
+            },
+        };
+    }
+    onEdgeMouseDown() {
+        if (this.flowSettingsService.entitiesSelectable()) {
+            this.selectionService.select(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: { classAttribute: "selectable" }, ngImport: i0, template: "@if (model().type === \"default\") {\n  <svg:path\n    (mousedown)=\"onEdgeMouseDown()\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"markerStartUrl()\"\n    [attr.marker-end]=\"markerEndUrl()\"\n    class=\"edge\"\n    [class.edge_selected]=\"model().selected()\"\n  />\n}\n\n@if (model().type === \"template\" && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"edgeContext\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\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\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\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", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: ["model", "edgeModel", "point", "htmlTemplate"] }], 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',
+                    }, imports: [NgTemplateOutlet, EdgeLabelComponent], template: "@if (model().type === \"default\") {\n  <svg:path\n    (mousedown)=\"onEdgeMouseDown()\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"markerStartUrl()\"\n    [attr.marker-end]=\"markerEndUrl()\"\n    class=\"edge\"\n    [class.edge_selected]=\"model().selected()\"\n  />\n}\n\n@if (model().type === \"template\" && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"edgeContext\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\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\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\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", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}\n"] }]
+        }] });
+
 class HandleService {
     constructor() {
         this.node = signal(null);
@@ -1739,13 +1979,13 @@ class HandleService {
             node.handles.update(handles => handles.filter(handle => handle !== handleToDestoy));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleService }); }
 }
 __decorate([
     Microtask // TODO fixes rendering of handle for group node
 ], HandleService.prototype, "createHandle", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleService, decorators: [{
             type: Injectable
         }], propDecorators: { createHandle: [] } });
 
@@ -1776,176 +2016,71 @@ const implementsWithInjector = (instance) => {
     return 'injector' in instance && 'get' in instance.injector;
 };
 
-/**
- * Service to fix cyclic dependency between node and resizable component
- */
-class NodeAccessorService {
+class HandleSizeControllerDirective {
     constructor() {
-        this.model = signal(null);
+        this.handleModel = input.required({
+            alias: 'handleSizeController',
+        });
+        this.handleWrapper = inject(ElementRef);
+    }
+    ngAfterViewInit() {
+        const element = this.handleWrapper.nativeElement;
+        const rect = element.getBBox();
+        const stroke = getChildStrokeWidth(element);
+        this.handleModel().size.set({
+            width: rect.width + stroke,
+            height: rect.height + stroke,
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeAccessorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeAccessorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: HandleSizeControllerDirective, isStandalone: true, selector: "[handleSizeController]", inputs: { handleModel: { classPropertyName: "handleModel", publicName: "handleSizeController", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeAccessorService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleSizeControllerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[handleSizeController]',
+                }]
         }] });
+function getChildStrokeWidth(element) {
+    const child = element.firstElementChild;
+    if (child) {
+        const stroke = getComputedStyle(child).strokeWidth;
+        const strokeAsNumber = Number(stroke.replace('px', ''));
+        if (isNaN(strokeAsNumber)) {
+            return 0;
+        }
+        return strokeAsNumber;
+    }
+    return 0;
+}
 
 class DefaultNodeComponent {
     constructor() {
-        this.selected = false;
+        this.selected = input(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefaultNodeComponent, selector: "default-node", inputs: { selected: "selected" }, host: { properties: { "class.selected": "selected" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: DefaultNodeComponent, isStandalone: true, selector: "default-node", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'default-node', host: {
-                        '[class.selected]': 'selected'
+            args: [{ standalone: true, selector: 'default-node', host: {
+                        '[class.selected]': 'selected()',
                     }, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"] }]
-        }], propDecorators: { selected: [{
-                type: Input
-            }] } });
+        }] });
 
-class HandleModel {
-    constructor(rawHandle, parentNode) {
-        this.rawHandle = rawHandle;
-        this.parentNode = parentNode;
-        this.strokeWidth = 2;
+class PointerDirective {
+    constructor() {
+        this.hostElement = inject(ElementRef).nativeElement;
+        this.pointerMovementDirective = inject(RootPointerDirective);
+        this.pointerOver = output();
+        this.pointerOut = output();
         /**
-         * Pre-computed size for default handle, changed dynamically
-         * for custom handles
+         * @todo the Angular may somehow ignore the event.
+         * reproduced here: https://www.ngx-vflow.org/workshops/layout/vizdom-layout
          */
-        this.size = signal({
-            width: 10 + (2 * this.strokeWidth),
-            height: 10 + (2 * this.strokeWidth)
-        });
-        this.offset = computed(() => {
-            switch (this.rawHandle.position) {
-                case 'left': return {
-                    x: 0,
-                    y: this.parentPosition().y + (this.parentSize().height / 2)
-                };
-                case 'right': return {
-                    x: this.parentNode.size().width,
-                    y: this.parentPosition().y + (this.parentSize().height / 2)
-                };
-                case 'top': return {
-                    x: this.parentPosition().x + (this.parentSize().width / 2),
-                    y: 0
-                };
-                case 'bottom': return {
-                    x: this.parentPosition().x + this.parentSize().width / 2,
-                    y: this.parentNode.size().height
-                };
-            }
-        });
-        this.sizeOffset = computed(() => {
-            switch (this.rawHandle.position) {
-                case 'left': return { x: -(this.size().width / 2), y: 0 };
-                case 'right': return { x: this.size().width / 2, y: 0 };
-                case 'top': return { x: 0, y: -(this.size().height / 2) };
-                case 'bottom': return { x: 0, y: this.size().height / 2 };
-            }
-        });
-        this.pointAbsolute = computed(() => {
-            return {
-                x: this.parentNode.globalPoint().x + this.offset().x + this.sizeOffset().x,
-                y: this.parentNode.globalPoint().y + this.offset().y + this.sizeOffset().y,
-            };
-        });
-        this.state = signal('idle');
-        this.updateParentSizeAndPosition$ = new Subject();
-        this.parentSize = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => this.getParentSize())), {
-            initialValue: { width: 0, height: 0 }
-        });
-        this.parentPosition = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => ({
-            x: this.parentReference instanceof HTMLElement
-                ? this.parentReference.offsetLeft
-                : 0,
-            y: this.parentReference instanceof HTMLElement
-                ? this.parentReference.offsetTop
-                : 0 // for now just 0 for group nodes
-        }))), {
-            initialValue: { x: 0, y: 0 }
-        });
-        this.parentReference = this.rawHandle.parentReference;
-        this.template = this.rawHandle.template;
-        this.templateContext = {
-            $implicit: {
-                point: this.offset,
-                state: this.state,
-                node: this.parentNode.node
-            }
-        };
-    }
-    updateParent() {
-        this.updateParentSizeAndPosition$.next();
-    }
-    getParentSize() {
-        if (this.parentReference instanceof HTMLElement) {
-            return {
-                width: this.parentReference.offsetWidth,
-                height: this.parentReference.offsetHeight
-            };
-        }
-        else if (this.parentReference instanceof SVGGraphicsElement) {
-            return this.parentReference.getBBox();
-        }
-        return { width: 0, height: 0 };
-    }
-}
-
-class HandleComponent {
-    constructor() {
-        this.injector = inject(Injector);
-        this.handleService = inject(HandleService);
-        this.element = inject(ElementRef).nativeElement;
-        this.destroyRef = inject(DestroyRef);
-    }
-    ngOnInit() {
-        const node = this.handleService.node();
-        if (node) {
-            this.model = new HandleModel({
-                position: this.position,
-                type: this.type,
-                id: this.id,
-                parentReference: this.element.parentElement,
-                template: this.template
-            }, node);
-            this.handleService.createHandle(this.model);
-            requestAnimationFrame(() => this.model.updateParent());
-            this.destroyRef.onDestroy(() => this.handleService.destroyHandle(this.model));
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HandleComponent, selector: "handle", inputs: { position: "position", type: "type", id: "id", template: "template" }, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-__decorate([
-    InjectionContext
-], HandleComponent.prototype, "ngOnInit", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'handle', changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
-        }], propDecorators: { position: [{
-                type: Input,
-                args: [{ required: true }]
-            }], type: [{
-                type: Input,
-                args: [{ required: true }]
-            }], id: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }], ngOnInit: [] } });
-
-class PointerDirective {
-    constructor() {
-        this.hostElement = inject(ElementRef).nativeElement;
-        this.pointerMovementDirective = inject(RootPointerDirective);
-        this.pointerOver = new EventEmitter();
-        this.pointerOut = new EventEmitter();
-        this.pointerStart = new EventEmitter();
-        this.pointerEnd = new EventEmitter();
+        this.pointerStart = output();
+        this.pointerEnd = output();
         this.wasPointerOver = false;
         // TODO check if i could avoid global touch end
         this.touchEnd = this.pointerMovementDirective.touchEnd$
@@ -1986,21 +2121,16 @@ class PointerDirective {
             this.wasPointerOver = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: { pointerOver: "pointerOver", pointerOut: "pointerOut", pointerStart: "pointerStart", pointerEnd: "pointerEnd" }, host: { listeners: { "mousedown": "onPointerStart($event)", "touchstart": "onPointerStart($event)", "mouseup": "onPointerEnd($event)", "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PointerDirective, isStandalone: true, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: { pointerOver: "pointerOver", pointerOut: "pointerOut", pointerStart: "pointerStart", pointerEnd: "pointerEnd" }, host: { listeners: { "mousedown": "onPointerStart($event)", "touchstart": "onPointerStart($event)", "mouseup": "onPointerEnd($event)", "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PointerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PointerDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[pointerStart], [pointerEnd], [pointerOver], [pointerOut]' }]
-        }], propDecorators: { pointerOver: [{
-                type: Output
-            }], pointerOut: [{
-                type: Output
-            }], pointerStart: [{
-                type: Output
-            }], pointerEnd: [{
-                type: Output
-            }], onPointerStart: [{
+            args: [{
+                    standalone: true,
+                    selector: '[pointerStart], [pointerEnd], [pointerOver], [pointerOut]',
+                }]
+        }], propDecorators: { onPointerStart: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]
             }, {
@@ -2018,14 +2148,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class ResizableComponent {
+    get model() {
+        return this.nodeAccessor.model();
+    }
     constructor() {
         this.nodeAccessor = inject(NodeAccessorService);
         this.rootPointer = inject(RootPointerDirective);
         this.viewportService = inject(ViewportService);
         this.spacePointContext = inject(SpacePointContextDirective);
         this.hostRef = inject(ElementRef);
-        this.resizerColor = '#2e414c';
-        this.gap = 1.5;
+        this.resizable = input();
+        this.resizerColor = input('#2e414c');
+        this.gap = input(1.5);
+        this.resizer = viewChild.required('resizer');
         this.lineGap = 3;
         this.handleSize = 6;
         this.resizeSide = null;
@@ -2039,24 +2174,24 @@ class ResizableComponent {
         this.endResizeOnGlobalMouseUp = this.rootPointer.documentPointerEnd$
             .pipe(tap(() => this.endResize()), takeUntilDestroyed())
             .subscribe();
-    }
-    set resizable(value) {
-        if (typeof value === 'boolean') {
-            this.model.resizable.set(value);
-        }
-        else {
-            this.model.resizable.set(true);
-        }
-    }
-    get model() {
-        return this.nodeAccessor.model();
+        effect(() => {
+            const resizable = this.resizable();
+            if (typeof resizable === 'boolean') {
+                this.model.resizable.set(resizable);
+            }
+            else {
+                this.model.resizable.set(true);
+            }
+        }, { allowSignalWrites: true });
     }
     ngOnInit() {
-        this.model.resizerTemplate.set(this.resizer);
+        this.model.resizerTemplate.set(this.resizer());
     }
     ngAfterViewInit() {
-        this.minWidth = +getComputedStyle(this.hostRef.nativeElement).minWidth.replace('px', '') || 0;
-        this.minHeight = +getComputedStyle(this.hostRef.nativeElement).minHeight.replace('px', '') || 0;
+        this.minWidth =
+            +getComputedStyle(this.hostRef.nativeElement).minWidth.replace('px', '') || 0;
+        this.minHeight =
+            +getComputedStyle(this.hostRef.nativeElement).minHeight.replace('px', '') || 0;
     }
     startResize(side, event) {
         event.stopPropagation();
@@ -2077,13 +2212,15 @@ class ResizableComponent {
         this.resizeSide = null;
         this.model.resizing.set(false);
     }
-    isResizeConstrained({ x, y, movementX, movementY }) {
+    isResizeConstrained({ x, y, movementX, movementY, }) {
         const flowPoint = this.spacePointContext.documentPointToFlowPoint({ x, y });
         if (this.resizeSide?.includes('right')) {
-            if (movementX > 0 && flowPoint.x < (this.model.point().x + this.model.size().width)) {
+            if (movementX > 0 &&
+                flowPoint.x < this.model.point().x + this.model.size().width) {
                 return true;
             }
-            if (movementX < 0 && flowPoint.x > this.model.point().x + this.model.size().width) {
+            if (movementX < 0 &&
+                flowPoint.x > this.model.point().x + this.model.size().width) {
                 return true;
             }
         }
@@ -2096,10 +2233,12 @@ class ResizableComponent {
             }
         }
         if (this.resizeSide?.includes('bottom')) {
-            if (movementY > 0 && flowPoint.y < (this.model.point().y + this.model.size().height)) {
+            if (movementY > 0 &&
+                flowPoint.y < this.model.point().y + this.model.size().height) {
                 return true;
             }
-            if (movementY < 0 && flowPoint.y > this.model.point().y + this.model.size().height) {
+            if (movementY < 0 &&
+                flowPoint.y > this.model.point().y + this.model.size().height) {
                 return true;
             }
         }
@@ -2113,29 +2252,20 @@ class ResizableComponent {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResizableComponent, selector: "[resizable]", inputs: { resizable: "resizable", resizerColor: "resizerColor", gap: "gap" }, viewQueries: [{ propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('top', $event)\"\n    />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      [attr.x1]=\"-gap\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('left', $event)\"\n    />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('bottom', $event)\"\n    />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      [attr.x1]=\"model.size().width + gap\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('right', $event)\"\n    />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap\"\n      [attr.y]=\"-(handleSize / 2) - gap\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor\"\n      (pointerStart)=\"startResize('top-left', $event)\"\n    />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - (handleSize / 2) + gap\"\n      [attr.y]=\"-(handleSize / 2) - gap\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor\"\n      (pointerStart)=\"startResize('top-right', $event)\"\n    />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap\"\n      [attr.y]=\"model.size().height - (handleSize / 2) + gap\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor\"\n      (pointerStart)=\"startResize('bottom-left', $event)\"\n    />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - (handleSize / 2) + gap\"\n      [attr.y]=\"model.size().height - (handleSize / 2) + gap\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor\"\n      (pointerStart)=\"startResize('bottom-right', $event)\"\n    />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: ResizableComponent, isStandalone: true, selector: "[resizable]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizerColor: { classPropertyName: "resizerColor", publicName: "resizerColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('top', $event)\"\n    />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      [attr.x1]=\"-gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('left', $event)\"\n    />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('bottom', $event)\"\n    />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      [attr.x1]=\"model.size().width + gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('right', $event)\"\n    />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-left', $event)\"\n    />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-right', $event)\"\n    />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-left', $event)\"\n    />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-right', $event)\"\n    />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }] }); }
 }
 __decorate([
     Microtask
 ], ResizableComponent.prototype, "ngAfterViewInit", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[resizable]', template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('top', $event)\"\n    />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      [attr.x1]=\"-gap\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('left', $event)\"\n    />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('bottom', $event)\"\n    />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      [attr.x1]=\"model.size().width + gap\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('right', $event)\"\n    />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap\"\n      [attr.y]=\"-(handleSize / 2) - gap\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor\"\n      (pointerStart)=\"startResize('top-left', $event)\"\n    />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - (handleSize / 2) + gap\"\n      [attr.y]=\"-(handleSize / 2) - gap\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor\"\n      (pointerStart)=\"startResize('top-right', $event)\"\n    />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap\"\n      [attr.y]=\"model.size().height - (handleSize / 2) + gap\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor\"\n      (pointerStart)=\"startResize('bottom-left', $event)\"\n    />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - (handleSize / 2) + gap\"\n      [attr.y]=\"model.size().height - (handleSize / 2) + gap\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor\"\n      (pointerStart)=\"startResize('bottom-right', $event)\"\n    />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"] }]
-        }], propDecorators: { resizable: [{
-                type: Input
-            }], resizerColor: [{
-                type: Input
-            }], gap: [{
-                type: Input
-            }], resizer: [{
-                type: ViewChild,
-                args: ['resizer', { static: true }]
-            }], ngAfterViewInit: [] } });
+            args: [{ standalone: true, selector: '[resizable]', imports: [PointerDirective], template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('top', $event)\"\n    />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      [attr.x1]=\"-gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('left', $event)\"\n    />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('bottom', $event)\"\n    />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      [attr.x1]=\"model.size().width + gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('right', $event)\"\n    />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-left', $event)\"\n    />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-right', $event)\"\n    />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-left', $event)\"\n    />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-right', $event)\"\n    />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ngAfterViewInit: [] } });
 function calcOffset(movementX, movementY, zoom) {
     return {
         offsetX: round(movementX / zoom),
-        offsetY: round(movementY / zoom)
+        offsetY: round(movementY / zoom),
     };
 }
 function applyResize(side, model, offset) {
@@ -2153,11 +2283,26 @@ function applyResize(side, model, offset) {
         case 'bottom':
             return { x, y, width, height: height + offsetY };
         case 'top-left':
-            return { x: x + offsetX, y: y + offsetY, width: width - offsetX, height: height - offsetY };
+            return {
+                x: x + offsetX,
+                y: y + offsetY,
+                width: width - offsetX,
+                height: height - offsetY,
+            };
         case 'top-right':
-            return { x, y: y + offsetY, width: width + offsetX, height: height - offsetY };
+            return {
+                x,
+                y: y + offsetY,
+                width: width + offsetX,
+                height: height - offsetY,
+            };
         case 'bottom-left':
-            return { x: x + offsetX, y, width: width - offsetX, height: height + offsetY };
+            return {
+                x: x + offsetX,
+                y,
+                width: width - offsetX,
+                height: height + offsetY,
+            };
         case 'bottom-right':
             return { x, y, width: width + offsetX, height: height + offsetY };
     }
@@ -2191,7 +2336,7 @@ function constrainRect(rect, model, side, minWidth, minHeight) {
     // 4. Apply child node constraints (if children exist)
     if (bounds) {
         if (side.includes('left')) {
-            x = Math.min(x, (model.point().x + model.size().width) - (bounds.x + bounds.width));
+            x = Math.min(x, model.point().x + model.size().width - (bounds.x + bounds.width));
             width = Math.max(width, bounds.x + bounds.width);
         }
         if (side.includes('right')) {
@@ -2201,7 +2346,7 @@ function constrainRect(rect, model, side, minWidth, minHeight) {
             height = Math.max(height, bounds.y + bounds.height);
         }
         if (side.includes('top')) {
-            y = Math.min(y, (model.point().y + model.size().height) - (bounds.y + bounds.height));
+            y = Math.min(y, model.point().y + model.size().height - (bounds.y + bounds.height));
             height = Math.max(height, bounds.y + bounds.height);
         }
     }
@@ -2209,45 +2354,144 @@ function constrainRect(rect, model, side, minWidth, minHeight) {
         x,
         y,
         width,
-        height
+        height,
     };
 }
 
-class HandleSizeControllerDirective {
-    constructor() {
-        this.handleWrapper = inject(ElementRef);
-    }
-    ngAfterViewInit() {
-        const element = this.handleWrapper.nativeElement;
-        const rect = element.getBBox();
-        const stroke = getChildStrokeWidth(element);
-        this.handleModel.size.set({
-            width: rect.width + stroke,
-            height: rect.height + stroke
+class HandleModel {
+    constructor(rawHandle, parentNode) {
+        this.rawHandle = rawHandle;
+        this.parentNode = parentNode;
+        this.strokeWidth = 2;
+        /**
+         * Pre-computed size for default handle, changed dynamically
+         * for custom handles
+         */
+        this.size = signal({
+            width: 10 + (2 * this.strokeWidth),
+            height: 10 + (2 * this.strokeWidth)
         });
+        this.offset = computed(() => {
+            switch (this.rawHandle.position) {
+                case 'left': return {
+                    x: 0,
+                    y: this.parentPosition().y + (this.parentSize().height / 2)
+                };
+                case 'right': return {
+                    x: this.parentNode.size().width,
+                    y: this.parentPosition().y + (this.parentSize().height / 2)
+                };
+                case 'top': return {
+                    x: this.parentPosition().x + (this.parentSize().width / 2),
+                    y: 0
+                };
+                case 'bottom': return {
+                    x: this.parentPosition().x + this.parentSize().width / 2,
+                    y: this.parentNode.size().height
+                };
+            }
+        });
+        this.sizeOffset = computed(() => {
+            switch (this.rawHandle.position) {
+                case 'left': return { x: -(this.size().width / 2), y: 0 };
+                case 'right': return { x: this.size().width / 2, y: 0 };
+                case 'top': return { x: 0, y: -(this.size().height / 2) };
+                case 'bottom': return { x: 0, y: this.size().height / 2 };
+            }
+        });
+        this.pointAbsolute = computed(() => {
+            return {
+                x: this.parentNode.globalPoint().x + this.offset().x + this.sizeOffset().x,
+                y: this.parentNode.globalPoint().y + this.offset().y + this.sizeOffset().y,
+            };
+        });
+        this.state = signal('idle');
+        this.updateParentSizeAndPosition$ = new Subject();
+        this.parentSize = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => this.getParentSize())), {
+            initialValue: { width: 0, height: 0 }
+        });
+        this.parentPosition = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => ({
+            x: this.parentReference instanceof HTMLElement
+                ? this.parentReference.offsetLeft
+                : 0, // for now just 0 for group nodes
+            y: this.parentReference instanceof HTMLElement
+                ? this.parentReference.offsetTop
+                : 0 // for now just 0 for group nodes
+        }))), {
+            initialValue: { x: 0, y: 0 }
+        });
+        this.parentReference = this.rawHandle.parentReference;
+        this.template = this.rawHandle.template;
+        this.templateContext = {
+            $implicit: {
+                point: this.offset,
+                state: this.state,
+                node: this.parentNode.node
+            }
+        };
+    }
+    updateParent() {
+        this.updateParentSizeAndPosition$.next();
+    }
+    getParentSize() {
+        if (this.parentReference instanceof HTMLElement) {
+            return {
+                width: this.parentReference.offsetWidth,
+                height: this.parentReference.offsetHeight
+            };
+        }
+        else if (this.parentReference instanceof SVGGraphicsElement) {
+            return this.parentReference.getBBox();
+        }
+        return { width: 0, height: 0 };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: { handleModel: ["handleSizeController", "handleModel"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleSizeControllerDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[handleSizeController]' }]
-        }], propDecorators: { handleModel: [{
-                type: Input,
-                args: [{ required: true, alias: 'handleSizeController' }]
-            }] } });
-function getChildStrokeWidth(element) {
-    const child = element.firstElementChild;
-    if (child) {
-        const stroke = getComputedStyle(child).strokeWidth;
-        const strokeAsNumber = Number(stroke.replace('px', ''));
-        if (isNaN(strokeAsNumber)) {
-            return 0;
+
+class HandleComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        this.handleService = inject(HandleService);
+        this.element = inject(ElementRef).nativeElement;
+        this.destroyRef = inject(DestroyRef);
+        /**
+         * At what side of node this component should be placed
+         */
+        this.position = input.required();
+        /**
+         * Source or target
+         */
+        this.type = input.required();
+        /**
+         * Should be used if node has more than one source/target
+         */
+        this.id = input();
+        this.template = input();
+    }
+    ngOnInit() {
+        const node = this.handleService.node();
+        if (node) {
+            this.model = new HandleModel({
+                position: this.position(),
+                type: this.type(),
+                id: this.id(),
+                parentReference: this.element.parentElement,
+                template: this.template(),
+            }, node);
+            this.handleService.createHandle(this.model);
+            requestAnimationFrame(() => this.model.updateParent());
+            this.destroyRef.onDestroy(() => this.handleService.destroyHandle(this.model));
         }
-        return strokeAsNumber;
     }
-    return 0;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: HandleComponent, isStandalone: true, selector: "handle", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+__decorate([
+    InjectionContext
+], HandleComponent.prototype, "ngOnInit", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'handle', changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
+        }], propDecorators: { ngOnInit: [] } });
 
 class NodeComponent {
     constructor() {
@@ -2263,40 +2507,47 @@ class NodeComponent {
         this.nodeAccessor = inject(NodeAccessorService);
         this.overlaysService = inject(OverlaysService);
         this.zone = inject(NgZone);
+        this.nodeModel = input.required();
+        this.nodeTemplate = input();
+        this.groupNodeTemplate = input();
+        this.htmlWrapperRef = viewChild.required('htmlWrapper');
         this.showMagnet = computed(() => this.flowStatusService.status().state === 'connection-start' ||
             this.flowStatusService.status().state === 'connection-validation');
-        this.styleWidth = computed(() => `${this.nodeModel.size().width}px`);
-        this.styleHeight = computed(() => `${this.nodeModel.size().height}px`);
-        this.toolbar = computed(() => this.overlaysService.nodeToolbars().get(this.nodeModel));
+        this.styleWidth = computed(() => `${this.nodeModel().size().width}px`);
+        this.styleHeight = computed(() => `${this.nodeModel().size().height}px`);
+        this.toolbar = computed(() => this.overlaysService.nodeToolbars().get(this.nodeModel()));
     }
     ngOnInit() {
-        this.nodeAccessor.model.set(this.nodeModel);
-        this.handleService.node.set(this.nodeModel);
+        this.nodeAccessor.model.set(this.nodeModel());
+        this.handleService.node.set(this.nodeModel());
         effect(() => {
-            if (this.nodeModel.draggable()) {
-                this.draggableService.enable(this.hostRef.nativeElement, this.nodeModel);
+            if (this.nodeModel().draggable()) {
+                this.draggableService.enable(this.hostRef.nativeElement, this.nodeModel());
             }
             else {
                 this.draggableService.disable(this.hostRef.nativeElement);
             }
         });
-        this.nodeModel.handles$
-            .pipe(switchMap((handles) => resizable(handles.map(h => h.parentReference), this.zone)
-            .pipe(map(() => handles))), tap((handles) => {
+        this.nodeModel()
+            .handles$.pipe(switchMap((handles) => resizable(handles.map((h) => h.parentReference), this.zone).pipe(map(() => handles))), tap((handles) => {
             // TODO (performance) inspect how to avoid calls of this when flow initially rendered
-            handles.forEach(h => h.updateParent());
+            handles.forEach((h) => h.updateParent());
         }), takeUntilDestroyed())
             .subscribe();
     }
     ngAfterViewInit() {
-        this.nodeModel.linkDefaultNodeSizeWithModelSize();
-        if (this.nodeModel.node.type === 'html-template' || this.nodeModel.isComponentType) {
-            resizable([this.htmlWrapperRef.nativeElement], this.zone)
-                .pipe(startWith(null), tap(() => this.nodeModel.handles().forEach(h => h.updateParent())), filter(() => !this.nodeModel.resizing()), tap(() => {
-                const width = this.htmlWrapperRef.nativeElement.clientWidth;
-                const height = this.htmlWrapperRef.nativeElement.clientHeight;
-                this.nodeModel.size.set({ width, height });
-            }), takeUntilDestroyed()).subscribe();
+        this.nodeModel().linkDefaultNodeSizeWithModelSize();
+        if (this.nodeModel().node.type === 'html-template' ||
+            this.nodeModel().isComponentType) {
+            resizable([this.htmlWrapperRef().nativeElement], this.zone)
+                .pipe(startWith(null), tap(() => this.nodeModel()
+                .handles()
+                .forEach((h) => h.updateParent())), filter(() => !this.nodeModel().resizing()), tap(() => {
+                const width = this.htmlWrapperRef().nativeElement.clientWidth;
+                const height = this.htmlWrapperRef().nativeElement.clientHeight;
+                this.nodeModel().size.set({ width, height });
+            }), takeUntilDestroyed())
+                .subscribe();
         }
     }
     ngOnDestroy() {
@@ -2317,15 +2568,15 @@ class NodeComponent {
         this.connectionController.endConnection(handle);
     }
     pullNode() {
-        this.nodeRenderingService.pullNode(this.nodeModel);
+        this.nodeRenderingService.pullNode(this.nodeModel());
     }
     selectNode() {
         if (this.flowSettingsService.entitiesSelectable()) {
-            this.selectionService.select(this.nodeModel);
+            this.selectionService.select(this.nodeModel());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeTemplate: "nodeTemplate", groupNodeTemplate: "groupNodeTemplate" }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<!-- Default node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (pointerStart)=\"pullNode(); selectNode()\"\n>\n  <default-node\n    #htmlWrapper\n    [selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.text()\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </default-node>\n</svg:foreignObject>\n\n<!-- Template node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (pointerStart)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"nodeTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Component node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (pointerStart)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Default group node -->\n<svg:rect\n  *ngIf=\"nodeModel.node.type === 'default-group'\"\n  [resizable]=\"nodeModel.resizable()\"\n  [gap]=\"3\"\n  [resizerColor]=\"nodeModel.color()\"\n  class=\"default-group-node\"\n  rx=\"5\"\n  ry=\"5\"\n  [class.default-group-node_selected]=\"nodeModel.selected()\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  [style.stroke]=\"nodeModel.color()\"\n  [style.fill]=\"nodeModel.color()\"\n  (pointerStart)=\"pullNode(); selectNode()\"\n/>\n\n<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (pointerStart)=\"pullNode()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"groupNodeTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected, width: nodeModel.width, height: nodeModel.height } }\"\n    [ngTemplateOutletInjector]=\"injector\"\n  />\n</svg:g>\n\n<!-- Resizer -->\n<ng-container *ngIf=\"nodeModel.resizerTemplate() as template\">\n  <ng-container *ngIf=\"nodeModel.resizable()\">\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  </ng-container>\n</ng-container>\n\n<!-- Handles -->\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n\n<!-- Toolbar -->\n<svg:foreignObject\n  *ngIf=\"toolbar() as toolbar\"\n  [attr.width]=\"toolbar.size().width\"\n  [attr.height]=\"toolbar.size().height\"\n  [attr.transform]=\"toolbar.transform()\"\n>\n  <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n</svg:foreignObject>\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NodeComponent, isStandalone: true, selector: "g[node]", inputs: { nodeModel: { classPropertyName: "nodeModel", publicName: "nodeModel", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupNodeTemplate: { classPropertyName: "groupNodeTemplate", publicName: "groupNodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], viewQueries: [{ propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Default node -->\n@if (nodeModel().node.type === \"default\") {\n  @defer {\n    <svg:foreignObject\n      class=\"selectable\"\n      [attr.width]=\"nodeModel().size().width\"\n      [attr.height]=\"nodeModel().size().height\"\n      (pointerStart)=\"pullNode(); selectNode()\"\n    >\n      <default-node\n        #htmlWrapper\n        [selected]=\"nodeModel().selected()\"\n        [style.width]=\"styleWidth()\"\n        [style.height]=\"styleHeight()\"\n        [style.max-width]=\"styleWidth()\"\n        [style.max-height]=\"styleHeight()\"\n      >\n        <div [outerHTML]=\"nodeModel().text()\"></div>\n\n        <handle type=\"source\" position=\"right\"/>\n        <handle type=\"target\" position=\"left\" />\n      </default-node>\n    </svg:foreignObject>\n  }\n}\n\n<!-- Template node -->\n@if (nodeModel().node.type === \"html-template\" && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\"\n  >\n    <div\n      #htmlWrapper\n      class=\"wrapper\"\n      [style.width]=\"styleWidth()\"\n      [style.height]=\"styleHeight()\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: { node: nodeModel().node, selected: nodeModel().selected },\n        }\"\n        [ngTemplateOutletInjector]=\"injector\"\n      />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (nodeModel().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\"\n  >\n    <div\n      #htmlWrapper\n      class=\"wrapper\"\n      [style.width]=\"styleWidth()\"\n      [style.height]=\"styleHeight()\"\n    >\n      <ng-container\n        [ngComponentOutlet]=\"$any(nodeModel().node.type)\"\n        [ngComponentOutletInputs]=\"nodeModel().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\"\n      />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (nodeModel().node.type === \"default-group\") {\n  @defer {\n    <svg:rect\n      [resizable]=\"nodeModel().resizable()\"\n      [gap]=\"3\"\n      [resizerColor]=\"nodeModel().color()\"\n      class=\"default-group-node\"\n      rx=\"5\"\n      ry=\"5\"\n      [class.default-group-node_selected]=\"nodeModel().selected()\"\n      [attr.width]=\"nodeModel().size().width\"\n      [attr.height]=\"nodeModel().size().height\"\n      [style.stroke]=\"nodeModel().color()\"\n      [style.fill]=\"nodeModel().color()\"\n      (pointerStart)=\"pullNode(); selectNode()\"\n    />\n  }\n}\n\n<!-- Template group node  -->\n@if (nodeModel().node.type === \"template-group\" && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: {\n          node: nodeModel().node,\n          selected: nodeModel().selected,\n          width: nodeModel().width,\n          height: nodeModel().height,\n        },\n      }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (nodeModel().resizerTemplate(); as template) {\n  @if (nodeModel().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of nodeModel().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      r=\"5\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection(handle)\"\n    />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection(handle)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"handle.template; context: handle.templateContext\"\n      />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"nodeModel().magnetRadius\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\"\n    />\n  }\n}\n\n<!-- Toolbar -->\n@if (toolbar(); as toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     InjectionContext
@@ -2333,130 +2584,25 @@ __decorate([
 __decorate([
     InjectionContext
 ], NodeComponent.prototype, "ngAfterViewInit", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService, NodeAccessorService], host: {
-                        'class': 'vflow-node',
-                    }, template: "<!-- Default node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (pointerStart)=\"pullNode(); selectNode()\"\n>\n  <default-node\n    #htmlWrapper\n    [selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.text()\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </default-node>\n</svg:foreignObject>\n\n<!-- Template node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (pointerStart)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"nodeTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Component node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (pointerStart)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Default group node -->\n<svg:rect\n  *ngIf=\"nodeModel.node.type === 'default-group'\"\n  [resizable]=\"nodeModel.resizable()\"\n  [gap]=\"3\"\n  [resizerColor]=\"nodeModel.color()\"\n  class=\"default-group-node\"\n  rx=\"5\"\n  ry=\"5\"\n  [class.default-group-node_selected]=\"nodeModel.selected()\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  [style.stroke]=\"nodeModel.color()\"\n  [style.fill]=\"nodeModel.color()\"\n  (pointerStart)=\"pullNode(); selectNode()\"\n/>\n\n<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (pointerStart)=\"pullNode()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"groupNodeTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected, width: nodeModel.width, height: nodeModel.height } }\"\n    [ngTemplateOutletInjector]=\"injector\"\n  />\n</svg:g>\n\n<!-- Resizer -->\n<ng-container *ngIf=\"nodeModel.resizerTemplate() as template\">\n  <ng-container *ngIf=\"nodeModel.resizable()\">\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  </ng-container>\n</ng-container>\n\n<!-- Handles -->\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n\n<!-- Toolbar -->\n<svg:foreignObject\n  *ngIf=\"toolbar() as toolbar\"\n  [attr.width]=\"toolbar.size().width\"\n  [attr.height]=\"toolbar.size().height\"\n  [attr.transform]=\"toolbar.transform()\"\n>\n  <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n</svg:foreignObject>\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
-        }], propDecorators: { nodeModel: [{
-                type: Input
-            }], nodeTemplate: [{
-                type: Input
-            }], groupNodeTemplate: [{
-                type: Input
-            }], nodeContentRef: [{
-                type: ViewChild,
-                args: ['nodeContent']
-            }], htmlWrapperRef: [{
-                type: ViewChild,
-                args: ['htmlWrapper']
-            }], ngOnInit: [], ngAfterViewInit: [] } });
-
-class EdgeLabelComponent {
-    constructor() {
-        /**
-         * Centered point of label
-         *
-         * TODO: maybe put it into EdgeLabelModel
-         */
-        this.edgeLabelPoint = computed(() => {
-            const point = this.pointSignal();
-            const { width, height } = this.model.size();
-            return {
-                x: point.x - (width / 2),
-                y: point.y - (height / 2)
-            };
-        });
-        this.pointSignal = signal({ x: 0, y: 0 });
-    }
-    set point(point) { this.pointSignal.set(point); }
-    ngAfterViewInit() {
-        // this is a fix for visual artifact in chrome that for some reason adresses only for edge label.
-        // the bug reproduces if edgeLabelWrapperRef size fully matched the size of parent foreignObject
-        const MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME = 2;
-        const width = this.edgeLabelWrapperRef.nativeElement.clientWidth + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
-        const height = this.edgeLabelWrapperRef.nativeElement.clientHeight + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
-        this.model.size.set({ width, height });
-    }
-    getLabelContext() {
-        return {
-            $implicit: {
-                edge: this.edgeModel.edge,
-                label: this.model.edgeLabel
-            }
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: { model: "model", edgeModel: "edgeModel", point: "point", htmlTemplate: "htmlTemplate" }, viewQueries: [{ propertyName: "edgeLabelWrapperRef", first: true, predicate: ["edgeLabelWrapper"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n  [attr.x]=\"edgeLabelPoint().x\"\n  [attr.y]=\"edgeLabelPoint().y\"\n  [attr.width]=\"model.size().width\"\n  [attr.height]=\"model.size().height\"\n  *ngIf=\"model.edgeLabel.type === 'html-template' && htmlTemplate\"\n>\n  <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n    <ng-container\n      *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\"\n    />\n  </div>\n</svg:foreignObject>\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-__decorate([
-    Microtask
-], EdgeLabelComponent.prototype, "ngAfterViewInit", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeLabelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:foreignObject\n  [attr.x]=\"edgeLabelPoint().x\"\n  [attr.y]=\"edgeLabelPoint().y\"\n  [attr.width]=\"model.size().width\"\n  [attr.height]=\"model.size().height\"\n  *ngIf=\"model.edgeLabel.type === 'html-template' && htmlTemplate\"\n>\n  <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n    <ng-container\n      *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\"\n    />\n  </div>\n</svg:foreignObject>\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], edgeModel: [{
-                type: Input
-            }], point: [{
-                type: Input
-            }], htmlTemplate: [{
-                type: Input
-            }], edgeLabelWrapperRef: [{
-                type: ViewChild,
-                args: ['edgeLabelWrapper']
-            }], ngAfterViewInit: [] } });
-
-class EdgeComponent {
-    constructor() {
-        this.injector = inject(Injector);
-        this.selectionService = inject(SelectionService);
-        this.flowSettingsService = inject(FlowSettingsService);
-        this.markerStartUrl = computed(() => {
-            const marker = this.model.edge.markers?.start;
-            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
-        });
-        this.markerEndUrl = computed(() => {
-            const marker = this.model.edge.markers?.end;
-            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
-        });
-    }
-    ngOnInit() {
-        this.edgeContext = {
-            $implicit: {
-                // TODO: check if edge could change
-                edge: this.model.edge,
-                path: computed(() => this.model.path().path),
-                markerStart: this.markerStartUrl,
-                markerEnd: this.markerEndUrl,
-                selected: this.model.selected.asReadonly()
-            }
-        };
-    }
-    onEdgeMouseDown() {
-        if (this.flowSettingsService.entitiesSelectable()) {
-            this.selectionService.select(this.model);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EdgeComponent, selector: "g[edge]", inputs: { model: "model", edgeTemplate: "edgeTemplate", edgeLabelHtmlTemplate: "edgeLabelHtmlTemplate" }, host: { classAttribute: "selectable" }, ngImport: i0, template: "<svg:path\n  *ngIf=\"model.type === 'default'\"\n  (mousedown)=\"onEdgeMouseDown()\"\n  [attr.d]=\"model.path().path\"\n  [attr.marker-start]=\"markerStartUrl()\"\n  [attr.marker-end]=\"markerEndUrl()\"\n  class=\"edge\"\n  [class.edge_selected]=\"model.selected()\"\n/>\n\n<ng-container *ngIf=\"model.type === 'template' && edgeTemplate\">\n  <ng-container\n    [ngTemplateOutlet]=\"edgeTemplate\"\n    [ngTemplateOutletContext]=\"edgeContext\"\n    [ngTemplateOutletInjector]=\"injector\"\n  ></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"model.edgeLabels?.start as label\">\n  <svg:g edgeLabel\n    [model]=\"label\"\n    [point]=\"model.path().points.start\"\n    [edgeModel]=\"model\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate\"\n  />\n</ng-container>\n\n<ng-container *ngIf=\"model.edgeLabels?.center as label\">\n  <svg:g edgeLabel\n    [model]=\"label\"\n    [point]=\"model.path().points.center\"\n    [edgeModel]=\"model\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate\"\n  />\n</ng-container>\n\n<ng-container *ngIf=\"model.edgeLabels?.end as label\">\n  <svg:g edgeLabel\n    [model]=\"label\"\n    [point]=\"model.path().points.end\"\n    [edgeModel]=\"model\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate\"\n  />\n</ng-container>\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: ["model", "edgeModel", "point", "htmlTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'g[edge]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        'class': 'selectable'
-                    }, template: "<svg:path\n  *ngIf=\"model.type === 'default'\"\n  (mousedown)=\"onEdgeMouseDown()\"\n  [attr.d]=\"model.path().path\"\n  [attr.marker-start]=\"markerStartUrl()\"\n  [attr.marker-end]=\"markerEndUrl()\"\n  class=\"edge\"\n  [class.edge_selected]=\"model.selected()\"\n/>\n\n<ng-container *ngIf=\"model.type === 'template' && edgeTemplate\">\n  <ng-container\n    [ngTemplateOutlet]=\"edgeTemplate\"\n    [ngTemplateOutletContext]=\"edgeContext\"\n    [ngTemplateOutletInjector]=\"injector\"\n  ></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"model.edgeLabels?.start as label\">\n  <svg:g edgeLabel\n    [model]=\"label\"\n    [point]=\"model.path().points.start\"\n    [edgeModel]=\"model\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate\"\n  />\n</ng-container>\n\n<ng-container *ngIf=\"model.edgeLabels?.center as label\">\n  <svg:g edgeLabel\n    [model]=\"label\"\n    [point]=\"model.path().points.center\"\n    [edgeModel]=\"model\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate\"\n  />\n</ng-container>\n\n<ng-container *ngIf=\"model.edgeLabels?.end as label\">\n  <svg:g edgeLabel\n    [model]=\"label\"\n    [point]=\"model.path().points.end\"\n    [edgeModel]=\"model\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate\"\n  />\n</ng-container>\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}\n"] }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], edgeTemplate: [{
-                type: Input
-            }], edgeLabelHtmlTemplate: [{
-                type: Input
-            }] } });
+            args: [{ standalone: true, selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService, NodeAccessorService], host: {
+                        class: 'vflow-node',
+                    }, imports: [
+                        PointerDirective,
+                        DefaultNodeComponent,
+                        HandleComponent,
+                        NgTemplateOutlet,
+                        NgComponentOutlet,
+                        ResizableComponent,
+                        HandleSizeControllerDirective,
+                    ], template: "<!-- Default node -->\n@if (nodeModel().node.type === \"default\") {\n  @defer {\n    <svg:foreignObject\n      class=\"selectable\"\n      [attr.width]=\"nodeModel().size().width\"\n      [attr.height]=\"nodeModel().size().height\"\n      (pointerStart)=\"pullNode(); selectNode()\"\n    >\n      <default-node\n        #htmlWrapper\n        [selected]=\"nodeModel().selected()\"\n        [style.width]=\"styleWidth()\"\n        [style.height]=\"styleHeight()\"\n        [style.max-width]=\"styleWidth()\"\n        [style.max-height]=\"styleHeight()\"\n      >\n        <div [outerHTML]=\"nodeModel().text()\"></div>\n\n        <handle type=\"source\" position=\"right\"/>\n        <handle type=\"target\" position=\"left\" />\n      </default-node>\n    </svg:foreignObject>\n  }\n}\n\n<!-- Template node -->\n@if (nodeModel().node.type === \"html-template\" && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\"\n  >\n    <div\n      #htmlWrapper\n      class=\"wrapper\"\n      [style.width]=\"styleWidth()\"\n      [style.height]=\"styleHeight()\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: { node: nodeModel().node, selected: nodeModel().selected },\n        }\"\n        [ngTemplateOutletInjector]=\"injector\"\n      />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (nodeModel().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"nodeModel().size().width\"\n    [attr.height]=\"nodeModel().size().height\"\n    (pointerStart)=\"pullNode()\"\n  >\n    <div\n      #htmlWrapper\n      class=\"wrapper\"\n      [style.width]=\"styleWidth()\"\n      [style.height]=\"styleHeight()\"\n    >\n      <ng-container\n        [ngComponentOutlet]=\"$any(nodeModel().node.type)\"\n        [ngComponentOutletInputs]=\"nodeModel().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\"\n      />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (nodeModel().node.type === \"default-group\") {\n  @defer {\n    <svg:rect\n      [resizable]=\"nodeModel().resizable()\"\n      [gap]=\"3\"\n      [resizerColor]=\"nodeModel().color()\"\n      class=\"default-group-node\"\n      rx=\"5\"\n      ry=\"5\"\n      [class.default-group-node_selected]=\"nodeModel().selected()\"\n      [attr.width]=\"nodeModel().size().width\"\n      [attr.height]=\"nodeModel().size().height\"\n      [style.stroke]=\"nodeModel().color()\"\n      [style.fill]=\"nodeModel().color()\"\n      (pointerStart)=\"pullNode(); selectNode()\"\n    />\n  }\n}\n\n<!-- Template group node  -->\n@if (nodeModel().node.type === \"template-group\" && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: {\n          node: nodeModel().node,\n          selected: nodeModel().selected,\n          width: nodeModel().width,\n          height: nodeModel().height,\n        },\n      }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (nodeModel().resizerTemplate(); as template) {\n  @if (nodeModel().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of nodeModel().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      r=\"5\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection(handle)\"\n    />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection(handle)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"handle.template; context: handle.templateContext\"\n      />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"nodeModel().magnetRadius\"\n      [attr.cx]=\"handle.offset().x\"\n      [attr.cy]=\"handle.offset().y\"\n      (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\"\n    />\n  }\n}\n\n<!-- Toolbar -->\n@if (toolbar(); as toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
+        }], propDecorators: { ngOnInit: [], ngAfterViewInit: [] } });
 
 class ConnectionComponent {
     constructor() {
+        this.model = input.required();
+        this.template = input();
         this.flowStatusService = inject(FlowStatusService);
         this.spacePointContext = inject(SpacePointContextDirective);
         this.path = computed(() => {
@@ -2467,9 +2613,15 @@ class ConnectionComponent {
                 const sourcePosition = sourceHandle.rawHandle.position;
                 const targetPoint = this.spacePointContext.svgCurrentSpacePoint();
                 const targetPosition = getOppositePostion(sourceHandle.rawHandle.position);
-                switch (this.model.curve) {
-                    case 'straight': return straightPath(sourcePoint, targetPoint).path;
-                    case 'bezier': return bezierPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                switch (this.model().curve) {
+                    case 'straight':
+                        return straightPath(sourcePoint, targetPoint).path;
+                    case 'bezier':
+                        return bezierPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                    case 'smooth-step':
+                        return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                    case 'step':
+                        return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition, 0).path;
                 }
             }
             if (status.state === 'connection-validation') {
@@ -2484,15 +2636,21 @@ class ConnectionComponent {
                 const targetPosition = status.payload.valid
                     ? targetHandle.rawHandle.position
                     : getOppositePostion(sourceHandle.rawHandle.position);
-                switch (this.model.curve) {
-                    case 'straight': return straightPath(sourcePoint, targetPoint).path;
-                    case 'bezier': return bezierPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                switch (this.model().curve) {
+                    case 'straight':
+                        return straightPath(sourcePoint, targetPoint).path;
+                    case 'bezier':
+                        return bezierPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                    case 'smooth-step':
+                        return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                    case 'step':
+                        return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition, 0).path;
                 }
             }
             return null;
         });
         this.markerUrl = computed(() => {
-            const marker = this.model.settings.marker;
+            const marker = this.model().settings.marker;
             if (marker) {
                 return `url(#${hashCode(JSON.stringify(marker))})`;
             }
@@ -2504,56 +2662,59 @@ class ConnectionComponent {
         return {
             $implicit: {
                 path: this.path,
-                marker: this.markerUrl
-            }
+                marker: this.markerUrl,
+            },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConnectionComponent, selector: "g[connection]", inputs: { model: "model", template: "template" }, ngImport: i0, template: `
-    <ng-container *ngIf="model.type === 'default'">
-      <svg:path
-        *ngIf="path() as path"
-        [attr.d]="path"
-        [attr.marker-end]="markerUrl()"
-        [attr.stroke]="defaultColor"
-        fill="none"
-        stroke-width="2"
-      />
-    </ng-container>
-
-    <ng-container *ngIf="model.type === 'template' && template">
-      <ng-container *ngTemplateOutlet="template; context: getContext()" />
-    </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectionComponent, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConnectionComponent, isStandalone: true, selector: "g[connection]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (model().type === 'default') {
+      @if (path(); as path) {
+        <svg:path
+          [attr.d]="path"
+          [attr.marker-end]="markerUrl()"
+          [attr.stroke]="defaultColor"
+          fill="none"
+          stroke-width="2"
+        />
+      }
+    }
+
+    @if (model().type === 'template') {
+      @if (template(); as template) {
+        <ng-container *ngTemplateOutlet="template; context: getContext()" />
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: true,
                     selector: 'g[connection]',
                     template: `
-    <ng-container *ngIf="model.type === 'default'">
-      <svg:path
-        *ngIf="path() as path"
-        [attr.d]="path"
-        [attr.marker-end]="markerUrl()"
-        [attr.stroke]="defaultColor"
-        fill="none"
-        stroke-width="2"
-      />
-    </ng-container>
-
-    <ng-container *ngIf="model.type === 'template' && template">
-      <ng-container *ngTemplateOutlet="template; context: getContext()" />
-    </ng-container>
+    @if (model().type === 'default') {
+      @if (path(); as path) {
+        <svg:path
+          [attr.d]="path"
+          [attr.marker-end]="markerUrl()"
+          [attr.stroke]="defaultColor"
+          fill="none"
+          stroke-width="2"
+        />
+      }
+    }
+
+    @if (model().type === 'template') {
+      @if (template(); as template) {
+        <ng-container *ngTemplateOutlet="template; context: getContext()" />
+      }
+    }
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet],
                 }]
-        }], propDecorators: { model: [{
-                type: Input,
-                args: [{ required: true }]
-            }], template: [{
-                type: Input
-            }] } });
+        }] });
 function getOppositePostion(position) {
     switch (position) {
         case 'top':
@@ -2567,22 +2728,6 @@ function getOppositePostion(position) {
     }
 }
 
-class DefsComponent {
-    constructor() {
-        this.markers = new Map();
-        this.defaultColor = 'rgb(177, 177, 183)';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefsComponent, selector: "defs[flowDefs]", inputs: { markers: "markers" }, ngImport: i0, template: "<svg:marker\n  *ngFor=\"let marker of markers | keyvalue\"\n  [attr.id]=\"marker.key\"\n  [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n  [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n  [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n  viewBox=\"-10 -10 20 20\"\n  [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\"\n  refX=\"0\"\n  refY=\"0\"\n>\n  <polyline\n    *ngIf=\"marker.value.type === 'arrow-closed' || !marker.value.type\"\n    class=\"marker__arrow_closed\"\n    [style.stroke]=\"marker.value.color ?? defaultColor\"\n    [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n    [style.fill]=\"marker.value.color ?? defaultColor\"\n    points=\"-5,-4 1,0 -5,4 -5,-4\"\n  />\n\n  <polyline\n    *ngIf=\"marker.value.type === 'arrow'\"\n    class=\"marker__arrow_default\"\n    [style.stroke]=\"marker.value.color ?? defaultColor\"\n    [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n    points=\"-5,-4 0,0 -5,4\"\n  />\n</svg:marker>\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'defs[flowDefs]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:marker\n  *ngFor=\"let marker of markers | keyvalue\"\n  [attr.id]=\"marker.key\"\n  [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n  [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n  [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n  viewBox=\"-10 -10 20 20\"\n  [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\"\n  refX=\"0\"\n  refY=\"0\"\n>\n  <polyline\n    *ngIf=\"marker.value.type === 'arrow-closed' || !marker.value.type\"\n    class=\"marker__arrow_closed\"\n    [style.stroke]=\"marker.value.color ?? defaultColor\"\n    [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n    [style.fill]=\"marker.value.color ?? defaultColor\"\n    points=\"-5,-4 1,0 -5,4 -5,-4\"\n  />\n\n  <polyline\n    *ngIf=\"marker.value.type === 'arrow'\"\n    class=\"marker__arrow_default\"\n    [style.stroke]=\"marker.value.color ?? defaultColor\"\n    [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n    points=\"-5,-4 0,0 -5,4\"\n  />\n</svg:marker>\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"] }]
-        }], propDecorators: { markers: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
-
 function id() {
     const randomLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
     return randomLetter + Date.now();
@@ -2592,12 +2737,15 @@ const defaultBg = '#fff';
 const defaultGap = 20;
 const defaultDotSize = 2;
 const defaultDotColor = 'rgb(177, 177, 183)';
+const defaultImageScale = 0.1;
+const defaultRepeated = true;
 class BackgroundComponent {
     constructor() {
         this.viewportService = inject(ViewportService);
         this.rootSvg = inject(RootSvgReferenceDirective).element;
         this.settingsService = inject(FlowSettingsService);
         this.backgroundSignal = this.settingsService.background;
+        // DOTS PATTERN
         this.scaledGap = computed(() => {
             const background = this.backgroundSignal();
             if (background.type === 'dots') {
@@ -2608,7 +2756,13 @@ class BackgroundComponent {
         });
         this.x = computed(() => this.viewportService.readableViewport().x % this.scaledGap());
         this.y = computed(() => this.viewportService.readableViewport().y % this.scaledGap());
-        this.patternColor = computed(() => this.backgroundSignal().color ?? defaultDotColor);
+        this.patternColor = computed(() => {
+            const bg = this.backgroundSignal();
+            if (bg.type === 'dots') {
+                return bg.color ?? defaultDotColor;
+            }
+            return defaultDotColor;
+        });
         this.patternSize = computed(() => {
             const background = this.backgroundSignal();
             if (background.type === 'dots') {
@@ -2616,6 +2770,56 @@ class BackgroundComponent {
             }
             return 0;
         });
+        // IMAGE PATTERN
+        this.bgImageSrc = computed(() => {
+            const background = this.backgroundSignal();
+            return background.type === 'image' ? background.src : '';
+        });
+        this.imageSize = toSignal(toObservable(this.backgroundSignal).pipe(switchMap(() => createImage(this.bgImageSrc())), map((image) => ({ width: image.naturalWidth, height: image.naturalHeight }))), { initialValue: { width: 0, height: 0 } });
+        this.scaledImageWidth = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'image') {
+                const zoom = background.fixed ? 1 : this.viewportService.readableViewport().zoom;
+                return this.imageSize().width * zoom * (background.scale ?? defaultImageScale);
+            }
+            return 0;
+        });
+        this.scaledImageHeight = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'image') {
+                const zoom = background.fixed ? 1 : this.viewportService.readableViewport().zoom;
+                return this.imageSize().height * zoom * (background.scale ?? defaultImageScale);
+            }
+            return 0;
+        });
+        this.imageX = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'image') {
+                if (!background.repeat) {
+                    return background.fixed ? 0 : this.viewportService.readableViewport().x;
+                }
+                return background.fixed
+                    ? 0
+                    : this.viewportService.readableViewport().x % this.scaledImageWidth();
+            }
+            return 0;
+        });
+        this.imageY = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'image') {
+                if (!background.repeat) {
+                    return background.fixed ? 0 : this.viewportService.readableViewport().y;
+                }
+                return background.fixed
+                    ? 0
+                    : this.viewportService.readableViewport().y % this.scaledImageHeight();
+            }
+            return 0;
+        });
+        this.repeated = computed(() => {
+            const background = this.backgroundSignal();
+            return background.type === 'image' && (background.repeat ?? defaultRepeated);
+        });
         // Without ID there will be pattern collision for several flows on the page
         // Later pattern ID may be exposed to API
         this.patternId = id();
@@ -2630,39 +2834,33 @@ class BackgroundComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BackgroundComponent, selector: "g[background]", ngImport: i0, template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BackgroundComponent, isStandalone: true, selector: "g[background]", ngImport: i0, template: "@if (backgroundSignal().type === 'dots') {\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n    >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n      />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n    />\n}\n\n@if (backgroundSignal().type === 'image') {\n  @if (repeated()) {\n    <svg:pattern\n      [attr.id]=\"patternId\"\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      patternUnits=\"userSpaceOnUse\"\n      >\n      <svg:image\n        [attr.href]=\"bgImageSrc()\"\n        [attr.width]=\"scaledImageWidth()\"\n        [attr.height]=\"scaledImageHeight()\"\n        />\n    </svg:pattern>\n\n    <svg:rect\n      x=\"0\"\n      y=\"0\"\n      width=\"100%\"\n      height=\"100%\"\n      [attr.fill]=\"patternUrl\"\n      />\n  }\n\n  @if (!repeated()) {\n    <svg:image\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      [attr.href]=\"bgImageSrc()\"\n      />\n  }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackgroundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BackgroundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'g[background]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n" }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ standalone: true, selector: 'g[background]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (backgroundSignal().type === 'dots') {\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n    >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n      />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n    />\n}\n\n@if (backgroundSignal().type === 'image') {\n  @if (repeated()) {\n    <svg:pattern\n      [attr.id]=\"patternId\"\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      patternUnits=\"userSpaceOnUse\"\n      >\n      <svg:image\n        [attr.href]=\"bgImageSrc()\"\n        [attr.width]=\"scaledImageWidth()\"\n        [attr.height]=\"scaledImageHeight()\"\n        />\n    </svg:pattern>\n\n    <svg:rect\n      x=\"0\"\n      y=\"0\"\n      width=\"100%\"\n      height=\"100%\"\n      [attr.fill]=\"patternUrl\"\n      />\n  }\n\n  @if (!repeated()) {\n    <svg:image\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      [attr.href]=\"bgImageSrc()\"\n      />\n  }\n}\n" }]
+        }], ctorParameters: () => [] });
+function createImage(url) {
+    const image = new Image();
+    image.src = url;
+    return new Promise(resolve => {
+        image.onload = () => resolve(image);
+    });
+}
 
-// TODO: too general purpose nane
-class RootSvgContextDirective {
+class DefsComponent {
     constructor() {
-        this.flowStatusService = inject(FlowStatusService);
-    }
-    // TODO: check for multiple instances on page
-    resetConnection() {
-        const status = this.flowStatusService.status();
-        if (status.state === 'connection-start') {
-            this.flowStatusService.setIdleStatus();
-        }
+        this.markers = input.required();
+        this.defaultColor = 'rgb(177, 177, 183)';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RootSvgContextDirective, selector: "svg[rootSvgContext]", host: { listeners: { "document:mouseup": "resetConnection()", "document:touchend": "resetConnection()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DefsComponent, isStandalone: true, selector: "defs[flowDefs]", inputs: { markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (marker of markers() | keyvalue; track marker) {\n  <svg:marker\n    [attr.id]=\"marker.key\"\n    [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n    [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n    [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n    viewBox=\"-10 -10 20 20\"\n    [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\"\n    refX=\"0\"\n    refY=\"0\"\n  >\n    @if (marker.value.type === \"arrow-closed\" || !marker.value.type) {\n      <polyline\n        class=\"marker__arrow_closed\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        [style.fill]=\"marker.value.color ?? defaultColor\"\n        points=\"-5,-4 1,0 -5,4 -5,-4\"\n      />\n    }\n\n    @if (marker.value.type === \"arrow\") {\n      <polyline\n        class=\"marker__arrow_default\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        points=\"-5,-4 0,0 -5,4\"\n      />\n    }\n  </svg:marker>\n}\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootSvgContextDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'svg[rootSvgContext]' }]
-        }], propDecorators: { resetConnection: [{
-                type: HostListener,
-                args: ['document:mouseup']
-            }, {
-                type: HostListener,
-                args: ['document:touchend']
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'defs[flowDefs]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KeyValuePipe], template: "@for (marker of markers() | keyvalue; track marker) {\n  <svg:marker\n    [attr.id]=\"marker.key\"\n    [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n    [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n    [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n    viewBox=\"-10 -10 20 20\"\n    [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\"\n    refX=\"0\"\n    refY=\"0\"\n  >\n    @if (marker.value.type === \"arrow-closed\" || !marker.value.type) {\n      <polyline\n        class=\"marker__arrow_closed\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        [style.fill]=\"marker.value.color ?? defaultColor\"\n        points=\"-5,-4 1,0 -5,4 -5,-4\"\n      />\n    }\n\n    @if (marker.value.type === \"arrow\") {\n      <polyline\n        class=\"marker__arrow_default\"\n        [style.stroke]=\"marker.value.color ?? defaultColor\"\n        [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n        points=\"-5,-4 0,0 -5,4\"\n      />\n    }\n  </svg:marker>\n}\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"] }]
+        }] });
 
 class FlowSizeControllerDirective {
     constructor() {
@@ -2681,23 +2879,53 @@ class FlowSizeControllerDirective {
             this.flowSettingsService.computedFlowHeight.set(entry.contentRect.height);
         }), takeUntilDestroyed()).subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]", host: { properties: { "attr.width": "flowWidth()", "attr.height": "flowHeight()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: FlowSizeControllerDirective, isStandalone: true, selector: "svg[flowSizeController]", host: { properties: { "attr.width": "flowWidth()", "attr.height": "flowHeight()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSizeControllerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlowSizeControllerDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: true,
                     selector: 'svg[flowSizeController]',
                     host: {
                         '[attr.width]': 'flowWidth()',
                         '[attr.height]': 'flowHeight()'
-                    }
+                    },
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
+
+// TODO: too general purpose nane
+class RootSvgContextDirective {
+    constructor() {
+        this.flowStatusService = inject(FlowStatusService);
+    }
+    // TODO: check for multiple instances on page
+    resetConnection() {
+        const status = this.flowStatusService.status();
+        if (status.state === 'connection-start') {
+            this.flowStatusService.setIdleStatus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootSvgContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: RootSvgContextDirective, isStandalone: true, selector: "svg[rootSvgContext]", host: { listeners: { "document:mouseup": "resetConnection()", "document:touchend": "resetConnection()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RootSvgContextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'svg[rootSvgContext]',
+                }]
+        }], propDecorators: { resetConnection: [{
+                type: HostListener,
+                args: ['document:mouseup']
+            }, {
+                type: HostListener,
+                args: ['document:touchend']
+            }] } });
 
 const connectionControllerHostDirective = {
     directive: ConnectionControllerDirective,
-    outputs: ['onConnect']
+    outputs: ['onConnect'],
 };
 const changesControllerHostDirective = {
     directive: ChangesControllerDirective,
@@ -2731,7 +2959,7 @@ const changesControllerHostDirective = {
         'onEdgesChange.select',
         'onEdgesChange.select.single',
         'onEdgesChange.select.many',
-    ]
+    ],
 };
 class VflowComponent {
     constructor() {
@@ -2745,10 +2973,12 @@ class VflowComponent {
         this.componentEventBusService = inject(ComponentEventBusService);
         this.keyboardService = inject(KeyboardService);
         this.injector = inject(Injector);
-        this.optimization = {
-            computeLayersOnInit: true
-        };
+        this.optimization = input({
+            detachedGroupsLayer: false,
+        });
         this.nodeModels = computed(() => this.nodeRenderingService.nodes());
+        this.groups = computed(() => this.nodeRenderingService.groups());
+        this.nonGroups = computed(() => this.nodeRenderingService.nonGroups());
         this.edgeModels = computed(() => this.flowEntitiesService.validEdges());
         // #endregion
         // #region OUTPUTS
@@ -2757,7 +2987,18 @@ class VflowComponent {
          *
          * @experimental
          */
-        this.onComponentNodeEvent = this.componentEventBusService.event$; // TODO: research how to remove as any
+        this.onComponentNodeEvent = outputFromObservable(this.componentEventBusService.event$); // TODO: research how to remove any
+        // #endregion
+        // #region TEMPLATES
+        this.nodeTemplateDirective = contentChild(NodeHtmlTemplateDirective);
+        this.groupNodeTemplateDirective = contentChild(GroupNodeTemplateDirective);
+        this.edgeTemplateDirective = contentChild(EdgeTemplateDirective);
+        this.edgeLabelHtmlDirective = contentChild(EdgeLabelHtmlTemplateDirective);
+        this.connectionTemplateDirective = contentChild(ConnectionTemplateDirective);
+        // #endregion
+        // #region DIRECTIVES
+        this.mapContext = viewChild(MapContextDirective);
+        this.spacePointContext = viewChild.required(SpacePointContextDirective);
         // #endregion
         // #region SIGNAL_API
         /**
@@ -2767,18 +3008,21 @@ class VflowComponent {
         /**
          * Signal for reading nodes change
          */
-        this.nodesChange = toSignal(this.nodesChangeService.changes$, { initialValue: [] });
+        this.nodesChange = toSignal(this.nodesChangeService.changes$, {
+            initialValue: [],
+        });
         /**
          * Signal to reading edges change
          */
-        this.edgesChange = toSignal(this.edgesChangeService.changes$, { initialValue: [] });
+        this.edgesChange = toSignal(this.edgesChangeService.changes$, {
+            initialValue: [],
+        });
         // #endregion
         // #region RX_API
         /**
          * Observable with viewport change
          */
-        this.viewportChange$ = toObservable(this.viewportService.readableViewport)
-            .pipe(skip(1)); // skip default value that set by signal
+        this.viewportChange$ = toObservable(this.viewportService.readableViewport).pipe(skip(1)); // skip default value that set by signal
         /**
          * Observable with nodes change
          */
@@ -2815,17 +3059,6 @@ class VflowComponent {
     set maxZoom(value) {
         this.flowSettingsService.maxZoom.set(value);
     }
-    /**
-     * Object that controls flow direction.
-     *
-     * For example, if you want to archieve right to left direction
-     * then you need to pass these positions { source: 'left', target: 'right' }
-     *
-     * @deprecated
-     */
-    set handlePositions(handlePositions) {
-        this.flowSettingsService.handlePositions.set(handlePositions);
-    }
     /**
      * Background for flow
      */
@@ -2846,8 +3079,12 @@ class VflowComponent {
      *
      * You need to pass `ConnectionSettings` in this input.
      */
-    set connection(connection) { this.flowEntitiesService.connection.set(connection); }
-    get connection() { return this.flowEntitiesService.connection(); }
+    set connection(connection) {
+        this.flowEntitiesService.connection.set(connection);
+    }
+    get connection() {
+        return this.flowEntitiesService.connection();
+    }
     // #endregion
     // #region MAIN_INPUTS
     /**
@@ -2878,7 +3115,11 @@ class VflowComponent {
      * @param viewport viewport state
      */
     viewportTo(viewport) {
-        this.viewportService.writableViewport.set({ changeType: 'absolute', state: viewport, duration: 0 });
+        this.viewportService.writableViewport.set({
+            changeType: 'absolute',
+            state: viewport,
+            duration: 0,
+        });
     }
     /**
      * Change zoom
@@ -2886,7 +3127,11 @@ class VflowComponent {
      * @param zoom zoom value
      */
     zoomTo(zoom) {
-        this.viewportService.writableViewport.set({ changeType: 'absolute', state: { zoom }, duration: 0 });
+        this.viewportService.writableViewport.set({
+            changeType: 'absolute',
+            state: { zoom },
+            duration: 0,
+        });
     }
     /**
      * Move to specified coordinate
@@ -2894,7 +3139,11 @@ class VflowComponent {
      * @param point point where to move
      */
     panTo(point) {
-        this.viewportService.writableViewport.set({ changeType: 'absolute', state: point, duration: 0 });
+        this.viewportService.writableViewport.set({
+            changeType: 'absolute',
+            state: point,
+            duration: 0,
+        });
     }
     fitView(options) {
         this.viewportService.fitView(options);
@@ -2911,13 +3160,13 @@ class VflowComponent {
      * Sync method to get detached edges
      */
     getDetachedEdges() {
-        return this.flowEntitiesService.getDetachedEdges().map(e => e.edge);
+        return this.flowEntitiesService.getDetachedEdges().map((e) => e.edge);
     }
     /**
      * Convert point received from document to point on the flow
      */
     documentPointToFlowPoint(point) {
-        return this.spacePointContext.documentPointToFlowPoint(point);
+        return this.spacePointContext().documentPointToFlowPoint(point);
     }
     // #endregion
     trackNodes(idx, { node }) {
@@ -2927,19 +3176,17 @@ class VflowComponent {
         return edge;
     }
     setInitialNodesOrder() {
-        if (this.optimization.computeLayersOnInit) {
-            this.nodeModels().forEach(model => {
-                switch (model.node.type) {
-                    case 'default-group':
-                    case 'template-group': {
-                        this.nodeRenderingService.pullNode(model);
-                    }
+        this.nodeModels().forEach((model) => {
+            switch (model.node.type) {
+                case 'default-group':
+                case 'template-group': {
+                    this.nodeRenderingService.pullNode(model);
                 }
-            });
-        }
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: VflowComponent, selector: "vflow", inputs: { view: "view", minZoom: "minZoom", maxZoom: "maxZoom", handlePositions: "handlePositions", background: "background", optimization: "optimization", entitiesSelectable: "entitiesSelectable", keyboardShortcuts: "keyboardShortcuts", connection: ["connection", "connection", (settings) => new ConnectionModel(settings)], nodes: "nodes", edges: "edges" }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowComponent, isStandalone: true, selector: "vflow", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new ConnectionModel(settings) }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
             DraggableService,
             ViewportService,
             FlowStatusService,
@@ -2951,12 +3198,12 @@ class VflowComponent {
             FlowSettingsService,
             ComponentEventBusService,
             KeyboardService,
-            OverlaysService
-        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true }], hostDirectives: [{ directive: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { 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\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g background />\n\n  <svg:g\n    mapContext\n    spacePointContext\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeTemplate]=\"nodeTemplateDirective?.templateRef\"\n      [groupNodeTemplate]=\"groupNodeTemplateDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n  <!-- Minimap -->\n  <ng-container *ngIf=\"minimap() as minimap\">\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  </ng-container>\n</svg:svg>\n\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            OverlaysService,
+        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, 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: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { 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\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective()?.templateRef\"\n    />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\"\n        />\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      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\"\n        />\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      }\n      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\"\n        />\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: ["nodeModel", "nodeTemplate", "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vflow', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ standalone: true, selector: 'vflow', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         DraggableService,
                         ViewportService,
                         FlowStatusService,
@@ -2968,60 +3215,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FlowSettingsService,
                         ComponentEventBusService,
                         KeyboardService,
-                        OverlaysService
+                        OverlaysService,
                     ], hostDirectives: [
                         connectionControllerHostDirective,
-                        changesControllerHostDirective
-                    ], template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g background />\n\n  <svg:g\n    mapContext\n    spacePointContext\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeTemplate]=\"nodeTemplateDirective?.templateRef\"\n      [groupNodeTemplate]=\"groupNodeTemplateDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n  <!-- Minimap -->\n  <ng-container *ngIf=\"minimap() as minimap\">\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  </ng-container>\n</svg:svg>\n\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
+                        changesControllerHostDirective,
+                    ], imports: [
+                        RootSvgReferenceDirective,
+                        RootSvgContextDirective,
+                        RootPointerDirective,
+                        FlowSizeControllerDirective,
+                        DefsComponent,
+                        BackgroundComponent,
+                        MapContextDirective,
+                        SpacePointContextDirective,
+                        ConnectionComponent,
+                        NodeComponent,
+                        EdgeComponent,
+                        NgTemplateOutlet,
+                    ], template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g background />\n\n  <svg:g mapContext spacePointContext>\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective()?.templateRef\"\n    />\n\n    @if (optimization().detachedGroupsLayer) {\n      <!-- Groups -->\n      @for (model of groups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\"\n        />\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      }\n      <!-- Nodes -->\n      @for (model of nonGroups(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\"\n        />\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      }\n      <!-- Nodes -->\n      @for (model of nodeModels(); track trackNodes($index, model)) {\n        <svg:g\n          node\n          [nodeModel]=\"model\"\n          [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n          [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n          [attr.transform]=\"model.pointTransform()\"\n        />\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"] }]
         }], propDecorators: { view: [{
                 type: Input
             }], minZoom: [{
                 type: Input
             }], maxZoom: [{
                 type: Input
-            }], handlePositions: [{
-                type: Input
             }], background: [{
                 type: Input
-            }], optimization: [{
-                type: Input
             }], entitiesSelectable: [{
                 type: Input
             }], keyboardShortcuts: [{
                 type: Input
             }], connection: [{
                 type: Input,
-                args: [{ transform: (settings) => new ConnectionModel(settings) }]
+                args: [{
+                        transform: (settings) => new ConnectionModel(settings),
+                    }]
             }], nodes: [{
                 type: Input,
                 args: [{ required: true }]
             }], edges: [{
                 type: Input
-            }], onComponentNodeEvent: [{
-                type: Output
-            }], nodeTemplateDirective: [{
-                type: ContentChild,
-                args: [NodeHtmlTemplateDirective]
-            }], groupNodeTemplateDirective: [{
-                type: ContentChild,
-                args: [GroupNodeTemplateDirective]
-            }], edgeTemplateDirective: [{
-                type: ContentChild,
-                args: [EdgeTemplateDirective]
-            }], edgeLabelHtmlDirective: [{
-                type: ContentChild,
-                args: [EdgeLabelHtmlTemplateDirective]
-            }], connectionTemplateDirective: [{
-                type: ContentChild,
-                args: [ConnectionTemplateDirective]
-            }], mapContext: [{
-                type: ViewChild,
-                args: [MapContextDirective]
-            }], spacePointContext: [{
-                type: ViewChild,
-                args: [SpacePointContextDirective]
             }] } });
 
+class DragHandleDirective {
+    get model() {
+        return this.nodeAccessor.model();
+    }
+    constructor() {
+        this.nodeAccessor = inject(NodeAccessorService);
+        this.model.dragHandlesCount.update((count) => count + 1);
+        inject(DestroyRef).onDestroy(() => {
+            this.model.dragHandlesCount.update(count => count - 1);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: DragHandleDirective, isStandalone: true, selector: "[dragHandle]", host: { classAttribute: "vflow-drag-handle" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragHandleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[dragHandle]',
+                    host: {
+                        'class': 'vflow-drag-handle'
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
 class SelectableDirective {
     constructor() {
         this.flowSettingsService = inject(FlowSettingsService);
@@ -3037,19 +3297,22 @@ class SelectableDirective {
     }
     entity() {
         if (this.parentNode) {
-            return this.parentNode.nodeModel;
+            return this.parentNode.nodeModel();
         }
         else if (this.parentEdge) {
-            return this.parentEdge.model;
+            return this.parentEdge.model();
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectableDirective, selector: "[selectable]", host: { listeners: { "mousedown": "onMousedown()", "touchstart": "onMousedown()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SelectableDirective, isStandalone: true, selector: "[selectable]", host: { listeners: { "mousedown": "onMousedown()", "touchstart": "onMousedown()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[selectable]' }]
+            args: [{
+                    standalone: true,
+                    selector: '[selectable]',
+                }]
         }], propDecorators: { onMousedown: [{
                 type: HostListener,
                 args: ['mousedown']
@@ -3073,38 +3336,61 @@ class MiniMapComponent {
         /**
          * The color outside the viewport (invisible area)
          */
-        this.maskColor = `rgba(215, 215, 215, 0.6)`;
+        this.maskColor = input(`rgba(215, 215, 215, 0.6)`);
         /**
          * The minimap stroke color
          */
-        this.strokeColor = `rgb(200, 200, 200)`;
+        this.strokeColor = input(`rgb(200, 200, 200)`);
+        /**
+         * The corner of the flow where to render a mini-map
+         */
+        this.position = input('bottom-right');
+        /**
+         * Make a minimap bigger on hover
+         */
+        this.scaleOnHover = input(false);
+        this.minimap = viewChild.required('minimap');
         this.minimapOffset = 10;
         this.minimapScale = computed(() => {
-            if (this.scaleOnHoverSignal()) {
+            if (this.scaleOnHover()) {
                 return this.hovered() ? 0.4 : 0.2;
             }
             return 0.2;
         });
-        this.viewportColor = computed(() => this.flowSettingsService.background().color ?? '#fff');
+        this.viewportColor = computed(() => {
+            const bg = this.flowSettingsService.background();
+            if (bg.type === 'dots' || bg.type === 'solid') {
+                return bg.color ?? '#fff';
+            }
+            return '#fff';
+        });
         this.hovered = signal(false);
         this.minimapPoint = computed(() => {
-            switch (this.minimapPosition()) {
+            switch (this.position()) {
                 case 'top-left':
                     return { x: this.minimapOffset, y: this.minimapOffset };
                 case 'top-right':
                     return {
-                        x: this.flowSettingsService.computedFlowWidth() - this.minimapWidth() - this.minimapOffset,
-                        y: this.minimapOffset
+                        x: this.flowSettingsService.computedFlowWidth() -
+                            this.minimapWidth() -
+                            this.minimapOffset,
+                        y: this.minimapOffset,
                     };
                 case 'bottom-left':
                     return {
                         x: this.minimapOffset,
-                        y: this.flowSettingsService.computedFlowHeight() - this.minimapHeight() - this.minimapOffset
+                        y: this.flowSettingsService.computedFlowHeight() -
+                            this.minimapHeight() -
+                            this.minimapOffset,
                     };
                 case 'bottom-right':
                     return {
-                        x: this.flowSettingsService.computedFlowWidth() - this.minimapWidth() - this.minimapOffset,
-                        y: this.flowSettingsService.computedFlowHeight() - this.minimapHeight() - this.minimapOffset
+                        x: this.flowSettingsService.computedFlowWidth() -
+                            this.minimapWidth() -
+                            this.minimapOffset,
+                        y: this.flowSettingsService.computedFlowHeight() -
+                            this.minimapHeight() -
+                            this.minimapOffset,
                     };
             }
         });
@@ -3131,47 +3417,22 @@ class MiniMapComponent {
             const scale = vport.zoom * this.minimapScale();
             return `translate(${x} ${y}) scale(${scale})`;
         });
-        this.minimapPosition = signal('bottom-right');
-        this.scaleOnHoverSignal = signal(false);
-    }
-    /**
-     * The corner of the flow where to render a mini-map
-     */
-    set position(value) {
-        this.minimapPosition.set(value);
-    }
-    /**
-     * Make a minimap bigger on hover
-     */
-    set scaleOnHover(value) {
-        this.scaleOnHoverSignal.set(value);
     }
     ngOnInit() {
         const model = new MinimapModel();
-        model.template.set(this.minimap);
+        model.template.set(this.minimap());
         this.entitiesService.minimap.set(model);
     }
     trackNodes(idx, { node }) {
         return node;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MiniMapComponent, selector: "mini-map", inputs: { position: "position", maskColor: "maskColor", strokeColor: "strokeColor", scaleOnHover: "scaleOnHover" }, viewQueries: [{ propertyName: "minimap", first: true, predicate: ["minimap"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #minimap>\n  <svg:rect\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor\"\n    fill=\"none\"\n  />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\"\n  >\n    <svg:rect\n      [attr.width]=\"minimapWidth()\"\n      [attr.height]=\"minimapHeight()\"\n      [attr.fill]=\"maskColor\"\n    />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\"\n      />\n\n      <ng-container\n        *ngFor=\"let model of entitiesService.nodes(); trackBy: trackNodes\"\n      >\n        <svg:foreignObject\n          *ngIf=\"model.node.type === 'default' || model.node.type === 'html-template' || model.isComponentType\"\n          [attr.transform]=\"model.pointTransform()\"\n          [attr.width]=\"model.size().width\"\n          [attr.height]=\"model.size().height\"\n        >\n          <default-node\n            [selected]=\"model.selected()\"\n            [style.width.px]=\"model.size().width\"\n            [style.height.px]=\"model.size().height\"\n            [style.max-width.px]=\"model.size().width\"\n            [style.max-height.px]=\"model.size().height\"\n          >\n            <div [outerHTML]=\"model.text()\"></div>\n          </default-node>\n        </svg:foreignObject>\n\n        <svg:rect\n          *ngIf=\"model.node.type === 'default-group' || model.node.type === 'template-group'\"\n          class=\"default-group-node\"\n          rx=\"5\"\n          ry=\"5\"\n          [attr.transform]=\"model.pointTransform()\"\n          [class.default-group-node_selected]=\"model.selected()\"\n          [attr.width]=\"model.size().width\"\n          [attr.height]=\"model.size().height\"\n          [style.stroke]=\"model.color()\"\n          [style.fill]=\"model.color()\"\n        />\n\n      </ng-container>\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MiniMapComponent, isStandalone: true, selector: "mini-map", inputs: { maskColor: { classPropertyName: "maskColor", publicName: "maskColor", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scaleOnHover: { classPropertyName: "scaleOnHover", publicName: "scaleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "minimap", first: true, predicate: ["minimap"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #minimap>\n  <svg:rect\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor()\"\n    fill=\"none\"\n  />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\"\n  >\n    <svg:rect\n      [attr.width]=\"minimapWidth()\"\n      [attr.height]=\"minimapHeight()\"\n      [attr.fill]=\"maskColor()\"\n    />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\"\n      />\n\n      @for (model of entitiesService.nodes(); track trackNodes($index, model)) {\n        <ng-container>\n          @if (\n            model.node.type === \"default\" ||\n            model.node.type === \"html-template\" ||\n            model.isComponentType\n          ) {\n            <svg:foreignObject\n              [attr.transform]=\"model.pointTransform()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n            >\n              <default-node\n                [selected]=\"model.selected()\"\n                [style.width.px]=\"model.size().width\"\n                [style.height.px]=\"model.size().height\"\n                [style.max-width.px]=\"model.size().width\"\n                [style.max-height.px]=\"model.size().height\"\n              >\n                <div [outerHTML]=\"model.text()\"></div>\n              </default-node>\n            </svg:foreignObject>\n          }\n          @if (\n            model.node.type === \"default-group\" ||\n            model.node.type === \"template-group\"\n          ) {\n            <svg:rect\n              class=\"default-group-node\"\n              rx=\"5\"\n              ry=\"5\"\n              [attr.transform]=\"model.pointTransform()\"\n              [class.default-group-node_selected]=\"model.selected()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n              [style.stroke]=\"model.color()\"\n              [style.fill]=\"model.color()\"\n            />\n          }\n        </ng-container>\n      }\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"], dependencies: [{ kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniMapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mini-map', template: "<ng-template #minimap>\n  <svg:rect\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor\"\n    fill=\"none\"\n  />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\"\n  >\n    <svg:rect\n      [attr.width]=\"minimapWidth()\"\n      [attr.height]=\"minimapHeight()\"\n      [attr.fill]=\"maskColor\"\n    />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\"\n      />\n\n      <ng-container\n        *ngFor=\"let model of entitiesService.nodes(); trackBy: trackNodes\"\n      >\n        <svg:foreignObject\n          *ngIf=\"model.node.type === 'default' || model.node.type === 'html-template' || model.isComponentType\"\n          [attr.transform]=\"model.pointTransform()\"\n          [attr.width]=\"model.size().width\"\n          [attr.height]=\"model.size().height\"\n        >\n          <default-node\n            [selected]=\"model.selected()\"\n            [style.width.px]=\"model.size().width\"\n            [style.height.px]=\"model.size().height\"\n            [style.max-width.px]=\"model.size().width\"\n            [style.max-height.px]=\"model.size().height\"\n          >\n            <div [outerHTML]=\"model.text()\"></div>\n          </default-node>\n        </svg:foreignObject>\n\n        <svg:rect\n          *ngIf=\"model.node.type === 'default-group' || model.node.type === 'template-group'\"\n          class=\"default-group-node\"\n          rx=\"5\"\n          ry=\"5\"\n          [attr.transform]=\"model.pointTransform()\"\n          [class.default-group-node_selected]=\"model.selected()\"\n          [attr.width]=\"model.size().width\"\n          [attr.height]=\"model.size().height\"\n          [style.stroke]=\"model.color()\"\n          [style.fill]=\"model.color()\"\n        />\n\n      </ng-container>\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"] }]
-        }], propDecorators: { position: [{
-                type: Input
-            }], maskColor: [{
-                type: Input
-            }], strokeColor: [{
-                type: Input
-            }], scaleOnHover: [{
-                type: Input
-            }], minimap: [{
-                type: ViewChild,
-                args: ['minimap', { static: true }]
-            }] } });
+            args: [{ standalone: true, selector: 'mini-map', imports: [DefaultNodeComponent], template: "<ng-template #minimap>\n  <svg:rect\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor()\"\n    fill=\"none\"\n  />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\"\n  >\n    <svg:rect\n      [attr.width]=\"minimapWidth()\"\n      [attr.height]=\"minimapHeight()\"\n      [attr.fill]=\"maskColor()\"\n    />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\"\n      />\n\n      @for (model of entitiesService.nodes(); track trackNodes($index, model)) {\n        <ng-container>\n          @if (\n            model.node.type === \"default\" ||\n            model.node.type === \"html-template\" ||\n            model.isComponentType\n          ) {\n            <svg:foreignObject\n              [attr.transform]=\"model.pointTransform()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n            >\n              <default-node\n                [selected]=\"model.selected()\"\n                [style.width.px]=\"model.size().width\"\n                [style.height.px]=\"model.size().height\"\n                [style.max-width.px]=\"model.size().width\"\n                [style.max-height.px]=\"model.size().height\"\n              >\n                <div [outerHTML]=\"model.text()\"></div>\n              </default-node>\n            </svg:foreignObject>\n          }\n          @if (\n            model.node.type === \"default-group\" ||\n            model.node.type === \"template-group\"\n          ) {\n            <svg:rect\n              class=\"default-group-node\"\n              rx=\"5\"\n              ry=\"5\"\n              [attr.transform]=\"model.pointTransform()\"\n              [class.default-group-node_selected]=\"model.selected()\"\n              [attr.width]=\"model.size().width\"\n              [attr.height]=\"model.size().height\"\n              [style.stroke]=\"model.color()\"\n              [style.fill]=\"model.color()\"\n            />\n          }\n        </ng-container>\n      }\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"] }]
+        }] });
 
 class ToolbarModel {
     constructor(node) {
@@ -3212,114 +3473,67 @@ class NodeToolbarComponent {
     constructor() {
         this.overlaysService = inject(OverlaysService);
         this.nodeService = inject(NodeAccessorService);
+        this.position = input('top');
+        this.toolbarContentTemplate = viewChild.required('toolbar');
         this.model = new ToolbarModel(this.nodeService.model());
-    }
-    set position(value) {
-        this.model.position.set(value);
+        effect(() => this.model.position.set(this.position()), { allowSignalWrites: true });
     }
     ngOnInit() {
-        this.model.template.set(this.toolbarContentTemplate);
+        this.model.template.set(this.toolbarContentTemplate());
         this.overlaysService.addToolbar(this.model);
     }
     ngOnDestroy() {
         this.overlaysService.removeToolbar(this.model);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeToolbarComponent, selector: "node-toolbar", inputs: { position: "position" }, viewQueries: [{ propertyName: "toolbarContentTemplate", first: true, predicate: ["toolbar"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: NodeToolbarComponent, isStandalone: true, selector: "node-toolbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "toolbarContentTemplate", first: true, predicate: ["toolbar"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #toolbar>
       <div class="wrapper" nodeToolbarWrapper [model]="model">
         <ng-content />
       </div>
     </ng-template>
-  `, isInline: true, styles: [".wrapper{width:max-content}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NodeToolbarWrapperDirective; }), selector: "[nodeToolbarWrapper]", inputs: ["model"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".wrapper{width:max-content}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => NodeToolbarWrapperDirective), selector: "[nodeToolbarWrapper]", inputs: ["model"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'node-toolbar', template: `
+            args: [{ standalone: true, selector: 'node-toolbar', template: `
     <ng-template #toolbar>
       <div class="wrapper" nodeToolbarWrapper [model]="model">
         <ng-content />
       </div>
     </ng-template>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".wrapper{width:max-content}\n"] }]
-        }], propDecorators: { position: [{
-                type: Input
-            }], toolbarContentTemplate: [{
-                type: ViewChild,
-                args: ['toolbar', { static: true }]
-            }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [forwardRef(() => NodeToolbarWrapperDirective)], styles: [".wrapper{width:max-content}\n"] }]
+        }], ctorParameters: () => [] });
 class NodeToolbarWrapperDirective {
     constructor() {
         this.element = inject(ElementRef);
+        this.model = input.required();
     }
     ngOnInit() {
-        this.model.size.set({
+        this.model().size.set({
             width: this.element.nativeElement.clientWidth,
-            height: this.element.nativeElement.clientHeight
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToolbarWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NodeToolbarWrapperDirective, selector: "[nodeToolbarWrapper]", inputs: { model: "model" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToolbarWrapperDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[nodeToolbarWrapper]' }]
-        }], propDecorators: { model: [{
-                type: Input
-            }] } });
-
-class DragHandleDirective {
-    get model() {
-        return this.nodeAccessor.model();
-    }
-    constructor() {
-        this.nodeAccessor = inject(NodeAccessorService);
-        this.model.dragHandlesCount.update((count) => count + 1);
-        inject(DestroyRef).onDestroy(() => {
-            this.model.dragHandlesCount.update(count => count - 1);
+            height: this.element.nativeElement.clientHeight,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragHandleDirective, selector: "[dragHandle]", host: { classAttribute: "vflow-drag-handle" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: NodeToolbarWrapperDirective, isStandalone: true, selector: "[nodeToolbarWrapper]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarWrapperDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dragHandle]',
-                    host: {
-                        'class': 'vflow-drag-handle'
-                    }
+                    selector: '[nodeToolbarWrapper]',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return []; } });
+        }] });
 
-const components = [
+const Vflow = [
     VflowComponent,
-    NodeComponent,
-    DefaultNodeComponent,
-    EdgeComponent,
-    EdgeLabelComponent,
-    ConnectionComponent,
     HandleComponent,
-    DefsComponent,
-    BackgroundComponent,
     ResizableComponent,
-    MiniMapComponent,
-    NodeToolbarComponent
-];
-const directives = [
-    SpacePointContextDirective,
-    MapContextDirective,
-    RootSvgReferenceDirective,
-    RootSvgContextDirective,
-    HandleSizeControllerDirective,
     SelectableDirective,
+    MiniMapComponent,
+    NodeToolbarComponent,
     DragHandleDirective,
-    PointerDirective,
-    RootPointerDirective,
-    FlowSizeControllerDirective,
-    NodeToolbarWrapperDirective
-];
-const templateDirectives = [
     NodeHtmlTemplateDirective,
     GroupNodeTemplateDirective,
     EdgeLabelHtmlTemplateDirective,
@@ -3327,65 +3541,6 @@ const templateDirectives = [
     ConnectionTemplateDirective,
     HandleTemplateDirective
 ];
-class VflowModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: VflowModule, declarations: [VflowComponent,
-            NodeComponent,
-            DefaultNodeComponent,
-            EdgeComponent,
-            EdgeLabelComponent,
-            ConnectionComponent,
-            HandleComponent,
-            DefsComponent,
-            BackgroundComponent,
-            ResizableComponent,
-            MiniMapComponent,
-            NodeToolbarComponent, SpacePointContextDirective,
-            MapContextDirective,
-            RootSvgReferenceDirective,
-            RootSvgContextDirective,
-            HandleSizeControllerDirective,
-            SelectableDirective,
-            DragHandleDirective,
-            PointerDirective,
-            RootPointerDirective,
-            FlowSizeControllerDirective,
-            NodeToolbarWrapperDirective, NodeHtmlTemplateDirective,
-            GroupNodeTemplateDirective,
-            EdgeLabelHtmlTemplateDirective,
-            EdgeTemplateDirective,
-            ConnectionTemplateDirective,
-            HandleTemplateDirective], imports: [NgIf, NgFor, NgTemplateOutlet, NgComponentOutlet, KeyValuePipe], exports: [VflowComponent,
-            HandleComponent,
-            ResizableComponent,
-            SelectableDirective,
-            MiniMapComponent,
-            NodeToolbarComponent,
-            DragHandleDirective, NodeHtmlTemplateDirective,
-            GroupNodeTemplateDirective,
-            EdgeLabelHtmlTemplateDirective,
-            EdgeTemplateDirective,
-            ConnectionTemplateDirective,
-            HandleTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [NgIf, NgFor, NgTemplateOutlet, NgComponentOutlet, KeyValuePipe],
-                    exports: [
-                        VflowComponent,
-                        HandleComponent,
-                        ResizableComponent,
-                        SelectableDirective,
-                        MiniMapComponent,
-                        NodeToolbarComponent,
-                        DragHandleDirective,
-                        ...templateDirectives
-                    ],
-                    declarations: [...components, ...directives, ...templateDirectives],
-                }]
-        }] });
 
 const mockModel = () => new NodeModel({ id: 'mock', type: 'default', point: { x: 0, y: 0 } });
 function provideCustomNodeMocks() {
@@ -3442,11 +3597,11 @@ function provideCustomNodeMocks() {
     ];
 }
 
-// Modules
+// Standalone Util
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, DragHandleDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, MiniMapComponent, NodeHtmlTemplateDirective, NodeToolbarComponent, NodeToolbarWrapperDirective, ResizableComponent, SelectableDirective, VflowComponent, VflowModule, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, provideCustomNodeMocks };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, DragHandleDirective, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, MiniMapComponent, NodeHtmlTemplateDirective, NodeToolbarComponent, NodeToolbarWrapperDirective, ResizableComponent, SelectableDirective, Vflow, VflowComponent, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, provideCustomNodeMocks };
 //# sourceMappingURL=ngx-vflow.mjs.map