ngx-vflow 1.8.2 → 1.10.0

package/esm2022/testing/vflow-mocks.mjs

@@ -0,0 +1,28 @@
+import { CustomTemplateEdgeMockComponent } from './component-mocks/custom-template-edge-mock.component';
+import { HandleMockComponent } from './component-mocks/handle-mock.component';
+import { MiniMapMockComponent } from './component-mocks/minimap-mock.component';
+import { NodeToolbarMockComponent } from './component-mocks/node-toolbar-mock.component';
+import { ResizableMockComponent } from './component-mocks/resizable-mock.component';
+import { VflowMockComponent } from './component-mocks/vflow-mock.component';
+import { ConnectionControllerMockDirective } from './directive-mocks/connection-controller-mock.directive';
+import { DragHandleMockDirective } from './directive-mocks/drag-handle-mock.directive';
+import { SelectableMockDirective } from './directive-mocks/selectable-mock.directive';
+import { ConnectionTemplateMockDirective, EdgeLabelHtmlTemplateMockDirective, EdgeTemplateMockDirective, GroupNodeTemplateMockDirective, HandleTemplateMockDirective, NodeHtmlTemplateMockDirective, } from './directive-mocks/template-mock.directive';
+export const VflowMocks = [
+    VflowMockComponent,
+    HandleMockComponent,
+    ResizableMockComponent,
+    SelectableMockDirective,
+    MiniMapMockComponent,
+    NodeToolbarMockComponent,
+    DragHandleMockDirective,
+    ConnectionControllerMockDirective,
+    CustomTemplateEdgeMockComponent,
+    NodeHtmlTemplateMockDirective,
+    GroupNodeTemplateMockDirective,
+    EdgeLabelHtmlTemplateMockDirective,
+    EdgeTemplateMockDirective,
+    ConnectionTemplateMockDirective,
+    HandleTemplateMockDirective,
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmZsb3ctbW9ja3MuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdmZsb3ctbGliL3Rlc3Rpbmcvc3JjL3ZmbG93LW1vY2tzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSwrQkFBK0IsRUFBRSxNQUFNLHVEQUF1RCxDQUFDO0FBQ3hHLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBQzlFLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBQ2hGLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQ3pGLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHdDQUF3QyxDQUFDO0FBQzVFLE9BQU8sRUFBRSxpQ0FBaUMsRUFBRSxNQUFNLHdEQUF3RCxDQUFDO0FBQzNHLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZDQUE2QyxDQUFDO0FBQ3RGLE9BQU8sRUFDTCwrQkFBK0IsRUFDL0Isa0NBQWtDLEVBQ2xDLHlCQUF5QixFQUN6Qiw4QkFBOEIsRUFDOUIsMkJBQTJCLEVBQzNCLDZCQUE2QixHQUM5QixNQUFNLDJDQUEyQyxDQUFDO0FBRW5ELE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixrQkFBa0I7SUFDbEIsbUJBQW1CO0lBQ25CLHNCQUFzQjtJQUN0Qix1QkFBdUI7SUFDdkIsb0JBQW9CO0lBQ3BCLHdCQUF3QjtJQUN4Qix1QkFBdUI7SUFDdkIsaUNBQWlDO0lBQ2pDLCtCQUErQjtJQUUvQiw2QkFBNkI7SUFDN0IsOEJBQThCO0lBQzlCLGtDQUFrQztJQUNsQyx5QkFBeUI7SUFDekIsK0JBQStCO0lBQy9CLDJCQUEyQjtDQUNuQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ3VzdG9tVGVtcGxhdGVFZGdlTW9ja0NvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50LW1vY2tzL2N1c3RvbS10ZW1wbGF0ZS1lZGdlLW1vY2suY29tcG9uZW50JztcbmltcG9ydCB7IEhhbmRsZU1vY2tDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudC1tb2Nrcy9oYW5kbGUtbW9jay5jb21wb25lbnQnO1xuaW1wb3J0IHsgTWluaU1hcE1vY2tDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudC1tb2Nrcy9taW5pbWFwLW1vY2suY29tcG9uZW50JztcbmltcG9ydCB7IE5vZGVUb29sYmFyTW9ja0NvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50LW1vY2tzL25vZGUtdG9vbGJhci1tb2NrLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBSZXNpemFibGVNb2NrQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnQtbW9ja3MvcmVzaXphYmxlLW1vY2suY29tcG9uZW50JztcbmltcG9ydCB7IFZmbG93TW9ja0NvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50LW1vY2tzL3ZmbG93LW1vY2suY29tcG9uZW50JztcbmltcG9ydCB7IENvbm5lY3Rpb25Db250cm9sbGVyTW9ja0RpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlLW1vY2tzL2Nvbm5lY3Rpb24tY29udHJvbGxlci1tb2NrLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBEcmFnSGFuZGxlTW9ja0RpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlLW1vY2tzL2RyYWctaGFuZGxlLW1vY2suZGlyZWN0aXZlJztcbmltcG9ydCB7IFNlbGVjdGFibGVNb2NrRGlyZWN0aXZlIH0gZnJvbSAnLi9kaXJlY3RpdmUtbW9ja3Mvc2VsZWN0YWJsZS1tb2NrLmRpcmVjdGl2ZSc7XG5pbXBvcnQge1xuICBDb25uZWN0aW9uVGVtcGxhdGVNb2NrRGlyZWN0aXZlLFxuICBFZGdlTGFiZWxIdG1sVGVtcGxhdGVNb2NrRGlyZWN0aXZlLFxuICBFZGdlVGVtcGxhdGVNb2NrRGlyZWN0aXZlLFxuICBHcm91cE5vZGVUZW1wbGF0ZU1vY2tEaXJlY3RpdmUsXG4gIEhhbmRsZVRlbXBsYXRlTW9ja0RpcmVjdGl2ZSxcbiAgTm9kZUh0bWxUZW1wbGF0ZU1vY2tEaXJlY3RpdmUsXG59IGZyb20gJy4vZGlyZWN0aXZlLW1vY2tzL3RlbXBsYXRlLW1vY2suZGlyZWN0aXZlJztcblxuZXhwb3J0IGNvbnN0IFZmbG93TW9ja3MgPSBbXG4gIFZmbG93TW9ja0NvbXBvbmVudCxcbiAgSGFuZGxlTW9ja0NvbXBvbmVudCxcbiAgUmVzaXphYmxlTW9ja0NvbXBvbmVudCxcbiAgU2VsZWN0YWJsZU1vY2tEaXJlY3RpdmUsXG4gIE1pbmlNYXBNb2NrQ29tcG9uZW50LFxuICBOb2RlVG9vbGJhck1vY2tDb21wb25lbnQsXG4gIERyYWdIYW5kbGVNb2NrRGlyZWN0aXZlLFxuICBDb25uZWN0aW9uQ29udHJvbGxlck1vY2tEaXJlY3RpdmUsXG4gIEN1c3RvbVRlbXBsYXRlRWRnZU1vY2tDb21wb25lbnQsXG5cbiAgTm9kZUh0bWxUZW1wbGF0ZU1vY2tEaXJlY3RpdmUsXG4gIEdyb3VwTm9kZVRlbXBsYXRlTW9ja0RpcmVjdGl2ZSxcbiAgRWRnZUxhYmVsSHRtbFRlbXBsYXRlTW9ja0RpcmVjdGl2ZSxcbiAgRWRnZVRlbXBsYXRlTW9ja0RpcmVjdGl2ZSxcbiAgQ29ubmVjdGlvblRlbXBsYXRlTW9ja0RpcmVjdGl2ZSxcbiAgSGFuZGxlVGVtcGxhdGVNb2NrRGlyZWN0aXZlLFxuXSBhcyBjb25zdDtcbiJdfQ==

package/fesm2022/ngx-vflow-testing.mjs

@@ -0,0 +1,626 @@
+import * as i0 from '@angular/core';
+import { signal, inject, TemplateRef, Directive, input, output, contentChild, Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { ɵNodeModel as _NodeModel, ɵComponentEventBusService as _ComponentEventBusService, ɵNodeAccessorService as _NodeAccessorService, ɵFlowEntitiesService as _FlowEntitiesService, ɵHandleService as _HandleService, ɵRootPointerDirective as _RootPointerDirective, ɵSpacePointContextDirective as _SpacePointContextDirective, ɵSelectionService as _SelectionService, ɵFlowSettingsService as _FlowSettingsService, ɵViewportService as _ViewportService, ɵConnectionModel as _ConnectionModel } from 'ngx-vflow';
+import { of } from 'rxjs';
+import { NgTemplateOutlet } from '@angular/common';
+import { toObservable } from '@angular/core/rxjs-interop';
+
+const mockModel = () => new _NodeModel({ id: 'mock', type: 'default', point: { x: 0, y: 0 } });
+function provideCustomNodeMocks() {
+    return [
+        {
+            provide: _ComponentEventBusService,
+            useValue: {
+                pushEvent: () => { },
+            },
+        },
+        {
+            provide: _NodeAccessorService,
+            useFactory: () => ({
+                model: signal(mockModel()),
+            }),
+        },
+        _FlowEntitiesService,
+        // TODO: mocks below should be removed after the major release
+        {
+            provide: _HandleService,
+            useFactory: () => ({
+                node: signal(mockModel()),
+                createHandle: () => { },
+                destroyHandle: () => { },
+            }),
+        },
+        {
+            provide: _RootPointerDirective,
+            useValue: {
+                pointerMovement$: of({
+                    x: 0,
+                    y: 0,
+                    movementX: 0,
+                    movementY: 0,
+                    target: null,
+                    originalEvent: null,
+                }),
+                documentPointerEnd$: of(null),
+            },
+        },
+        {
+            provide: _SpacePointContextDirective,
+            useValue: {
+                documentPointToFlowPoint: (point) => point,
+            },
+        },
+        {
+            provide: _SelectionService,
+            useValue: {
+                select: () => { },
+            },
+        },
+        _FlowSettingsService,
+        _ViewportService,
+    ];
+}
+
+class EdgeTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EdgeTemplateMockDirective, isStandalone: true, selector: "ng-template[edge]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[edge]',
+                }]
+        }] });
+class ConnectionTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionTemplateMockDirective, isStandalone: true, selector: "ng-template[connection]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[connection]',
+                }]
+        }] });
+class EdgeLabelHtmlTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelHtmlTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EdgeLabelHtmlTemplateMockDirective, isStandalone: true, selector: "ng-template[edgeLabelHtml]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelHtmlTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[edgeLabelHtml]',
+                }]
+        }] });
+class NodeHtmlTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHtmlTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeHtmlTemplateMockDirective, isStandalone: true, selector: "ng-template[nodeHtml]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeHtmlTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[nodeHtml]',
+                }]
+        }] });
+class NodeSvgTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeSvgTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeSvgTemplateMockDirective, isStandalone: true, selector: "ng-template[nodeSvg]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeSvgTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[nodeSvg]',
+                }]
+        }] });
+class GroupNodeTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupNodeTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: GroupNodeTemplateMockDirective, isStandalone: true, selector: "ng-template[groupNode]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupNodeTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[groupNode]',
+                }]
+        }] });
+class HandleTemplateMockDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleTemplateMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: HandleTemplateMockDirective, isStandalone: true, selector: "ng-template[handle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleTemplateMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[handle]',
+                }]
+        }] });
+
+class VflowMockComponent {
+    constructor() {
+        this.view = [400, 400];
+        this.minZoom = 0.5;
+        this.maxZoom = 3;
+        this.background = '#fff';
+        this.optimization = input({
+            detachedGroupsLayer: false,
+        });
+        this.entitiesSelectable = true;
+        this.keyboardShortcuts = {
+            multiSelection: null,
+        };
+        this.connection = new _ConnectionModel({});
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onComponentNodeEvent = output();
+        this.nodeTemplateDirective = contentChild(NodeHtmlTemplateMockDirective);
+        this.groupNodeTemplateDirective = contentChild(GroupNodeTemplateMockDirective);
+        this.edgeTemplateDirective = contentChild(EdgeTemplateMockDirective);
+        this.edgeLabelHtmlDirective = contentChild(EdgeLabelHtmlTemplateMockDirective);
+        this.connectionTemplateDirective = contentChild(ConnectionTemplateMockDirective);
+        this.viewport = signal({
+            x: 0,
+            y: 0,
+            zoom: 1,
+        });
+        this.nodesChange = signal([]);
+        this.edgesChange = signal([]);
+        this.viewportChange$ = toObservable(this.viewport);
+        this.nodesChange$ = toObservable(this.nodesChange);
+        this.edgesChange$ = toObservable(this.edgesChange);
+    }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnInit() { }
+    viewportTo(viewport) {
+        this.viewport.set(viewport);
+    }
+    zoomTo(zoom) {
+        this.viewport.update((prev) => ({ ...prev, zoom }));
+    }
+    panTo(point) {
+        this.viewport.update((prev) => ({ ...prev, x: point.x, y: point.y }));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    fitView(options) { }
+    documentPointToFlowPoint(point, options) {
+        if (options?.spaces) {
+            return [
+                {
+                    nodeId: null,
+                    x: point.x,
+                    y: point.y,
+                },
+            ];
+        }
+        return point;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getIntesectingNodes(nodeId, options) {
+        return [];
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    toNodeSpace(nodeId, spaceNodeId) {
+        return { x: 0, y: 0 };
+    }
+    getNode(id) {
+        return this.nodes.find((node) => node.id === id);
+    }
+    getDetachedEdges() {
+        return [];
+    }
+    createSignal(value) {
+        return signal(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowMockComponent, isStandalone: true, selector: "vflow", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new _ConnectionModel(settings) }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: false, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: false, isRequired: false, transformFunction: null }, elevateEdgesOnSelect: { classPropertyName: "elevateEdgesOnSelect", publicName: "elevateEdgesOnSelect", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateMockDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-content />
+
+    @for (node of nodes; track $index) {
+      @if (node.type === 'html-template') {
+        <ng-component
+          [ngTemplateOutlet]="nodeTemplateDirective()?.templateRef ?? null"
+          [ngTemplateOutletContext]="{
+            $implicit: {
+              node: node,
+              selected: createSignal(false),
+            },
+          }" />
+      }
+
+      @if (node.type === 'template-group') {
+        <ng-component
+          [ngTemplateOutlet]="groupNodeTemplateDirective()?.templateRef ?? null"
+          [ngTemplateOutletContext]="{
+            $implicit: {
+              node: node,
+              selected: createSignal(false),
+              width: createSignal(node.width),
+              height: createSignal(node.height),
+            },
+          }" />
+      }
+    }
+
+    @for (edge of edges; track $index) {
+      @if (edge.type === 'template') {
+        <ng-component
+          [ngTemplateOutlet]="edgeTemplateDirective()?.templateRef ?? null"
+          [ngTemplateOutletContext]="{
+            $implicit: {
+              edge: edge,
+              selected: createSignal(false),
+              path: createSignal(''),
+              markerStart: createSignal(''),
+              markerEnd: createSignal(''),
+            },
+          }" />
+
+        @if (edge.edgeLabels?.start) {
+          <ng-component
+            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{
+              $implicit: {
+                edge: edge,
+              },
+            }" />
+        }
+
+        @if (edge.edgeLabels?.center) {
+          <ng-component
+            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{
+              $implicit: {
+                edge: edge,
+                label: edge.edgeLabels?.center,
+              },
+            }" />
+        }
+
+        @if (edge.edgeLabels?.end) {
+          <ng-component
+            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{
+              $implicit: {
+                edge: edge,
+                label: edge.edgeLabels?.end,
+              },
+            }" />
+        }
+      }
+    }
+
+    @if (connection.type === 'template') {
+      <ng-component
+        [ngTemplateOutlet]="connectionTemplateDirective()?.templateRef ?? null"
+        [ngTemplateOutletContext]="{
+          $implicit: {
+            path: createSignal(''),
+            marker: createSignal(''),
+          },
+        }" />
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowMockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vflow',
+                    template: `
+    <ng-content />
+
+    @for (node of nodes; track $index) {
+      @if (node.type === 'html-template') {
+        <ng-component
+          [ngTemplateOutlet]="nodeTemplateDirective()?.templateRef ?? null"
+          [ngTemplateOutletContext]="{
+            $implicit: {
+              node: node,
+              selected: createSignal(false),
+            },
+          }" />
+      }
+
+      @if (node.type === 'template-group') {
+        <ng-component
+          [ngTemplateOutlet]="groupNodeTemplateDirective()?.templateRef ?? null"
+          [ngTemplateOutletContext]="{
+            $implicit: {
+              node: node,
+              selected: createSignal(false),
+              width: createSignal(node.width),
+              height: createSignal(node.height),
+            },
+          }" />
+      }
+    }
+
+    @for (edge of edges; track $index) {
+      @if (edge.type === 'template') {
+        <ng-component
+          [ngTemplateOutlet]="edgeTemplateDirective()?.templateRef ?? null"
+          [ngTemplateOutletContext]="{
+            $implicit: {
+              edge: edge,
+              selected: createSignal(false),
+              path: createSignal(''),
+              markerStart: createSignal(''),
+              markerEnd: createSignal(''),
+            },
+          }" />
+
+        @if (edge.edgeLabels?.start) {
+          <ng-component
+            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{
+              $implicit: {
+                edge: edge,
+              },
+            }" />
+        }
+
+        @if (edge.edgeLabels?.center) {
+          <ng-component
+            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{
+              $implicit: {
+                edge: edge,
+                label: edge.edgeLabels?.center,
+              },
+            }" />
+        }
+
+        @if (edge.edgeLabels?.end) {
+          <ng-component
+            [ngTemplateOutlet]="edgeLabelHtmlDirective()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{
+              $implicit: {
+                edge: edge,
+                label: edge.edgeLabels?.end,
+              },
+            }" />
+        }
+      }
+    }
+
+    @if (connection.type === 'template') {
+      <ng-component
+        [ngTemplateOutlet]="connectionTemplateDirective()?.templateRef ?? null"
+        [ngTemplateOutletContext]="{
+          $implicit: {
+            path: createSignal(''),
+            marker: createSignal(''),
+          },
+        }" />
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [NgTemplateOutlet],
+                }]
+        }], propDecorators: { nodes: [{
+                type: Input,
+                args: [{ required: true }]
+            }], edges: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], minZoom: [{
+                type: Input
+            }], maxZoom: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }], entitiesSelectable: [{
+                type: Input
+            }], keyboardShortcuts: [{
+                type: Input
+            }], connection: [{
+                type: Input,
+                args: [{
+                        transform: (settings) => new _ConnectionModel(settings),
+                    }]
+            }], snapGrid: [{
+                type: Input
+            }], elevateNodesOnSelect: [{
+                type: Input
+            }], elevateEdgesOnSelect: [{
+                type: Input
+            }] } });
+
+class HandleMockComponent {
+    constructor() {
+        this.position = input.required();
+        this.type = input.required();
+        this.id = input();
+        this.template = input();
+    }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: HandleMockComponent, isStandalone: true, selector: "handle", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleMockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'handle',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                }]
+        }] });
+
+class ResizableMockComponent {
+    constructor() {
+        this.resizable = input();
+        this.resizerColor = input('#2e414c');
+        this.gap = input(1.5);
+    }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnInit() { }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngAfterViewInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ResizableMockComponent, isStandalone: true, selector: "[resizable]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizerColor: { classPropertyName: "resizerColor", publicName: "resizerColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableMockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[resizable]',
+                    template: '<ng-content />',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class MiniMapMockComponent {
+    constructor() {
+        this.maskColor = input(`rgba(215, 215, 215, 0.6)`);
+        this.strokeColor = input(`rgb(200, 200, 200)`);
+        this.position = input('bottom-right');
+        this.scaleOnHover = input(false);
+    }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniMapMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: MiniMapMockComponent, isStandalone: true, selector: "mini-map", inputs: { maskColor: { classPropertyName: "maskColor", publicName: "maskColor", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scaleOnHover: { classPropertyName: "scaleOnHover", publicName: "scaleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniMapMockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mini-map',
+                    template: '',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class NodeToolbarMockComponent {
+    constructor() {
+        this.position = input('top');
+    }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnInit() { }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnDestroy() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: NodeToolbarMockComponent, isStandalone: true, selector: "node-toolbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarMockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'node-toolbar',
+                    template: '<ng-content />',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class ConnectionControllerMockDirective {
+    constructor() {
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onConnect = output();
+        // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+        this.onReconnect = output();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    startConnection(handle) { }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    startReconnection(handle) { }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    validateConnection(handle) { }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    resetValidateConnection(targetHandle) { }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    endConnection() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionControllerMockDirective, isStandalone: true, selector: "[onConnect]", outputs: { onConnect: "onConnect", onReconnect: "onReconnect" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerMockDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[onConnect]', standalone: true }]
+        }] });
+
+class DragHandleMockDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragHandleMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: DragHandleMockDirective, isStandalone: true, selector: "[dragHandle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragHandleMockDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[dragHandle]', standalone: true }]
+        }] });
+
+class SelectableMockDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SelectableMockDirective, isStandalone: true, selector: "[selectable]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableMockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[selectable]',
+                    standalone: true,
+                }]
+        }] });
+
+class CustomTemplateEdgeMockComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomTemplateEdgeMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomTemplateEdgeMockComponent, isStandalone: true, selector: "g[customTemplateEdge]", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomTemplateEdgeMockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'g[customTemplateEdge]',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                }]
+        }] });
+
+const VflowMocks = [
+    VflowMockComponent,
+    HandleMockComponent,
+    ResizableMockComponent,
+    SelectableMockDirective,
+    MiniMapMockComponent,
+    NodeToolbarMockComponent,
+    DragHandleMockDirective,
+    ConnectionControllerMockDirective,
+    CustomTemplateEdgeMockComponent,
+    NodeHtmlTemplateMockDirective,
+    GroupNodeTemplateMockDirective,
+    EdgeLabelHtmlTemplateMockDirective,
+    EdgeTemplateMockDirective,
+    ConnectionTemplateMockDirective,
+    HandleTemplateMockDirective,
+];
+
+// Testing
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConnectionControllerMockDirective, ConnectionTemplateMockDirective, DragHandleMockDirective, EdgeLabelHtmlTemplateMockDirective, EdgeTemplateMockDirective, GroupNodeTemplateMockDirective, HandleMockComponent, HandleTemplateMockDirective, MiniMapMockComponent, NodeHtmlTemplateMockDirective, NodeSvgTemplateMockDirective, NodeToolbarMockComponent, ResizableMockComponent, SelectableMockDirective, VflowMockComponent, VflowMocks, provideCustomNodeMocks };
+//# sourceMappingURL=ngx-vflow-testing.mjs.map