@foblex/flow 1.2.3 → 1.2.5

package/fesm2022/foblex-flow.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Input, Directive, Injectable, ContentChild, Inject, ViewChild, Optional, SkipSelf, EventEmitter, Output, ContentChildren, HostBinding, NgModule } from '@angular/core';
-import { TransformModelExtensions, DomElementExtensions, RectExtensions, sanitizeElementId, PointExtensions, Point, VectorExtensions, SizeExtensions, BooleanExtensions, EventExtensions, MouseEventExtensions, IDragAndDropBase } from '@foblex/core';
-import { Subject, Observable, Subscription, startWith, debounceTime, takeUntil } from 'rxjs';
+import { InjectionToken, Component, ChangeDetectionStrategy, Input, Directive, Injectable, ContentChild, Inject, ViewChild, ContentChildren, Optional, SkipSelf, EventEmitter, Output, HostBinding, NgModule } from '@angular/core';
+import { TransformModelExtensions, DomElementExtensions, RectExtensions, sanitizeElementId, PointExtensions, Point, GuidExtensions, VectorExtensions, SizeExtensions, BooleanExtensions, EventExtensions, MouseEventExtensions, IDragAndDropBase } from '@foblex/core';
+import { Subject, Observable, Subscription, startWith, debounceTime } from 'rxjs';
 import { DOCUMENT, CommonModule } from '@angular/common';
 
 const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
@@ -72,19 +72,19 @@ class FCellPatternComponent {
         this.transform = transform;
         this.redraw();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FCellPatternComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FCellPatternComponent, isStandalone: true, selector: "f-cell-pattern", inputs: { id: "id", verticalLineColor: "verticalLineColor", horizontalLineColor: "horizontalLineColor" }, host: { properties: { "attr.id": "id" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FCellPatternComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FCellPatternComponent, isStandalone: true, selector: "f-cell-pattern", inputs: { id: "id", verticalLineColor: "verticalLineColor", horizontalLineColor: "horizontalLineColor" }, host: { properties: { "attr.id": "id" } }, providers: [
             { provide: F_BACKGROUND_PATTERN, useExisting: FCellPatternComponent }
         ], ngImport: i0, template: "<ng-container></ng-container>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FCellPatternComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FCellPatternComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-cell-pattern", standalone: true, host: {
                         '[attr.id]': 'id'
                     }, providers: [
                         { provide: F_BACKGROUND_PATTERN, useExisting: FCellPatternComponent }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container></ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
                 type: Input
             }], verticalLineColor: [{
                 type: Input
@@ -94,10 +94,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
 
 const F_BACKGROUND = new InjectionToken('F_BACKGROUND');
 class FBackgroundBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FBackgroundBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FBackgroundBase, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FBackgroundBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FBackgroundBase, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FBackgroundBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FBackgroundBase, decorators: [{
             type: Directive
         }] });
 
@@ -159,10 +159,10 @@ class FComponentsStore {
         this.fConnections = this.fConnections.filter(c => c !== connection);
         this.changes.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FComponentsStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FComponentsStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FComponentsStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FComponentsStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FComponentsStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FComponentsStore, decorators: [{
             type: Injectable
         }] });
 
@@ -207,15 +207,15 @@ class FBackgroundComponent extends FBackgroundBase {
     ngOnDestroy() {
         this.fComponentsStore.fBackground = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FBackgroundComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FBackgroundComponent, selector: "f-background", host: { classAttribute: "f-component f-background" }, providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundComponent }], queries: [{ propertyName: "fBackgroundPattern", first: true, predicate: F_BACKGROUND_PATTERN, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<svg>\n    <ng-content></ng-content>\n\n<!--    <rect width=\"100%\" height=\"100%\" fill=\"url(#background-pattern)\"></rect>-->\n</svg>\n", styles: [":host{position:absolute;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FBackgroundComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FBackgroundComponent, selector: "f-background", host: { classAttribute: "f-component f-background" }, providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundComponent }], queries: [{ propertyName: "fBackgroundPattern", first: true, predicate: F_BACKGROUND_PATTERN, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<svg>\n    <ng-content></ng-content>\n\n<!--    <rect width=\"100%\" height=\"100%\" fill=\"url(#background-pattern)\"></rect>-->\n</svg>\n", styles: [":host{position:absolute;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FBackgroundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FBackgroundComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-background", host: {
                         'class': 'f-component f-background'
                     }, providers: [{ provide: F_BACKGROUND, useExisting: FBackgroundComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg>\n    <ng-content></ng-content>\n\n<!--    <rect width=\"100%\" height=\"100%\" fill=\"url(#background-pattern)\"></rect>-->\n</svg>\n", styles: [":host{position:absolute;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}:host svg{width:100%;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FComponentsStore }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { fBackgroundPattern: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }, { type: i0.ChangeDetectorRef }], propDecorators: { fBackgroundPattern: [{
                 type: ContentChild,
                 args: [F_BACKGROUND_PATTERN, { static: true }]
             }] } });
@@ -324,10 +324,10 @@ class FConnectionTextPathDirective {
         const symbolWidth = metrics.width / text.length;
         return symbolWidth;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionTextPathDirective, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FConnectionTextPathDirective, selector: "textPath[f-connection-text-path]", host: { properties: { "attr.href": "linkToConnection" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionTextPathDirective, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FConnectionTextPathDirective, selector: "textPath[f-connection-text-path]", host: { properties: { "attr.href": "linkToConnection" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionTextPathDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionTextPathDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'textPath[f-connection-text-path]',
@@ -335,10 +335,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         '[attr.href]': 'linkToConnection'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [F_CONNECTION]
-                }] }]; } });
+                }] }] });
 
 const CONNECTION_TEXT = new InjectionToken('CONNECTION_TEXT');
 
