@foblex/flow 1.0.9 → 1.1.1

package/fesm2022/foblex-flow.mjs

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Component, ChangeDetectionStrategy, Input, ViewChild, Inject, NgModule, Optional, SkipSelf, EventEmitter, ContentChildren, ContentChild, Output, Injectable } from '@angular/core';
-import { VectorExtensions, Point, PointExtensions, TransformModelExtensions, RectExtensions, SizeExtensions, BooleanExtensions, FResizeObserver, RectFElement, DomElementExtensions, MouseEventExtensions, IDragAndDropBase, LineFElement, EventExtensions } from '@foblex/core';
+import { Directive, Component, ChangeDetectionStrategy, Input, ViewChild, InjectionToken, NgModule, Inject, Optional, SkipSelf, EventEmitter, ContentChildren, ContentChild, Output, Injectable } from '@angular/core';
+import { VectorExtensions, Point, PointExtensions, RectExtensions, TransformModelExtensions, SizeExtensions, BooleanExtensions, FResizeObserver, DomElementExtensions, MouseEventExtensions, IDragAndDropBase, LineFElement, RectFElement, EventExtensions } from '@foblex/core';
 import { Subject, Subscription, startWith, debounceTime, defer, switchMap, merge, take, takeUntil } from 'rxjs';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 const F_SELECTED_CLASS = 'f-selected';
 
-const F_CONNECTION_COMPONENT = new InjectionToken('F_CONNECTION_COMPONENT');
 class FConnectionBase {
     constructor() {
         this.path = '';
@@ -251,7 +250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             }] } });
 
 const F_TEMP_CONNECTION_COMPONENT = new InjectionToken('F_TEMP_CONNECTION_COMPONENT');
-let uniqueId$7 = 0;
+let uniqueId$8 = 0;
 class FTempConnectionComponent extends FConnectionBase {
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -259,7 +258,7 @@ class FTempConnectionComponent extends FConnectionBase {
     constructor(elementReference) {
         super();
         this.elementReference = elementReference;
-        this.id = `f-temp-connection-${uniqueId$7++}`;
+        this.id = `f-temp-connection-${uniqueId$8++}`;
     }
     ngAfterViewInit() {
         this.hostElement.style.display = "none";
@@ -302,6 +301,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                 args: [FConnectionTextComponent, { static: true }]
             }] } });
 
+class TempConnectionInputOutputModel {
+    constructor(output) {
+        this.output = output;
+        this.input = null;
+    }
+}
+
 const F_CONNECTION_DRAG_HANDLE_CLASS = 'f-connection-drag-handle';
 class FConnectionDragHandleComponent {
     get hostElement() {
@@ -361,6 +367,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                 type: Input
             }] } });
 
+class FConnectionCommonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: FConnectionCommonModule, declarations: [FConnectionDragHandleComponent,
+            FConnectionGradientComponent,
+            FConnectionPathComponent,
+            FConnectionTextComponent,
+            FConnectionTextPathDirective,
+            FConnectionSelectionComponent], imports: [CommonModule], exports: [FConnectionDragHandleComponent,
+            FConnectionGradientComponent,
+            FConnectionPathComponent,
+            FConnectionTextComponent,
+            FConnectionTextPathDirective,
+            FConnectionSelectionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionCommonModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionCommonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FConnectionDragHandleComponent,
+                        FConnectionGradientComponent,
+                        FConnectionPathComponent,
+                        FConnectionTextComponent,
+                        FConnectionTextPathDirective,
+                        FConnectionSelectionComponent,
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        FConnectionDragHandleComponent,
+                        FConnectionGradientComponent,
+                        FConnectionPathComponent,
+                        FConnectionTextComponent,
+                        FConnectionTextPathDirective,
+                        FConnectionSelectionComponent,
+                    ]
+                }]
+        }] });
+
+function getConnectionIntersect(fromRect, toRect) {
+    const fromResult = RectExtensions.intersectionWithVector(fromRect, fromRect.gravityCenter, toRect.gravityCenter);
+    const toResult = RectExtensions.intersectionWithVector(toRect, fromRect.gravityCenter, toRect.gravityCenter);
+    return {
+        point1: fromResult ? fromResult[1] : fromRect.gravityCenter,
+        point2: toResult ? toResult[0] : toRect.gravityCenter,
+    };
+}
+
+class FTempConnectionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FTempConnectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: FTempConnectionModule, declarations: [FTempConnectionComponent], imports: [CommonModule,
+            FConnectionCommonModule], exports: [FTempConnectionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FTempConnectionModule, imports: [CommonModule,
+            FConnectionCommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FTempConnectionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FTempConnectionComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FConnectionCommonModule
+                    ],
+                    exports: [
+                        FTempConnectionComponent,
+                    ]
+                }]
+        }] });
+
+const F_CONNECT_IF_INTERSECT = new InjectionToken('F_CONNECT_IF_INTERSECT');
+const F_CONNECTION_COMPONENT = new InjectionToken('F_CONNECTION_COMPONENT');
+
 const F_CANVAS = new InjectionToken('F_CANVAS');
 class FCanvasBase {
     get hostElement() {
@@ -440,58 +521,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     args: [F_CANVAS]
                 }] }]; } });
 
