@angflow/angular 0.0.11 → 0.0.12

package/dist/esm/lib/components/connection-line/connection-line.component.js

@@ -87,25 +87,25 @@ export class ConnectionLineComponent {
         }, ...(ngDevMode ? [{ debugName: "connectionPath" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ConnectionLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ConnectionLineComponent, isStandalone: true, selector: "ng-flow-connection-line", inputs: { customComponent: { classPropertyName: "customComponent", publicName: "customComponent", isSignal: true, isRequired: false, transformFunction: null }, connectionLineType: { classPropertyName: "connectionLineType", publicName: "connectionLineType", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
-    @if (isConnecting()) {
-      @if (customComponent()) {
-        <ng-container
-          *ngComponentOutlet="customComponent(); inputs: connectionProps()"
-        />
-      } @else {
-        <svg class="ng-flow__connectionline xy-flow__connectionline"
-             style="overflow: visible; position: absolute; width: 100%; height: 100%; pointer-events: none;">
-          <g>
-            <path
-              class="ng-flow__connection-path xy-flow__connection-path"
-              [attr.d]="connectionPath()"
-              fill="none"
-            />
-          </g>
-        </svg>
-      }
-    }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ConnectionLineComponent, isStandalone: true, selector: "ng-flow-connection-line", inputs: { customComponent: { classPropertyName: "customComponent", publicName: "customComponent", isSignal: true, isRequired: false, transformFunction: null }, connectionLineType: { classPropertyName: "connectionLineType", publicName: "connectionLineType", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
+    @if (isConnecting()) {
+      @if (customComponent()) {
+        <ng-container
+          *ngComponentOutlet="customComponent(); inputs: connectionProps()"
+        />
+      } @else {
+        <svg class="ng-flow__connectionline xy-flow__connectionline"
+             style="overflow: visible; position: absolute; width: 100%; height: 100%; pointer-events: none;">
+          <g>
+            <path
+              class="ng-flow__connection-path xy-flow__connection-path"
+              [attr.d]="connectionPath()"
+              fill="none"
+            />
+          </g>
+        </svg>
+      }
+    }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ConnectionLineComponent, decorators: [{
@@ -118,25 +118,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     host: {
                         'style': 'display: contents;',
                     },
-                    template: `
-    @if (isConnecting()) {
-      @if (customComponent()) {
-        <ng-container
-          *ngComponentOutlet="customComponent(); inputs: connectionProps()"
-        />
-      } @else {
-        <svg class="ng-flow__connectionline xy-flow__connectionline"
-             style="overflow: visible; position: absolute; width: 100%; height: 100%; pointer-events: none;">
-          <g>
-            <path
-              class="ng-flow__connection-path xy-flow__connection-path"
-              [attr.d]="connectionPath()"
-              fill="none"
-            />
-          </g>
-        </svg>
-      }
-    }
+                    template: `
+    @if (isConnecting()) {
+      @if (customComponent()) {
+        <ng-container
+          *ngComponentOutlet="customComponent(); inputs: connectionProps()"
+        />
+      } @else {
+        <svg class="ng-flow__connectionline xy-flow__connectionline"
+             style="overflow: visible; position: absolute; width: 100%; height: 100%; pointer-events: none;">
+          <g>
+            <path
+              class="ng-flow__connection-path xy-flow__connection-path"
+              [attr.d]="connectionPath()"
+              fill="none"
+            />
+          </g>
+        </svg>
+      }
+    }
   `,
                 }]
         }], propDecorators: { customComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "customComponent", required: false }] }], connectionLineType: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineType", required: false }] }] } });

package/dist/esm/lib/components/controls/controls.component.d.ts

@@ -8,6 +8,7 @@ export declare class ControlsComponent {
     readonly showFitView: import("@angular/core").InputSignal<boolean>;
     readonly showInteractive: import("@angular/core").InputSignal<boolean>;
     readonly fitViewOptions: import("@angular/core").InputSignal<FitViewOptionsBase<any> | undefined>;
+    readonly fitViewFn: import("@angular/core").InputSignal<(() => void) | undefined>;
     readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
     readonly ariaLabel: import("@angular/core").InputSignal<string>;
     readonly zoomInClick: import("@angular/core").OutputEmitterRef<void>;
@@ -23,6 +24,6 @@ export declare class ControlsComponent {
     onFitView(): void;
     onToggleLock(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ControlsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ControlsComponent, "ng-flow-controls", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "showZoom": { "alias": "showZoom"; "required": false; "isSignal": true; }; "showFitView": { "alias": "showFitView"; "required": false; "isSignal": true; }; "showInteractive": { "alias": "showInteractive"; "required": false; "isSignal": true; }; "fitViewOptions": { "alias": "fitViewOptions"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "zoomInClick": "zoomInClick"; "zoomOutClick": "zoomOutClick"; "fitViewClick": "fitViewClick"; "interactiveChange": "interactiveChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ControlsComponent, "ng-flow-controls", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "showZoom": { "alias": "showZoom"; "required": false; "isSignal": true; }; "showFitView": { "alias": "showFitView"; "required": false; "isSignal": true; }; "showInteractive": { "alias": "showInteractive"; "required": false; "isSignal": true; }; "fitViewOptions": { "alias": "fitViewOptions"; "required": false; "isSignal": true; }; "fitViewFn": { "alias": "fitViewFn"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "zoomInClick": "zoomInClick"; "zoomOutClick": "zoomOutClick"; "fitViewClick": "fitViewClick"; "interactiveChange": "interactiveChange"; }, never, ["*"], true, never>;
 }
 //# sourceMappingURL=controls.component.d.ts.map

package/dist/esm/lib/components/controls/controls.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controls.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/controls/controls.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAKzE,qBAkEa,iBAAiB;IAC5B,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,aAAa,CAAyB;IAE9C,QAAQ,CAAC,QAAQ,qDAAuC;IACxD,QAAQ,CAAC,QAAQ,+CAAe;IAChC,QAAQ,CAAC,WAAW,+CAAe;IACnC,QAAQ,CAAC,eAAe,+CAAe;IACvC,QAAQ,CAAC,cAAc,2EAAoC;IAC3D,QAAQ,CAAC,WAAW,iEAAgD;IACpE,QAAQ,CAAC,SAAS,8CAA0C;IAG5D,QAAQ,CAAC,WAAW,iDAAkB;IACtC,QAAQ,CAAC,YAAY,iDAAkB;IACvC,QAAQ,CAAC,YAAY,iDAAkB;IACvC,QAAQ,CAAC,iBAAiB,oDAAqB;IAK/C,QAAQ,CAAC,aAAa,0CAKpB;IACF,QAAQ,CAAC,QAAQ,0CAAyC;IAG1D,QAAQ,CAAC,cAAc,0CAAqE;IAC5F,QAAQ,CAAC,cAAc,0CAAqE;IAE5F,QAAQ;IAKR,SAAS;IAKT,SAAS;IAKT,YAAY;yCAhDD,iBAAiB;2CAAjB,iBAAiB;CAuD7B"}
+{"version":3,"file":"controls.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/controls/controls.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAKzE,qBAkEa,iBAAiB;IAC5B,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,aAAa,CAAyB;IAE9C,QAAQ,CAAC,QAAQ,qDAAuC;IACxD,QAAQ,CAAC,QAAQ,+CAAe;IAChC,QAAQ,CAAC,WAAW,+CAAe;IACnC,QAAQ,CAAC,eAAe,+CAAe;IACvC,QAAQ,CAAC,cAAc,2EAAoC;IAC3D,QAAQ,CAAC,SAAS,6CAAgB,IAAI,eAA0B;IAChE,QAAQ,CAAC,WAAW,iEAAgD;IACpE,QAAQ,CAAC,SAAS,8CAA0C;IAG5D,QAAQ,CAAC,WAAW,iDAAkB;IACtC,QAAQ,CAAC,YAAY,iDAAkB;IACvC,QAAQ,CAAC,YAAY,iDAAkB;IACvC,QAAQ,CAAC,iBAAiB,oDAAqB;IAK/C,QAAQ,CAAC,aAAa,0CAKpB;IACF,QAAQ,CAAC,QAAQ,0CAAyC;IAG1D,QAAQ,CAAC,cAAc,0CAAqE;IAC5F,QAAQ,CAAC,cAAc,0CAAqE;IAE5F,QAAQ;IAKR,SAAS;IAKT,SAAS;IAUT,YAAY;yCAtDD,iBAAiB;2CAAjB,iBAAiB;CA6D7B"}

package/dist/esm/lib/components/controls/controls.component.js

@@ -12,6 +12,7 @@ export class ControlsComponent {
         this.showFitView = input(true, ...(ngDevMode ? [{ debugName: "showFitView" }] : /* istanbul ignore next */ []));
         this.showInteractive = input(true, ...(ngDevMode ? [{ debugName: "showInteractive" }] : /* istanbul ignore next */ []));
         this.fitViewOptions = input(...(ngDevMode ? [undefined, { debugName: "fitViewOptions" }] : /* istanbul ignore next */ []));
+        this.fitViewFn = input(undefined, ...(ngDevMode ? [{ debugName: "fitViewFn" }] : /* istanbul ignore next */ []));
         this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input('Angular Flow controls', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         // Callback outputs
@@ -39,7 +40,13 @@ export class ControlsComponent {
         this.zoomOutClick.emit();
     }
     onFitView() {
-        this.ngFlowService.fitView(this.fitViewOptions());
+        const fn = this.fitViewFn();
+        if (fn) {
+            fn();
+        }
+        else {
+            this.ngFlowService.fitView(this.fitViewOptions());
+        }
         this.fitViewClick.emit();
     }
     onToggleLock() {
@@ -50,7 +57,7 @@ export class ControlsComponent {
         this.interactiveChange.emit(nextInteractive);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ControlsComponent, isStandalone: true, selector: "ng-flow-controls", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, showZoom: { classPropertyName: "showZoom", publicName: "showZoom", isSignal: true, isRequired: false, transformFunction: null }, showFitView: { classPropertyName: "showFitView", publicName: "showFitView", isSignal: true, isRequired: false, transformFunction: null }, showInteractive: { classPropertyName: "showInteractive", publicName: "showInteractive", isSignal: true, isRequired: false, transformFunction: null }, fitViewOptions: { classPropertyName: "fitViewOptions", publicName: "fitViewOptions", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zoomInClick: "zoomInClick", zoomOutClick: "zoomOutClick", fitViewClick: "fitViewClick", interactiveChange: "interactiveChange" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ControlsComponent, isStandalone: true, selector: "ng-flow-controls", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, showZoom: { classPropertyName: "showZoom", publicName: "showZoom", isSignal: true, isRequired: false, transformFunction: null }, showFitView: { classPropertyName: "showFitView", publicName: "showFitView", isSignal: true, isRequired: false, transformFunction: null }, showInteractive: { classPropertyName: "showInteractive", publicName: "showInteractive", isSignal: true, isRequired: false, transformFunction: null }, fitViewOptions: { classPropertyName: "fitViewOptions", publicName: "fitViewOptions", isSignal: true, isRequired: false, transformFunction: null }, fitViewFn: { classPropertyName: "fitViewFn", publicName: "fitViewFn", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zoomInClick: "zoomInClick", zoomOutClick: "zoomOutClick", fitViewClick: "fitViewClick", interactiveChange: "interactiveChange" }, ngImport: i0, template: `
     <ng-flow-panel [position]="position()">
       <div
         class="ng-flow__controls xy-flow__controls"
@@ -179,5 +186,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
     </ng-flow-panel>
   `,
                 }]
-        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], showZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZoom", required: false }] }], showFitView: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFitView", required: false }] }], showInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInteractive", required: false }] }], fitViewOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitViewOptions", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], zoomInClick: [{ type: i0.Output, args: ["zoomInClick"] }], zoomOutClick: [{ type: i0.Output, args: ["zoomOutClick"] }], fitViewClick: [{ type: i0.Output, args: ["fitViewClick"] }], interactiveChange: [{ type: i0.Output, args: ["interactiveChange"] }] } });
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], showZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZoom", required: false }] }], showFitView: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFitView", required: false }] }], showInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInteractive", required: false }] }], fitViewOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitViewOptions", required: false }] }], fitViewFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitViewFn", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], zoomInClick: [{ type: i0.Output, args: ["zoomInClick"] }], zoomOutClick: [{ type: i0.Output, args: ["zoomOutClick"] }], fitViewClick: [{ type: i0.Output, args: ["fitViewClick"] }], interactiveChange: [{ type: i0.Output, args: ["interactiveChange"] }] } });
 //# sourceMappingURL=controls.component.js.map

package/dist/esm/lib/components/controls/controls.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls.component.js","sourceRoot":"","sources":["../../../../../src/lib/components/controls/controls.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"controls.component.js","sourceRoot":"","sources":["../../../../../src/lib/components/controls/controls.component.ts"],"names":[],"mappings":"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"}

package/dist/esm/lib/components/edges/bezier-edge.component.js

@@ -42,13 +42,13 @@ export class BezierEdgeComponent {
         }, ...(ngDevMode ? [{ debugName: "edgePath" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: BezierEdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: BezierEdgeComponent, isStandalone: true, selector: "ng-flow-bezier-edge", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sourceX: { classPropertyName: "sourceX", publicName: "sourceX", isSignal: true, isRequired: false, transformFunction: null }, sourceY: { classPropertyName: "sourceY", publicName: "sourceY", isSignal: true, isRequired: false, transformFunction: null }, targetX: { classPropertyName: "targetX", publicName: "targetX", isSignal: true, isRequired: false, transformFunction: null }, targetY: { classPropertyName: "targetY", publicName: "targetY", isSignal: true, isRequired: false, transformFunction: null }, sourcePosition: { classPropertyName: "sourcePosition", publicName: "sourcePosition", isSignal: true, isRequired: false, transformFunction: null }, targetPosition: { classPropertyName: "targetPosition", publicName: "targetPosition", isSignal: true, isRequired: false, transformFunction: null }, markerStart: { classPropertyName: "markerStart", publicName: "markerStart", isSignal: true, isRequired: false, transformFunction: null }, markerEnd: { classPropertyName: "markerEnd", publicName: "markerEnd", isSignal: true, isRequired: false, transformFunction: null }, interactionWidth: { classPropertyName: "interactionWidth", publicName: "interactionWidth", isSignal: true, isRequired: false, transformFunction: null }, pathOptions: { classPropertyName: "pathOptions", publicName: "pathOptions", isSignal: true, isRequired: false, transformFunction: null }, sourceHandleId: { classPropertyName: "sourceHandleId", publicName: "sourceHandleId", isSignal: true, isRequired: false, transformFunction: null }, targetHandleId: { classPropertyName: "targetHandleId", publicName: "targetHandleId", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, sourceHandle: { classPropertyName: "sourceHandle", publicName: "sourceHandle", isSignal: true, isRequired: false, transformFunction: null }, targetHandle: { classPropertyName: "targetHandle", publicName: "targetHandle", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
-    <ng-flow-base-edge
-      [path]="edgePath()"
-      [markerStart]="markerStart()"
-      [markerEnd]="markerEnd()"
-      [interactionWidth]="interactionWidth() ?? 20"
-    />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: BezierEdgeComponent, isStandalone: true, selector: "ng-flow-bezier-edge", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sourceX: { classPropertyName: "sourceX", publicName: "sourceX", isSignal: true, isRequired: false, transformFunction: null }, sourceY: { classPropertyName: "sourceY", publicName: "sourceY", isSignal: true, isRequired: false, transformFunction: null }, targetX: { classPropertyName: "targetX", publicName: "targetX", isSignal: true, isRequired: false, transformFunction: null }, targetY: { classPropertyName: "targetY", publicName: "targetY", isSignal: true, isRequired: false, transformFunction: null }, sourcePosition: { classPropertyName: "sourcePosition", publicName: "sourcePosition", isSignal: true, isRequired: false, transformFunction: null }, targetPosition: { classPropertyName: "targetPosition", publicName: "targetPosition", isSignal: true, isRequired: false, transformFunction: null }, markerStart: { classPropertyName: "markerStart", publicName: "markerStart", isSignal: true, isRequired: false, transformFunction: null }, markerEnd: { classPropertyName: "markerEnd", publicName: "markerEnd", isSignal: true, isRequired: false, transformFunction: null }, interactionWidth: { classPropertyName: "interactionWidth", publicName: "interactionWidth", isSignal: true, isRequired: false, transformFunction: null }, pathOptions: { classPropertyName: "pathOptions", publicName: "pathOptions", isSignal: true, isRequired: false, transformFunction: null }, sourceHandleId: { classPropertyName: "sourceHandleId", publicName: "sourceHandleId", isSignal: true, isRequired: false, transformFunction: null }, targetHandleId: { classPropertyName: "targetHandleId", publicName: "targetHandleId", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, sourceHandle: { classPropertyName: "sourceHandle", publicName: "sourceHandle", isSignal: true, isRequired: false, transformFunction: null }, targetHandle: { classPropertyName: "targetHandle", publicName: "targetHandle", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
+    <ng-flow-base-edge
+      [path]="edgePath()"
+      [markerStart]="markerStart()"
+      [markerEnd]="markerEnd()"
+      [interactionWidth]="interactionWidth() ?? 20"
+    />
   `, isInline: true, dependencies: [{ kind: "component", type: BaseEdgeComponent, selector: "ng-flow-base-edge", inputs: ["path", "markerStart", "markerEnd", "style", "interactionWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: BezierEdgeComponent, decorators: [{
@@ -59,13 +59,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     imports: [BaseEdgeComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { 'style': 'display: contents;' },
-                    template: `
-    <ng-flow-base-edge
-      [path]="edgePath()"
-      [markerStart]="markerStart()"
-      [markerEnd]="markerEnd()"
-      [interactionWidth]="interactionWidth() ?? 20"
-    />
+                    template: `
+    <ng-flow-base-edge
+      [path]="edgePath()"
+      [markerStart]="markerStart()"
+      [markerEnd]="markerEnd()"
+      [interactionWidth]="interactionWidth() ?? 20"
+    />
   `,
                 }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sourceX: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceX", required: false }] }], sourceY: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceY", required: false }] }], targetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetX", required: false }] }], targetY: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetY", required: false }] }], sourcePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourcePosition", required: false }] }], targetPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetPosition", required: false }] }], markerStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerStart", required: false }] }], markerEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerEnd", required: false }] }], interactionWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactionWidth", required: false }] }], pathOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathOptions", required: false }] }], sourceHandleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHandleId", required: false }] }], targetHandleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHandleId", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], deletable: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletable", required: false }] }], sourceHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHandle", required: false }] }], targetHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHandle", required: false }] }] } });

package/dist/esm/lib/components/edges/simple-bezier-edge.component.js

@@ -32,13 +32,13 @@ export class SimpleBezierEdgeComponent {
         }, ...(ngDevMode ? [{ debugName: "edgePath" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SimpleBezierEdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: SimpleBezierEdgeComponent, isStandalone: true, selector: "ng-flow-simple-bezier-edge", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, sourceX: { classPropertyName: "sourceX", publicName: "sourceX", isSignal: true, isRequired: false, transformFunction: null }, sourceY: { classPropertyName: "sourceY", publicName: "sourceY", isSignal: true, isRequired: false, transformFunction: null }, targetX: { classPropertyName: "targetX", publicName: "targetX", isSignal: true, isRequired: false, transformFunction: null }, targetY: { classPropertyName: "targetY", publicName: "targetY", isSignal: true, isRequired: false, transformFunction: null }, sourcePosition: { classPropertyName: "sourcePosition", publicName: "sourcePosition", isSignal: true, isRequired: false, transformFunction: null }, targetPosition: { classPropertyName: "targetPosition", publicName: "targetPosition", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, markerStart: { classPropertyName: "markerStart", publicName: "markerStart", isSignal: true, isRequired: false, transformFunction: null }, markerEnd: { classPropertyName: "markerEnd", publicName: "markerEnd", isSignal: true, isRequired: false, transformFunction: null }, interactionWidth: { classPropertyName: "interactionWidth", publicName: "interactionWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sourceHandle: { classPropertyName: "sourceHandle", publicName: "sourceHandle", isSignal: true, isRequired: false, transformFunction: null }, targetHandle: { classPropertyName: "targetHandle", publicName: "targetHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <ng-flow-base-edge
-      [path]="edgePath()"
-      [markerStart]="markerStart()"
-      [markerEnd]="markerEnd()"
-      [interactionWidth]="interactionWidth() ?? 20"
-    />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: SimpleBezierEdgeComponent, isStandalone: true, selector: "ng-flow-simple-bezier-edge", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, sourceX: { classPropertyName: "sourceX", publicName: "sourceX", isSignal: true, isRequired: false, transformFunction: null }, sourceY: { classPropertyName: "sourceY", publicName: "sourceY", isSignal: true, isRequired: false, transformFunction: null }, targetX: { classPropertyName: "targetX", publicName: "targetX", isSignal: true, isRequired: false, transformFunction: null }, targetY: { classPropertyName: "targetY", publicName: "targetY", isSignal: true, isRequired: false, transformFunction: null }, sourcePosition: { classPropertyName: "sourcePosition", publicName: "sourcePosition", isSignal: true, isRequired: false, transformFunction: null }, targetPosition: { classPropertyName: "targetPosition", publicName: "targetPosition", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, markerStart: { classPropertyName: "markerStart", publicName: "markerStart", isSignal: true, isRequired: false, transformFunction: null }, markerEnd: { classPropertyName: "markerEnd", publicName: "markerEnd", isSignal: true, isRequired: false, transformFunction: null }, interactionWidth: { classPropertyName: "interactionWidth", publicName: "interactionWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sourceHandle: { classPropertyName: "sourceHandle", publicName: "sourceHandle", isSignal: true, isRequired: false, transformFunction: null }, targetHandle: { classPropertyName: "targetHandle", publicName: "targetHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ng-flow-base-edge
+      [path]="edgePath()"
+      [markerStart]="markerStart()"
+      [markerEnd]="markerEnd()"
+      [interactionWidth]="interactionWidth() ?? 20"
+    />
   `, isInline: true, dependencies: [{ kind: "component", type: BaseEdgeComponent, selector: "ng-flow-base-edge", inputs: ["path", "markerStart", "markerEnd", "style", "interactionWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SimpleBezierEdgeComponent, decorators: [{
@@ -48,13 +48,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     standalone: true,
                     imports: [BaseEdgeComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <ng-flow-base-edge
-      [path]="edgePath()"
-      [markerStart]="markerStart()"
-      [markerEnd]="markerEnd()"
-      [interactionWidth]="interactionWidth() ?? 20"
-    />
+                    template: `
+    <ng-flow-base-edge
+      [path]="edgePath()"
+      [markerStart]="markerStart()"
+      [markerEnd]="markerEnd()"
+      [interactionWidth]="interactionWidth() ?? 20"
+    />
   `,
                 }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], sourceX: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceX", required: false }] }], sourceY: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceY", required: false }] }], targetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetX", required: false }] }], targetY: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetY", required: false }] }], sourcePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourcePosition", required: false }] }], targetPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetPosition", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], markerStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerStart", required: false }] }], markerEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerEnd", required: false }] }], interactionWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactionWidth", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sourceHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHandle", required: false }] }], targetHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHandle", required: false }] }] } });

