@angflow/angular 0.0.1

package/dist/esm/lib/container/ng-flow/ng-flow.component.js

@@ -0,0 +1,644 @@
+import { Component, ChangeDetectionStrategy, input, output, model, effect, viewChild, contentChildren, inject, NgZone, signal, computed, } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ConnectionMode, ConnectionLineType, PanOnScrollMode, SelectionMode, infiniteExtent, XYPanZoom, getViewportForBounds, } from '@angflow/system';
+import { FlowStore } from '../../services/flow-store.service';
+import { NgFlowService } from '../../services/ng-flow.service';
+import { NodeRendererComponent } from '../node-renderer/node-renderer.component';
+import { EdgeRendererComponent } from '../edge-renderer/edge-renderer.component';
+import { ViewportComponent } from '../viewport/viewport.component';
+import { PaneComponent } from '../pane/pane.component';
+import { ConnectionLineComponent } from '../../components/connection-line/connection-line.component';
+import { SelectionBoxComponent } from '../../components/selection-box/selection-box.component';
+import { A11yDescriptionsComponent } from '../../components/a11y-descriptions/a11y-descriptions.component';
+import { AttributionComponent } from '../../components/attribution/attribution.component';
+import { KeyHandlerDirective } from '../../directives/key-handler.directive';
+import { NgFlowNodeTypeDirective } from '../../directives/node-type.directive';
+import * as i0 from "@angular/core";
+const _c0 = ["container"];
+const _c1 = ["*"];
+function NgFlowComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ng-flow-attribution");
+} }
+export class NgFlowComponent {
+    constructor() {
+        this.store = inject(FlowStore);
+        this.ngFlowService = inject(NgFlowService);
+        this.zone = inject(NgZone);
+        this.containerRef = viewChild('container', ...(ngDevMode ? [{ debugName: "containerRef" }] : /* istanbul ignore next */ []));
+        this.paneRef = viewChild(PaneComponent, ...(ngDevMode ? [{ debugName: "paneRef" }] : /* istanbul ignore next */ []));
+        /** Content-projected node type templates */
+        this.nodeTypeDirectives = contentChildren(NgFlowNodeTypeDirective, ...(ngDevMode ? [{ debugName: "nodeTypeDirectives" }] : /* istanbul ignore next */ []));
+        /** Map of type name → TemplateRef built from content-projected templates */
+        this.nodeTemplateMap = computed(() => {
+            const map = new Map();
+            for (const dir of this.nodeTypeDirectives()) {
+                map.set(dir.type, dir.template);
+            }
+            return map;
+        }, ...(ngDevMode ? [{ debugName: "nodeTemplateMap" }] : /* istanbul ignore next */ []));
+        this.resizeObserver = null;
+        this.panZoomInstance = null;
+        this.colorSchemeQuery = null;
+        this.colorSchemeHandler = null;
+        /** Resolves 'system' color mode to 'light' or 'dark' based on prefers-color-scheme. */
+        this.systemPrefersDark = signal(typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)').matches : false, ...(ngDevMode ? [{ debugName: "systemPrefersDark" }] : /* istanbul ignore next */ []));
+        this.resolvedColorMode = computed(() => {
+            const mode = this.colorMode();
+            if (mode === 'system') {
+                return this.systemPrefersDark() ? 'dark' : 'light';
+            }
+            return mode;
+        }, ...(ngDevMode ? [{ debugName: "resolvedColorMode" }] : /* istanbul ignore next */ []));
+        // ── Data (model = two-way binding) ────────────────────────────────────
+        this.nodesModel = model([], { ...(ngDevMode ? { debugName: "nodesModel" } : /* istanbul ignore next */ {}), alias: 'nodes' });
+        this.edgesModel = model([], { ...(ngDevMode ? { debugName: "edgesModel" } : /* istanbul ignore next */ {}), alias: 'edges' });
+        this.viewportModel = model(undefined, { ...(ngDevMode ? { debugName: "viewportModel" } : /* istanbul ignore next */ {}), alias: 'viewport' });
+        // ── Data (input-only for uncontrolled mode) ───────────────────────────
+        this.defaultNodes = input(...(ngDevMode ? [undefined, { debugName: "defaultNodes" }] : /* istanbul ignore next */ []));
+        this.defaultEdges = input(...(ngDevMode ? [undefined, { debugName: "defaultEdges" }] : /* istanbul ignore next */ []));
+        this.defaultViewport = input({ x: 0, y: 0, zoom: 1 }, ...(ngDevMode ? [{ debugName: "defaultViewport" }] : /* istanbul ignore next */ []));
+        // ── Configuration inputs ──────────────────────────────────────────────
+        this.nodeTypes = input({}, ...(ngDevMode ? [{ debugName: "nodeTypes" }] : /* istanbul ignore next */ []));
+        this.edgeTypes = input({}, ...(ngDevMode ? [{ debugName: "edgeTypes" }] : /* istanbul ignore next */ []));
+        this.defaultEdgeOptions = input(...(ngDevMode ? [undefined, { debugName: "defaultEdgeOptions" }] : /* istanbul ignore next */ []));
+        this.connectionMode = input(ConnectionMode.Strict, ...(ngDevMode ? [{ debugName: "connectionMode" }] : /* istanbul ignore next */ []));
+        this.connectionLineType = input(ConnectionLineType.Bezier, ...(ngDevMode ? [{ debugName: "connectionLineType" }] : /* istanbul ignore next */ []));
+        this.connectionLineComponent = input(null, ...(ngDevMode ? [{ debugName: "connectionLineComponent" }] : /* istanbul ignore next */ []));
+        this.connectionLineStyle = input(...(ngDevMode ? [undefined, { debugName: "connectionLineStyle" }] : /* istanbul ignore next */ []));
+        this.connectionLineContainerStyle = input(...(ngDevMode ? [undefined, { debugName: "connectionLineContainerStyle" }] : /* istanbul ignore next */ []));
+        this.widthInput = input(undefined, { ...(ngDevMode ? { debugName: "widthInput" } : /* istanbul ignore next */ {}), alias: 'width' });
+        this.heightInput = input(undefined, { ...(ngDevMode ? { debugName: "heightInput" } : /* istanbul ignore next */ {}), alias: 'height' });
+        // ── Interaction flags ─────────────────────────────────────────────────
+        this.nodesDraggable = input(true, ...(ngDevMode ? [{ debugName: "nodesDraggable" }] : /* istanbul ignore next */ []));
+        this.nodesConnectable = input(true, ...(ngDevMode ? [{ debugName: "nodesConnectable" }] : /* istanbul ignore next */ []));
+        this.nodesFocusable = input(true, ...(ngDevMode ? [{ debugName: "nodesFocusable" }] : /* istanbul ignore next */ []));
+        this.edgesFocusable = input(true, ...(ngDevMode ? [{ debugName: "edgesFocusable" }] : /* istanbul ignore next */ []));
+        this.edgesReconnectable = input(true, ...(ngDevMode ? [{ debugName: "edgesReconnectable" }] : /* istanbul ignore next */ []));
+        this.elementsSelectable = input(true, ...(ngDevMode ? [{ debugName: "elementsSelectable" }] : /* istanbul ignore next */ []));
+        this.selectNodesOnDrag = input(true, ...(ngDevMode ? [{ debugName: "selectNodesOnDrag" }] : /* istanbul ignore next */ []));
+        this.connectOnClick = input(true, ...(ngDevMode ? [{ debugName: "connectOnClick" }] : /* istanbul ignore next */ []));
+        // ── Pan/Zoom flags ────────────────────────────────────────────────────
+        this.panOnDrag = input(true, ...(ngDevMode ? [{ debugName: "panOnDrag" }] : /* istanbul ignore next */ []));
+        this.panOnScroll = input(false, ...(ngDevMode ? [{ debugName: "panOnScroll" }] : /* istanbul ignore next */ []));
+        this.panOnScrollMode = input(PanOnScrollMode.Free, ...(ngDevMode ? [{ debugName: "panOnScrollMode" }] : /* istanbul ignore next */ []));
+        this.panOnScrollSpeed = input(0.5, ...(ngDevMode ? [{ debugName: "panOnScrollSpeed" }] : /* istanbul ignore next */ []));
+        this.zoomOnScroll = input(true, ...(ngDevMode ? [{ debugName: "zoomOnScroll" }] : /* istanbul ignore next */ []));
+        this.zoomOnPinch = input(true, ...(ngDevMode ? [{ debugName: "zoomOnPinch" }] : /* istanbul ignore next */ []));
+        this.zoomOnDoubleClick = input(true, ...(ngDevMode ? [{ debugName: "zoomOnDoubleClick" }] : /* istanbul ignore next */ []));
+        this.preventScrolling = input(true, ...(ngDevMode ? [{ debugName: "preventScrolling" }] : /* istanbul ignore next */ []));
+        // ── Selection ─────────────────────────────────────────────────────────
+        this.selectionOnDrag = input(false, ...(ngDevMode ? [{ debugName: "selectionOnDrag" }] : /* istanbul ignore next */ []));
+        this.selectionMode = input(SelectionMode.Partial, ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+        // ── Viewport constraints ──────────────────────────────────────────────
+        this.minZoom = input(0.5, ...(ngDevMode ? [{ debugName: "minZoom" }] : /* istanbul ignore next */ []));
+        this.maxZoom = input(2, ...(ngDevMode ? [{ debugName: "maxZoom" }] : /* istanbul ignore next */ []));
+        this.translateExtent = input(infiniteExtent, ...(ngDevMode ? [{ debugName: "translateExtent" }] : /* istanbul ignore next */ []));
+        this.nodeExtent = input(infiniteExtent, ...(ngDevMode ? [{ debugName: "nodeExtent" }] : /* istanbul ignore next */ []));
+        // ── Grid/Snap ─────────────────────────────────────────────────────────
+        this.snapToGrid = input(false, ...(ngDevMode ? [{ debugName: "snapToGrid" }] : /* istanbul ignore next */ []));
+        this.snapGrid = input([15, 15], ...(ngDevMode ? [{ debugName: "snapGrid" }] : /* istanbul ignore next */ []));
+        // ── Fit view ──────────────────────────────────────────────────────────
+        this.fitView = input(false, ...(ngDevMode ? [{ debugName: "fitView" }] : /* istanbul ignore next */ []));
+        this.fitViewOptions = input(...(ngDevMode ? [undefined, { debugName: "fitViewOptions" }] : /* istanbul ignore next */ []));
+        // ── Keyboard keys ─────────────────────────────────────────────────────
+        this.deleteKeyCode = input(['Backspace', 'Delete'], ...(ngDevMode ? [{ debugName: "deleteKeyCode" }] : /* istanbul ignore next */ []));
+        this.selectionKeyCode = input('Shift', ...(ngDevMode ? [{ debugName: "selectionKeyCode" }] : /* istanbul ignore next */ []));
+        this.panActivationKeyCode = input(' ', ...(ngDevMode ? [{ debugName: "panActivationKeyCode" }] : /* istanbul ignore next */ []));
+        this.multiSelectionKeyCode = input(['Meta', 'Control'], ...(ngDevMode ? [{ debugName: "multiSelectionKeyCode" }] : /* istanbul ignore next */ []));
+        this.zoomActivationKeyCode = input('Meta', ...(ngDevMode ? [{ debugName: "zoomActivationKeyCode" }] : /* istanbul ignore next */ []));
+        // ── Auto-pan ──────────────────────────────────────────────────────────
+        this.autoPanOnNodeDrag = input(true, ...(ngDevMode ? [{ debugName: "autoPanOnNodeDrag" }] : /* istanbul ignore next */ []));
+        this.autoPanOnConnect = input(true, ...(ngDevMode ? [{ debugName: "autoPanOnConnect" }] : /* istanbul ignore next */ []));
+        this.autoPanSpeed = input(15, ...(ngDevMode ? [{ debugName: "autoPanSpeed" }] : /* istanbul ignore next */ []));
+        // ── Distances ─────────────────────────────────────────────────────────
+        this.connectionRadius = input(20, ...(ngDevMode ? [{ debugName: "connectionRadius" }] : /* istanbul ignore next */ []));
+        this.reconnectRadius = input(10, ...(ngDevMode ? [{ debugName: "reconnectRadius" }] : /* istanbul ignore next */ []));
+        this.nodeDragThreshold = input(1, ...(ngDevMode ? [{ debugName: "nodeDragThreshold" }] : /* istanbul ignore next */ []));
+        this.connectionDragThreshold = input(1, ...(ngDevMode ? [{ debugName: "connectionDragThreshold" }] : /* istanbul ignore next */ []));
+        this.paneClickDistance = input(0, ...(ngDevMode ? [{ debugName: "paneClickDistance" }] : /* istanbul ignore next */ []));
+        this.nodeClickDistance = input(0, ...(ngDevMode ? [{ debugName: "nodeClickDistance" }] : /* istanbul ignore next */ []));
+        // ── Appearance ────────────────────────────────────────────────────────
+        this.colorMode = input('light', ...(ngDevMode ? [{ debugName: "colorMode" }] : /* istanbul ignore next */ []));
+        this.elevateNodesOnSelect = input(true, ...(ngDevMode ? [{ debugName: "elevateNodesOnSelect" }] : /* istanbul ignore next */ []));
+        this.elevateEdgesOnSelect = input(false, ...(ngDevMode ? [{ debugName: "elevateEdgesOnSelect" }] : /* istanbul ignore next */ []));
+        this.onlyRenderVisibleElements = input(false, ...(ngDevMode ? [{ debugName: "onlyRenderVisibleElements" }] : /* istanbul ignore next */ []));
+        this.zIndexMode = input('basic', ...(ngDevMode ? [{ debugName: "zIndexMode" }] : /* istanbul ignore next */ []));
+        this.nodeOrigin = input([0, 0], ...(ngDevMode ? [{ debugName: "nodeOrigin" }] : /* istanbul ignore next */ []));
+        this.defaultMarkerColor = input('#b1b1b7', ...(ngDevMode ? [{ debugName: "defaultMarkerColor" }] : /* istanbul ignore next */ []));
+        // ── CSS class names ───────────────────────────────────────────────────
+        this.noDragClassName = input('nodrag', ...(ngDevMode ? [{ debugName: "noDragClassName" }] : /* istanbul ignore next */ []));
+        this.noWheelClassName = input('nowheel', ...(ngDevMode ? [{ debugName: "noWheelClassName" }] : /* istanbul ignore next */ []));
+        this.noPanClassName = input('nopan', ...(ngDevMode ? [{ debugName: "noPanClassName" }] : /* istanbul ignore next */ []));
+        // ── Accessibility ─────────────────────────────────────────────────────
+        this.disableKeyboardA11y = input(false, ...(ngDevMode ? [{ debugName: "disableKeyboardA11y" }] : /* istanbul ignore next */ []));
+        this.ariaLabelConfig = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelConfig" }] : /* istanbul ignore next */ []));
+        // ── Validation ────────────────────────────────────────────────────────
+        this.isValidConnection = input(...(ngDevMode ? [undefined, { debugName: "isValidConnection" }] : /* istanbul ignore next */ []));
+        // ── Pro ────────────────────────────────────────────────────────────────
+        this.proOptions = input(...(ngDevMode ? [undefined, { debugName: "proOptions" }] : /* istanbul ignore next */ []));
+        this.attributionPosition = input('bottom-right', ...(ngDevMode ? [{ debugName: "attributionPosition" }] : /* istanbul ignore next */ []));
+        this.hideAttribution = input(false, ...(ngDevMode ? [{ debugName: "hideAttribution" }] : /* istanbul ignore next */ []));
+        // ── ID ────────────────────────────────────────────────────────────────
+        this.flowId = input(undefined, { ...(ngDevMode ? { debugName: "flowId" } : /* istanbul ignore next */ {}), alias: 'id' });
+        // ── Debug ─────────────────────────────────────────────────────────────
+        this.debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
+        // ── Event outputs ─────────────────────────────────────────────────────
+        // State change events
+        this.nodesChange = output({ alias: 'nodesChange' });
+        this.edgesChange = output({ alias: 'edgesChange' });
+        // Init
+        this.init = output({ alias: 'init' });
+        // Node events
+        this.nodeClick = output({ alias: 'nodeClick' });
+        this.nodeDoubleClick = output({ alias: 'nodeDoubleClick' });
+        this.nodeMouseEnter = output({ alias: 'nodeMouseEnter' });
+        this.nodeMouseMove = output({ alias: 'nodeMouseMove' });
+        this.nodeMouseLeave = output({ alias: 'nodeMouseLeave' });
+        this.nodeContextMenu = output({ alias: 'nodeContextMenu' });
+        this.nodeDragStart = output({ alias: 'nodeDragStart' });
+        this.nodeDrag = output({ alias: 'nodeDrag' });
+        this.nodeDragStop = output({ alias: 'nodeDragStop' });
+        // Edge events
+        this.edgeClick = output({ alias: 'edgeClick' });
+        this.edgeDoubleClick = output({ alias: 'edgeDoubleClick' });
+        this.edgeContextMenu = output({ alias: 'edgeContextMenu' });
+        this.edgeMouseEnter = output({ alias: 'edgeMouseEnter' });
+        this.edgeMouseMove = output({ alias: 'edgeMouseMove' });
+        this.edgeMouseLeave = output({ alias: 'edgeMouseLeave' });
+        // Connection events
+        this.connect = output({ alias: 'connect' });
+        this.connectStart = output({ alias: 'connectStart' });
+        this.connectEnd = output({ alias: 'connectEnd' });
+        // Click-connect events
+        this.clickConnectStart = output({ alias: 'clickConnectStart' });
+        this.clickConnectEnd = output({ alias: 'clickConnectEnd' });
+        // Reconnection events
+        this.reconnect = output({ alias: 'reconnect' });
+        this.reconnectStart = output({ alias: 'reconnectStart' });
+        this.reconnectEnd = output({ alias: 'reconnectEnd' });
+        // Pane events
+        this.paneClick = output({ alias: 'paneClick' });
+        this.paneContextMenu = output({ alias: 'paneContextMenu' });
+        this.paneMouseEnter = output({ alias: 'paneMouseEnter' });
+        this.paneMouseMove = output({ alias: 'paneMouseMove' });
+        this.paneMouseLeave = output({ alias: 'paneMouseLeave' });
+        this.paneScroll = output({ alias: 'paneScroll' });
+        // Viewport events
+        this.moveStart = output({ alias: 'moveStart' });
+        this.move = output({ alias: 'move' });
+        this.moveEnd = output({ alias: 'moveEnd' });
+        this.viewportChange = output({ alias: 'viewportChange' });
+        // Selection events
+        this.selectionChange = output({ alias: 'selectionChange' });
+        this.selectionDragStart = output({ alias: 'selectionDragStart' });
+        this.selectionDrag = output({ alias: 'selectionDrag' });
+        this.selectionDragStop = output({ alias: 'selectionDragStop' });
+        this.selectionStart = output({ alias: 'selectionStart' });
+        this.selectionEnd = output({ alias: 'selectionEnd' });
+        this.selectionContextMenu = output({ alias: 'selectionContextMenu' });
+        // Delete events
+        this.nodesDelete = output({ alias: 'nodesDelete' });
+        this.edgesDelete = output({ alias: 'edgesDelete' });
+        this.deleteEvent = output({ alias: 'delete' });
+        /**
+         * Callback invoked before elements are deleted.
+         * Return `false` (or a Promise resolving to `false`) to cancel the deletion.
+         */
+        this.onBeforeDelete = input(undefined, ...(ngDevMode ? [{ debugName: "onBeforeDelete" }] : /* istanbul ignore next */ []));
+        // Error
+        this.error = output({ alias: 'error' });
+        // Auto-pan events (declared for API completeness; not yet wired because
+        // auto-pan detection happens inside XYDrag's internal requestAnimationFrame
+        // loop, which does not currently expose start/end callbacks)
+        this.autoPanStart = output({ alias: 'autoPanStart' });
+        this.autoPanEnd = output({ alias: 'autoPanEnd' });
+        this.panePointerDownPos = null;
+        // Sync inputs → store via effects
+        effect(() => {
+            const nodes = this.nodesModel();
+            if (nodes !== undefined) {
+                this.store.setNodes(nodes);
+            }
+        });
+        effect(() => {
+            const edges = this.edgesModel();
+            if (edges !== undefined) {
+                this.store.setEdges(edges);
+            }
+        });
+        // Sync configuration inputs → store
+        effect(() => {
+            this.store.nodesDraggable.set(this.nodesDraggable());
+            this.store.nodesConnectable.set(this.nodesConnectable());
+            this.store.nodesFocusable.set(this.nodesFocusable());
+            this.store.edgesFocusable.set(this.edgesFocusable());
+            this.store.edgesReconnectable.set(this.edgesReconnectable());
+            this.store.elementsSelectable.set(this.elementsSelectable());
+            this.store.selectNodesOnDrag.set(this.selectNodesOnDrag());
+            this.store.connectOnClick.set(this.connectOnClick());
+            this.store.connectionMode.set(this.connectionMode());
+            this.store.snapToGrid.set(this.snapToGrid());
+            this.store.snapGrid.set(this.snapGrid());
+            this.store.nodeOrigin.set(this.nodeOrigin());
+            this.store.nodeExtent.set(this.nodeExtent());
+            this.store.elevateNodesOnSelect.set(this.elevateNodesOnSelect());
+            this.store.elevateEdgesOnSelect.set(this.elevateEdgesOnSelect());
+            this.store.connectionRadius.set(this.connectionRadius());
+            this.store.connectionDragThreshold.set(this.connectionDragThreshold());
+            this.store.nodeDragThreshold.set(this.nodeDragThreshold());
+            this.store.paneClickDistance.set(this.paneClickDistance());
+            this.store.nodeClickDistance.set(this.nodeClickDistance());
+            this.store.autoPanOnConnect.set(this.autoPanOnConnect());
+            this.store.autoPanOnNodeDrag.set(this.autoPanOnNodeDrag());
+            this.store.autoPanSpeed.set(this.autoPanSpeed());
+            this.store.noDragClassName.set(this.noDragClassName());
+            this.store.noWheelClassName.set(this.noWheelClassName());
+            this.store.noPanClassName.set(this.noPanClassName());
+            this.store.debug.set(this.debug());
+            this.store.zIndexMode.set(this.zIndexMode());
+            this.store.onlyRenderVisibleElements.set(this.onlyRenderVisibleElements());
+        });
+        effect(() => {
+            const id = this.flowId();
+            if (id !== undefined) {
+                this.store.rfId.set(id);
+            }
+        });
+        effect(() => {
+            const opts = this.defaultEdgeOptions();
+            if (opts !== undefined) {
+                this.store.defaultEdgeOptions.set(opts);
+            }
+        });
+        effect(() => {
+            const isValid = this.isValidConnection();
+            this.store.isValidConnection.set(isValid);
+        });
+        effect(() => {
+            this.store.onBeforeDelete = this.onBeforeDelete() ?? null;
+        });
+        effect(() => {
+            this.store.setMinZoom(this.minZoom());
+        });
+        effect(() => {
+            this.store.setMaxZoom(this.maxZoom());
+        });
+        effect(() => {
+            this.store.setTranslateExtent(this.translateExtent());
+        });
+        // Wire store change callbacks to outputs
+        this.store.onNodesChange = (changes) => {
+            this.nodesChange.emit(changes);
+        };
+        this.store.onEdgesChange = (changes) => {
+            this.edgesChange.emit(changes);
+        };
+        // Wire connection callbacks
+        this.store.onConnect = (connection) => {
+            this.connect.emit(connection);
+        };
+        this.store.onConnectStart = (event, params) => {
+            this.connectStart.emit({ event, params });
+        };
+        this.store.onConnectEnd = (event) => {
+            this.connectEnd.emit(event);
+        };
+        this.store.onClickConnectStart = (event, params) => {
+            this.clickConnectStart.emit({ event, params });
+        };
+        this.store.onClickConnectEnd = (event) => {
+            this.clickConnectEnd.emit(event);
+        };
+        // Wire node drag callbacks so XYDrag can fire them for multi-node dragging
+        this.store.onNodeDragStart = (event, node, nodes) => {
+            this.nodeDragStart.emit({ event, node, nodes });
+        };
+        this.store.onNodeDrag = (event, node, nodes) => {
+            this.nodeDrag.emit({ event, node, nodes });
+        };
+        this.store.onNodeDragStop = (event, node, nodes) => {
+            this.nodeDragStop.emit({ event, node, nodes });
+        };
+        this.store.onSelectionDragStart = (event, nodes) => {
+            this.selectionDragStart.emit({ event, nodes });
+        };
+        this.store.onSelectionDrag = (event, nodes) => {
+            this.selectionDrag.emit({ event, nodes });
+        };
+        this.store.onSelectionDragStop = (event, nodes) => {
+            this.selectionDragStop.emit({ event, nodes });
+        };
+    }
+    ngOnInit() {
+        // Handle uncontrolled mode
+        const defaultN = this.defaultNodes();
+        const defaultE = this.defaultEdges();
+        if (defaultN || defaultE) {
+            this.store.setDefaultNodesAndEdges(defaultN, defaultE);
+        }
+        // Queue fit view if requested
+        if (this.fitView()) {
+            this.store.fitViewQueued.set(true);
+            this.store.fitViewOptions.set(this.fitViewOptions());
+        }
+        // Set up system color mode listener
+        if (typeof window !== 'undefined') {
+            this.colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            this.colorSchemeHandler = (e) => {
+                this.systemPrefersDark.set(e.matches);
+            };
+            this.colorSchemeQuery.addEventListener('change', this.colorSchemeHandler);
+        }
+    }
+    ngAfterViewInit() {
+        const containerEl = this.containerRef()?.nativeElement;
+        if (!containerEl)
+            return;
+        this.store.domNode.set(containerEl);
+        // Set up ResizeObserver for container dimensions
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const { width, height } = entry.contentRect;
+                this.store.width.set(width);
+                this.store.height.set(height);
+            }
+        });
+        this.resizeObserver.observe(containerEl);
+        // Initialize XYPanZoom
+        this.initPanZoom(containerEl);
+        // Initialize box selection listener (must be after panZoom so capture fires first)
+        this.paneRef()?.initSelectionListener();
+        // Perform fitView after a short delay to allow dimensions to settle
+        if (this.fitView()) {
+            setTimeout(() => {
+                this.doFitView();
+            }, 50);
+        }
+        // Emit init event
+        this.init.emit(this.ngFlowService);
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.panZoomInstance?.destroy();
+        if (this.colorSchemeQuery && this.colorSchemeHandler) {
+            this.colorSchemeQuery.removeEventListener('change', this.colorSchemeHandler);
+        }
+        this.store.reset();
+    }
+    doFitView() {
+        const nodes = this.store.nodes();
+        if (nodes.length === 0)
+            return;
+        // Compute bounds from node positions (since nodes may not be measured yet)
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (const node of nodes) {
+            const x = node.position.x;
+            const y = node.position.y;
+            const w = node.width ?? 150;
+            const h = node.height ?? 40;
+            minX = Math.min(minX, x);
+            minY = Math.min(minY, y);
+            maxX = Math.max(maxX, x + w);
+            maxY = Math.max(maxY, y + h);
+        }
+        const bounds = { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+        const padding = this.fitViewOptions()?.padding ?? 0.1;
+        const vp = getViewportForBounds(bounds, this.store.width(), this.store.height(), this.minZoom(), this.maxZoom(), padding);
+        this.panZoomInstance?.setViewport(vp, { duration: 0 });
+        this.store.transform.set([vp.x, vp.y, vp.zoom]);
+    }
+    onPanePointerDown(event) {
+        this.panePointerDownPos = { x: event.clientX, y: event.clientY };
+    }
+    onPaneClick(event) {
+        const threshold = this.paneClickDistance();
+        if (threshold > 0 && this.panePointerDownPos) {
+            const dx = event.clientX - this.panePointerDownPos.x;
+            const dy = event.clientY - this.panePointerDownPos.y;
+            if (Math.sqrt(dx * dx + dy * dy) > threshold)
+                return;
+        }
+        this.panePointerDownPos = null;
+        this.store.resetSelectedElements();
+        this.paneClick.emit(event);
+    }
+    onPaneContextMenu(event) {
+        event.preventDefault();
+        this.paneContextMenu.emit(event);
+    }
+    initPanZoom(domNode) {
+        const paneElement = domNode.querySelector('.xy-flow__pane');
+        if (!paneElement)
+            return;
+        const panZoom = XYPanZoom({
+            domNode: paneElement,
+            minZoom: this.minZoom(),
+            maxZoom: this.maxZoom(),
+            viewport: this.defaultViewport(),
+            translateExtent: this.translateExtent(),
+            onDraggingChange: (dragging) => {
+                this.store.paneDragging.set(dragging);
+            },
+            onPanZoomStart: (event, viewport) => {
+                this.moveStart.emit({ event, viewport });
+            },
+            onPanZoom: (event, viewport) => {
+                this.zone.run(() => {
+                    const transform = [viewport.x, viewport.y, viewport.zoom];
+                    this.store.transform.set(transform);
+                    this.store.bumpVersion();
+                    this.move.emit({ event, viewport });
+                    this.viewportChange.emit(viewport);
+                });
+            },
+            onPanZoomEnd: (event, viewport) => {
+                this.moveEnd.emit({ event, viewport });
+            },
+        });
+        this.panZoomInstance = panZoom;
+        this.store.panZoom.set(panZoom);
+        // Set initial transform from default viewport
+        const dv = this.defaultViewport();
+        this.store.transform.set([dv.x, dv.y, dv.zoom]);
+        // Apply initial pan/zoom options
+        this.updatePanZoomOptions();
+    }
+    updatePanZoomOptions() {
+        this.panZoomInstance?.update({
+            panOnDrag: this.panOnDrag(),
+            panOnScroll: this.panOnScroll(),
+            panOnScrollMode: this.panOnScrollMode(),
+            panOnScrollSpeed: this.panOnScrollSpeed(),
+            zoomOnScroll: this.zoomOnScroll(),
+            zoomOnPinch: this.zoomOnPinch(),
+            zoomOnDoubleClick: this.zoomOnDoubleClick(),
+            preventScrolling: this.preventScrolling(),
+            noPanClassName: this.noPanClassName(),
+            noWheelClassName: this.noWheelClassName(),
+            userSelectionActive: this.store.userSelectionActive(),
+            lib: 'ng',
+            onTransformChange: (transform) => {
+                this.store.transform.set(transform);
+            },
+            paneClickDistance: this.paneClickDistance(),
+        });
+    }
+    static { this.ɵfac = function NgFlowComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NgFlowComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NgFlowComponent, selectors: [["ng-flow"]], contentQueries: function NgFlowComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.nodeTypeDirectives, NgFlowNodeTypeDirective, 4);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, viewQuery: function NgFlowComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.containerRef, _c0, 5)(ctx.paneRef, PaneComponent, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance(2);
+        } }, hostAttrs: ["role", "application", 1, "ng-flow", "xy-flow", 2, "display", "block", "position", "relative", "overflow", "hidden", "width", "100%", "height", "100%"], hostVars: 8, hostBindings: function NgFlowComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵstyleProp("width", ctx.widthInput(), "px")("height", ctx.heightInput(), "px");
+            i0.ɵɵclassProp("dark", ctx.resolvedColorMode() === "dark")("light", ctx.resolvedColorMode() === "light");
+        } }, inputs: { nodesModel: [1, "nodes", "nodesModel"], edgesModel: [1, "edges", "edgesModel"], viewportModel: [1, "viewport", "viewportModel"], defaultNodes: [1, "defaultNodes"], defaultEdges: [1, "defaultEdges"], defaultViewport: [1, "defaultViewport"], nodeTypes: [1, "nodeTypes"], edgeTypes: [1, "edgeTypes"], defaultEdgeOptions: [1, "defaultEdgeOptions"], connectionMode: [1, "connectionMode"], connectionLineType: [1, "connectionLineType"], connectionLineComponent: [1, "connectionLineComponent"], connectionLineStyle: [1, "connectionLineStyle"], connectionLineContainerStyle: [1, "connectionLineContainerStyle"], widthInput: [1, "width", "widthInput"], heightInput: [1, "height", "heightInput"], nodesDraggable: [1, "nodesDraggable"], nodesConnectable: [1, "nodesConnectable"], nodesFocusable: [1, "nodesFocusable"], edgesFocusable: [1, "edgesFocusable"], edgesReconnectable: [1, "edgesReconnectable"], elementsSelectable: [1, "elementsSelectable"], selectNodesOnDrag: [1, "selectNodesOnDrag"], connectOnClick: [1, "connectOnClick"], panOnDrag: [1, "panOnDrag"], panOnScroll: [1, "panOnScroll"], panOnScrollMode: [1, "panOnScrollMode"], panOnScrollSpeed: [1, "panOnScrollSpeed"], zoomOnScroll: [1, "zoomOnScroll"], zoomOnPinch: [1, "zoomOnPinch"], zoomOnDoubleClick: [1, "zoomOnDoubleClick"], preventScrolling: [1, "preventScrolling"], selectionOnDrag: [1, "selectionOnDrag"], selectionMode: [1, "selectionMode"], minZoom: [1, "minZoom"], maxZoom: [1, "maxZoom"], translateExtent: [1, "translateExtent"], nodeExtent: [1, "nodeExtent"], snapToGrid: [1, "snapToGrid"], snapGrid: [1, "snapGrid"], fitView: [1, "fitView"], fitViewOptions: [1, "fitViewOptions"], deleteKeyCode: [1, "deleteKeyCode"], selectionKeyCode: [1, "selectionKeyCode"], panActivationKeyCode: [1, "panActivationKeyCode"], multiSelectionKeyCode: [1, "multiSelectionKeyCode"], zoomActivationKeyCode: [1, "zoomActivationKeyCode"], autoPanOnNodeDrag: [1, "autoPanOnNodeDrag"], autoPanOnConnect: [1, "autoPanOnConnect"], autoPanSpeed: [1, "autoPanSpeed"], connectionRadius: [1, "connectionRadius"], reconnectRadius: [1, "reconnectRadius"], nodeDragThreshold: [1, "nodeDragThreshold"], connectionDragThreshold: [1, "connectionDragThreshold"], paneClickDistance: [1, "paneClickDistance"], nodeClickDistance: [1, "nodeClickDistance"], colorMode: [1, "colorMode"], elevateNodesOnSelect: [1, "elevateNodesOnSelect"], elevateEdgesOnSelect: [1, "elevateEdgesOnSelect"], onlyRenderVisibleElements: [1, "onlyRenderVisibleElements"], zIndexMode: [1, "zIndexMode"], nodeOrigin: [1, "nodeOrigin"], defaultMarkerColor: [1, "defaultMarkerColor"], noDragClassName: [1, "noDragClassName"], noWheelClassName: [1, "noWheelClassName"], noPanClassName: [1, "noPanClassName"], disableKeyboardA11y: [1, "disableKeyboardA11y"], ariaLabelConfig: [1, "ariaLabelConfig"], isValidConnection: [1, "isValidConnection"], proOptions: [1, "proOptions"], attributionPosition: [1, "attributionPosition"], hideAttribution: [1, "hideAttribution"], flowId: [1, "id", "flowId"], debug: [1, "debug"], onBeforeDelete: [1, "onBeforeDelete"] }, outputs: { nodesModel: "nodesChange", edgesModel: "edgesChange", viewportModel: "viewportChange", nodesChange: "nodesChange", edgesChange: "edgesChange", init: "init", nodeClick: "nodeClick", nodeDoubleClick: "nodeDoubleClick", nodeMouseEnter: "nodeMouseEnter", nodeMouseMove: "nodeMouseMove", nodeMouseLeave: "nodeMouseLeave", nodeContextMenu: "nodeContextMenu", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", nodeDragStop: "nodeDragStop", edgeClick: "edgeClick", edgeDoubleClick: "edgeDoubleClick", edgeContextMenu: "edgeContextMenu", edgeMouseEnter: "edgeMouseEnter", edgeMouseMove: "edgeMouseMove", edgeMouseLeave: "edgeMouseLeave", connect: "connect", connectStart: "connectStart", connectEnd: "connectEnd", clickConnectStart: "clickConnectStart", clickConnectEnd: "clickConnectEnd", reconnect: "reconnect", reconnectStart: "reconnectStart", reconnectEnd: "reconnectEnd", paneClick: "paneClick", paneContextMenu: "paneContextMenu", paneMouseEnter: "paneMouseEnter", paneMouseMove: "paneMouseMove", paneMouseLeave: "paneMouseLeave", paneScroll: "paneScroll", moveStart: "moveStart", move: "move", moveEnd: "moveEnd", viewportChange: "viewportChange", selectionChange: "selectionChange", selectionDragStart: "selectionDragStart", selectionDrag: "selectionDrag", selectionDragStop: "selectionDragStop", selectionStart: "selectionStart", selectionEnd: "selectionEnd", selectionContextMenu: "selectionContextMenu", nodesDelete: "nodesDelete", edgesDelete: "edgesDelete", deleteEvent: "delete", error: "error", autoPanStart: "autoPanStart", autoPanEnd: "autoPanEnd" }, features: [i0.ɵɵProvidersFeature([FlowStore, NgFlowService])], ngContentSelectors: _c1, decls: 13, vars: 16, consts: [["container", ""], ["ngFlowKeyHandler", "", 1, "ng-flow__container", "xy-flow__container", 3, "nodesDelete", "edgesDelete", "deleteElements", "deleteKeyCode", "selectionKeyCode", "multiSelectionKeyCode", "disableKeyboardA11y"], [3, "pointerdown", "click", "contextmenu", "mouseenter", "mousemove", "mouseleave", "selectionStart", "selectionEnd", "paneScroll", "panOnDrag", "selectionOnDrag", "selectionKeyCode", "selectionMode"], [3, "transform"], [3, "edgeClick", "edgeDoubleClick", "edgeContextMenu", "edgeMouseEnter", "edgeMouseMove", "edgeMouseLeave", "reconnect", "reconnectStart", "reconnectEnd", "customEdgeTypes"], [3, "customComponent", "connectionLineType"], [3, "nodeClick", "nodeDoubleClick", "nodeContextMenu", "nodeMouseEnter", "nodeMouseMove", "nodeMouseLeave", "customNodeTypes", "nodeTemplateMap"], [3, "contextMenu"], ["aria-live", "assertive", "aria-atomic", "true", 1, "xy-flow__a11y-descriptions", 2, "position", "absolute", "width", "1px", "height", "1px", "margin", "-1px", "padding", "0", "overflow", "hidden", "clip", "rect(0,0,0,0)", "border", "0"]], template: function NgFlowComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 1, 0);
+            i0.ɵɵlistener("nodesDelete", function NgFlowComponent_Template_div_nodesDelete_0_listener($event) { return ctx.nodesDelete.emit($event); })("edgesDelete", function NgFlowComponent_Template_div_edgesDelete_0_listener($event) { return ctx.edgesDelete.emit($event); })("deleteElements", function NgFlowComponent_Template_div_deleteElements_0_listener($event) { return ctx.deleteEvent.emit($event); });
+            i0.ɵɵelementStart(2, "ng-flow-pane", 2);
+            i0.ɵɵlistener("pointerdown", function NgFlowComponent_Template_ng_flow_pane_pointerdown_2_listener($event) { return ctx.onPanePointerDown($event); })("click", function NgFlowComponent_Template_ng_flow_pane_click_2_listener($event) { return ctx.onPaneClick($event); })("contextmenu", function NgFlowComponent_Template_ng_flow_pane_contextmenu_2_listener($event) { return ctx.onPaneContextMenu($event); })("mouseenter", function NgFlowComponent_Template_ng_flow_pane_mouseenter_2_listener($event) { return ctx.paneMouseEnter.emit($event); })("mousemove", function NgFlowComponent_Template_ng_flow_pane_mousemove_2_listener($event) { return ctx.paneMouseMove.emit($event); })("mouseleave", function NgFlowComponent_Template_ng_flow_pane_mouseleave_2_listener($event) { return ctx.paneMouseLeave.emit($event); })("selectionStart", function NgFlowComponent_Template_ng_flow_pane_selectionStart_2_listener($event) { return ctx.selectionStart.emit($event); })("selectionEnd", function NgFlowComponent_Template_ng_flow_pane_selectionEnd_2_listener($event) { return ctx.selectionEnd.emit($event); })("paneScroll", function NgFlowComponent_Template_ng_flow_pane_paneScroll_2_listener($event) { return ctx.paneScroll.emit($event); });
+            i0.ɵɵelementStart(3, "ng-flow-viewport", 3)(4, "ng-flow-edge-renderer", 4);
+            i0.ɵɵlistener("edgeClick", function NgFlowComponent_Template_ng_flow_edge_renderer_edgeClick_4_listener($event) { return ctx.edgeClick.emit($event); })("edgeDoubleClick", function NgFlowComponent_Template_ng_flow_edge_renderer_edgeDoubleClick_4_listener($event) { return ctx.edgeDoubleClick.emit($event); })("edgeContextMenu", function NgFlowComponent_Template_ng_flow_edge_renderer_edgeContextMenu_4_listener($event) { return ctx.edgeContextMenu.emit($event); })("edgeMouseEnter", function NgFlowComponent_Template_ng_flow_edge_renderer_edgeMouseEnter_4_listener($event) { return ctx.edgeMouseEnter.emit($event); })("edgeMouseMove", function NgFlowComponent_Template_ng_flow_edge_renderer_edgeMouseMove_4_listener($event) { return ctx.edgeMouseMove.emit($event); })("edgeMouseLeave", function NgFlowComponent_Template_ng_flow_edge_renderer_edgeMouseLeave_4_listener($event) { return ctx.edgeMouseLeave.emit($event); })("reconnect", function NgFlowComponent_Template_ng_flow_edge_renderer_reconnect_4_listener($event) { return ctx.reconnect.emit($event); })("reconnectStart", function NgFlowComponent_Template_ng_flow_edge_renderer_reconnectStart_4_listener($event) { return ctx.reconnectStart.emit($event); })("reconnectEnd", function NgFlowComponent_Template_ng_flow_edge_renderer_reconnectEnd_4_listener($event) { return ctx.reconnectEnd.emit($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(5, "ng-flow-connection-line", 5);
+            i0.ɵɵelementStart(6, "ng-flow-node-renderer", 6);
+            i0.ɵɵlistener("nodeClick", function NgFlowComponent_Template_ng_flow_node_renderer_nodeClick_6_listener($event) { return ctx.nodeClick.emit($event); })("nodeDoubleClick", function NgFlowComponent_Template_ng_flow_node_renderer_nodeDoubleClick_6_listener($event) { return ctx.nodeDoubleClick.emit($event); })("nodeContextMenu", function NgFlowComponent_Template_ng_flow_node_renderer_nodeContextMenu_6_listener($event) { return ctx.nodeContextMenu.emit($event); })("nodeMouseEnter", function NgFlowComponent_Template_ng_flow_node_renderer_nodeMouseEnter_6_listener($event) { return ctx.nodeMouseEnter.emit($event); })("nodeMouseMove", function NgFlowComponent_Template_ng_flow_node_renderer_nodeMouseMove_6_listener($event) { return ctx.nodeMouseMove.emit($event); })("nodeMouseLeave", function NgFlowComponent_Template_ng_flow_node_renderer_nodeMouseLeave_6_listener($event) { return ctx.nodeMouseLeave.emit($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "ng-flow-selection-box", 7);
+            i0.ɵɵlistener("contextMenu", function NgFlowComponent_Template_ng_flow_selection_box_contextMenu_7_listener($event) { return ctx.selectionContextMenu.emit({ event: $event, nodes: ctx.store.selectedNodes() }); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵprojection(8);
+            i0.ɵɵelement(9, "ng-flow-a11y-descriptions");
+            i0.ɵɵconditionalCreate(10, NgFlowComponent_Conditional_10_Template, 1, 0, "ng-flow-attribution");
+            i0.ɵɵelementStart(11, "div", 8);
+            i0.ɵɵtext(12);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("deleteKeyCode", ctx.deleteKeyCode())("selectionKeyCode", ctx.selectionKeyCode())("multiSelectionKeyCode", ctx.multiSelectionKeyCode())("disableKeyboardA11y", ctx.disableKeyboardA11y());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("panOnDrag", ctx.panOnDrag())("selectionOnDrag", ctx.selectionOnDrag())("selectionKeyCode", ctx.selectionKeyCode())("selectionMode", ctx.selectionMode());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("transform", ctx.store.transform());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("customEdgeTypes", ctx.edgeTypes());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("customComponent", ctx.connectionLineComponent())("connectionLineType", ctx.connectionLineType());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("customNodeTypes", ctx.nodeTypes())("nodeTemplateMap", ctx.nodeTemplateMap());
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(!ctx.hideAttribution() ? 10 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.store.ariaLiveMessage(), " ");
+        } }, dependencies: [CommonModule,
+            NodeRendererComponent,
+            EdgeRendererComponent,
+            ViewportComponent,
+            PaneComponent,
+            ConnectionLineComponent,
+            SelectionBoxComponent,
+            KeyHandlerDirective,
+            A11yDescriptionsComponent,
+            AttributionComponent], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgFlowComponent, [{
+        type: Component,
+        args: [{
+                selector: 'ng-flow',
+                standalone: true,
+                imports: [
+                    CommonModule,
+                    NodeRendererComponent,
+                    EdgeRendererComponent,
+                    ViewportComponent,
+                    PaneComponent,
+                    ConnectionLineComponent,
+                    SelectionBoxComponent,
+                    KeyHandlerDirective,
+                    A11yDescriptionsComponent,
+                    AttributionComponent,
+                ],
+                providers: [FlowStore, NgFlowService],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                host: {
+                    'class': 'ng-flow xy-flow',
+                    'role': 'application',
+                    '[class.dark]': 'resolvedColorMode() === "dark"',
+                    '[class.light]': 'resolvedColorMode() === "light"',
+                    '[style.width.px]': 'widthInput()',
+                    '[style.height.px]': 'heightInput()',
+                    'style': 'display: block; position: relative; overflow: hidden; width: 100%; height: 100%;',
+                },
+                template: `
+    <div
+      class="ng-flow__container xy-flow__container"
+      #container
+      ngFlowKeyHandler
+      [deleteKeyCode]="deleteKeyCode()"
+      [selectionKeyCode]="selectionKeyCode()"
+      [multiSelectionKeyCode]="multiSelectionKeyCode()"
+      [disableKeyboardA11y]="disableKeyboardA11y()"
+      (nodesDelete)="nodesDelete.emit($event)"
+      (edgesDelete)="edgesDelete.emit($event)"
+      (deleteElements)="deleteEvent.emit($event)"
+    >
+      <ng-flow-pane
+        [panOnDrag]="panOnDrag()"
+        [selectionOnDrag]="selectionOnDrag()"
+        [selectionKeyCode]="selectionKeyCode()"
+        [selectionMode]="selectionMode()"
+        (pointerdown)="onPanePointerDown($event)"
+        (click)="onPaneClick($event)"
+        (contextmenu)="onPaneContextMenu($event)"
+        (mouseenter)="paneMouseEnter.emit($event)"
+        (mousemove)="paneMouseMove.emit($event)"
+        (mouseleave)="paneMouseLeave.emit($event)"
+        (selectionStart)="selectionStart.emit($event)"
+        (selectionEnd)="selectionEnd.emit($event)"
+        (paneScroll)="paneScroll.emit($event)"
+      >
+        <ng-flow-viewport [transform]="store.transform()">
+          <ng-flow-edge-renderer
+            [customEdgeTypes]="edgeTypes()"
+            (edgeClick)="edgeClick.emit($event)"
+            (edgeDoubleClick)="edgeDoubleClick.emit($event)"
+            (edgeContextMenu)="edgeContextMenu.emit($event)"
+            (edgeMouseEnter)="edgeMouseEnter.emit($event)"
+            (edgeMouseMove)="edgeMouseMove.emit($event)"
+            (edgeMouseLeave)="edgeMouseLeave.emit($event)"
+            (reconnect)="reconnect.emit($event)"
+            (reconnectStart)="reconnectStart.emit($event)"
+            (reconnectEnd)="reconnectEnd.emit($event)"
+          />
+          <ng-flow-connection-line [customComponent]="connectionLineComponent()" [connectionLineType]="connectionLineType()" />
+          <ng-flow-node-renderer
+            [customNodeTypes]="nodeTypes()"
+            [nodeTemplateMap]="nodeTemplateMap()"
+            (nodeClick)="nodeClick.emit($event)"
+            (nodeDoubleClick)="nodeDoubleClick.emit($event)"
+            (nodeContextMenu)="nodeContextMenu.emit($event)"
+            (nodeMouseEnter)="nodeMouseEnter.emit($event)"
+            (nodeMouseMove)="nodeMouseMove.emit($event)"
+            (nodeMouseLeave)="nodeMouseLeave.emit($event)"
+          />
+        </ng-flow-viewport>
+        <ng-flow-selection-box (contextMenu)="selectionContextMenu.emit({ event: $event, nodes: store.selectedNodes() })" />
+      </ng-flow-pane>
+      <ng-content />
+      <ng-flow-a11y-descriptions />
+      @if (!hideAttribution()) {
+        <ng-flow-attribution />
+      }
+      <div class="xy-flow__a11y-descriptions" aria-live="assertive" aria-atomic="true"
+           style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0;">
+        {{ store.ariaLiveMessage() }}
+      </div>
+    </div>
+  `,
+            }]
+    }], () => [], { containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], paneRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PaneComponent), { isSignal: true }] }], nodeTypeDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgFlowNodeTypeDirective), { isSignal: true }] }], nodesModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }, { type: i0.Output, args: ["nodesChange"] }], edgesModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "edges", required: false }] }, { type: i0.Output, args: ["edgesChange"] }], viewportModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewport", required: false }] }, { type: i0.Output, args: ["viewportChange"] }], defaultNodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultNodes", required: false }] }], defaultEdges: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultEdges", required: false }] }], defaultViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultViewport", required: false }] }], nodeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTypes", required: false }] }], edgeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgeTypes", required: false }] }], defaultEdgeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultEdgeOptions", required: false }] }], connectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionMode", required: false }] }], connectionLineType: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineType", required: false }] }], connectionLineComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineComponent", required: false }] }], connectionLineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineStyle", required: false }] }], connectionLineContainerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineContainerStyle", required: false }] }], widthInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], heightInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], nodesDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodesDraggable", required: false }] }], nodesConnectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodesConnectable", required: false }] }], nodesFocusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodesFocusable", required: false }] }], edgesFocusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgesFocusable", required: false }] }], edgesReconnectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgesReconnectable", required: false }] }], elementsSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementsSelectable", required: false }] }], selectNodesOnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectNodesOnDrag", required: false }] }], connectOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectOnClick", required: false }] }], panOnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "panOnDrag", required: false }] }], panOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "panOnScroll", required: false }] }], panOnScrollMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "panOnScrollMode", required: false }] }], panOnScrollSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "panOnScrollSpeed", required: false }] }], zoomOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOnScroll", required: false }] }], zoomOnPinch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOnPinch", required: false }] }], zoomOnDoubleClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOnDoubleClick", required: false }] }], preventScrolling: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventScrolling", required: false }] }], selectionOnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionOnDrag", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], translateExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateExtent", required: false }] }], nodeExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeExtent", required: false }] }], snapToGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToGrid", required: false }] }], snapGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapGrid", required: false }] }], fitView: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitView", required: false }] }], fitViewOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitViewOptions", required: false }] }], deleteKeyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteKeyCode", required: false }] }], selectionKeyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionKeyCode", required: false }] }], panActivationKeyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "panActivationKeyCode", required: false }] }], multiSelectionKeyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectionKeyCode", required: false }] }], zoomActivationKeyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomActivationKeyCode", required: false }] }], autoPanOnNodeDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPanOnNodeDrag", required: false }] }], autoPanOnConnect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPanOnConnect", required: false }] }], autoPanSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPanSpeed", required: false }] }], connectionRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionRadius", required: false }] }], reconnectRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "reconnectRadius", required: false }] }], nodeDragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeDragThreshold", required: false }] }], connectionDragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionDragThreshold", required: false }] }], paneClickDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneClickDistance", required: false }] }], nodeClickDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeClickDistance", required: false }] }], colorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMode", required: false }] }], elevateNodesOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevateNodesOnSelect", required: false }] }], elevateEdgesOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevateEdgesOnSelect", required: false }] }], onlyRenderVisibleElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyRenderVisibleElements", required: false }] }], zIndexMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndexMode", required: false }] }], nodeOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeOrigin", required: false }] }], defaultMarkerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMarkerColor", required: false }] }], noDragClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDragClassName", required: false }] }], noWheelClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "noWheelClassName", required: false }] }], noPanClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPanClassName", required: false }] }], disableKeyboardA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableKeyboardA11y", required: false }] }], ariaLabelConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelConfig", required: false }] }], isValidConnection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValidConnection", required: false }] }], proOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "proOptions", required: false }] }], attributionPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "attributionPosition", required: false }] }], hideAttribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideAttribution", required: false }] }], flowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], nodesChange: [{ type: i0.Output, args: ["nodesChange"] }], edgesChange: [{ type: i0.Output, args: ["edgesChange"] }], init: [{ type: i0.Output, args: ["init"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeDoubleClick: [{ type: i0.Output, args: ["nodeDoubleClick"] }], nodeMouseEnter: [{ type: i0.Output, args: ["nodeMouseEnter"] }], nodeMouseMove: [{ type: i0.Output, args: ["nodeMouseMove"] }], nodeMouseLeave: [{ type: i0.Output, args: ["nodeMouseLeave"] }], nodeContextMenu: [{ type: i0.Output, args: ["nodeContextMenu"] }], nodeDragStart: [{ type: i0.Output, args: ["nodeDragStart"] }], nodeDrag: [{ type: i0.Output, args: ["nodeDrag"] }], nodeDragStop: [{ type: i0.Output, args: ["nodeDragStop"] }], 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"] }], connect: [{ type: i0.Output, args: ["connect"] }], connectStart: [{ type: i0.Output, args: ["connectStart"] }], connectEnd: [{ type: i0.Output, args: ["connectEnd"] }], clickConnectStart: [{ type: i0.Output, args: ["clickConnectStart"] }], clickConnectEnd: [{ type: i0.Output, args: ["clickConnectEnd"] }], reconnect: [{ type: i0.Output, args: ["reconnect"] }], reconnectStart: [{ type: i0.Output, args: ["reconnectStart"] }], reconnectEnd: [{ type: i0.Output, args: ["reconnectEnd"] }], paneClick: [{ type: i0.Output, args: ["paneClick"] }], paneContextMenu: [{ type: i0.Output, args: ["paneContextMenu"] }], paneMouseEnter: [{ type: i0.Output, args: ["paneMouseEnter"] }], paneMouseMove: [{ type: i0.Output, args: ["paneMouseMove"] }], paneMouseLeave: [{ type: i0.Output, args: ["paneMouseLeave"] }], paneScroll: [{ type: i0.Output, args: ["paneScroll"] }], moveStart: [{ type: i0.Output, args: ["moveStart"] }], move: [{ type: i0.Output, args: ["move"] }], moveEnd: [{ type: i0.Output, args: ["moveEnd"] }], viewportChange: [{ type: i0.Output, args: ["viewportChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionDragStart: [{ type: i0.Output, args: ["selectionDragStart"] }], selectionDrag: [{ type: i0.Output, args: ["selectionDrag"] }], selectionDragStop: [{ type: i0.Output, args: ["selectionDragStop"] }], selectionStart: [{ type: i0.Output, args: ["selectionStart"] }], selectionEnd: [{ type: i0.Output, args: ["selectionEnd"] }], selectionContextMenu: [{ type: i0.Output, args: ["selectionContextMenu"] }], nodesDelete: [{ type: i0.Output, args: ["nodesDelete"] }], edgesDelete: [{ type: i0.Output, args: ["edgesDelete"] }], deleteEvent: [{ type: i0.Output, args: ["delete"] }], onBeforeDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "onBeforeDelete", required: false }] }], error: [{ type: i0.Output, args: ["error"] }], autoPanStart: [{ type: i0.Output, args: ["autoPanStart"] }], autoPanEnd: [{ type: i0.Output, args: ["autoPanEnd"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NgFlowComponent, { className: "NgFlowComponent", filePath: "lib/container/ng-flow/ng-flow.component.ts", lineNumber: 186 }); })();
+//# sourceMappingURL=ng-flow.component.js.map