ngx-vflow 1.5.0 → 1.6.0

package/fesm2022/ngx-vflow.mjs

@@ -576,6 +576,9 @@ class EdgeTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EdgeTemplateDirective, isStandalone: true, selector: "ng-template[edge]", ngImport: i0 }); }
 }
@@ -590,6 +593,9 @@ class ConnectionTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionTemplateDirective, isStandalone: true, selector: "ng-template[connection]", ngImport: i0 }); }
 }
@@ -604,6 +610,9 @@ class EdgeLabelHtmlTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EdgeLabelHtmlTemplateDirective, isStandalone: true, selector: "ng-template[edgeLabelHtml]", ngImport: i0 }); }
 }
@@ -618,6 +627,9 @@ class NodeHtmlTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeHtmlTemplateDirective, isStandalone: true, selector: "ng-template[nodeHtml]", ngImport: i0 }); }
 }
@@ -632,6 +644,9 @@ class GroupNodeTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupNodeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: GroupNodeTemplateDirective, isStandalone: true, selector: "ng-template[groupNode]", ngImport: i0 }); }
 }
@@ -927,6 +942,9 @@ class NodeModel {
         this.resizable = signal(false);
         this.resizing = signal(false);
         this.resizerTemplate = signal(null);
+        this.context = {
+            $implicit: {},
+        };
         this.parentId = signal(null);
         if (isDefined(node.draggable)) {
             if (isDynamicNode(node)) {
@@ -960,6 +978,24 @@ class NodeModel {
                 this.resizable.set(node.resizable);
             }
         }
+        if (node.type === 'html-template') {
+            this.context = {
+                $implicit: {
+                    node: node,
+                    selected: this.selected,
+                },
+            };
+        }
+        else if (node.type === 'template-group') {
+            this.context = {
+                $implicit: {
+                    node: node,
+                    selected: this.selected.asReadonly(),
+                    width: this.width,
+                    height: this.height,
+                },
+            };
+        }
     }
     setPoint(point) {
         this.point.set(point);
@@ -1336,6 +1372,30 @@ class EdgeModel {
                 ?.handles()
                 .find((handle) => handle.rawHandle.type === 'target') ?? null);
         });
+        /**
+         * TODO: not reactive
+         */
+        this.markerStartUrl = computed(() => {
+            const marker = this.edge.markers?.start;
+            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
+        });
+        /**
+         * TODO: not reactive
+         */
+        this.markerEndUrl = computed(() => {
+            const marker = this.edge.markers?.end;
+            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
+        });
+        this.context = {
+            $implicit: {
+                // TODO: check if edge could change
+                edge: this.edge,
+                path: computed(() => this.path().path),
+                markerStart: this.markerStartUrl,
+                markerEnd: this.markerEndUrl,
+                selected: this.selected.asReadonly(),
+            },
+        };
         this.edgeLabels = {};
         this.type = edge.type ?? 'default';
         this.curve = edge.curve ?? 'bezier';