-class TempConnectionInputOutputModel {
-    constructor(output) {
-        this.output = output;
-        this.input = null;
-    }
-}
-
-class FConnectionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: FConnectionModule, declarations: [FTempConnectionComponent,
-            FConnectionComponent,
-            FConnectionDragHandleComponent,
-            FConnectionGradientComponent,
-            FConnectionPathComponent,
-            FConnectionTextComponent,
-            FConnectionTextPathDirective,
-            FConnectionSelectionComponent], imports: [CommonModule], exports: [FTempConnectionComponent,
-            FConnectionComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        FTempConnectionComponent,
-                        FConnectionComponent,
-                        FConnectionDragHandleComponent,
-                        FConnectionGradientComponent,
-                        FConnectionPathComponent,
-                        FConnectionTextComponent,
-                        FConnectionTextPathDirective,
-                        FConnectionSelectionComponent
-                    ],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        FTempConnectionComponent,
-                        FConnectionComponent
-                    ]
-                }]
-        }] });
-
-function getConnectionIntersect(fromRect, toRect) {
-    const fromResult = RectExtensions.intersectionWithVector(fromRect, fromRect.gravityCenter, toRect.gravityCenter);
-    const toResult = RectExtensions.intersectionWithVector(toRect, fromRect.gravityCenter, toRect.gravityCenter);
-    return {
-        point1: fromResult ? fromResult[1] : fromRect.gravityCenter,
-        point2: toResult ? toResult[0] : toRect.gravityCenter,
-    };
-}
-
 function getElementRectInCanvas(element, transform, svgHost) {
     const rect = RectExtensions.fromElement(element);
     const position = Point.fromPoint(rect).matrixTransform(svgHost).sub(transform.scaledPosition).sub(transform.position).div(transform.scale);
@@ -531,7 +560,7 @@ function isNodeInput(element) {
     return !!element.closest('[fNodeInput]');
 }
 
-let uniqueId$6 = 0;
+let uniqueId$7 = 0;
 class FNodeInputDirective extends FNodeInputBase {
     get color() {
         return this.fNodeInputColor || 'black';
@@ -552,7 +581,7 @@ class FNodeInputDirective extends FNodeInputBase {
     constructor(elementReference) {
         super();
         this.elementReference = elementReference;
-        this.id = `f-node-input-${uniqueId$6++}`;
+        this.id = `f-node-input-${uniqueId$7++}`;
         this.multiple = true;
         this.isDisabled = false;
     }
@@ -611,7 +640,7 @@ function isNodeOutlet(element) {
     return !!element.closest('[fNodeOutlet]');
 }
 
-let uniqueId$5 = 0;
+let uniqueId$6 = 0;
 class FNodeOutletDirective extends FNodeOutletBase {
     get disabled() {
         return this.isDisabled;
@@ -629,7 +658,7 @@ class FNodeOutletDirective extends FNodeOutletBase {
     constructor(elementReference) {
         super();
         this.elementReference = elementReference;
-        this.id = `f-node-outlet-${uniqueId$5++}`;
+        this.id = `f-node-outlet-${uniqueId$6++}`;
         this.color = 'black';
         this.name = '';
         this.isDisabled = false;
@@ -683,7 +712,7 @@ function isNodeOutput(element) {
     return !!element.closest('[fNodeOutput]');
 }
 
-let uniqueId$4 = 0;
+let uniqueId$5 = 0;
 class FNodeOutputDirective extends FNodeOutputBase {
     get disabled() {
         return this.isDisabled;
@@ -701,7 +730,7 @@ class FNodeOutputDirective extends FNodeOutputBase {
     constructor(elementReference) {
         super();
         this.elementReference = elementReference;
-        this.id = `f-node-output-${uniqueId$4++}`;
+        this.id = `f-node-output-${uniqueId$5++}`;
         this.color = 'black';
         this.name = '';
         this.isDisabled = false;
@@ -911,7 +940,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                 args: ['fDefaultHeight']
             }] } });
 
-let uniqueId$3 = 0;
+let uniqueId$4 = 0;
 class FNodeComponent extends FNodeBase {
     set position(value) {
         this._position = PointExtensions.castToPoint(value);
@@ -926,7 +955,7 @@ class FNodeComponent extends FNodeBase {
     constructor(elementReference) {
         super();
         this.elementReference = elementReference;
-        this.id = `f-node-${uniqueId$3++}`;
+        this.id = `f-node-${uniqueId$4++}`;
         this.positionChange = new EventEmitter();
     }
     ngOnInit() {
@@ -971,43 +1000,6 @@ function isNode(element) {
     return !!element.closest('[fNode]');
 }
 
-const F_SELECTION = new InjectionToken('F_SELECTION');
-class FSelectionDirective {
-    get hostElement() {
-        return this.elementReference.nativeElement;
-    }
-    constructor(elementReference) {
-        this.elementReference = elementReference;
-        this.fElement = new RectFElement();
-        this.hostElement.appendChild(this.fElement.hostElement);
-    }
-    hide() {
-        this.fElement.hide();
-    }
-    show() {
-        this.fElement.show();
-    }
-    draw(object) {
-        this.fElement.draw(object);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FSelectionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FSelectionDirective, selector: "g[fSelection]", host: { classAttribute: "f-selection f-component" }, providers: [
-            { provide: F_SELECTION, useExisting: FSelectionDirective }
-        ], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FSelectionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "g[fSelection]",
-                    host: {
-                        'class': 'f-selection f-component'
-                    },
-                    providers: [
-                        { provide: F_SELECTION, useExisting: FSelectionDirective }
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
 const F_CONNECTIONS_CONTAINER = new InjectionToken('F_CONNECTIONS_CONTAINER');
 class FConnectionsContainerBase {
     findConnectionWithElement(element) {
@@ -1764,7 +1756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             type: Injectable
         }] });
 
-let uniqueId$2 = 0;
+let uniqueId$3 = 0;
 class FExternalItemDirective extends FExternalItemBase {
     get hostElement() {
         return this.elementReference.nativeElement;
@@ -1773,7 +1765,7 @@ class FExternalItemDirective extends FExternalItemBase {
         super();
         this.elementReference = elementReference;
         this.fExternalItemService = fExternalItemService;
-        this.id = `f-external-item-${uniqueId$2++}`;
+        this.id = `f-external-item-${uniqueId$3++}`;
     }
     ngOnInit() {
         this.fExternalItemService.registerItem(this);
@@ -2110,6 +2102,7 @@ class SelectionOnPointerMove {
         this.type = EDraggableType.SELECTION;
         this.selectedItems = [];
         this.items = [];
+        this.canvasPosition = PointExtensions.initialize();
         const nodeRects = fFlow.fNodesContainer.fNodes.map((x) => {
             return {
                 element: x,
@@ -2125,6 +2118,7 @@ class SelectionOnPointerMove {
         this.items = [...nodeRects, ...lineRects].filter((x) => {
             return !selectedOnStart.includes(x.element);
         });
+        this.canvasPosition = Point.fromPoint(fFlow.transform.position).add(fFlow.transform.scaledPosition);
     }
     initialize() {
         this.fSelection?.show();
@@ -2140,7 +2134,8 @@ class SelectionOnPointerMove {
         this.selectedItems = [];
         this.items.forEach((item) => {
             item.element.deselect();
-            if (RectExtensions.intersectionWithRect(item.rect, RectExtensions.initialize(x, y, width, height))) {
+            const itemRect = RectExtensions.addPoint(item.rect, this.canvasPosition);
+            if (RectExtensions.intersectionWithRect(itemRect, RectExtensions.initialize(x, y, width, height))) {
                 item.element.select();
                 this.selectedItems.push(item.element);
             }
@@ -2514,7 +2509,7 @@ class FLineAlignmentDirective {
         this.fHorizontalLine.hide();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FLineAlignmentDirective, deps: [{ token: F_FLOW_COMPONENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FLineAlignmentDirective, selector: "g[fLineAlignment]", host: { classAttribute: "f-line-alignment f-component" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FLineAlignmentDirective, isStandalone: true, selector: "g[fLineAlignment]", host: { classAttribute: "f-line-alignment f-component" }, providers: [
             { provide: F_LINE_ALIGNMENT, useExisting: FLineAlignmentDirective }
         ], ngImport: i0 }); }
 }
@@ -2522,6 +2517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             type: Directive,
             args: [{
                     selector: "g[fLineAlignment]",
+                    standalone: true,
                     host: {
                         'class': 'f-line-alignment f-component'
                     },
@@ -2534,6 +2530,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     args: [F_FLOW_COMPONENT]
                 }] }, { type: i0.ElementRef }]; } });
 
+const F_SELECTION = new InjectionToken('F_SELECTION');
+class FSelectionDirective {
+    get hostElement() {
+        return this.elementReference.nativeElement;
+    }
+    constructor(elementReference) {
+        this.elementReference = elementReference;
+        this.fElement = new RectFElement();
+        this.hostElement.appendChild(this.fElement.hostElement);
+    }
+    hide() {
+        this.fElement.hide();
+    }
+    show() {
+        this.fElement.show();
+    }
+    draw(object) {
+        this.fElement.draw(object);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FSelectionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FSelectionDirective, isStandalone: true, selector: "g[fSelection]", host: { classAttribute: "f-selection f-component" }, providers: [
+            { provide: F_SELECTION, useExisting: FSelectionDirective }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FSelectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "g[fSelection]",
+                    standalone: true,
+                    host: {
+                        'class': 'f-selection f-component'
+                    },
+                    providers: [
+                        { provide: F_SELECTION, useExisting: FSelectionDirective }
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
 class FDraggableDirective extends FDraggableBase {
     constructor(fFlow, fDNDService, fExternalItemService, elementReference, ngZone) {
         super(fFlow, fDNDService, fExternalItemService, elementReference, ngZone);
@@ -2545,7 +2579,7 @@ class FDraggableDirective extends FDraggableBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDraggableDirective, deps: [{ token: F_FLOW_COMPONENT }, { token: FDraggableService }, { token: FExternalItemService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FDraggableDirective, selector: "svg[fDraggable]", inputs: { disabled: "disabled" }, outputs: { onCreateConnection: "onCreateConnection", onReassignConnection: "onReassignConnection", onCreateNode: "onCreateNode" }, providers: [
             { provide: F_DND_DIRECTIVE, useExisting: FDraggableDirective }
-        ], queries: [{ propertyName: "fLineAlignment", first: true, predicate: F_LINE_ALIGNMENT, descendants: true, static: true }, { propertyName: "fConnectIfIntersect", first: true, predicate: F_CONNECT_IF_INTERSECT, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: F_SELECTION, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
+        ], queries: [{ propertyName: "fLineAlignment", first: true, predicate: F_LINE_ALIGNMENT, descendants: true, static: true }, { propertyName: "fSelection", first: true, predicate: F_SELECTION, descendants: true, static: true }, { propertyName: "fConnectIfIntersect", first: true, predicate: F_CONNECT_IF_INTERSECT, descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDraggableDirective, decorators: [{
             type: Directive,
@@ -2563,12 +2597,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             }], fLineAlignment: [{
                 type: ContentChild,
                 args: [F_LINE_ALIGNMENT, { static: true }]
-            }], fConnectIfIntersect: [{
-                type: ContentChild,
-                args: [F_CONNECT_IF_INTERSECT, { static: true }]
             }], fSelection: [{
                 type: ContentChild,
                 args: [F_SELECTION, { static: true }]
+            }], fConnectIfIntersect: [{
+                type: ContentChild,
+                args: [F_CONNECT_IF_INTERSECT]
             }], onCreateConnection: [{
                 type: Output
             }], onReassignConnection: [{
@@ -2580,18 +2614,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
 class FDraggableModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDraggableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: FDraggableModule, declarations: [FDraggableDirective,
-            FExternalItemDirective,
-            FLineAlignmentDirective,
-            FSelectionDirective,
-            FConnectIfIntersectDirective], exports: [FDraggableDirective,
-            FExternalItemDirective,
-            FLineAlignmentDirective,
-            FSelectionDirective,
-            FConnectIfIntersectDirective] }); }
+            FExternalItemDirective], imports: [CommonModule], exports: [FDraggableDirective,
+            FExternalItemDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDraggableModule, providers: [
             FExternalItemService,
             FDraggableService
-        ] }); }
+        ], imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FDraggableModule, decorators: [{
             type: NgModule,
@@ -2599,11 +2627,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     declarations: [
                         FDraggableDirective,
                         FExternalItemDirective,
-                        FLineAlignmentDirective,
-                        FSelectionDirective,
-                        FConnectIfIntersectDirective
                     ],
-                    imports: [],
+                    imports: [
+                        CommonModule
+                    ],
                     providers: [
                         FExternalItemService,
                         FDraggableService
@@ -2611,9 +2638,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     exports: [
                         FDraggableDirective,
                         FExternalItemDirective,
-                        FLineAlignmentDirective,
-                        FSelectionDirective,
-                        FConnectIfIntersectDirective
                     ]
                 }]
         }] });
@@ -2678,24 +2702,39 @@ class ConnectIfIntersectRequest {
     }
 }
 
-const F_CONNECT_IF_INTERSECT = new InjectionToken('F_CONNECT_IF_INTERSECT');
-class FConnectIfIntersectDirective {
+class FConnectIfIntersectBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectIfIntersectBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FConnectIfIntersectBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectIfIntersectBase, decorators: [{
+            type: Directive
+        }] });
+
+let uniqueId$2 = 0;
+class FConnectIfIntersectDirective extends FConnectIfIntersectBase {
     constructor(fFlow, fItemsContainer) {
+        super();
         this.fFlow = fFlow;
         this.fItemsContainer = fItemsContainer;
+        this.id = `f-connect-if-intersect-${uniqueId$2++}`;
     }
     handle(draggableItems) {
         new ConnectIfIntersectHandler(this.fConnections.toArray(), this.fFlow, this.fItemsContainer).handle(new ConnectIfIntersectRequest(draggableItems));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectIfIntersectDirective, deps: [{ token: F_FLOW_COMPONENT }, { token: F_ITEMS_CONTAINER }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FConnectIfIntersectDirective, selector: "g[fConnectIfIntersect]", providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: FConnectIfIntersectDirective, isStandalone: true, selector: "g[fConnectIfIntersect]", inputs: { id: "id" }, host: { properties: { "attr.id": "id" }, classAttribute: "f-component f-connect-if-intersect" }, providers: [
             { provide: F_CONNECT_IF_INTERSECT, useExisting: FConnectIfIntersectDirective }
-        ], queries: [{ propertyName: "fConnections", predicate: F_CONNECTION_COMPONENT, descendants: true }], ngImport: i0 }); }
+        ], queries: [{ propertyName: "fConnections", predicate: F_CONNECTION_COMPONENT, descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectIfIntersectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "g[fConnectIfIntersect]",
+                    standalone: true,
+                    host: {
+                        '[attr.id]': 'id',
+                        class: "f-component f-connect-if-intersect"
+                    },
                     providers: [
                         { provide: F_CONNECT_IF_INTERSECT, useExisting: FConnectIfIntersectDirective }
                     ]
@@ -2706,7 +2745,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                 }] }, { type: FItemsContainerBase, decorators: [{
                     type: Inject,
                     args: [F_ITEMS_CONTAINER]
-                }] }]; }, propDecorators: { fConnections: [{
+                }] }]; }, propDecorators: { id: [{
+                type: Input
+            }], fConnections: [{
                 type: ContentChildren,
                 args: [F_CONNECTION_COMPONENT, { descendants: true }]
             }] } });
@@ -3020,6 +3061,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                 args: [FConnectionTextComponent, { static: true }]
             }] } });
 
+class FConnectionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: FConnectionModule, declarations: [FConnectionComponent], imports: [CommonModule,
+            FConnectionCommonModule], exports: [FConnectionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionModule, imports: [CommonModule,
+            FConnectionCommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FConnectionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FConnectionComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FConnectionCommonModule
+                    ],
+                    exports: [
+                        FConnectionComponent
+                    ]
+                }]
+        }] });
+
 class FFlowModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: FFlowModule, declarations: [FFlowComponent,
@@ -3033,7 +3097,7 @@ class FFlowModule {
             FNodeInputDirective,
             FNodeOutletDirective,
             FNodeOutputDirective], imports: [CommonModule,
-            FConnectionModule,
+            FTempConnectionModule,
             FCanvasDirective,
             FBackgroundDirective], exports: [FFlowComponent,
             FNodeComponent,
@@ -3043,12 +3107,12 @@ class FFlowModule {
             FItemsContainerDirective,
             FNodesContainerComponent,
             FConnectionsContainerComponent,
-            FConnectionModule,
+            FConnectionCommonModule,
             FNodeInputDirective,
             FNodeOutletDirective,
             FNodeOutputDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FFlowModule, imports: [CommonModule,
-            FConnectionModule, FConnectionModule] }); }
+            FTempConnectionModule, FConnectionCommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FFlowModule, decorators: [{
             type: NgModule,
@@ -3068,7 +3132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     ],
                     imports: [
                         CommonModule,
-                        FConnectionModule,
+                        FTempConnectionModule,
                         FCanvasDirective,
                         FBackgroundDirective,
                     ],
@@ -3082,7 +3146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         FItemsContainerDirective,
                         FNodesContainerComponent,
                         FConnectionsContainerComponent,
-                        FConnectionModule,
+                        FConnectionCommonModule,
                         FNodeInputDirective,
                         FNodeOutletDirective,
                         FNodeOutputDirective,
@@ -3094,5 +3158,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CONNECTION_MARKER_END, CONNECTION_MARKER_END_SELECTED, CONNECTION_MARKER_START, CONNECTION_MARKER_START_SELECTED, CanvasChangeEvent, FCanvasDirective, FConnectIfIntersectDirective, FConnectionComponent, FConnectionModule, FConnectionsContainerComponent, FDragHandleDirective, FDraggableDirective, FExternalItemDirective, FFlowComponent, FFlowModule, FForeignObjectComponent, FItemsContainerDirective, FLineAlignmentDirective, FNodeComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FNodesContainerComponent, FSelectionDirective, FTempConnectionComponent, FZoomDirective, F_CONNECT_IF_INTERSECT, F_DRAG_HANDLE, F_LINE_ALIGNMENT, F_SELECTION, F_TEMP_CONNECTION_COMPONENT };
+export { CONNECTION_MARKER_END, CONNECTION_MARKER_END_SELECTED, CONNECTION_MARKER_START, CONNECTION_MARKER_START_SELECTED, CanvasChangeEvent, FCanvasDirective, FConnectIfIntersectBase, FConnectIfIntersectDirective, FConnectionCommonModule, FConnectionComponent, FConnectionDragHandleComponent, FConnectionGradientComponent, FConnectionModule, FConnectionPathComponent, FConnectionSelectionComponent, FConnectionTextComponent, FConnectionTextPathDirective, FConnectionsContainerComponent, FDragHandleDirective, FDraggableDirective, FDraggableModule, FExternalItemDirective, FFlowComponent, FFlowModule, FForeignObjectComponent, FItemsContainerDirective, FLineAlignmentDirective, FNodeComponent, FNodeInputDirective, FNodeOutletDirective, FNodeOutputDirective, FNodesContainerComponent, FSelectionDirective, FTempConnectionComponent, FTempConnectionModule, FZoomDirective, F_CONNECTION_DRAG_HANDLE_CLASS, F_DRAG_HANDLE, F_LINE_ALIGNMENT, F_SELECTION, F_TEMP_CONNECTION_COMPONENT, TempConnectionInputOutputModel };
 //# sourceMappingURL=foblex-flow.mjs.map