@@ -383,19 +383,19 @@ class FConnectionTextComponent {
         const vectorLength = PointExtensions.hypotenuse(vector.point1, vector.point2);
         return vectorLength / 2 - ((name || '').length * symbolWidth) / 2;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionTextComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FConnectionTextComponent, selector: "text[f-connection-text]", host: { properties: { "attr.id": "textId" }, classAttribute: "f-component f-connection-text" }, providers: [{ provide: CONNECTION_TEXT, useExisting: FConnectionTextComponent }], viewQueries: [{ propertyName: "textPathDirective", first: true, predicate: FConnectionTextPathDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:textPath f-connection-text-path>\n        {{ text }}\n    </svg:textPath>\n</ng-container>\n", dependencies: [{ kind: "directive", type: FConnectionTextPathDirective, selector: "textPath[f-connection-text-path]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionTextComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FConnectionTextComponent, selector: "text[f-connection-text]", host: { properties: { "attr.id": "textId" }, classAttribute: "f-component f-connection-text" }, providers: [{ provide: CONNECTION_TEXT, useExisting: FConnectionTextComponent }], viewQueries: [{ propertyName: "textPathDirective", first: true, predicate: FConnectionTextPathDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:textPath f-connection-text-path>\n        {{ text }}\n    </svg:textPath>\n</ng-container>\n", dependencies: [{ kind: "directive", type: FConnectionTextPathDirective, selector: "textPath[f-connection-text-path]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionTextComponent, decorators: [{
             type: Component,
             args: [{ selector: "text[f-connection-text]", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection-text",
                         '[attr.id]': 'textId',
                     }, providers: [{ provide: CONNECTION_TEXT, useExisting: FConnectionTextComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:textPath f-connection-text-path>\n        {{ text }}\n    </svg:textPath>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [F_CONNECTION]
-                }] }]; }, propDecorators: { textPathDirective: [{
+                }] }], propDecorators: { textPathDirective: [{
                 type: ViewChild,
                 args: [FConnectionTextPathDirective, { static: true }]
             }] } });
@@ -413,10 +413,10 @@ class FConnectionDragHandleComponent {
         this.hostElement.setAttribute('cx', point.x.toString());
         this.hostElement.setAttribute('cy', point.y.toString());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionDragHandleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]", host: { properties: { "class": "class" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionDragHandleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]", host: { properties: { "class": "class" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionDragHandleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionDragHandleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "circle[f-connection-drag-handle]",
@@ -426,7 +426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         '[class]': 'class'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
 const CONNECTION_GRADIENT = new InjectionToken('CONNECTION_GRADIENT');
 
@@ -473,24 +473,24 @@ class FConnectionGradientComponent {
         this.hostElement.setAttribute('y2', to.y.toString());
         this.updateGradient();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionGradientComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]", host: { properties: { "attr.id": "gradientId" }, classAttribute: "f-component f-connection-gradient" }, providers: [{ provide: CONNECTION_GRADIENT, useExisting: FConnectionGradientComponent }], ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:stop/>\n    <svg:stop/>\n</ng-container>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionGradientComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]", host: { properties: { "attr.id": "gradientId" }, classAttribute: "f-component f-connection-gradient" }, providers: [{ provide: CONNECTION_GRADIENT, useExisting: FConnectionGradientComponent }], ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:stop/>\n    <svg:stop/>\n</ng-container>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionGradientComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionGradientComponent, decorators: [{
             type: Component,
             args: [{ selector: "linearGradient[fConnectionGradient]", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection-gradient",
                         '[attr.id]': 'gradientId'
                     }, providers: [{ provide: CONNECTION_GRADIENT, useExisting: FConnectionGradientComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:stop/>\n    <svg:stop/>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [F_CONNECTION]
-                }] }]; } });
+                }] }] });
 
 const CONNECTION_PATH = new InjectionToken('CONNECTION_PATH');
 
 const FLOW = {
-    UID: 'f-flow',
+    UID: GuidExtensions.generate(),
 };
 function getFlowUid() {
     return FLOW.UID;
@@ -521,16 +521,16 @@ class FConnectionPathComponent {
         this.hostElement.setAttribute('marker-end', `url(#${sanitizeElementId(getFlowUid() + '-f-connection-marker-end-selected')})`);
     }
     deselect() {
-        this.hostElement.setAttribute('marker-start', `url(#${sanitizeElementId(getFlowUid() + '-f-connection-marker-start-' + this.base.startColor || 'black')})`);
-        this.hostElement.setAttribute('marker-end', `url(#${sanitizeElementId(getFlowUid() + '-f-connection-marker-end-' + this.base.endColor || 'black')})`);
+        this.hostElement.setAttribute('marker-start', `url(#${sanitizeElementId(getFlowUid() + '-f-connection-marker-start-' + this.base.id)})`);
+        this.hostElement.setAttribute('marker-end', `url(#${sanitizeElementId(getFlowUid() + '-f-connection-marker-end-' + this.base.id)})`);
     }
     isSelected() {
-        return this.hostElement.getAttribute('marker-start') === `url(#f-connection-marker-start-selected)`;
+        return this.hostElement.getAttribute('marker-start') === `url(#${sanitizeElementId(getFlowUid() + '-f-connection-marker-start-selected')})`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionPathComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FConnectionPathComponent, selector: "path[f-connection-path]", host: { properties: { "attr.id": "attrConnectionId", "attr.stroke": "linkToGradient" }, classAttribute: "f-component f-connection-path" }, providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionPathComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FConnectionPathComponent, selector: "path[f-connection-path]", host: { properties: { "attr.id": "attrConnectionId", "attr.stroke": "linkToGradient" }, classAttribute: "f-component f-connection-path" }, providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionPathComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionPathComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "path[f-connection-path]",
@@ -543,10 +543,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     },
                     providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [F_CONNECTION]
-                }] }]; } });
+                }] }] });
 
 class FConnectionSelectionComponent {
     get connectionForSelectionId() {
@@ -562,10 +562,10 @@ class FConnectionSelectionComponent {
     setPath(path) {
         this.hostElement.setAttribute("d", `${path}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionSelectionComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]", host: { properties: { "attr.id": "connectionForSelectionId" }, classAttribute: "f-component f-connection-selection" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionSelectionComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]", host: { properties: { "attr.id": "connectionForSelectionId" }, classAttribute: "f-component f-connection-selection" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionSelectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "path[fConnectionSelection]",
@@ -576,10 +576,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         '[attr.id]': 'connectionForSelectionId',
                     },
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [F_CONNECTION]
-                }] }]; } });
+                }] }] });
 
 const F_SELECTED_CLASS = 'f-selected';
 function mixinChangeConnectionSelection(base) {
@@ -846,9 +846,23 @@ class FConnectionBase extends MIXIN_BASE$1 {
         this.fLabel?.nativeElement?.setAttribute('x', `${pathResult.labelX}`);
         this.fLabel?.nativeElement?.setAttribute('y', `${pathResult.labelY}`);
     }
-    setMarkers(markers) {
+    setMarkers() {
         this.fDefs.nativeElement.innerHTML = '';
-        markers.forEach((marker) => this.fDefs.nativeElement.appendChild(marker));
+        this.fMarkers.forEach((marker) => {
+            const markerElement = DomElementExtensions.createSvgElement('marker');
+            markerElement.setAttribute('id', getFlowUid() + '-' + marker.type + '-' + this.id);
+            markerElement.setAttribute('markerHeight', `${marker.height}`);
+            markerElement.setAttribute('markerWidth', `${marker.width}`);
+            markerElement.setAttribute('orient', 'auto');
+            markerElement.setAttribute('refX', `${marker.refX}`);
+            markerElement.setAttribute('refY', `${marker.refY}`);
+            markerElement.setAttribute('markerUnits', 'strokeWidth');
+            markerElement.innerHTML = marker.hostElement.innerHTML;
+            this.fDefs.nativeElement.appendChild(markerElement);
+        });
+        this.fMarkers.forEach((marker) => {
+            marker.hostElement.remove();
+        });
     }
     redraw() {
         this.fPath.setPath(this.path);
@@ -857,12 +871,12 @@ class FConnectionBase extends MIXIN_BASE$1 {
         this.fDragHandle.redraw(this.vector.point2);
         this.fText.redraw(this.vector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FConnectionBase, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FConnectionBase, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
 var EConnectionBehavior;
 (function (EConnectionBehavior) {
@@ -886,6 +900,58 @@ function castToConnectionType(type) {
     return result;
 }
 
+var EFMarkerType;
+(function (EFMarkerType) {
+    EFMarkerType["START"] = "f-connection-marker-start";
+    EFMarkerType["END"] = "f-connection-marker-end";
+    EFMarkerType["SELECTED_START"] = "selected_start";
+    EFMarkerType["SELECTED_END"] = "selected_end";
+})(EFMarkerType || (EFMarkerType = {}));
+
+const F_MARKER = new InjectionToken('F_MARKER');
+class FMarkerBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FMarkerBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FMarkerBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FMarkerBase, decorators: [{
+            type: Directive
+        }] });
+
+class FMarkerComponent extends FMarkerBase {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        super();
+        this.elementReference = elementReference;
+        this.width = 0;
+        this.height = 0;
+        this.refX = 0;
+        this.refY = 0;
+        this.type = EFMarkerType.START;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FMarkerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FMarkerComponent, isStandalone: true, selector: "f-marker", inputs: { hostElement: "hostElement", width: "width", height: "height", refX: "refX", refY: "refY", type: "type" }, host: { classAttribute: "f-component f-marker" }, providers: [{ provide: F_MARKER, useExisting: FMarkerComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FMarkerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "f-marker", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "f-component f-marker",
+                    }, providers: [{ provide: F_MARKER, useExisting: FMarkerComponent }], template: "<ng-content></ng-content>\n", styles: [":host{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hostElement: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], refX: [{
+                type: Input
+            }], refY: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
 let uniqueId$7 = 0;
 class FConnectionForCreateComponent extends FConnectionBase {
     set behavior(value) {
@@ -923,15 +989,15 @@ class FConnectionForCreateComponent extends FConnectionBase {
     ngOnDestroy() {
         this.fComponentsStore.fTempConnection = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionForCreateComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { startColor: "startColor", endColor: "endColor", behavior: "behavior", type: "type", disabled: "disabled" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fText", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fLabel", first: true, predicate: ["rect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n            <!--            <rect #rect height=\"20\" width=\"100\" fill=\"red\"></rect>-->\n        </g>\n        <text f-connection-text></text>\n    </g>\n</svg>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionForCreateComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { startColor: "startColor", endColor: "endColor", behavior: "behavior", type: "type", disabled: "disabled" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fMarkers", predicate: F_MARKER, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fText", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fLabel", first: true, predicate: ["rect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n            <!--            <rect #rect height=\"20\" width=\"100\" fill=\"red\"></rect>-->\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionForCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionForCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-connection-for-create", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection f-connection-for-create"
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n            <!--            <rect #rect height=\"20\" width=\"100\" fill=\"red\"></rect>-->\n        </g>\n        <text f-connection-text></text>\n    </g>\n</svg>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FComponentsStore }]; }, propDecorators: { startColor: [{
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n            <!--            <rect #rect height=\"20\" width=\"100\" fill=\"red\"></rect>-->\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { startColor: [{
                 type: Input
             }], endColor: [{
                 type: Input
@@ -944,6 +1010,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             }], fDefs: [{
                 type: ViewChild,
                 args: ['defs', { static: true }]
+            }], fMarkers: [{
+                type: ContentChildren,
+                args: [F_MARKER, { descendants: true }]
             }], fPath: [{
                 type: ViewChild,
                 args: [CONNECTION_PATH, { static: true }]
@@ -998,16 +1067,17 @@ class FConnectionComponent extends FConnectionBase {
     ngOnDestroy() {
         this.fComponentsStore.removeConnection(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FConnectionComponent, selector: "f-connection", inputs: { id: "id", text: "text", startColor: "startColor", endColor: "endColor", outputId: "outputId", inputId: "inputId", behavior: "behavior", type: "type", disabled: "disabled" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fText", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fLabel", first: true, predicate: ["rect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n<!--            <rect #rect height=\"20\" width=\"100\" fill=\"red\"></rect>-->\n        </g>\n        <text f-connection-text></text>\n    </g>\n\n</svg>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FConnectionComponent, selector: "f-connection", inputs: { id: "id", text: "text", startColor: "startColor", endColor: "endColor", outputId: "outputId", inputId: "inputId", behavior: "behavior", type: "type", disabled: "disabled" }, host: { properties: { "attr.id": "id", "class.f-connection-disabled": "disabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fMarkers", predicate: F_MARKER, descendants: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, static: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, static: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, static: true }, { propertyName: "fDragHandle", first: true, predicate: FConnectionDragHandleComponent, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, static: true }, { propertyName: "fText", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fLabel", first: true, predicate: ["rect"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n            <!--            <rect #rect height=\"20\" width=\"100\" fill=\"red\"></rect>-->\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]" }, { kind: "component", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]" }, { kind: "component", type: FConnectionPathComponent, selector: "path[f-connection-path]" }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FConnectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "f-connection", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: "f-connection", exportAs: 'fComponent', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.id]': 'id',
-                        class: "f-component f-connection"
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n<!--            <rect #rect height=\"20\" width=\"100\" fill=\"red\"></rect>-->\n        </g>\n        <text f-connection-text></text>\n    </g>\n\n</svg>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FComponentsStore }]; }, propDecorators: { id: [{
+                        class: "f-component f-connection",
+                        '[class.f-connection-disabled]': 'disabled',
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"overflow: visible; display: block; vertical-align: middle;\">\n    <defs #defs></defs>\n    <g class=\"f-connection-group\">\n        <linearGradient fConnectionGradient></linearGradient>\n        <path fConnectionSelection [attr.d]=\"path\"></path>\n        <g>\n            <path f-connection-path\n                  [attr.d]=\"path\">\n            </path>\n            <circle f-connection-drag-handle r=\"8\"></circle>\n            <!--            <rect #rect height=\"20\" width=\"100\" fill=\"red\"></rect>-->\n        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { id: [{
                 type: Input
             }], text: [{
                 type: Input
@@ -1028,6 +1098,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             }], fDefs: [{
                 type: ViewChild,
                 args: ['defs', { static: true }]
+            }], fMarkers: [{
+                type: ContentChildren,
+                args: [F_MARKER, { descendants: true }]
             }], fPath: [{
                 type: ViewChild,
                 args: [CONNECTION_PATH, { static: true }]
@@ -1082,10 +1155,10 @@ class GetConnectionVectorHandler {
             point2: point2,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetConnectionVectorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetConnectionVectorHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetConnectionVectorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetConnectionVectorHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetConnectionVectorHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetConnectionVectorHandler, decorators: [{
             type: Injectable
         }] });
 const positionFixedOutbound = {
@@ -1147,12 +1220,12 @@ class GetAllNodesRectHandler {
         const result = RectExtensions.union(rects);
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetAllNodesRectHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetAllNodesRectHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetAllNodesRectHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetAllNodesRectHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetAllNodesRectHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetAllNodesRectHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 class GetConnectionHandler {
     get fConnections() {
@@ -1165,12 +1238,12 @@ class GetConnectionHandler {
         const result = this.fConnections.find(c => c.isContains(element));
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetConnectionHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetConnectionHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetConnectionHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetConnectionHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetConnectionHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetConnectionHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 class GetElementRectInFlowHandler {
     get transform() {
@@ -1189,12 +1262,12 @@ class GetElementRectInFlowHandler {
         const result = RectExtensions.initialize(position.x, position.y, size.width, size.height);
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetElementRectInFlowHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetElementRectInFlowHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetElementRectInFlowHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetElementRectInFlowHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetElementRectInFlowHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetElementRectInFlowHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 class GetIncomingConnectionsHandler {
     get fConnections() {
@@ -1209,12 +1282,12 @@ class GetIncomingConnectionsHandler {
             return inputsIds.includes(x.inputId);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetIncomingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetIncomingConnectionsHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetIncomingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetIncomingConnectionsHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetIncomingConnectionsHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetIncomingConnectionsHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 class GetOutgoingConnectionsHandler {
     get fConnections() {
@@ -1229,12 +1302,12 @@ class GetOutgoingConnectionsHandler {
             return outputsIds.includes(x.outputId);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetOutgoingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetOutgoingConnectionsHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetOutgoingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetOutgoingConnectionsHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetOutgoingConnectionsHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetOutgoingConnectionsHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 class GetInputRectInFlowHandler {
     constructor(fComponentsStore, getElementRectInFlowHandler) {
@@ -1249,12 +1322,12 @@ class GetInputRectInFlowHandler {
         const result = this.getElementRectInFlowHandler.handle(input.hostElement);
         return { rect: result, side: input.side };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetInputRectInFlowHandler, deps: [{ token: FComponentsStore }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetInputRectInFlowHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetInputRectInFlowHandler, deps: [{ token: FComponentsStore }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetInputRectInFlowHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetInputRectInFlowHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetInputRectInFlowHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: GetElementRectInFlowHandler }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: GetElementRectInFlowHandler }] });
 
 class GetOutputRectInFlowHandler {
     constructor(fComponentsStore, getElementRectInFlowHandler) {
@@ -1269,12 +1342,12 @@ class GetOutputRectInFlowHandler {
         const result = this.getElementRectInFlowHandler.handle(output.hostElement);
         return { rect: result, side: output.side };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetOutputRectInFlowHandler, deps: [{ token: FComponentsStore }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetOutputRectInFlowHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetOutputRectInFlowHandler, deps: [{ token: FComponentsStore }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetOutputRectInFlowHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetOutputRectInFlowHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetOutputRectInFlowHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: GetElementRectInFlowHandler }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: GetElementRectInFlowHandler }] });
 
 class UpdateNodeLayerHandler {
     get fNodesContainer() {
@@ -1295,12 +1368,12 @@ class UpdateNodeLayerHandler {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: UpdateNodeLayerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: UpdateNodeLayerHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: UpdateNodeLayerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: UpdateNodeLayerHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: UpdateNodeLayerHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: UpdateNodeLayerHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 const COMMON_PROVIDERS = [
     GetAllNodesRectHandler,
@@ -1336,10 +1409,10 @@ class FNodeInputBase extends FConnectorBase {
     get canBeConnected() {
         return !this.disabled && (this.multiple ? true : !this.isConnected);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FNodeInputBase, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeInputBase, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeInputBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeInputBase, decorators: [{
             type: Directive
         }] });
 
@@ -1378,9 +1451,6 @@ class FNodeBase {
 
 let uniqueId$5 = 0;
 class FNodeInputDirective extends FNodeInputBase {
-    get color() {
-        return this.fNodeInputColor || 'black';
-    }
     get disabled() {
         return this.isDisabled;
     }
@@ -1419,13 +1489,14 @@ class FNodeInputDirective extends FNodeInputBase {
         this.fNode.removeConnector(this);
         this.fComponentsStore.removeInput(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeInputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: ["fNodeInputId", "id"], fNodeInputColor: "fNodeInputColor", multiple: ["fNodeInputMultiple", "multiple"], disabled: ["fNodeInputDisabled", "disabled"] }, host: { properties: { "attr.id": "id", "class.f-node-input-multiple": "multiple", "class.f-node-input-disabled": "disabled", "class.f-node-input-not-connectable": "!canBeConnected" }, classAttribute: "f-component f-node-input" }, providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeInputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: ["fNodeInputId", "id"], multiple: ["fNodeInputMultiple", "multiple"], disabled: ["fNodeInputDisabled", "disabled"] }, host: { properties: { "attr.id": "id", "class.f-node-input-multiple": "multiple", "class.f-node-input-disabled": "disabled", "class.f-node-input-not-connectable": "!canBeConnected" }, classAttribute: "f-component f-node-input" }, providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }], exportAs: ["fNodeInput"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[fNodeInput]",
+                    exportAs: 'fNodeInput',
                     host: {
                         '[attr.id]': 'id',
                         class: "f-component f-node-input",
@@ -1435,15 +1506,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     },
                     providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FNodeBase, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FNodeBase, decorators: [{
                     type: Inject,
                     args: [F_NODE]
-                }] }, { type: FComponentsStore }]; }, propDecorators: { id: [{
+                }] }, { type: FComponentsStore }], propDecorators: { id: [{
                 type: Input,
                 args: ['fNodeInputId']
-            }], fNodeInputColor: [{
-                type: Input,
-                args: ['fNodeInputColor']
             }], multiple: [{
                 type: Input,
                 args: ['fNodeInputMultiple']
@@ -1465,10 +1533,10 @@ class FNodeOutletBase extends FConnectorBase {
     setOutputs(outputs) {
         this.outputs = outputs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutletBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FNodeOutletBase, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutletBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeOutletBase, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutletBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutletBase, decorators: [{
             type: Directive
         }] });
 
@@ -1509,13 +1577,14 @@ class FNodeOutletDirective extends FNodeOutletBase {
     ngOnDestroy() {
         this.fComponentsStore.removeOutlet(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutletDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { id: "id", disabled: ["fNodeOutletDisabled", "disabled"], isConnectionFromOutlet: "isConnectionFromOutlet" }, host: { properties: { "attr.id": "id", "class.f-node-outlet-disabled": "disabled" }, classAttribute: "f-component f-node-outlet" }, providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutletDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { id: ["fNodeOutletId", "id"], disabled: ["fNodeOutletDisabled", "disabled"], isConnectionFromOutlet: "isConnectionFromOutlet" }, host: { properties: { "attr.id": "id", "class.f-node-outlet-disabled": "disabled" }, classAttribute: "f-component f-node-outlet" }, providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }], exportAs: ["fNodeOutlet"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutletDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[fNodeOutlet]",
+                    exportAs: 'fNodeOutlet',
                     host: {
                         '[attr.id]': 'id',
                         class: "f-component f-node-outlet",
@@ -1523,11 +1592,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     },
                     providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FNodeBase, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FNodeBase, decorators: [{
                     type: Inject,
                     args: [F_NODE]
-                }] }, { type: FComponentsStore }]; }, propDecorators: { id: [{
-                type: Input
+                }] }, { type: FComponentsStore }], propDecorators: { id: [{
+                type: Input,
+                args: ['fNodeOutletId']
             }], disabled: [{
                 type: Input,
                 args: ['fNodeOutletDisabled']
@@ -1544,10 +1614,10 @@ class FNodeOutputBase extends FConnectorBase {
     get canBeConnected() {
         return !this.disabled && !this.isConnected;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FNodeOutputBase, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeOutputBase, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutputBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutputBase, decorators: [{
             type: Directive
         }] });
 
@@ -1594,13 +1664,14 @@ class FNodeOutputDirective extends FNodeOutputBase {
         this.fNode.removeConnector(this);
         this.fComponentsStore.removeOutput(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: ["fNodeOutputId", "id"], disabled: ["fNodeOutputDisabled", "disabled"] }, host: { properties: { "attr.id": "id", "class.f-node-output-disabled": "disabled" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: ["fNodeOutputId", "id"], disabled: ["fNodeOutputDisabled", "disabled"] }, host: { properties: { "attr.id": "id", "class.f-node-output-disabled": "disabled" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeOutputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeOutputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[fNodeOutput]",
+                    exportAs: 'fNodeOutput',
                     host: {
                         '[attr.id]': 'id',
                         class: "f-component f-node-output",
@@ -1608,10 +1679,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     },
                     providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FNodeBase, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FNodeBase, decorators: [{
                     type: Inject,
                     args: [F_NODE]
-                }] }, { type: FComponentsStore }]; }, propDecorators: { id: [{
+                }] }, { type: FComponentsStore }], propDecorators: { id: [{
                 type: Input,
                 args: ['fNodeOutputId']
             }], disabled: [{
@@ -1643,10 +1714,10 @@ class FDragHandleDirective {
     ngOnDestroy() {
         this.stateChanges.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDragHandleDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FDragHandleDirective, isStandalone: true, selector: "[fDragHandle]", inputs: { disabled: ["fDragHandleDisabled", "disabled"] }, host: { properties: { "class.f-drag-handle-disabled": "disabled" }, classAttribute: "f-drag-handle f-component" }, providers: [{ provide: F_DRAG_HANDLE, useExisting: FDragHandleDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDragHandleDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FDragHandleDirective, isStandalone: true, selector: "[fDragHandle]", inputs: { disabled: ["fDragHandleDisabled", "disabled"] }, host: { properties: { "class.f-drag-handle-disabled": "disabled" }, classAttribute: "f-drag-handle f-component" }, providers: [{ provide: F_DRAG_HANDLE, useExisting: FDragHandleDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[fDragHandle]",
@@ -1657,14 +1728,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     },
                     providers: [{ provide: F_DRAG_HANDLE, useExisting: FDragHandleDirective }],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [F_NODE]
                 }, {
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }]; }, propDecorators: { disabled: [{
+                }] }], propDecorators: { disabled: [{
                 type: Input,
                 args: ['fDragHandleDisabled']
             }] } });
@@ -1758,21 +1829,21 @@ class FNodeComponent extends FNodeBase {
         this.stateChanges.complete();
         this.subscriptions$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FNodeComponent, selector: "f-node", inputs: { id: "id", position: ["fNodePosition", "position"], disabled: "disabled" }, outputs: { positionChange: "fNodePositionChange" }, host: { properties: { "attr.id": "id", "class.f-disabled": "disabled" }, classAttribute: "f-node f-component" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FNodeComponent, selector: "f-node", inputs: { id: "id", position: ["fNodePosition", "position"], disabled: "disabled" }, outputs: { positionChange: "fNodePositionChange" }, host: { properties: { "attr.id": "id", "class.f-node-disabled": "disabled" }, classAttribute: "f-node f-component" }, providers: [
             { provide: F_NODE, useExisting: FNodeComponent }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:absolute!important;left:0;top:0;pointer-events:all;transform-origin:0 0;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-node", exportAs: "fComponent", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.id]': 'id',
                         class: "f-node f-component",
-                        '[class.f-disabled]': 'disabled',
+                        '[class.f-node-disabled]': 'disabled',
                     }, providers: [
                         { provide: F_NODE, useExisting: FNodeComponent }
                     ], template: "<ng-content></ng-content>\n", styles: [":host{position:absolute!important;left:0;top:0;pointer-events:all;transform-origin:0 0;-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FComponentsStore }]; }, propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { id: [{
                 type: Input
             }], position: [{
                 type: Input,
@@ -1903,10 +1974,10 @@ class FZoomDirective extends FZoomBase {
     ngOnDestroy() {
         super.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FZoomDirective, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FZoomDirective, selector: "f-canvas[fZoom]", inputs: { fFlowZoom: ["fZoom", "fFlowZoom"], minimum: ["fZoomMinimum", "minimum"], maximum: ["fZoomMaximum", "maximum"], step: ["fZoomStep", "step"], dblClickStep: ["fZoomDblClickStep", "dblClickStep"] }, host: { classAttribute: "f-zoom f-component" }, providers: [{ provide: F_ZOOM, useExisting: FZoomDirective }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FZoomDirective, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FZoomDirective, selector: "f-canvas[fZoom]", inputs: { fFlowZoom: ["fZoom", "fFlowZoom"], minimum: ["fZoomMinimum", "minimum"], maximum: ["fZoomMaximum", "maximum"], step: ["fZoomStep", "step"], dblClickStep: ["fZoomDblClickStep", "dblClickStep"] }, host: { classAttribute: "f-zoom f-component" }, providers: [{ provide: F_ZOOM, useExisting: FZoomDirective }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FZoomDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FZoomDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "f-canvas[fZoom]",
@@ -1916,7 +1987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     },
                     providers: [{ provide: F_ZOOM, useExisting: FZoomDirective }],
                 }]
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; }, propDecorators: { fFlowZoom: [{
+        }], ctorParameters: () => [{ type: FComponentsStore }], propDecorators: { fFlowZoom: [{
                 type: Input,
                 args: ['fZoom']
             }], minimum: [{
@@ -2034,12 +2105,12 @@ class FCanvasBase extends MIXIN_BASE {
         const position = PointExtensions.sum(this.transform.position, this.transform.scaledPosition);
         this.fCanvasChange.emit(new FCanvasChangeEvent(position, this.transform.scale));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FCanvasBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FCanvasBase, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FCanvasBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FCanvasBase, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FCanvasBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FCanvasBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class FCanvasComponent extends FCanvasBase {
     set position(value) {
@@ -2072,7 +2143,6 @@ class FCanvasComponent extends FCanvasBase {
         this.elementReference = elementReference;
         this.fComponentsStore = fComponentsStore;
         this.fCanvasChange = new EventEmitter();
-        this.onInitialized = new EventEmitter();
     }
     ngOnInit() {
         this.fComponentsStore.fCanvas = this;
@@ -2105,239 +2175,26 @@ class FCanvasComponent extends FCanvasBase {
         this.redrawWithAnimation();
         this.completeDrag();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FCanvasComponent, deps: [{ token: GetAllNodesRectHandler }, { token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FCanvasComponent, selector: "f-canvas", inputs: { position: "position", scale: "scale" }, outputs: { fCanvasChange: "fCanvasChange", onInitialized: "onInitialized" }, host: { classAttribute: "f-component f-canvas" }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], viewQueries: [{ propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <div>\n        <ng-content select=\"f-connection\"></ng-content>\n        <ng-content select=\"f-connection-for-create\"></ng-content>\n    </div>\n    <div #fNodesContainer>\n        <ng-content select=\"f-node\"></ng-content>\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FCanvasComponent, deps: [{ token: GetAllNodesRectHandler }, { token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FCanvasComponent, selector: "f-canvas", inputs: { position: "position", scale: "scale" }, outputs: { fCanvasChange: "fCanvasChange" }, host: { classAttribute: "f-component f-canvas" }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], viewQueries: [{ propertyName: "fNodesContainer", first: true, predicate: ["fNodesContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <div>\n        <ng-content select=\"f-connection\"></ng-content>\n        <ng-content select=\"f-connection-for-create\"></ng-content>\n    </div>\n    <div #fNodesContainer>\n        <ng-content select=\"f-node\"></ng-content>\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FCanvasComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FCanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-canvas', exportAs: 'fComponent', host: {
                         'class': 'f-component f-canvas',
                     }, providers: [{ provide: F_CANVAS, useExisting: FCanvasComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n    <div>\n        <ng-content select=\"f-connection\"></ng-content>\n        <ng-content select=\"f-connection-for-create\"></ng-content>\n    </div>\n    <div #fNodesContainer>\n        <ng-content select=\"f-node\"></ng-content>\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;overflow:visible;width:100%;height:100%;left:0;top:0;transform-origin:0 0;pointer-events:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: GetAllNodesRectHandler }, { type: i0.ElementRef }, { type: FComponentsStore }]; }, propDecorators: { fCanvasChange: [{
+        }], ctorParameters: () => [{ type: GetAllNodesRectHandler }, { type: i0.ElementRef }, { type: FComponentsStore }], propDecorators: { fCanvasChange: [{
                 type: Output
             }], position: [{
                 type: Input
             }], scale: [{
                 type: Input
-            }], onInitialized: [{
-                type: Output
             }], fNodesContainer: [{
                 type: ViewChild,
                 args: ['fNodesContainer', { static: true }]
             }] } });
 
 const F_FLOW = new InjectionToken('F_FLOW');
-class FFlowBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FFlowBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FFlowBase, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FFlowBase, decorators: [{
-            type: Directive
-        }] });
-
-const F_CONNECTION_MARKER = new InjectionToken('F_CONNECTION_MARKER');
-
-class FConnectionMarkerEndDirective {
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    get id() {
-        return sanitizeElementId(this.fFlow.id + '-f-connection-marker-end-' + this.fConnectionMarkerEnd);
-    }
-    constructor(elementReference, fFlow) {
-        this.elementReference = elementReference;
-        this.fFlow = fFlow;
-        this.fConnectionMarkerEnd = 'black';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionMarkerEndDirective, deps: [{ token: i0.ElementRef }, { token: F_FLOW }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FConnectionMarkerEndDirective, selector: "[fConnectionMarkerEnd]", inputs: { fConnectionMarkerEnd: "fConnectionMarkerEnd" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-connection-marker" }, providers: [{ provide: F_CONNECTION_MARKER, useExisting: FConnectionMarkerEndDirective }], exportAs: ["fComponent"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionMarkerEndDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fConnectionMarkerEnd]',
-                    exportAs: 'fComponent',
-                    host: {
-                        '[attr.id]': 'id',
-                        'class': 'f-component f-connection-marker'
-                    },
-                    providers: [{ provide: F_CONNECTION_MARKER, useExisting: FConnectionMarkerEndDirective }],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FFlowBase, decorators: [{
-                    type: Inject,
-                    args: [F_FLOW]
-                }] }]; }, propDecorators: { fConnectionMarkerEnd: [{
-                type: Input
-            }] } });
-
-class FConnectionMarkerEndSelectedDirective {
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    get id() {
-        return sanitizeElementId(this.fFlow.id + '-f-connection-marker-end-selected');
-    }
-    constructor(elementReference, fFlow) {
-        this.elementReference = elementReference;
-        this.fFlow = fFlow;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionMarkerEndSelectedDirective, deps: [{ token: i0.ElementRef }, { token: F_FLOW }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FConnectionMarkerEndSelectedDirective, selector: "[fConnectionMarkerEndSelected]", host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-connection-marker f-selected" }, providers: [{ provide: F_CONNECTION_MARKER, useExisting: FConnectionMarkerEndSelectedDirective }], exportAs: ["fComponent"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionMarkerEndSelectedDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fConnectionMarkerEndSelected]',
-                    exportAs: 'fComponent',
-                    host: {
-                        '[attr.id]': 'id',
-                        'class': 'f-component f-connection-marker f-selected'
-                    },
-                    providers: [{ provide: F_CONNECTION_MARKER, useExisting: FConnectionMarkerEndSelectedDirective }],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FFlowBase, decorators: [{
-                    type: Inject,
-                    args: [F_FLOW]
-                }] }]; } });
-
-class FConnectionMarkerStartDirective {
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    get id() {
-        return sanitizeElementId(this.fFlow.id + '-f-connection-marker-start-' + this.fConnectionMarkerStart);
-    }
-    constructor(elementReference, fFlow) {
-        this.elementReference = elementReference;
-        this.fFlow = fFlow;
-        this.fConnectionMarkerStart = 'black';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionMarkerStartDirective, deps: [{ token: i0.ElementRef }, { token: F_FLOW }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FConnectionMarkerStartDirective, selector: "[fConnectionMarkerStart]", inputs: { fConnectionMarkerStart: "fConnectionMarkerStart" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-connection-marker" }, providers: [{ provide: F_CONNECTION_MARKER, useExisting: FConnectionMarkerStartDirective }], exportAs: ["fComponent"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionMarkerStartDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fConnectionMarkerStart]',
-                    exportAs: 'fComponent',
-                    host: {
-                        '[attr.id]': 'id',
-                        'class': 'f-component f-connection-marker'
-                    },
-                    providers: [{ provide: F_CONNECTION_MARKER, useExisting: FConnectionMarkerStartDirective }],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FFlowBase, decorators: [{
-                    type: Inject,
-                    args: [F_FLOW]
-                }] }]; }, propDecorators: { fConnectionMarkerStart: [{
-                type: Input
-            }] } });
-
-class FConnectionMarkerStartSelectedDirective {
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    get id() {
-        return sanitizeElementId(this.fFlow.id + '-f-connection-marker-start-selected');
-    }
-    constructor(elementReference, fFlow) {
-        this.elementReference = elementReference;
-        this.fFlow = fFlow;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionMarkerStartSelectedDirective, deps: [{ token: i0.ElementRef }, { token: F_FLOW }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FConnectionMarkerStartSelectedDirective, selector: "[fConnectionMarkerStartSelected]", host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-connection-marker f-selected" }, providers: [{ provide: F_CONNECTION_MARKER, useExisting: FConnectionMarkerStartSelectedDirective }], exportAs: ["fComponent"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionMarkerStartSelectedDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fConnectionMarkerStartSelected]',
-                    exportAs: 'fComponent',
-                    host: {
-                        '[attr.id]': 'id',
-                        'class': 'f-component f-connection-marker f-selected'
-                    },
-                    providers: [{ provide: F_CONNECTION_MARKER, useExisting: FConnectionMarkerStartSelectedDirective }],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FFlowBase, decorators: [{
-                    type: Inject,
-                    args: [F_FLOW]
-                }] }]; } });
-
-const F_DEFINITIONS = new InjectionToken('F_DEFINITIONS');
-class FDefinitionsBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDefinitionsBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FDefinitionsBase, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDefinitionsBase, decorators: [{
-            type: Directive
-        }] });
-
-class FDefinitionsComponent extends FDefinitionsBase {
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    constructor(elementReference, fComponentsStore, changeDetectorRef) {
-        super();
-        this.elementReference = elementReference;
-        this.fComponentsStore = fComponentsStore;
-        this.changeDetectorRef = changeDetectorRef;
-        this.subscriptions$ = new Subscription();
-    }
-    ngOnInit() {
-        this.fComponentsStore.fDefs = this;
-        // this.subscriptions$.add(
-        //     this.subscribeOnMarkersChanges()
-        // );
-    }
-    getMarkersForConnection(connectionId, startColor, endColor) {
-        let result = [];
-        const marker = this.fMarkers.find((x) => {
-            if (x.hasOwnProperty('fConnectionMarkerStart')) {
-                // @ts-ignore
-                return x['fConnectionMarkerStart'] === startColor;
-            }
-            return false;
-        });
-        if (marker) {
-            // marker.hostElement.setAttribute('id', `f-connection-marker-start-${ connectionId }`);
-            result.push(marker.hostElement);
-            marker.hostElement.remove();
-        }
-        const endMarker = this.fMarkers.find((x) => {
-            if (x.hasOwnProperty('fConnectionMarkerEnd')) {
-                // @ts-ignore
-                return x['fConnectionMarkerEnd'] === endColor;
-            }
-            return false;
-        });
-        if (endMarker) {
-            // endMarker.hostElement.setAttribute('id', `f-connection-marker-end-${ connectionId }`);
-            result.push(endMarker.hostElement);
-            endMarker.hostElement.remove();
-        }
-        return result;
-    }
-    subscribeOnMarkersChanges() {
-        return this.fMarkers.changes.pipe(startWith(null), debounceTime(10)).subscribe(() => {
-            this.changeDetectorRef.detectChanges();
-        });
-    }
-    ngOnDestroy() {
-        this.subscriptions$.unsubscribe();
-        this.fComponentsStore.fDefs = undefined;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDefinitionsComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FDefinitionsComponent, selector: "svg[fDefinitions]", host: { classAttribute: "f-component f-definitions" }, providers: [{ provide: F_DEFINITIONS, useExisting: FDefinitionsComponent }], queries: [{ propertyName: "fMarkers", predicate: F_CONNECTION_MARKER }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:defs>\n        <ng-content></ng-content>\n    </svg:defs>\n</ng-container>\n", styles: [":host{position:absolute;width:0;height:0;left:0;top:0;overflow:hidden;transform-origin:0 0;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDefinitionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'svg[fDefinitions]', exportAs: 'fComponent', host: {
-                        'class': 'f-component f-definitions'
-                    }, providers: [{ provide: F_DEFINITIONS, useExisting: FDefinitionsComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:defs>\n        <ng-content></ng-content>\n    </svg:defs>\n</ng-container>\n", styles: [":host{position:absolute;width:0;height:0;left:0;top:0;overflow:hidden;transform-origin:0 0;pointer-events:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FComponentsStore }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { fMarkers: [{
-                type: ContentChildren,
-                args: [F_CONNECTION_MARKER]
-            }] } });
 
 var EDraggableType;
 (function (EDraggableType) {
@@ -2380,10 +2237,10 @@ class FDraggableDataContext {
         this.onPointerDownScale = 1;
         this.onPointerDownPosition = new Point(0, 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDraggableDataContext }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDataContext }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDraggableDataContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDataContext, decorators: [{
             type: Injectable
         }] });
 
@@ -2399,12 +2256,12 @@ class CanvasOnPointerUp {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CanvasOnPointerUp, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CanvasOnPointerUp }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasOnPointerUp, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CanvasOnPointerUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
 class CanvasPrepareDragSequence {
     get flowHost() {
@@ -2430,12 +2287,12 @@ class CanvasPrepareDragSequence {
             ];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CanvasPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CanvasPrepareDragSequence }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasPrepareDragSequence }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CanvasPrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CanvasPrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
 
 const CANVAS_PROVIDERS = [
     CanvasOnPointerUp,
@@ -2444,10 +2301,10 @@ const CANVAS_PROVIDERS = [
 
 const F_EXTERNAL_ITEM = new InjectionToken('F_EXTERNAL_ITEM');
 class FExternalItemBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FExternalItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FExternalItemBase, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FExternalItemBase, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FExternalItemBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemBase, decorators: [{
             type: Directive
         }] });
 
@@ -2474,10 +2331,10 @@ class FExternalItemService {
             this.items.splice(index, 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FExternalItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FExternalItemService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FExternalItemService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2501,12 +2358,12 @@ class FExternalItemDirective extends FExternalItemBase {
     ngOnDestroy() {
         this.fExternalItemService.removeItem(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FExternalItemDirective, deps: [{ token: i0.ElementRef }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FExternalItemDirective, selector: "[fExternalItem]", inputs: { id: "id", data: "data" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-external-item" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemDirective, deps: [{ token: i0.ElementRef }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FExternalItemDirective, selector: "[fExternalItem]", inputs: { id: "id", data: "data" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-external-item" }, providers: [
             { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FExternalItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FExternalItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[fExternalItem]",
@@ -2518,7 +2375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FExternalItemService }]; }, propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FExternalItemService }], propDecorators: { id: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -2680,10 +2537,10 @@ class NearestCoordinateFinder {
 
 const F_LINE_ALIGNMENT = new InjectionToken('F_LINE_ALIGNMENT');
 class FLineAlignmentBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FLineAlignmentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FLineAlignmentBase, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FLineAlignmentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FLineAlignmentBase, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FLineAlignmentBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FLineAlignmentBase, decorators: [{
             type: Directive
         }] });
 
@@ -2755,26 +2612,26 @@ class FLineAlignmentComponent extends FLineAlignmentBase {
         this.lineService.hideVerticalLine();
         this.lineService.hideHorizontalLine();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FLineAlignmentComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FLineAlignmentComponent, selector: "f-line-alignment", host: { classAttribute: "f-line-alignment f-component" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FLineAlignmentComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FLineAlignmentComponent, selector: "f-line-alignment", host: { classAttribute: "f-line-alignment f-component" }, providers: [
             { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentComponent }
         ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "", isInline: true, styles: [":host{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FLineAlignmentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FLineAlignmentComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-line-alignment", template: "", exportAs: "fComponent", host: {
                         'class': 'f-line-alignment f-component'
                     }, providers: [
                         { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentComponent }
                     ], styles: [":host{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }]; } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
 
 const F_SELECTION_AREA = new InjectionToken('F_SELECTION_AREA');
 class FSelectionAreaBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FSelectionAreaBase, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FSelectionAreaBase, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FSelectionAreaBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FSelectionAreaBase, decorators: [{
             type: Directive
         }] });
 
@@ -2804,19 +2661,19 @@ class FSelectionAreaComponent extends FSelectionAreaBase {
         style.width = object.width + 'px';
         style.height = object.height + 'px';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FSelectionAreaComponent, selector: "f-selection-area", host: { classAttribute: "f-selection-area f-component" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FSelectionAreaComponent, selector: "f-selection-area", host: { classAttribute: "f-selection-area f-component" }, providers: [
             { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-selection-area", template: ``, host: {
                         'class': 'f-selection-area f-component'
                     }, providers: [
                         { provide: F_SELECTION_AREA, useExisting: FSelectionAreaComponent }
                     ], styles: [":host{position:absolute}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FDraggableDataContext }]; } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FDraggableDataContext }] });
 
 class FindFirstCanBeConnectedOutputByOutletHandler {
     get fNodes() {
@@ -2842,12 +2699,12 @@ class FindFirstCanBeConnectedOutputByOutletHandler {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindFirstCanBeConnectedOutputByOutletHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 class CreateConnectionDragHandler {
     constructor(getOutputRectInFlowHandler, getConnectionVectorHandler, connection, mouseDownPoint) {
@@ -2911,12 +2768,12 @@ class FirstNotConnectedInputOfNodeUnderPointerHandler {
         const result = inputs.find((x) => !!x);
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FirstNotConnectedInputOfNodeUnderPointerHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 class InputsUnderPointerHandler {
     get fInputs() {
@@ -2932,12 +2789,12 @@ class InputsUnderPointerHandler {
             return this.fInputs.find((x) => x.isContains(element));
         }).filter((x) => !!x);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: InputsUnderPointerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: InputsUnderPointerHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InputsUnderPointerHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InputsUnderPointerHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: InputsUnderPointerHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InputsUnderPointerHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 class FindInputsUnderPointerRequest {
     constructor(event, dragHandler) {
@@ -2976,12 +2833,12 @@ class FindInputsUnderPointerHandler {
         inputs = inputs.filter((x) => x.canBeConnected);
         return inputs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FindInputsUnderPointerHandler, deps: [{ token: FComponentsStore }, { token: InputsUnderPointerHandler }, { token: FirstNotConnectedInputOfNodeUnderPointerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FindInputsUnderPointerHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindInputsUnderPointerHandler, deps: [{ token: FComponentsStore }, { token: InputsUnderPointerHandler }, { token: FirstNotConnectedInputOfNodeUnderPointerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindInputsUnderPointerHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FindInputsUnderPointerHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FindInputsUnderPointerHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: InputsUnderPointerHandler }, { type: FirstNotConnectedInputOfNodeUnderPointerHandler }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: InputsUnderPointerHandler }, { type: FirstNotConnectedInputOfNodeUnderPointerHandler }] });
 
 class CreateConnectionOnPointerUp {
     constructor(fComponentsStore, fDraggableDataContext, findInputsUnderPointerHandler, findFirstCanBeConnectedOutputByOutletHandler) {
@@ -3015,12 +2872,12 @@ class CreateConnectionOnPointerUp {
             handler.complete();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CreateConnectionOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FindInputsUnderPointerHandler }, { token: FindFirstCanBeConnectedOutputByOutletHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CreateConnectionOnPointerUp }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CreateConnectionOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FindInputsUnderPointerHandler }, { token: FindFirstCanBeConnectedOutputByOutletHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CreateConnectionOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CreateConnectionOnPointerUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CreateConnectionOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }, { type: FindFirstCanBeConnectedOutputByOutletHandler }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }, { type: FindFirstCanBeConnectedOutputByOutletHandler }] });
 
 class CreateConnectionPrepareDragSequence {
     get transform() {
@@ -3092,12 +2949,12 @@ class CreateConnectionPrepareDragSequence {
         const outlets = this.fComponentsStore.fOutlets.filter((x) => node.isContains(x.hostElement));
         return isNodeOutput(targetElement) && !outlets.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CreateConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }, { token: GetConnectionVectorHandler }, { token: FindFirstCanBeConnectedOutputByOutletHandler }, { token: GetOutputRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CreateConnectionPrepareDragSequence }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CreateConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }, { token: GetConnectionVectorHandler }, { token: FindFirstCanBeConnectedOutputByOutletHandler }, { token: GetOutputRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CreateConnectionPrepareDragSequence }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CreateConnectionPrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CreateConnectionPrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: GetConnectionVectorHandler }, { type: FindFirstCanBeConnectedOutputByOutletHandler }, { type: GetOutputRectInFlowHandler }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: GetConnectionVectorHandler }, { type: FindFirstCanBeConnectedOutputByOutletHandler }, { type: GetOutputRectInFlowHandler }] });
 
 class ReassignConnectionDragHandler {
     constructor(getInputRectInFlowHandler, getOutputRectInFlowHandler, getConnectionVectorHandler, connection) {
@@ -3164,12 +3021,12 @@ class ReassignConnectionOnPointerUp {
             handler.complete();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ReassignConnectionOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FindInputsUnderPointerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ReassignConnectionOnPointerUp }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FindInputsUnderPointerHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ReassignConnectionOnPointerUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FindInputsUnderPointerHandler }] });
 
 class ReassignConnectionPrepareDragSequence {
     get transform() {
@@ -3208,12 +3065,12 @@ class ReassignConnectionPrepareDragSequence {
             ];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ReassignConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: GetInputRectInFlowHandler }, { token: GetOutputRectInFlowHandler }, { token: GetConnectionVectorHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ReassignConnectionPrepareDragSequence }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: GetInputRectInFlowHandler }, { token: GetOutputRectInFlowHandler }, { token: GetConnectionVectorHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionPrepareDragSequence }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ReassignConnectionPrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ReassignConnectionPrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutputRectInFlowHandler }, { type: GetConnectionVectorHandler }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutputRectInFlowHandler }, { type: GetConnectionVectorHandler }] });
 
 const CONNECTIONS_PROVIDERS = [
     FindFirstCanBeConnectedOutputByOutletHandler,
@@ -3295,12 +3152,12 @@ class ExternalItemPrepareDragSequence {
             ];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ExternalItemPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ExternalItemPrepareDragSequence }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ExternalItemPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ExternalItemPrepareDragSequence }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ExternalItemPrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ExternalItemPrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FExternalItemService }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FExternalItemService }] });
 
 class ExternalItemOnPointerUp {
     get flowHost() {
@@ -3329,12 +3186,12 @@ class ExternalItemOnPointerUp {
             dragHandler.complete();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ExternalItemOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ExternalItemOnPointerUp }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ExternalItemOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ExternalItemOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ExternalItemOnPointerUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ExternalItemOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
 
 const EXTERNAL_ITEM_PROVIDERS = [
     ExternalItemOnPointerUp,
@@ -3498,12 +3355,12 @@ class IsConnectionUnderNodeHandler {
             return (intersection || []).length > 0;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: IsConnectionUnderNodeHandler, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: IsConnectionUnderNodeHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: IsConnectionUnderNodeHandler, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: IsConnectionUnderNodeHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: IsConnectionUnderNodeHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: IsConnectionUnderNodeHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }] });
 
 class NodeOnPointerUp {
     get transform() {
@@ -3535,12 +3392,12 @@ class NodeOnPointerUp {
             this.fDraggableDataContext.fLineAlignment?.complete();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NodeOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: IsConnectionUnderNodeHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NodeOnPointerUp }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NodeOnPointerUp, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: IsConnectionUnderNodeHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NodeOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NodeOnPointerUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NodeOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: IsConnectionUnderNodeHandler }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: IsConnectionUnderNodeHandler }] });
 
 class NodePrepareDragSequence {
     get transform() {
@@ -3624,12 +3481,12 @@ class NodePrepareDragSequence {
     getOutputsForNode(node) {
         return this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NodePrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: UpdateNodeLayerHandler }, { token: GetInputRectInFlowHandler }, { token: GetOutputRectInFlowHandler }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }, { token: GetConnectionVectorHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NodePrepareDragSequence }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NodePrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: UpdateNodeLayerHandler }, { token: GetInputRectInFlowHandler }, { token: GetOutputRectInFlowHandler }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }, { token: GetConnectionVectorHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NodePrepareDragSequence }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NodePrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: NodePrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: UpdateNodeLayerHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutputRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }, { type: GetConnectionVectorHandler }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: UpdateNodeLayerHandler }, { type: GetInputRectInFlowHandler }, { type: GetOutputRectInFlowHandler }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }, { type: GetConnectionVectorHandler }] });
 
 const NODE_PROVIDERS = [
     NodeOnPointerUp,
@@ -3687,17 +3544,24 @@ class SingleSelectOnPointerDown {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SingleSelectOnPointerDown, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SingleSelectOnPointerDown }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SingleSelectOnPointerDown, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SingleSelectOnPointerDown }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SingleSelectOnPointerDown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SingleSelectOnPointerDown, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }] });
 
 const SINGLE_SELECT_PROVIDERS = [
     SingleSelectOnPointerDown
 ];
 
+class SelectionChangeEvent {
+    constructor(nodes, connections) {
+        this.nodes = nodes;
+        this.connections = connections;
+    }
+}
+
 class GetCanBeSelectedItemsHandler {
     get fNodes() {
         return this.fComponentsStore.fNodes;
@@ -3739,12 +3603,12 @@ class GetCanBeSelectedItemsHandler {
             };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetCanBeSelectedItemsHandler, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetCanBeSelectedItemsHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetCanBeSelectedItemsHandler, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetElementRectInFlowHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetCanBeSelectedItemsHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: GetCanBeSelectedItemsHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GetCanBeSelectedItemsHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetElementRectInFlowHandler }] });
 
 class SelectionAreaDragHandle {
     get canvasPosition() {
@@ -3811,12 +3675,12 @@ class SelectionAreaPrepareDragSequence {
             this.fDraggableDataContext.onPointerDownPosition = pointerPositionInFlow.div(1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectionAreaPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectionAreaPrepareDragSequence }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaPrepareDragSequence, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaPrepareDragSequence }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectionAreaPrepareDragSequence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaPrepareDragSequence, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i0.Injector }]; } });
+        }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: i0.Injector }] });
 
 class SelectionAreaOnPointerUp {
     constructor(fDraggableDataContext) {
@@ -3830,12 +3694,12 @@ class SelectionAreaOnPointerUp {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectionAreaOnPointerUp, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectionAreaOnPointerUp }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaOnPointerUp, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaOnPointerUp }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectionAreaOnPointerUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: SelectionAreaOnPointerUp, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: FDraggableDataContext }]; } });
+        }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
 const SELECTION_AREA_PROVIDERS = [
     GetCanBeSelectedItemsHandler,
@@ -3848,12 +3712,12 @@ class FDraggableBase extends IDragAndDropBase {
     constructor(ngZone) {
         super(ngZone);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDraggableBase, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FDraggableBase, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableBase, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FDraggableBase, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDraggableBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
 
 class FDraggableDirective extends FDraggableBase {
     get hostElement() {
@@ -3867,6 +3731,9 @@ class FDraggableDirective extends FDraggableBase {
         this.fComponentsStore = fComponentsStore;
         this.subscriptions$ = new Subscription();
         this.disabled = false;
+        this.fSelectionChange = new EventEmitter();
+        // @Output()
+        // public override fConnectionIntersectNode: EventEmitter<ConnectionIntersectNodeEvent> = new EventEmitter<ConnectionIntersectNodeEvent>();
         this.fCreateNode = new EventEmitter();
         this.fReassignConnection = new EventEmitter();
         this.fCreateConnection = new EventEmitter();
@@ -3894,6 +3761,7 @@ class FDraggableDirective extends FDraggableBase {
         this.fDraggableDataContext.draggableItems.forEach((item) => {
             item.initialize?.();
         });
+        this.emitSelectionChangeEvent();
         if (this.fDraggableDataContext.draggableItems.length > 0) {
             this.hostElement.classList.add('f-dragging');
         }
@@ -3915,28 +3783,45 @@ class FDraggableDirective extends FDraggableBase {
         this.hostElement.classList.remove('f-dragging');
         this.fDraggableDataContext.reset();
     }
+    emitSelectionChangeEvent() {
+        let selectedNodes = [];
+        let selectedConnections = [];
+        this.fDraggableDataContext.selectedItems.forEach((x) => {
+            if (x.hostElement.classList.contains('f-node')) {
+                selectedNodes.push(x.hostElement.id);
+            }
+            else {
+                selectedConnections.push(x.hostElement.id);
+            }
+        });
+        this.fSelectionChange.emit(new SelectionChangeEvent(selectedNodes, selectedConnections));
+    }
     ngOnDestroy() {
         super.unsubscribe();
         this.subscriptions$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDraggableDirective, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }, { token: i0.NgZone }, { token: i0.Injector }, { token: FComponentsStore }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FDraggableDirective, selector: "f-flow[fDraggable]", inputs: { disabled: "disabled" }, outputs: { fCreateNode: "fCreateNode", fReassignConnection: "fReassignConnection", fCreateConnection: "fCreateConnection" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDirective, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }, { token: i0.NgZone }, { token: i0.Injector }, { token: FComponentsStore }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: FDraggableDirective, selector: "f-flow[fDraggable]", inputs: { disabled: ["fDraggableDisabled", "disabled"] }, outputs: { fSelectionChange: "fSelectionChange", fCreateNode: "fCreateNode", fReassignConnection: "fReassignConnection", fCreateConnection: "fCreateConnection" }, providers: [
             { provide: F_DRAGGABLE, useExisting: FDraggableDirective }
-        ], usesInheritance: true, ngImport: i0 }); }
+        ], exportAs: ["fDraggable"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDraggableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FDraggableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "f-flow[fDraggable]",
+                    exportAs: 'fDraggable',
                     providers: [
                         { provide: F_DRAGGABLE, useExisting: FDraggableDirective }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FDraggableDataContext }, { type: i0.NgZone }, { type: i0.Injector }, { type: FComponentsStore }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FDraggableDataContext }, { type: i0.NgZone }, { type: i0.Injector }, { type: FComponentsStore }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }]; }, propDecorators: { disabled: [{
-                type: Input
+                }] }], propDecorators: { disabled: [{
+                type: Input,
+                args: ['fDraggableDisabled']
+            }], fSelectionChange: [{
+                type: Output
             }], fCreateNode: [{
                 type: Output
             }], fReassignConnection: [{
@@ -3948,38 +3833,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
 const F_PARENT = new InjectionToken('F_PARENT');
 
 let uniqueId = 0;
-class FFlowComponent extends FFlowBase {
+/**
+ * `FFlowComponent` is an Angular component for managing and visualizing the flow of elements.
+ * This component provides functionality for initialization, monitoring changes, and managing connections between elements.
+ *
+ * @component
+ * @selector f-flow
+ * @templateUrl './f-flow.component.html'
+ * @styleUrls ['./f-flow.component.scss']
+ * @host { '[attr.id]': 'id', class: "f-component f-flow" }
+ * @providers {FComponentsStore, FDraggableDataContext, ...}
+ * @changeDetection ChangeDetectionStrategy.OnPush
+ * @implements IFlowBase, OnInit, AfterContentInit, OnDestroy
+ */
+class FFlowComponent {
+    /**
+     * Provides access to the host HTML element of the component.
+     *
+     * @returns {HTMLElement}
+     */
     get hostElement() {
         return this.elementReference.nativeElement;
     }
+    /**
+     * Constructor for FFlowComponent.
+     *
+     * @param elementReference Angular ElementRef for accessing the DOM element.
+     * @param getElementRectInFlowHandler Handler to get the rectangle of an element in the flow.
+     * @param getConnectionVectorHandler Handler to get the connection vector.
+     * @param getAllNodesRectHandler Handler to get the rectangle of all nodes.
+     * @param fComponentsStore F Components Store.
+     */
     constructor(elementReference, getElementRectInFlowHandler, getConnectionVectorHandler, getAllNodesRectHandler, fComponentsStore) {
-        super();
         this.elementReference = elementReference;
         this.getElementRectInFlowHandler = getElementRectInFlowHandler;
         this.getConnectionVectorHandler = getConnectionVectorHandler;
         this.getAllNodesRectHandler = getAllNodesRectHandler;
         this.fComponentsStore = fComponentsStore;
+        /**
+         * Subscription for managing observables, especially for cleanup on component destruction.
+         * @private
+         * @type {Subscription}
+         */
+        this.subscription$ = new Subscription();
+        /**
+         * Unique identifier for each instance of the component.
+         * Automatically generated upon component creation.
+         *
+         * @input
+         * @hostBinding 'attr.id'
+         * @type {string}
+         */
         this.id = `f-flow-${uniqueId++}`;
-        this.onDestroy = new Subject();
-        this.onInitialized = new EventEmitter();
-        this.isInitialized = false;
+        /**
+         * Event emitted after the component has fully loaded and initialized.
+         *
+         * @output
+         * @type {EventEmitter<void>}
+         */
+        this.fLoaded = new EventEmitter();
+        /**
+         * Flag indicating whether the component has loaded.
+         * @private
+         * @type {boolean}
+         */
+        this.isLoaded = false;
     }
+    /**
+     * Initializes the component, setting it as the active flow in `FComponentsStore` and assigning a unique ID.
+     */
     ngOnInit() {
         this.fComponentsStore.fFlow = this;
         FLOW.UID = this.id;
     }
+    /**
+     * Called after the content of the component has been initialized.
+     * Begins the process of monitoring and handling changes in elements.
+     */
     ngAfterContentInit() {
-        this.subscribeOnElementsChanges();
+        this.subscription$.add(this.subscribeOnElementsChanges());
     }
+    /**
+     * Subscribes to element changes and performs necessary actions on their change.
+     * @returns {Subscription}
+     * @private
+     */
     subscribeOnElementsChanges() {
-        this.fComponentsStore.changes.pipe(startWith(null), takeUntil(this.onDestroy), debounceTime(20)).subscribe(() => {
+        return this.fComponentsStore.changes.pipe(startWith(null), debounceTime(20)).subscribe(() => {
             this.calculateConnections();
-            if (!this.isInitialized) {
-                this.isInitialized = true;
-                this.onInitialized.emit(this.getNodesRect());
+            if (!this.isLoaded) {
+                this.isLoaded = true;
+                this.fLoaded.emit();
             }
         });
     }
+    /**
+     * Performs the calculation of connections between output and input elements.
+     * @private
+     */
     calculateConnections() {
         this.fComponentsStore.fOutputs.forEach((output) => output.setConnected(false));
         this.fComponentsStore.fInputs.forEach((input) => input.setConnected(false));
@@ -3989,28 +3940,30 @@ class FFlowComponent extends FFlowBase {
             if (output && input) {
                 output.setConnected(true);
                 input.setConnected(true);
-                // setTimeout(() => {
                 const outputRect = this.getElementRectInFlowHandler.handle(output.hostElement);
                 const inputRect = this.getElementRectInFlowHandler.handle(input.hostElement);
                 const vector = this.getConnectionVectorHandler.handle(new GetConnectionVectorRequest(outputRect, inputRect, connection.behavior, output.side, input.side));
+                connection.setMarkers();
                 connection.setVector(vector.point1, output.side, vector.point2, input.side);
-                // requestAnimationFrame(() => {
                 connection.initialize();
-                // });
-                // const markers = this.fComponentsStore.fDefs!.getMarkersForConnection(connection.id, connection.startColor, connection.endColor);
-                // connection.setMarkers(markers);
-                // });
             }
         });
     }
+    /**
+     * Returns a rectangle representing the position and size of all nodes in the flow.
+     * @returns {IRect}
+     */
     getNodesRect() {
         return this.getAllNodesRectHandler.handle();
     }
+    /**
+     * Releases resources and unsubscribes from all subscriptions before the component is destroyed.
+     */
     ngOnDestroy() {
-        this.onDestroy.next();
+        this.subscription$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FFlowComponent, deps: [{ token: i0.ElementRef }, { token: GetElementRectInFlowHandler }, { token: GetConnectionVectorHandler }, { token: GetAllNodesRectHandler }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FFlowComponent, selector: "f-flow", inputs: { id: "id" }, outputs: { onInitialized: "onInitialized" }, host: { properties: { "attr.id": "this.id" }, classAttribute: "f-component f-flow" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FFlowComponent, deps: [{ token: i0.ElementRef }, { token: GetElementRectInFlowHandler }, { token: GetConnectionVectorHandler }, { token: GetAllNodesRectHandler }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FFlowComponent, selector: "f-flow", inputs: { id: "id" }, outputs: { fLoaded: "fLoaded" }, host: { properties: { "attr.id": "this.id" }, classAttribute: "f-component f-flow" }, providers: [
             FComponentsStore,
             FDraggableDataContext,
             ...SINGLE_SELECT_PROVIDERS,
@@ -4022,9 +3975,9 @@ class FFlowComponent extends FFlowBase {
             ...COMMON_PROVIDERS,
             { provide: F_FLOW, useExisting: FFlowComponent },
             { provide: F_PARENT, useExisting: FFlowComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <ng-content select=\"[fDefinitions]\"></ng-content>\n\n    <ng-content select=\"f-background\"></ng-content>\n\n    <ng-content select=\"f-line-alignment\"></ng-content>\n\n    <ng-content select=\"f-canvas\"></ng-content>\n\n    <ng-content select=\"f-selection-area\"></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<ng-container>\n    <ng-content select=\"[fDefinitions]\"></ng-content>\n\n    <ng-content select=\"f-background\"></ng-content>\n\n    <ng-content select=\"f-line-alignment\"></ng-content>\n\n    <ng-content select=\"f-canvas\"></ng-content>\n\n    <ng-content select=\"f-selection-area\"></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FFlowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FFlowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-flow', host: {
                         '[attr.id]': 'id',
@@ -4042,18 +3995,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         { provide: F_FLOW, useExisting: FFlowComponent },
                         { provide: F_PARENT, useExisting: FFlowComponent },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n    <ng-content select=\"[fDefinitions]\"></ng-content>\n\n    <ng-content select=\"f-background\"></ng-content>\n\n    <ng-content select=\"f-line-alignment\"></ng-content>\n\n    <ng-content select=\"f-canvas\"></ng-content>\n\n    <ng-content select=\"f-selection-area\"></ng-content>\n</ng-container>\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:all;-webkit-user-select:none;user-select:none;touch-action:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: GetElementRectInFlowHandler }, { type: GetConnectionVectorHandler }, { type: GetAllNodesRectHandler }, { type: FComponentsStore }]; }, propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: GetElementRectInFlowHandler }, { type: GetConnectionVectorHandler }, { type: GetAllNodesRectHandler }, { type: FComponentsStore }], propDecorators: { id: [{
                 type: Input
             }, {
                 type: HostBinding,
                 args: ['attr.id']
-            }], onInitialized: [{
+            }], fLoaded: [{
                 type: Output
             }] } });
 
 class FFlowModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: FFlowModule, declarations: [FConnectionDragHandleComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.9", ngImport: i0, type: FFlowModule, declarations: [FConnectionDragHandleComponent,
             FConnectionGradientComponent,
             FConnectionPathComponent,
             FConnectionTextComponent,
@@ -4062,7 +4015,6 @@ class FFlowModule {
             FFlowComponent,
             FBackgroundComponent,
             FCanvasComponent,
-            FDefinitionsComponent,
             FNodeComponent,
             FConnectionComponent,
             FConnectionForCreateComponent,
@@ -4073,14 +4025,9 @@ class FFlowModule {
             FDraggableDirective,
             FExternalItemDirective,
             FSelectionAreaComponent,
-            FLineAlignmentComponent,
-            FConnectionMarkerStartDirective,
-            FConnectionMarkerStartSelectedDirective,
-            FConnectionMarkerEndDirective,
-            FConnectionMarkerEndSelectedDirective], imports: [CommonModule], exports: [FFlowComponent,
+            FLineAlignmentComponent], imports: [CommonModule], exports: [FFlowComponent,
             FBackgroundComponent,
             FCanvasComponent,
-            FDefinitionsComponent,
             FNodeComponent,
             FConnectionComponent,
             FConnectionForCreateComponent,
@@ -4091,16 +4038,12 @@ class FFlowModule {
             FDraggableDirective,
             FExternalItemDirective,
             FSelectionAreaComponent,
-            FLineAlignmentComponent,
-            FConnectionMarkerStartDirective,
-            FConnectionMarkerStartSelectedDirective,
-            FConnectionMarkerEndDirective,
-            FConnectionMarkerEndSelectedDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FFlowModule, providers: [
+            FLineAlignmentComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FFlowModule, providers: [
             FDraggableDataContext,
         ], imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FFlowModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FFlowModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4113,7 +4056,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         FFlowComponent,
                         FBackgroundComponent,
                         FCanvasComponent,
-                        FDefinitionsComponent,
                         FNodeComponent,
                         FConnectionComponent,
                         FConnectionForCreateComponent,
@@ -4125,10 +4067,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         FExternalItemDirective,
                         FSelectionAreaComponent,
                         FLineAlignmentComponent,
-                        FConnectionMarkerStartDirective,
-                        FConnectionMarkerStartSelectedDirective,
-                        FConnectionMarkerEndDirective,
-                        FConnectionMarkerEndSelectedDirective
                     ],
                     imports: [
                         CommonModule
@@ -4140,7 +4078,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         FFlowComponent,
                         FBackgroundComponent,
                         FCanvasComponent,
-                        FDefinitionsComponent,
                         FNodeComponent,
                         FConnectionComponent,
                         FConnectionForCreateComponent,
@@ -4152,10 +4089,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         FExternalItemDirective,
                         FSelectionAreaComponent,
                         FLineAlignmentComponent,
-                        FConnectionMarkerStartDirective,
-                        FConnectionMarkerStartSelectedDirective,
-                        FConnectionMarkerEndDirective,
-                        FConnectionMarkerEndSelectedDirective
                     ]
                 }]
         }] });
@@ -4164,5 +4097,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CreateConnectionEvent, CreateNodeEvent, FBackgroundComponent, FCanvasChangeEvent, FCanvasComponent, FCellPatternComponent, FConnectionComponent, FConnectionForCreateComponent, FConnectionMarkerEndDirective, FConnectionMarkerEndSelectedDirective, FConnectionMarkerStartDirective, FConnectionMarkerStartSelectedDirective, FDefinitionsComponent, FDragHandleDirective, FDraggableDirective, FExternalItemDirective, FFlowComponent, FFlowModule, FLineAlignmentComponent, FNodeComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FSelectionAreaComponent, FZoomDirective, F_BACKGROUND_PATTERN, F_DRAG_HANDLE, ReassignConnectionEvent };
+export { CreateConnectionEvent, CreateNodeEvent, EConnectionBehavior, EConnectionType, EFMarkerType, FBackgroundComponent, FCanvasChangeEvent, FCanvasComponent, FCellPatternComponent, FConnectionComponent, FConnectionForCreateComponent, FDragHandleDirective, FDraggableDirective, FExternalItemDirective, FFlowComponent, FFlowModule, FLineAlignmentComponent, FMarkerBase, FMarkerComponent, FNodeComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FSelectionAreaComponent, FZoomDirective, F_BACKGROUND_PATTERN, F_DRAG_HANDLE, F_MARKER, ReassignConnectionEvent };
 //# sourceMappingURL=foblex-flow.mjs.map