@@ -1844,6 +1904,7 @@ class EdgeLabelComponent {
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
+    // TODO: move to model with Contextable interface
     getLabelContext() {
         return {
             $implicit: {
@@ -2138,33 +2199,12 @@ class EdgeComponent {
         this.model = input.required();
         this.edgeTemplate = input();
         this.edgeLabelHtmlTemplate = input();
-        this.interactiveEdgeRef = viewChild.required('interactiveEdge');
-        this.markerStartUrl = computed(() => {
-            const marker = this.model().edge.markers?.start;
-            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
-        });
-        this.markerEndUrl = computed(() => {
-            const marker = this.model().edge.markers?.end;
-            return marker ? `url(#${hashCode(JSON.stringify(marker))})` : '';
-        });
         this.isReconnecting = computed(() => {
             const status = this.flowStatusService.status();
             const isReconnecting = status.state === 'reconnection-start' || status.state === 'reconnection-validation';
             return isReconnecting && status.payload.oldEdge === this.model();
         });
     }
-    ngOnInit() {
-        this.edgeContext = {
-            $implicit: {
-                // TODO: check if edge could change
-                edge: this.model().edge,
-                path: computed(() => this.model().path().path),
-                markerStart: this.markerStartUrl,
-                markerEnd: this.markerEndUrl,
-                selected: this.model().selected.asReadonly(),
-            },
-        };
-    }
     select() {
         if (this.flowSettingsService.entitiesSelectable()) {
             this.selectionService.select(this.model());
@@ -2181,14 +2221,14 @@ class EdgeComponent {
         this.connectionController?.startReconnection(handle, this.model());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeComponent, isStandalone: true, selector: "g[edge]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeTemplate: { classPropertyName: "edgeTemplate", publicName: "edgeTemplate", isSignal: true, isRequired: false, transformFunction: null }, edgeLabelHtmlTemplate: { classPropertyName: "edgeLabelHtmlTemplate", publicName: "edgeLabelHtmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isReconnecting() ? \"hidden\" : \"visible\"" }, classAttribute: "selectable" }, viewQueries: [{ propertyName: "interactiveEdgeRef", first: true, predicate: ["interactiveEdge"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"markerStartUrl()\"\n    [attr.marker-end]=\"markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path\n    #interactiveEdge\n    class=\"interactive-edge\"\n    [attr.d]=\"model().path().path\"\n    (pointerStart)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"edgeContext\"\n      [ngTemplateOutletInjector]=\"injector\" />\n\n    <svg:path #interactiveEdge class=\"interactive-edge\" [attr.d]=\"model().path().path\" (pointerStart)=\"pull()\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable === true || model().reconnectable === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable === true || model().reconnectable === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: ["model", "edgeModel", "point", "htmlTemplate"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeComponent, isStandalone: true, selector: "g[edge]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeTemplate: { classPropertyName: "edgeTemplate", publicName: "edgeTemplate", isSignal: true, isRequired: false, transformFunction: null }, edgeLabelHtmlTemplate: { classPropertyName: "edgeLabelHtmlTemplate", publicName: "edgeLabelHtmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isReconnecting() ? \"hidden\" : \"visible\"" }, classAttribute: "selectable" }, ngImport: i0, template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerStartUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (pointerStart)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable === true || model().reconnectable === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable === true || model().reconnectable === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: ["model", "edgeModel", "point", "htmlTemplate"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'g[edge]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'selectable',
                         '[style.visibility]': 'isReconnecting() ? "hidden" : "visible"',
-                    }, imports: [NgTemplateOutlet, EdgeLabelComponent, PointerDirective], template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"markerStartUrl()\"\n    [attr.marker-end]=\"markerEndUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path\n    #interactiveEdge\n    class=\"interactive-edge\"\n    [attr.d]=\"model().path().path\"\n    (pointerStart)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"edgeContext\"\n      [ngTemplateOutletInjector]=\"injector\" />\n\n    <svg:path #interactiveEdge class=\"interactive-edge\" [attr.d]=\"model().path().path\" (pointerStart)=\"pull()\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable === true || model().reconnectable === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable === true || model().reconnectable === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"] }]
+                    }, imports: [NgTemplateOutlet, EdgeLabelComponent, PointerDirective], template: "@if (model().type === 'default') {\n  <svg:path\n    class=\"edge\"\n    [attr.d]=\"model().path().path\"\n    [attr.marker-start]=\"model().markerStartUrl()\"\n    [attr.marker-end]=\"model().markerStartUrl()\"\n    [class.edge_selected]=\"model().selected()\" />\n\n  <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (pointerStart)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n  @if (edgeTemplate(); as edgeTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"edgeTemplate\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  }\n}\n\n@if (model().edgeLabels.start; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.start\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.center; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.center\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().edgeLabels.end; as label) {\n  <svg:g\n    edgeLabel\n    [model]=\"label\"\n    [point]=\"model().path().points.end\"\n    [edgeModel]=\"model()\"\n    [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n  @if (model().reconnectable === true || model().reconnectable === 'source') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n  }\n\n  @if (model().reconnectable === true || model().reconnectable === 'target') {\n    <svg:circle\n      class=\"reconnect-handle\"\n      r=\"10\"\n      [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n      [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n      (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n  }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"] }]
         }] });
 
 class HandleService {
@@ -2713,7 +2753,7 @@ class NodeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NodeComponent, isStandalone: true, selector: "g[node]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupNodeTemplate: { classPropertyName: "groupNodeTemplate", publicName: "groupNodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], ngImport: i0, template: "<!-- Default node -->\n@if (model().node.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- Template node -->\n@if (model().node.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: { node: model().node, selected: model().selected },\n        }\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().node.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().node.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\n    [class.default-group-node_selected]=\"model().selected()\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    [style.stroke]=\"model().color()\"\n    [style.fill]=\"model().color()\"\n    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().node.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: {\n          node: model().node,\n          selected: model().selected,\n          width: model().width,\n          height: model().height,\n        },\n      }\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@if (toolbar(); as toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: NodeHandlesControllerDirective, selector: "[nodeHandlesController]" }, { kind: "directive", type: NodeResizeControllerDirective, selector: "[nodeResizeController]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NodeComponent, isStandalone: true, selector: "g[node]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupNodeTemplate: { classPropertyName: "groupNodeTemplate", publicName: "groupNodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], ngImport: i0, template: "<!-- Default node -->\n@if (model().node.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- Template node -->\n@if (model().node.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().node.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().node.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\n    [class.default-group-node_selected]=\"model().selected()\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    [style.stroke]=\"model().color()\"\n    [style.fill]=\"model().color()\"\n    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().node.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@if (toolbar(); as toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: NodeHandlesControllerDirective, selector: "[nodeHandlesController]" }, { kind: "directive", type: NodeResizeControllerDirective, selector: "[nodeResizeController]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
@@ -2729,7 +2769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         HandleSizeControllerDirective,
                         NodeHandlesControllerDirective,
                         NodeResizeControllerDirective,