package/dist/esm/lib/components/edges/smooth-step-edge.component.js

@@ -34,13 +34,13 @@ export class SmoothStepEdgeComponent {
         }, ...(ngDevMode ? [{ debugName: "edgePath" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmoothStepEdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: SmoothStepEdgeComponent, isStandalone: true, selector: "ng-flow-smooth-step-edge", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, sourceX: { classPropertyName: "sourceX", publicName: "sourceX", isSignal: true, isRequired: false, transformFunction: null }, sourceY: { classPropertyName: "sourceY", publicName: "sourceY", isSignal: true, isRequired: false, transformFunction: null }, targetX: { classPropertyName: "targetX", publicName: "targetX", isSignal: true, isRequired: false, transformFunction: null }, targetY: { classPropertyName: "targetY", publicName: "targetY", isSignal: true, isRequired: false, transformFunction: null }, sourcePosition: { classPropertyName: "sourcePosition", publicName: "sourcePosition", isSignal: true, isRequired: false, transformFunction: null }, targetPosition: { classPropertyName: "targetPosition", publicName: "targetPosition", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, markerStart: { classPropertyName: "markerStart", publicName: "markerStart", isSignal: true, isRequired: false, transformFunction: null }, markerEnd: { classPropertyName: "markerEnd", publicName: "markerEnd", isSignal: true, isRequired: false, transformFunction: null }, interactionWidth: { classPropertyName: "interactionWidth", publicName: "interactionWidth", isSignal: true, isRequired: false, transformFunction: null }, pathOptions: { classPropertyName: "pathOptions", publicName: "pathOptions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sourceHandle: { classPropertyName: "sourceHandle", publicName: "sourceHandle", isSignal: true, isRequired: false, transformFunction: null }, targetHandle: { classPropertyName: "targetHandle", publicName: "targetHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <ng-flow-base-edge
-      [path]="edgePath()"
-      [markerStart]="markerStart()"
-      [markerEnd]="markerEnd()"
-      [interactionWidth]="interactionWidth() ?? 20"
-    />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: SmoothStepEdgeComponent, isStandalone: true, selector: "ng-flow-smooth-step-edge", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, sourceX: { classPropertyName: "sourceX", publicName: "sourceX", isSignal: true, isRequired: false, transformFunction: null }, sourceY: { classPropertyName: "sourceY", publicName: "sourceY", isSignal: true, isRequired: false, transformFunction: null }, targetX: { classPropertyName: "targetX", publicName: "targetX", isSignal: true, isRequired: false, transformFunction: null }, targetY: { classPropertyName: "targetY", publicName: "targetY", isSignal: true, isRequired: false, transformFunction: null }, sourcePosition: { classPropertyName: "sourcePosition", publicName: "sourcePosition", isSignal: true, isRequired: false, transformFunction: null }, targetPosition: { classPropertyName: "targetPosition", publicName: "targetPosition", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, markerStart: { classPropertyName: "markerStart", publicName: "markerStart", isSignal: true, isRequired: false, transformFunction: null }, markerEnd: { classPropertyName: "markerEnd", publicName: "markerEnd", isSignal: true, isRequired: false, transformFunction: null }, interactionWidth: { classPropertyName: "interactionWidth", publicName: "interactionWidth", isSignal: true, isRequired: false, transformFunction: null }, pathOptions: { classPropertyName: "pathOptions", publicName: "pathOptions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sourceHandle: { classPropertyName: "sourceHandle", publicName: "sourceHandle", isSignal: true, isRequired: false, transformFunction: null }, targetHandle: { classPropertyName: "targetHandle", publicName: "targetHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ng-flow-base-edge
+      [path]="edgePath()"
+      [markerStart]="markerStart()"
+      [markerEnd]="markerEnd()"
+      [interactionWidth]="interactionWidth() ?? 20"
+    />
   `, isInline: true, dependencies: [{ kind: "component", type: BaseEdgeComponent, selector: "ng-flow-base-edge", inputs: ["path", "markerStart", "markerEnd", "style", "interactionWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmoothStepEdgeComponent, decorators: [{
@@ -50,13 +50,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     standalone: true,
                     imports: [BaseEdgeComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <ng-flow-base-edge
-      [path]="edgePath()"
-      [markerStart]="markerStart()"
-      [markerEnd]="markerEnd()"
-      [interactionWidth]="interactionWidth() ?? 20"
-    />
+                    template: `
+    <ng-flow-base-edge
+      [path]="edgePath()"
+      [markerStart]="markerStart()"
+      [markerEnd]="markerEnd()"
+      [interactionWidth]="interactionWidth() ?? 20"
+    />
   `,
                 }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], sourceX: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceX", required: false }] }], sourceY: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceY", required: false }] }], targetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetX", required: false }] }], targetY: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetY", required: false }] }], sourcePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourcePosition", required: false }] }], targetPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetPosition", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], markerStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerStart", required: false }] }], markerEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerEnd", required: false }] }], interactionWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactionWidth", required: false }] }], pathOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathOptions", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sourceHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHandle", required: false }] }], targetHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHandle", required: false }] }] } });

package/dist/esm/lib/components/edges/step-edge.component.js

@@ -35,13 +35,13 @@ export class StepEdgeComponent {
         }, ...(ngDevMode ? [{ debugName: "edgePath" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StepEdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: StepEdgeComponent, isStandalone: true, selector: "ng-flow-step-edge", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, sourceX: { classPropertyName: "sourceX", publicName: "sourceX", isSignal: true, isRequired: false, transformFunction: null }, sourceY: { classPropertyName: "sourceY", publicName: "sourceY", isSignal: true, isRequired: false, transformFunction: null }, targetX: { classPropertyName: "targetX", publicName: "targetX", isSignal: true, isRequired: false, transformFunction: null }, targetY: { classPropertyName: "targetY", publicName: "targetY", isSignal: true, isRequired: false, transformFunction: null }, sourcePosition: { classPropertyName: "sourcePosition", publicName: "sourcePosition", isSignal: true, isRequired: false, transformFunction: null }, targetPosition: { classPropertyName: "targetPosition", publicName: "targetPosition", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, markerStart: { classPropertyName: "markerStart", publicName: "markerStart", isSignal: true, isRequired: false, transformFunction: null }, markerEnd: { classPropertyName: "markerEnd", publicName: "markerEnd", isSignal: true, isRequired: false, transformFunction: null }, interactionWidth: { classPropertyName: "interactionWidth", publicName: "interactionWidth", isSignal: true, isRequired: false, transformFunction: null }, pathOptions: { classPropertyName: "pathOptions", publicName: "pathOptions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sourceHandle: { classPropertyName: "sourceHandle", publicName: "sourceHandle", isSignal: true, isRequired: false, transformFunction: null }, targetHandle: { classPropertyName: "targetHandle", publicName: "targetHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <ng-flow-base-edge
-      [path]="edgePath()"
-      [markerStart]="markerStart()"
-      [markerEnd]="markerEnd()"
-      [interactionWidth]="interactionWidth() ?? 20"
-    />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: StepEdgeComponent, isStandalone: true, selector: "ng-flow-step-edge", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, sourceX: { classPropertyName: "sourceX", publicName: "sourceX", isSignal: true, isRequired: false, transformFunction: null }, sourceY: { classPropertyName: "sourceY", publicName: "sourceY", isSignal: true, isRequired: false, transformFunction: null }, targetX: { classPropertyName: "targetX", publicName: "targetX", isSignal: true, isRequired: false, transformFunction: null }, targetY: { classPropertyName: "targetY", publicName: "targetY", isSignal: true, isRequired: false, transformFunction: null }, sourcePosition: { classPropertyName: "sourcePosition", publicName: "sourcePosition", isSignal: true, isRequired: false, transformFunction: null }, targetPosition: { classPropertyName: "targetPosition", publicName: "targetPosition", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, markerStart: { classPropertyName: "markerStart", publicName: "markerStart", isSignal: true, isRequired: false, transformFunction: null }, markerEnd: { classPropertyName: "markerEnd", publicName: "markerEnd", isSignal: true, isRequired: false, transformFunction: null }, interactionWidth: { classPropertyName: "interactionWidth", publicName: "interactionWidth", isSignal: true, isRequired: false, transformFunction: null }, pathOptions: { classPropertyName: "pathOptions", publicName: "pathOptions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sourceHandle: { classPropertyName: "sourceHandle", publicName: "sourceHandle", isSignal: true, isRequired: false, transformFunction: null }, targetHandle: { classPropertyName: "targetHandle", publicName: "targetHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ng-flow-base-edge
+      [path]="edgePath()"
+      [markerStart]="markerStart()"
+      [markerEnd]="markerEnd()"
+      [interactionWidth]="interactionWidth() ?? 20"
+    />
   `, isInline: true, dependencies: [{ kind: "component", type: BaseEdgeComponent, selector: "ng-flow-base-edge", inputs: ["path", "markerStart", "markerEnd", "style", "interactionWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StepEdgeComponent, decorators: [{
@@ -51,13 +51,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     standalone: true,
                     imports: [BaseEdgeComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <ng-flow-base-edge
-      [path]="edgePath()"
-      [markerStart]="markerStart()"
-      [markerEnd]="markerEnd()"
-      [interactionWidth]="interactionWidth() ?? 20"
-    />
+                    template: `
+    <ng-flow-base-edge
+      [path]="edgePath()"
+      [markerStart]="markerStart()"
+      [markerEnd]="markerEnd()"
+      [interactionWidth]="interactionWidth() ?? 20"
+    />
   `,
                 }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], sourceX: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceX", required: false }] }], sourceY: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceY", required: false }] }], targetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetX", required: false }] }], targetY: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetY", required: false }] }], sourcePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourcePosition", required: false }] }], targetPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetPosition", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], markerStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerStart", required: false }] }], markerEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerEnd", required: false }] }], interactionWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactionWidth", required: false }] }], pathOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathOptions", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sourceHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHandle", required: false }] }], targetHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHandle", required: false }] }] } });

