@foblex/flow 17.8.0 → 17.8.2

package/fesm2022/foblex-flow.mjs

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Directive, input, computed, signal, Injector, Renderer2, effect, untracked, DestroyRef, model, output, booleanAttribute, ElementRef, Input, Inject, Component, ChangeDetectionStrategy, ViewChild, Optional, viewChild, contentChildren, numberAttribute, ViewContainerRef, TemplateRef, EventEmitter, NgZone, Output, ContentChildren, contentChild, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, Directive, input, computed, signal, Injector, Renderer2, effect, untracked, DestroyRef, model, output, booleanAttribute, ElementRef, Input, viewChild, Component, ChangeDetectionStrategy, Optional, Inject, isDevMode, contentChildren, numberAttribute, ViewContainerRef, TemplateRef, EventEmitter, NgZone, Output, ContentChildren, contentChild, NgModule } from '@angular/core';
 import { RectExtensions, RoundedRect, TransformModelExtensions, PointExtensions, Point, LineExtensions, GetIntersections, SizeExtensions, findClosestAlignment, setRectToElement, adjustRectToMinSize, setRectToViewBox } from '@foblex/2d';
 import { __decorate } from 'tslib';
 import { FExecutionRegister, FMediator } from '@foblex/mediator';
-import * as i1 from '@foblex/platform';
 import { BrowserService, PlatformService, EOperationSystem } from '@foblex/platform';
 import { normalizeDomElementId, castToEnum, isClosestElementHasClass, flatMap, getOrCreateRootNodeForViewRef, deepCloneNode, disableDragInteractions, extendStyles, getDataAttrValueFromClosestElementWithClass } from '@foblex/utils';
 import { CommonModule } from '@angular/common';