-                    ], template: "<!-- Default node -->\n@if (model().node.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- Template node -->\n@if (model().node.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: { node: model().node, selected: model().selected },\n        }\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().node.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().node.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\n    [class.default-group-node_selected]=\"model().selected()\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    [style.stroke]=\"model().color()\"\n    [style.fill]=\"model().color()\"\n    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().node.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: {\n          node: model().node,\n          selected: model().selected,\n          width: model().width,\n          height: model().height,\n        },\n      }\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@if (toolbar(); as toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
+                    ], template: "<!-- Default node -->\n@if (model().node.type === 'default') {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode(); selectNode()\">\n    <default-node\n      nodeHandlesController\n      [selected]=\"model().selected()\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\"\n      [style.max-width]=\"model().styleWidth()\"\n      [style.max-height]=\"model().styleHeight()\">\n      <div [outerHTML]=\"model().text()\"></div>\n\n      <handle type=\"source\" position=\"right\" />\n      <handle type=\"target\" position=\"left\" />\n    </default-node>\n  </svg:foreignObject>\n}\n\n<!-- Template node -->\n@if (model().node.type === 'html-template' && nodeTemplate()) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"model().context\"\n        [ngTemplateOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n  <svg:foreignObject\n    class=\"selectable\"\n    [attr.width]=\"model().foWidth()\"\n    [attr.height]=\"model().foHeight()\"\n    (pointerStart)=\"pullNode()\">\n    <div\n      nodeHandlesController\n      nodeResizeController\n      class=\"wrapper\"\n      [style.width]=\"model().styleWidth()\"\n      [style.height]=\"model().styleHeight()\">\n      <ng-container\n        [ngComponentOutlet]=\"$any(model().node.type)\"\n        [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n        [ngComponentOutletInjector]=\"injector\" />\n    </div>\n  </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().node.type === 'default-group') {\n  <svg:rect\n    class=\"default-group-node\"\n    rx=\"5\"\n    ry=\"5\"\n    [resizable]=\"model().resizable()\"\n    [gap]=\"3\"\n    [resizerColor]=\"model().color()\"\n    [class.default-group-node_selected]=\"model().selected()\"\n    [attr.width]=\"model().size().width\"\n    [attr.height]=\"model().size().height\"\n    [style.stroke]=\"model().color()\"\n    [style.fill]=\"model().color()\"\n    (pointerStart)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node  -->\n@if (model().node.type === 'template-group' && groupNodeTemplate()) {\n  <svg:g class=\"selectable\" nodeHandlesController (pointerStart)=\"pullNode()\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n      [ngTemplateOutletContext]=\"model().context\"\n      [ngTemplateOutletInjector]=\"injector\" />\n  </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n  @if (model().resizable()) {\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n  @if (!handle.template) {\n    <svg:circle\n      class=\"default-handle\"\n      r=\"5\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      [attr.stroke-width]=\"handle.strokeWidth\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\" />\n  }\n\n  @if (handle.template) {\n    <svg:g\n      [handleSizeController]=\"handle\"\n      (pointerStart)=\"startConnection($event, handle)\"\n      (pointerEnd)=\"endConnection()\">\n      <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n    </svg:g>\n  }\n\n  @if (showMagnet()) {\n    <svg:circle\n      class=\"magnet\"\n      [attr.r]=\"model().magnetRadius\"\n      [attr.cx]=\"handle.hostOffset().x\"\n      [attr.cy]=\"handle.hostOffset().y\"\n      (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n      (pointerOver)=\"validateConnection(handle)\"\n      (pointerOut)=\"resetValidateConnection(handle)\" />\n  }\n}\n\n<!-- Toolbar -->\n@if (toolbar(); as toolbar) {\n  <svg:foreignObject\n    [attr.width]=\"toolbar.size().width\"\n    [attr.height]=\"toolbar.size().height\"\n    [attr.transform]=\"toolbar.transform()\">\n    <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n  </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
         }] });
 
 class ConnectionComponent {
@@ -2791,6 +2831,7 @@ class ConnectionComponent {
         });
         this.defaultColor = 'rgb(177, 177, 183)';
     }
