@foblex/flow 12.3.6 → 12.4.0

package/fesm2022/foblex-flow.mjs

@@ -10,37 +10,41 @@ const F_BACKGROUND_PATTERN = new InjectionToken('F_BACKGROUND_PATTERN');
 
 let uniqueId$a = 0;
 class FRectPatternComponent {
+    elementReference;
+    _subscription$ = new Subscription();
+    _stateChanges = new Subject();
     get hostElement() {
         return this.elementReference.nativeElement;
     }
+    id = `f-pattern-${uniqueId$a++}`;
+    _vColor = 'rgba(0,0,0,0.1)';
     set vColor(value) {
         this._vColor = value;
         this._stateChanges.next();
     }
+    _hColor = 'rgba(0,0,0,0.1)';
     set hColor(value) {
         this._vColor = value;
         this._stateChanges.next();
     }
+    _vSize = 20;
     set vSize(value) {
         this._vSize = value;
         this._stateChanges.next();
     }
+    _hSize = 20;
     set hSize(value) {
         this._hSize = value;
         this._stateChanges.next();
     }
+    _transform = TransformModelExtensions.default();
+    _position = PointExtensions.initialize();
+    _size = SizeExtensions.initialize(this._hSize, this._vSize);
+    _pattern;
+    _vLine;
+    _hLine;
     constructor(elementReference) {
         this.elementReference = elementReference;
-        this._subscription$ = new Subscription();
-        this._stateChanges = new Subject();
-        this.id = `f-pattern-${uniqueId$a++}`;
-        this._vColor = 'rgba(0,0,0,0.1)';
-        this._hColor = 'rgba(0,0,0,0.1)';
-        this._vSize = 20;
-        this._hSize = 20;
-        this._transform = TransformModelExtensions.default();
-        this._position = PointExtensions.initialize();
-        this._size = SizeExtensions.initialize(this._hSize, this._vSize);
         this.createPattern();
     }
     createPattern() {
@@ -91,12 +95,12 @@ class FRectPatternComponent {
     ngOnDestroy() {
         this._subscription$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FRectPatternComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FRectPatternComponent, selector: "f-rect-pattern", inputs: { id: "id", vColor: "vColor", hColor: "hColor", vSize: "vSize", hSize: "hSize" }, host: { properties: { "attr.id": "id" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FRectPatternComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: FRectPatternComponent, selector: "f-rect-pattern", inputs: { id: "id", vColor: "vColor", hColor: "hColor", vSize: "vSize", hSize: "hSize" }, host: { properties: { "attr.id": "id" } }, providers: [
             { provide: F_BACKGROUND_PATTERN, useExisting: FRectPatternComponent }
-        ], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FRectPatternComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FRectPatternComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "f-rect-pattern",
@@ -123,27 +127,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
 let uniqueId$9 = 0;
 class FCirclePatternComponent {
+    elementReference;
+    _subscription$ = new Subscription();
+    _stateChanges = new Subject();
     get hostElement() {
         return this.elementReference.nativeElement;
     }
+    id = `f-pattern-${uniqueId$9++}`;
+    _color = 'rgba(0,0,0,0.1)';
     set color(value) {
         this._color = value;
         this._stateChanges.next();
     }
+    _radius = 20;
+    _scaledRadius = 20;
     set radius(value) {
         this._radius = value;
         this._stateChanges.next();
     }
+    _transform = TransformModelExtensions.default();
+    _position = PointExtensions.initialize();
+    _pattern;
+    _circle;
     constructor(elementReference) {
         this.elementReference = elementReference;
-        this._subscription$ = new Subscription();
-        this._stateChanges = new Subject();
-        this.id = `f-pattern-${uniqueId$9++}`;
-        this._color = 'rgba(0,0,0,0.1)';
-        this._radius = 20;
-        this._scaledRadius = 20;
-        this._transform = TransformModelExtensions.default();
-        this._position = PointExtensions.initialize();
         this.createPattern();
     }
     createPattern() {
@@ -190,12 +197,12 @@ class FCirclePatternComponent {
     ngOnDestroy() {
         this._subscription$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FCirclePatternComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FCirclePatternComponent, selector: "f-circle-pattern", inputs: { id: "id", color: "color", radius: "radius" }, host: { properties: { "attr.id": "id" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FCirclePatternComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: FCirclePatternComponent, selector: "f-circle-pattern", inputs: { id: "id", color: "color", radius: "radius" }, host: { properties: { "attr.id": "id" } }, providers: [
             { provide: F_BACKGROUND_PATTERN, useExisting: FCirclePatternComponent }
-        ], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FCirclePatternComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FCirclePatternComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "f-circle-pattern",
@@ -218,29 +225,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
 const F_BACKGROUND = new InjectionToken('F_BACKGROUND');
 class FBackgroundBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FBackgroundBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FBackgroundBase, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FBackgroundBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FBackgroundBase, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FBackgroundBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FBackgroundBase, decorators: [{
             type: Directive
         }] });
 
 class FComponentsStore {
-    constructor() {
-        this.changes = new Subject();
-        this.fNodes = [];
-        this.fConnections = [];
-        this.fMarkers = [];
-        this.fOutputs = [];
-        this.fInputs = [];
-        this.fOutlets = [];
-    }
+    changes = new Subject();
     get flowHost() {
         return this.fFlow?.hostElement;
     }
     get transform() {
         return this.fCanvas?.transform;
     }
+    fFlow;
+    fCanvas;
+    fBackground;
+    fNodes = [];
+    fConnections = [];
+    fTempConnection;
+    fMarkers = [];
+    fOutputs = [];
+    fInputs = [];
+    fOutlets = [];
+    fDraggable;
     findNode(element) {
         return this.fNodes.find(n => n.isContains(element));
     }
@@ -255,18 +265,21 @@ class FComponentsStore {
             this.changes.next();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FComponentsStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FComponentsStore }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FComponentsStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FComponentsStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FComponentsStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FComponentsStore, decorators: [{
             type: Injectable
         }] });
 
 let uniqueId$8 = 0;
 class FBackgroundComponent extends FBackgroundBase {
+    elementReference;
+    fComponentsStore;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
+    fBackgroundPattern;
     constructor(elementReference, fComponentsStore) {
         super();
         this.elementReference = elementReference;
@@ -302,10 +315,10 @@ class FBackgroundComponent extends FBackgroundBase {
     ngOnDestroy() {
         this.fComponentsStore.fBackground = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FBackgroundComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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 }], usesInheritance: true, ngImport: i0, template: "<svg><ng-content></ng-content></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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FBackgroundComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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 }], usesInheritance: true, ngImport: i0, template: "<svg><ng-content></ng-content></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: "17.3.11", ngImport: i0, type: FBackgroundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FBackgroundComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-background", host: {
                         'class': 'f-component f-background'
@@ -322,6 +335,8 @@ const F_BACKGROUND_PROVIDERS = [
 ];
 
 class FCanvasChangeEvent {
+    position;
+    scale;
     constructor(position, scale) {
         this.position = position;
         this.scale = scale;
@@ -330,23 +345,24 @@ class FCanvasChangeEvent {
 
 const F_DRAG_HANDLE = new InjectionToken('F_DRAG_HANDLE');
 class FDragHandleDirective {
+    elementReference;
     get disabled() {
         return this.isDisabled;
     }
     set disabled(isDisabled) {
         this.isDisabled = BooleanExtensions.castToBoolean(isDisabled);
     }
+    isDisabled = false;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
     constructor(elementReference) {
         this.elementReference = elementReference;
-        this.isDisabled = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FDragHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FDragHandleDirective, 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FDragHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FDragHandleDirective, 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: "17.3.11", ngImport: i0, type: FDragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FDragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[fDragHandle]",
@@ -373,6 +389,8 @@ class ClearSelectionRequest {
 }
 
 class Pipeline {
+    validator;
+    execution;
     handle(request, injector) {
         let isValid = true;
         if (this.validator) {
@@ -392,10 +410,11 @@ class Pipeline {
 }
 
 class FFlowMediator {
+    injector;
     constructor(injector) {
         this.injector = injector;
     }
-    static { this.pipelines = new Map(); }
+    static pipelines = new Map();
     static registerPipeline(type, handler, isValidator) {
         const pipeline = this.pipelines.get(type.name) || new Pipeline();
         isValidator
@@ -410,10 +429,10 @@ class FFlowMediator {
         }
         throw new Error('Handler not registered for request type.');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FFlowMediator, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FFlowMediator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FFlowMediator, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FFlowMediator });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FFlowMediator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FFlowMediator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Injector }] });
 
@@ -430,19 +449,20 @@ function FValidatorRegister(requestType) {
 }
 
 class CanvasMoveFinalizeRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
 class FDraggableDataContext {
-    constructor() {
-        this.selectedItems = [];
-        this.isSelectedChanged = false;
-        this.onPointerDownScale = 1;
-        this.onPointerDownPosition = new Point(0, 0);
-        this.draggableItems = [];
-    }
+    selectedItems = [];
+    isSelectedChanged = false;
+    onPointerDownScale = 1;
+    onPointerDownPosition = new Point(0, 0);
+    draggableItems = [];
+    fSelectionArea;
+    fLineAlignment;
     reset() {
         this.draggableItems = [];
         this.onPointerDownScale = 1;
@@ -451,14 +471,15 @@ class FDraggableDataContext {
     markSelectionAsChanged() {
         this.isSelectedChanged = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FDraggableDataContext }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FDraggableDataContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FDraggableDataContext });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FDraggableDataContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FDraggableDataContext, decorators: [{
             type: Injectable
         }] });
 
 let CanvasMoveFinalizeExecution = class CanvasMoveFinalizeExecution {
+    fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
@@ -467,13 +488,13 @@ let CanvasMoveFinalizeExecution = class CanvasMoveFinalizeExecution {
             x.complete?.();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CanvasMoveFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CanvasMoveFinalizeExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CanvasMoveFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CanvasMoveFinalizeExecution });
 };
 CanvasMoveFinalizeExecution = __decorate([
     FExecutionRegister(CanvasMoveFinalizeRequest)
 ], CanvasMoveFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CanvasMoveFinalizeExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CanvasMoveFinalizeExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
@@ -491,19 +512,20 @@ var EFDraggableType;
 })(EFDraggableType || (EFDraggableType = {}));
 
 let CanvasMoveFinalizeValidator = class CanvasMoveFinalizeValidator {
+    fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
         return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.CANVAS);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CanvasMoveFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CanvasMoveFinalizeValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CanvasMoveFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CanvasMoveFinalizeValidator });
 };
 CanvasMoveFinalizeValidator = __decorate([
     FValidatorRegister(CanvasMoveFinalizeRequest)
 ], CanvasMoveFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CanvasMoveFinalizeValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CanvasMoveFinalizeValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
@@ -513,16 +535,18 @@ const CANVAS_MOVE_FINALIZE_PROVIDERS = [
 ];
 
 class CanvasMovePreparationRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
 class CanvasDragHandler {
+    fComponentsStore;
+    type = EFDraggableType.CANVAS;
+    onPointerDownPosition = PointExtensions.initialize();
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
-        this.type = EFDraggableType.CANVAS;
-        this.onPointerDownPosition = PointExtensions.initialize();
     }
     initialize() {
         this.onPointerDownPosition = this.fComponentsStore.fCanvas.transform.position;
@@ -537,6 +561,8 @@ class CanvasDragHandler {
 }
 
 let CanvasMovePreparationExecution = class CanvasMovePreparationExecution {
+    fComponentsStore;
+    fDraggableDataContext;
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
@@ -552,17 +578,19 @@ let CanvasMovePreparationExecution = class CanvasMovePreparationExecution {
             new CanvasDragHandler(this.fComponentsStore)
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CanvasMovePreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CanvasMovePreparationExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CanvasMovePreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CanvasMovePreparationExecution });
 };
 CanvasMovePreparationExecution = __decorate([
     FExecutionRegister(CanvasMovePreparationRequest)
 ], CanvasMovePreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CanvasMovePreparationExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CanvasMovePreparationExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
 
 let CanvasMovePreparationValidator = class CanvasMovePreparationValidator {
+    fComponentsStore;
+    fDraggableDataContext;
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
@@ -587,13 +615,13 @@ let CanvasMovePreparationValidator = class CanvasMovePreparationValidator {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CanvasMovePreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CanvasMovePreparationValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CanvasMovePreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CanvasMovePreparationValidator });
 };
 CanvasMovePreparationValidator = __decorate([
     FValidatorRegister(CanvasMovePreparationRequest)
 ], CanvasMovePreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CanvasMovePreparationValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CanvasMovePreparationValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
 
@@ -653,6 +681,8 @@ class CalculateConnectorConnectableSideHandler {
 }
 
 class CalculateConnectorConnectableSideRequest {
+    fConnector;
+    fNodeHost;
     constructor(fConnector, fNodeHost) {
         this.fConnector = fConnector;
         this.fNodeHost = fNodeHost;
@@ -660,12 +690,10 @@ class CalculateConnectorConnectableSideRequest {
 }
 
 class FConnectorBase {
-    constructor() {
-        this.stateChanges = new Subject();
-        this.isSelfConnectable = true;
-        this.fConnectableSide = EFConnectableSide.AUTO;
-        this._fConnectableSide = EFConnectableSide.AUTO;
-    }
+    stateChanges = new Subject();
+    isSelfConnectable = true;
+    fConnectableSide = EFConnectableSide.AUTO;
+    _fConnectableSide = EFConnectableSide.AUTO;
     isContains(element) {
         return this.hostElement.contains(element);
     }
@@ -676,17 +704,14 @@ class FConnectorBase {
 
 const F_NODE_INPUT = new InjectionToken('F_NODE_INPUT');
 class FNodeInputBase extends FConnectorBase {
-    constructor() {
-        super(...arguments);
-        this.isConnected = false;
-    }
+    isConnected = false;
     get canBeConnected() {
         return !this.disabled && (this.multiple ? true : !this.isConnected);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FNodeInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FNodeInputBase, usesInheritance: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FNodeInputBase, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FNodeInputBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeInputBase, decorators: [{
             type: Directive
         }] });
 
@@ -694,16 +719,13 @@ function isNodeInput(element) {
     return !!element.closest('[fNodeInput]');
 }
 
-function castToConnectableSide(type) {
-    const result = EFConnectableSide[type.toUpperCase()];
-    if (result === undefined) {
-        throw new Error(`Unknown connectable side: ${type}. Accepted values: ${Object.keys(EFConnectableSide).join(', ')}`);
-    }
-    return result;
-}
-
 let uniqueId$7 = 0;
 class FNodeInputDirective extends FNodeInputBase {
+    elementReference;
+    fNode;
+    fComponentsStore;
+    id = `f-node-input-${uniqueId$7++}`;
+    multiple = true;
     get disabled() {
         return this.isDisabled;
     }
@@ -714,13 +736,16 @@ class FNodeInputDirective extends FNodeInputBase {
             this.stateChanges.next();
         }
     }
+    isDisabled = false;
     set _fSide(value) {
-        this._fConnectableSide = castToConnectableSide(value);
+        this._fConnectableSide = castToEnum(value, 'fInputConnectableSide', EFConnectableSide);
         this.fNode.refresh();
     }
     get _fSide() {
         return this._fConnectableSide;
     }
+    _fConnectableSide = EFConnectableSide.AUTO;
+    isConnected = false;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
@@ -729,11 +754,6 @@ class FNodeInputDirective extends FNodeInputBase {
         this.elementReference = elementReference;
         this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-input-${uniqueId$7++}`;
-        this.multiple = true;
-        this.isDisabled = false;
-        this._fConnectableSide = EFConnectableSide.AUTO;
-        this.isConnected = false;
     }
     ngOnInit() {
         this.fComponentsStore.addComponent(this.fComponentsStore.fInputs, this);
@@ -747,10 +767,10 @@ class FNodeInputDirective extends FNodeInputBase {
         this.fNode.removeConnector(this);
         this.fComponentsStore.removeComponent(this.fComponentsStore.fInputs, this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", 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.3.11", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: ["fInputId", "id"], multiple: ["fInputMultiple", "multiple"], disabled: ["fInputDisabled", "disabled"], _fSide: ["fInputConnectableSide", "_fSide"] }, host: { properties: { "attr.data-f-input-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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeInputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { id: ["fInputId", "id"], multiple: ["fInputMultiple", "multiple"], disabled: ["fInputDisabled", "disabled"], _fSide: ["fInputConnectableSide", "_fSide"] }, host: { properties: { "attr.data-f-input-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: "17.3.11", ngImport: i0, type: FNodeInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[fNodeInput]",
@@ -783,21 +803,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
 const F_NODE_OUTLET = new InjectionToken('F_NODE_OUTLET');
 class FNodeOutletBase extends FConnectorBase {
-    constructor() {
-        super(...arguments);
-        this.isConnected = false;
-        this.outputs = [];
-    }
+    isConnected = false;
+    outputs = [];
     get canBeConnected() {
         return !this.disabled && this.outputs.some((output) => output.canBeConnected);
     }
     setOutputs(outputs) {
         this.outputs = outputs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FNodeOutletBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FNodeOutletBase, usesInheritance: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeOutletBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FNodeOutletBase, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FNodeOutletBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeOutletBase, decorators: [{
             type: Directive
         }] });
 
@@ -807,6 +824,10 @@ function isNodeOutlet(element) {
 
 let uniqueId$6 = 0;
 class FNodeOutletDirective extends FNodeOutletBase {
+    elementReference;
+    fNode;
+    fComponentsStore;
+    id = `f-node-outlet-${uniqueId$6++}`;
     get disabled() {
         return this.isDisabled;
     }
@@ -817,6 +838,10 @@ class FNodeOutletDirective extends FNodeOutletBase {
             this.stateChanges.next();
         }
     }
+    isDisabled = false;
+    fConnectableSide = EFConnectableSide.AUTO;
+    _fConnectableSide = EFConnectableSide.AUTO;
+    isConnectionFromOutlet = false;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
@@ -825,11 +850,6 @@ class FNodeOutletDirective extends FNodeOutletBase {
         this.elementReference = elementReference;
         this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-outlet-${uniqueId$6++}`;
-        this.isDisabled = false;
-        this.fConnectableSide = EFConnectableSide.AUTO;
-        this._fConnectableSide = EFConnectableSide.AUTO;
-        this.isConnectionFromOutlet = false;
     }
     ngOnInit() {
         if (!this.fNode) {
@@ -840,10 +860,10 @@ class FNodeOutletDirective extends FNodeOutletBase {
     ngOnDestroy() {
         this.fComponentsStore.removeComponent(this.fComponentsStore.fOutlets, this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", 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.3.11", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { id: ["fOutletId", "id"], disabled: ["fOutletDisabled", "disabled"], isConnectionFromOutlet: "isConnectionFromOutlet" }, host: { properties: { "attr.data-f-outlet-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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeOutletDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { id: ["fOutletId", "id"], disabled: ["fOutletDisabled", "disabled"], isConnectionFromOutlet: "isConnectionFromOutlet" }, host: { properties: { "attr.data-f-outlet-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: "17.3.11", ngImport: i0, type: FNodeOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeOutletDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[fNodeOutlet]",
@@ -870,17 +890,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
 const F_NODE_OUTPUT = new InjectionToken('F_NODE_OUTPUT');
 class FNodeOutputBase extends FConnectorBase {
-    constructor() {
-        super(...arguments);
-        this.isConnected = false;
-    }
+    isConnected = false;
     get canBeConnected() {
         return !this.disabled && (this.multiple ? true : !this.isConnected);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FNodeOutputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FNodeOutputBase, usesInheritance: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeOutputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FNodeOutputBase, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FNodeOutputBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeOutputBase, decorators: [{
             type: Directive
         }] });
 
@@ -890,6 +907,11 @@ function isNodeOutput(element) {
 
 let uniqueId$5 = 0;
 class FNodeOutputDirective extends FNodeOutputBase {
+    elementReference;
+    fNode;
+    fComponentsStore;
+    id = `f-node-output-${uniqueId$5++}`;
+    multiple = false;
     get disabled() {
         return this.isDisabled;
     }
@@ -900,13 +922,17 @@ class FNodeOutputDirective extends FNodeOutputBase {
             this.stateChanges.next();
         }
     }
+    isDisabled = false;
     set _fSide(value) {
-        this._fConnectableSide = castToConnectableSide(value);
+        this._fConnectableSide = castToEnum(value, 'fOutputConnectableSide', EFConnectableSide);
         this.fNode.refresh();
     }
     get _fSide() {
         return this._fConnectableSide;
     }
+    _fConnectableSide = EFConnectableSide.AUTO;
+    isConnected = false;
+    isSelfConnectable = true;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
@@ -915,12 +941,6 @@ class FNodeOutputDirective extends FNodeOutputBase {
         this.elementReference = elementReference;
         this.fNode = fNode;
         this.fComponentsStore = fComponentsStore;
-        this.id = `f-node-output-${uniqueId$5++}`;
-        this.multiple = false;
-        this.isDisabled = false;
-        this._fConnectableSide = EFConnectableSide.AUTO;
-        this.isConnected = false;
-        this.isSelfConnectable = true;
     }
     ngOnInit() {
         if (!this.fNode) {
@@ -937,10 +957,10 @@ class FNodeOutputDirective extends FNodeOutputBase {
         this.fNode.removeConnector(this);
         this.fComponentsStore.removeComponent(this.fComponentsStore.fOutputs, this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", 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.3.11", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: ["fOutputId", "id"], multiple: ["fOutputMultiple", "multiple"], disabled: ["fOutputDisabled", "disabled"], _fSide: ["fOutputConnectableSide", "_fSide"], isSelfConnectable: "isSelfConnectable" }, host: { properties: { "attr.data-f-output-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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeOutputDirective, deps: [{ token: i0.ElementRef }, { token: F_NODE }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { id: ["fOutputId", "id"], multiple: ["fOutputMultiple", "multiple"], disabled: ["fOutputDisabled", "disabled"], _fSide: ["fOutputConnectableSide", "_fSide"], isSelfConnectable: "isSelfConnectable" }, host: { properties: { "attr.data-f-output-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: "17.3.11", ngImport: i0, type: FNodeOutputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeOutputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[fNodeOutput]",
@@ -978,12 +998,15 @@ const F_CONNECTORS_PROVIDERS = [
 ];
 
 class CreateConnectionFinalizeRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
 class GetInputUnderPointerRequest {
+    event;
+    dragHandler;
     constructor(event, dragHandler) {
         this.event = event;
         this.dragHandler = dragHandler;
@@ -991,6 +1014,7 @@ class GetInputUnderPointerRequest {
 }
 
 let GetInputUnderPointerExecution = class GetInputUnderPointerExecution {
+    fComponentsStore;
     get fNodes() {
         return this.fComponentsStore.fNodes;
     }
@@ -1045,13 +1069,13 @@ let GetInputUnderPointerExecution = class GetInputUnderPointerExecution {
             return sourceNode?.hostElement !== targetNode?.hostElement;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetInputUnderPointerExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetInputUnderPointerExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetInputUnderPointerExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetInputUnderPointerExecution });
 };
 GetInputUnderPointerExecution = __decorate([
     FExecutionRegister(GetInputUnderPointerRequest)
 ], GetInputUnderPointerExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetInputUnderPointerExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetInputUnderPointerExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
@@ -1088,6 +1112,7 @@ function RequiredOutput() {
 }
 
 let GetInputUnderPointerValidator = class GetInputUnderPointerValidator {
+    fComponentsStore;
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
     }
@@ -1104,13 +1129,13 @@ let GetInputUnderPointerValidator = class GetInputUnderPointerValidator {
     getOutlet(dragHandler) {
         return this.fComponentsStore.fOutlets.find((x) => x.id === dragHandler.connection.fOutputId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetInputUnderPointerValidator, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetInputUnderPointerValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetInputUnderPointerValidator, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetInputUnderPointerValidator });
 };
 GetInputUnderPointerValidator = __decorate([
     FValidatorRegister(GetInputUnderPointerRequest)
 ], GetInputUnderPointerValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetInputUnderPointerValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetInputUnderPointerValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
@@ -1120,12 +1145,14 @@ const GET_INPUT_UNDER_POINTER_PROVIDERS = [
 ];
 
 class GetCanBeConnectedOutputByOutletRequest {
+    outlet;
     constructor(outlet) {
         this.outlet = outlet;
     }
 }
 
 let GetCanBeConnectedOutputByOutletExecution = class GetCanBeConnectedOutputByOutletExecution {
+    fComponentsStore;
     get fNodes() {
         return this.fComponentsStore.fNodes;
     }
@@ -1150,17 +1177,18 @@ let GetCanBeConnectedOutputByOutletExecution = class GetCanBeConnectedOutputByOu
     getNode(outlet) {
         return this.fNodes.find((x) => x.isContains(outlet.hostElement));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetCanBeConnectedOutputByOutletExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetCanBeConnectedOutputByOutletExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetCanBeConnectedOutputByOutletExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetCanBeConnectedOutputByOutletExecution });
 };
 GetCanBeConnectedOutputByOutletExecution = __decorate([
     FExecutionRegister(GetCanBeConnectedOutputByOutletRequest)
 ], GetCanBeConnectedOutputByOutletExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetCanBeConnectedOutputByOutletExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetCanBeConnectedOutputByOutletExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 let GetCanBeConnectedOutputByOutletValidator = class GetCanBeConnectedOutputByOutletValidator {
+    fComponentsStore;
     get fNodes() {
         return this.fComponentsStore.fNodes;
     }
@@ -1170,13 +1198,13 @@ let GetCanBeConnectedOutputByOutletValidator = class GetCanBeConnectedOutputByOu
     handle(request) {
         return !!this.fNodes.find((x) => x.isContains(request.outlet.hostElement));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetCanBeConnectedOutputByOutletValidator, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetCanBeConnectedOutputByOutletValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetCanBeConnectedOutputByOutletValidator, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetCanBeConnectedOutputByOutletValidator });
 };
 GetCanBeConnectedOutputByOutletValidator = __decorate([
     FValidatorRegister(GetCanBeConnectedOutputByOutletRequest)
 ], GetCanBeConnectedOutputByOutletValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetCanBeConnectedOutputByOutletValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetCanBeConnectedOutputByOutletValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
@@ -1186,6 +1214,9 @@ const GET_CAN_BE_CONNECTED_OUTPUT_BY_OUTLET_PROVIDERS = [
 ];
 
 class FCreateConnectionEvent {
+    fOutputId;
+    fInputId;
+    fDropPosition;
     constructor(fOutputId, fInputId, fDropPosition) {
         this.fOutputId = fOutputId;
         this.fInputId = fInputId;
@@ -1194,6 +1225,9 @@ class FCreateConnectionEvent {
 }
 
 let CreateConnectionFinalizeExecution = class CreateConnectionFinalizeExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
     get dragHandler() {
         return this.fDraggableDataContext.draggableItems[0];
     }
@@ -1224,30 +1258,31 @@ let CreateConnectionFinalizeExecution = class CreateConnectionFinalizeExecution
     getInputUnderPointer(event) {
         return this.fMediator.send(new GetInputUnderPointerRequest(event, this.dragHandler));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFinalizeExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFinalizeExecution });
 };
 CreateConnectionFinalizeExecution = __decorate([
     FExecutionRegister(CreateConnectionFinalizeRequest)
 ], CreateConnectionFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFinalizeExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFinalizeExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
 let CreateConnectionFinalizeValidator = class CreateConnectionFinalizeValidator {
+    fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
         return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.CREATE_CONNECTION);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFinalizeValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFinalizeValidator });
 };
 CreateConnectionFinalizeValidator = __decorate([
     FValidatorRegister(CreateConnectionFinalizeRequest)
 ], CreateConnectionFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFinalizeValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFinalizeValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
@@ -1257,6 +1292,9 @@ const CREATE_CONNECTION_FINALIZE_PROVIDERS = [
 ];
 
 class CreateConnectionDragHandlerRequest {
+    position;
+    connector;
+    connectorCenter;
     constructor(position, connector, connectorCenter) {
         this.position = position;
         this.connector = connector;
@@ -1265,14 +1303,17 @@ class CreateConnectionDragHandlerRequest {
 }
 
 class CreateConnectionDragHandler {
+    fMediator;
+    connection;
+    mouseDownPoint;
+    type = EFDraggableType.CREATE_CONNECTION;
+    onPointerDownFromConnectorRect = new RoundedRect();
+    onPointerDownToConnectorRect = new RoundedRect();
+    outputSide = EFConnectableSide.BOTTOM;
     constructor(fMediator, connection, mouseDownPoint) {
         this.fMediator = fMediator;
         this.connection = connection;
         this.mouseDownPoint = mouseDownPoint;
-        this.type = EFDraggableType.CREATE_CONNECTION;
-        this.onPointerDownFromConnectorRect = new RoundedRect();
-        this.onPointerDownToConnectorRect = new RoundedRect();
-        this.outputSide = EFConnectableSide.BOTTOM;
     }
     initialize() {
         const outputRect = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
@@ -1283,9 +1324,6 @@ class CreateConnectionDragHandler {
         this.move(new Point(0, 0));
     }
     move(difference) {
-        console.log(difference);
-        console.log(JSON.stringify(this.onPointerDownToConnectorRect));
-        console.log(JSON.stringify(this.onPointerDownToConnectorRect.addPoint(difference)));
         const line = this.fMediator.send(new GetConnectionLineRequest(this.onPointerDownFromConnectorRect, this.onPointerDownToConnectorRect.addPoint(difference), this.connection.fBehavior, this.outputSide, EFConnectableSide.TOP));
         this.connection.setLine(line.point1, this.outputSide, line.point2, EFConnectableSide.TOP);
         this.connection.redraw();
@@ -1297,6 +1335,9 @@ class CreateConnectionDragHandler {
 }
 
 let CreateConnectionDragHandlerExecution = class CreateConnectionDragHandlerExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
     get transform() {
         return this.fComponentsStore.fCanvas.transform;
     }
@@ -1314,13 +1355,13 @@ let CreateConnectionDragHandlerExecution = class CreateConnectionDragHandlerExec
             new CreateConnectionDragHandler(this.fMediator, this.fComponentsStore.fTempConnection, request.connectorCenter)
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionDragHandlerExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionDragHandlerExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionDragHandlerExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionDragHandlerExecution });
 };
 CreateConnectionDragHandlerExecution = __decorate([
     FExecutionRegister(CreateConnectionDragHandlerRequest)
 ], CreateConnectionDragHandlerExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionDragHandlerExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionDragHandlerExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
@@ -1329,12 +1370,15 @@ const CREATE_CONNECTION_DRAG_HANDLER_PROVIDERS = [
 ];
 
 class CreateConnectionFromOutletPreparationRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
 let CreateConnectionFromOutletPreparationExecution = class CreateConnectionFromOutletPreparationExecution {
+    fComponentsStore;
+    fMediator;
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
@@ -1371,13 +1415,13 @@ let CreateConnectionFromOutletPreparationExecution = class CreateConnectionFromO
     createDragHandler(position, output, outletCenter) {
         this.fMediator.send(new CreateConnectionDragHandlerRequest(position, output, outletCenter));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFromOutletPreparationExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFromOutletPreparationExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFromOutletPreparationExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFromOutletPreparationExecution });
 };
 CreateConnectionFromOutletPreparationExecution = __decorate([
     FExecutionRegister(CreateConnectionFromOutletPreparationRequest)
 ], CreateConnectionFromOutletPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFromOutletPreparationExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFromOutletPreparationExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FFlowMediator }] });
 
@@ -1386,12 +1430,15 @@ const CREATE_CONNECTION_FROM_OUTLET_PREPARATION_PROVIDERS = [
 ];
 
 class CreateConnectionFromOutputPreparationRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
 let CreateConnectionFromOutputPreparationExecution = class CreateConnectionFromOutputPreparationExecution {
+    fComponentsStore;
+    fMediator;
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
@@ -1416,17 +1463,18 @@ let CreateConnectionFromOutputPreparationExecution = class CreateConnectionFromO
     createDragHandler(position, output, outletCenter) {
         this.fMediator.send(new CreateConnectionDragHandlerRequest(position, output, outletCenter));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFromOutputPreparationExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFromOutputPreparationExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFromOutputPreparationExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFromOutputPreparationExecution });
 };
 CreateConnectionFromOutputPreparationExecution = __decorate([
     FExecutionRegister(CreateConnectionFromOutputPreparationRequest)
 ], CreateConnectionFromOutputPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFromOutputPreparationExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFromOutputPreparationExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FFlowMediator }] });
 
 let CreateConnectionFromOutputPreparationValidator = class CreateConnectionFromOutputPreparationValidator {
+    fComponentsStore;
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
     }
@@ -1442,13 +1490,13 @@ let CreateConnectionFromOutputPreparationValidator = class CreateConnectionFromO
     getOutlets(node) {
         return this.fComponentsStore.fOutlets.filter((x) => node.isContains(x.hostElement));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFromOutputPreparationValidator, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFromOutputPreparationValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFromOutputPreparationValidator, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFromOutputPreparationValidator });
 };
 CreateConnectionFromOutputPreparationValidator = __decorate([
     FValidatorRegister(CreateConnectionFromOutputPreparationRequest)
 ], CreateConnectionFromOutputPreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionFromOutputPreparationValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionFromOutputPreparationValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
@@ -1458,12 +1506,15 @@ const CREATE_CONNECTION_FROM_OUTPUT_PREPARATION_PROVIDERS = [
 ];
 
 class CreateConnectionPreparationRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
 let CreateConnectionPreparationExecution = class CreateConnectionPreparationExecution {
+    fComponentsStore;
+    fMediator;
     constructor(fComponentsStore, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fMediator = fMediator;
@@ -1485,17 +1536,19 @@ let CreateConnectionPreparationExecution = class CreateConnectionPreparationExec
     getOutlets(node) {
         return this.fComponentsStore.fOutlets.filter((x) => node.isContains(x.hostElement));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionPreparationExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionPreparationExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionPreparationExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionPreparationExecution });
 };
 CreateConnectionPreparationExecution = __decorate([
     FExecutionRegister(CreateConnectionPreparationRequest)
 ], CreateConnectionPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionPreparationExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionPreparationExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FFlowMediator }] });
 
 let CreateConnectionPreparationValidator = class CreateConnectionPreparationValidator {
+    fComponentsStore;
+    fDraggableDataContext;
     constructor(fComponentsStore, fDraggableDataContext) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
@@ -1509,13 +1562,13 @@ let CreateConnectionPreparationValidator = class CreateConnectionPreparationVali
     isValidConditions() {
         return !this.fDraggableDataContext.draggableItems.length && !!this.fComponentsStore.fTempConnection;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionPreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionPreparationValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionPreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionPreparationValidator });
 };
 CreateConnectionPreparationValidator = __decorate([
     FValidatorRegister(CreateConnectionPreparationRequest)
 ], CreateConnectionPreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionPreparationValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionPreparationValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
 
@@ -1528,12 +1581,17 @@ const CREATE_CONNECTION_PREPARATION_PROVIDERS = [
 ];
 
 class ReassignConnectionFinalizeRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
 class FReassignConnectionEvent {
+    connectionId;
+    fOutputId;
+    oldFInputId;
+    newFInputId;
     constructor(connectionId, fOutputId, oldFInputId, newFInputId) {
         this.connectionId = connectionId;
         this.fOutputId = fOutputId;
@@ -1543,6 +1601,9 @@ class FReassignConnectionEvent {
 }
 
 let ReassignConnectionFinalizeExecution = class ReassignConnectionFinalizeExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
     get fDraggable() {
         return this.fComponentsStore.fDraggable;
     }
@@ -1571,30 +1632,31 @@ let ReassignConnectionFinalizeExecution = class ReassignConnectionFinalizeExecut
     isReassignToDifferentInput(inputsUnderPointer) {
         return this.dragHandler.connection.fInputId !== inputsUnderPointer.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ReassignConnectionFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ReassignConnectionFinalizeExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ReassignConnectionFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ReassignConnectionFinalizeExecution });
 };
 ReassignConnectionFinalizeExecution = __decorate([
     FExecutionRegister(ReassignConnectionFinalizeRequest)
 ], ReassignConnectionFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ReassignConnectionFinalizeExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ReassignConnectionFinalizeExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
 let ReassignConnectionFinalizeValidator = class ReassignConnectionFinalizeValidator {
+    fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
         return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.REASSIGN_CONNECTION);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ReassignConnectionFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ReassignConnectionFinalizeValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ReassignConnectionFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ReassignConnectionFinalizeValidator });
 };
 ReassignConnectionFinalizeValidator = __decorate([
     FValidatorRegister(ReassignConnectionFinalizeRequest)
 ], ReassignConnectionFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ReassignConnectionFinalizeValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ReassignConnectionFinalizeValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
@@ -1604,6 +1666,7 @@ const REASSIGN_CONNECTION_FINALIZE_PROVIDERS = [
 ];
 
 class ReassignConnectionPreparationRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
@@ -1621,6 +1684,8 @@ class CalculateCenterBetweenPointsHandler {
 }
 
 class CalculateCenterBetweenPointsRequest {
+    source;
+    target;
     constructor(source, target) {
         this.source = source;
         this.target = target;
@@ -1663,6 +1728,7 @@ class CalculateConnectionCenterHandler {
 }
 
 class CalculateConnectionCenterRequest {
+    points;
     constructor(points) {
         this.points = points;
     }
@@ -1873,17 +1939,19 @@ const F_CONNECTION_IDENTIFIERS = {
 const F_CONNECTION = new InjectionToken('F_CONNECTION');
 
 class FConnectionTextPathDirective {
+    elementReference;
+    base;
     get linkToConnection() {
         return F_CONNECTION_IDENTIFIERS.linkToConnection(this.base.fConnectionId + this.base.fOutputId + this.base.fInputId);
     }
     get hostElement() {
         return this.elementReference.nativeElement;
     }
+    symbolWidth = 8;
+    fontSize = '12px';
     constructor(elementReference, base) {
         this.elementReference = elementReference;
         this.base = base;
-        this.symbolWidth = 8;
-        this.fontSize = '12px';
     }
     ngOnInit() {
         this.hostElement.setAttribute('startOffset', '50%');
@@ -1914,10 +1982,10 @@ class FConnectionTextPathDirective {
         const symbolWidth = metrics.width / text.length;
         return symbolWidth;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", 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.3.11", type: FConnectionTextPathDirective, selector: "textPath[f-connection-text-path]", host: { properties: { "attr.href": "linkToConnection" } }, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionTextPathDirective, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FConnectionTextPathDirective, selector: "textPath[f-connection-text-path]", host: { properties: { "attr.href": "linkToConnection" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FConnectionTextPathDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionTextPathDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'textPath[f-connection-text-path]',
@@ -1933,6 +2001,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 const CONNECTION_TEXT = new InjectionToken('CONNECTION_TEXT');
 
 class FConnectionTextComponent {
+    elementReference;
+    base;
     get textId() {
         return F_CONNECTION_IDENTIFIERS.textId(this.base.fConnectionId + this.base.fOutputId + this.base.fInputId);
     }
@@ -1942,6 +2012,7 @@ class FConnectionTextComponent {
     get text() {
         return this.base.fText || '';
     }
+    textPathDirective;
     constructor(elementReference, base) {
         this.elementReference = elementReference;
         this.base = base;
@@ -1973,10 +2044,10 @@ class FConnectionTextComponent {
         const vectorLength = PointExtensions.hypotenuse(line.point1, line.point2);
         return vectorLength / 2 - ((name || '').length * symbolWidth) / 2;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", 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.3.11", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionTextComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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: "17.3.11", ngImport: i0, type: FConnectionTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionTextComponent, decorators: [{
             type: Component,
             args: [{ selector: "text[f-connection-text]", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection-text",
@@ -1992,21 +2063,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
 const F_CONNECTION_DRAG_HANDLE_CLASS = 'f-connection-drag-handle';
 class FConnectionDragHandleComponent {
+    elementReference;
+    class = F_CONNECTION_DRAG_HANDLE_CLASS;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
     constructor(elementReference) {
         this.elementReference = elementReference;
-        this.class = F_CONNECTION_DRAG_HANDLE_CLASS;
     }
-    redraw(point) {
+    redraw(start, end) {
+        const point = this.calculateCircleCenter(start, end, 8);
         this.hostElement.setAttribute('cx', point.x.toString());
         this.hostElement.setAttribute('cy', point.y.toString());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FConnectionDragHandleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FConnectionDragHandleComponent, selector: "circle[f-connection-drag-handle]", host: { properties: { "class": "class" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    calculateCircleCenter(start, end, radius) {
+        const direction = { x: end.x - start.x, y: end.y - start.y };
+        const length = Math.sqrt(direction.x * direction.x + direction.y * direction.y);
+        const unitDirection = { x: direction.x / length, y: direction.y / length };
+        const scaledDirection = { x: unitDirection.x * radius, y: unitDirection.y * radius };
+        return { x: end.x - scaledDirection.x, y: end.y - scaledDirection.y };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionDragHandleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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: "17.3.11", ngImport: i0, type: FConnectionDragHandleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionDragHandleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "circle[f-connection-drag-handle]",
@@ -2021,6 +2101,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 const CONNECTION_GRADIENT = new InjectionToken('CONNECTION_GRADIENT');
 
 class FConnectionGradientComponent {
+    elementReference;
+    base;
     get gradientId() {
         return F_CONNECTION_IDENTIFIERS.gradientId(this.base.fConnectionId + this.base.fOutputId + this.base.fInputId);
     }
@@ -2063,10 +2145,10 @@ class FConnectionGradientComponent {
         this.hostElement.setAttribute('y2', to.y.toString());
         this.updateGradient();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", 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.3.11", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionGradientComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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: "17.3.11", ngImport: i0, type: FConnectionGradientComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionGradientComponent, decorators: [{
             type: Component,
             args: [{ selector: "linearGradient[fConnectionGradient]", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "f-component f-connection-gradient",
@@ -2079,28 +2161,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
 const CONNECTION_PATH = new InjectionToken('CONNECTION_PATH');
 
-var EFMarkerType;
-(function (EFMarkerType) {
-    EFMarkerType["START"] = "f-connection-marker-start";
-    EFMarkerType["END"] = "f-connection-marker-end";
-    EFMarkerType["SELECTED_START"] = "f-connection-selected-marker-start";
-    EFMarkerType["SELECTED_END"] = "f-connection-selected-marker-end";
-})(EFMarkerType || (EFMarkerType = {}));
-
+//import { EFMarkerType } from '../../f-marker';
 function getMarkerStartId(fConnectionId) {
-    return sanitizeElementId(`${EFMarkerType.START}-${fConnectionId}`);
+    return sanitizeElementId(`f-connection-marker-start-${fConnectionId}`);
 }
 function getMarkerEndId(fConnectionId) {
-    return sanitizeElementId(`${EFMarkerType.END}-${fConnectionId}`);
+    return sanitizeElementId(`f-connection-marker-end-${fConnectionId}`);
 }
 function getMarkerSelectedStartId(fConnectionId) {
-    return sanitizeElementId(`${EFMarkerType.SELECTED_START}-${fConnectionId}`);
+    return sanitizeElementId(`f-connection-selected-marker-start-${fConnectionId}`);
 }
 function getMarkerSelectedEndId(fConnectionId) {
-    return sanitizeElementId(`${EFMarkerType.SELECTED_END}-${fConnectionId}`);
+    return sanitizeElementId(`f-connection-selected-marker-end-${fConnectionId}`);
 }
 
 class FConnectionPathComponent {
+    elementReference;
+    base;
     get fPathId() {
         return this.base.fConnectionId;
     }
@@ -2131,10 +2208,10 @@ class FConnectionPathComponent {
         this.hostElement.setAttribute('marker-start', `url(#${getMarkerStartId(this.base.fConnectionId)})`);
         this.hostElement.setAttribute('marker-end', `url(#${getMarkerEndId(this.base.fConnectionId)})`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", 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.3.11", type: FConnectionPathComponent, selector: "path[f-connection-path]", host: { properties: { "attr.id": "attrConnectionId", "attr.data-f-path-id": "fPathId", "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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionPathComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: FConnectionPathComponent, selector: "path[f-connection-path]", host: { properties: { "attr.id": "attrConnectionId", "attr.data-f-path-id": "fPathId", "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: "17.3.11", ngImport: i0, type: FConnectionPathComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionPathComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "path[f-connection-path]",
@@ -2154,6 +2231,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }] }] });
 
 class FConnectionSelectionComponent {
+    elementReference;
+    base;
     get connectionForSelectionId() {
         return F_CONNECTION_IDENTIFIERS.connectionForSelectionId(this.base.fConnectionId + this.base.fOutputId + this.base.fInputId);
     }
@@ -2167,10 +2246,10 @@ class FConnectionSelectionComponent {
     setPath(path) {
         this.hostElement.setAttribute("d", `${path}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", 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.3.11", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionSelectionComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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: "17.3.11", ngImport: i0, type: FConnectionSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionSelectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "path[fConnectionSelection]",
@@ -2189,6 +2268,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 const F_SELECTED_CLASS = 'f-selected';
 function mixinChangeConnectionSelection(base) {
     return class extends base {
+        fSelectionDisabled = false;
+        fPath;
         deselect() {
             this.fPath?.deselect();
             this.hostElement.classList.remove(F_SELECTED_CLASS);
@@ -2204,7 +2285,6 @@ function mixinChangeConnectionSelection(base) {
         }
         constructor(...args) {
             super(...args);
-            this.fSelectionDisabled = false;
         }
     };
 }
@@ -2226,12 +2306,12 @@ function mixinChangeConnectionVisibility(base) {
 const F_CONNECTION_BUILDERS = new InjectionToken('F_CONNECTION_BUILDERS');
 
 class FConnectionFactory {
+    builders = {
+        [EFConnectionType.STRAIGHT]: new FStraightPathBuilder(),
+        [EFConnectionType.BEZIER]: new FBezierPathBuilder(),
+        [EFConnectionType.SEGMENT]: new FSegmentPathBuilder(),
+    };
     constructor(builders) {
-        this.builders = {
-            [EFConnectionType.STRAIGHT]: new FStraightPathBuilder(),
-            [EFConnectionType.BEZIER]: new FBezierPathBuilder(),
-            [EFConnectionType.SEGMENT]: new FSegmentPathBuilder(),
-        };
         if (builders) {
             this.builders = { ...this.builders, ...builders };
         }
@@ -2243,10 +2323,10 @@ class FConnectionFactory {
         }
         return builder.handle(request.payload);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FConnectionFactory, deps: [{ token: F_CONNECTION_BUILDERS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FConnectionFactory }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionFactory, deps: [{ token: F_CONNECTION_BUILDERS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionFactory });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FConnectionFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionFactory, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -2256,17 +2336,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }] }] });
 
 const MIXIN_BASE$1 = mixinChangeConnectionSelection(mixinChangeConnectionVisibility(class {
+    hostElement;
     constructor(hostElement) {
         this.hostElement = hostElement;
     }
 }));
 class FConnectionBase extends MIXIN_BASE$1 {
+    cFactory;
+    path = '';
+    line = LineExtensions.initialize();
+    stateChanges = new Subject();
     constructor(elementReference, cFactory) {
         super(elementReference.nativeElement);
         this.cFactory = cFactory;
-        this.path = '';
-        this.line = LineExtensions.initialize();
-        this.stateChanges = new Subject();
     }
     initialize() {
         this.fPath.initialize();
@@ -2297,13 +2379,13 @@ class FConnectionBase extends MIXIN_BASE$1 {
         this.fPath.setPath(this.path);
         this.fSelection.setPath(this.path);
         this.fGradient.redraw(this.line);
-        this.fDragHandle.redraw(this.line.point2);
+        this.fDragHandle.redraw(this.line.point1, this.line.point2);
         this.fTextComponent.redraw(this.line);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FConnectionBase, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FConnectionBase, usesInheritance: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionBase, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FConnectionBase, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FConnectionBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }] });
 
@@ -2322,10 +2404,10 @@ var EFConnectionType;
 })(EFConnectionType || (EFConnectionType = {}));
 
 class FConnectionCenterDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FConnectionCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FConnectionCenterDirective, selector: "[fConnectionCenter]", ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FConnectionCenterDirective, selector: "[fConnectionCenter]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FConnectionCenterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionCenterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[fConnectionCenter]"
@@ -2334,6 +2416,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
 let uniqueId$4 = 0;
 class FConnectionForCreateComponent extends FConnectionBase {
+    fComponentsStore;
+    fConnectionId = `f-connection-for-create-${uniqueId$4++}`;
+    fText = '';
+    _fStartColor = 'black';
     set fStartColor(value) {
         this._fStartColor = value;
         this.fComponentsStore.changes.next();
@@ -2341,6 +2427,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
     get fStartColor() {
         return this._fStartColor;
     }
+    _fEndColor = 'black';
     set fEndColor(value) {
         this._fEndColor = value;
         this.fComponentsStore.changes.next();
@@ -2348,6 +2435,9 @@ class FConnectionForCreateComponent extends FConnectionBase {
     get fEndColor() {
         return this._fEndColor;
     }
+    fOutputId;
+    fInputId;
+    _fRadius = 8;
     set fRadius(value) {
         this._fRadius = value;
         this.fComponentsStore.changes.next();
@@ -2355,6 +2445,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
     get fRadius() {
         return this._fRadius;
     }
+    _fOffset = 32;
     set fOffset(value) {
         this._fOffset = value;
         this.fComponentsStore.changes.next();
@@ -2362,6 +2453,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
     get fOffset() {
         return this._fOffset;
     }
+    _behavior = EFConnectionBehavior.FIXED;
     set fBehavior(value) {
         this._behavior = castToEnum(value, 'fBehavior', EFConnectionBehavior);
         this.fComponentsStore.changes.next();
@@ -2369,6 +2461,7 @@ class FConnectionForCreateComponent extends FConnectionBase {
     get fBehavior() {
         return this._behavior;
     }
+    _type = EFConnectionType.STRAIGHT;
     set fType(value) {
         this._type = castToEnum(value, 'fType', EFConnectionType);
         this.fComponentsStore.changes.next();
@@ -2376,27 +2469,27 @@ class FConnectionForCreateComponent extends FConnectionBase {
     get fType() {
         return this._type;
     }
+    fDraggingDisabled = false;
+    fSelectionDisabled = false;
+    fDefs;
     get fMarkers() {
         return this.fComponentsStore.fMarkers.filter((x) => {
             return this.hostElement.contains(x.hostElement);
         });
     }
+    fPath;
+    fGradient;
+    fDragHandle;
+    fSelection;
+    fTextComponent;
+    fConnectionCenter;
+    fConnectionCenters;
     get boundingElement() {
         return this.fPath.hostElement;
     }
     constructor(elementReference, fConnectionFactory, fComponentsStore) {
         super(elementReference, fConnectionFactory);
         this.fComponentsStore = fComponentsStore;
-        this.fConnectionId = `f-connection-for-create-${uniqueId$4++}`;
-        this.fText = '';
-        this._fStartColor = 'black';
-        this._fEndColor = 'black';
-        this._fRadius = 8;
-        this._fOffset = 32;
-        this._behavior = EFConnectionBehavior.FIXED;
-        this._type = EFConnectionType.STRAIGHT;
-        this.fDraggingDisabled = false;
-        this.fSelectionDisabled = false;
     }
     ngOnInit() {
         this.fComponentsStore.fTempConnection = this;
@@ -2407,10 +2500,10 @@ class FConnectionForCreateComponent extends FConnectionBase {
     ngOnDestroy() {
         this.fComponentsStore.fTempConnection = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FConnectionForCreateComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fRadius: "fRadius", fOffset: "fOffset", fBehavior: "fBehavior", fType: "fType" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, 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: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: 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        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { 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: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionForCreateComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fStartColor: "fStartColor", fEndColor: "fEndColor", fRadius: "fRadius", fOffset: "fOffset", fBehavior: "fBehavior", fType: "fType" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, 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: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: 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        </g>\n        <text f-connection-text></text>\n    </g>\n    <ng-content></ng-content>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { 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: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FConnectionForCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", 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"
@@ -2455,6 +2548,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
 let uniqueId$3 = 0;
 class FConnectionComponent extends FConnectionBase {
+    fComponentsStore;
+    fConnectionId = `f-connection-${uniqueId$3++}`;
+    _fText = '';
     set fText(value) {
         this._fText = value;
         this.fComponentsStore.changes.next();
@@ -2462,6 +2558,7 @@ class FConnectionComponent extends FConnectionBase {
     get fText() {
         return this._fText;
     }
+    _fStartColor = 'black';
     set fStartColor(value) {
         this._fStartColor = value;
         this.fComponentsStore.changes.next();
@@ -2469,6 +2566,7 @@ class FConnectionComponent extends FConnectionBase {
     get fStartColor() {
         return this._fStartColor;
     }
+    _fEndColor = 'black';
     set fEndColor(value) {
         this._fEndColor = value;
         this.fComponentsStore.changes.next();
@@ -2476,6 +2574,7 @@ class FConnectionComponent extends FConnectionBase {
     get fEndColor() {
         return this._fEndColor;
     }
+    _fOutputId;
     set fOutputId(value) {
         this._fOutputId = value;
         this.fComponentsStore.changes.next();
@@ -2483,6 +2582,7 @@ class FConnectionComponent extends FConnectionBase {
     get fOutputId() {
         return this._fOutputId;
     }
+    _fInputId;
     set fInputId(value) {
         this._fInputId = value;
         this.fComponentsStore.changes.next();
@@ -2490,6 +2590,7 @@ class FConnectionComponent extends FConnectionBase {
     get fInputId() {
         return this._fInputId;
     }
+    _fRadius = 8;
     set fRadius(value) {
         this._fRadius = value;
         this.fComponentsStore.changes.next();
@@ -2497,6 +2598,7 @@ class FConnectionComponent extends FConnectionBase {
     get fRadius() {
         return this._fRadius;
     }
+    _fOffset = 32;
     set fOffset(value) {
         this._fOffset = value;
         this.fComponentsStore.changes.next();
@@ -2504,6 +2606,7 @@ class FConnectionComponent extends FConnectionBase {
     get fOffset() {
         return this._fOffset;
     }
+    _behavior = EFConnectionBehavior.FIXED;
     set fBehavior(value) {
         this._behavior = castToEnum(value, 'fBehavior', EFConnectionBehavior);
         this.fComponentsStore.changes.next();
@@ -2511,34 +2614,35 @@ class FConnectionComponent extends FConnectionBase {
     get fBehavior() {
         return this._behavior;
     }
+    _type = EFConnectionType.STRAIGHT;
     set fType(value) {
-        this._type = castToEnum(value, 'fType', EFConnectionType);
+        this._type = value; //castToEnum(value, 'fType', EFConnectionType);
         this.fComponentsStore.changes.next();
     }
     get fType() {
         return this._type;
     }
+    fDraggingDisabled = false;
+    fSelectionDisabled = false;
+    fDefs;
     get fMarkers() {
         return this.fComponentsStore.fMarkers.filter((x) => {
             return this.hostElement.contains(x.hostElement);
         });
     }
+    fPath;
+    fGradient;
+    fDragHandle;
+    fSelection;
+    fTextComponent;
+    fConnectionCenter;
+    fConnectionCenters;
     get boundingElement() {
         return this.fPath.hostElement;
     }
     constructor(elementReference, fConnectionFactory, fComponentsStore) {
         super(elementReference, fConnectionFactory);
         this.fComponentsStore = fComponentsStore;
-        this.fConnectionId = `f-connection-${uniqueId$3++}`;
-        this._fText = '';
-        this._fStartColor = 'black';
-        this._fEndColor = 'black';
-        this._fRadius = 8;
-        this._fOffset = 32;
-        this._behavior = EFConnectionBehavior.FIXED;
-        this._type = EFConnectionType.STRAIGHT;
-        this.fDraggingDisabled = false;
-        this.fSelectionDisabled = false;
     }
     ngOnInit() {
         this.fComponentsStore.addComponent(this.fComponentsStore.fConnections, this);
@@ -2546,17 +2650,17 @@ class FConnectionComponent extends FConnectionBase {
     ngOnDestroy() {
         this.fComponentsStore.removeComponent(this.fComponentsStore.fConnections, this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FConnectionComponent, selector: "f-connection", inputs: { fConnectionId: "fConnectionId", fText: "fText", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fRadius: "fRadius", fOffset: "fOffset", fBehavior: "fBehavior", fType: "fType", fDraggingDisabled: ["fReassignDisabled", "fDraggingDisabled"], fSelectionDisabled: "fSelectionDisabled" }, host: { properties: { "attr.id": "fConnectionId", "class.f-connection-selection-disabled": "fSelectionDisabled", "class.f-connection-reassign-disabled": "fDraggingDisabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, 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: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: 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  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { 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: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: FConnectionComponent, selector: "f-connection", inputs: { fConnectionId: "fConnectionId", fText: "fText", fStartColor: "fStartColor", fEndColor: "fEndColor", fOutputId: "fOutputId", fInputId: "fInputId", fRadius: "fRadius", fOffset: "fOffset", fBehavior: "fBehavior", fType: "fType", fDraggingDisabled: ["fReassignDisabled", "fDraggingDisabled"], fSelectionDisabled: "fSelectionDisabled" }, host: { properties: { "attr.id": "fConnectionId", "class.f-connection-selection-disabled": "fSelectionDisabled", "class.f-connection-reassign-disabled": "fDraggingDisabled" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, 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: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, static: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: 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  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { 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: FConnectionSelectionComponent, selector: "path[fConnectionSelection]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FConnectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FConnectionComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-connection", exportAs: 'fComponent', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.id]': 'fConnectionId',
                         class: "f-component f-connection",
                         '[class.f-connection-selection-disabled]': 'fSelectionDisabled',
                         '[class.f-connection-reassign-disabled]': 'fDraggingDisabled',
-                    }, 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  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
+                    }, 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  <ng-content></ng-content>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n<div #fConnectionCenter class=\"f-connection-center\" *ngIf=\"fConnectionCenters.length\">\n  <ng-content select=\"[fConnectionCenter]\"></ng-content>\n</div>\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center{pointer-events:all}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }, { type: FComponentsStore }], propDecorators: { fConnectionId: [{
                 type: Input
             }], fText: [{
@@ -2608,30 +2712,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 args: [FConnectionCenterDirective, { descendants: true }]
             }] } });
 
+var EFMarkerType;
+(function (EFMarkerType) {
+    EFMarkerType["START"] = "f-connection-marker-start";
+    EFMarkerType["END"] = "f-connection-marker-end";
+    EFMarkerType["SELECTED_START"] = "f-connection-selected-marker-start";
+    EFMarkerType["SELECTED_END"] = "f-connection-selected-marker-end";
+})(EFMarkerType || (EFMarkerType = {}));
+
 const F_MARKER = new InjectionToken('F_MARKER');
 class FMarkerBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FMarkerBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FMarkerBase, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FMarkerBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FMarkerBase, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FMarkerBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FMarkerBase, decorators: [{
             type: Directive
         }] });
 
 class FMarkerDirective extends FMarkerBase {
+    fComponentsStore;
+    elementReference;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
+    width = 0;
+    height = 0;
+    refX = 0;
+    refY = 0;
+    type = EFMarkerType.START;
+    orient = 'auto';
+    markerUnits = 'strokeWidth';
     constructor(fComponentsStore, elementReference) {
         super();
         this.fComponentsStore = fComponentsStore;
         this.elementReference = elementReference;
-        this.width = 0;
-        this.height = 0;
-        this.refX = 0;
-        this.refY = 0;
-        this.type = EFMarkerType.START;
-        this.orient = 'auto';
-        this.markerUnits = 'strokeWidth';
         this.hostElement.style.display = 'none';
     }
     ngOnInit() {
@@ -2640,10 +2754,10 @@ class FMarkerDirective extends FMarkerBase {
     ngOnDestroy() {
         this.fComponentsStore.removeComponent(this.fComponentsStore.fMarkers, this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FMarkerDirective, deps: [{ token: FComponentsStore }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FMarkerDirective, selector: "svg[fMarker]", inputs: { hostElement: "hostElement", width: "width", height: "height", refX: "refX", refY: "refY", type: "type", orient: "orient", markerUnits: "markerUnits" }, host: { classAttribute: "f-component f-marker" }, providers: [{ provide: F_MARKER, useExisting: FMarkerDirective }], usesInheritance: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FMarkerDirective, deps: [{ token: FComponentsStore }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FMarkerDirective, selector: "svg[fMarker]", inputs: { hostElement: "hostElement", width: "width", height: "height", refX: "refX", refY: "refY", type: "type", orient: "orient", markerUnits: "markerUnits" }, host: { classAttribute: "f-component f-marker" }, providers: [{ provide: F_MARKER, useExisting: FMarkerDirective }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FMarkerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FMarkerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "svg[fMarker]",
@@ -2684,14 +2798,16 @@ const F_CONNECTION_PROVIDERS = [
 ];
 
 class ReassignConnectionDragHandler {
+    fMediator;
+    connection;
+    type = EFDraggableType.REASSIGN_CONNECTION;
+    onPointerDownFromConnectorRect = new RoundedRect();
+    onPointerDownToConnectorRect = new RoundedRect();
+    outputSide = EFConnectableSide.BOTTOM;
+    inputSide = EFConnectableSide.TOP;
     constructor(fMediator, connection) {
         this.fMediator = fMediator;
         this.connection = connection;
-        this.type = EFDraggableType.REASSIGN_CONNECTION;
-        this.onPointerDownFromConnectorRect = new RoundedRect();
-        this.onPointerDownToConnectorRect = new RoundedRect();
-        this.outputSide = EFConnectableSide.BOTTOM;
-        this.inputSide = EFConnectableSide.TOP;
     }
     initialize() {
         const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
@@ -2715,6 +2831,9 @@ class ReassignConnectionDragHandler {
 }
 
 let ReassignConnectionPreparationExecution = class ReassignConnectionPreparationExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
     get transform() {
         return this.fComponentsStore.fCanvas.transform;
     }
@@ -2731,6 +2850,9 @@ let ReassignConnectionPreparationExecution = class ReassignConnectionPreparation
     }
     handle(request) {
         const connectionToReassign = this.getConnectionHandler(this.getDragHandleElement(request.event.getPosition()));
+        if (connectionToReassign.fDraggingDisabled) {
+            return;
+        }
         this.fMediator.send(new UpdateItemLayerRequest(connectionToReassign, this.fComponentsStore.fCanvas.fConnectionsContainer.nativeElement));
         this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
         this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
@@ -2750,17 +2872,19 @@ let ReassignConnectionPreparationExecution = class ReassignConnectionPreparation
     getConnectionHandler(element) {
         return this.fConnections.find(c => c.isContains(element));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ReassignConnectionPreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ReassignConnectionPreparationExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ReassignConnectionPreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ReassignConnectionPreparationExecution });
 };
 ReassignConnectionPreparationExecution = __decorate([
     FExecutionRegister(ReassignConnectionPreparationRequest)
 ], ReassignConnectionPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ReassignConnectionPreparationExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ReassignConnectionPreparationExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
 let ReassignConnectionPreparationValidator = class ReassignConnectionPreparationValidator {
+    fComponentsStore;
+    fDraggableDataContext;
     get fConnections() {
         return this.fComponentsStore.fConnections;
     }
@@ -2783,13 +2907,13 @@ let ReassignConnectionPreparationValidator = class ReassignConnectionPreparation
     getConnectionHandler(element) {
         return this.fConnections.find(c => c.isContains(element));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ReassignConnectionPreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ReassignConnectionPreparationValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ReassignConnectionPreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ReassignConnectionPreparationValidator });
 };
 ReassignConnectionPreparationValidator = __decorate([
     FValidatorRegister(ReassignConnectionPreparationRequest)
 ], ReassignConnectionPreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ReassignConnectionPreparationValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ReassignConnectionPreparationValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
 
@@ -2808,12 +2932,15 @@ const CONNECTIONS_PROVIDERS = [
 ];
 
 class ExternalItemFinalizeRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
 class FCreateNodeEvent {
+    rect;
+    data;
     constructor(rect, data) {
         this.rect = rect;
         this.data = data;
@@ -2821,6 +2948,9 @@ class FCreateNodeEvent {
 }
 
 let ExternalItemFinalizeExecution = class ExternalItemFinalizeExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
@@ -2854,30 +2984,31 @@ let ExternalItemFinalizeExecution = class ExternalItemFinalizeExecution {
     getRectInCanvas() {
         return this.fMediator.send(new GetElementRectInFlowRequest(this.dragHandler.placeholder));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExternalItemFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExternalItemFinalizeExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExternalItemFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExternalItemFinalizeExecution });
 };
 ExternalItemFinalizeExecution = __decorate([
     FExecutionRegister(ExternalItemFinalizeRequest)
 ], ExternalItemFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExternalItemFinalizeExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExternalItemFinalizeExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
 let ExternalItemFinalizeValidator = class ExternalItemFinalizeValidator {
+    fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
         return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.PALETTE_ITEM);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExternalItemFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExternalItemFinalizeValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExternalItemFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExternalItemFinalizeValidator });
 };
 ExternalItemFinalizeValidator = __decorate([
     FValidatorRegister(ExternalItemFinalizeRequest)
 ], ExternalItemFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExternalItemFinalizeValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExternalItemFinalizeValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
@@ -2887,6 +3018,7 @@ const EXTERNAL_ITEM_FINALIZE_PROVIDERS = [
 ];
 
 class ExternalItemPreparationRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
@@ -2894,10 +3026,10 @@ class ExternalItemPreparationRequest {
 
 const F_EXTERNAL_ITEM = new InjectionToken('F_EXTERNAL_ITEM');
 class FExternalItemBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FExternalItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FExternalItemBase, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FExternalItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FExternalItemBase, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FExternalItemBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FExternalItemBase, decorators: [{
             type: Directive
         }] });
 
@@ -2909,9 +3041,7 @@ function getExternalItem(element) {
 }
 
 class FExternalItemService {
-    constructor() {
-        this.items = [];
-    }
+    items = [];
     registerItem(item) {
         this.items.push(item);
     }
@@ -2924,10 +3054,10 @@ class FExternalItemService {
             this.items.splice(index, 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FExternalItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FExternalItemService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FExternalItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FExternalItemService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FExternalItemService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FExternalItemService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2936,15 +3066,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
 let uniqueId$2 = 0;
 class FExternalItemDirective extends FExternalItemBase {
+    elementReference;
+    fExternalItemService;
+    fExternalItemId = `f-external-item-${uniqueId$2++}`;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
+    fData;
+    fDisabled = false;
     constructor(elementReference, fExternalItemService) {
         super();
         this.elementReference = elementReference;
         this.fExternalItemService = fExternalItemService;
-        this.fExternalItemId = `f-external-item-${uniqueId$2++}`;
-        this.fDisabled = false;
     }
     ngOnInit() {
         this.fExternalItemService.registerItem(this);
@@ -2952,12 +3085,12 @@ class FExternalItemDirective extends FExternalItemBase {
     ngOnDestroy() {
         this.fExternalItemService.removeItem(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", 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.3.11", type: FExternalItemDirective, selector: "[fExternalItem]", inputs: { fExternalItemId: "fExternalItemId", fData: "fData", fDisabled: "fDisabled" }, host: { properties: { "attr.id": "fExternalItemId", "class.f-external-item-disabled": "fDisabled" }, classAttribute: "f-component f-external-item" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FExternalItemDirective, deps: [{ token: i0.ElementRef }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FExternalItemDirective, selector: "[fExternalItem]", inputs: { fExternalItemId: "fExternalItemId", fData: "fData", fDisabled: "fDisabled" }, host: { properties: { "attr.id": "fExternalItemId", "class.f-external-item-disabled": "fDisabled" }, classAttribute: "f-component f-external-item" }, providers: [
             { provide: F_EXTERNAL_ITEM, useExisting: FExternalItemDirective }
-        ], usesInheritance: true, ngImport: i0 }); }
+        ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FExternalItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FExternalItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[fExternalItem]",
@@ -2983,11 +3116,13 @@ const F_EXTERNAL_ITEM_PROVIDERS = [
 ];
 
 class ExternalItemDragHandler {
+    externalItem;
+    type = EFDraggableType.PALETTE_ITEM;
+    placeholder;
+    onPointerDownRect = RectExtensions.initialize();
+    difference = PointExtensions.initialize();
     constructor(externalItem) {
         this.externalItem = externalItem;
-        this.type = EFDraggableType.PALETTE_ITEM;
-        this.onPointerDownRect = RectExtensions.initialize();
-        this.difference = PointExtensions.initialize();
     }
     getStyle(position) {
         return `position: absolute; left: 0; top: 0; transform: translate(${position.x}px, ${position.y}px)`;
@@ -3017,6 +3152,9 @@ class ExternalItemDragHandler {
 }
 
 let ExternalItemPreparationExecution = class ExternalItemPreparationExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fExternalItemService;
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
@@ -3035,17 +3173,18 @@ let ExternalItemPreparationExecution = class ExternalItemPreparationExecution {
     getExternalItem(targetElement) {
         return this.fExternalItemService.getItem(getExternalItem(targetElement));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExternalItemPreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExternalItemPreparationExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExternalItemPreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExternalItemPreparationExecution });
 };
 ExternalItemPreparationExecution = __decorate([
     FExecutionRegister(ExternalItemPreparationRequest)
 ], ExternalItemPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExternalItemPreparationExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExternalItemPreparationExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FExternalItemService }] });
 
 let ExternalItemPreparationValidator = class ExternalItemPreparationValidator {
+    fExternalItemService;
     constructor(fExternalItemService) {
         this.fExternalItemService = fExternalItemService;
     }
@@ -3056,13 +3195,13 @@ let ExternalItemPreparationValidator = class ExternalItemPreparationValidator {
     getExternalItem(targetElement) {
         return this.fExternalItemService.getItem(getExternalItem(targetElement));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExternalItemPreparationValidator, deps: [{ token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExternalItemPreparationValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExternalItemPreparationValidator, deps: [{ token: FExternalItemService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExternalItemPreparationValidator });
 };
 ExternalItemPreparationValidator = __decorate([
     FValidatorRegister(ExternalItemPreparationRequest)
 ], ExternalItemPreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExternalItemPreparationValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ExternalItemPreparationValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FExternalItemService }] });
 
@@ -3080,11 +3219,13 @@ class CreateMoveNodesDragModelFromSelectionRequest {
 }
 
 class NodeDragHandler {
+    fDraggableDataContext;
+    fNode;
+    type = EFDraggableType.NODE;
+    onPointerDownPosition = PointExtensions.initialize();
     constructor(fDraggableDataContext, fNode) {
         this.fDraggableDataContext = fDraggableDataContext;
         this.fNode = fNode;
-        this.type = EFDraggableType.NODE;
-        this.onPointerDownPosition = PointExtensions.initialize();
         this.onPointerDownPosition = this.fNode.position;
     }
     move(difference) {
@@ -3099,13 +3240,15 @@ class NodeDragHandler {
 }
 
 class ConnectionDragHandler {
+    fMediator;
+    connection;
+    type = EFDraggableType.CONNECTION;
+    onPointerDownLine = LineExtensions.initialize();
+    fromConnectorSide = EFConnectableSide.BOTTOM;
+    toConnectorSide = EFConnectableSide.TOP;
     constructor(fMediator, connection) {
         this.fMediator = fMediator;
         this.connection = connection;
-        this.type = EFDraggableType.CONNECTION;
-        this.onPointerDownLine = LineExtensions.initialize();
-        this.fromConnectorSide = EFConnectableSide.BOTTOM;
-        this.toConnectorSide = EFConnectableSide.TOP;
     }
     initialize() {
         const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
@@ -3123,14 +3266,16 @@ class ConnectionDragHandler {
 }
 
 class ConnectionSourceDragHandler {
+    fMediator;
+    connection;
+    type = EFDraggableType.CONNECTION;
+    fromConnectorRect = new RoundedRect();
+    fromConnectorSide = EFConnectableSide.BOTTOM;
+    toConnectorRect = new RoundedRect();
+    toConnectorSide = EFConnectableSide.TOP;
     constructor(fMediator, connection) {
         this.fMediator = fMediator;
         this.connection = connection;
-        this.type = EFDraggableType.CONNECTION;
-        this.fromConnectorRect = new RoundedRect();
-        this.fromConnectorSide = EFConnectableSide.BOTTOM;
-        this.toConnectorRect = new RoundedRect();
-        this.toConnectorSide = EFConnectableSide.TOP;
     }
     initialize() {
         const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
@@ -3148,14 +3293,16 @@ class ConnectionSourceDragHandler {
 }
 
 class ConnectionTargetDragHandler {
+    fMediator;
+    connection;
+    type = EFDraggableType.CONNECTION;
+    fromConnectorRect = new RoundedRect();
+    fromConnectorSide = EFConnectableSide.BOTTOM;
+    toConnectorRect = new RoundedRect();
+    toConnectorSide = EFConnectableSide.TOP;
     constructor(fMediator, connection) {
         this.fMediator = fMediator;
         this.connection = connection;
-        this.type = EFDraggableType.CONNECTION;
-        this.fromConnectorRect = new RoundedRect();
-        this.fromConnectorSide = EFConnectableSide.BOTTOM;
-        this.toConnectorRect = new RoundedRect();
-        this.toConnectorSide = EFConnectableSide.TOP;
     }
     initialize() {
         const fromConnector = this.fMediator.send(new GetOutputRectInFlowRequest(this.connection.fOutputId));
@@ -3173,6 +3320,11 @@ class ConnectionTargetDragHandler {
 }
 
 let CreateMoveNodesDragModelFromSelectionExecution = class CreateMoveNodesDragModelFromSelectionExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    getOutgoingConnectionsHandler;
+    getIncomingConnectionsHandler;
+    fMediator;
     constructor(fComponentsStore, fDraggableDataContext, getOutgoingConnectionsHandler, getIncomingConnectionsHandler, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
@@ -3239,13 +3391,13 @@ let CreateMoveNodesDragModelFromSelectionExecution = class CreateMoveNodesDragMo
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution });
 };
 CreateMoveNodesDragModelFromSelectionExecution = __decorate([
     FExecutionRegister(CreateMoveNodesDragModelFromSelectionRequest)
 ], CreateMoveNodesDragModelFromSelectionExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateMoveNodesDragModelFromSelectionExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }, { type: FFlowMediator }] });
 
@@ -3254,12 +3406,16 @@ const CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS = [
 ];
 
 class NodeMovePreparationRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
 let NodeMovePreparationExecution = class NodeMovePreparationExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
     get transform() {
         return this.fComponentsStore.fCanvas.transform;
     }
@@ -3296,17 +3452,19 @@ let NodeMovePreparationExecution = class NodeMovePreparationExecution {
         return items.filter((x) => x.type === EFDraggableType.NODE)
             .map(x => x.fNode);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeMovePreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeMovePreparationExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeMovePreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeMovePreparationExecution });
 };
 NodeMovePreparationExecution = __decorate([
     FExecutionRegister(NodeMovePreparationRequest)
 ], NodeMovePreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeMovePreparationExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeMovePreparationExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
 let NodeMovePreparationValidator = class NodeMovePreparationValidator {
+    fComponentsStore;
+    fDraggableDataContext;
     constructor(fComponentsStore, fDraggableDataContext) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
@@ -3328,13 +3486,13 @@ let NodeMovePreparationValidator = class NodeMovePreparationValidator {
     isDragHandleElement(targetElement) {
         return isElementWithClass(targetElement, '.f-drag-handle');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeMovePreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeMovePreparationValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeMovePreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeMovePreparationValidator });
 };
 NodeMovePreparationValidator = __decorate([
     FValidatorRegister(NodeMovePreparationRequest)
 ], NodeMovePreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeMovePreparationValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeMovePreparationValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
 
@@ -3344,6 +3502,7 @@ const NODE_MOVE_PREPARATION_PROVIDERS = [
 ];
 
 class NodeMoveFinalizeRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
@@ -3353,6 +3512,9 @@ class IsConnectionUnderNodeRequest {
 }
 
 let NodeMoveFinalizeExecution = class NodeMoveFinalizeExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
@@ -3382,30 +3544,31 @@ let NodeMoveFinalizeExecution = class NodeMoveFinalizeExecution {
         }
         return difference;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeMoveFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeMoveFinalizeExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeMoveFinalizeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeMoveFinalizeExecution });
 };
 NodeMoveFinalizeExecution = __decorate([
     FExecutionRegister(NodeMoveFinalizeRequest)
 ], NodeMoveFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeMoveFinalizeExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeMoveFinalizeExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
 let NodeMoveFinalizeValidator = class NodeMoveFinalizeValidator {
+    fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
         return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.NODE);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeMoveFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeMoveFinalizeValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeMoveFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeMoveFinalizeValidator });
 };
 NodeMoveFinalizeValidator = __decorate([
     FValidatorRegister(NodeMoveFinalizeRequest)
 ], NodeMoveFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeMoveFinalizeValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeMoveFinalizeValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
@@ -3421,12 +3584,14 @@ const NODE_PROVIDERS = [
 ];
 
 class NodeResizeFinalizeRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
 let NodeResizeFinalizeExecution = class NodeResizeFinalizeExecution {
+    fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
@@ -3435,30 +3600,31 @@ let NodeResizeFinalizeExecution = class NodeResizeFinalizeExecution {
             x.complete?.();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeResizeFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeResizeFinalizeExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeResizeFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeResizeFinalizeExecution });
 };
 NodeResizeFinalizeExecution = __decorate([
     FExecutionRegister(NodeResizeFinalizeRequest)
 ], NodeResizeFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeResizeFinalizeExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeResizeFinalizeExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
 let NodeResizeFinalizeValidator = class NodeResizeFinalizeValidator {
+    fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
         return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.NODE_RESIZE);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeResizeFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeResizeFinalizeValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeResizeFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeResizeFinalizeValidator });
 };
 NodeResizeFinalizeValidator = __decorate([
     FValidatorRegister(NodeResizeFinalizeRequest)
 ], NodeResizeFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeResizeFinalizeValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeResizeFinalizeValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
@@ -3468,6 +3634,7 @@ const NODE_RESIZE_FINALIZE_PROVIDERS = [
 ];
 
 class NodeResizePreparationRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
@@ -3480,6 +3647,12 @@ const RESIZE_DIRECTIONS = {
     [EFResizeHandleType.RIGHT_BOTTOM]: { x: 1, y: 1 },
 };
 class NodeResizeDragHandler {
+    fComponentsStore;
+    fNode;
+    fResizeHandleType;
+    type = EFDraggableType.NODE_RESIZE;
+    onPointerDownPosition;
+    rect;
     get scale() {
         return this.fComponentsStore.fCanvas.transform.scale;
     }
@@ -3487,7 +3660,6 @@ class NodeResizeDragHandler {
         this.fComponentsStore = fComponentsStore;
         this.fNode = fNode;
         this.fResizeHandleType = fResizeHandleType;
-        this.type = EFDraggableType.NODE_RESIZE;
         this.onPointerDownPosition = this.fNode.position;
         this.rect = RectExtensions.fromElement(this.fNode.hostElement);
     }
@@ -3520,6 +3692,9 @@ class NodeResizeDragHandler {
 }
 
 let NodeResizePreparationExecution = class NodeResizePreparationExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
     get transform() {
         return this.fComponentsStore.fCanvas.transform;
     }
@@ -3548,17 +3723,19 @@ let NodeResizePreparationExecution = class NodeResizePreparationExecution {
     getNode(targetElement) {
         return this.fComponentsStore.findNode(targetElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeResizePreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeResizePreparationExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeResizePreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeResizePreparationExecution });
 };
 NodeResizePreparationExecution = __decorate([
     FExecutionRegister(NodeResizePreparationRequest)
 ], NodeResizePreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeResizePreparationExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeResizePreparationExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
 let NodeResizePreparationValidator = class NodeResizePreparationValidator {
+    fComponentsStore;
+    fDraggableDataContext;
     constructor(fComponentsStore, fDraggableDataContext) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
@@ -3580,13 +3757,13 @@ let NodeResizePreparationValidator = class NodeResizePreparationValidator {
     isDragHandleElement(targetElement) {
         return isElementWithClass(targetElement, '.f-resize-handle');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeResizePreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeResizePreparationValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeResizePreparationValidator, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeResizePreparationValidator });
 };
 NodeResizePreparationValidator = __decorate([
     FValidatorRegister(NodeResizePreparationRequest)
 ], NodeResizePreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NodeResizePreparationValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NodeResizePreparationValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
 
@@ -3601,12 +3778,14 @@ const NODE_RESIZE_PROVIDERS = [
 ];
 
 class SelectionAreaFinalizeRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
 let SelectionAreaFinalizeExecution = class SelectionAreaFinalizeExecution {
+    fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
@@ -3615,30 +3794,31 @@ let SelectionAreaFinalizeExecution = class SelectionAreaFinalizeExecution {
             x.complete?.();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectionAreaFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectionAreaFinalizeExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionAreaFinalizeExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionAreaFinalizeExecution });
 };
 SelectionAreaFinalizeExecution = __decorate([
     FExecutionRegister(SelectionAreaFinalizeRequest)
 ], SelectionAreaFinalizeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectionAreaFinalizeExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionAreaFinalizeExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
 let SelectionAreaFinalizeValidator = class SelectionAreaFinalizeValidator {
+    fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
     handle(request) {
         return this.fDraggableDataContext.draggableItems.some((x) => x.type === EFDraggableType.SELECTION);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectionAreaFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectionAreaFinalizeValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionAreaFinalizeValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionAreaFinalizeValidator });
 };
 SelectionAreaFinalizeValidator = __decorate([
     FValidatorRegister(SelectionAreaFinalizeRequest)
 ], SelectionAreaFinalizeValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectionAreaFinalizeValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionAreaFinalizeValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
@@ -3648,6 +3828,7 @@ const SELECTION_AREA_FINALIZE_PROVIDERS = [
 ];
 
 class SelectionAreaPreparationRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
@@ -3657,6 +3838,12 @@ class GetCanBeSelectedItemsRequest {
 }
 
 class SelectionAreaDragHandle {
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
+    type = EFDraggableType.SELECTION;
+    canBeSelected = [];
+    selectedByMove = [];
     get canvasPosition() {
         return Point.fromPoint(this.fComponentsStore.fCanvas.transform.position).add(this.fComponentsStore.fCanvas.transform.scaledPosition);
     }
@@ -3664,9 +3851,6 @@ class SelectionAreaDragHandle {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
         this.fMediator = fMediator;
-        this.type = EFDraggableType.SELECTION;
-        this.canBeSelected = [];
-        this.selectedByMove = [];
     }
     initialize() {
         this.canBeSelected = this.fMediator.send(new GetCanBeSelectedItemsRequest());
@@ -3706,6 +3890,9 @@ class SelectionAreaDragHandle {
 }
 
 let SelectionAreaPreparationExecution = class SelectionAreaPreparationExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
     get flowHost() {
         return this.fComponentsStore.fFlow.hostElement;
     }
@@ -3722,17 +3909,18 @@ let SelectionAreaPreparationExecution = class SelectionAreaPreparationExecution
         this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
             .elementTransform(this.flowHost);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectionAreaPreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectionAreaPreparationExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionAreaPreparationExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionAreaPreparationExecution });
 };
 SelectionAreaPreparationExecution = __decorate([
     FExecutionRegister(SelectionAreaPreparationRequest)
 ], SelectionAreaPreparationExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectionAreaPreparationExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionAreaPreparationExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
 let SelectionAreaPreparationValidator = class SelectionAreaPreparationValidator {
+    fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
@@ -3744,13 +3932,13 @@ let SelectionAreaPreparationValidator = class SelectionAreaPreparationValidator
     isDragHandlesEmpty() {
         return !this.fDraggableDataContext.draggableItems.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectionAreaPreparationValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectionAreaPreparationValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionAreaPreparationValidator, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionAreaPreparationValidator });
 };
 SelectionAreaPreparationValidator = __decorate([
     FValidatorRegister(SelectionAreaPreparationRequest)
 ], SelectionAreaPreparationValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectionAreaPreparationValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionAreaPreparationValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
@@ -3765,12 +3953,17 @@ const SELECTION_AREA_PROVIDERS = [
 ];
 
 class SingleSelectRequest {
+    event;
     constructor(event) {
         this.event = event;
     }
 }
 
 let SingleSelectExecution = class SingleSelectExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    getConnectionHandler;
+    fMediator;
     constructor(fComponentsStore, fDraggableDataContext, getConnectionHandler, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
@@ -3828,30 +4021,31 @@ let SingleSelectExecution = class SingleSelectExecution {
         });
         this.fDraggableDataContext.selectedItems = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SingleSelectExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SingleSelectExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SingleSelectExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: GetConnectionHandler }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SingleSelectExecution });
 };
 SingleSelectExecution = __decorate([
     FExecutionRegister(SingleSelectRequest)
 ], SingleSelectExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SingleSelectExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SingleSelectExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: GetConnectionHandler }, { type: FFlowMediator }] });
 
 let SingleSelectValidator = class SingleSelectValidator {
+    fComponentsStore;
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
     }
     handle(request) {
         return this.fComponentsStore.fFlow.hostElement.contains(request.event.targetElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SingleSelectValidator, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SingleSelectValidator }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SingleSelectValidator, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SingleSelectValidator });
 };
 SingleSelectValidator = __decorate([
     FValidatorRegister(SingleSelectRequest)
 ], SingleSelectValidator);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SingleSelectValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SingleSelectValidator, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
@@ -3863,89 +4057,79 @@ const SINGLE_SELECT_PROVIDERS = [
 const F_DRAGGABLE = new InjectionToken('F_DRAGGABLE');
 const MOUSE_EVENT_IGNORE_TIME = 800;
 class FDraggableBase {
+    ngZone;
+    document;
+    mouseListeners = EventExtensions.emptyListener();
+    touchListeners = EventExtensions.emptyListener();
+    startListeners = EventExtensions.emptyListener();
     isSyntheticEvent(event) {
         return !!this.lastTouchEventTime &&
             (this.lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now());
     }
+    lastTouchEventTime = 0;
+    isDragStarted = false;
+    dragStartThreshold = 3;
+    dragStartDelay = 0;
+    dragStartTime = 0;
+    dragStartPosition = PointExtensions.initialize();
+    moveHandler = this.checkDragSequenceToStart;
     constructor(ngZone) {
         this.ngZone = ngZone;
-        this.mouseListeners = EventExtensions.emptyListener();
-        this.touchListeners = EventExtensions.emptyListener();
-        this.startListeners = EventExtensions.emptyListener();
-        this.lastTouchEventTime = 0;
-        this.isDragStarted = false;
-        this.dragStartThreshold = 3;
-        this.dragStartDelay = 0;
-        this.dragStartTime = 0;
-        this.dragStartPosition = PointExtensions.initialize();
-        this.moveHandler = this.checkDragSequenceToStart;
-        this.onMouseDown = (event) => {
-            const isSyntheticEvent = this.isSyntheticEvent(event);
-            const isFakeEvent = isFakeMousedownFromScreenReader(event);
-            const mouseEvent = new IMouseEvent(event);
-            if (isSyntheticEvent || isFakeEvent || this.disabled) {
-                return;
-            }
-            let result = this.onPointerDown(mouseEvent);
-            if (result) {
-                this.dragStartTime = Date.now();
-                this.dragStartPosition = mouseEvent.getPosition();
-                this.ngZone.runOutsideAngular(() => {
-                    this.document?.addEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
-                    this.document?.addEventListener('mousemove', this.onMouseMove);
-                    this.document?.addEventListener('mouseup', this.onMouseUp);
-                });
-                this.mouseListeners = () => {
-                    this.document?.removeEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
-                    this.document?.removeEventListener('mousemove', this.onMouseMove);
-                    this.document?.removeEventListener('mouseup', this.onMouseUp);
-                };
-            }
-        };
-        this.onTouchDown = (event) => {
-            const isFakeEvent = isFakeTouchstartFromScreenReader(event);
-            const touchEvent = new ITouchDownEvent(event);
-            if (isFakeEvent || this.disabled) {
-                return;
-            }
-            let result = this.onPointerDown(new ITouchDownEvent(event));
-            if (result) {
-                this.dragStartTime = Date.now();
-                this.dragStartPosition = touchEvent.getPosition();
-                this.ngZone.runOutsideAngular(() => {
-                    this.document?.addEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
-                    this.document?.addEventListener('touchmove', this.onTouchMove);
-                    this.document?.addEventListener('touchend', this.onTouchUp);
-                });
-                this.touchListeners = () => {
-                    this.document?.removeEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
-                    this.document?.removeEventListener('touchmove', this.onTouchMove);
-                    this.document?.removeEventListener('touchend', this.onTouchUp);
-                };
-            }
-        };
-        this.onSelectStart = (event) => {
-            this.onSelect(event);
-        };
-        this.onMouseMove = (event) => {
-            this.moveHandler(new IMouseEvent(event));
-        };
-        this.onTouchMove = (event) => {
-            this.moveHandler(new ITouchMoveEvent(event));
-        };
-        this.onMouseUp = (event) => {
-            if (this.isDragStarted) {
-                this.onPointerUp(new IMouseEvent(event));
-            }
-            this.endDragSequence();
-        };
-        this.onTouchUp = (event) => {
-            if (this.isDragStarted) {
-                this.onPointerUp(new ITouchUpEvent(event));
-            }
-            this.endDragSequence();
-        };
     }
+    onMouseDown = (event) => {
+        const isSyntheticEvent = this.isSyntheticEvent(event);
+        const isFakeEvent = isFakeMousedownFromScreenReader(event);
+        const mouseEvent = new IMouseEvent(event);
+        if (isSyntheticEvent || isFakeEvent || this.disabled) {
+            return;
+        }
+        let result = this.onPointerDown(mouseEvent);
+        if (result) {
+            this.dragStartTime = Date.now();
+            this.dragStartPosition = mouseEvent.getPosition();
+            this.ngZone.runOutsideAngular(() => {
+                this.document?.addEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
+                this.document?.addEventListener('mousemove', this.onMouseMove);
+                this.document?.addEventListener('mouseup', this.onMouseUp);
+            });
+            this.mouseListeners = () => {
+                this.document?.removeEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
+                this.document?.removeEventListener('mousemove', this.onMouseMove);
+                this.document?.removeEventListener('mouseup', this.onMouseUp);
+            };
+        }
+    };
+    onTouchDown = (event) => {
+        const isFakeEvent = isFakeTouchstartFromScreenReader(event);
+        const touchEvent = new ITouchDownEvent(event);
+        if (isFakeEvent || this.disabled) {
+            return;
+        }
+        let result = this.onPointerDown(new ITouchDownEvent(event));
+        if (result) {
+            this.dragStartTime = Date.now();
+            this.dragStartPosition = touchEvent.getPosition();
+            this.ngZone.runOutsideAngular(() => {
+                this.document?.addEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
+                this.document?.addEventListener('touchmove', this.onTouchMove);
+                this.document?.addEventListener('touchend', this.onTouchUp);
+            });
+            this.touchListeners = () => {
+                this.document?.removeEventListener('selectstart', this.onSelectStart, EventExtensions.activeListener());
+                this.document?.removeEventListener('touchmove', this.onTouchMove);
+                this.document?.removeEventListener('touchend', this.onTouchUp);
+            };
+        }
+    };
+    onSelectStart = (event) => {
+        this.onSelect(event);
+    };
+    onMouseMove = (event) => {
+        this.moveHandler(new IMouseEvent(event));
+    };
+    onTouchMove = (event) => {
+        this.moveHandler(new ITouchMoveEvent(event));
+    };
     checkDragSequenceToStart(event) {
         const pointerPosition = event.getPosition();
         if (!this.isDragStarted) {
@@ -3968,6 +4152,18 @@ class FDraggableBase {
             }
         }
     }
+    onMouseUp = (event) => {
+        if (this.isDragStarted) {
+            this.onPointerUp(new IMouseEvent(event));
+        }
+        this.endDragSequence();
+    };
+    onTouchUp = (event) => {
+        if (this.isDragStarted) {
+            this.onPointerUp(new ITouchUpEvent(event));
+        }
+        this.endDragSequence();
+    };
     endDragSequence() {
         this.isDragStarted = false;
         this.moveHandler = this.checkDragSequenceToStart;
@@ -3999,10 +4195,10 @@ class FDraggableBase {
         this.mouseListeners();
         this.mouseListeners = EventExtensions.emptyListener();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FDraggableBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FDraggableBase, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FDraggableBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FDraggableBase, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FDraggableBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FDraggableBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }] });
 function isTouchEvent(event) {
@@ -4020,9 +4216,22 @@ function isFakeTouchstartFromScreenReader(event) {
 }
 
 class FDraggableDirective extends FDraggableBase {
+    elementReference;
+    fDraggableDataContext;
+    fComponentsStore;
+    fMediator;
+    doc;
+    subscriptions$ = new Subscription();
+    disabled = false;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
+    fSelectionChange = new EventEmitter();
+    // @Output()
+    // public override fConnectionIntersectNode: EventEmitter<ConnectionIntersectNodeEvent> = new EventEmitter<ConnectionIntersectNodeEvent>();
+    fCreateNode = new EventEmitter();
+    fReassignConnection = new EventEmitter();
+    fCreateConnection = new EventEmitter();
     constructor(elementReference, fDraggableDataContext, ngZone, fComponentsStore, fMediator, doc) {
         super(ngZone);
         this.elementReference = elementReference;
@@ -4030,14 +4239,6 @@ class FDraggableDirective extends FDraggableBase {
         this.fComponentsStore = fComponentsStore;
         this.fMediator = fMediator;
         this.doc = doc;
-        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();
     }
     ngOnInit() {
         this.fComponentsStore.fDraggable = this;
@@ -4071,12 +4272,24 @@ class FDraggableDirective extends FDraggableBase {
         }
     }
     onSelect(event) {
-        const isTargetNotHtml = event.constructor.name === 'Event';
-        const target = isTargetNotHtml ? event.target.parentNode : event.target;
-        if (target && isExternalItem(target)) {
+        if (this.isTargetItemExternal(event)) {
             event.preventDefault();
         }
     }
+    isTargetItemExternal(event) {
+        let isTargetItemExternal = this.isExternalItem(event.target);
+        let isTargetParentItemExternal = this.isExternalItem(event.target.parentNode);
+        return isTargetItemExternal || isTargetParentItemExternal;
+    }
+    isExternalItem(target) {
+        let result = false;
+        try {
+            result = isExternalItem(target);
+        }
+        catch (e) {
+        }
+        return result;
+    }
     onPointerMove(event) {
         const pointerPositionInCanvas = Point.fromPoint(event.getPosition()).elementTransform(this.hostElement);
         const difference = pointerPositionInCanvas.div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
@@ -4109,12 +4322,12 @@ class FDraggableDirective extends FDraggableBase {
         super.unsubscribe();
         this.subscriptions$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FDraggableDirective, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }, { token: i0.NgZone }, { token: FComponentsStore }, { token: FFlowMediator }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FDraggableDirective, selector: "f-flow[fDraggable]", inputs: { disabled: ["fDraggableDisabled", "disabled"] }, outputs: { fSelectionChange: "fSelectionChange", fCreateNode: "fCreateNode", fReassignConnection: "fReassignConnection", fCreateConnection: "fCreateConnection" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FDraggableDirective, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }, { token: i0.NgZone }, { token: FComponentsStore }, { token: FFlowMediator }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", 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 }
-        ], exportAs: ["fDraggable"], usesInheritance: true, ngImport: i0 }); }
+        ], exportAs: ["fDraggable"], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FDraggableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FDraggableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "f-flow[fDraggable]",
@@ -4140,6 +4353,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }] } });
 
 class FSelectionChangeEvent {
+    nodes;
+    connections;
     constructor(nodes, connections) {
         this.nodes = nodes;
         this.connections = connections;
@@ -4157,6 +4372,7 @@ const F_DRAGGABLE_PROVIDERS = [
 ];
 
 let ClearSelectionExecution = class ClearSelectionExecution {
+    fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
@@ -4167,17 +4383,18 @@ let ClearSelectionExecution = class ClearSelectionExecution {
         this.fDraggableDataContext.selectedItems = [];
         this.fDraggableDataContext.isSelectedChanged = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ClearSelectionExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ClearSelectionExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ClearSelectionExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ClearSelectionExecution });
 };
 ClearSelectionExecution = __decorate([
     FExecutionRegister(ClearSelectionRequest)
 ], ClearSelectionExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ClearSelectionExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ClearSelectionExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
 class CreateConnectionMarkersRequest {
+    fConnection;
     constructor(fConnection) {
         this.fConnection = fConnection;
     }
@@ -4215,17 +4432,18 @@ let CreateConnectionMarkersExecution = class CreateConnectionMarkersExecution {
         markerElement.setAttribute('markerUnits', `${marker.markerUnits}`);
         return markerElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionMarkersExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionMarkersExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionMarkersExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionMarkersExecution });
 };
 CreateConnectionMarkersExecution = __decorate([
     FExecutionRegister(CreateConnectionMarkersRequest)
 ], CreateConnectionMarkersExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CreateConnectionMarkersExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: CreateConnectionMarkersExecution, decorators: [{
             type: Injectable
         }] });
 
 class GetElementRectInFlowRequest {
+    element;
     constructor(element) {
         this.element = element;
     }
@@ -4237,6 +4455,16 @@ var EFConnectorShape;
 })(EFConnectorShape || (EFConnectorShape = {}));
 
 class RoundedRect {
+    x;
+    y;
+    width;
+    height;
+    radius1;
+    radius2;
+    radius3;
+    radius4;
+    type = EFConnectorShape.ROUNDED_RECT;
+    gravityCenter = { x: 0, y: 0 };
     constructor(x = 0, y = 0, width = 0, height = 0, radius1 = 0, radius2 = 0, radius3 = 0, radius4 = 0) {
         this.x = x;
         this.y = y;
@@ -4246,8 +4474,6 @@ class RoundedRect {
         this.radius2 = radius2;
         this.radius3 = radius3;
         this.radius4 = radius4;
-        this.type = EFConnectorShape.ROUNDED_RECT;
-        this.gravityCenter = { x: 0, y: 0 };
         this.gravityCenter = this.calculateGravityCenter(this);
     }
     calculateGravityCenter(rect) {
@@ -4264,12 +4490,38 @@ class RoundedRect {
         return this.setRadiusFromElement(new RoundedRect(x, y, width, height), element);
     }
     static setRadiusFromElement(rect, element) {
-        rect.radius1 = parseFloat(element.style.borderTopLeftRadius) || 0;
-        rect.radius2 = parseFloat(element.style.borderTopRightRadius) || 0;
-        rect.radius3 = parseFloat(element.style.borderBottomRightRadius) || 0;
-        rect.radius4 = parseFloat(element.style.borderBottomLeftRadius) || 0;
+        const data = getComputedStyle(element);
+        rect.radius1 = this.convertToPixels(data.borderTopLeftRadius, element.clientWidth, element.clientHeight, data.fontSize) || 0;
+        rect.radius2 = this.convertToPixels(data.borderTopRightRadius, element.clientWidth, element.clientHeight, data.fontSize) || 0;
+        rect.radius3 = this.convertToPixels(data.borderBottomRightRadius, element.clientWidth, element.clientHeight, data.fontSize) || 0;
+        rect.radius4 = this.convertToPixels(data.borderBottomLeftRadius, element.clientWidth, element.clientHeight, data.fontSize) || 0;
         return rect;
     }
+    static convertToPixels(value, clientWidth, clientHeight, fontSize) {
+        if (value.endsWith('px')) {
+            return parseFloat(value);
+        }
+        else if (value.endsWith('%')) {
+            const percentage = parseFloat(value) / 100;
+            return Math.max(clientWidth, clientHeight) * percentage;
+        }
+        else if (value.endsWith('em')) {
+            return parseFloat(value) * parseFloat(fontSize);
+        }
+        else if (value.endsWith('rem')) {
+            return parseFloat(value) * parseFloat(getComputedStyle(document.documentElement).fontSize);
+        }
+        else if (value.endsWith('vh')) {
+            const vh = window.innerHeight / 100;
+            return parseFloat(value) * vh;
+        }
+        else if (value.endsWith('vw')) {
+            const vw = window.innerWidth / 100;
+            return parseFloat(value) * vw;
+        }
+        return parseFloat(value) || 0;
+    }
+    ;
     addPoint(point) {
         const copy = RoundedRect.fromRoundedRect(this);
         copy.x += point.x;
@@ -4478,6 +4730,7 @@ class IntersectionFinder {
 }
 
 let GetElementRectInFlowExecution = class GetElementRectInFlowExecution {
+    fComponentsStore;
     get transform() {
         return this.fComponentsStore.transform;
     }
@@ -4499,17 +4752,20 @@ let GetElementRectInFlowExecution = class GetElementRectInFlowExecution {
     transformElementSizeInFlow(rect) {
         return SizeExtensions.initialize(rect.width / this.transform.scale, rect.height / this.transform.scale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetElementRectInFlowExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetElementRectInFlowExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetElementRectInFlowExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetElementRectInFlowExecution });
 };
 GetElementRectInFlowExecution = __decorate([
     FExecutionRegister(GetElementRectInFlowRequest)
 ], GetElementRectInFlowExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetElementRectInFlowExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetElementRectInFlowExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 let GetCanBeSelectedItemsExecution = class GetCanBeSelectedItemsExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
     get fNodes() {
         return this.fComponentsStore.fNodes;
     }
@@ -4545,17 +4801,22 @@ let GetCanBeSelectedItemsExecution = class GetCanBeSelectedItemsExecution {
             };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetCanBeSelectedItemsExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetCanBeSelectedItemsExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetCanBeSelectedItemsExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetCanBeSelectedItemsExecution });
 };
 GetCanBeSelectedItemsExecution = __decorate([
     FExecutionRegister(GetCanBeSelectedItemsRequest)
 ], GetCanBeSelectedItemsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetCanBeSelectedItemsExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetCanBeSelectedItemsExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }] });
 
 class GetConnectionLineRequest {
+    outputRect;
+    inputRect;
+    behavior;
+    outputSide;
+    inputSide;
     constructor(outputRect, inputRect, behavior, outputSide, inputSide) {
         this.outputRect = outputRect;
         this.inputRect = inputRect;
@@ -4566,13 +4827,11 @@ class GetConnectionLineRequest {
 }
 
 let GetConnectionLineExecution = class GetConnectionLineExecution {
-    constructor() {
-        this.behaviorHandlers = {
-            [EFConnectionBehavior.FLOATING.toString()]: this.floatingBehavior,
-            [EFConnectionBehavior.FIXED_CENTER.toString()]: this.fixedCenterBehavior,
-            [EFConnectionBehavior.FIXED.toString()]: this.fixedOutboundBehaviour,
-        };
-    }
+    behaviorHandlers = {
+        [EFConnectionBehavior.FLOATING.toString()]: this.floatingBehavior,
+        [EFConnectionBehavior.FIXED_CENTER.toString()]: this.fixedCenterBehavior,
+        [EFConnectionBehavior.FIXED.toString()]: this.fixedOutboundBehaviour,
+    };
     handle(payload) {
         return this.behaviorHandlers[payload.behavior](payload);
     }
@@ -4587,13 +4846,13 @@ let GetConnectionLineExecution = class GetConnectionLineExecution {
     fixedOutboundBehaviour(payload) {
         return new Line(positionFixedOutbound[payload.outputSide === EFConnectableSide.AUTO ? EFConnectableSide.BOTTOM : payload.outputSide](payload.outputRect), positionFixedOutbound[payload.inputSide === EFConnectableSide.AUTO ? EFConnectableSide.TOP : payload.inputSide](payload.inputRect));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetConnectionLineExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetConnectionLineExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetConnectionLineExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetConnectionLineExecution });
 };
 GetConnectionLineExecution = __decorate([
     FExecutionRegister(GetConnectionLineRequest)
 ], GetConnectionLineExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetConnectionLineExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetConnectionLineExecution, decorators: [{
             type: Injectable
         }] });
 const positionFixedOutbound = {
@@ -4623,13 +4882,46 @@ const positionFixedOutbound = {
     },
 };
 
+class GetExternalNodesRectRequest {
+}
+
+let GetExternalNodesRectExecution = class GetExternalNodesRectExecution {
+    fComponentsStore;
+    constructor(fComponentsStore) {
+        this.fComponentsStore = fComponentsStore;
+    }
+    handle(request) {
+        return RectExtensions.union(this.getNodesRects());
+    }
+    getNodesRects() {
+        return this.getNodes().map((x) => {
+            const rect = RectExtensions.fromElement(x.hostElement);
+            return RectExtensions.initialize(x.position.x, x.position.y, rect.width, rect.height);
+        });
+    }
+    getNodes() {
+        return this.fComponentsStore.fNodes;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetExternalNodesRectExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetExternalNodesRectExecution });
+};
+GetExternalNodesRectExecution = __decorate([
+    FExecutionRegister(GetExternalNodesRectRequest)
+], GetExternalNodesRectExecution);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetExternalNodesRectExecution, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: FComponentsStore }] });
+
 class GetInputRectInFlowRequest {
+    fInputId;
     constructor(fInputId) {
         this.fInputId = fInputId;
     }
 }
 
 class GetInputRectInFlowResponse {
+    rect;
+    fConnectableSide;
     constructor(rect, fConnectableSide) {
         this.rect = rect;
         this.fConnectableSide = fConnectableSide;
@@ -4637,6 +4929,8 @@ class GetInputRectInFlowResponse {
 }
 
 let GetInputRectInFlowExecution = class GetInputRectInFlowExecution {
+    fComponentsStore;
+    fMediator;
     constructor(fComponentsStore, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fMediator = fMediator;
@@ -4648,13 +4942,13 @@ let GetInputRectInFlowExecution = class GetInputRectInFlowExecution {
         }
         return new GetInputRectInFlowResponse(this.fMediator.send(new GetElementRectInFlowRequest(input.hostElement)), input.fConnectableSide);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetInputRectInFlowExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetInputRectInFlowExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetInputRectInFlowExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetInputRectInFlowExecution });
 };
 GetInputRectInFlowExecution = __decorate([
     FExecutionRegister(GetInputRectInFlowRequest)
 ], GetInputRectInFlowExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetInputRectInFlowExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetInputRectInFlowExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FFlowMediator }] });
 
@@ -4662,33 +4956,39 @@ class GetNodesRectRequest {
 }
 
 let GetNodesRectExecution = class GetNodesRectExecution {
+    fComponentsStore;
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
     }
     handle(request) {
-        const fNodes = this.fComponentsStore.fNodes;
-        const rects = fNodes.map((x) => {
-            return RectExtensions.fromElement(x.hostElement);
-        });
-        return RectExtensions.union(rects);
+        return RectExtensions.union(this.getNodesRects());
+    }
+    getNodesRects() {
+        return this.getNodes().map((x) => RectExtensions.fromElement(x.hostElement));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetNodesRectExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetNodesRectExecution }); }
+    getNodes() {
+        return this.fComponentsStore.fNodes;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetNodesRectExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetNodesRectExecution });
 };
 GetNodesRectExecution = __decorate([
     FExecutionRegister(GetNodesRectRequest)
 ], GetNodesRectExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetNodesRectExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetNodesRectExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 class GetOutputRectInFlowRequest {
+    fOutputId;
     constructor(fOutputId) {
         this.fOutputId = fOutputId;
     }
 }
 
 class GetOutputRectInFlowResponse {
+    rect;
+    fConnectableSide;
     constructor(rect, fConnectableSide) {
         this.rect = rect;
         this.fConnectableSide = fConnectableSide;
@@ -4696,6 +4996,8 @@ class GetOutputRectInFlowResponse {
 }
 
 let GetOutputRectInFlowExecution = class GetOutputRectInFlowExecution {
+    fComponentsStore;
+    fMediator;
     constructor(fComponentsStore, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fMediator = fMediator;
@@ -4711,23 +5013,25 @@ let GetOutputRectInFlowExecution = class GetOutputRectInFlowExecution {
         const result = this.fMediator.send(new GetElementRectInFlowRequest(output.hostElement));
         return new GetOutputRectInFlowResponse(result, output.fConnectableSide);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetOutputRectInFlowExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetOutputRectInFlowExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetOutputRectInFlowExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetOutputRectInFlowExecution });
 };
 GetOutputRectInFlowExecution = __decorate([
     FExecutionRegister(GetOutputRectInFlowRequest)
 ], GetOutputRectInFlowExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetOutputRectInFlowExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetOutputRectInFlowExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FFlowMediator }] });
 
 class GetPositionInFlowRequest {
+    position;
     constructor(position) {
         this.position = position;
     }
 }
 
 let GetPositionInFlowExecution = class GetPositionInFlowExecution {
+    fComponentsStore;
     get transform() {
         return this.fComponentsStore.transform;
     }
@@ -4741,13 +5045,13 @@ let GetPositionInFlowExecution = class GetPositionInFlowExecution {
         return Point.fromPoint(request.position).elementTransform(this.flowHost)
             .sub(this.transform.scaledPosition).sub(this.transform.position).div(this.transform.scale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetPositionInFlowExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetPositionInFlowExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetPositionInFlowExecution, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetPositionInFlowExecution });
 };
 GetPositionInFlowExecution = __decorate([
     FExecutionRegister(GetPositionInFlowRequest)
 ], GetPositionInFlowExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetPositionInFlowExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetPositionInFlowExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
@@ -4755,6 +5059,7 @@ class GetSelectionRequest {
 }
 
 let GetSelectionExecution = class GetSelectionExecution {
+    fDraggableDataContext;
     constructor(fDraggableDataContext) {
         this.fDraggableDataContext = fDraggableDataContext;
     }
@@ -4771,17 +5076,18 @@ let GetSelectionExecution = class GetSelectionExecution {
         });
         return new FSelectionChangeEvent(selectedNodes, selectedConnections);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetSelectionExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetSelectionExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetSelectionExecution, deps: [{ token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetSelectionExecution });
 };
 GetSelectionExecution = __decorate([
     FExecutionRegister(GetSelectionRequest)
 ], GetSelectionExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetSelectionExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetSelectionExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }] });
 
 class GetOutgoingConnectionsHandler {
+    fComponentsStore;
     get fConnections() {
         return this.fComponentsStore.fConnections;
     }
@@ -4794,14 +5100,15 @@ class GetOutgoingConnectionsHandler {
             return outputsIds.includes(x.fOutputId);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetOutgoingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetOutgoingConnectionsHandler }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetOutgoingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetOutgoingConnectionsHandler });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetOutgoingConnectionsHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetOutgoingConnectionsHandler, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 class GetIncomingConnectionsHandler {
+    fComponentsStore;
     get fConnections() {
         return this.fComponentsStore.fConnections;
     }
@@ -4814,14 +5121,19 @@ class GetIncomingConnectionsHandler {
             return inputsIds.includes(x.fInputId);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetIncomingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetIncomingConnectionsHandler }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetIncomingConnectionsHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetIncomingConnectionsHandler });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetIncomingConnectionsHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetIncomingConnectionsHandler, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
 let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
+    getOutgoingConnectionsHandler;
+    getIncomingConnectionsHandler;
     get transform() {
         return this.fComponentsStore.fCanvas.transform;
     }
@@ -4878,13 +5190,13 @@ let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
             return ([]).length > 0;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: IsConnectionUnderNodeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: IsConnectionUnderNodeExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: IsConnectionUnderNodeExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }, { token: GetOutgoingConnectionsHandler }, { token: GetIncomingConnectionsHandler }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: IsConnectionUnderNodeExecution });
 };
 IsConnectionUnderNodeExecution = __decorate([
     FExecutionRegister(IsConnectionUnderNodeRequest)
 ], IsConnectionUnderNodeExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: IsConnectionUnderNodeExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: IsConnectionUnderNodeExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }, { type: FFlowMediator }, { type: GetOutgoingConnectionsHandler }, { type: GetIncomingConnectionsHandler }] });
 
@@ -4892,6 +5204,8 @@ class RedrawConnectionsRequest {
 }
 
 let RedrawConnectionsExecution = class RedrawConnectionsExecution {
+    fComponentsStore;
+    fMediator;
     constructor(fComponentsStore, fMediator) {
         this.fComponentsStore = fComponentsStore;
         this.fMediator = fMediator;
@@ -4930,17 +5244,19 @@ let RedrawConnectionsExecution = class RedrawConnectionsExecution {
     setMarkers(connection) {
         this.fMediator.send(new CreateConnectionMarkersRequest(connection));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RedrawConnectionsExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RedrawConnectionsExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RedrawConnectionsExecution, deps: [{ token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RedrawConnectionsExecution });
 };
 RedrawConnectionsExecution = __decorate([
     FExecutionRegister(RedrawConnectionsRequest)
 ], RedrawConnectionsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RedrawConnectionsExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RedrawConnectionsExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FFlowMediator }] });
 
 class SelectRequest {
+    nodes;
+    connections;
     constructor(nodes, connections) {
         this.nodes = nodes;
         this.connections = connections;
@@ -4948,6 +5264,8 @@ class SelectRequest {
 }
 
 let SelectExecution = class SelectExecution {
+    fDataContext;
+    fDraggableDataContext;
     constructor(fDataContext, fDraggableDataContext) {
         this.fDataContext = fDataContext;
         this.fDraggableDataContext = fDraggableDataContext;
@@ -4973,13 +5291,13 @@ let SelectExecution = class SelectExecution {
         });
         this.fDraggableDataContext.isSelectedChanged = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectExecution });
 };
 SelectExecution = __decorate([
     FExecutionRegister(SelectRequest)
 ], SelectExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
 
@@ -4987,6 +5305,8 @@ class SelectAllRequest {
 }
 
 let SelectAllExecution = class SelectAllExecution {
+    fDataContext;
+    fDraggableDataContext;
     constructor(fDataContext, fDraggableDataContext) {
         this.fDataContext = fDataContext;
         this.fDraggableDataContext = fDraggableDataContext;
@@ -5006,23 +5326,26 @@ let SelectAllExecution = class SelectAllExecution {
         });
         this.fDraggableDataContext.isSelectedChanged = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectAllExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectAllExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectAllExecution, deps: [{ token: FComponentsStore }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectAllExecution });
 };
 SelectAllExecution = __decorate([
     FExecutionRegister(SelectAllRequest)
 ], SelectAllExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectAllExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectAllExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }, { type: FDraggableDataContext }] });
 
 class SelectAndUpdateNodeLayerRequest {
+    node;
     constructor(node) {
         this.node = node;
     }
 }
 
 class UpdateItemLayerRequest {
+    item;
+    itemContainer;
     constructor(item, itemContainer) {
         this.item = item;
         this.itemContainer = itemContainer;
@@ -5032,9 +5355,8 @@ class UpdateItemLayerRequest {
 let UpdateItemLayerExecution = class UpdateItemLayerExecution {
     handle(request) {
         const elements = Array.from(request.itemContainer.children);
-        const elementsCount = elements.length;
         const targetIndex = elements.findIndex((x) => x === request.item.hostElement);
-        if (targetIndex !== elementsCount - 1) {
+        if (targetIndex !== -1 && targetIndex !== elements.length - 1) {
             const afterElements = elements.splice(targetIndex + 1);
             afterElements.forEach((x) => {
                 request.itemContainer.removeChild(x);
@@ -5042,17 +5364,20 @@ let UpdateItemLayerExecution = class UpdateItemLayerExecution {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UpdateItemLayerExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UpdateItemLayerExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: UpdateItemLayerExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: UpdateItemLayerExecution });
 };
 UpdateItemLayerExecution = __decorate([
     FExecutionRegister(UpdateItemLayerRequest)
 ], UpdateItemLayerExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UpdateItemLayerExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: UpdateItemLayerExecution, decorators: [{
             type: Injectable
         }] });
 
 let SelectAndUpdateNodeLayerExecution = class SelectAndUpdateNodeLayerExecution {
+    fDraggableDataContext;
+    fComponentsStore;
+    fMediator;
     constructor(fDraggableDataContext, fComponentsStore, fMediator) {
         this.fDraggableDataContext = fDraggableDataContext;
         this.fComponentsStore = fComponentsStore;
@@ -5069,13 +5394,13 @@ let SelectAndUpdateNodeLayerExecution = class SelectAndUpdateNodeLayerExecution
             this.fDraggableDataContext.isSelectedChanged = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, deps: [{ token: FDraggableDataContext }, { token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectAndUpdateNodeLayerExecution }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, deps: [{ token: FDraggableDataContext }, { token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectAndUpdateNodeLayerExecution });
 };
 SelectAndUpdateNodeLayerExecution = __decorate([
     FExecutionRegister(SelectAndUpdateNodeLayerRequest)
 ], SelectAndUpdateNodeLayerExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectAndUpdateNodeLayerExecution, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FDraggableDataContext }, { type: FComponentsStore }, { type: FFlowMediator }] });
 
@@ -5092,6 +5417,7 @@ function getKeyByValue(object, value) {
 }
 
 class GetConnectionHandler {
+    fComponentsStore;
     get fConnections() {
         return this.fComponentsStore.fConnections;
     }
@@ -5101,10 +5427,10 @@ class GetConnectionHandler {
     handle(element) {
         return this.fConnections.find(c => c.isContains(element) || c.fConnectionCenter?.nativeElement?.contains(element));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetConnectionHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetConnectionHandler }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetConnectionHandler, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetConnectionHandler });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GetConnectionHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GetConnectionHandler, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: FComponentsStore }] });
 
@@ -5129,6 +5455,7 @@ const COMMON_PROVIDERS = [
     GetCanBeSelectedItemsExecution,
     GetConnectionLineExecution,
     GetElementRectInFlowExecution,
+    GetExternalNodesRectExecution,
     GetNodesRectExecution,
     GetOutputRectInFlowExecution,
     GetPositionInFlowExecution,
@@ -5147,12 +5474,15 @@ const COMMON_PROVIDERS = [
 
 const F_RESIZE_HANDLE = new InjectionToken('F_RESIZE_HANDLE');
 class FResizeHandleDirective {
+    elementReference;
+    isDisabled = false;
     set disabled(isDisabled) {
         this.isDisabled = BooleanExtensions.castToBoolean(isDisabled);
     }
     get disabled() {
         return this.isDisabled;
     }
+    _type = EFResizeHandleType.LEFT_TOP;
     set type(type) {
         this._type = castToEnum(type, 'fResizeHandleType', EFResizeHandleType);
     }
@@ -5167,13 +5497,11 @@ class FResizeHandleDirective {
     }
     constructor(elementReference) {
         this.elementReference = elementReference;
-        this.isDisabled = false;
-        this._type = EFResizeHandleType.LEFT_TOP;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FResizeHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FResizeHandleDirective, selector: "[fResizeHandle]", inputs: { disabled: ["fResizeHandleDisabled", "disabled"], type: ["fResizeHandleType", "type"] }, host: { properties: { "class.f-resize-handle-disabled": "disabled", "attr.data-f-resize-handle-type": "type", "class": "this.typeClass" }, classAttribute: "f-resize-handle f-component" }, providers: [{ provide: F_RESIZE_HANDLE, useExisting: FResizeHandleDirective }], ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FResizeHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FResizeHandleDirective, selector: "[fResizeHandle]", inputs: { disabled: ["fResizeHandleDisabled", "disabled"], type: ["fResizeHandleType", "type"] }, host: { properties: { "class.f-resize-handle-disabled": "disabled", "attr.data-f-resize-handle-type": "type", "class": "this.typeClass" }, classAttribute: "f-resize-handle f-component" }, providers: [{ provide: F_RESIZE_HANDLE, useExisting: FResizeHandleDirective }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FResizeHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FResizeHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[fResizeHandle]",
@@ -5206,6 +5534,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 //   providers: [ { provide: F_ROTATE_HANDLE, useExisting: FRotateHandleDirective } ],
 // })
 class FRotateHandleDirective {
+    elementReference;
+    isDisabled = false;
     // @Input('fRotateHandleDisabled')
     // public set disabled(isDisabled: boolean | undefined | string) {
     //   this.isDisabled = BooleanExtensions.castToBoolean(isDisabled);
@@ -5218,16 +5548,14 @@ class FRotateHandleDirective {
     }
     constructor(elementReference) {
         this.elementReference = elementReference;
-        this.isDisabled = false;
     }
 }
 
 const F_NODE = new InjectionToken('F_NODE');
 class FNodeBase {
-    constructor() {
-        this.stateChanges = new Subject();
-        this._position = PointExtensions.initialize();
-    }
+    stateChanges = new Subject();
+    _position = PointExtensions.initialize();
+    _size;
     isContains(element) {
         return this.hostElement.contains(element);
     }
@@ -5272,6 +5600,11 @@ class FResizeObserver extends Observable {
 
 let uniqueId$1 = 0;
 class FNodeDirective extends FNodeBase {
+    elementReference;
+    renderer;
+    fComponentsStore;
+    subscriptions$ = new Subscription();
+    fId = `f-node-${uniqueId$1++}`;
     set position(value) {
         this._position = PointExtensions.castToPoint(value);
         this.refresh();
@@ -5279,6 +5612,7 @@ class FNodeDirective extends FNodeBase {
     get position() {
         return this._position;
     }
+    positionChange = new EventEmitter();
     set size(value) {
         this._size = value;
         this.refresh();
@@ -5286,22 +5620,19 @@ class FNodeDirective extends FNodeBase {
     get size() {
         return this._size;
     }
+    sizeChange = new EventEmitter();
+    fDraggingDisabled = false;
+    fSelectionDisabled = false;
+    fConnectOnNode = true;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
+    connectors = [];
     constructor(elementReference, renderer, fComponentsStore) {
         super();
         this.elementReference = elementReference;
         this.renderer = renderer;
         this.fComponentsStore = fComponentsStore;
-        this.subscriptions$ = new Subscription();
-        this.fId = `f-node-${uniqueId$1++}`;
-        this.positionChange = new EventEmitter();
-        this.sizeChange = new EventEmitter();
-        this.fDraggingDisabled = false;
-        this.fSelectionDisabled = false;
-        this.fConnectOnNode = true;
-        this.connectors = [];
     }
     ngOnInit() {
         this.setStyle('position', 'absolute');
@@ -5346,12 +5677,12 @@ class FNodeDirective extends FNodeBase {
         this.stateChanges.complete();
         this.subscriptions$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FNodeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FNodeDirective, selector: "[fNode]", inputs: { fId: ["fNodeId", "fId"], position: ["fNodePosition", "position"], size: ["fNodeSize", "size"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled"], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled"], fConnectOnNode: "fConnectOnNode" }, outputs: { positionChange: "fNodePositionChange", sizeChange: "fNodeSizeChange" }, host: { properties: { "attr.data-f-node-id": "fId", "class.f-node-dragging-disabled": "fDraggingDisabled", "class.f-node-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-node f-component" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FNodeDirective, selector: "[fNode]", inputs: { fId: ["fNodeId", "fId"], position: ["fNodePosition", "position"], size: ["fNodeSize", "size"], fDraggingDisabled: ["fNodeDraggingDisabled", "fDraggingDisabled"], fSelectionDisabled: ["fNodeSelectionDisabled", "fSelectionDisabled"], fConnectOnNode: "fConnectOnNode" }, outputs: { positionChange: "fNodePositionChange", sizeChange: "fNodeSizeChange" }, host: { properties: { "attr.data-f-node-id": "fId", "class.f-node-dragging-disabled": "fDraggingDisabled", "class.f-node-selection-disabled": "fSelectionDisabled" }, classAttribute: "f-node f-component" }, providers: [
             { provide: F_NODE, useExisting: FNodeDirective }
-        ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 }); }
+        ], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FNodeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FNodeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[fNode]",
@@ -5404,6 +5735,9 @@ const F_NODE_PROVIDERS = [
 
 const F_ZOOM = new InjectionToken('F_ZOOM');
 class FZoomBase {
+    fComponentsStore;
+    isEnabled = false;
+    listeners = EventExtensions.emptyListener();
     get flowHost() {
         return this.fComponentsStore.flowHost;
     }
@@ -5412,8 +5746,6 @@ class FZoomBase {
     }
     constructor(fComponentsStore) {
         this.fComponentsStore = fComponentsStore;
-        this.isEnabled = false;
-        this.listeners = EventExtensions.emptyListener();
     }
     toggleZoom() {
         if (this.isEnabled) {
@@ -5504,12 +5836,12 @@ class FZoomDirective extends FZoomBase {
             this.toggleZoom();
         }
     }
+    minimum = 0.1;
+    maximum = 4;
+    step = 0.1;
+    dblClickStep = 0.5;
     constructor(fComponentsStore) {
         super(fComponentsStore);
-        this.minimum = 0.1;
-        this.maximum = 4;
-        this.step = 0.1;
-        this.dblClickStep = 0.5;
     }
     ngAfterViewInit() {
         super.toggleZoom();
@@ -5517,10 +5849,10 @@ class FZoomDirective extends FZoomBase {
     ngOnDestroy() {
         super.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FZoomDirective, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FZoomDirective, deps: [{ token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", 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: "17.3.11", ngImport: i0, type: FZoomDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FZoomDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "f-canvas[fZoom]",
@@ -5549,6 +5881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
 const F_CANVAS = new InjectionToken('F_CANVAS');
 const MIXIN_BASE = mixinChangePosition(mixinFitToParent(mixinOneToOneCentering(mixinChangeZoom(class {
+    transform;
     constructor(transform) {
         this.transform = transform;
     }
@@ -5563,14 +5896,18 @@ class FCanvasBase extends MIXIN_BASE {
     getCanvasPosition() {
         return PointExtensions.sum(this.transform.position, this.transform.scaledPosition);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FCanvasBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FCanvasBase, usesInheritance: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FCanvasBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FCanvasBase, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FCanvasBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FCanvasBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
 class FCanvasComponent extends FCanvasBase {
+    elementReference;
+    fMediator;
+    fComponentsStore;
+    fCanvasChange = new EventEmitter();
     set position(value) {
         if (!value) {
             return;
@@ -5595,12 +5932,13 @@ class FCanvasComponent extends FCanvasBase {
     get hostElement() {
         return this.elementReference.nativeElement;
     }
+    fNodesContainer;
+    fConnectionsContainer;
     constructor(elementReference, fMediator, fComponentsStore) {
         super();
         this.elementReference = elementReference;
         this.fMediator = fMediator;
         this.fComponentsStore = fComponentsStore;
-        this.fCanvasChange = new EventEmitter();
     }
     ngOnInit() {
         this.fComponentsStore.fCanvas = this;
@@ -5638,10 +5976,10 @@ class FCanvasComponent extends FCanvasBase {
         this.redrawWithAnimation();
         this.completeDrag();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FCanvasComponent, deps: [{ token: i0.ElementRef }, { token: FFlowMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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 }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <div #fConnectionsContainer>\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=\"[fGroup]\"></ng-content>\n        <ng-content select=\"[fNode]\"></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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FCanvasComponent, deps: [{ token: i0.ElementRef }, { token: FFlowMediator }, { token: FComponentsStore }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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 }, { propertyName: "fConnectionsContainer", first: true, predicate: ["fConnectionsContainer"], descendants: true, static: true }], exportAs: ["fComponent"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <div #fConnectionsContainer>\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=\"[fGroup]\"></ng-content>\n        <ng-content select=\"[fNode]\"></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: "17.3.11", ngImport: i0, type: FCanvasComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FCanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-canvas', exportAs: 'fComponent', host: {
                         'class': 'f-component f-canvas',
@@ -5666,9 +6004,10 @@ const F_CANVAS_PROVIDERS = [
 ];
 
 class LineElement {
+    hostElement;
+    element = DomElementExtensions.createHtmlElement('div');
     constructor(hostElement) {
         this.hostElement = hostElement;
-        this.element = DomElementExtensions.createHtmlElement('div');
         this.hostElement.appendChild(this.element);
         this.element.classList.add('f-line');
     }
@@ -5688,6 +6027,9 @@ class LineElement {
 }
 
 class LineService {
+    hostElement;
+    fHorizontalLine;
+    fVerticalLine;
     constructor(hostElement) {
         this.hostElement = hostElement;
         this.fHorizontalLine = new LineElement(this.hostElement);
@@ -5723,6 +6065,9 @@ class LineService {
  * A class to find the nearest coordinate.
  */
 class NearestCoordinateFinder {
+    alignThreshold;
+    elements;
+    target;
     /**
      * Constructor to initialize the NearestCoordinateFinder.
      * @param elements - The array of IRect elements.
@@ -5822,17 +6167,26 @@ class NearestCoordinateFinder {
 
 const F_LINE_ALIGNMENT = new InjectionToken('F_LINE_ALIGNMENT');
 class FLineAlignmentBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FLineAlignmentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FLineAlignmentBase, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FLineAlignmentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FLineAlignmentBase, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FLineAlignmentBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FLineAlignmentBase, decorators: [{
             type: Directive
         }] });
 
 class FLineAlignmentComponent extends FLineAlignmentBase {
+    elementReference;
+    fComponentsStore;
+    fDraggableDataContext;
+    fMediator;
+    fAlignThreshold = 10;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
+    lineService;
+    size = SizeExtensions.initialize();
+    draggedNodeRect = RectExtensions.initialize();
+    rects = [];
     get transform() {
         return this.fComponentsStore.fCanvas.transform;
     }
@@ -5845,10 +6199,6 @@ class FLineAlignmentComponent extends FLineAlignmentBase {
         this.fComponentsStore = fComponentsStore;
         this.fDraggableDataContext = fDraggableDataContext;
         this.fMediator = fMediator;
-        this.fAlignThreshold = 10;
-        this.size = SizeExtensions.initialize();
-        this.draggedNodeRect = RectExtensions.initialize();
-        this.rects = [];
         this.lineService = new LineService(this.hostElement);
     }
     ngOnInit() {
@@ -5895,12 +6245,12 @@ class FLineAlignmentComponent extends FLineAlignmentBase {
         this.lineService.hideVerticalLine();
         this.lineService.hideHorizontalLine();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FLineAlignmentComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FLineAlignmentComponent, selector: "f-line-alignment", inputs: { fAlignThreshold: "fAlignThreshold" }, host: { classAttribute: "f-line-alignment f-component" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FLineAlignmentComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: FDraggableDataContext }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: FLineAlignmentComponent, selector: "f-line-alignment", inputs: { fAlignThreshold: "fAlignThreshold" }, 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"] }); }
+        ], 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: "17.3.11", ngImport: i0, type: FLineAlignmentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FLineAlignmentComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-line-alignment", template: "", exportAs: "fComponent", host: {
                         'class': 'f-line-alignment f-component'
@@ -5917,14 +6267,16 @@ const F_LINE_ALIGNMENT_PROVIDERS = [
 
 const F_SELECTION_AREA = new InjectionToken('F_SELECTION_AREA');
 class FSelectionAreaBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: FSelectionAreaBase, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FSelectionAreaBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: FSelectionAreaBase, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FSelectionAreaBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FSelectionAreaBase, decorators: [{
             type: Directive
         }] });
 
 class FSelectionAreaComponent extends FSelectionAreaBase {
+    elementReference;
+    fDraggableDataContext;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
@@ -5950,12 +6302,12 @@ class FSelectionAreaComponent extends FSelectionAreaBase {
         style.width = object.width + 'px';
         style.height = object.height + 'px';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", 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.3.11", type: FSelectionAreaComponent, selector: "f-selection-area", host: { classAttribute: "f-selection-area f-component" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FSelectionAreaComponent, deps: [{ token: i0.ElementRef }, { token: FDraggableDataContext }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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"] }); }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FSelectionAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: "f-selection-area", template: ``, host: {
                         'class': 'f-selection-area f-component'
@@ -5974,18 +6326,21 @@ class FFlowBase {
 
 let uniqueId = 0;
 class FFlowComponent extends FFlowBase {
+    elementReference;
+    fComponentsStore;
+    fMediator;
+    subscription$ = new Subscription();
+    fFlowId = `f-flow-${uniqueId++}`;
     get hostElement() {
         return this.elementReference.nativeElement;
     }
+    fLoaded = new EventEmitter();
+    isLoaded = false;
     constructor(elementReference, fComponentsStore, fMediator) {
         super();
         this.elementReference = elementReference;
         this.fComponentsStore = fComponentsStore;
         this.fMediator = fMediator;
-        this.subscription$ = new Subscription();
-        this.fFlowId = `f-flow-${uniqueId++}`;
-        this.fLoaded = new EventEmitter();
-        this.isLoaded = false;
     }
     ngOnInit() {
         this.fComponentsStore.fFlow = this;
@@ -6009,7 +6364,7 @@ class FFlowComponent extends FFlowBase {
         this.isLoaded = false;
     }
     getNodesRect() {
-        return this.fMediator.send(new GetNodesRectRequest());
+        return this.fMediator.send(new GetExternalNodesRectRequest());
     }
     getSelection() {
         return this.fMediator.send(new GetSelectionRequest());
@@ -6029,8 +6384,8 @@ class FFlowComponent extends FFlowBase {
     ngOnDestroy() {
         this.subscription$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FFlowComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FFlowComponent, selector: "f-flow", inputs: { fFlowId: "fFlowId" }, outputs: { fLoaded: "fLoaded" }, host: { properties: { "attr.id": "fFlowId" }, classAttribute: "f-component f-flow" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FFlowComponent, deps: [{ token: i0.ElementRef }, { token: FComponentsStore }, { token: FFlowMediator }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: FFlowComponent, selector: "f-flow", inputs: { fFlowId: "fFlowId" }, outputs: { fLoaded: "fLoaded" }, host: { properties: { "attr.id": "fFlowId" }, classAttribute: "f-component f-flow" }, providers: [
             FFlowMediator,
             FComponentsStore,
             FDraggableDataContext,
@@ -6038,9 +6393,9 @@ class FFlowComponent extends FFlowBase {
             ...F_DRAGGABLE_PROVIDERS,
             ...COMMON_PROVIDERS,
             { provide: F_FLOW, 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\n  <ng-content select=\"f-mini-map\"></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 }); }
+        ], 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\n  <ng-content select=\"f-mini-map\"></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: "17.3.11", ngImport: i0, type: FFlowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FFlowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-flow', host: {
                         '[attr.id]': 'fFlowId',
@@ -6065,11 +6420,11 @@ const F_FLOW_PROVIDERS = [
 ];
 
 class FFlowModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: FFlowModule, declarations: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FZoomDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FExternalItemDirective, FFlowComponent, FLineAlignmentComponent, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective], imports: [CommonModule], exports: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FZoomDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FExternalItemDirective, FFlowComponent, FLineAlignmentComponent, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FFlowModule, imports: [CommonModule] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: FFlowModule, declarations: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FZoomDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FExternalItemDirective, FFlowComponent, FLineAlignmentComponent, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective], imports: [CommonModule], exports: [FBackgroundComponent, FRectPatternComponent, FCirclePatternComponent, FCanvasComponent, FZoomDirective, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionComponent, FConnectionCenterDirective, FConnectionForCreateComponent, FMarkerDirective, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FExternalItemDirective, FFlowComponent, FLineAlignmentComponent, FNodeDirective, FDragHandleDirective, FResizeHandleDirective, FSelectionAreaComponent, FDraggableDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FFlowModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FFlowModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FFlowModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -6106,5 +6461,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CANVAS_MOVE_FINALIZE_PROVIDERS, CANVAS_MOVE_PREPARATION_PROVIDERS, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_CONNECTION_DRAG_HANDLER_PROVIDERS, CREATE_CONNECTION_FINALIZE_PROVIDERS, CREATE_CONNECTION_FROM_OUTLET_PREPARATION_PROVIDERS, CREATE_CONNECTION_FROM_OUTPUT_PREPARATION_PROVIDERS, CREATE_CONNECTION_PREPARATION_PROVIDERS, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CanvasDragHandler, CanvasMoveFinalizeExecution, CanvasMoveFinalizeRequest, CanvasMoveFinalizeValidator, CanvasMovePreparationExecution, CanvasMovePreparationRequest, CanvasMovePreparationValidator, ClearSelectionExecution, ClearSelectionRequest, ConnectionDragHandler, ConnectionSourceDragHandler, ConnectionTargetDragHandler, CreateConnectionDragHandler, CreateConnectionDragHandlerExecution, CreateConnectionDragHandlerRequest, CreateConnectionFinalizeExecution, CreateConnectionFinalizeRequest, CreateConnectionFinalizeValidator, CreateConnectionFromOutletPreparationExecution, CreateConnectionFromOutletPreparationRequest, CreateConnectionFromOutputPreparationExecution, CreateConnectionFromOutputPreparationRequest, CreateConnectionFromOutputPreparationValidator, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateConnectionPreparationExecution, CreateConnectionPreparationRequest, CreateConnectionPreparationValidator, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFConnectorShape, EFDraggableType, EFMarkerType, EFResizeHandleType, EXTERNAL_ITEM_FINALIZE_PROVIDERS, EXTERNAL_ITEM_PREPARATION_PROVIDERS, EXTERNAL_ITEM_PROVIDERS, ExternalItemDragHandler, ExternalItemFinalizeExecution, ExternalItemFinalizeRequest, ExternalItemFinalizeValidator, ExternalItemPreparationExecution, ExternalItemPreparationRequest, ExternalItemPreparationValidator, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FConnectorShapeExtensions, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FExecutionRegister, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowMediator, FFlowModule, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FReassignConnectionEvent, FRectPatternComponent, FResizeHandleDirective, FResizeObserver, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FStraightPathBuilder, FValidatorRegister, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_CANVAS, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_PROVIDERS, F_DRAGGABLE, F_DRAGGABLE_PROVIDERS, F_DRAG_HANDLE, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_NODE, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_RESIZE_HANDLE, F_SELECTED_CLASS, F_SELECTION_AREA, F_SELECTION_AREA_PROVIDERS, F_ZOOM, GET_CAN_BE_CONNECTED_OUTPUT_BY_OUTLET_PROVIDERS, GET_INPUT_UNDER_POINTER_PROVIDERS, GetCanBeConnectedOutputByOutletExecution, GetCanBeConnectedOutputByOutletRequest, GetCanBeConnectedOutputByOutletValidator, GetCanBeSelectedItemsExecution, GetConnectionHandler, GetConnectionLineExecution, GetConnectionLineRequest, GetElementRectInFlowExecution, GetElementRectInFlowRequest, GetIncomingConnectionsHandler, GetInputRectInFlowExecution, GetInputRectInFlowRequest, GetInputRectInFlowResponse, GetInputUnderPointerExecution, GetInputUnderPointerRequest, GetInputUnderPointerValidator, GetNodesRectExecution, GetNodesRectRequest, GetOutgoingConnectionsHandler, GetOutputRectInFlowExecution, GetOutputRectInFlowRequest, GetOutputRectInFlowResponse, GetPositionInFlowExecution, GetPositionInFlowRequest, GetSelectionExecution, GetSelectionRequest, IntersectionFinder, IsConnectionUnderNodeExecution, LineElement, LineService, MOUSE_EVENT_IGNORE_TIME, NODE_MOVE_FINALIZE_PROVIDERS, NODE_MOVE_PREPARATION_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_FINALIZE_PROVIDERS, NODE_RESIZE_PREPARATION_PROVIDERS, NODE_RESIZE_PROVIDERS, NearestCoordinateFinder, NodeDragHandler, NodeMoveFinalizeExecution, NodeMoveFinalizeRequest, NodeMoveFinalizeValidator, NodeMovePreparationExecution, NodeMovePreparationRequest, NodeMovePreparationValidator, NodeResizeDragHandler, NodeResizeFinalizeExecution, NodeResizeFinalizeRequest, NodeResizeFinalizeValidator, NodeResizePreparationExecution, NodeResizePreparationRequest, NodeResizePreparationValidator, Pipeline, REASSIGN_CONNECTION_FINALIZE_PROVIDERS, REASSIGN_CONNECTION_PREPARATION_PROVIDERS, ReassignConnectionDragHandler, ReassignConnectionFinalizeExecution, ReassignConnectionFinalizeRequest, ReassignConnectionFinalizeValidator, ReassignConnectionPreparationExecution, ReassignConnectionPreparationRequest, ReassignConnectionPreparationValidator, RedrawConnectionsExecution, RedrawConnectionsRequest, RoundedRect, SELECTION_AREA_FINALIZE_PROVIDERS, SELECTION_AREA_PREPARATION_PROVIDERS, SELECTION_AREA_PROVIDERS, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaFinalizeValidator, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SelectionAreaPreparationValidator, SingleSelectExecution, SingleSelectRequest, SingleSelectValidator, UpdateItemLayerExecution, UpdateItemLayerRequest, castToConnectableSide, castToEnum, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, getValueFromDataAttr, isElementWithClass, isExternalItem, isNode, isNodeInput, isNodeOutlet, isNodeOutput, mixinChangeConnectionSelection, mixinChangeConnectionVisibility };
+export { CANVAS_MOVE_FINALIZE_PROVIDERS, CANVAS_MOVE_PREPARATION_PROVIDERS, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_CONNECTION_DRAG_HANDLER_PROVIDERS, CREATE_CONNECTION_FINALIZE_PROVIDERS, CREATE_CONNECTION_FROM_OUTLET_PREPARATION_PROVIDERS, CREATE_CONNECTION_FROM_OUTPUT_PREPARATION_PROVIDERS, CREATE_CONNECTION_PREPARATION_PROVIDERS, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectorConnectableSideHandler, CalculateConnectorConnectableSideRequest, CanvasDragHandler, CanvasMoveFinalizeExecution, CanvasMoveFinalizeRequest, CanvasMoveFinalizeValidator, CanvasMovePreparationExecution, CanvasMovePreparationRequest, CanvasMovePreparationValidator, ClearSelectionExecution, ClearSelectionRequest, ConnectionDragHandler, ConnectionSourceDragHandler, ConnectionTargetDragHandler, CreateConnectionDragHandler, CreateConnectionDragHandlerExecution, CreateConnectionDragHandlerRequest, CreateConnectionFinalizeExecution, CreateConnectionFinalizeRequest, CreateConnectionFinalizeValidator, CreateConnectionFromOutletPreparationExecution, CreateConnectionFromOutletPreparationRequest, CreateConnectionFromOutputPreparationExecution, CreateConnectionFromOutputPreparationRequest, CreateConnectionFromOutputPreparationValidator, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateConnectionPreparationExecution, CreateConnectionPreparationRequest, CreateConnectionPreparationValidator, CreateMoveNodesDragModelFromSelectionExecution, CreateMoveNodesDragModelFromSelectionRequest, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFConnectorShape, EFDraggableType, EFMarkerType, EFResizeHandleType, EXTERNAL_ITEM_FINALIZE_PROVIDERS, EXTERNAL_ITEM_PREPARATION_PROVIDERS, EXTERNAL_ITEM_PROVIDERS, ExternalItemDragHandler, ExternalItemFinalizeExecution, ExternalItemFinalizeRequest, ExternalItemFinalizeValidator, ExternalItemPreparationExecution, ExternalItemPreparationRequest, ExternalItemPreparationValidator, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FConnectorShapeExtensions, FCreateConnectionEvent, FCreateNodeEvent, FDragHandleDirective, FDraggableBase, FDraggableDataContext, FDraggableDirective, FExecutionRegister, FExternalItemBase, FExternalItemDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowMediator, FFlowModule, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FNodeBase, FNodeDirective, FNodeInputBase, FNodeInputDirective, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FReassignConnectionEvent, FRectPatternComponent, FResizeHandleDirective, FResizeObserver, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FStraightPathBuilder, FValidatorRegister, FZoomBase, FZoomDirective, F_BACKGROUND, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_CANVAS, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_DRAG_HANDLE_CLASS, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_PROVIDERS, F_DRAGGABLE, F_DRAGGABLE_PROVIDERS, F_DRAG_HANDLE, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_NODE, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_RESIZE_HANDLE, F_SELECTED_CLASS, F_SELECTION_AREA, F_SELECTION_AREA_PROVIDERS, F_ZOOM, GET_CAN_BE_CONNECTED_OUTPUT_BY_OUTLET_PROVIDERS, GET_INPUT_UNDER_POINTER_PROVIDERS, GetCanBeConnectedOutputByOutletExecution, GetCanBeConnectedOutputByOutletRequest, GetCanBeConnectedOutputByOutletValidator, GetCanBeSelectedItemsExecution, GetConnectionHandler, GetConnectionLineExecution, GetConnectionLineRequest, GetElementRectInFlowExecution, GetElementRectInFlowRequest, GetExternalNodesRectExecution, GetExternalNodesRectRequest, GetIncomingConnectionsHandler, GetInputRectInFlowExecution, GetInputRectInFlowRequest, GetInputRectInFlowResponse, GetInputUnderPointerExecution, GetInputUnderPointerRequest, GetInputUnderPointerValidator, GetNodesRectExecution, GetNodesRectRequest, GetOutgoingConnectionsHandler, GetOutputRectInFlowExecution, GetOutputRectInFlowRequest, GetOutputRectInFlowResponse, GetPositionInFlowExecution, GetPositionInFlowRequest, GetSelectionExecution, GetSelectionRequest, IntersectionFinder, IsConnectionUnderNodeExecution, LineElement, LineService, MOUSE_EVENT_IGNORE_TIME, NODE_MOVE_FINALIZE_PROVIDERS, NODE_MOVE_PREPARATION_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_FINALIZE_PROVIDERS, NODE_RESIZE_PREPARATION_PROVIDERS, NODE_RESIZE_PROVIDERS, NearestCoordinateFinder, NodeDragHandler, NodeMoveFinalizeExecution, NodeMoveFinalizeRequest, NodeMoveFinalizeValidator, NodeMovePreparationExecution, NodeMovePreparationRequest, NodeMovePreparationValidator, NodeResizeDragHandler, NodeResizeFinalizeExecution, NodeResizeFinalizeRequest, NodeResizeFinalizeValidator, NodeResizePreparationExecution, NodeResizePreparationRequest, NodeResizePreparationValidator, Pipeline, REASSIGN_CONNECTION_FINALIZE_PROVIDERS, REASSIGN_CONNECTION_PREPARATION_PROVIDERS, ReassignConnectionDragHandler, ReassignConnectionFinalizeExecution, ReassignConnectionFinalizeRequest, ReassignConnectionFinalizeValidator, ReassignConnectionPreparationExecution, ReassignConnectionPreparationRequest, ReassignConnectionPreparationValidator, RedrawConnectionsExecution, RedrawConnectionsRequest, RoundedRect, SELECTION_AREA_FINALIZE_PROVIDERS, SELECTION_AREA_PREPARATION_PROVIDERS, SELECTION_AREA_PROVIDERS, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaFinalizeValidator, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SelectionAreaPreparationValidator, SingleSelectExecution, SingleSelectRequest, SingleSelectValidator, UpdateItemLayerExecution, UpdateItemLayerRequest, castToEnum, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, getValueFromDataAttr, isElementWithClass, isExternalItem, isNode, isNodeInput, isNodeOutlet, isNodeOutput, mixinChangeConnectionSelection, mixinChangeConnectionVisibility };
 //# sourceMappingURL=foblex-flow.mjs.map