package/dist/esm/lib/components/edges/straight-edge.component.js

@@ -28,13 +28,13 @@ export class StraightEdgeComponent {
         }, ...(ngDevMode ? [{ debugName: "edgePath" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StraightEdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: StraightEdgeComponent, isStandalone: true, selector: "ng-flow-straight-edge", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, sourceX: { classPropertyName: "sourceX", publicName: "sourceX", isSignal: true, isRequired: false, transformFunction: null }, sourceY: { classPropertyName: "sourceY", publicName: "sourceY", isSignal: true, isRequired: false, transformFunction: null }, targetX: { classPropertyName: "targetX", publicName: "targetX", isSignal: true, isRequired: false, transformFunction: null }, targetY: { classPropertyName: "targetY", publicName: "targetY", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, markerStart: { classPropertyName: "markerStart", publicName: "markerStart", isSignal: true, isRequired: false, transformFunction: null }, markerEnd: { classPropertyName: "markerEnd", publicName: "markerEnd", isSignal: true, isRequired: false, transformFunction: null }, interactionWidth: { classPropertyName: "interactionWidth", publicName: "interactionWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sourceHandle: { classPropertyName: "sourceHandle", publicName: "sourceHandle", isSignal: true, isRequired: false, transformFunction: null }, targetHandle: { classPropertyName: "targetHandle", publicName: "targetHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <ng-flow-base-edge
-      [path]="edgePath()"
-      [markerStart]="markerStart()"
-      [markerEnd]="markerEnd()"
-      [interactionWidth]="interactionWidth() ?? 20"
-    />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: StraightEdgeComponent, isStandalone: true, selector: "ng-flow-straight-edge", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, sourceX: { classPropertyName: "sourceX", publicName: "sourceX", isSignal: true, isRequired: false, transformFunction: null }, sourceY: { classPropertyName: "sourceY", publicName: "sourceY", isSignal: true, isRequired: false, transformFunction: null }, targetX: { classPropertyName: "targetX", publicName: "targetX", isSignal: true, isRequired: false, transformFunction: null }, targetY: { classPropertyName: "targetY", publicName: "targetY", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, markerStart: { classPropertyName: "markerStart", publicName: "markerStart", isSignal: true, isRequired: false, transformFunction: null }, markerEnd: { classPropertyName: "markerEnd", publicName: "markerEnd", isSignal: true, isRequired: false, transformFunction: null }, interactionWidth: { classPropertyName: "interactionWidth", publicName: "interactionWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sourceHandle: { classPropertyName: "sourceHandle", publicName: "sourceHandle", isSignal: true, isRequired: false, transformFunction: null }, targetHandle: { classPropertyName: "targetHandle", publicName: "targetHandle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ng-flow-base-edge
+      [path]="edgePath()"
+      [markerStart]="markerStart()"
+      [markerEnd]="markerEnd()"
+      [interactionWidth]="interactionWidth() ?? 20"
+    />
   `, isInline: true, dependencies: [{ kind: "component", type: BaseEdgeComponent, selector: "ng-flow-base-edge", inputs: ["path", "markerStart", "markerEnd", "style", "interactionWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: StraightEdgeComponent, decorators: [{
@@ -44,13 +44,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     standalone: true,
                     imports: [BaseEdgeComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <ng-flow-base-edge
-      [path]="edgePath()"
-      [markerStart]="markerStart()"
-      [markerEnd]="markerEnd()"
-      [interactionWidth]="interactionWidth() ?? 20"
-    />
+                    template: `
+    <ng-flow-base-edge
+      [path]="edgePath()"
+      [markerStart]="markerStart()"
+      [markerEnd]="markerEnd()"
+      [interactionWidth]="interactionWidth() ?? 20"
+    />
   `,
                 }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], sourceX: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceX", required: false }] }], sourceY: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceY", required: false }] }], targetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetX", required: false }] }], targetY: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetY", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], markerStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerStart", required: false }] }], markerEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerEnd", required: false }] }], interactionWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactionWidth", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sourceHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHandle", required: false }] }], targetHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHandle", required: false }] }] } });

package/dist/esm/lib/components/handle-group/handle-row.component.js

@@ -14,22 +14,22 @@ export class AfHandleRowComponent {
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: AfHandleRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: AfHandleRowComponent, isStandalone: true, selector: "af-handle-row", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "af-handle-row" }, ngImport: i0, template: `
-    <ng-content select="ng-flow-handle" />
-    @if (label()) {
-      <span class="af-handle-row__label">{{ label() }}</span>
-    }
-    <ng-content />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: AfHandleRowComponent, isStandalone: true, selector: "af-handle-row", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "af-handle-row" }, ngImport: i0, template: `
+    <ng-content select="ng-flow-handle" />
+    @if (label()) {
+      <span class="af-handle-row__label">{{ label() }}</span>
+    }
+    <ng-content />
   `, isInline: true, styles: ["\n    :host {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 2px 8px;\n      position: relative;\n      min-height: 16px;\n    }\n    .af-handle-row__label {\n      font-size: 0.75rem;\n      color: var(--text-secondary, #666);\n    }\n  "], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: AfHandleRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'af-handle-row', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'af-handle-row' }, template: `
-    <ng-content select="ng-flow-handle" />
-    @if (label()) {
-      <span class="af-handle-row__label">{{ label() }}</span>
-    }
-    <ng-content />
+            args: [{ selector: 'af-handle-row', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'af-handle-row' }, template: `
+    <ng-content select="ng-flow-handle" />
+    @if (label()) {
+      <span class="af-handle-row__label">{{ label() }}</span>
+    }
+    <ng-content />
   `, styles: ["\n    :host {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 2px 8px;\n      position: relative;\n      min-height: 16px;\n    }\n    .af-handle-row__label {\n      font-size: 0.75rem;\n      color: var(--text-secondary, #666);\n    }\n  "] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 //# sourceMappingURL=handle-row.component.js.map

package/dist/esm/lib/container/edge-renderer/edge-renderer.component.js

@@ -310,164 +310,164 @@ export class EdgeRendererComponent {
         return `url('#${getMarkerId(marker, this.store.rfId())}')`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EdgeRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: EdgeRendererComponent, isStandalone: true, selector: "ng-flow-edge-renderer", inputs: { reconnectRadius: { classPropertyName: "reconnectRadius", publicName: "reconnectRadius", isSignal: true, isRequired: false, transformFunction: null }, customEdgeTypes: { classPropertyName: "customEdgeTypes", publicName: "customEdgeTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edgeClick: "edgeClick", edgeDoubleClick: "edgeDoubleClick", edgeContextMenu: "edgeContextMenu", edgeMouseEnter: "edgeMouseEnter", edgeMouseMove: "edgeMouseMove", edgeMouseLeave: "edgeMouseLeave", reconnect: "reconnect", reconnectStart: "reconnectStart", reconnectEnd: "reconnectEnd" }, host: { styleAttribute: "position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;", classAttribute: "ng-flow__edges xy-flow__edges" }, ngImport: i0, template: `
-    <svg style="position: absolute; width: 100%; height: 100%; overflow: visible; pointer-events: none;">
-      <defs>
-        @for (marker of markers(); track marker.id) {
-          <marker
-            [id]="marker.id"
-            [attr.markerWidth]="marker.width ?? 12.5"
-            [attr.markerHeight]="marker.height ?? 12.5"
-            viewBox="-10 -10 20 20"
-            markerUnits="strokeWidth"
-            orient="auto-start-reverse"
-            refX="0"
-            refY="0"
-          >
-            <polyline
-              class="xy-flow__arrowhead"
-              [class.arrowclosed]="marker.type === 'arrowclosed'"
-              [attr.stroke]="marker.color || 'currentColor'"
-              [attr.fill]="marker.type === 'arrowclosed' ? (marker.color || 'currentColor') : 'none'"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1"
-              points="-5,-4 0,0 -5,4"
-            />
-          </marker>
-        }
-      </defs>
-    </svg>
-    @for (edge of visibleEdges(); track edge.id) {
-      @if (!edge.hidden) {
-      @let ei = getEdgeInputs(edge);
-      <svg
-        class="ng-flow__edge xy-flow__edge"
-        [class]="getEdgeClasses(edge)"
-        [class.selected]="edge.selected"
-        [class.animated]="edge.animated"
-        [class.selectable]="edge.selectable !== false"
-        [style.z-index]="getEdgeZIndex(edge)"
-        [attr.aria-label]="getEdgeAriaLabel(edge)"
-        [attr.tabindex]="store.edgesFocusable() ? 0 : -1"
-        role="img"
-        style="overflow: visible; position: absolute; width: 100%; height: 100%; pointer-events: none;"
-        (keydown)="onEdgeKeyDown($event, edge)"
-        (focus)="onEdgeFocus(edge)"
-      >
-        <g
-          [attr.data-id]="edge.id"
-          [class]="getEdgeGClasses(edge)"
-          [attr.aria-label]="edge.ariaLabel ? edge.ariaLabel : undefined"
-          style="pointer-events: visibleStroke;"
-          (click)="onEdgeEvent($event, edge, 'click')"
-          (dblclick)="onEdgeEvent($event, edge, 'dblclick')"
-          (contextmenu)="onEdgeEvent($event, edge, 'contextmenu')"
-          (mouseenter)="onEdgeEvent($event, edge, 'mouseenter')"
-          (mousemove)="onEdgeEvent($event, edge, 'mousemove')"
-          (mouseleave)="onEdgeEvent($event, edge, 'mouseleave')"
-        >
-          @if (isCustomEdge(edge.type)) {
-            <!--
-              For custom edges the visual (path + labels) is rendered in the
-              HTML overlay layer below, because NgComponentOutlet creates the
-              dynamic component's host in the XHTML namespace which breaks SVG
-              child rendering. We still emit a transparent interaction path
-              here so that pointer events (click/hover/etc.) fire on the
-              existing SVG <g> event handlers.
-            -->
-            <path
-              class="xy-flow__edge-interaction"
-              [attr.d]="getEdgePath(ei)"
-              fill="none"
-              stroke="transparent"
-              [attr.stroke-width]="edge.interactionWidth ?? 20"
-              style="pointer-events: all;"
-            />
-          } @else {
-            <path
-              class="xy-flow__edge-interaction"
-              [attr.d]="getEdgePath(ei)"
-              fill="none"
-              stroke="transparent"
-              [attr.stroke-width]="edge.interactionWidth ?? 20"
-              style="pointer-events: all;"
-            />
-            <path
-              class="ng-flow__edge-path xy-flow__edge-path"
-              [attr.d]="getEdgePath(ei)"
-              [attr.marker-start]="ei['markerStart']"
-              [attr.marker-end]="ei['markerEnd']"
-              [attr.style]="getEdgePathStyle(edge)"
-            />
-          }
-          @if (isEdgeReconnectable(edge)) {
-            <circle
-              class="xy-flow__edgeupdater xy-flow__edgeupdater-source"
-              [attr.cx]="shiftX(ei['sourceX'], reconnectRadius(), ei['sourcePosition'])"
-              [attr.cy]="shiftY(ei['sourceY'], reconnectRadius(), ei['sourcePosition'])"
-              [attr.r]="reconnectRadius()"
-              stroke="transparent"
-              fill="transparent"
-              (mousedown)="onReconnectSourceMouseDown($event, edge)"
-            />
-            <circle
-              class="xy-flow__edgeupdater xy-flow__edgeupdater-target"
-              [attr.cx]="shiftX(ei['targetX'], reconnectRadius(), ei['targetPosition'])"
-              [attr.cy]="shiftY(ei['targetY'], reconnectRadius(), ei['targetPosition'])"
-              [attr.r]="reconnectRadius()"
-              stroke="transparent"
-              fill="transparent"
-              (mousedown)="onReconnectTargetMouseDown($event, edge)"
-            />
-          }
-        </g>
-      </svg>
-      }
-    }
-    <!--
-      HTML overlay for custom edges. Angular's NgComponentOutlet can only
-      create host elements in the XHTML namespace, so rendering a custom
-      edge directly inside an <svg> sub-tree breaks its <path> children.
-      We render the dynamic component here in an HTML context and let
-      BaseEdgeComponent wrap its paths in an inline <svg>. Pointer events
-      are still handled on the SVG <g> layer above via a transparent
-      interaction path, so this overlay is pointer-events: none.
-    -->
-    @for (edge of visibleEdges(); track edge.id) {
-      @if (!edge.hidden && isCustomEdge(edge.type)) {
-        @let ei = getEdgeInputs(edge);
-        <div
-          class="ng-flow__custom-edge"
-          [style.position]="'absolute'"
-          [style.top]="'0'"
-          [style.left]="'0'"
-          [style.width]="'100%'"
-          [style.height]="'100%'"
-          [style.pointer-events]="'none'"
-          [style.z-index]="getEdgeZIndex(edge)"
-        >
-          <ng-container
-            *ngComponentOutlet="getEdgeComponent(edge.type); inputs: ei"
-          />
-        </div>
-      }
-    }
-    <div class="xy-flow__edgelabel-renderer" style="position: absolute; width: 100%; height: 100%; pointer-events: none; top: 0; left: 0;">
-      @for (edge of visibleEdges(); track edge.id) {
-        @if (edge.label && !edge.hidden) {
-          @let ei = getEdgeInputs(edge);
-          <div
-            class="xy-flow__edge-label"
-            [style.position]="'absolute'"
-            [style.transform]="'translate(-50%, -50%) translate(' + getEdgeCenterX(ei) + 'px, ' + getEdgeCenterY(ei) + 'px)'"
-            [style.pointer-events]="'all'"
-          >
-            {{ edge.label }}
-          </div>
-        }
-      }
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: EdgeRendererComponent, isStandalone: true, selector: "ng-flow-edge-renderer", inputs: { reconnectRadius: { classPropertyName: "reconnectRadius", publicName: "reconnectRadius", isSignal: true, isRequired: false, transformFunction: null }, customEdgeTypes: { classPropertyName: "customEdgeTypes", publicName: "customEdgeTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edgeClick: "edgeClick", edgeDoubleClick: "edgeDoubleClick", edgeContextMenu: "edgeContextMenu", edgeMouseEnter: "edgeMouseEnter", edgeMouseMove: "edgeMouseMove", edgeMouseLeave: "edgeMouseLeave", reconnect: "reconnect", reconnectStart: "reconnectStart", reconnectEnd: "reconnectEnd" }, host: { styleAttribute: "position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;", classAttribute: "ng-flow__edges xy-flow__edges" }, ngImport: i0, template: `
+    <svg style="position: absolute; width: 100%; height: 100%; overflow: visible; pointer-events: none;">
+      <defs>
+        @for (marker of markers(); track marker.id) {
+          <marker
+            [id]="marker.id"
+            [attr.markerWidth]="marker.width ?? 12.5"
+            [attr.markerHeight]="marker.height ?? 12.5"
+            viewBox="-10 -10 20 20"
+            markerUnits="strokeWidth"
+            orient="auto-start-reverse"
+            refX="0"
+            refY="0"
+          >
+            <polyline
+              class="xy-flow__arrowhead"
+              [class.arrowclosed]="marker.type === 'arrowclosed'"
+              [attr.stroke]="marker.color || 'currentColor'"
+              [attr.fill]="marker.type === 'arrowclosed' ? (marker.color || 'currentColor') : 'none'"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1"
+              points="-5,-4 0,0 -5,4"
+            />
+          </marker>
+        }
+      </defs>
+    </svg>
+    @for (edge of visibleEdges(); track edge.id) {
+      @if (!edge.hidden) {
+      @let ei = getEdgeInputs(edge);
+      <svg
+        class="ng-flow__edge xy-flow__edge"
+        [class]="getEdgeClasses(edge)"
+        [class.selected]="edge.selected"
+        [class.animated]="edge.animated"
+        [class.selectable]="edge.selectable !== false"
+        [style.z-index]="getEdgeZIndex(edge)"
+        [attr.aria-label]="getEdgeAriaLabel(edge)"
+        [attr.tabindex]="store.edgesFocusable() ? 0 : -1"
+        role="img"
+        style="overflow: visible; position: absolute; width: 100%; height: 100%; pointer-events: none;"
+        (keydown)="onEdgeKeyDown($event, edge)"
+        (focus)="onEdgeFocus(edge)"
+      >
+        <g
+          [attr.data-id]="edge.id"
+          [class]="getEdgeGClasses(edge)"
+          [attr.aria-label]="edge.ariaLabel ? edge.ariaLabel : undefined"
+          style="pointer-events: visibleStroke;"
+          (click)="onEdgeEvent($event, edge, 'click')"
+          (dblclick)="onEdgeEvent($event, edge, 'dblclick')"
+          (contextmenu)="onEdgeEvent($event, edge, 'contextmenu')"
+          (mouseenter)="onEdgeEvent($event, edge, 'mouseenter')"
+          (mousemove)="onEdgeEvent($event, edge, 'mousemove')"
+          (mouseleave)="onEdgeEvent($event, edge, 'mouseleave')"
+        >
+          @if (isCustomEdge(edge.type)) {
+            <!--
+              For custom edges the visual (path + labels) is rendered in the
+              HTML overlay layer below, because NgComponentOutlet creates the
+              dynamic component's host in the XHTML namespace which breaks SVG
+              child rendering. We still emit a transparent interaction path
+              here so that pointer events (click/hover/etc.) fire on the
+              existing SVG <g> event handlers.
+            -->
+            <path
+              class="xy-flow__edge-interaction"
+              [attr.d]="getEdgePath(ei)"
+              fill="none"
+              stroke="transparent"
+              [attr.stroke-width]="edge.interactionWidth ?? 20"
+              style="pointer-events: all;"
+            />
+          } @else {
+            <path
+              class="xy-flow__edge-interaction"
+              [attr.d]="getEdgePath(ei)"
+              fill="none"
+              stroke="transparent"
+              [attr.stroke-width]="edge.interactionWidth ?? 20"
+              style="pointer-events: all;"
+            />
+            <path
+              class="ng-flow__edge-path xy-flow__edge-path"
+              [attr.d]="getEdgePath(ei)"
+              [attr.marker-start]="ei['markerStart']"
+              [attr.marker-end]="ei['markerEnd']"
+              [attr.style]="getEdgePathStyle(edge)"
+            />
+          }
+          @if (isEdgeReconnectable(edge)) {
+            <circle
+              class="xy-flow__edgeupdater xy-flow__edgeupdater-source"
+              [attr.cx]="shiftX(ei['sourceX'], reconnectRadius(), ei['sourcePosition'])"
+              [attr.cy]="shiftY(ei['sourceY'], reconnectRadius(), ei['sourcePosition'])"
+              [attr.r]="reconnectRadius()"
+              stroke="transparent"
+              fill="transparent"
+              (mousedown)="onReconnectSourceMouseDown($event, edge)"
+            />
+            <circle
+              class="xy-flow__edgeupdater xy-flow__edgeupdater-target"
+              [attr.cx]="shiftX(ei['targetX'], reconnectRadius(), ei['targetPosition'])"
+              [attr.cy]="shiftY(ei['targetY'], reconnectRadius(), ei['targetPosition'])"
+              [attr.r]="reconnectRadius()"
+              stroke="transparent"
+              fill="transparent"
+              (mousedown)="onReconnectTargetMouseDown($event, edge)"
+            />
+          }
+        </g>
+      </svg>
+      }
+    }
+    <!--
+      HTML overlay for custom edges. Angular's NgComponentOutlet can only
+      create host elements in the XHTML namespace, so rendering a custom
+      edge directly inside an <svg> sub-tree breaks its <path> children.
+      We render the dynamic component here in an HTML context and let
+      BaseEdgeComponent wrap its paths in an inline <svg>. Pointer events
+      are still handled on the SVG <g> layer above via a transparent
+      interaction path, so this overlay is pointer-events: none.
+    -->
+    @for (edge of visibleEdges(); track edge.id) {
+      @if (!edge.hidden && isCustomEdge(edge.type)) {
+        @let ei = getEdgeInputs(edge);
+        <div
+          class="ng-flow__custom-edge"
+          [style.position]="'absolute'"
+          [style.top]="'0'"
+          [style.left]="'0'"
+          [style.width]="'100%'"
+          [style.height]="'100%'"
+          [style.pointer-events]="'none'"
+          [style.z-index]="getEdgeZIndex(edge)"
+        >
+          <ng-container
+            *ngComponentOutlet="getEdgeComponent(edge.type); inputs: ei"
+          />
+        </div>
+      }
+    }
+    <div class="xy-flow__edgelabel-renderer" style="position: absolute; width: 100%; height: 100%; pointer-events: none; top: 0; left: 0;">
+      @for (edge of visibleEdges(); track edge.id) {
+        @if (edge.label && !edge.hidden) {
+          @let ei = getEdgeInputs(edge);
+          <div
+            class="xy-flow__edge-label"
+            [style.position]="'absolute'"
+            [style.transform]="'translate(-50%, -50%) translate(' + getEdgeCenterX(ei) + 'px, ' + getEdgeCenterY(ei) + 'px)'"
+            [style.pointer-events]="'all'"
+          >
+            {{ edge.label }}
+          </div>
+        }
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EdgeRendererComponent, decorators: [{
@@ -482,164 +482,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         'class': 'ng-flow__edges xy-flow__edges',
                         'style': 'position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;',
                     },
-                    template: `
-    <svg style="position: absolute; width: 100%; height: 100%; overflow: visible; pointer-events: none;">
-      <defs>
-        @for (marker of markers(); track marker.id) {
-          <marker
-            [id]="marker.id"
-            [attr.markerWidth]="marker.width ?? 12.5"
-            [attr.markerHeight]="marker.height ?? 12.5"
-            viewBox="-10 -10 20 20"
-            markerUnits="strokeWidth"
-            orient="auto-start-reverse"
-            refX="0"
-            refY="0"
-          >
-            <polyline
-              class="xy-flow__arrowhead"
-              [class.arrowclosed]="marker.type === 'arrowclosed'"
-              [attr.stroke]="marker.color || 'currentColor'"
-              [attr.fill]="marker.type === 'arrowclosed' ? (marker.color || 'currentColor') : 'none'"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1"
-              points="-5,-4 0,0 -5,4"
-            />
-          </marker>
-        }
-      </defs>
-    </svg>
-    @for (edge of visibleEdges(); track edge.id) {
-      @if (!edge.hidden) {
-      @let ei = getEdgeInputs(edge);
-      <svg
-        class="ng-flow__edge xy-flow__edge"
-        [class]="getEdgeClasses(edge)"
-        [class.selected]="edge.selected"
-        [class.animated]="edge.animated"
-        [class.selectable]="edge.selectable !== false"
-        [style.z-index]="getEdgeZIndex(edge)"
-        [attr.aria-label]="getEdgeAriaLabel(edge)"
-        [attr.tabindex]="store.edgesFocusable() ? 0 : -1"
-        role="img"
-        style="overflow: visible; position: absolute; width: 100%; height: 100%; pointer-events: none;"
-        (keydown)="onEdgeKeyDown($event, edge)"
-        (focus)="onEdgeFocus(edge)"
-      >
-        <g
-          [attr.data-id]="edge.id"
-          [class]="getEdgeGClasses(edge)"
-          [attr.aria-label]="edge.ariaLabel ? edge.ariaLabel : undefined"
-          style="pointer-events: visibleStroke;"
-          (click)="onEdgeEvent($event, edge, 'click')"
-          (dblclick)="onEdgeEvent($event, edge, 'dblclick')"
-          (contextmenu)="onEdgeEvent($event, edge, 'contextmenu')"
-          (mouseenter)="onEdgeEvent($event, edge, 'mouseenter')"
-          (mousemove)="onEdgeEvent($event, edge, 'mousemove')"
-          (mouseleave)="onEdgeEvent($event, edge, 'mouseleave')"
-        >
-          @if (isCustomEdge(edge.type)) {
-            <!--
-              For custom edges the visual (path + labels) is rendered in the
-              HTML overlay layer below, because NgComponentOutlet creates the
-              dynamic component's host in the XHTML namespace which breaks SVG
-              child rendering. We still emit a transparent interaction path
-              here so that pointer events (click/hover/etc.) fire on the
-              existing SVG <g> event handlers.
-            -->
-            <path
-              class="xy-flow__edge-interaction"
-              [attr.d]="getEdgePath(ei)"
-              fill="none"
-              stroke="transparent"
-              [attr.stroke-width]="edge.interactionWidth ?? 20"
-              style="pointer-events: all;"
-            />
-          } @else {
-            <path
-              class="xy-flow__edge-interaction"
-              [attr.d]="getEdgePath(ei)"
-              fill="none"
-              stroke="transparent"
-              [attr.stroke-width]="edge.interactionWidth ?? 20"
-              style="pointer-events: all;"
-            />
-            <path
-              class="ng-flow__edge-path xy-flow__edge-path"
-              [attr.d]="getEdgePath(ei)"
-              [attr.marker-start]="ei['markerStart']"
-              [attr.marker-end]="ei['markerEnd']"
-              [attr.style]="getEdgePathStyle(edge)"
-            />
-          }
-          @if (isEdgeReconnectable(edge)) {
-            <circle
-              class="xy-flow__edgeupdater xy-flow__edgeupdater-source"
-              [attr.cx]="shiftX(ei['sourceX'], reconnectRadius(), ei['sourcePosition'])"
-              [attr.cy]="shiftY(ei['sourceY'], reconnectRadius(), ei['sourcePosition'])"
-              [attr.r]="reconnectRadius()"
-              stroke="transparent"
-              fill="transparent"
-              (mousedown)="onReconnectSourceMouseDown($event, edge)"
-            />
-            <circle
-              class="xy-flow__edgeupdater xy-flow__edgeupdater-target"
-              [attr.cx]="shiftX(ei['targetX'], reconnectRadius(), ei['targetPosition'])"
-              [attr.cy]="shiftY(ei['targetY'], reconnectRadius(), ei['targetPosition'])"
-              [attr.r]="reconnectRadius()"
-              stroke="transparent"
-              fill="transparent"
-              (mousedown)="onReconnectTargetMouseDown($event, edge)"
-            />
-          }
-        </g>
-      </svg>
-      }
-    }
-    <!--
-      HTML overlay for custom edges. Angular's NgComponentOutlet can only
-      create host elements in the XHTML namespace, so rendering a custom
-      edge directly inside an <svg> sub-tree breaks its <path> children.
-      We render the dynamic component here in an HTML context and let
-      BaseEdgeComponent wrap its paths in an inline <svg>. Pointer events
-      are still handled on the SVG <g> layer above via a transparent
-      interaction path, so this overlay is pointer-events: none.
-    -->
-    @for (edge of visibleEdges(); track edge.id) {
-      @if (!edge.hidden && isCustomEdge(edge.type)) {
-        @let ei = getEdgeInputs(edge);
-        <div
-          class="ng-flow__custom-edge"
-          [style.position]="'absolute'"
-          [style.top]="'0'"
-          [style.left]="'0'"
-          [style.width]="'100%'"
-          [style.height]="'100%'"
-          [style.pointer-events]="'none'"
-          [style.z-index]="getEdgeZIndex(edge)"
-        >
-          <ng-container
-            *ngComponentOutlet="getEdgeComponent(edge.type); inputs: ei"
-          />
-        </div>
-      }
-    }
-    <div class="xy-flow__edgelabel-renderer" style="position: absolute; width: 100%; height: 100%; pointer-events: none; top: 0; left: 0;">
-      @for (edge of visibleEdges(); track edge.id) {
-        @if (edge.label && !edge.hidden) {
-          @let ei = getEdgeInputs(edge);
-          <div
-            class="xy-flow__edge-label"
-            [style.position]="'absolute'"
-            [style.transform]="'translate(-50%, -50%) translate(' + getEdgeCenterX(ei) + 'px, ' + getEdgeCenterY(ei) + 'px)'"
-            [style.pointer-events]="'all'"
-          >
-            {{ edge.label }}
-          </div>
-        }
-      }
-    </div>
+                    template: `
+    <svg style="position: absolute; width: 100%; height: 100%; overflow: visible; pointer-events: none;">
+      <defs>
+        @for (marker of markers(); track marker.id) {
+          <marker
+            [id]="marker.id"
+            [attr.markerWidth]="marker.width ?? 12.5"
+            [attr.markerHeight]="marker.height ?? 12.5"
+            viewBox="-10 -10 20 20"
+            markerUnits="strokeWidth"
+            orient="auto-start-reverse"
+            refX="0"
+            refY="0"
+          >
+            <polyline
+              class="xy-flow__arrowhead"
+              [class.arrowclosed]="marker.type === 'arrowclosed'"
+              [attr.stroke]="marker.color || 'currentColor'"
+              [attr.fill]="marker.type === 'arrowclosed' ? (marker.color || 'currentColor') : 'none'"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1"
+              points="-5,-4 0,0 -5,4"
+            />
+          </marker>
+        }
+      </defs>
+    </svg>
+    @for (edge of visibleEdges(); track edge.id) {
+      @if (!edge.hidden) {
+      @let ei = getEdgeInputs(edge);
+      <svg
+        class="ng-flow__edge xy-flow__edge"
+        [class]="getEdgeClasses(edge)"
+        [class.selected]="edge.selected"
+        [class.animated]="edge.animated"
+        [class.selectable]="edge.selectable !== false"
+        [style.z-index]="getEdgeZIndex(edge)"
+        [attr.aria-label]="getEdgeAriaLabel(edge)"
+        [attr.tabindex]="store.edgesFocusable() ? 0 : -1"
+        role="img"
+        style="overflow: visible; position: absolute; width: 100%; height: 100%; pointer-events: none;"
+        (keydown)="onEdgeKeyDown($event, edge)"
+        (focus)="onEdgeFocus(edge)"
+      >
+        <g
+          [attr.data-id]="edge.id"
+          [class]="getEdgeGClasses(edge)"
+          [attr.aria-label]="edge.ariaLabel ? edge.ariaLabel : undefined"
+          style="pointer-events: visibleStroke;"
+          (click)="onEdgeEvent($event, edge, 'click')"
+          (dblclick)="onEdgeEvent($event, edge, 'dblclick')"
+          (contextmenu)="onEdgeEvent($event, edge, 'contextmenu')"
+          (mouseenter)="onEdgeEvent($event, edge, 'mouseenter')"
+          (mousemove)="onEdgeEvent($event, edge, 'mousemove')"
+          (mouseleave)="onEdgeEvent($event, edge, 'mouseleave')"
+        >
+          @if (isCustomEdge(edge.type)) {
+            <!--
+              For custom edges the visual (path + labels) is rendered in the
+              HTML overlay layer below, because NgComponentOutlet creates the
+              dynamic component's host in the XHTML namespace which breaks SVG
+              child rendering. We still emit a transparent interaction path
+              here so that pointer events (click/hover/etc.) fire on the
+              existing SVG <g> event handlers.
+            -->
+            <path
+              class="xy-flow__edge-interaction"
+              [attr.d]="getEdgePath(ei)"
+              fill="none"
+              stroke="transparent"
+              [attr.stroke-width]="edge.interactionWidth ?? 20"
+              style="pointer-events: all;"
+            />
+          } @else {
+            <path
+              class="xy-flow__edge-interaction"
+              [attr.d]="getEdgePath(ei)"
+              fill="none"
+              stroke="transparent"
+              [attr.stroke-width]="edge.interactionWidth ?? 20"
+              style="pointer-events: all;"
+            />
+            <path
+              class="ng-flow__edge-path xy-flow__edge-path"
+              [attr.d]="getEdgePath(ei)"
+              [attr.marker-start]="ei['markerStart']"
+              [attr.marker-end]="ei['markerEnd']"
+              [attr.style]="getEdgePathStyle(edge)"
+            />
+          }
+          @if (isEdgeReconnectable(edge)) {
+            <circle
+              class="xy-flow__edgeupdater xy-flow__edgeupdater-source"
+              [attr.cx]="shiftX(ei['sourceX'], reconnectRadius(), ei['sourcePosition'])"
+              [attr.cy]="shiftY(ei['sourceY'], reconnectRadius(), ei['sourcePosition'])"
+              [attr.r]="reconnectRadius()"
+              stroke="transparent"
+              fill="transparent"
+              (mousedown)="onReconnectSourceMouseDown($event, edge)"
+            />
+            <circle
+              class="xy-flow__edgeupdater xy-flow__edgeupdater-target"
+              [attr.cx]="shiftX(ei['targetX'], reconnectRadius(), ei['targetPosition'])"
+              [attr.cy]="shiftY(ei['targetY'], reconnectRadius(), ei['targetPosition'])"
+              [attr.r]="reconnectRadius()"
+              stroke="transparent"
+              fill="transparent"
+              (mousedown)="onReconnectTargetMouseDown($event, edge)"
+            />
+          }
+        </g>
+      </svg>
+      }
+    }
+    <!--
+      HTML overlay for custom edges. Angular's NgComponentOutlet can only
+      create host elements in the XHTML namespace, so rendering a custom
+      edge directly inside an <svg> sub-tree breaks its <path> children.
+      We render the dynamic component here in an HTML context and let
+      BaseEdgeComponent wrap its paths in an inline <svg>. Pointer events
+      are still handled on the SVG <g> layer above via a transparent
+      interaction path, so this overlay is pointer-events: none.
+    -->
+    @for (edge of visibleEdges(); track edge.id) {
+      @if (!edge.hidden && isCustomEdge(edge.type)) {
+        @let ei = getEdgeInputs(edge);
+        <div
+          class="ng-flow__custom-edge"
+          [style.position]="'absolute'"
+          [style.top]="'0'"
+          [style.left]="'0'"
+          [style.width]="'100%'"
+          [style.height]="'100%'"
+          [style.pointer-events]="'none'"
+          [style.z-index]="getEdgeZIndex(edge)"
+        >
+          <ng-container
+            *ngComponentOutlet="getEdgeComponent(edge.type); inputs: ei"
+          />
+        </div>
+      }
+    }
+    <div class="xy-flow__edgelabel-renderer" style="position: absolute; width: 100%; height: 100%; pointer-events: none; top: 0; left: 0;">
+      @for (edge of visibleEdges(); track edge.id) {
+        @if (edge.label && !edge.hidden) {
+          @let ei = getEdgeInputs(edge);
+          <div
+            class="xy-flow__edge-label"
+            [style.position]="'absolute'"
+            [style.transform]="'translate(-50%, -50%) translate(' + getEdgeCenterX(ei) + 'px, ' + getEdgeCenterY(ei) + 'px)'"
+            [style.pointer-events]="'all'"
+          >
+            {{ edge.label }}
+          </div>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { reconnectRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "reconnectRadius", required: false }] }], edgeClick: [{ type: i0.Output, args: ["edgeClick"] }], edgeDoubleClick: [{ type: i0.Output, args: ["edgeDoubleClick"] }], edgeContextMenu: [{ type: i0.Output, args: ["edgeContextMenu"] }], edgeMouseEnter: [{ type: i0.Output, args: ["edgeMouseEnter"] }], edgeMouseMove: [{ type: i0.Output, args: ["edgeMouseMove"] }], edgeMouseLeave: [{ type: i0.Output, args: ["edgeMouseLeave"] }], customEdgeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "customEdgeTypes", required: false }] }], reconnect: [{ type: i0.Output, args: ["reconnect"] }], reconnectStart: [{ type: i0.Output, args: ["reconnectStart"] }], reconnectEnd: [{ type: i0.Output, args: ["reconnectEnd"] }] } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angflow/angular",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "description": "Angular Flow - A highly customizable Angular library for building node-based editors and interactive flow charts.",
   "keywords": [
@@ -47,7 +47,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@angflow/system": ">=0.0.85"
+    "@angflow/system": ">=0.0.86"
   },
   "peerDependencies": {
     "@angular/common": ">=17.0.0",