+    // TODO: move context to model
     getContext() {
         return {
             $implicit: {
@@ -3461,11 +3502,6 @@ class SelectableDirective {
         return null;
     }
     getEvent$() {
-        if (this.parentEdge) {
-            // get not the edge itself, but the interactive edge (which is more UX friendly)
-            const interactiveEdge = this.parentEdge.interactiveEdgeRef().nativeElement;
-            return merge(fromEvent(interactiveEdge, 'mousedown'), fromEvent(interactiveEdge, 'touchstart'));
-        }
         return merge(fromEvent(this.host.nativeElement, 'mousedown'), fromEvent(this.host.nativeElement, 'touchstart'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -3683,6 +3719,7 @@ const Vflow = [
     SelectableDirective,
     MiniMapComponent,
     NodeToolbarComponent,
+    CustomTemplateEdgeComponent,
     DragHandleDirective,
     ConnectionControllerDirective,
     NodeHtmlTemplateDirective,
@@ -3693,6 +3730,30 @@ const Vflow = [
     HandleTemplateDirective,
 ];
 
+class CustomTemplateEdgeComponent {
+    constructor() {
+        this.edge = inject(EdgeComponent);
+        this.flowSettingsService = inject(FlowSettingsService);
+        this.edgeRenderingService = inject(EdgeRenderingService);
+        this.model = this.edge.model();
+        this.context = this.model.context.$implicit;
+    }
+    pull() {
+        if (this.flowSettingsService.elevateEdgesOnSelect()) {
+            this.edgeRenderingService.pull(this.model);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomTemplateEdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomTemplateEdgeComponent, isStandalone: true, selector: "g[customTemplateEdge]", host: { listeners: { "mousedown": "pull()", "touchstart": "pull()" } }, ngImport: i0, template: "<ng-content />\n\n<svg:path #interactiveEdge class=\"interactive-edge\" [attr.d]=\"context.path()\" />\n", styles: [".interactive-edge{fill:none;stroke-width:20;stroke:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomTemplateEdgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'g[customTemplateEdge]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
+                        '(mousedown)': 'pull()',
+                        '(touchstart)': 'pull()',
+                    }, template: "<ng-content />\n\n<svg:path #interactiveEdge class=\"interactive-edge\" [attr.d]=\"context.path()\" />\n", styles: [".interactive-edge{fill:none;stroke-width:20;stroke:transparent}\n"] }]
+        }] });
+
 const mockModel = () => new NodeModel({ id: 'mock', type: 'default', point: { x: 0, y: 0 } });
 function provideCustomNodeMocks() {
     return [
@@ -4264,5 +4325,5 @@ const VflowMocks = [
  * Generated bundle index. Do not edit.
  */
 
-export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionControllerMockDirective, ConnectionTemplateDirective, ConnectionTemplateMockDirective, CustomDynamicNodeComponent, CustomNodeComponent, DragHandleDirective, DragHandleMockDirective, EdgeLabelHtmlTemplateDirective, EdgeLabelHtmlTemplateMockDirective, EdgeTemplateDirective, EdgeTemplateMockDirective, GroupNodeTemplateDirective, GroupNodeTemplateMockDirective, HandleComponent, HandleMockComponent, HandleTemplateDirective, HandleTemplateMockDirective, MiniMapComponent, MiniMapMockComponent, NodeHtmlTemplateDirective, NodeHtmlTemplateMockDirective, NodeToolbarComponent, NodeToolbarMockComponent, NodeToolbarWrapperDirective, ResizableComponent, ResizableMockComponent, SelectableDirective, SelectableMockDirective, Vflow, VflowComponent, VflowMockComponent, VflowMocks, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, provideCustomNodeMocks };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionControllerMockDirective, ConnectionTemplateDirective, ConnectionTemplateMockDirective, CustomDynamicNodeComponent, CustomNodeComponent, CustomTemplateEdgeComponent, DragHandleDirective, DragHandleMockDirective, EdgeLabelHtmlTemplateDirective, EdgeLabelHtmlTemplateMockDirective, EdgeTemplateDirective, EdgeTemplateMockDirective, GroupNodeTemplateDirective, GroupNodeTemplateMockDirective, HandleComponent, HandleMockComponent, HandleTemplateDirective, HandleTemplateMockDirective, MiniMapComponent, MiniMapMockComponent, NodeHtmlTemplateDirective, NodeHtmlTemplateMockDirective, NodeToolbarComponent, NodeToolbarMockComponent, NodeToolbarWrapperDirective, ResizableComponent, ResizableMockComponent, SelectableDirective, SelectableMockDirective, Vflow, VflowComponent, VflowMockComponent, VflowMocks, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode, provideCustomNodeMocks };
 //# sourceMappingURL=ngx-vflow.mjs.map