@@ -1013,18 +1012,18 @@ function createSVGElement$1(tag, fBrowser) {
 }
 
 class CalculateConnectionLineByBehaviorRequest {
-    outputRect;
-    inputRect;
+    sourceRect;
+    targetRect;
     behavior;
-    outputSide;
-    inputSide;
+    sourceConnectableSide;
+    targetConnectableSide;
     static fToken = Symbol('CalculateConnectionLineByBehaviorRequest');
-    constructor(outputRect, inputRect, behavior, outputSide, inputSide) {
-        this.outputRect = outputRect;
-        this.inputRect = inputRect;
+    constructor(sourceRect, targetRect, behavior, sourceConnectableSide, targetConnectableSide) {
+        this.sourceRect = sourceRect;
+        this.targetRect = targetRect;
         this.behavior = behavior;
-        this.outputSide = outputSide;
-        this.inputSide = inputSide;
+        this.sourceConnectableSide = sourceConnectableSide;
+        this.targetConnectableSide = targetConnectableSide;
     }
 }
 
@@ -1126,7 +1125,7 @@ class FConnectorBase {
 const F_NODE_INPUT = new InjectionToken('F_NODE_INPUT');
 class FNodeInputBase extends FConnectorBase {
     get canBeConnected() {
-        return !this.disabled && (this.multiple ? true : !this.isConnected);
+        return !this.disabled() && (this.multiple() ? true : !this.isConnected);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FNodeInputBase, usesInheritance: true, ngImport: i0 });
@@ -1220,10 +1219,9 @@ function mixinChangeSelection(base) {
         isSelected() {
             return this.hostElement.classList.contains(F_SELECTED_CLASS);
         }
-        markChildrenAsSelected() {
-        }
-        unmarkChildrenAsSelected() {
-        }
+        markChildrenAsSelected() { }
+        unmarkChildrenAsSelected() { }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         constructor(...args) {
             super(...args);
         }
@@ -1233,11 +1231,12 @@ function mixinChangeSelection(base) {
 function mixinChangeVisibility(base) {
     return class extends base {
         show() {
-            this.hostElement.style.display = "unset";
+            this.hostElement.style.display = 'unset';
         }
         hide() {
-            this.hostElement.style.display = "none";
+            this.hostElement.style.display = 'none';
         }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         constructor(...args) {
             super(...args);
         }
@@ -1454,11 +1453,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
+function infinityMinMax() {
+    return {
+        min: { x: -Infinity, y: -Infinity },
+        max: { x: Infinity, y: Infinity },
+    };
+}
+
+function stringAttribute(value) {
+    return value ? `${value}` : undefined;
+}
+
 let uniqueId$a = 0;
 class FNodeDirective extends FNodeBase {
     _destroyRef = inject(DestroyRef);
     _mediator = inject(FMediator);
-    fId = input(`f-node-${uniqueId$a++}`, { alias: 'fNodeId' });
+    fId = input(`f-node-${uniqueId$a++}`, {
+        alias: 'fNodeId',
+        transform: (value) => stringAttribute(value) || `f-node-${uniqueId$a++}`,
+    });
     fParentId = input(null, {
         alias: 'fNodeParentId',
     });
@@ -1569,26 +1582,36 @@ const F_NODE_PROVIDERS = [
 
 let uniqueId$9 = 0;
 class FNodeInputDirective extends FNodeInputBase {
-    _elementReference = inject(ElementRef);
-    _fMediator = inject(FMediator);
-    _fNode = inject(F_NODE);
-    fId = `f-node-input-${uniqueId$9++}`;
-    multiple = true;
-    disabled = false;
+    hostElement = inject(ElementRef).nativeElement;
+    _mediator = inject(FMediator);
+    _node = inject(F_NODE);
+    fId = input(`f-node-input-${uniqueId$9++}`, {
+        alias: 'fInputId',
+        transform: (value) => stringAttribute(value) || `f-node-input-${uniqueId$9++}`,
+    });
+    category = input(undefined, {
+        alias: 'fInputCategory',
+        transform: stringAttribute,
+    });
+    multiple = input(true, {
+        alias: 'fInputMultiple',
+        transform: booleanAttribute,
+    });
+    disabled = input(false, {
+        alias: 'fInputDisabled',
+        transform: booleanAttribute,
+    });
     userFConnectableSide = EFConnectableSide.AUTO;
     get fNodeId() {
-        return this._fNode.fId();
-    }
-    get hostElement() {
-        return this._elementReference.nativeElement;
+        return this._node.fId();
     }
     ngOnInit() {
-        this._fMediator.execute(new AddInputToStoreRequest(this));
-        this._fNode.addConnector(this);
+        this._mediator.execute(new AddInputToStoreRequest(this));
+        this._node.addConnector(this);
     }
     ngOnChanges(changes) {
         if (changes['userFConnectableSide']) {
-            this._fNode.refresh();
+            this._node.refresh();
         }
     }
     setConnected(toConnector) {
@@ -1602,35 +1625,26 @@ class FNodeInputDirective extends FNodeInputBase {
         this.hostElement.classList.toggle(F_CSS_CLASS.CONNECTOR.INPUT_NOT_CONNECTABLE, !this.canBeConnected);
     }
     ngOnDestroy() {
-        this._fNode.removeConnector(this);
-        this._fMediator.execute(new RemoveInputFromStoreRequest(this));
+        this._node.removeConnector(this);
+        this._mediator.execute(new RemoveInputFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { fId: ["fInputId", "fId"], multiple: ["fInputMultiple", "multiple"], disabled: ["fInputDisabled", "disabled", booleanAttribute], userFConnectableSide: ["fInputConnectableSide", "userFConnectableSide", (value) => castToEnum(value, 'fInputConnectableSide', EFConnectableSide)] }, host: { properties: { "attr.data-f-input-id": "fId", "class.f-node-input-multiple": "multiple", "class.f-node-input-disabled": "disabled" }, classAttribute: "f-component f-node-input" }, providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }], exportAs: ["fNodeInput"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FNodeInputDirective, selector: "[fNodeInput]", inputs: { fId: { classPropertyName: "fId", publicName: "fInputId", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "fInputCategory", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "fInputMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "fInputDisabled", isSignal: true, isRequired: false, transformFunction: null }, userFConnectableSide: { classPropertyName: "userFConnectableSide", publicName: "fInputConnectableSide", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fInputConnectableSide', EFConnectableSide) } }, host: { properties: { "attr.data-f-input-id": "fId()", "class.f-node-input-multiple": "multiple", "class.f-node-input-disabled": "disabled()" }, classAttribute: "f-component f-node-input" }, providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }], exportAs: ["fNodeInput"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[fNodeInput]",
+                    selector: '[fNodeInput]',
                     exportAs: 'fNodeInput',
                     host: {
-                        '[attr.data-f-input-id]': 'fId',
-                        class: "f-component f-node-input",
+                        '[attr.data-f-input-id]': 'fId()',
+                        class: 'f-component f-node-input',
                         '[class.f-node-input-multiple]': 'multiple',
-                        '[class.f-node-input-disabled]': 'disabled',
+                        '[class.f-node-input-disabled]': 'disabled()',
                     },
                     providers: [{ provide: F_NODE_INPUT, useExisting: FNodeInputDirective }],
                 }]
-        }], propDecorators: { fId: [{
-                type: Input,
-                args: ['fInputId']
-            }], multiple: [{
-                type: Input,
-                args: ['fInputMultiple']
-            }], disabled: [{
-                type: Input,
-                args: [{ alias: 'fInputDisabled', transform: booleanAttribute }]
-            }], userFConnectableSide: [{
+        }], propDecorators: { userFConnectableSide: [{
                 type: Input,
                 args: [{
                         alias: 'fInputConnectableSide',
@@ -1638,14 +1652,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     }]
             }] } });
 
+class FSourceConnectorBase extends FConnectorBase {
+    get hasConnectionLimits() {
+        return !!this.canBeConnectedInputs && this.canBeConnectedInputs.length > 0;
+    }
+    canConnectTo(targetConnector) {
+        const candidates = [targetConnector.fId(), targetConnector.category()];
+        return candidates.some((c) => c && this.canBeConnectedInputs?.includes(c));
+    }
+}
+
 const F_NODE_OUTLET = new InjectionToken('F_NODE_OUTLET');
-class FNodeOutletBase extends FConnectorBase {
-    outputs = [];
+class FNodeOutletBase extends FSourceConnectorBase {
+    _outputs = [];
     get canBeConnected() {
-        return !this.disabled && this.outputs.some((output) => output.canBeConnected);
+        return !this.disabled() && this._outputs.some((output) => output.canBeConnected);
     }
     setOutputs(outputs) {
-        this.outputs = outputs;
+        this._outputs = outputs;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeOutletBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FNodeOutletBase, usesInheritance: true, ngImport: i0 });
@@ -1660,50 +1684,46 @@ function isNodeOutlet(element) {
 
 let uniqueId$8 = 0;
 class FNodeOutletDirective extends FNodeOutletBase {
-    _elementReference = inject(ElementRef);
-    _fMediator = inject(FMediator);
-    /// Inject FNodeBase to check if the outlet inside the node
-    _fNode = inject(F_NODE);
-    fId = `f-node-outlet-${uniqueId$8++}`;
-    disabled = false;
+    hostElement = inject(ElementRef).nativeElement;
+    _mediator = inject(FMediator);
+    _node = inject(F_NODE);
+    fId = input(`f-node-outlet-${uniqueId$8++}`, {
+        alias: 'fOutletId',
+        transform: (value) => stringAttribute(value) || `f-node-outlet-${uniqueId$8++}`,
+    });
+    disabled = input(false, {
+        alias: 'fOutletDisabled',
+        transform: booleanAttribute,
+    });
     fConnectableSide = EFConnectableSide.AUTO;
     userFConnectableSide = EFConnectableSide.AUTO;
     isConnectionFromOutlet = false;
     canBeConnectedInputs = [];
     get fNodeId() {
-        return this._fNode.fId();
-    }
-    get hostElement() {
-        return this._elementReference.nativeElement;
+        return this._node.fId();
     }
     ngOnInit() {
-        this._fMediator.execute(new AddOutletToStoreRequest(this));
+        this._mediator.execute(new AddOutletToStoreRequest(this));
     }
     ngOnDestroy() {
-        this._fMediator.execute(new RemoveOutletFromStoreRequest(this));
+        this._mediator.execute(new RemoveOutletFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeOutletDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { fId: ["fOutletId", "fId"], disabled: ["fOutletDisabled", "disabled", booleanAttribute], isConnectionFromOutlet: "isConnectionFromOutlet", canBeConnectedInputs: ["fCanBeConnectedInputs", "canBeConnectedInputs"] }, host: { properties: { "attr.data-f-outlet-id": "fId", "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 ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FNodeOutletDirective, selector: "[fNodeOutlet]", inputs: { fId: { classPropertyName: "fId", publicName: "fOutletId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "fOutletDisabled", isSignal: true, isRequired: false, transformFunction: null }, isConnectionFromOutlet: { classPropertyName: "isConnectionFromOutlet", publicName: "isConnectionFromOutlet", isSignal: false, isRequired: false, transformFunction: null }, canBeConnectedInputs: { classPropertyName: "canBeConnectedInputs", publicName: "fCanBeConnectedInputs", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-f-outlet-id": "fId()", "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: "18.2.13", ngImport: i0, type: FNodeOutletDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[fNodeOutlet]",
+                    selector: '[fNodeOutlet]',
                     exportAs: 'fNodeOutlet',
                     host: {
-                        '[attr.data-f-outlet-id]': 'fId',
-                        class: "f-component f-node-outlet",
-                        '[class.f-node-outlet-disabled]': 'disabled',
+                        '[attr.data-f-outlet-id]': 'fId()',
+                        class: 'f-component f-node-outlet',
+                        '[class.f-node-outlet-disabled]': 'disabled()',
                     },
                     providers: [{ provide: F_NODE_OUTLET, useExisting: FNodeOutletDirective }],
                 }]
-        }], propDecorators: { fId: [{
-                type: Input,
-                args: ['fOutletId']
-            }], disabled: [{
-                type: Input,
-                args: [{ alias: 'fOutletDisabled', transform: booleanAttribute }]
-            }], isConnectionFromOutlet: [{
+        }], propDecorators: { isConnectionFromOutlet: [{
                 type: Input
             }], canBeConnectedInputs: [{
                 type: Input,
@@ -1711,9 +1731,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 const F_NODE_OUTPUT = new InjectionToken('F_NODE_OUTPUT');
-class FNodeOutputBase extends FConnectorBase {
+class FNodeOutputBase extends FSourceConnectorBase {
     get canBeConnected() {
-        return !this.disabled && (this.multiple ? true : !this.isConnected);
+        return !this.disabled() && (this.multiple() ? true : !this.isConnected);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeOutputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FNodeOutputBase, usesInheritance: true, ngImport: i0 });
@@ -1728,28 +1748,34 @@ function isNodeOutput(element) {
 
 let uniqueId$7 = 0;
 class FNodeOutputDirective extends FNodeOutputBase {
-    _elementReference = inject(ElementRef);
-    _fMediator = inject(FMediator);
-    _fNode = inject(F_NODE);
-    fId = `f-node-output-${uniqueId$7++}`;
-    multiple = false;
-    disabled = false;
+    hostElement = inject(ElementRef).nativeElement;
+    _mediator = inject(FMediator);
+    _node = inject(F_NODE);
+    fId = input(`f-node-output-${uniqueId$7++}`, {
+        alias: 'fOutputId',
+        transform: (value) => stringAttribute(value) || `f-node-output-${uniqueId$7++}`,
+    });
+    multiple = input(false, {
+        alias: 'fOutputMultiple',
+        transform: booleanAttribute,
+    });
+    disabled = input(false, {
+        alias: 'fOutputDisabled',
+        transform: booleanAttribute,
+    });
     userFConnectableSide = EFConnectableSide.AUTO;
     isSelfConnectable = true;
     canBeConnectedInputs = [];
     get fNodeId() {
-        return this._fNode.fId();
-    }
-    get hostElement() {
-        return this._elementReference.nativeElement;
+        return this._node.fId();
     }
     ngOnInit() {
-        this._fMediator.execute(new AddOutputToStoreRequest(this));
-        this._fNode.addConnector(this);
+        this._mediator.execute(new AddOutputToStoreRequest(this));
+        this._node.addConnector(this);
     }
     ngOnChanges(changes) {
         if (changes['userFConnectableSide']) {
-            this._fNode.refresh();
+            this._node.refresh();
         }
     }
     setConnected(toConnector) {
@@ -1763,36 +1789,27 @@ class FNodeOutputDirective extends FNodeOutputBase {
         this.hostElement.classList.toggle(F_CSS_CLASS.CONNECTOR.OUTPUT_NOT_CONNECTABLE, !this.canBeConnected);
     }
     ngOnDestroy() {
-        this._fNode.removeConnector(this);
-        this._fMediator.execute(new RemoveOutputFromStoreRequest(this));
+        this._node.removeConnector(this);
+        this._mediator.execute(new RemoveOutputFromStoreRequest(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeOutputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { fId: ["fOutputId", "fId"], multiple: ["fOutputMultiple", "multiple"], disabled: ["fOutputDisabled", "disabled", booleanAttribute], userFConnectableSide: ["fOutputConnectableSide", "userFConnectableSide", (value) => castToEnum(value, 'fOutputConnectableSide', EFConnectableSide)], isSelfConnectable: "isSelfConnectable", canBeConnectedInputs: ["fCanBeConnectedInputs", "canBeConnectedInputs"] }, host: { properties: { "attr.data-f-output-id": "fId", "class.f-node-output-multiple": "multiple", "class.f-node-output-disabled": "disabled", "class.f-node-output-self-connectable": "isSelfConnectable" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FNodeOutputDirective, selector: "[fNodeOutput]", inputs: { fId: { classPropertyName: "fId", publicName: "fOutputId", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "fOutputMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "fOutputDisabled", isSignal: true, isRequired: false, transformFunction: null }, userFConnectableSide: { classPropertyName: "userFConnectableSide", publicName: "fOutputConnectableSide", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fOutputConnectableSide', EFConnectableSide) }, isSelfConnectable: { classPropertyName: "isSelfConnectable", publicName: "isSelfConnectable", isSignal: false, isRequired: false, transformFunction: null }, canBeConnectedInputs: { classPropertyName: "canBeConnectedInputs", publicName: "fCanBeConnectedInputs", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-f-output-id": "fId()", "class.f-node-output-multiple": "multiple", "class.f-node-output-disabled": "disabled()", "class.f-node-output-self-connectable": "isSelfConnectable" }, classAttribute: "f-component f-node-output" }, providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }], exportAs: ["fNodeOutput"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FNodeOutputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[fNodeOutput]",
+                    selector: '[fNodeOutput]',
                     exportAs: 'fNodeOutput',
                     host: {
-                        '[attr.data-f-output-id]': 'fId',
-                        class: "f-component f-node-output",
+                        '[attr.data-f-output-id]': 'fId()',
+                        class: 'f-component f-node-output',
                         '[class.f-node-output-multiple]': 'multiple',
-                        '[class.f-node-output-disabled]': 'disabled',
+                        '[class.f-node-output-disabled]': 'disabled()',
                         '[class.f-node-output-self-connectable]': 'isSelfConnectable',
                     },
                     providers: [{ provide: F_NODE_OUTPUT, useExisting: FNodeOutputDirective }],
                 }]
-        }], propDecorators: { fId: [{
-                type: Input,
-                args: ['fOutputId']
-            }], multiple: [{
-                type: Input,
-                args: ['fOutputMultiple']
-            }], disabled: [{
-                type: Input,
-                args: [{ alias: 'fOutputDisabled', transform: booleanAttribute }]
-            }], userFConnectableSide: [{
+        }], propDecorators: { userFConnectableSide: [{
                 type: Input,
                 args: [{
                         alias: 'fOutputConnectableSide',
@@ -1812,34 +1829,34 @@ const F_CONNECTORS_PROVIDERS = [
 ];
 
 class FBezierPathBuilder {
-    static getConnectorOffset(distance, offset) {
+    static _getConnectorOffset(distance, offset) {
         if (distance >= offset) {
             return distance;
         }
         return offset * Math.sqrt(offset - distance);
     }
-    static getAnglePoint(side, source, target, offset) {
+    static _getAnglePoint(side, source, target, offset) {
         const result = { x: source.x, y: source.y };
         switch (side) {
             case EFConnectableSide.LEFT:
-                result.x -= FBezierPathBuilder.getConnectorOffset(source.x - target.x, offset);
+                result.x -= FBezierPathBuilder._getConnectorOffset(source.x - target.x, offset);
                 break;
             case EFConnectableSide.RIGHT:
-                result.x += FBezierPathBuilder.getConnectorOffset(target.x - source.x, offset);
+                result.x += FBezierPathBuilder._getConnectorOffset(target.x - source.x, offset);
                 break;
             case EFConnectableSide.TOP:
-                result.y -= FBezierPathBuilder.getConnectorOffset(source.y - target.y, offset);
+                result.y -= FBezierPathBuilder._getConnectorOffset(source.y - target.y, offset);
                 break;
             case EFConnectableSide.BOTTOM:
-                result.y += FBezierPathBuilder.getConnectorOffset(target.y - source.y, offset);
+                result.y += FBezierPathBuilder._getConnectorOffset(target.y - source.y, offset);
                 break;
         }
         return result;
     }
     handle(request) {
         const { source, sourceSide, target, targetSide, offset } = request;
-        const sourceAnglePoint = FBezierPathBuilder.getAnglePoint(sourceSide, source, target, offset);
-        const targetAnglePoint = FBezierPathBuilder.getAnglePoint(targetSide, target, source, offset);
+        const sourceAnglePoint = FBezierPathBuilder._getAnglePoint(sourceSide, source, target, offset);
+        const targetAnglePoint = FBezierPathBuilder._getAnglePoint(targetSide, target, source, offset);
         const path = `M ${source.x} ${source.y} C ${sourceAnglePoint.x} ${sourceAnglePoint.y}, ${targetAnglePoint.x} ${targetAnglePoint.y}, ${target.x + 0.0002} ${target.y + 0.0002}`;
         const connectionCenter = new CalculateConnectionCenterHandler().handle(new CalculateConnectionCenterRequest([source, sourceAnglePoint, targetAnglePoint, target]));
         return {
@@ -1847,9 +1864,25 @@ class FBezierPathBuilder {
             connectionCenter,
             penultimatePoint: targetAnglePoint,
             secondPoint: sourceAnglePoint,
+            points: _sampleCubic(source, sourceAnglePoint, targetAnglePoint, target, 32),
         };
     }
 }
+function bez3(p0, p1, p2, p3, t) {
+    const u = 1 - t, tt = t * t, uu = u * u, uuu = uu * u, ttt = tt * t;
+    return {
+        x: uuu * p0.x + 3 * uu * t * p1.x + 3 * u * tt * p2.x + ttt * p3.x,
+        y: uuu * p0.y + 3 * uu * t * p1.y + 3 * u * tt * p2.y + ttt * p3.y,
+    };
+}
+function _sampleCubic(p0, p1, p2, p3, samples = 32) {
+    const out = new Array(samples + 1);
+    out[0] = { ...p0 };
+    for (let i = 1; i <= samples; i++) {
+        out[i] = bez3(p0, p1, p2, p3, i / samples);
+    }
+    return out;
+}
 
 const CONNECTOR_SIDE_POINT = {
     [EFConnectableSide.LEFT]: PointExtensions.initialize(-1, 0),
@@ -1861,18 +1894,30 @@ const CONNECTOR_SIDE_POINT = {
 class FSegmentPathBuilder {
     handle(request) {
         const { source, sourceSide, target, targetSide } = request;
-        const { points, center } = this.getPathPoints(source, sourceSide, target, targetSide, request.offset);
-        const path = this.buildPath(points, request.radius);
+        const { points, center } = this._getPathPoints(source, sourceSide, target, targetSide, request.offset);
+        const path = this._buildPath(points, request.radius);
         const penultimatePoint = points.length > 1 ? points[points.length - 2] : source;
         const secondPoint = points.length > 1 ? points[1] : target;
-        return { path, connectionCenter: center, penultimatePoint, secondPoint };
+        return {
+            path,
+            connectionCenter: center,
+            penultimatePoint,
+            secondPoint,
+            points,
+        };
     }
-    getPathPoints(source, sourceSide, target, targetSide, offset) {
+    _getPathPoints(source, sourceSide, target, targetSide, offset) {
         const sourceDirection = CONNECTOR_SIDE_POINT[sourceSide];
         const targetDirection = CONNECTOR_SIDE_POINT[targetSide];
-        const sourceGap = { x: source.x + sourceDirection.x * offset, y: source.y + sourceDirection.y * offset };
-        const targetGap = { x: target.x + targetDirection.x * offset, y: target.y + targetDirection.y * offset };
-        const direction = this.getDirection(sourceGap, sourceSide, targetGap);
+        const sourceGap = {
+            x: source.x + sourceDirection.x * offset,
+            y: source.y + sourceDirection.y * offset,
+        };
+        const targetGap = {
+            x: target.x + targetDirection.x * offset,
+            y: target.y + targetDirection.y * offset,
+        };
+        const direction = this._getDirection(sourceGap, sourceSide, targetGap);
         const directionAccessor = direction.x !== 0 ? 'x' : 'y';
         const currentDirection = direction[directionAccessor];
         let points = [];
@@ -1909,10 +1954,12 @@ class FSegmentPathBuilder {
                 if (diff <= offset) {
                     const gapOffset = Math.min(offset - 1, offset - diff);
                     if (sourceDirection[directionAccessor] === currentDirection) {
-                        sourceGapOffset[directionAccessor] = (sourceGap[directionAccessor] > source[directionAccessor] ? -1 : 1) * gapOffset;
+                        sourceGapOffset[directionAccessor] =
+                            (sourceGap[directionAccessor] > source[directionAccessor] ? -1 : 1) * gapOffset;
                     }
                     else {
-                        targetGapOffset[directionAccessor] = (targetGap[directionAccessor] > target[directionAccessor] ? -1 : 1) * gapOffset;
+                        targetGapOffset[directionAccessor] =
+                            (targetGap[directionAccessor] > target[directionAccessor] ? -1 : 1) * gapOffset;
                     }
                 }
             }
@@ -1940,35 +1987,39 @@ class FSegmentPathBuilder {
         const center = new CalculateConnectionCenterHandler().handle(new CalculateConnectionCenterRequest(pathPoints));
         return { points: pathPoints, center };
     }
-    getDirection(source, sourceSide, target) {
+    _getDirection(source, sourceSide, target) {
         if (sourceSide === EFConnectableSide.LEFT || sourceSide === EFConnectableSide.RIGHT) {
-            return source.x < target.x ? PointExtensions.initialize(1, 0) : PointExtensions.initialize(-1, 0);
+            return source.x < target.x
+                ? PointExtensions.initialize(1, 0)
+                : PointExtensions.initialize(-1, 0);
         }
-        return source.y < target.y ? PointExtensions.initialize(0, 1) : PointExtensions.initialize(0, -1);
+        return source.y < target.y
+            ? PointExtensions.initialize(0, 1)
+            : PointExtensions.initialize(0, -1);
     }
-    distance(a, b) {
+    _distance(a, b) {
         return Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
     }
-    buildPath(points, borderRadius) {
+    _buildPath(points, borderRadius) {
         let path = '';
         for (let i = 0; i < points.length; i++) {
             const p = points[i];
             let segment = '';
             if (i > 0 && i < points.length - 1) {
-                segment = this.getBend(points[i - 1], p, points[i + 1], borderRadius);
+                segment = this._getBend(points[i - 1], p, points[i + 1], borderRadius);
             }
             else if (i === points.length - 1) {
-                segment = this.buildLastLineSegment(i, p);
+                segment = this._buildLastLineSegment(i, p);
             }
             else {
-                segment = this.buildMoveOrLineSegment(i, p);
+                segment = this._buildMoveOrLineSegment(i, p);
             }
             path += segment;
         }
         return path;
     }
-    getBend(a, b, c, size) {
-        const bendSize = Math.min(this.distance(a, b) / 2, this.distance(b, c) / 2, size);
+    _getBend(a, b, c, size) {
+        const bendSize = Math.min(this._distance(a, b) / 2, this._distance(b, c) / 2, size);
         const { x, y } = b;
         if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {
             return `L${x} ${y}`;
@@ -1982,10 +2033,10 @@ class FSegmentPathBuilder {
         const yDir = a.y < c.y ? -1 : 1;
         return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
     }
-    buildMoveOrLineSegment(index, point) {
+    _buildMoveOrLineSegment(index, point) {
         return `${index === 0 ? 'M' : 'L'}${point.x} ${point.y}`;
     }
-    buildLastLineSegment(index, point) {
+    _buildLastLineSegment(index, point) {
         return `L${point.x + 0.0002} ${point.y + 0.0002}`;
     }
 }
@@ -1995,7 +2046,13 @@ class FStraightPathBuilder {
         const { source, target } = request;
         const path = `M ${source.x} ${source.y} L ${target.x + 0.0002} ${target.y + 0.0002}`;
         const connectionCenter = new CalculateConnectionCenterHandler().handle(new CalculateConnectionCenterRequest([source, target]));
-        return { path, connectionCenter, penultimatePoint: source, secondPoint: target };
+        return {
+            path,
+            connectionCenter,
+            penultimatePoint: source,
+            secondPoint: target,
+            points: [source, connectionCenter, target],
+        };
     }
 }
 
@@ -2023,47 +2080,40 @@ const F_CONNECTION_IDENTIFIERS = {
 const F_CONNECTION = new InjectionToken('F_CONNECTION');
 
 class FConnectionTextPathDirective {
-    elementReference;
-    base;
-    fBrowser;
+    hostElement = inject((ElementRef)).nativeElement;
+    _base = inject(F_CONNECTION);
+    _browser = inject(BrowserService);
     get linkToConnection() {
-        return F_CONNECTION_IDENTIFIERS.linkToConnection(this.base.fId() + this.base.fOutputId + this.base.fInputId);
-    }
-    get hostElement() {
-        return this.elementReference.nativeElement;
+        return F_CONNECTION_IDENTIFIERS.linkToConnection(this._base.fId() + this._base.fOutputId() + this._base.fInputId());
     }
     symbolWidth = 8;
     fontSize = '12px';
-    constructor(elementReference, base, fBrowser) {
-        this.elementReference = elementReference;
-        this.base = base;
-        this.fBrowser = fBrowser;
-    }
     ngOnInit() {
         this.hostElement.setAttribute('text-anchor', `middle`);
-        this.symbolWidth = this.getSymbolWidth(this.base.fText || '');
+        this.symbolWidth = this._getSymbolWidth(this._base.fText || '');
     }
     getBBox() {
         return this.hostElement.getBBox();
     }
     redraw() {
-        this.hostElement.setAttribute('startOffset', this.base.fTextStartOffset || '50%');
+        this.hostElement.setAttribute('startOffset', this._base.fTextStartOffset || '50%');
     }
-    getFontStyles(element) {
-        const computedStyles = this.fBrowser.window.getComputedStyle(element);
+    _getFontStyles(element) {
+        const computedStyles = this._browser.window.getComputedStyle(element);
         return {
             fontSize: computedStyles.fontSize,
             fontFamily: computedStyles.fontFamily,
         };
     }
-    getSymbolWidth(name) {
+    _getSymbolWidth(name) {
         const text = name || 'connection';
-        const { fontFamily, fontSize } = this.getFontStyles(this.hostElement);
+        const { fontFamily, fontSize } = this._getFontStyles(this.hostElement);
         this.fontSize = fontSize || '12px';
-        const canvas = this.fBrowser.document.createElement('canvas');
+        const canvas = this._browser.document.createElement('canvas');
         let context;
         try {
             context = canvas.getContext('2d');
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
         }
         catch (e) {
             context = null;
@@ -2076,7 +2126,7 @@ class FConnectionTextPathDirective {
         const symbolWidth = metrics.width / text.length;
         return symbolWidth;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionTextPathDirective, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }, { token: i1.BrowserService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionTextPathDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FConnectionTextPathDirective, selector: "textPath[f-connection-text-path]", host: { properties: { "attr.href": "linkToConnection" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionTextPathDirective, decorators: [{
@@ -2087,39 +2137,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[attr.href]': 'linkToConnection',
                     },
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [F_CONNECTION]
-                }] }, { type: i1.BrowserService }] });
+        }] });
 
 const CONNECTION_TEXT = new InjectionToken('CONNECTION_TEXT');
 
 class FConnectionTextComponent {
-    elementReference;
-    base;
+    hostElement = inject((ElementRef)).nativeElement;
+    _base = inject(F_CONNECTION);
+    _textPathDirective = viewChild.required(FConnectionTextPathDirective);
     get textId() {
-        return F_CONNECTION_IDENTIFIERS.textId(this.base.fId() + this.base.fOutputId + this.base.fInputId);
-    }
-    get hostElement() {
-        return this.elementReference.nativeElement;
+        return F_CONNECTION_IDENTIFIERS.textId(this._base.fId() + this._base.fOutputId() + this._base.fInputId());
     }
     get text() {
-        return this.base.fText || '';
-    }
-    textPathDirective;
-    constructor(elementReference, base) {
-        this.elementReference = elementReference;
-        this.base = base;
+        return this._base.fText || '';
     }
     redraw(line) {
-        this.textPathDirective.redraw();
-        const isTextReverse = FConnectionTextComponent.isTextReverse(line);
-        const dyValue = this.calculateDy(this.textPathDirective.fontSize, isTextReverse);
+        this._textPathDirective().redraw();
+        const isTextReverse = FConnectionTextComponent._isTextReverse(line);
+        const dyValue = this._calculateDy(this._textPathDirective().fontSize, isTextReverse);
         this.hostElement.setAttribute('dy', dyValue);
-        const textRect = this.textPathDirective.getBBox();
+        const textRect = this._textPathDirective().getBBox();
         const textRectCenter = [textRect.x + textRect.width / 2, textRect.y + textRect.height / 2];
         this.hostElement.setAttribute('transform', isTextReverse ? `rotate(180, ${textRectCenter})` : '');
-        const startOffset = FConnectionTextComponent.getTextStartOffset(line, this.base.fText || '', this.textPathDirective.symbolWidth);
+        const startOffset = FConnectionTextComponent._getTextStartOffset(line, this._base.fText || '', this._textPathDirective().symbolWidth);
         if (startOffset < 0) {
             this.hostElement.style.display = 'none';
         }
@@ -2127,34 +2167,28 @@ class FConnectionTextComponent {
             this.hostElement.style.display = 'unset';
         }
     }
-    calculateDy(fontSize, isTextReverse) {
+    _calculateDy(fontSize, isTextReverse) {
         const fontSizeNumber = parseFloat(fontSize);
         const dyValue = isTextReverse ? fontSizeNumber * 1.5 : fontSizeNumber * -0.8;
         return dyValue.toString();
     }
-    static isTextReverse(line) {
+    static _isTextReverse(line) {
         return line.point1.x > line.point2.x;
     }
-    static getTextStartOffset(line, name, symbolWidth) {
+    static _getTextStartOffset(line, name, symbolWidth) {
         const vectorLength = PointExtensions.hypotenuse(line.point1, line.point2);
         return vectorLength / 2 - ((name || '').length * symbolWidth) / 2;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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.2.13", 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.2.13", ngImport: i0, type: FConnectionTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", 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, isSignal: 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: "18.2.13", ngImport: i0, type: FConnectionTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: "text[f-connection-text]", changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: "f-component f-connection-text",
+            args: [{ selector: 'text[f-connection-text]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'f-component f-connection-text',
                         '[attr.id]': 'textId',
                     }, providers: [{ provide: CONNECTION_TEXT, useExisting: FConnectionTextComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:textPath f-connection-text-path>\n        {{ text }}\n    </svg:textPath>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [F_CONNECTION]
-                }] }], propDecorators: { textPathDirective: [{
-                type: ViewChild,
-                args: [FConnectionTextPathDirective, { static: true }]
-            }] } });
+        }] });
 
 const F_CSS_CLASS = {
     DRAG_AND_DROP: {
@@ -2248,36 +2282,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 const CONNECTION_GRADIENT = new InjectionToken('CONNECTION_GRADIENT');
 
 class FConnectionGradientComponent {
-    elementReference;
-    base;
+    hostElement = inject((ElementRef)).nativeElement;
+    _base = inject(F_CONNECTION);
     get gradientId() {
-        return F_CONNECTION_IDENTIFIERS.gradientId(this.base.fId() + this.base.fOutputId + this.base.fInputId);
-    }
-    get hostElement() {
-        return this.elementReference.nativeElement;
+        return F_CONNECTION_IDENTIFIERS.gradientId(this._base.fId() + this._base.fOutputId() + this._base.fInputId());
     }
     get stop1Element() {
-        return this.elementReference.nativeElement.children.item(0);
+        return this.hostElement.children.item(0);
     }
     get stop2Element() {
-        return this.elementReference.nativeElement.children.item(1);
-    }
-    constructor(elementReference, base) {
-        this.elementReference = elementReference;
-        this.base = base;
+        return this.hostElement.children.item(1);
     }
     initialize() {
         this.stop1Element.setAttribute('offset', '0%');
         this.stop2Element.setAttribute('offset', '100%');
     }
-    updateGradient() {
-        this.setFromColor(this.base.fStartColor());
-        this.setToColor(this.base.fEndColor());
+    _updateGradient() {
+        this._setFromColor(this._base.fStartColor());
+        this._setToColor(this._base.fEndColor());
     }
-    setFromColor(color) {
+    _setFromColor(color) {
         this.stop1Element.setAttribute('stop-color', color || 'transparent');
     }
-    setToColor(color) {
+    _setToColor(color) {
         this.stop2Element.setAttribute('stop-color', color || 'transparent');
     }
     redraw(line) {
@@ -2290,21 +2317,18 @@ class FConnectionGradientComponent {
         const to = new Point(0.5 + (0.5 * x) / distance, 0.5 + (0.5 * y) / distance);
         this.hostElement.setAttribute('x2', to.x.toString());
         this.hostElement.setAttribute('y2', to.y.toString());
-        this.updateGradient();
+        this._updateGradient();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionGradientComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionGradientComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: FConnectionGradientComponent, decorators: [{
             type: Component,
-            args: [{ selector: "linearGradient[fConnectionGradient]", changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: "f-component f-connection-gradient",
+            args: [{ selector: 'linearGradient[fConnectionGradient]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'f-component f-connection-gradient',
                         '[attr.id]': 'gradientId',
                     }, providers: [{ provide: CONNECTION_GRADIENT, useExisting: FConnectionGradientComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <svg:stop/>\n    <svg:stop/>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [F_CONNECTION]
-                }] }] });
+        }] });
 
 const CONNECTION_PATH = new InjectionToken('CONNECTION_PATH');
 
@@ -2322,93 +2346,62 @@ function getMarkerSelectedEndId(fConnectionId) {
 }
 
 class FConnectionPathComponent {
-    elementReference;
-    base;
+    hostElement = inject((ElementRef)).nativeElement;
+    _base = inject(F_CONNECTION);
     get fPathId() {
-        return this.base.fId();
+        return this._base.fId();
     }
     get linkToGradient() {
-        return F_CONNECTION_IDENTIFIERS.linkToGradient(this.base.fId() + this.base.fOutputId + this.base.fInputId);
+        return F_CONNECTION_IDENTIFIERS.linkToGradient(this._base.fId() + this._base.fOutputId() + this._base.fInputId());
     }
     get attrConnectionId() {
-        return F_CONNECTION_IDENTIFIERS.connectionId(this.base.fId() + this.base.fOutputId + this.base.fInputId);
-    }
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    constructor(elementReference, base) {
-        this.elementReference = elementReference;
-        this.base = base;
+        return F_CONNECTION_IDENTIFIERS.connectionId(this._base.fId() + this._base.fOutputId() + this._base.fInputId());
     }
     initialize() {
         this.deselect();
     }
     setPath(path) {
-        this.hostElement.setAttribute("d", `${path}`);
+        this.hostElement.setAttribute('d', `${path}`);
     }
     select() {
-        this.hostElement.setAttribute('marker-start', `url(#${getMarkerSelectedStartId(this.base.fId())})`);
-        this.hostElement.setAttribute('marker-end', `url(#${getMarkerSelectedEndId(this.base.fId())})`);
+        this.hostElement.setAttribute('marker-start', `url(#${getMarkerSelectedStartId(this._base.fId())})`);
+        this.hostElement.setAttribute('marker-end', `url(#${getMarkerSelectedEndId(this._base.fId())})`);
     }
     deselect() {
-        this.hostElement.setAttribute('marker-start', `url(#${getMarkerStartId(this.base.fId())})`);
-        this.hostElement.setAttribute('marker-end', `url(#${getMarkerEndId(this.base.fId())})`);
+        this.hostElement.setAttribute('marker-start', `url(#${getMarkerStartId(this._base.fId())})`);
+        this.hostElement.setAttribute('marker-end', `url(#${getMarkerEndId(this._base.fId())})`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionPathComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionPathComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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, styles: [":host{fill:none;pointer-events:stroke}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionPathComponent, decorators: [{
             type: Component,
-            args: [{ selector: "path[f-connection-path]", template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: "f-component f-connection-path",
+            args: [{ selector: 'path[f-connection-path]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'f-component f-connection-path',
                         '[attr.id]': 'attrConnectionId',
                         '[attr.data-f-path-id]': 'fPathId',
                         '[attr.stroke]': 'linkToGradient',
                     }, providers: [{ provide: CONNECTION_PATH, useExisting: FConnectionPathComponent }], styles: [":host{fill:none;pointer-events:stroke}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [F_CONNECTION]
-                }] }] });
+        }] });
 
 class FConnectionSelectionComponent {
-    elementReference;
-    base;
+    hostElement = inject((ElementRef)).nativeElement;
+    _base = inject(F_CONNECTION);
     get connectionForSelectionId() {
-        return F_CONNECTION_IDENTIFIERS.connectionForSelectionId(this.base.fId() + this.base.fOutputId + this.base.fInputId);
-    }
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    constructor(elementReference, base) {
-        this.elementReference = elementReference;
-        this.base = base;
+        return F_CONNECTION_IDENTIFIERS.connectionForSelectionId(this._base.fId() + this._base.fOutputId() + this._base.fInputId());
     }
     setPath(path) {
-        this.hostElement.setAttribute("d", `${path}`);
+        this.hostElement.setAttribute('d', `${path}`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionSelectionComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FConnectionSelectionComponent, selector: "path[fConnectionSelection]", host: { properties: { "attr.id": "connectionForSelectionId" }, classAttribute: "f-component f-connection-selection" }, ngImport: i0, template: '', isInline: true, styles: [":host{fill:none;pointer-events:stroke}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "path[fConnectionSelection]", template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: "f-component f-connection-selection",
+            args: [{ selector: 'path[fConnectionSelection]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'f-component f-connection-selection',
                         '[attr.id]': 'connectionForSelectionId',
                     }, styles: [":host{fill:none;pointer-events:stroke}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [F_CONNECTION]
-                }] }] });
-
-class FConnectionCenterDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FConnectionCenterDirective, selector: "[fConnectionCenter]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionCenterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[fConnectionCenter]",
-                }]
         }] });
 
 const F_CONNECTION_BUILDERS = new InjectionToken('F_CONNECTION_BUILDERS');
@@ -2443,6 +2436,431 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     args: [F_CONNECTION_BUILDERS]
                 }] }] });
 
+let warnedFConnectionCenter = false;
+/** @deprecated '[fConnectionCenter] is deprecated and will be removed in v18.0.0. Use FConnectionContent directive instead.' */
+class FConnectionCenterDirective {
+    /**
+     * @deprecated '[fConnectionCenter] is deprecated and will be removed in v18.0.0. Use FConnectionContent directive instead.'
+     */
+    fConnectionCenter = input(true, {
+        alias: 'fConnectionCenter',
+        transform: (v) => {
+            // Превращаем presence-атрибут в boolean
+            const val = booleanAttribute(v);
+            if (!warnedFConnectionCenter && isDevMode()) {
+                warnedFConnectionCenter = true;
+                console.warn('[fConnectionCenter] is deprecated and will be removed in v18.0.0. Use [FConnectionContent] instead.');
+            }
+            return val;
+        },
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FConnectionCenterDirective, selector: "[fConnectionCenter]", inputs: { fConnectionCenter: { classPropertyName: "fConnectionCenter", publicName: "fConnectionCenter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionCenterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fConnectionCenter]',
+                }]
+        }] });
+
+/**
+ * Immutable polyline geometry with precomputed cumulative lengths and segment tangents.
+ * Keep this class focused on geometry only; sampling/traversal lives in PolylineSampler.
+ */
+class Polyline {
+    /** Cleaned points (with consecutive duplicates removed). */
+    points;
+    /** Cumulative length from start to each vertex. Same length as `points`. */
+    cumulativeLengths;
+    /** Unit tangent per segment `i` for segment [i -> i+1]. Length = points.length - 1. */
+    segmentTangents;
+    /** Total length of the polyline (>= 1 for the degenerate fallback). */
+    totalLength;
+    /**
+     * Construct a polyline from raw points.
+     * Consecutive duplicate points are removed.
+     * If less than 2 points remain, it falls back to a unit horizontal segment [0,0] → [1,0].
+     */
+    constructor(points) {
+        const cleaned = Polyline._removeConsecutiveDuplicates(points);
+        if (cleaned.length < 2) {
+            // Fallback to a unit segment to avoid zero-length edge cases.
+            this.points = [{ x: 0, y: 0 }, { x: 1, y: 0 }];
+            this.cumulativeLengths = [0, 1];
+            this.segmentTangents = [{ x: 1, y: 0 }];
+            this.totalLength = 1;
+            return;
+        }
+        this.points = cleaned;
+        const vertexCount = this.points.length;
+        const segmentCount = vertexCount - 1;
+        const cumulative = new Array(vertexCount).fill(0);
+        const tangents = new Array(segmentCount);
+        let accumulated = 0;
+        for (let i = 0; i < segmentCount; i++) {
+            const dx = this.points[i + 1].x - this.points[i].x;
+            const dy = this.points[i + 1].y - this.points[i].y;
+            const length = Math.hypot(dx, dy);
+            const ux = length ? dx / length : 1;
+            const uy = length ? dy / length : 0;
+            tangents[i] = { x: ux, y: uy };
+            accumulated += length;
+            cumulative[i + 1] = accumulated;
+        }
+        this.cumulativeLengths = cumulative;
+        this.segmentTangents = tangents;
+        this.totalLength = accumulated || 1;
+    }
+    /**
+     * Create a polyline by cloning points (defensive copy).
+     * @param points Raw input points; they will be copied and cleaned.
+     */
+    static from(points) {
+        return new Polyline(points.map(p => ({ x: p.x, y: p.y })));
+    }
+    /** Remove consecutive duplicate points. */
+    static _removeConsecutiveDuplicates(points) {
+        const result = [];
+        for (const p of points) {
+            const last = result[result.length - 1];
+            if (!last || last.x !== p.x || last.y !== p.y) {
+                result.push({ x: p.x, y: p.y });
+            }
+        }
+        return result;
+    }
+}
+
+/**
+ * Provides sampling (interpolation) along a {@link Polyline}.
+ * Separates traversal logic from pure geometry stored in {@link Polyline}.
+ */
+class PolylineSampler {
+    _polyline;
+    /**
+     * @param points Initial points to build the underlying polyline.
+     *               You can later call {@link updatePoints} to rebuild.
+     */
+    constructor(points = []) {
+        this._polyline = new Polyline(points);
+    }
+    /**
+     * Rebuild the underlying polyline from new points.
+     * @returns Total length of the rebuilt polyline.
+     */
+    updatePoints(points) {
+        this._polyline = new Polyline(points);
+        return this._polyline.totalLength;
+    }
+    /**
+     * Backward-compatible alias for older API naming.
+     * @returns Total length of the rebuilt polyline.
+     */
+    calculateTotalLength(points) {
+        return this.updatePoints(points);
+    }
+    /** Total length of the current polyline. */
+    get totalLength() {
+        return this._polyline.totalLength;
+    }
+    /**
+     * Sample a point by normalized progress along the whole length.
+     *
+     * - `progress = 0` → start vertex
+     * - `progress = 1` → end vertex
+     *
+     * Uses a small edge threshold (0.5 units) to snap near-start/near-end queries to exact vertices,
+     * mirroring the behavior in the original implementation.
+     *
+     * @param progress Normalized value in [0..1]. Values are clamped to this range.
+     * @returns Interpolated point, segment tangent, and whether it was clamped to an edge.
+     */
+    getPointAtProgress(progress) {
+        const { points, cumulativeLengths, segmentTangents, totalLength } = this._polyline;
+        const clamped = PolylineSampler._clamp(progress, 0, 1);
+        const target = clamped * totalLength;
+        const edgeThreshold = 0.5;
+        if (target <= edgeThreshold) {
+            return {
+                point: points[0],
+                tangent: segmentTangents[0] ?? { x: 1, y: 0 },
+                atEdge: true,
+            };
+        }
+        if (totalLength - target <= edgeThreshold) {
+            const last = points.length - 1;
+            return {
+                point: points[last],
+                tangent: segmentTangents[last - 1] ?? { x: 1, y: 0 },
+                atEdge: true,
+            };
+        }
+        const rightIndex = PolylineSampler._findRightIndex(cumulativeLengths, target);
+        const i = Math.max(1, rightIndex);
+        const leftLen = cumulativeLengths[i - 1];
+        const rightLen = cumulativeLengths[i];
+        const t = PolylineSampler._safeRatio(target - leftLen, rightLen - leftLen);
+        const a = points[i - 1];
+        const b = points[i];
+        const point = {
+            x: PolylineSampler._lerp(a.x, b.x, t),
+            y: PolylineSampler._lerp(a.y, b.y, t),
+        };
+        const tangent = segmentTangents[i - 1] ?? { x: 1, y: 0 };
+        return { point, tangent, atEdge: false };
+    }
+    /**
+     * Backward-compatible alias.
+     * Equivalent to {@link getPointAtProgress}.
+     */
+    getPointAtLength(progress) {
+        return this.getPointAtProgress(progress);
+    }
+    /**
+     * Sample a point by absolute distance from the start (in the same units as your points).
+     * This is a convenience wrapper over {@link getPointAtProgress}.
+     *
+     * @param distance Distance from 0 to {@link totalLength}. Values outside are clamped.
+     * @returns Interpolated point, segment tangent, and whether it was clamped to an edge.
+     */
+    getPointAtDistance(distance) {
+        const progress = this._polyline.totalLength ? distance / this._polyline.totalLength : 0;
+        return this.getPointAtProgress(progress);
+    }
+    // =============== Internal utilities ===============
+    /** Binary-search the first index where cumulativeLengths[index] >= target. */
+    static _findRightIndex(cumulativeLengths, target) {
+        let lo = 0;
+        let hi = cumulativeLengths.length - 1;
+        while (lo < hi) {
+            const mid = (lo + hi) >> 1;
+            if (cumulativeLengths[mid] < target)
+                lo = mid + 1;
+            else
+                hi = mid;
+        }
+        return lo;
+    }
+    /** Linear interpolation between `a` and `b`. */
+    static _lerp(a, b, t) {
+        return a + (b - a) * t;
+    }
+    /** Clamp `value` into [min, max]. */
+    static _clamp(value, min, max) {
+        return value < min ? min : value > max ? max : value;
+    }
+    /** Safe ratio `num / den` with tiny-denominator guard. */
+    static _safeRatio(num, den) {
+        const d = Math.abs(den) < 1e-6 ? 1e-6 : den;
+        return num / d;
+    }
+}
+/* ============================
+   Example
+===============================
+const sampler = new PolylineSampler([
+  { x: 0, y: 0 },
+  { x: 10, y: 0 },
+  { x: 10, y: 10 },
+]);
+
+console.log('Total length:', sampler.totalLength); // -> 20
+
+const s1 = sampler.getPointAtProgress(0.25);
+console.log(s1.point, s1.tangent, s1.atEdge);
+
+const s2 = sampler.getPointAtDistance(15); // same as progress 0.75
+console.log(s2.point, s2.tangent, s2.atEdge);
+*/
+
+var PolylineContentAlign;
+(function (PolylineContentAlign) {
+    PolylineContentAlign["NONE"] = "none";
+    PolylineContentAlign["ALONG"] = "along";
+})(PolylineContentAlign || (PolylineContentAlign = {}));
+
+/**
+ * Encapsulates placement logic for a single content item along the path.
+ */
+class PolylineContentPlace {
+    compute(sampler, content) {
+        const progress = this._clamp01(content.position());
+        const { point, tangent } = sampler.getPointAtLength(progress);
+        // Left-hand normal
+        const normal = { x: -tangent.y, y: tangent.x };
+        // Apply lateral offset
+        const lateral = content.offset() ?? 0;
+        const x = point.x + normal.x * lateral;
+        const y = point.y + normal.y * lateral;
+        // Edge guard
+        const projectedSize = this._sizeAlongDirection(content.hostElement, tangent);
+        const halfExtent = projectedSize * 0.5;
+        const distanceFromStart = progress * sampler.totalLength;
+        const distanceFromEnd = sampler.totalLength - distanceFromStart;
+        const position = this._applyEdgeGuard(x, y, tangent, distanceFromStart, distanceFromEnd, halfExtent);
+        const rotationDeg = this._calculateContentRotation(content.align(), tangent);
+        return { position, rotationDeg };
+    }
+    _clamp01(v) {
+        return v <= 0 ? 0 : v >= 1 ? 1 : v;
+    }
+    _applyEdgeGuard(x, y, tangent, distanceFromStart, distanceFromEnd, halfExtent) {
+        if (distanceFromStart <= halfExtent) {
+            const push = halfExtent - distanceFromStart;
+            return { x: x + tangent.x * push, y: y + tangent.y * push };
+        }
+        if (distanceFromEnd <= halfExtent) {
+            const push = halfExtent - distanceFromEnd;
+            return { x: x - tangent.x * push, y: y - tangent.y * push };
+        }
+        return { x, y };
+    }
+    _sizeAlongDirection(element, dir) {
+        const rect = element.getBoundingClientRect();
+        return Math.abs(dir.x) * rect.width + Math.abs(dir.y) * rect.height;
+    }
+    _normalize180(angleDeg) {
+        let a = (angleDeg + 180) % 360;
+        if (a < 0)
+            a += 360;
+        return a - 180;
+    }
+    _keepUpright(angleDeg) {
+        let a = this._normalize180(angleDeg);
+        if (a > 90)
+            a -= 180;
+        else if (a < -90)
+            a += 180;
+        return a;
+    }
+    _calculateContentRotation(align, tangent) {
+        let result = 0;
+        if (align === PolylineContentAlign.ALONG) {
+            result = (Math.atan2(tangent.y, tangent.x) * 180) / Math.PI;
+            result = this._keepUpright(result);
+        }
+        return result;
+    }
+}
+
+/**
+ * Engine that orchestrates positioning and orientation of all
+ * connection contents along a computed path.
+ */
+class ConnectionContentLayoutEngine {
+    _placement;
+    constructor(_placement = new PolylineContentPlace()) {
+        this._placement = _placement;
+    }
+    layout(line, builderResult, contents) {
+        const sampler = new PolylineSampler(builderResult.points ?? calculatePathPointsIfEmpty(line, builderResult));
+        const total = sampler.totalLength;
+        for (const item of contents) {
+            const { position, rotationDeg } = this._placement.compute(sampler, item);
+            const style = this._createTransformString(position, rotationDeg);
+            item.hostElement.setAttribute('style', style);
+        }
+        return total;
+    }
+    _createTransformString(position, rotationDeg) {
+        return `position: fixed; pointer-events: all; transform: translate(-50%, -50%) rotate(${rotationDeg}deg); left: ${position.x}px; top: ${position.y}px`;
+    }
+}
+function calculatePathPointsIfEmpty({ point1, point2 }, { secondPoint, connectionCenter, penultimatePoint }) {
+    return [point1, secondPoint || point1, connectionCenter, penultimatePoint || point2, point2];
+}
+
+/**
+ * Directive for placing custom user content (text, icons, buttons, etc.)
+ * along a connection line.
+ *
+ * It allows you to specify the position along the connection,
+ * shift the content sideways (perpendicular to the path),
+ * apply a margin near the edges, and control orientation.
+ *
+ * ### Usage examples
+ *
+ * ```html
+ * <!-- Text centered on the connection -->
+ * <div fConnectionContent [position]="0.5">
+ *   Hello
+ * </div>
+ *
+ * <!-- Button near the start of the connection, shifted upward by 12px -->
+ * <button fConnectionContent [position]="0.2" [offset]="-12">
+ *   +
+ * </button>
+ *
+ * <!-- Icon at the end of the connection, with 6px margin and rotated along the path -->
+ * <span fConnectionContent [position]="1" [margin]="6" align="along">
+ *   ⮕
+ * </span>
+ * ```
+ */
+class FConnectionContent {
+    _mediator = inject(FMediator);
+    _injector = inject(Injector);
+    /**
+     * The host DOM element to which the directive is applied.
+     * Used internally for positioning calculations.
+     */
+    hostElement = inject((ElementRef)).nativeElement;
+    /**
+     * Position along the connection.
+     *
+     * A normalized value in the range `0..1`:
+     * - `0` — at the start of the connection,
+     * - `1` — at the end of the connection,
+     * - `0.5` — at the middle of the connection (default).
+     */
+    position = input(0.5, {
+        transform: (v) => (v < 0 ? 0 : v > 1 ? 1 : v),
+    });
+    /**
+     * Perpendicular offset from the connection line (in pixels).
+     *
+     * - Positive values shift the element to the right
+     *   relative to the line direction.
+     * - Negative values shift it to the left.
+     * - Default: `0` (no shift).
+     */
+    offset = input(0);
+    /**
+     * Controls the orientation (rotation) of the content relative to the connection.
+     *
+     * Possible values:
+     * - `'none'` — no rotation (default).
+     * - `'along'` — aligned along the path (tangent).
+     */
+    align = input(PolylineContentAlign.NONE, {
+        transform: (x) => castToEnum(x, 'align', PolylineContentAlign),
+    });
+    ngOnInit() {
+        this._listenChanges();
+    }
+    _listenChanges() {
+        effect(() => {
+            this.offset();
+            this.position();
+            this.align();
+            untracked(() => this._mediator.execute(new NotifyDataChangedRequest()));
+        }, { injector: this._injector });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FConnectionContent, isStandalone: true, selector: "[fConnectionContent]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "f-connection-content" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fConnectionContent]',
+                    standalone: true,
+                    host: {
+                        'class': 'f-connection-content',
+                    },
+                }]
+        }] });
+
 const MIXIN_BASE = mixinChangeSelection(mixinChangeVisibility(class {
     hostElement;
     constructor(hostElement) {
@@ -2450,7 +2868,7 @@ const MIXIN_BASE = mixinChangeSelection(mixinChangeVisibility(class {
     }
 }));
 class FConnectionBase extends MIXIN_BASE {
-    cFactory;
+    _connectionFactory = inject(FConnectionFactory);
     fStartColor = input('black');
     fEndColor = input('black');
     path = '';
@@ -2466,12 +2884,16 @@ class FConnectionBase extends MIXIN_BASE {
     fSelection = viewChild.required(FConnectionSelectionComponent);
     fTextComponent = viewChild.required(CONNECTION_TEXT);
     fConnectionCenter = viewChild('fConnectionCenter');
-    fConnectionCenters = contentChildren(FConnectionCenterDirective, { descendants: true });
-    penultimatePoint = PointExtensions.initialize();
-    secondPoint = PointExtensions.initialize();
-    constructor(elementReference, cFactory) {
-        super(elementReference.nativeElement);
-        this.cFactory = cFactory;
+    fConnectionCenters = contentChildren(FConnectionCenterDirective, {
+        descendants: true,
+    });
+    fConnectionContents = contentChildren(FConnectionContent, {
+        descendants: true,
+    });
+    _penultimatePoint = PointExtensions.initialize();
+    _secondPoint = PointExtensions.initialize();
+    constructor() {
+        super(inject((ElementRef)).nativeElement);
     }
     initialize() {
         this.fPath().initialize();
@@ -2483,22 +2905,26 @@ class FConnectionBase extends MIXIN_BASE {
     }
     setLine({ point1, point2 }, sourceSide, targetSide) {
         this.line = LineExtensions.initialize(point1, point2);
-        const pathResult = this.getPathResult(point1, sourceSide, point2, targetSide);
+        const pathResult = this._getPathResult(point1, sourceSide, point2, targetSide);
         this.path = pathResult.path;
-        this.penultimatePoint = pathResult.penultimatePoint || point1;
-        this.secondPoint = pathResult.secondPoint || point2;
-        this.fConnectionCenter()?.nativeElement?.setAttribute('style', this.getTransform(pathResult.connectionCenter));
+        this._penultimatePoint = pathResult.penultimatePoint || point1;
+        this._secondPoint = pathResult.secondPoint || point2;
+        new ConnectionContentLayoutEngine().layout(this.line, pathResult, this._contents());
+        this.fConnectionCenter()?.nativeElement?.setAttribute('style', this._createTransformString(pathResult.connectionCenter));
+    }
+    _contents() {
+        return Array.from(this.fConnectionContents()?.values() ?? []);
     }
-    getPathResult(source, sourceSide, target, targetSide) {
+    _getPathResult(source, sourceSide, target, targetSide) {
         const radius = this.fRadius > 0 ? this.fRadius : 0;
         const offset = this.fOffset > 0 ? this.fOffset : 1;
-        return this.cFactory.handle({
+        return this._connectionFactory.handle({
             type: this.fType,
             payload: { source, sourceSide, target, targetSide, radius, offset },
         });
     }
-    getTransform(position) {
-        return `position: absolute; pointerEvents: all; transform: translate(-50%, -50%); left: ${position.x}px; top: ${position.y}px`;
+    _createTransformString(position, rotate = 0) {
+        return `position: absolute; pointer-events: all; transform: translate(-50%, -50%) rotate(${rotate}deg); left: ${position.x}px; top: ${position.y}px`;
     }
     markChildrenAsSelected() {
         this.fPath().select();
@@ -2510,16 +2936,16 @@ class FConnectionBase extends MIXIN_BASE {
         this.fPath().setPath(this.path);
         this.fSelection().setPath(this.path);
         this.fGradient().redraw(this.line);
-        this.fDragHandleEnd().redraw(this.penultimatePoint, this.line.point2);
-        this.fDragHandleStart()?.redraw(this.secondPoint, this.line.point1);
+        this.fDragHandleEnd().redraw(this._penultimatePoint, this.line.point2);
+        this.fDragHandleStart()?.redraw(this._secondPoint, this.line.point1);
         this.fTextComponent().redraw(this.line);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionBase, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: FConnectionBase, inputs: { fStartColor: { classPropertyName: "fStartColor", publicName: "fStartColor", isSignal: true, isRequired: false, transformFunction: null }, fEndColor: { classPropertyName: "fEndColor", publicName: "fEndColor", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, isSignal: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, isSignal: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, isSignal: true }, { propertyName: "fDragHandleStart", first: true, predicate: FConnectionDragHandleStartComponent, descendants: true, isSignal: true }, { propertyName: "fDragHandleEnd", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, isSignal: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, isSignal: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, isSignal: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: FConnectionBase, inputs: { fStartColor: { classPropertyName: "fStartColor", publicName: "fStartColor", isSignal: true, isRequired: false, transformFunction: null }, fEndColor: { classPropertyName: "fEndColor", publicName: "fEndColor", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "fConnectionCenters", predicate: FConnectionCenterDirective, descendants: true, isSignal: true }, { propertyName: "fConnectionContents", predicate: FConnectionContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fDefs", first: true, predicate: ["defs"], descendants: true, isSignal: true }, { propertyName: "fPath", first: true, predicate: CONNECTION_PATH, descendants: true, isSignal: true }, { propertyName: "fGradient", first: true, predicate: CONNECTION_GRADIENT, descendants: true, isSignal: true }, { propertyName: "fDragHandleStart", first: true, predicate: FConnectionDragHandleStartComponent, descendants: true, isSignal: true }, { propertyName: "fDragHandleEnd", first: true, predicate: FConnectionDragHandleEndComponent, descendants: true, isSignal: true }, { propertyName: "fSelection", first: true, predicate: FConnectionSelectionComponent, descendants: true, isSignal: true }, { propertyName: "fTextComponent", first: true, predicate: CONNECTION_TEXT, descendants: true, isSignal: true }, { propertyName: "fConnectionCenter", first: true, predicate: ["fConnectionCenter"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FConnectionFactory }] });
+        }], ctorParameters: () => [] });
 
 var EFConnectionBehavior;
 (function (EFConnectionBehavior) {
@@ -2540,8 +2966,8 @@ class FConnectionForCreateComponent extends FConnectionBase {
     fId = signal(`f-connection-for-create-${uniqueId$6++}`);
     fText = '';
     fTextStartOffset = '';
-    fOutputId;
-    fInputId;
+    fOutputId = signal('');
+    fInputId = signal('');
     fRadius = 8;
     fOffset = 12;
     fBehavior = EFConnectionBehavior.FIXED;
@@ -2550,9 +2976,6 @@ class FConnectionForCreateComponent extends FConnectionBase {
         return this.fPath().hostElement;
     }
     _mediator = inject(FMediator);
-    constructor(elementReference, fConnectionFactory) {
-        super(elementReference, fConnectionFactory);
-    }
     ngOnInit() {
         this._mediator.execute(new AddConnectionForCreateToStoreRequest(this));
     }
@@ -2565,15 +2988,15 @@ class FConnectionForCreateComponent extends FConnectionBase {
     ngOnDestroy() {
         this._mediator.execute(new RemoveConnectionForCreateFromStoreRequest());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionForCreateComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], usesInheritance: true, usesOnChanges: 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-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\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: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { 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.2.13", ngImport: i0, type: FConnectionForCreateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: { fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-connection-for-create" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], usesInheritance: true, usesOnChanges: 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 [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\n@if (fConnectionContents().length) {\n  <ng-content select=\"[fConnectionContent]\"></ng-content>\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center,:host .f-connection-content{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { 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: "18.2.13", ngImport: i0, type: FConnectionForCreateComponent, decorators: [{
             type: Component,
-            args: [{ selector: "f-connection-for-create", changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: "f-component f-connection f-connection-for-create",
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path\n            [attr.d]=\"path\">\n      </path>\n      <circle f-connection-drag-handle-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\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 }], propDecorators: { fRadius: [{
+            args: [{ selector: 'f-connection-for-create', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'f-component f-connection f-connection-for-create',
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionForCreateComponent }], template: "<svg xmlns=\"http://www.w3.org/2000/svg\">\n  <defs #defs></defs>\n  <g class=\"f-connection-group\">\n    <linearGradient fConnectionGradient></linearGradient>\n    <path fConnectionSelection [attr.d]=\"path\"></path>\n    <g>\n      <path f-connection-path [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\n@if (fConnectionContents().length) {\n  <ng-content select=\"[fConnectionContent]\"></ng-content>\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center,:host .f-connection-content{pointer-events:all}\n"] }]
+        }], propDecorators: { fRadius: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
             }], fOffset: [{
@@ -2589,10 +3012,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 let uniqueId$5 = 0;
 class FConnectionComponent extends FConnectionBase {
     fId = input(`f-connection-${uniqueId$5++}`, { alias: 'fConnectionId' });
+    /** @deprecated [fText] is deprecated and will be removed in v18.0.0. Use FConnectionContent directive instead. */
     fText = '';
+    /** @deprecated [fTextStartOffset] is deprecated and will be removed in v18.0.0. Use FConnectionContent directive instead. */
     fTextStartOffset = '';
-    fOutputId = '';
-    fInputId = '';
+    fOutputId = input('', {
+        transform: (value) => stringAttribute(value) || '',
+    });
+    fInputId = input('', {
+        transform: (value) => stringAttribute(value) || '',
+    });
     fRadius = 8;
     fOffset = 12;
     fBehavior = EFConnectionBehavior.FIXED;
@@ -2607,9 +3036,6 @@ class FConnectionComponent extends FConnectionBase {
         return this.fPath().hostElement;
     }
     _mediator = inject(FMediator);
-    constructor(elementReference, fConnectionFactory) {
-        super(elementReference, fConnectionFactory);
-    }
     ngOnInit() {
         this._mediator.execute(new AddConnectionToStoreRequest(this));
     }
@@ -2619,25 +3045,21 @@ class FConnectionComponent extends FConnectionBase {
     ngOnDestroy() {
         this._mediator.execute(new RemoveConnectionFromStoreRequest(this));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FConnectionComponent, selector: "f-connection", inputs: { fId: { classPropertyName: "fId", publicName: "fConnectionId", isSignal: true, isRequired: false, transformFunction: null }, fText: { classPropertyName: "fText", publicName: "fText", isSignal: false, isRequired: false, transformFunction: null }, fTextStartOffset: { classPropertyName: "fTextStartOffset", publicName: "fTextStartOffset", isSignal: false, isRequired: false, transformFunction: null }, fOutputId: { classPropertyName: "fOutputId", publicName: "fOutputId", isSignal: false, isRequired: false, transformFunction: null }, fInputId: { classPropertyName: "fInputId", publicName: "fInputId", isSignal: false, isRequired: false, transformFunction: null }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null }, fSelectionDisabled: { classPropertyName: "fSelectionDisabled", publicName: "fSelectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, fReassignableStart: { classPropertyName: "fReassignableStart", publicName: "fReassignableStart", isSignal: true, isRequired: false, transformFunction: null }, fDraggingDisabled: { classPropertyName: "fDraggingDisabled", publicName: "fReassignDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "fId()", "class.f-connection-selection-disabled": "fSelectionDisabled()", "class.f-connection-reassign-disabled": "fDraggingDisabled()" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], exportAs: ["fComponent"], usesInheritance: true, usesOnChanges: 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      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\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: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { 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.2.13", ngImport: i0, type: FConnectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FConnectionComponent, selector: "f-connection", inputs: { fId: { classPropertyName: "fId", publicName: "fConnectionId", isSignal: true, isRequired: false, transformFunction: null }, fText: { classPropertyName: "fText", publicName: "fText", isSignal: false, isRequired: false, transformFunction: null }, fTextStartOffset: { classPropertyName: "fTextStartOffset", publicName: "fTextStartOffset", isSignal: false, isRequired: false, transformFunction: null }, fOutputId: { classPropertyName: "fOutputId", publicName: "fOutputId", isSignal: true, isRequired: false, transformFunction: null }, fInputId: { classPropertyName: "fInputId", publicName: "fInputId", isSignal: true, isRequired: false, transformFunction: null }, fRadius: { classPropertyName: "fRadius", publicName: "fRadius", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fOffset: { classPropertyName: "fOffset", publicName: "fOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, fBehavior: { classPropertyName: "fBehavior", publicName: "fBehavior", isSignal: false, isRequired: false, transformFunction: (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior) }, fType: { classPropertyName: "fType", publicName: "fType", isSignal: false, isRequired: false, transformFunction: null }, fSelectionDisabled: { classPropertyName: "fSelectionDisabled", publicName: "fSelectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, fReassignableStart: { classPropertyName: "fReassignableStart", publicName: "fReassignableStart", isSignal: true, isRequired: false, transformFunction: null }, fDraggingDisabled: { classPropertyName: "fDraggingDisabled", publicName: "fReassignDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "fId()", "class.f-connection-selection-disabled": "fSelectionDisabled()", "class.f-connection-reassign-disabled": "fDraggingDisabled()" }, classAttribute: "f-component f-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], exportAs: ["fComponent"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  style=\"overflow: visible; display: block; vertical-align: middle;\"\n>\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      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\n@if (fConnectionContents().length) {\n  <ng-content select=\"[fConnectionContent]\"></ng-content>\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center,:host .f-connection-content{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { 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: "18.2.13", ngImport: i0, type: FConnectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "f-connection", exportAs: 'fComponent', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'f-connection', exportAs: 'fComponent', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.id]': 'fId()',
-                        class: "f-component f-connection",
+                        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\"></path>\n      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\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 }], propDecorators: { fText: [{
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FConnectionComponent }], template: "<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  style=\"overflow: visible; display: block; vertical-align: middle;\"\n>\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      @if (fReassignableStart()) {\n        <circle f-connection-drag-handle-start r=\"8\"></circle>\n      }\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\n@if (fConnectionContents().length) {\n  <ng-content select=\"[fConnectionContent]\"></ng-content>\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center,:host .f-connection-content{pointer-events:all}\n"] }]
+        }], propDecorators: { fText: [{
                 type: Input
             }], fTextStartOffset: [{
                 type: Input
-            }], fOutputId: [{
-                type: Input
-            }], fInputId: [{
-                type: Input
             }], fRadius: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -2661,18 +3083,11 @@ var EFMarkerType;
 
 const F_MARKER = new InjectionToken('F_MARKER');
 class FMarkerBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMarkerBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FMarkerBase, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMarkerBase, decorators: [{
-            type: Directive
-        }] });
 
 class FMarkerDirective extends FMarkerBase {
-    elementReference;
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
+    hostElement = inject((ElementRef)).nativeElement;
+    _mediator = inject(FMediator);
     width = 0;
     height = 0;
     refX = 0;
@@ -2680,33 +3095,26 @@ class FMarkerDirective extends FMarkerBase {
     type = EFMarkerType.START;
     orient = 'auto';
     markerUnits = 'strokeWidth';
-    _fMediator = inject(FMediator);
-    constructor(elementReference) {
-        super();
-        this.elementReference = elementReference;
-        this.hostElement.style.display = 'none';
-    }
     ngOnInit() {
-        this._fMediator.execute(new AddConnectionMarkerToStoreRequest(this));
+        this.hostElement.style.display = 'none';
+        this._mediator.execute(new AddConnectionMarkerToStoreRequest(this));
     }
     ngOnDestroy() {
-        this._fMediator.execute(new RemoveConnectionMarkerFromStoreRequest(this));
+        this._mediator.execute(new RemoveConnectionMarkerFromStoreRequest(this));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FMarkerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", 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.2.13", ngImport: i0, type: FMarkerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FMarkerDirective, selector: "svg[fMarker]", inputs: { 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: "18.2.13", ngImport: i0, type: FMarkerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "svg[fMarker]",
+                    selector: 'svg[fMarker]',
                     host: {
-                        class: "f-component f-marker",
+                        class: 'f-component f-marker',
                     },
                     providers: [{ provide: F_MARKER, useExisting: FMarkerDirective }],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hostElement: [{
-                type: Input
-            }], width: [{
+        }], propDecorators: { width: [{
                 type: Input
             }], height: [{
                 type: Input
@@ -2728,8 +3136,8 @@ class FSnapConnectionComponent extends FConnectionBase {
     fText = '';
     fTextStartOffset = '';
     fSnapThreshold = 20;
-    fOutputId;
-    fInputId;
+    fOutputId = signal('');
+    fInputId = signal('');
     fRadius = 8;
     fOffset = 12;
     fBehavior = EFConnectionBehavior.FIXED;
@@ -2738,9 +3146,6 @@ class FSnapConnectionComponent extends FConnectionBase {
         return this.fPath().hostElement;
     }
     _mediator = inject(FMediator);
-    constructor(elementReference, fConnectionFactory) {
-        super(elementReference, fConnectionFactory);
-    }
     ngOnInit() {
         this._mediator.execute(new AddSnapConnectionToStoreRequest(this));
     }
@@ -2753,15 +3158,15 @@ class FSnapConnectionComponent extends FConnectionBase {
     ngOnDestroy() {
         this._mediator.execute(new RemoveSnapConnectionFromStoreRequest());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FSnapConnectionComponent, deps: [{ token: i0.ElementRef }, { token: FConnectionFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FSnapConnectionComponent, selector: "f-snap-connection", inputs: { fSnapThreshold: ["fSnapThreshold", "fSnapThreshold", numberAttribute], fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-snap-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], usesInheritance: true, usesOnChanges: 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-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\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: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { 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.2.13", ngImport: i0, type: FSnapConnectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FSnapConnectionComponent, selector: "f-snap-connection", inputs: { fSnapThreshold: ["fSnapThreshold", "fSnapThreshold", numberAttribute], fRadius: ["fRadius", "fRadius", numberAttribute], fOffset: ["fOffset", "fOffset", numberAttribute], fBehavior: ["fBehavior", "fBehavior", (value) => castToEnum(value, 'fBehavior', EFConnectionBehavior)], fType: "fType" }, host: { classAttribute: "f-component f-connection f-snap-connection" }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], usesInheritance: true, usesOnChanges: 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 [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\n@if (fConnectionContents().length) {\n  <ng-content select=\"[fConnectionContent]\"></ng-content>\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center,:host .f-connection-content{pointer-events:all}\n"], dependencies: [{ kind: "component", type: FConnectionTextComponent, selector: "text[f-connection-text]" }, { kind: "component", type: FConnectionDragHandleStartComponent, selector: "circle[f-connection-drag-handle-start]" }, { kind: "component", type: FConnectionDragHandleEndComponent, selector: "circle[f-connection-drag-handle-end]" }, { 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: "18.2.13", ngImport: i0, type: FSnapConnectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "f-snap-connection", changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: "f-component f-connection f-snap-connection",
-                    }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], 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-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\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 }], propDecorators: { fSnapThreshold: [{
+            args: [{ selector: 'f-snap-connection', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'f-component f-connection f-snap-connection',
+                    }, providers: [{ provide: F_CONNECTION, useExisting: FSnapConnectionComponent }], 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 [attr.d]=\"path\"></path>\n      <circle f-connection-drag-handle-start r=\"8\"></circle>\n      <circle f-connection-drag-handle-end r=\"8\"></circle>\n    </g>\n    <text f-connection-text></text>\n  </g>\n  <ng-content></ng-content>\n</svg>\n@if (fConnectionCenters().length) {\n  <div #fConnectionCenter class=\"f-connection-center\">\n    <ng-content select=\"[fConnectionCenter]\"></ng-content>\n  </div>\n}\n\n@if (fConnectionContents().length) {\n  <ng-content select=\"[fConnectionContent]\"></ng-content>\n}\n", styles: [":host{pointer-events:none;position:absolute}:host svg{overflow:visible}:host svg .f-connection-group{pointer-events:all}:host .f-connection-center,:host .f-connection-content{pointer-events:all}\n"] }]
+        }], propDecorators: { fSnapThreshold: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
             }], fRadius: [{
@@ -2797,19 +3202,19 @@ const F_CONNECTION_PROVIDERS = [
  * It constructs a line between the intersections of the connectors rectangles and line from the centers of the connector rectangles
  * @param payload
  */
-function floatingBehavior(payload) {
-    return _getIntersectionsLine(_fromRoundedRectIntersections(payload), _toRoundedRectIntersections(payload), payload);
+function floatingBehavior({ sourceRect, targetRect, }) {
+    return _getIntersectionsLine(_fromRoundedRectIntersections(sourceRect, targetRect), _toRoundedRectIntersections(sourceRect, targetRect), sourceRect, targetRect);
 }
-function _fromRoundedRectIntersections(payload) {
-    return GetIntersections.getRoundedRectIntersections(payload.outputRect.gravityCenter, payload.inputRect.gravityCenter, payload.outputRect)[0];
+function _fromRoundedRectIntersections(sourceRect, targetRect) {
+    return GetIntersections.getRoundedRectIntersections(sourceRect.gravityCenter, targetRect.gravityCenter, sourceRect)[0];
 }
-function _toRoundedRectIntersections(payload) {
-    return GetIntersections.getRoundedRectIntersections(payload.inputRect.gravityCenter, payload.outputRect.gravityCenter, payload.inputRect)[0];
+function _toRoundedRectIntersections(sourceRect, targetRect) {
+    return GetIntersections.getRoundedRectIntersections(targetRect.gravityCenter, sourceRect.gravityCenter, targetRect)[0];
 }
-function _getIntersectionsLine(from, to, payload) {
+function _getIntersectionsLine(from, to, sourceRect, targetRect) {
     return {
-        point1: from ? from : payload.outputRect.gravityCenter,
-        point2: to ? to : payload.inputRect.gravityCenter,
+        point1: from ? from : sourceRect.gravityCenter,
+        point2: to ? to : targetRect.gravityCenter,
     };
 }
 
@@ -2818,10 +3223,10 @@ function _getIntersectionsLine(from, to, payload) {
  * It constructs a line between the gravity centers of the connector rectangles
  * @param payload
  */
-function fixedCenterBehavior(payload) {
+function fixedCenterBehavior({ sourceRect, targetRect, }) {
     return {
-        point1: payload.outputRect.gravityCenter,
-        point2: payload.inputRect.gravityCenter,
+        point1: sourceRect.gravityCenter,
+        point2: targetRect.gravityCenter,
     };
 }
 
@@ -2830,10 +3235,14 @@ function fixedCenterBehavior(payload) {
  * It constructs a line between the specified sides of the output and input rectangles
  * @param payload
  */
-function fixedOutboundBehavior(payload) {
+function fixedOutboundBehavior({ sourceRect, sourceConnectableSide, targetRect, targetConnectableSide, }) {
     return {
-        point1: _getPosition(payload.outputRect, payload.outputSide === EFConnectableSide.AUTO ? EFConnectableSide.BOTTOM : payload.outputSide),
-        point2: _getPosition(payload.inputRect, payload.inputSide === EFConnectableSide.AUTO ? EFConnectableSide.TOP : payload.inputSide),
+        point1: _getPosition(sourceRect, sourceConnectableSide === EFConnectableSide.AUTO
+            ? EFConnectableSide.BOTTOM
+            : sourceConnectableSide),
+        point2: _getPosition(targetRect, targetConnectableSide === EFConnectableSide.AUTO
+            ? EFConnectableSide.TOP
+            : targetConnectableSide),
     };
 }
 function _getPosition(rect, side) {
@@ -2854,7 +3263,7 @@ function _getPosition(rect, side) {
 /**
  * Execution that calculates the connection line based on the behavior.
  */
-let CalculateConnectionLineByBehaviorExecution = class CalculateConnectionLineByBehaviorExecution {
+let CalculateConnectionLineByBehavior = class CalculateConnectionLineByBehavior {
     _handlers = {
         [EFConnectionBehavior.FLOATING.toString()]: floatingBehavior,
         [EFConnectionBehavior.FIXED_CENTER.toString()]: fixedCenterBehavior,
@@ -2863,13 +3272,13 @@ let CalculateConnectionLineByBehaviorExecution = class CalculateConnectionLineBy
     handle(payload) {
         return this._handlers[payload.behavior](payload);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateConnectionLineByBehaviorExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateConnectionLineByBehaviorExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateConnectionLineByBehavior, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateConnectionLineByBehavior });
 };
-CalculateConnectionLineByBehaviorExecution = __decorate([
+CalculateConnectionLineByBehavior = __decorate([
     FExecutionRegister(CalculateConnectionLineByBehaviorRequest)
-], CalculateConnectionLineByBehaviorExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateConnectionLineByBehaviorExecution, decorators: [{
+], CalculateConnectionLineByBehavior);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateConnectionLineByBehavior, decorators: [{
             type: Injectable
         }] });
 
@@ -2988,9 +3397,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * and sets up connections based on the stored outputs and inputs.
  */
 let RedrawConnectionsExecution = class RedrawConnectionsExecution {
-    _fMediator = inject(FMediator);
+    _mediator = inject(FMediator);
     _store = inject(FComponentsStore);
-    handle(request) {
+    handle(_request) {
         this._resetConnectors();
         if (this._store.fTempConnection) {
             this._setMarkers(this._store.fTempConnection);
@@ -2999,18 +3408,18 @@ let RedrawConnectionsExecution = class RedrawConnectionsExecution {
             this._setMarkers(this._store.fSnapConnection);
         }
         this._store.fConnections.forEach((x) => {
-            this._setupConnection(this._getOutput(x.fOutputId), this._getInput(x.fInputId), x);
+            this._setupConnection(this._getOutput(x.fOutputId()), this._getInput(x.fInputId()), x);
         });
     }
     _getOutput(id) {
-        const result = this._store.fOutputs.find((x) => x.fId === id);
+        const result = this._store.fOutputs.find((x) => x.fId() === id);
         if (!result) {
             throw new Error(`Output with id ${id} not found`);
         }
         return result;
     }
     _getInput(id) {
-        const result = this._store.fInputs.find((x) => x.fId === id);
+        const result = this._store.fInputs.find((x) => x.fId() === id);
         if (!result) {
             throw new Error(`Input with id ${id} not found`);
         }
@@ -3030,10 +3439,10 @@ let RedrawConnectionsExecution = class RedrawConnectionsExecution {
         fConnection.isSelected() ? fConnection.markAsSelected() : null;
     }
     _getLine(output, input, connection) {
-        return this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fMediator.execute(new GetNormalizedConnectorRectRequest(output.hostElement)), this._fMediator.execute(new GetNormalizedConnectorRectRequest(input.hostElement)), connection.fBehavior, output.fConnectableSide, input.fConnectableSide));
+        return this._mediator.execute(new CalculateConnectionLineByBehaviorRequest(this._mediator.execute(new GetNormalizedConnectorRectRequest(output.hostElement)), this._mediator.execute(new GetNormalizedConnectorRectRequest(input.hostElement)), connection.fBehavior, output.fConnectableSide, input.fConnectableSide));
     }
     _setMarkers(connection) {
-        this._fMediator.execute(new CreateConnectionMarkersRequest(connection));
+        this._mediator.execute(new CreateConnectionMarkersRequest(connection));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RedrawConnectionsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RedrawConnectionsExecution });
@@ -3158,7 +3567,7 @@ const F_CONNECTION_FEATURES = [
     AddConnectionToStoreExecution,
     AddSnapConnectionToStoreExecution,
     CreateConnectionMarkersExecution,
-    CalculateConnectionLineByBehaviorExecution,
+    CalculateConnectionLineByBehavior,
     RedrawConnectionsExecution,
     RemoveConnectionForCreateFromStoreExecution,
     RemoveConnectionFromStoreExecution,
@@ -3167,87 +3576,87 @@ const F_CONNECTION_FEATURES = [
 ];
 
 class AddInputToStoreRequest {
-    fComponent;
+    component;
     static fToken = Symbol('AddInputToStoreRequest');
-    constructor(fComponent) {
-        this.fComponent = fComponent;
+    constructor(component) {
+        this.component = component;
     }
 }
 
 /**
  * Execution that adds an InputConnector to the FComponentsStore.
  */
-let AddInputToStoreExecution = class AddInputToStoreExecution {
+let AddInputToStore = class AddInputToStore {
     _store = inject(FComponentsStore);
-    handle(request) {
-        this._store.addComponent(this._store.fInputs, request.fComponent);
+    handle({ component }) {
+        this._store.addComponent(this._store.fInputs, component);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddInputToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddInputToStoreExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddInputToStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddInputToStore });
 };
-AddInputToStoreExecution = __decorate([
+AddInputToStore = __decorate([
     FExecutionRegister(AddInputToStoreRequest)
-], AddInputToStoreExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddInputToStoreExecution, decorators: [{
+], AddInputToStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddInputToStore, decorators: [{
             type: Injectable
         }] });
 
 class AddOutletToStoreRequest {
-    fComponent;
+    component;
     static fToken = Symbol('AddOutletToStoreRequest');
-    constructor(fComponent) {
-        this.fComponent = fComponent;
+    constructor(component) {
+        this.component = component;
     }
 }
 
 /**
  * Execution that adds an OutletConnector to the FComponentsStore.
  */
-let AddOutletToStoreExecution = class AddOutletToStoreExecution {
+let AddOutletToStore = class AddOutletToStore {
     _store = inject(FComponentsStore);
-    handle(request) {
-        this._store.addComponent(this._store.fOutlets, request.fComponent);
+    handle({ component }) {
+        this._store.addComponent(this._store.fOutlets, component);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddOutletToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddOutletToStoreExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddOutletToStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddOutletToStore });
 };
-AddOutletToStoreExecution = __decorate([
+AddOutletToStore = __decorate([
     FExecutionRegister(AddOutletToStoreRequest)
-], AddOutletToStoreExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddOutletToStoreExecution, decorators: [{
+], AddOutletToStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddOutletToStore, decorators: [{
             type: Injectable
         }] });
 
 class AddOutputToStoreRequest {
-    fComponent;
+    component;
     static fToken = Symbol('AddOutputToStoreRequest');
-    constructor(fComponent) {
-        this.fComponent = fComponent;
+    constructor(component) {
+        this.component = component;
     }
 }
 
 /**
  * Execution that adds an OutputConnector to the FComponentsStore.
  */
-let AddOutputToStoreExecution = class AddOutputToStoreExecution {
+let AddOutputToStore = class AddOutputToStore {
     _store = inject(FComponentsStore);
-    handle(request) {
-        this._store.addComponent(this._store.fOutputs, request.fComponent);
+    handle({ component }) {
+        this._store.addComponent(this._store.fOutputs, component);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddOutputToStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddOutputToStoreExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddOutputToStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddOutputToStore });
 };
-AddOutputToStoreExecution = __decorate([
+AddOutputToStore = __decorate([
     FExecutionRegister(AddOutputToStoreRequest)
-], AddOutputToStoreExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddOutputToStoreExecution, decorators: [{
+], AddOutputToStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddOutputToStore, decorators: [{
             type: Injectable
         }] });
 
-class FindClosestConnectorRequest {
+class CalculateClosestConnectorRequest {
     position;
     connectors;
-    static fToken = Symbol('FindClosestConnectorRequest');
+    static fToken = Symbol('CalculateClosestConnectorRequest');
     constructor(position, connectors) {
         this.position = position;
         this.connectors = connectors;
@@ -3259,21 +3668,23 @@ class FindClosestConnectorRequest {
  * It calculates the distance from the point to each connector's rectangle
  * and returns the closest one along with its distance.
  */
-let FindClosestConnectorExecution = class FindClosestConnectorExecution {
-    handle(payload) {
+let CalculateClosestConnector = class CalculateClosestConnector {
+    handle({ position, connectors, }) {
         let result;
         let minDistance = Infinity;
-        for (const element of payload.connectors) {
-            const distance = this._distanceToRectangle(payload.position, element);
+        for (const element of connectors) {
+            const distance = this._distanceToRectangle(position, element);
             if (distance < minDistance) {
                 minDistance = distance;
                 result = element;
             }
         }
-        return result ? {
-            ...result,
-            distance: minDistance,
-        } : undefined;
+        return result
+            ? {
+                ...result,
+                distance: minDistance,
+            }
+            : undefined;
     }
     _distanceToRectangle(point, inputWithRect) {
         const closestX = this._clamp(point.x, inputWithRect.fRect.x, inputWithRect.fRect.x + inputWithRect.fRect.width);
@@ -3285,13 +3696,13 @@ let FindClosestConnectorExecution = class FindClosestConnectorExecution {
     _clamp(value, min, max) {
         return Math.max(min, Math.min(max, value));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindClosestConnectorExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindClosestConnectorExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateClosestConnector, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateClosestConnector });
 };
-FindClosestConnectorExecution = __decorate([
-    FExecutionRegister(FindClosestConnectorRequest)
-], FindClosestConnectorExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FindClosestConnectorExecution, decorators: [{
+CalculateClosestConnector = __decorate([
+    FExecutionRegister(CalculateClosestConnectorRequest)
+], CalculateClosestConnector);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateClosestConnector, decorators: [{
             type: Injectable
         }] });
 
@@ -3346,21 +3757,24 @@ let FindConnectableConnectorUsingPriorityAndPositionExecution = class FindConnec
         return result;
     }
     _filterConnectorsThatLocatedAtPosition(request) {
-        return request.connectableConnectors.filter((x) => {
+        return request.connectableConnectors
+            .filter((x) => {
             return RectExtensions.isIncludePoint(x.fRect, this._getPointInFlow(request.pointerPosition));
-        }).map((x) => x.fConnector);
+        })
+            .map((x) => x.fConnector);
     }
     _getPointInFlow(position) {
         return Point.fromPoint(position)
             .elementTransform(this._fHost)
-            .sub(this._transform.scaledPosition).sub(this._transform.position)
+            .sub(this._transform.scaledPosition)
+            .sub(this._transform.position)
             .div(this._transform.scale);
     }
     _isSnapConnectionEnabledAndHasClosestConnector(request) {
         if (!this._fSnapConnection) {
             return undefined;
         }
-        const closestConnector = this._mediator.execute(new FindClosestConnectorRequest(this._getPointInFlow(request.pointerPosition), request.connectableConnectors));
+        const closestConnector = this._mediator.execute(new CalculateClosestConnectorRequest(this._getPointInFlow(request.pointerPosition), request.connectableConnectors));
         return this._isValidClosestInput(closestConnector) ? closestConnector : undefined;
     }
     _isValidClosestInput(closestConnector) {
@@ -3394,42 +3808,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class GetAllCanBeConnectedInputsAndRectsRequest {
-    fOutputOrOutlet;
+    outputOrOutlet;
     static fToken = Symbol('GetAllCanBeConnectedInputsAndRectsRequest');
-    constructor(fOutputOrOutlet) {
-        this.fOutputOrOutlet = fOutputOrOutlet;
+    constructor(outputOrOutlet) {
+        this.outputOrOutlet = outputOrOutlet;
     }
 }
 
 class GetConnectorAndRectRequest {
-    fConnector;
+    connector;
     static fToken = Symbol('GetConnectorAndRectRequest');
-    constructor(fConnector) {
-        this.fConnector = fConnector;
+    constructor(connector) {
+        this.connector = connector;
     }
 }
 
 /**
  * Execution that retrieves a connector and its rectangle.
  */
-let GetConnectorAndRectExecution = class GetConnectorAndRectExecution {
+let GetConnectorAndRect = class GetConnectorAndRect {
     _mediator = inject(FMediator);
-    handle(request) {
+    handle({ connector }) {
         return {
-            fConnector: request.fConnector,
-            fRect: this._getConnectorRect(request.fConnector),
+            fConnector: connector,
+            fRect: this._getConnectorRect(connector),
         };
     }
     _getConnectorRect(fConnector) {
         return this._mediator.execute(new GetNormalizedConnectorRectRequest(fConnector.hostElement));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetConnectorAndRectExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetConnectorAndRectExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetConnectorAndRect, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetConnectorAndRect });
 };
-GetConnectorAndRectExecution = __decorate([
+GetConnectorAndRect = __decorate([
     FExecutionRegister(GetConnectorAndRectRequest)
-], GetConnectorAndRectExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetConnectorAndRectExecution, decorators: [{
+], GetConnectorAndRect);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetConnectorAndRect, decorators: [{
             type: Injectable
         }] });
 
@@ -3439,29 +3853,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 let GetAllCanBeConnectedInputsAndRectsExecution = class GetAllCanBeConnectedInputsAndRectsExecution {
     _mediator = inject(FMediator);
     _store = inject(FComponentsStore);
-    get _fInputs() {
+    get _targetConnectors() {
         return this._store.fInputs;
     }
-    handle(payload) {
-        return this._getCanBeConnectedInputs(payload.fOutputOrOutlet).map((x) => {
+    handle({ outputOrOutlet, }) {
+        return this._getCanBeConnectedInputs(outputOrOutlet).map((x) => {
             return this._mediator.execute(new GetConnectorAndRectRequest(x));
         });
     }
-    _getCanBeConnectedInputs(fOutputOrOutlet) {
-        let fInputs = [];
-        if (fOutputOrOutlet.canBeConnectedInputs?.length) {
-            fInputs = this._fInputs.filter((x) => fOutputOrOutlet.canBeConnectedInputs.includes(x.fId));
+    _getCanBeConnectedInputs(outputOrOutlet) {
+        let targetConnectors = [];
+        if (outputOrOutlet.hasConnectionLimits) {
+            targetConnectors = this._targetConnectors.filter((x) => outputOrOutlet.canConnectTo(x));
         }
         else {
-            fInputs = this._fInputs.filter((x) => x.canBeConnected);
-            if (!fOutputOrOutlet.isSelfConnectable) {
-                fInputs = this._filterSelfConnectable(fInputs, fOutputOrOutlet);
+            targetConnectors = this._targetConnectors.filter((x) => x.canBeConnected);
+            if (!outputOrOutlet.isSelfConnectable) {
+                targetConnectors = this._filterSelfConnectable(targetConnectors, outputOrOutlet);
             }
         }
-        return fInputs;
+        return targetConnectors;
     }
-    _filterSelfConnectable(fInputs, fOutputOrOutlet) {
-        return fInputs.filter((x) => fOutputOrOutlet.fNodeId !== x.fNodeId);
+    _filterSelfConnectable(targetConnectors, outputOrOutlet) {
+        return targetConnectors.filter(({ fNodeId }) => outputOrOutlet.fNodeId !== fNodeId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetAllCanBeConnectedInputsAndRectsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetAllCanBeConnectedInputsAndRectsExecution });
@@ -3474,10 +3888,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class GetAllCanBeConnectedSourceConnectorsAndRectsRequest {
-    fTargetConnector;
+    targetConnector;
     static fToken = Symbol('GetAllCanBeConnectedSourceConnectorsAndRectsRequest');
-    constructor(fTargetConnector) {
-        this.fTargetConnector = fTargetConnector;
+    constructor(targetConnector) {
+        this.targetConnector = targetConnector;
     }
 }
 
@@ -3489,19 +3903,19 @@ class GetAllCanBeConnectedSourceConnectorsAndRectsRequest {
 let GetAllCanBeConnectedSourceConnectorsAndRectsExecution = class GetAllCanBeConnectedSourceConnectorsAndRectsExecution {
     _mediator = inject(FMediator);
     _store = inject(FComponentsStore);
-    get _fSourceConnectors() {
+    get _sourceConnectors() {
         return this._store.fOutputs;
     }
-    handle(payload) {
-        return this._getCanBeConnectedSourceConnectors(payload.fTargetConnector).map((x) => {
+    handle({ targetConnector, }) {
+        return this._getCanBeConnectedSourceConnectors(targetConnector).map((x) => {
             return this._mediator.execute(new GetConnectorAndRectRequest(x));
         });
     }
-    _getCanBeConnectedSourceConnectors(fTargetConnector) {
-        return this._fSourceConnectors.filter((x) => {
+    _getCanBeConnectedSourceConnectors(targetConnector) {
+        return this._sourceConnectors.filter((x) => {
             let result = x.canBeConnected;
-            if (result && x.canBeConnectedInputs?.length) {
-                result = x.canBeConnectedInputs?.includes(fTargetConnector.fId);
+            if (result && x.hasConnectionLimits) {
+                result = x.canConnectTo(targetConnector);
             }
             return result;
         });
@@ -3517,58 +3931,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class MarkConnectableConnectorsRequest {
-    fConnectors;
+    connectors;
     static fToken = Symbol('MarkConnectableConnectorsRequest');
-    constructor(fConnectors) {
-        this.fConnectors = fConnectors;
+    constructor(connectors) {
+        this.connectors = connectors;
     }
 }
 
 /**
  * Execution that marks connectors as connectable.
  */
-let MarkConnectableConnectorsExecution = class MarkConnectableConnectorsExecution {
+let MarkConnectableConnectors = class MarkConnectableConnectors {
     _store = inject(FComponentsStore);
-    handle(payload) {
+    handle({ connectors }) {
         this._store.flowHost.classList.add(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
-        payload.fConnectors.forEach((fConnector) => this._markConnector(fConnector));
+        connectors.forEach((x) => this._markConnector(x));
     }
-    _markConnector(fConnector) {
-        fConnector.hostElement.classList.add(F_CSS_CLASS.CONNECTOR.CONNECTABLE);
+    _markConnector({ hostElement }) {
+        hostElement.classList.add(F_CSS_CLASS.CONNECTOR.CONNECTABLE);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkConnectableConnectorsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkConnectableConnectorsExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkConnectableConnectors, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkConnectableConnectors });
 };
-MarkConnectableConnectorsExecution = __decorate([
+MarkConnectableConnectors = __decorate([
     FExecutionRegister(MarkConnectableConnectorsRequest)
-], MarkConnectableConnectorsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkConnectableConnectorsExecution, decorators: [{
+], MarkConnectableConnectors);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkConnectableConnectors, decorators: [{
             type: Injectable
         }] });
 
 class RemoveInputFromStoreRequest {
-    fComponent;
+    component;
     static fToken = Symbol('RemoveInputFromStoreRequest');
-    constructor(fComponent) {
-        this.fComponent = fComponent;
+    constructor(component) {
+        this.component = component;
     }
 }
 
 /**
  * Execution that removes an inputConnector from the FComponentsStore.
  */
-let RemoveInputFromStoreExecution = class RemoveInputFromStoreExecution {
+let RemoveInputFromStore = class RemoveInputFromStore {
     _store = inject(FComponentsStore);
-    handle(request) {
-        this._store.removeComponent(this._store.fInputs, request.fComponent);
+    handle({ component }) {
+        this._store.removeComponent(this._store.fInputs, component);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveInputFromStoreExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveInputFromStoreExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveInputFromStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveInputFromStore });
 };
-RemoveInputFromStoreExecution = __decorate([
+RemoveInputFromStore = __decorate([
     FExecutionRegister(RemoveInputFromStoreRequest)
-], RemoveInputFromStoreExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveInputFromStoreExecution, decorators: [{
+], RemoveInputFromStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RemoveInputFromStore, decorators: [{
             type: Injectable
         }] });
 
@@ -3625,52 +4039,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class UnmarkConnectableConnectorsRequest {
-    fConnectors;
+    connectors;
     static fToken = Symbol('UnmarkConnectableConnectorsRequest');
-    constructor(fConnectors) {
-        this.fConnectors = fConnectors;
+    constructor(connectors) {
+        this.connectors = connectors;
     }
 }
 
 /**
  * Execution that unmarks connectors as connectable.
  */
-let UnmarkConnectableConnectorsExecution = class UnmarkConnectableConnectorsExecution {
+let UnmarkConnectableConnectors = class UnmarkConnectableConnectors {
     _store = inject(FComponentsStore);
-    handle(payload) {
+    handle({ connectors }) {
         this._store.flowHost.classList.remove(F_CSS_CLASS.DRAG_AND_DROP.CONNECTIONS_DRAGGING);
-        payload.fConnectors.forEach((fConnector) => this._unmarkConnector(fConnector));
+        connectors.forEach((x) => this._unmarkConnector(x));
     }
-    _unmarkConnector(fConnector) {
-        fConnector.hostElement.classList.remove(F_CSS_CLASS.CONNECTOR.CONNECTABLE);
+    _unmarkConnector({ hostElement }) {
+        hostElement.classList.remove(F_CSS_CLASS.CONNECTOR.CONNECTABLE);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkConnectableConnectorsExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkConnectableConnectorsExecution });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkConnectableConnectors, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkConnectableConnectors });
 };
-UnmarkConnectableConnectorsExecution = __decorate([
+UnmarkConnectableConnectors = __decorate([
     FExecutionRegister(UnmarkConnectableConnectorsRequest)
-], UnmarkConnectableConnectorsExecution);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkConnectableConnectorsExecution, decorators: [{
+], UnmarkConnectableConnectors);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnmarkConnectableConnectors, decorators: [{
             type: Injectable
         }] });
 
 /*
-  * This file exports all the connector-related executions that can be used in the FFlow domain.
+ * This file exports all the connector-related executions that can be used in the FFlow domain.
  */
 const F_CONNECTORS_FEATURES = [
-    AddInputToStoreExecution,
-    AddOutletToStoreExecution,
-    AddOutputToStoreExecution,
-    FindClosestConnectorExecution,
+    AddInputToStore,
+    AddOutletToStore,
+    AddOutputToStore,
+    CalculateClosestConnector,
     FindConnectableConnectorUsingPriorityAndPositionExecution,
     GetAllCanBeConnectedSourceConnectorsAndRectsExecution,
     GetAllCanBeConnectedInputsAndRectsExecution,
-    GetConnectorAndRectExecution,
-    MarkConnectableConnectorsExecution,
-    RemoveInputFromStoreExecution,
+    GetConnectorAndRect,
+    MarkConnectableConnectors,
+    RemoveInputFromStore,
     RemoveOutletFromStoreExecution,
     RemoveOutputFromStoreExecution,
-    UnmarkConnectableConnectorsExecution,
+    UnmarkConnectableConnectors,
 ];
 
 class AddDndToStoreRequest {
@@ -3816,7 +4230,7 @@ class IsConnectionUnderNodeRequest {
 }
 
 let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
-    _fMediator = inject(FMediator);
+    _mediator = inject(FMediator);
     _store = inject(FComponentsStore);
     handle(request) {
         const fOutputConnectors = this._getOutputConnectors(request.fNode);
@@ -3847,24 +4261,24 @@ let IsConnectionUnderNodeExecution = class IsConnectionUnderNodeExecution {
     _getOutputConnectionsId(connectors) {
         const connectorsId = this._getConnectorsId(connectors);
         return this._store.fConnections
-            .filter((x) => connectorsId.includes(x.fOutputId))
+            .filter((x) => connectorsId.includes(x.fOutputId()))
             .map((x) => x.fId());
     }
     _getInputConnectionsId(connectors) {
         const connectorsId = this._getConnectorsId(connectors);
         return this._store.fConnections
-            .filter((x) => connectorsId.includes(x.fInputId))
+            .filter((x) => connectorsId.includes(x.fInputId()))
             .map((x) => x.fId());
     }
     _getConnectorsId(connectors) {
-        return connectors.map((x) => x.fId);
+        return connectors.map((x) => x.fId());
     }
     _calculateConnectionsUnderNode(fNode) {
-        const fNodeRect = this._fMediator.execute(new GetNormalizedConnectorRectRequest(fNode.hostElement));
+        const fNodeRect = this._mediator.execute(new GetNormalizedConnectorRectRequest(fNode.hostElement));
         return this._store.fConnections.filter((x) => this._isConnectionHasIntersectionsWithNode(x, fNodeRect));
     }
     _isConnectionHasIntersectionsWithNode(fConnection, fNodeRect) {
-        return GetIntersections.getRoundedRectIntersectionsWithSVGPath(fConnection.fPath().hostElement, fNodeRect).length > 0;
+        return (GetIntersections.getRoundedRectIntersectionsWithSVGPath(fConnection.fPath().hostElement, fNodeRect).length > 0);
     }
     _emitNodeIntersectedWithConnections(fNode, fConnections) {
         this._store.fDraggable?.fNodeIntersectedWithConnections.emit(new FNodeIntersectedWithConnections(fNode.fId(), fConnections.map((x) => x.fId())));
@@ -3882,7 +4296,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class FDragStartedEvent {
     fEventType;
     fData;
-    constructor(fEventType, fData) {
+    constructor(fEventType, 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fData) {
         this.fEventType = fEventType;
         this.fData = fData;
     }
@@ -3948,7 +4364,7 @@ class FCanvasDragHandler {
 
 let FCanvasMoveFinalizeExecution = class FCanvasMoveFinalizeExecution {
     _dragContext = inject(FDraggableDataContext);
-    handle(request) {
+    handle(_request) {
         if (!this._isValid()) {
             return;
         }
@@ -4118,22 +4534,22 @@ class FCreateConnectionDragHandler {
     _fOutputOrOutlet;
     fEventType = 'create-connection';
     fData;
-    _fResult;
-    _fMediator;
+    _result;
+    _mediator;
     _store;
     _toConnectorRect = new RoundedRect();
-    get _fConnection() {
+    get _connection() {
         return this._store.fTempConnection;
     }
-    get _fSnapConnection() {
+    get _snapConnection() {
         return this._store.fSnapConnection;
     }
     _fOutputWithRect;
     _canBeConnectedInputs = [];
     constructor(_injector, _fOutputOrOutlet, _onPointerDownPosition) {
         this._fOutputOrOutlet = _fOutputOrOutlet;
-        this._fResult = _injector.get(FDragHandlerResult);
-        this._fMediator = _injector.get(FMediator);
+        this._result = _injector.get(FDragHandlerResult);
+        this._mediator = _injector.get(FMediator);
         this._store = _injector.get(FComponentsStore);
         this._toConnectorRect = RoundedRect.fromRect(RectExtensions.initialize(_onPointerDownPosition.x, _onPointerDownPosition.y));
         this.fData = {
@@ -4144,102 +4560,106 @@ class FCreateConnectionDragHandler {
         this._getAndMarkCanBeConnectedInputs();
         this._initializeSnapConnection();
         this._initializeConnectionForCreate();
-        this._fOutputWithRect = this._fMediator.execute(new GetConnectorAndRectRequest(this._fOutputOrOutlet));
-        this._fConnection.show();
+        this._fOutputWithRect = this._mediator.execute(new GetConnectorAndRectRequest(this._fOutputOrOutlet));
+        this._connection.show();
         this.onPointerMove(PointExtensions.initialize());
-        this._fResult.setData({
+        this._result.setData({
             toConnectorRect: this._toConnectorRect,
             canBeConnectedInputs: this._canBeConnectedInputs,
-            fOutputId: this._fOutputOrOutlet.fId,
+            fOutputId: this._fOutputOrOutlet.fId(),
         });
     }
     _getAndMarkCanBeConnectedInputs() {
-        this._canBeConnectedInputs = this._fMediator.execute(new GetAllCanBeConnectedInputsAndRectsRequest(this._fOutputOrOutlet));
-        this._fMediator.execute(new MarkConnectableConnectorsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
+        this._canBeConnectedInputs = this._mediator.execute(new GetAllCanBeConnectedInputsAndRectsRequest(this._fOutputOrOutlet));
+        this._mediator.execute(new MarkConnectableConnectorsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
     }
     _initializeSnapConnection() {
-        if (!this._fSnapConnection) {
+        if (!this._snapConnection) {
             return;
         }
-        this._fSnapConnection.fOutputId = this._fOutputOrOutlet.fId;
-        this._fSnapConnection.initialize();
+        this._snapConnection.fOutputId.set(this._fOutputOrOutlet.fId());
+        this._snapConnection.initialize();
     }
     _initializeConnectionForCreate() {
-        this._fConnection.fOutputId = this._fOutputOrOutlet.fId;
-        this._fConnection.initialize();
+        this._connection.fOutputId.set(this._fOutputOrOutlet.fId());
+        this._connection.initialize();
     }
     onPointerMove(difference) {
         const fClosestInput = this._findClosestInput(difference);
         this._drawConnectionForCreate(this._toConnectorRect.addPoint(difference), fClosestInput?.fConnector.fConnectableSide || EFConnectableSide.TOP);
-        if (this._fSnapConnection) {
+        if (this._snapConnection) {
             this._drawSnapConnection(this._getClosestInputForSnapConnection(fClosestInput));
         }
     }
     _drawConnectionForCreate(toConnectorRect, fSide) {
-        const line = this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, toConnectorRect, this._fConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fSide));
-        this._fConnection.setLine(line, this._fOutputWithRect.fConnector.fConnectableSide, fSide);
-        this._fConnection.redraw();
+        const line = this._mediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, toConnectorRect, this._connection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fSide));
+        this._connection.setLine(line, this._fOutputWithRect.fConnector.fConnectableSide, fSide);
+        this._connection.redraw();
     }
     _drawSnapConnection(fClosestInput) {
         if (fClosestInput) {
-            const line = this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, fClosestInput.fRect, this._fSnapConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide));
-            this._fSnapConnection.show();
-            this._fSnapConnection.setLine(line, this._fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide);
-            this._fSnapConnection.redraw();
+            const line = this._mediator.execute(new CalculateConnectionLineByBehaviorRequest(this._fOutputWithRect.fRect, fClosestInput.fRect, this._snapConnection.fBehavior, this._fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide));
+            this._snapConnection?.show();
+            this._snapConnection?.setLine(line, this._fOutputWithRect.fConnector.fConnectableSide, fClosestInput.fConnector.fConnectableSide);
+            this._snapConnection?.redraw();
         }
         else {
-            this._fSnapConnection?.hide();
+            this._snapConnection?.hide();
         }
     }
     _findClosestInput(difference) {
-        return this._fMediator.execute(new FindClosestConnectorRequest(this._toConnectorRect.addPoint(difference), this._canBeConnectedInputs));
+        return this._mediator.execute(new CalculateClosestConnectorRequest(this._toConnectorRect.addPoint(difference), this._canBeConnectedInputs));
     }
     _getClosestInputForSnapConnection(fClosestInput) {
-        return fClosestInput && fClosestInput.distance < this._fSnapConnection.fSnapThreshold ? fClosestInput : undefined;
+        return fClosestInput && fClosestInput.distance < this._snapConnection.fSnapThreshold
+            ? fClosestInput
+            : undefined;
     }
     onPointerUp() {
-        this._fConnection.redraw();
-        this._fConnection.hide();
-        this._fSnapConnection?.hide();
-        this._fMediator.execute(new UnmarkConnectableConnectorsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
+        this._connection.redraw();
+        this._connection.hide();
+        this._snapConnection?.hide();
+        this._mediator.execute(new UnmarkConnectableConnectorsRequest(this._canBeConnectedInputs.map((x) => x.fConnector)));
     }
 }
 
 let FCreateConnectionFinalizeExecution = class FCreateConnectionFinalizeExecution {
-    _fResult = inject(FDragHandlerResult);
-    _fMediator = inject(FMediator);
+    _result = inject(FDragHandlerResult);
+    _mediator = inject(FMediator);
     _store = inject(FComponentsStore);
     _dragContext = inject(FDraggableDataContext);
-    get _fDragHandler() {
+    get _dragHandler() {
         return this._dragContext.draggableItems[0];
     }
     handle(request) {
         if (!this._isValid()) {
             return;
         }
-        this.emitEvent(request.event);
-        this._fDragHandler.onPointerUp();
+        this._emitEvent(request.event);
+        this._dragHandler.onPointerUp();
     }
     _isValid() {
         return this._dragContext.draggableItems.some((x) => x instanceof FCreateConnectionDragHandler);
     }
-    getTargetOutput(output) {
+    _getTargetOutput(output) {
         if (!output) {
-            throw new Error(`Output with fOutputId ${this._fResult.getData().fOutputId} not found. Make sure there is no f-connection to a non-existent fOutput.`);
+            throw new Error(`Output with fOutputId ${this._result.getData().fOutputId} not found. Make sure there is no f-connection to a non-existent fOutput.`);
         }
-        return isNodeOutlet(output.hostElement) ? this._fMediator.execute(new GetFirstConnectableOutputRequest(output)) : output;
+        return isNodeOutlet(output.hostElement)
+            ? this._mediator.execute(new GetFirstConnectableOutputRequest(output))
+            : output;
     }
-    getOutput() {
-        return this._store.fOutputs.find((x) => x.fId === this._fResult.getData().fOutputId);
+    _getOutput() {
+        return this._store.fOutputs.find((x) => x.fId() === this._result.getData().fOutputId);
     }
-    getOutlet() {
-        return this._store.fOutlets.find((x) => x.fId === this._fResult.getData().fOutputId);
+    _getOutlet() {
+        return this._store.fOutlets.find((x) => x.fId() === this._result.getData().fOutputId);
     }
-    emitEvent(event) {
-        this._store.fDraggable?.fCreateConnection.emit(new FCreateConnectionEvent(this.getTargetOutput(this.getOutput() || this.getOutlet()).fId, this._getInputUnderPointer(event)?.fId, event.getPosition()));
+    _emitEvent(event) {
+        this._store.fDraggable?.fCreateConnection.emit(new FCreateConnectionEvent(this._getTargetOutput(this._getOutput() || this._getOutlet()).fId(), this._getInputUnderPointer(event)?.fId(), event.getPosition()));
     }
     _getInputUnderPointer(event) {
-        return this._fMediator.execute(new FindConnectableConnectorUsingPriorityAndPositionRequest(event.getPosition(), this._fResult.getData().canBeConnectedInputs));
+        return this._mediator.execute(new FindConnectableConnectorUsingPriorityAndPositionRequest(event.getPosition(), this._result.getData().canBeConnectedInputs));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FCreateConnectionFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FCreateConnectionFinalizeExecution });
@@ -4498,7 +4918,7 @@ class FReassignTargetDragHandler {
         if (!snapConnection) {
             return;
         }
-        snapConnection.fOutputId = this._connection.fOutputId;
+        snapConnection.fOutputId.set(this._connection.fOutputId());
         snapConnection.initialize();
     }
     onPointerMove(difference) {
@@ -4510,7 +4930,7 @@ class FReassignTargetDragHandler {
         }
     }
     _findClosestConnector(point, connectors) {
-        return this._mediator.execute(new FindClosestConnectorRequest(point, connectors));
+        return this._mediator.execute(new CalculateClosestConnectorRequest(point, connectors));
     }
     _drawConnection(newPoint, fSide) {
         const line = this._calculateNewLine(newPoint, fSide);
@@ -4568,7 +4988,7 @@ class FReassignSourceDragHandler {
     }
     markConnectableConnector() {
         this._connectableConnectors = this._mediator.execute(new GetAllCanBeConnectedSourceConnectorsAndRectsRequest(this._targetConnector));
-        const isExistCurrentSourceConnector = this._connectableConnectors.some((x) => x.fConnector.fId === this._sourceConnector.fId);
+        const isExistCurrentSourceConnector = this._connectableConnectors.some((x) => x.fConnector.fId() === this._sourceConnector.fId());
         if (!isExistCurrentSourceConnector) {
             this._connectableConnectors.push(this._sourceConnectorAndRect);
         }
@@ -4579,7 +4999,7 @@ class FReassignSourceDragHandler {
         if (!snapConnection) {
             return;
         }
-        snapConnection.fInputId = this._connection.fInputId;
+        snapConnection.fInputId.set(this._connection.fInputId());
         snapConnection.initialize();
     }
     onPointerMove(difference) {
@@ -4591,7 +5011,7 @@ class FReassignSourceDragHandler {
         }
     }
     _findClosestConnector(point, connectors) {
-        return this._mediator.execute(new FindClosestConnectorRequest(point, connectors));
+        return this._mediator.execute(new CalculateClosestConnectorRequest(point, connectors));
     }
     _drawConnection(newPoint, fSide) {
         const line = this._calculateNewLine(newPoint, fSide);
@@ -4628,54 +5048,56 @@ class FReassignConnectionDragHandler {
     _isTargetDragHandle;
     fEventType = 'reassign-connection';
     fData;
-    _fResult;
-    _fMediator;
+    _result;
+    _mediator;
     _store;
-    get _fSnapConnection() {
+    get _snapConnection() {
         return this._store.fSnapConnection;
     }
     get _sourceConnector() {
-        const result = this._store.fOutputs.find((x) => x.fId === this._connection.fOutputId);
+        const result = this._store.fOutputs.find((x) => x.fId() === this._connection.fOutputId());
         if (!result) {
             throw new Error('Connection output not found');
         }
         return result;
     }
     get _targetConnector() {
-        const result = this._store.fInputs.find((x) => x.fId === this._connection.fInputId);
+        const result = this._store.fInputs.find((x) => x.fId() === this._connection.fInputId());
         if (!result) {
             throw new Error('Connection input not found');
         }
         return result;
     }
     get _sourceConnectorAndRect() {
-        return this._fMediator.execute(new GetConnectorAndRectRequest(this._sourceConnector));
+        return this._mediator.execute(new GetConnectorAndRectRequest(this._sourceConnector));
     }
     get _targetConnectorAndRect() {
-        return this._fMediator.execute(new GetConnectorAndRectRequest(this._targetConnector));
+        return this._mediator.execute(new GetConnectorAndRectRequest(this._targetConnector));
     }
     _reassignHandler;
     constructor(_injector, _connection, _isTargetDragHandle) {
         this._connection = _connection;
         this._isTargetDragHandle = _isTargetDragHandle;
-        this._fResult = _injector.get(FDragHandlerResult);
-        this._fMediator = _injector.get(FMediator);
+        this._result = _injector.get(FDragHandlerResult);
+        this._mediator = _injector.get(FMediator);
         this._store = _injector.get(FComponentsStore);
         this.fData = {
             fConnectionId: this._connection.fId(),
         };
-        this._reassignHandler = this._isTargetDragHandle ? this._targetDragHandler() : this._sourceDragHandler();
+        this._reassignHandler = this._isTargetDragHandle
+            ? this._targetDragHandler()
+            : this._sourceDragHandler();
     }
     _sourceDragHandler() {
-        return new FReassignSourceDragHandler(this._fMediator, this._connection, this._sourceConnectorAndRect, this._targetConnectorAndRect);
+        return new FReassignSourceDragHandler(this._mediator, this._connection, this._sourceConnectorAndRect, this._targetConnectorAndRect);
     }
     _targetDragHandler() {
-        return new FReassignTargetDragHandler(this._fMediator, this._connection, this._sourceConnectorAndRect, this._targetConnectorAndRect);
+        return new FReassignTargetDragHandler(this._mediator, this._connection, this._sourceConnectorAndRect, this._targetConnectorAndRect);
     }
     prepareDragSequence() {
         this._reassignHandler.markConnectableConnector();
-        this._reassignHandler.initializeSnapConnection(this._fSnapConnection);
-        this._fResult.setData({
+        this._reassignHandler.initializeSnapConnection(this._snapConnection);
+        this._result.setData({
             isTargetDragHandle: this._isTargetDragHandle,
             sourceConnectorRect: roundedRectFromPoint(this._connection.line.point1),
             targetConnectorRect: roundedRectFromPoint(this._connection.line.point2),
@@ -4745,10 +5167,10 @@ let FReassignConnectionFinalizeExecution = class FReassignConnectionFinalizeExec
     }
     _isReassignToDifferentConnector(fConnector) {
         if (!this._dragResult.getData().isTargetDragHandle) {
-            return this._dragResult.getData().fConnection.fInputId !== fConnector.fId;
+            return this._dragResult.getData().fConnection.fInputId() !== fConnector.fId();
         }
         else {
-            return this._dragResult.getData().fConnection.fOutputId !== fConnector.fId;
+            return this._dragResult.getData().fConnection.fOutputId() !== fConnector.fId();
         }
     }
     _emitReassignConnectionEvent(event, fConnector) {
@@ -4757,7 +5179,7 @@ let FReassignConnectionFinalizeExecution = class FReassignConnectionFinalizeExec
     _getEventData(event, fConnector) {
         const fConnection = this._dragResult.getData().fConnection;
         const isTargetDragHandle = this._dragResult.getData().isTargetDragHandle;
-        return new FReassignConnectionEvent(fConnection.fId(), !isTargetDragHandle, isTargetDragHandle, fConnection.fOutputId, !isTargetDragHandle ? fConnector?.fId : undefined, fConnection.fInputId, isTargetDragHandle ? fConnector?.fId : undefined, event.getPosition());
+        return new FReassignConnectionEvent(fConnection.fId(), !isTargetDragHandle, isTargetDragHandle, fConnection.fOutputId(), !isTargetDragHandle ? fConnector?.fId() : undefined, fConnection.fInputId(), isTargetDragHandle ? fConnector?.fId() : undefined, event.getPosition());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FReassignConnectionFinalizeExecution, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FReassignConnectionFinalizeExecution });
@@ -4946,14 +5368,14 @@ class BaseConnectionDragHandler {
     _fOutputWithRect;
     _fInputWithRect;
     get _fOutput() {
-        const result = this._store.fOutputs.find((x) => x.fId === this.fConnection.fOutputId);
+        const result = this._store.fOutputs.find((x) => x.fId() === this.fConnection.fOutputId());
         if (!result) {
             throw new Error(this._connectorNotFoundPrefix(`fOutput with id ${this.fConnection.fOutputId} not found`));
         }
         return result;
     }
     get _fInput() {
-        const result = this._store.fInputs.find((x) => x.fId === this.fConnection.fInputId);
+        const result = this._store.fInputs.find((x) => x.fId() === this.fConnection.fInputId());
         if (!result) {
             throw new Error(this._connectorNotFoundPrefix(`fInput with id ${this.fConnection.fInputId} not found`));
         }
@@ -5306,13 +5728,6 @@ class CalculateDragLimitsRequest {
     }
 }
 
-function infinityMinMax() {
-    return {
-        min: { x: -Infinity, y: -Infinity },
-        max: { x: Infinity, y: Infinity },
-    };
-}
-
 class GetNodeBoundingIncludePaddingsRequest {
     nodeOrGroup;
     childrenPaddings;
@@ -5531,12 +5946,12 @@ let CreateInputConnectionHandlerAndSetToNodeHandler = class CreateInputConnectio
     }
     _getInputConnections(nodeOrGroup) {
         const ids = new Set(this._getNodeInputIds(nodeOrGroup));
-        return this._connections.filter((x) => ids.has(x.fInputId));
+        return this._connections.filter((x) => ids.has(x.fInputId()));
     }
     _getNodeInputIds(nodeOrGroup) {
         return this._store.fInputs
             .filter((x) => nodeOrGroup.isContains(x.hostElement))
-            .map((x) => x.fId);
+            .map((x) => x.fId());
     }
     _createAndSetConnectionToNodeHandler(connection, request) {
         let connectionHandler = this._getExistingConnectionHandler(request.existingConnectionHandlers, connection);
@@ -5551,7 +5966,7 @@ let CreateInputConnectionHandlerAndSetToNodeHandler = class CreateInputConnectio
     }
     _createConnectionHandler(outputIds, connection) {
         let result;
-        if (outputIds.includes(connection.fOutputId)) {
+        if (outputIds.includes(connection.fOutputId())) {
             result = new SourceTargetConnectionDragHandler(this._injector, connection);
         }
         else {
@@ -5594,12 +6009,12 @@ let CreateOutputConnectionHandlerAndSetToNodeHandler = class CreateOutputConnect
     }
     _getOutputConnections(nodeOrGroup) {
         const ids = new Set(this._getNodeOutputIds(nodeOrGroup));
-        return this._connections.filter((x) => ids.has(x.fOutputId));
+        return this._connections.filter((x) => ids.has(x.fOutputId()));
     }
     _getNodeOutputIds(nodeOrGroup) {
         return this._store.fOutputs
             .filter((x) => nodeOrGroup.isContains(x.hostElement))
-            .map((x) => x.fId);
+            .map((x) => x.fId());
     }
     _createAndSetConnectionToNodeHandler(connection, request) {
         let connectionHandler = this._getExistingConnectionHandler(request.existingConnectionHandlers, connection);
@@ -5614,7 +6029,7 @@ let CreateOutputConnectionHandlerAndSetToNodeHandler = class CreateOutputConnect
     }
     _createConnectionHandler(inputIds, connection) {
         let result;
-        if (inputIds.includes(connection.fInputId)) {
+        if (inputIds.includes(connection.fInputId())) {
             result = new SourceTargetConnectionDragHandler(this._injector, connection);
         }
         else {
@@ -5665,8 +6080,7 @@ let CreateDragModelFromSelection = class CreateDragModelFromSelection {
             .filter((x) => !!x);
     }
     _findNode(hostElement) {
-        return this._store.fNodes
-            .find(n => n.isContains(hostElement));
+        return this._store.fNodes.find((n) => n.isContains(hostElement));
     }
     _collectSelectedAndAllChildren(selectedNodesAndGroups) {
         return selectedNodesAndGroups.reduce((result, x) => {
@@ -5684,15 +6098,13 @@ let CreateDragModelFromSelection = class CreateDragModelFromSelection {
         return flatMap(fNodes, (fNode) => this._getNodeOutputIds(fNode));
     }
     _getNodeOutputIds(fNode) {
-        return this._store.fOutputs.filter((x) => fNode.fId() === x.fNodeId)
-            .map((x) => x.fId);
+        return this._store.fOutputs.filter((x) => fNode.fId() === x.fNodeId).map((x) => x.fId());
     }
     _getAllInputIds(fNodes) {
         return flatMap(fNodes, (fNode) => this._getNodeInputIds(fNode));
     }
     _getNodeInputIds(fNode) {
-        return this._store.fInputs.filter((x) => fNode.fId() === x.fNodeId)
-            .map((x) => x.fId);
+        return this._store.fInputs.filter((x) => fNode.fId() === x.fNodeId).map((x) => x.fId());
     }
     _setConnectionsHandlersToNodes(dragHandlers, outputIds, inputIds) {
         const existingConnectionHandlers = [];
@@ -5701,7 +6113,7 @@ let CreateDragModelFromSelection = class CreateDragModelFromSelection {
             this._mediator.execute(new CreateInputConnectionHandlerAndSetToNodeHandlerRequest(x, outputIds, existingConnectionHandlers));
         });
     }
-    _createSummaryDragHandler({ roots, list }) {
+    _createSummaryDragHandler({ roots, list, }) {
         return this._mediator.execute(new CreateSummaryDragHandlerRequest(roots, list));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CreateDragModelFromSelection, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -7575,7 +7987,7 @@ class FNodeRotatePreparationRequest {
 }
 
 let FNodeRotatePreparationExecution = class FNodeRotatePreparationExecution {
-    _fMediator = inject(FMediator);
+    _mediator = inject(FMediator);
     _store = inject(FComponentsStore);
     _dragContext = inject(FDraggableDataContext);
     _injector = inject(Injector);
@@ -7593,45 +8005,57 @@ let FNodeRotatePreparationExecution = class FNodeRotatePreparationExecution {
         this._selectAndUpdateNodeLayer();
         this._dragContext.onPointerDownScale = this._transform.scale;
         this._dragContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
-            .elementTransform(this._fHost).div(this._transform.scale);
+            .elementTransform(this._fHost)
+            .div(this._transform.scale);
         this._dragContext.draggableItems = [
             new FNodeRotateDragHandler(this._injector, this._fNode, this._calculateOutputConnectionsDragHandlers(), this._calculateInputConnectionsDragHandlers()),
         ];
     }
     _isValid(request) {
-        return this._dragContext.isEmpty()
-            && isRotateHandle(request.event.targetElement)
-            && this._isNodeCanBeDragged(this._getNode(request.event.targetElement));
+        return (this._dragContext.isEmpty() &&
+            isRotateHandle(request.event.targetElement) &&
+            this._isNodeCanBeDragged(this._getNode(request.event.targetElement)));
     }
     _isNodeCanBeDragged(fNode) {
         return !!fNode && !fNode.fDraggingDisabled();
     }
     _getNode(element) {
-        this._fNode = this._store
-            .fNodes.find(x => x.isContains(element));
+        this._fNode = this._store.fNodes.find((x) => x.isContains(element));
         return this._fNode;
     }
     _isValidTrigger(request) {
         return isValidEventTrigger(request.event.originalEvent, request.fTrigger);
     }
     _selectAndUpdateNodeLayer() {
-        this._fMediator.execute(new SelectAndUpdateNodeLayerRequest(this._fNode));
+        this._mediator.execute(new SelectAndUpdateNodeLayerRequest(this._fNode));
     }
     _calculateInputConnectionsDragHandlers() {
-        return this._fMediator.execute(new CalculateInputConnectionsRequest(this._fNode)).map((x) => {
-            const connector = this._store.fInputs.find((y) => y.fId === x.fInputId).hostElement;
+        return this._mediator
+            .execute(new CalculateInputConnectionsRequest(this._fNode))
+            .map((x) => {
+            const connector = this._store.fInputs.find((y) => y.fId() === x.fInputId())?.hostElement;
+            if (!connector) {
+                throw new Error(`Connector with id ${x.fInputId()} not found`);
+            }
             return {
                 connection: new TargetConnectionDragHandler(this._injector, x),
-                connector: this._fMediator.execute(new GetNormalizedElementRectRequest(connector)).gravityCenter,
+                connector: this._mediator.execute(new GetNormalizedElementRectRequest(connector))
+                    .gravityCenter,
             };
         });
     }
     _calculateOutputConnectionsDragHandlers() {
-        return this._fMediator.execute(new CalculateOutputConnectionsRequest(this._fNode)).map((x) => {
-            const connector = this._store.fOutputs.find((y) => y.fId === x.fOutputId).hostElement;
+        return this._mediator
+            .execute(new CalculateOutputConnectionsRequest(this._fNode))
+            .map((x) => {
+            const connector = this._store.fOutputs.find((y) => y.fId() === x.fOutputId())?.hostElement;
+            if (!connector) {
+                throw new Error(`Connector with id ${x.fOutputId()} not found`);
+            }
             return {
                 connection: new SourceConnectionDragHandler(this._injector, x),
-                connector: this._fMediator.execute(new GetNormalizedElementRectRequest(connector)).gravityCenter,
+                connector: this._mediator.execute(new GetNormalizedElementRectRequest(connector))
+                    .gravityCenter,
             };
         });
     }
@@ -8157,7 +8581,7 @@ function isFakeTouchstartFromScreenReader(event) {
 
 class FDraggableBase extends DragAndDropBase {
     constructor(ngZone) {
-        super(ngZone);
+        super(ngZone || undefined);
     }
 }
 
@@ -8220,15 +8644,12 @@ function isDragBlocker(element) {
 // │   To Start                           │
 // └──────────────────────────────────────┘
 class FDraggableDirective extends FDraggableBase {
-    _elementReference = inject(ElementRef);
-    _fResult = inject(FDragHandlerResult);
+    hostElement = inject(ElementRef).nativeElement;
+    _result = inject(FDragHandlerResult);
     _mediator = inject(FMediator);
     _platform = inject(PlatformService);
     _browser = inject(BrowserService);
     disabled = false;
-    get hostElement() {
-        return this._elementReference.nativeElement;
-    }
     fMultiSelectTrigger = (event) => {
         return this._platform.getOS() === EOperationSystem.MAC_OS ? event.metaKey : event.ctrlKey;
     };
@@ -8275,10 +8696,8 @@ class FDraggableDirective extends FDraggableBase {
     fDragEnded = new EventEmitter();
     _beforePlugins;
     _afterPlugins;
-    constructor(
-    // eslint-disable-next-line @angular-eslint/prefer-inject
-    ngZone) {
-        super(ngZone);
+    constructor() {
+        super(inject(NgZone, { optional: true }));
     }
     ngOnInit() {
         this._mediator.execute(new AddDndToStoreRequest(this));
@@ -8290,7 +8709,7 @@ class FDraggableDirective extends FDraggableBase {
         if (isDragBlocker(event.targetElement)) {
             return false;
         }
-        this._fResult.clear();
+        this._result.clear();
         this._mediator.execute(new InitializeDragSequenceRequest());
         this._beforePlugins.forEach((p) => p.onPointerDown?.(event));
         this._mediator.execute(new FSingleSelectRequest(event, this.fMultiSelectTrigger));
@@ -8335,13 +8754,13 @@ class FDraggableDirective extends FDraggableBase {
     }
     finalizeDragSequence() {
         this._mediator.execute(new EmitSelectionChangeEventRequest());
-        this._fResult.clear();
+        this._result.clear();
     }
     ngOnDestroy() {
         this._mediator.execute(new RemoveDndFromStoreRequest());
         super.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FDraggableDirective, deps: [{ token: NgZone, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FDraggableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: FDraggableDirective, selector: "f-flow[fDraggable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "fDraggableDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fMultiSelectTrigger: { classPropertyName: "fMultiSelectTrigger", publicName: "fMultiSelectTrigger", isSignal: false, isRequired: false, transformFunction: null }, fReassignConnectionTrigger: { classPropertyName: "fReassignConnectionTrigger", publicName: "fReassignConnectionTrigger", isSignal: false, isRequired: false, transformFunction: null }, fCreateConnectionTrigger: { classPropertyName: "fCreateConnectionTrigger", publicName: "fCreateConnectionTrigger", isSignal: false, isRequired: false, transformFunction: null }, fNodeResizeTrigger: { classPropertyName: "fNodeResizeTrigger", publicName: "fNodeResizeTrigger", isSignal: false, isRequired: false, transformFunction: null }, fNodeRotateTrigger: { classPropertyName: "fNodeRotateTrigger", publicName: "fNodeRotateTrigger", isSignal: false, isRequired: false, transformFunction: null }, fNodeMoveTrigger: { classPropertyName: "fNodeMoveTrigger", publicName: "fNodeMoveTrigger", isSignal: false, isRequired: false, transformFunction: null }, fCanvasMoveTrigger: { classPropertyName: "fCanvasMoveTrigger", publicName: "fCanvasMoveTrigger", isSignal: false, isRequired: false, transformFunction: null }, fExternalItemTrigger: { classPropertyName: "fExternalItemTrigger", publicName: "fExternalItemTrigger", isSignal: false, isRequired: false, transformFunction: null }, fEmitOnNodeIntersect: { classPropertyName: "fEmitOnNodeIntersect", publicName: "fEmitOnNodeIntersect", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, vCellSize: { classPropertyName: "vCellSize", publicName: "vCellSize", isSignal: true, isRequired: false, transformFunction: null }, hCellSize: { classPropertyName: "hCellSize", publicName: "hCellSize", isSignal: true, isRequired: false, transformFunction: null }, fCellSizeWhileDragging: { classPropertyName: "fCellSizeWhileDragging", publicName: "fCellSizeWhileDragging", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fSelectionChange: "fSelectionChange", fNodeIntersectedWithConnections: "fNodeIntersectedWithConnections", fCreateNode: "fCreateNode", fMoveNodes: "fMoveNodes", fReassignConnection: "fReassignConnection", fCreateConnection: "fCreateConnection", fDropToGroup: "fDropToGroup", fDragStarted: "fDragStarted", fDragEnded: "fDragEnded" }, providers: [FDragHandlerResult], queries: [{ propertyName: "_beforePlugins", predicate: F_BEFORE_MAIN_PLUGIN, descendants: true }, { propertyName: "_afterPlugins", predicate: F_AFTER_MAIN_PLUGIN, descendants: true }], exportAs: ["fDraggable"], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FDraggableDirective, decorators: [{
@@ -8351,12 +8770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     exportAs: 'fDraggable',
                     providers: [FDragHandlerResult],
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NgZone]
-                }, {
-                    type: Optional
-                }] }], propDecorators: { disabled: [{
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute, alias: 'fDraggableDisabled' }]
             }], fMultiSelectTrigger: [{
@@ -9827,14 +10241,14 @@ class GetFlowStateConnectionsRequest {
  */
 let GetFlowStateConnectionsExecution = class GetFlowStateConnectionsExecution {
     _store = inject(FComponentsStore);
-    handle(request) {
+    handle(_request) {
         return this._store.fConnections.map(this._mapToConnectionState);
     }
     _mapToConnectionState(x) {
         return {
             id: x.fId(),
-            fOutputId: x.fOutputId,
-            fInputId: x.fInputId,
+            fOutputId: x.fOutputId(),
+            fInputId: x.fInputId(),
             fType: x.fType,
             fBehavior: x.fBehavior,
             isSelected: x.isSelected(),
@@ -9864,7 +10278,9 @@ class GetFlowStateNodesRequest {
 let GetFlowStateNodesExecution = class GetFlowStateNodesExecution {
     _store = inject(FComponentsStore);
     handle(request) {
-        return this._store.fNodes.filter((x) => x instanceof request.type).map((x) => {
+        return this._store.fNodes
+            .filter((x) => x instanceof request.type)
+            .map((x) => {
             return {
                 id: x.fId(),
                 parent: x.fParentId(),
@@ -9878,17 +10294,21 @@ let GetFlowStateNodesExecution = class GetFlowStateNodesExecution {
         });
     }
     _getOutputs(hostElement) {
-        return this._store.fOutputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
+        return this._store.fOutputs
+            .filter((x) => hostElement.contains(x.hostElement))
+            .map((x) => {
             return {
-                id: x.fId,
+                id: x.fId(),
                 fConnectableSide: x.fConnectableSide,
             };
         });
     }
     _getInputs(hostElement) {
-        return this._store.fInputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
+        return this._store.fInputs
+            .filter((x) => hostElement.contains(x.hostElement))
+            .map((x) => {
             return {
-                id: x.fId,
+                id: x.fId(),
                 fConnectableSide: x.fConnectableSide,
             };
         });
@@ -10080,13 +10500,10 @@ let CalculateInputConnections = class CalculateInputConnections {
         return this._calculateConnections(new Set(this._calculateConnectors(request.fNode)));
     }
     _calculateConnectors(fNode) {
-        return this._store.fInputs
-            .filter((x) => fNode.isContains(x.hostElement))
-            .map((x) => x.fId);
+        return this._store.fInputs.filter((x) => fNode.isContains(x.hostElement)).map((x) => x.fId());
     }
     _calculateConnections(ids) {
-        return this._store.fConnections
-            .filter((x) => ids.has(x.fInputId));
+        return this._store.fConnections.filter((x) => ids.has(x.fInputId()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateInputConnections, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateInputConnections });
@@ -10180,13 +10597,10 @@ let CalculateOutputConnections = class CalculateOutputConnections {
         return this._calculateConnections(new Set(this._calculateConnectors(request.fNode)));
     }
     _calculateConnectors(fNode) {
-        return this._store.fOutputs
-            .filter((x) => fNode.isContains(x.hostElement))
-            .map((x) => x.fId);
+        return this._store.fOutputs.filter((x) => fNode.isContains(x.hostElement)).map((x) => x.fId());
     }
     _calculateConnections(ids) {
-        return this._store.fConnections
-            .filter((x) => ids.has(x.fOutputId));
+        return this._store.fConnections.filter((x) => ids.has(x.fOutputId()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateOutputConnections, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalculateOutputConnections });
@@ -11798,5 +12212,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddBackgroundToStoreExecution, AddBackgroundToStoreRequest, AddCanvasToStoreExecution, AddCanvasToStoreRequest, AddConnectionForCreateToStoreExecution, AddConnectionForCreateToStoreRequest, AddConnectionMarkerToStoreExecution, AddConnectionMarkerToStoreRequest, AddConnectionToStoreExecution, AddConnectionToStoreRequest, AddDndToStoreExecution, AddDndToStoreRequest, AddFlowToStoreExecution, AddFlowToStoreRequest, AddInputToStoreExecution, AddInputToStoreRequest, AddLineAlignmentToStoreExecution, AddLineAlignmentToStoreRequest, AddNodeToStore, AddNodeToStoreRequest, AddOutletToStoreExecution, AddOutletToStoreRequest, AddOutputToStoreExecution, AddOutputToStoreRequest, AddPatternToBackgroundExecution, AddPatternToBackgroundRequest, AddSnapConnectionToStoreExecution, AddSnapConnectionToStoreRequest, AddZoomToStoreExecution, AddZoomToStoreRequest, ApplyChildResizeConstraints, ApplyChildResizeConstraintsRequest, ApplyParentResizeConstraints, ApplyParentResizeConstraintsRequest, BaseConnectionDragHandler, BuildDragHierarchy, BuildDragHierarchyRequest, BuildDragHierarchyResponse, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateChangedRectFromDifference, CalculateChangedRectFromDifferenceRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectionLineByBehaviorExecution, CalculateConnectionLineByBehaviorRequest, CalculateDirectChildrenUnionRect, CalculateDirectChildrenUnionRectRequest, CalculateDragLimits, CalculateDragLimitsRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CalculateInputConnections, CalculateInputConnectionsRequest, CalculateNodesBoundingBox, CalculateNodesBoundingBoxNormalizedPosition, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CalculateOutputConnections, CalculateOutputConnectionsRequest, CalculateResizeLimits, CalculateResizeLimitsRequest, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateDragModelFromSelection, CreateDragModelFromSelectionRequest, CreateInputConnectionHandlerAndSetToNodeHandler, CreateInputConnectionHandlerAndSetToNodeHandlerRequest, CreateOutputConnectionHandlerAndSetToNodeHandler, CreateOutputConnectionHandlerAndSetToNodeHandlerRequest, CreateSnapLines, CreateSnapLinesRequest, CreateSummaryDragHandler, CreateSummaryDragHandlerRequest, DRAG_AND_DROP_COMMON_PROVIDERS, Deprecated, DragAndDropBase, DragConstraintPipeline, DropToGroupFinalize, DropToGroupFinalizeRequest, DropToGroupPreparation, DropToGroupPreparationRequest, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EFZoomDirection, EmitSelectionChangeEventExecution, EmitSelectionChangeEventRequest, EndDragSequenceExecution, EndDragSequenceRequest, EventExtensions, ExternalRectConstraint, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCanvasDragHandler, FCanvasMoveFinalizeExecution, FCanvasMoveFinalizeRequest, FCanvasMovePreparationExecution, FCanvasMovePreparationRequest, FChannel, FChannelHub, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionDragHandleEndComponent, FConnectionDragHandleStartComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionDragHandler, FCreateConnectionDragHandlerPreparationExecution, FCreateConnectionDragHandlerPreparationRequest, FCreateConnectionEvent, FCreateConnectionFinalizeExecution, FCreateConnectionFinalizeRequest, FCreateConnectionFromOutletPreparationExecution, FCreateConnectionFromOutletPreparationRequest, FCreateConnectionFromOutputPreparationExecution, FCreateConnectionFromOutputPreparationRequest, FCreateConnectionPreparationExecution, FCreateConnectionPreparationRequest, FCreateNodeEvent, FDragBlockerDirective, FDragHandleDirective, FDragHandlerResult, FDragStartedEvent, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItemBase, FExternalItemCreatePlaceholderExecution, FExternalItemCreatePlaceholderRequest, FExternalItemCreatePreviewExecution, FExternalItemCreatePreviewRequest, FExternalItemDirective, FExternalItemDragHandler, FExternalItemFinalizeExecution, FExternalItemFinalizeRequest, FExternalItemPlaceholderDirective, FExternalItemPreparationExecution, FExternalItemPreparationRequest, FExternalItemPreviewDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FMoveNodesEvent, FNodeBase, FNodeDirective, FNodeDropToGroupDragHandler, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeMoveFinalizeExecution, FNodeMoveFinalizeRequest, FNodeMovePreparationExecution, FNodeMovePreparationRequest, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FNodeRotateDragHandler, FNodeRotateFinalizeExecution, FNodeRotateFinalizeRequest, FNodeRotatePreparationExecution, FNodeRotatePreparationRequest, FReassignConnectionDragHandler, FReassignConnectionEvent, FReassignConnectionFinalizeExecution, FReassignConnectionFinalizeRequest, FReassignConnectionPreparationExecution, FReassignConnectionPreparationRequest, FReassignSourceDragHandler, FReassignTargetDragHandler, FRectPatternComponent, FResizeChannel, FResizeHandleDirective, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSingleSelectExecution, FSingleSelectRequest, FSnapConnectionComponent, FStraightPathBuilder, FZoomBase, FZoomDirective, F_AFTER_MAIN_PLUGIN, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_BEFORE_MAIN_PLUGIN, F_CANVAS, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_FEATURES, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_FEATURES, F_CONNECTORS_PROVIDERS, F_CSS_CLASS, F_DRAGGABLE_FEATURES, F_DRAGGABLE_PROVIDERS, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_FEATURES, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_FEATURES, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_FEATURES, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_SELECTED_CLASS, F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS, F_SELECTION_AREA_PROVIDERS, F_SELECTION_FEATURES, F_STORAGE_PROVIDERS, F_ZOOM, F_ZOOM_FEATURES, F_ZOOM_PROVIDERS, F_ZOOM_TAG, FindClosestConnectorExecution, FindClosestConnectorRequest, FindConnectableConnectorUsingPriorityAndPositionExecution, FindConnectableConnectorUsingPriorityAndPositionRequest, FitToChildNodesAndGroups, FitToChildNodesAndGroupsRequest, FitToFlowExecution, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetAllCanBeConnectedInputsAndRectsExecution, GetAllCanBeConnectedInputsAndRectsRequest, GetAllCanBeConnectedSourceConnectorsAndRectsExecution, GetAllCanBeConnectedSourceConnectorsAndRectsRequest, GetCanBeSelectedItemsExecution, GetCanBeSelectedItemsRequest, GetCanvasExecution, GetCanvasRequest, GetChildNodeIds, GetChildNodeIdsRequest, GetConnectorAndRectExecution, GetConnectorAndRectRequest, GetCurrentSelectionExecution, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRoundedRectExecution, GetElementRoundedRectRequest, GetFirstConnectableOutputExecution, GetFirstConnectableOutputRequest, GetFlowExecution, GetFlowHostElementExecution, GetFlowHostElementRequest, GetFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetNodeBoundingIncludePaddings, GetNodeBoundingIncludePaddingsRequest, GetNodeBoundingIncludePaddingsResponse, GetNodePadding, GetNodePaddingRequest, GetNodes, GetNodesRequest, GetNormalizedConnectorRectExecution, GetNormalizedConnectorRectRequest, GetNormalizedElementRectExecution, GetNormalizedElementRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetNormalizedPointExecution, GetNormalizedPointRequest, GetParentNodes, GetParentNodesRequest, IMouseEvent, IPointerEvent, IPointerUpEvent, ITouchDownEvent, ITouchMoveEvent, InitializeDragSequenceExecution, InitializeDragSequenceRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, IsConnectionUnderNodeRequest, IsDragStarted, IsDragStartedRequest, ListenCountChangesExecution, ListenCountChangesRequest, ListenDataChangesExecution, ListenDataChangesRequest, ListenTransformChangesExecution, ListenTransformChangesRequest, LogExecutionTime, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MOUSE_EVENT_IGNORE_TIME, MarkConnectableConnectorsExecution, MarkConnectableConnectorsRequest, MinimapCalculateSvgScaleAndViewBoxExecution, MinimapCalculateSvgScaleAndViewBoxRequest, MinimapCalculateViewBoxExecution, MinimapCalculateViewBoxRequest, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDrawNodesExecution, MinimapDrawNodesRequest, MoveDragHandler, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, MoveSummaryDragHandler, NODE_DROP_TO_GROUP_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_PROVIDERS, NODE_ROTATE_PROVIDERS, NodeResizeDragHandler, NodeResizeFinalize, NodeResizeFinalizeRequest, NodeResizePreparation, NodeResizePreparationRequest, NotifyDataChangedExecution, NotifyDataChangedRequest, NotifyTransformChangedExecution, NotifyTransformChangedRequest, OnPointerMoveExecution, OnPointerMoveRequest, PrepareDragSequenceExecution, PrepareDragSequenceRequest, PreventDefaultIsExternalItemExecution, PreventDefaultIsExternalItemRequest, RESIZE_DIRECTIONS, RectConstraint, RedrawCanvasWithAnimationExecution, RedrawCanvasWithAnimationRequest, RedrawConnectionsExecution, RedrawConnectionsRequest, RemoveBackgroundFromStoreExecution, RemoveBackgroundFromStoreRequest, RemoveCanvasFromStoreExecution, RemoveCanvasFromStoreRequest, RemoveConnectionForCreateFromStoreExecution, RemoveConnectionForCreateFromStoreRequest, RemoveConnectionFromStoreExecution, RemoveConnectionFromStoreRequest, RemoveConnectionMarkerFromStoreExecution, RemoveConnectionMarkerFromStoreRequest, RemoveDndFromStoreExecution, RemoveDndFromStoreRequest, RemoveFlowFromStoreExecution, RemoveFlowFromStoreRequest, RemoveInputFromStoreExecution, RemoveInputFromStoreRequest, RemoveLineAlignmentFromStoreExecution, RemoveLineAlignmentFromStoreRequest, RemoveNodeFromStore, RemoveNodeFromStoreRequest, RemoveOutletFromStoreExecution, RemoveOutletFromStoreRequest, RemoveOutputFromStoreExecution, RemoveOutputFromStoreRequest, RemoveSnapConnectionFromStoreExecution, RemoveSnapConnectionFromStoreRequest, RemoveZoomFromStoreExecution, RemoveZoomFromStoreRequest, ResetScaleAndCenterExecution, ResetScaleAndCenterRequest, ResetScaleExecution, ResetScaleRequest, ResetZoomExecution, ResetZoomRequest, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SetBackgroundTransformExecution, SetBackgroundTransformRequest, SetZoomExecution, SetZoomRequest, SnapLineElement, SnapLineService, SnapLinesDragHandler, SnapToGrid, SortContainersForDropByLayer, SortContainersForDropByLayerRequest, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, SourceConnectionDragHandler, SourceTargetConnectionDragHandler, StartDragSequenceExecution, StartDragSequenceRequest, TargetConnectionDragHandler, UnmarkConnectableConnectorsExecution, UnmarkConnectableConnectorsRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChanged, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScaleExecution, UpdateScaleRequest, createSVGElement, debounceTime, defaultEventTrigger, expandRectFromBaseline, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, infinityMinMax, isClosestConnectorInsideSnapThreshold, isDragBlocker, isDragHandleEnd, isDragHandleStart, isExternalItem, isMobile, isNode, isNodeOutlet, isNodeOutput, isPointerInsideStartOrEndDragHandles, isRotateHandle, isValidEventTrigger, mixinChangeSelection, mixinChangeVisibility, notifyOnStart, roundedRectFromPoint, transitionEnd };
+export { AddBackgroundToStoreExecution, AddBackgroundToStoreRequest, AddCanvasToStoreExecution, AddCanvasToStoreRequest, AddConnectionForCreateToStoreExecution, AddConnectionForCreateToStoreRequest, AddConnectionMarkerToStoreExecution, AddConnectionMarkerToStoreRequest, AddConnectionToStoreExecution, AddConnectionToStoreRequest, AddDndToStoreExecution, AddDndToStoreRequest, AddFlowToStoreExecution, AddFlowToStoreRequest, AddInputToStore, AddInputToStoreRequest, AddLineAlignmentToStoreExecution, AddLineAlignmentToStoreRequest, AddNodeToStore, AddNodeToStoreRequest, AddOutletToStore, AddOutletToStoreRequest, AddOutputToStore, AddOutputToStoreRequest, AddPatternToBackgroundExecution, AddPatternToBackgroundRequest, AddSnapConnectionToStoreExecution, AddSnapConnectionToStoreRequest, AddZoomToStoreExecution, AddZoomToStoreRequest, ApplyChildResizeConstraints, ApplyChildResizeConstraintsRequest, ApplyParentResizeConstraints, ApplyParentResizeConstraintsRequest, BaseConnectionDragHandler, BuildDragHierarchy, BuildDragHierarchyRequest, BuildDragHierarchyResponse, CANVAS_PROVIDERS, COMMON_PROVIDERS, CONNECTIONS_PROVIDERS, CONNECTION_GRADIENT, CONNECTION_PATH, CONNECTION_TEXT, CREATE_MOVE_NODE_DRAG_MODEL_FROM_SELECTION_PROVIDERS, CalculateCenterBetweenPointsHandler, CalculateCenterBetweenPointsRequest, CalculateChangedRectFromDifference, CalculateChangedRectFromDifferenceRequest, CalculateClosestConnector, CalculateClosestConnectorRequest, CalculateConnectionCenterHandler, CalculateConnectionCenterRequest, CalculateConnectionLineByBehavior, CalculateConnectionLineByBehaviorRequest, CalculateDirectChildrenUnionRect, CalculateDirectChildrenUnionRectRequest, CalculateDragLimits, CalculateDragLimitsRequest, CalculateFlowPointFromMinimapPointExecution, CalculateFlowPointFromMinimapPointRequest, CalculateInputConnections, CalculateInputConnectionsRequest, CalculateNodesBoundingBox, CalculateNodesBoundingBoxNormalizedPosition, CalculateNodesBoundingBoxNormalizedPositionRequest, CalculateNodesBoundingBoxRequest, CalculateOutputConnections, CalculateOutputConnectionsRequest, CalculateResizeLimits, CalculateResizeLimitsRequest, CenterGroupOrNodeExecution, CenterGroupOrNodeRequest, ClearSelectionExecution, ClearSelectionRequest, ConnectionContentLayoutEngine, CreateConnectionMarkersExecution, CreateConnectionMarkersRequest, CreateDragModelFromSelection, CreateDragModelFromSelectionRequest, CreateInputConnectionHandlerAndSetToNodeHandler, CreateInputConnectionHandlerAndSetToNodeHandlerRequest, CreateOutputConnectionHandlerAndSetToNodeHandler, CreateOutputConnectionHandlerAndSetToNodeHandlerRequest, CreateSnapLines, CreateSnapLinesRequest, CreateSummaryDragHandler, CreateSummaryDragHandlerRequest, DRAG_AND_DROP_COMMON_PROVIDERS, Deprecated, DragAndDropBase, DragConstraintPipeline, DropToGroupFinalize, DropToGroupFinalizeRequest, DropToGroupPreparation, DropToGroupPreparationRequest, EFConnectableSide, EFConnectionBehavior, EFConnectionType, EFMarkerType, EFResizeHandleType, EFZoomDirection, EmitSelectionChangeEventExecution, EmitSelectionChangeEventRequest, EndDragSequenceExecution, EndDragSequenceRequest, EventExtensions, ExternalRectConstraint, FBackgroundBase, FBackgroundComponent, FBezierPathBuilder, FCanvasBase, FCanvasChangeEvent, FCanvasComponent, FCanvasDragHandler, FCanvasMoveFinalizeExecution, FCanvasMoveFinalizeRequest, FCanvasMovePreparationExecution, FCanvasMovePreparationRequest, FChannel, FChannelHub, FCirclePatternComponent, FComponentsStore, FConnectionBase, FConnectionCenterDirective, FConnectionComponent, FConnectionContent, FConnectionDragHandleEndComponent, FConnectionDragHandleStartComponent, FConnectionFactory, FConnectionForCreateComponent, FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectorBase, FCreateConnectionDragHandler, FCreateConnectionDragHandlerPreparationExecution, FCreateConnectionDragHandlerPreparationRequest, FCreateConnectionEvent, FCreateConnectionFinalizeExecution, FCreateConnectionFinalizeRequest, FCreateConnectionFromOutletPreparationExecution, FCreateConnectionFromOutletPreparationRequest, FCreateConnectionFromOutputPreparationExecution, FCreateConnectionFromOutputPreparationRequest, FCreateConnectionPreparationExecution, FCreateConnectionPreparationRequest, FCreateNodeEvent, FDragBlockerDirective, FDragHandleDirective, FDragHandlerResult, FDragStartedEvent, FDraggableBase, FDraggableDataContext, FDraggableDirective, FDropToGroupEvent, FExternalItemBase, FExternalItemCreatePlaceholderExecution, FExternalItemCreatePlaceholderRequest, FExternalItemCreatePreviewExecution, FExternalItemCreatePreviewRequest, FExternalItemDirective, FExternalItemDragHandler, FExternalItemFinalizeExecution, FExternalItemFinalizeRequest, FExternalItemPlaceholderDirective, FExternalItemPreparationExecution, FExternalItemPreparationRequest, FExternalItemPreviewDirective, FExternalItemService, FFlowBase, FFlowComponent, FFlowModule, FGroupDirective, FLineAlignmentBase, FLineAlignmentComponent, FMarkerBase, FMarkerDirective, FMinimapCanvasDirective, FMinimapComponent, FMinimapData, FMinimapDragHandler, FMinimapFlowDirective, FMinimapViewDirective, FMoveNodesEvent, FNodeBase, FNodeDirective, FNodeDropToGroupDragHandler, FNodeInputBase, FNodeInputDirective, FNodeIntersectedWithConnections, FNodeMoveFinalizeExecution, FNodeMoveFinalizeRequest, FNodeMovePreparationExecution, FNodeMovePreparationRequest, FNodeOutletBase, FNodeOutletDirective, FNodeOutputBase, FNodeOutputDirective, FNodeRotateDragHandler, FNodeRotateFinalizeExecution, FNodeRotateFinalizeRequest, FNodeRotatePreparationExecution, FNodeRotatePreparationRequest, FReassignConnectionDragHandler, FReassignConnectionEvent, FReassignConnectionFinalizeExecution, FReassignConnectionFinalizeRequest, FReassignConnectionPreparationExecution, FReassignConnectionPreparationRequest, FReassignSourceDragHandler, FReassignTargetDragHandler, FRectPatternComponent, FResizeChannel, FResizeHandleDirective, FRotateHandleDirective, FSegmentPathBuilder, FSelectionAreaBase, FSelectionAreaComponent, FSelectionChangeEvent, FSingleSelectExecution, FSingleSelectRequest, FSnapConnectionComponent, FSourceConnectorBase, FStraightPathBuilder, FZoomBase, FZoomDirective, F_AFTER_MAIN_PLUGIN, F_BACKGROUND, F_BACKGROUND_FEATURES, F_BACKGROUND_PATTERN, F_BACKGROUND_PROVIDERS, F_BEFORE_MAIN_PLUGIN, F_CANVAS, F_CANVAS_FEATURES, F_CANVAS_PROVIDERS, F_CONNECTION_BUILDERS, F_CONNECTION_FEATURES, F_CONNECTION_IDENTIFIERS, F_CONNECTION_PROVIDERS, F_CONNECTORS_FEATURES, F_CONNECTORS_PROVIDERS, F_CSS_CLASS, F_DRAGGABLE_FEATURES, F_DRAGGABLE_PROVIDERS, F_EXTERNAL_ITEM, F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS, F_EXTERNAL_ITEM_PROVIDERS, F_FLOW, F_FLOW_FEATURES, F_FLOW_PROVIDERS, F_LINE_ALIGNMENT, F_LINE_ALIGNMENT_FEATURES, F_LINE_ALIGNMENT_PROVIDERS, F_MARKER, F_MINIMAP_DRAG_AND_DROP_PROVIDERS, F_MINIMAP_PROVIDERS, F_NODE, F_NODE_FEATURES, F_NODE_INPUT, F_NODE_OUTLET, F_NODE_OUTPUT, F_NODE_PROVIDERS, F_SELECTED_CLASS, F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS, F_SELECTION_AREA_PROVIDERS, F_SELECTION_FEATURES, F_STORAGE_PROVIDERS, F_ZOOM, F_ZOOM_FEATURES, F_ZOOM_PROVIDERS, F_ZOOM_TAG, FindConnectableConnectorUsingPriorityAndPositionExecution, FindConnectableConnectorUsingPriorityAndPositionRequest, FitToChildNodesAndGroups, FitToChildNodesAndGroupsRequest, FitToFlowExecution, FitToFlowRequest, GET_FLOW_STATE_PROVIDERS, GetAllCanBeConnectedInputsAndRectsExecution, GetAllCanBeConnectedInputsAndRectsRequest, GetAllCanBeConnectedSourceConnectorsAndRectsExecution, GetAllCanBeConnectedSourceConnectorsAndRectsRequest, GetCanBeSelectedItemsExecution, GetCanBeSelectedItemsRequest, GetCanvasExecution, GetCanvasRequest, GetChildNodeIds, GetChildNodeIdsRequest, GetConnectorAndRect, GetConnectorAndRectRequest, GetCurrentSelectionExecution, GetCurrentSelectionRequest, GetDeepChildrenNodesAndGroupsExecution, GetDeepChildrenNodesAndGroupsRequest, GetElementRoundedRectExecution, GetElementRoundedRectRequest, GetFirstConnectableOutputExecution, GetFirstConnectableOutputRequest, GetFlowExecution, GetFlowHostElementExecution, GetFlowHostElementRequest, GetFlowRequest, GetFlowStateConnectionsExecution, GetFlowStateConnectionsRequest, GetFlowStateExecution, GetFlowStateNodesExecution, GetFlowStateNodesRequest, GetFlowStateRequest, GetNodeBoundingIncludePaddings, GetNodeBoundingIncludePaddingsRequest, GetNodeBoundingIncludePaddingsResponse, GetNodePadding, GetNodePaddingRequest, GetNodes, GetNodesRequest, GetNormalizedConnectorRectExecution, GetNormalizedConnectorRectRequest, GetNormalizedElementRectExecution, GetNormalizedElementRectRequest, GetNormalizedParentNodeRectExecution, GetNormalizedParentNodeRectRequest, GetNormalizedPointExecution, GetNormalizedPointRequest, GetParentNodes, GetParentNodesRequest, IMouseEvent, IPointerEvent, IPointerUpEvent, ITouchDownEvent, ITouchMoveEvent, InitializeDragSequenceExecution, InitializeDragSequenceRequest, InputCanvasPositionExecution, InputCanvasPositionRequest, InputCanvasScaleExecution, InputCanvasScaleRequest, IsArrayHasParentNodeExecution, IsArrayHasParentNodeRequest, IsConnectionUnderNodeExecution, IsConnectionUnderNodeRequest, IsDragStarted, IsDragStartedRequest, ListenCountChangesExecution, ListenCountChangesRequest, ListenDataChangesExecution, ListenDataChangesRequest, ListenTransformChangesExecution, ListenTransformChangesRequest, LogExecutionTime, MINIMAP_DRAG_FINALIZE_PROVIDERS, MINIMAP_DRAG_PREPARATION_PROVIDERS, MOUSE_EVENT_IGNORE_TIME, MarkConnectableConnectors, MarkConnectableConnectorsRequest, MinimapCalculateSvgScaleAndViewBoxExecution, MinimapCalculateSvgScaleAndViewBoxRequest, MinimapCalculateViewBoxExecution, MinimapCalculateViewBoxRequest, MinimapDragFinalizeExecution, MinimapDragFinalizeRequest, MinimapDragPreparationExecution, MinimapDragPreparationRequest, MinimapDrawNodesExecution, MinimapDrawNodesRequest, MoveDragHandler, MoveFrontElementsBeforeTargetElementExecution, MoveFrontElementsBeforeTargetElementRequest, MoveSummaryDragHandler, NODE_DROP_TO_GROUP_PROVIDERS, NODE_PROVIDERS, NODE_RESIZE_PROVIDERS, NODE_ROTATE_PROVIDERS, NodeResizeDragHandler, NodeResizeFinalize, NodeResizeFinalizeRequest, NodeResizePreparation, NodeResizePreparationRequest, NotifyDataChangedExecution, NotifyDataChangedRequest, NotifyTransformChangedExecution, NotifyTransformChangedRequest, OnPointerMoveExecution, OnPointerMoveRequest, Polyline, PolylineContentAlign, PolylineContentPlace, PolylineSampler, PrepareDragSequenceExecution, PrepareDragSequenceRequest, PreventDefaultIsExternalItemExecution, PreventDefaultIsExternalItemRequest, RESIZE_DIRECTIONS, RectConstraint, RedrawCanvasWithAnimationExecution, RedrawCanvasWithAnimationRequest, RedrawConnectionsExecution, RedrawConnectionsRequest, RemoveBackgroundFromStoreExecution, RemoveBackgroundFromStoreRequest, RemoveCanvasFromStoreExecution, RemoveCanvasFromStoreRequest, RemoveConnectionForCreateFromStoreExecution, RemoveConnectionForCreateFromStoreRequest, RemoveConnectionFromStoreExecution, RemoveConnectionFromStoreRequest, RemoveConnectionMarkerFromStoreExecution, RemoveConnectionMarkerFromStoreRequest, RemoveDndFromStoreExecution, RemoveDndFromStoreRequest, RemoveFlowFromStoreExecution, RemoveFlowFromStoreRequest, RemoveInputFromStore, RemoveInputFromStoreRequest, RemoveLineAlignmentFromStoreExecution, RemoveLineAlignmentFromStoreRequest, RemoveNodeFromStore, RemoveNodeFromStoreRequest, RemoveOutletFromStoreExecution, RemoveOutletFromStoreRequest, RemoveOutputFromStoreExecution, RemoveOutputFromStoreRequest, RemoveSnapConnectionFromStoreExecution, RemoveSnapConnectionFromStoreRequest, RemoveZoomFromStoreExecution, RemoveZoomFromStoreRequest, ResetScaleAndCenterExecution, ResetScaleAndCenterRequest, ResetScaleExecution, ResetScaleRequest, ResetZoomExecution, ResetZoomRequest, SINGLE_SELECT_PROVIDERS, SelectAllExecution, SelectAllRequest, SelectAndUpdateNodeLayerExecution, SelectAndUpdateNodeLayerRequest, SelectExecution, SelectRequest, SelectionAreaDragHandle, SelectionAreaFinalizeExecution, SelectionAreaFinalizeRequest, SelectionAreaPreparationExecution, SelectionAreaPreparationRequest, SetBackgroundTransformExecution, SetBackgroundTransformRequest, SetZoomExecution, SetZoomRequest, SnapLineElement, SnapLineService, SnapLinesDragHandler, SnapToGrid, SortContainersForDropByLayer, SortContainersForDropByLayerRequest, SortItemLayersExecution, SortItemLayersRequest, SortItemsByParentExecution, SortItemsByParentRequest, SortNodeLayersExecution, SortNodeLayersRequest, SourceConnectionDragHandler, SourceTargetConnectionDragHandler, StartDragSequenceExecution, StartDragSequenceRequest, TargetConnectionDragHandler, UnmarkConnectableConnectors, UnmarkConnectableConnectorsRequest, UpdateItemAndChildrenLayersExecution, UpdateItemAndChildrenLayersRequest, UpdateNodeWhenStateOrSizeChanged, UpdateNodeWhenStateOrSizeChangedRequest, UpdateScaleExecution, UpdateScaleRequest, createSVGElement, debounceTime, defaultEventTrigger, expandRectFromBaseline, fixedCenterBehavior, fixedOutboundBehavior, floatingBehavior, getExternalItem, getMarkerEndId, getMarkerSelectedEndId, getMarkerSelectedStartId, getMarkerStartId, infinityMinMax, isClosestConnectorInsideSnapThreshold, isDragBlocker, isDragHandleEnd, isDragHandleStart, isExternalItem, isMobile, isNode, isNodeOutlet, isNodeOutput, isPointerInsideStartOrEndDragHandles, isRotateHandle, isValidEventTrigger, mixinChangeSelection, mixinChangeVisibility, notifyOnStart, roundedRectFromPoint, stringAttribute, transitionEnd };
 //# sourceMappingURL=foblex-flow.mjs.map