@angflow/angular 0.0.13 → 0.0.15

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

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, input, output, model, effect, viewChild, contentChildren, inject, NgZone, signal, computed, } from '@angular/core';
+import { Component, ChangeDetectionStrategy, input, output, effect, viewChild, contentChildren, inject, 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';
@@ -14,11 +14,38 @@ import { AttributionComponent } from '../../components/attribution/attribution.c
 import { KeyHandlerDirective } from '../../directives/key-handler.directive';
 import { NgFlowNodeTypeDirective } from '../../directives/node-type.directive';
 import * as i0 from "@angular/core";
+/**
+ * Root component for an Angular Flow canvas. Renders nodes, edges, handles,
+ * and the pan/zoom viewport; dispatches pointer, keyboard, and drag events;
+ * and provides {@link FlowStore} and {@link NgFlowService} to descendant
+ * plugin components like `<ng-flow-background>`, `<ng-flow-controls>`, and
+ * `<ng-flow-minimap>`.
+ *
+ * `nodes`, `edges`, and `viewport` are input-bound — for controlled mode, bind
+ * `[nodes]` / `[edges]` and re-assign them from `(nodesChange)` / `(edgesChange)`
+ * after running the deltas through `applyNodeChanges` / `applyEdgeChanges`. For
+ * uncontrolled mode hand off initial state via `defaultNodes` / `defaultEdges`.
+ *
+ * @example
+ * ```html
+ * <ng-flow
+ *   [nodes]="nodes"
+ *   [edges]="edges"
+ *   [fitView]="true"
+ *   (nodesChange)="onNodesChange($event)"
+ *   (edgesChange)="onEdgesChange($event)"
+ *   (connect)="onConnect($event)"
+ * >
+ *   <ng-flow-background variant="dots" />
+ *   <ng-flow-controls />
+ *   <ng-flow-minimap />
+ * </ng-flow>
+ * ```
+ */
 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 */
@@ -44,168 +71,282 @@ export class NgFlowComponent {
             }
             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 (controlled-mode inputs; pair with the *Change outputs) ──────
+        /** Nodes to render. Re-bind from `(nodesChange)` after running deltas through `applyNodeChanges` to stay in sync. */
+        this.nodesModel = input([], { ...(ngDevMode ? { debugName: "nodesModel" } : /* istanbul ignore next */ {}), alias: 'nodes' });
+        /** Edges to render. Re-bind from `(edgesChange)` after running deltas through `applyEdgeChanges` to stay in sync. */
+        this.edgesModel = input([], { ...(ngDevMode ? { debugName: "edgesModel" } : /* istanbul ignore next */ {}), alias: 'edges' });
+        /** Current viewport (`{ x, y, zoom }`). Fires `(viewportChange)` on pan/zoom. */
+        this.viewportModel = input(undefined, { ...(ngDevMode ? { debugName: "viewportModel" } : /* istanbul ignore next */ {}), alias: 'viewport' });
         // ── Data (input-only for uncontrolled mode) ───────────────────────────
+        /** Initial nodes for uncontrolled mode. Ignored when `[nodes]` is bound. */
         this.defaultNodes = input(...(ngDevMode ? [undefined, { debugName: "defaultNodes" }] : /* istanbul ignore next */ []));
+        /** Initial edges for uncontrolled mode. Ignored when `[edges]` is bound. */
         this.defaultEdges = input(...(ngDevMode ? [undefined, { debugName: "defaultEdges" }] : /* istanbul ignore next */ []));
+        /** Initial viewport for uncontrolled mode. Defaults to `{ x: 0, y: 0, zoom: 1 }`. */
         this.defaultViewport = input({ x: 0, y: 0, zoom: 1 }, ...(ngDevMode ? [{ debugName: "defaultViewport" }] : /* istanbul ignore next */ []));
         // ── Configuration inputs ──────────────────────────────────────────────
+        /** Map of node `type` → Angular component (or `<ng-template ngFlowNodeType>`) used to render custom nodes. */
         this.nodeTypes = input({}, ...(ngDevMode ? [{ debugName: "nodeTypes" }] : /* istanbul ignore next */ []));
+        /** Map of edge `type` → Angular component used to render custom edges. */
         this.edgeTypes = input({}, ...(ngDevMode ? [{ debugName: "edgeTypes" }] : /* istanbul ignore next */ []));
+        /** Shared defaults merged into every edge (e.g. `type`, `animated`, `markerEnd`). */
         this.defaultEdgeOptions = input(...(ngDevMode ? [undefined, { debugName: "defaultEdgeOptions" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether connections require a matching source/target pair.
+         * `Strict` (default) enforces source→target; `Loose` allows any direction.
+         */
         this.connectionMode = input(ConnectionMode.Strict, ...(ngDevMode ? [{ debugName: "connectionMode" }] : /* istanbul ignore next */ []));
+        /** Path shape drawn while the user is dragging a connection. */
         this.connectionLineType = input(ConnectionLineType.Bezier, ...(ngDevMode ? [{ debugName: "connectionLineType" }] : /* istanbul ignore next */ []));
+        /** Custom Angular component to render the in-progress connection line. */
         this.connectionLineComponent = input(null, ...(ngDevMode ? [{ debugName: "connectionLineComponent" }] : /* istanbul ignore next */ []));
+        /** Inline styles applied to the default connection-line SVG path. */
         this.connectionLineStyle = input(...(ngDevMode ? [undefined, { debugName: "connectionLineStyle" }] : /* istanbul ignore next */ []));
+        /** Inline styles applied to the wrapper element around the connection line. */
         this.connectionLineContainerStyle = input(...(ngDevMode ? [undefined, { debugName: "connectionLineContainerStyle" }] : /* istanbul ignore next */ []));
+        /** Fixed pixel width for the canvas. If omitted, host stretches to its parent. */
         this.widthInput = input(undefined, { ...(ngDevMode ? { debugName: "widthInput" } : /* istanbul ignore next */ {}), alias: 'width' });
+        /** Fixed pixel height for the canvas. If omitted, host stretches to its parent. */
         this.heightInput = input(undefined, { ...(ngDevMode ? { debugName: "heightInput" } : /* istanbul ignore next */ {}), alias: 'height' });
         // ── Interaction flags ─────────────────────────────────────────────────
+        /** Whether nodes can be dragged. */
         this.nodesDraggable = input(true, ...(ngDevMode ? [{ debugName: "nodesDraggable" }] : /* istanbul ignore next */ []));
+        /** Whether handles accept new connections. */
         this.nodesConnectable = input(true, ...(ngDevMode ? [{ debugName: "nodesConnectable" }] : /* istanbul ignore next */ []));
+        /** Whether nodes are focusable via keyboard. */
         this.nodesFocusable = input(true, ...(ngDevMode ? [{ debugName: "nodesFocusable" }] : /* istanbul ignore next */ []));
+        /** Whether edges are focusable via keyboard. */
         this.edgesFocusable = input(true, ...(ngDevMode ? [{ debugName: "edgesFocusable" }] : /* istanbul ignore next */ []));
+        /** Whether an existing edge's endpoint can be dragged to a different handle. */
         this.edgesReconnectable = input(true, ...(ngDevMode ? [{ debugName: "edgesReconnectable" }] : /* istanbul ignore next */ []));
+        /** Whether nodes and edges can be selected (clicked / box-selected). */
         this.elementsSelectable = input(true, ...(ngDevMode ? [{ debugName: "elementsSelectable" }] : /* istanbul ignore next */ []));
+        /** Whether clicking a node during drag selects it. */
         this.selectNodesOnDrag = input(true, ...(ngDevMode ? [{ debugName: "selectNodesOnDrag" }] : /* istanbul ignore next */ []));
+        /** Whether click-to-connect is enabled as an alternative to drag-to-connect. */
         this.connectOnClick = input(true, ...(ngDevMode ? [{ debugName: "connectOnClick" }] : /* istanbul ignore next */ []));
         // ── Pan/Zoom flags ────────────────────────────────────────────────────
+        /** Enable panning by dragging the pane. Pass `number[]` to restrict to specific mouse buttons. */
         this.panOnDrag = input(true, ...(ngDevMode ? [{ debugName: "panOnDrag" }] : /* istanbul ignore next */ []));
+        /** Pan the viewport with the scroll wheel instead of zooming. */
         this.panOnScroll = input(false, ...(ngDevMode ? [{ debugName: "panOnScroll" }] : /* istanbul ignore next */ []));
+        /** Axis constraints for `panOnScroll` (`Free`, `Horizontal`, `Vertical`). */
         this.panOnScrollMode = input(PanOnScrollMode.Free, ...(ngDevMode ? [{ debugName: "panOnScrollMode" }] : /* istanbul ignore next */ []));
+        /** Multiplier for scroll-pan speed. */
         this.panOnScrollSpeed = input(0.5, ...(ngDevMode ? [{ debugName: "panOnScrollSpeed" }] : /* istanbul ignore next */ []));
+        /** Enable zooming with the scroll wheel. */
         this.zoomOnScroll = input(true, ...(ngDevMode ? [{ debugName: "zoomOnScroll" }] : /* istanbul ignore next */ []));
+        /** Enable pinch-to-zoom on touch devices. */
         this.zoomOnPinch = input(true, ...(ngDevMode ? [{ debugName: "zoomOnPinch" }] : /* istanbul ignore next */ []));
+        /** Enable double-click to zoom in. */
         this.zoomOnDoubleClick = input(true, ...(ngDevMode ? [{ debugName: "zoomOnDoubleClick" }] : /* istanbul ignore next */ []));
+        /** Prevent the page from scrolling while the pointer is over the canvas. */
         this.preventScrolling = input(true, ...(ngDevMode ? [{ debugName: "preventScrolling" }] : /* istanbul ignore next */ []));
         // ── Selection ─────────────────────────────────────────────────────────
+        /** Start a box-selection on plain drag (without holding the selection key). */
         this.selectionOnDrag = input(false, ...(ngDevMode ? [{ debugName: "selectionOnDrag" }] : /* istanbul ignore next */ []));
+        /** Selection geometry: `Full` only selects fully contained nodes; `Partial` also selects those that overlap. */
         this.selectionMode = input(SelectionMode.Full, ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
         // ── Viewport constraints ──────────────────────────────────────────────
+        /** Minimum allowed zoom level. */
         this.minZoom = input(0.5, ...(ngDevMode ? [{ debugName: "minZoom" }] : /* istanbul ignore next */ []));
+        /** Maximum allowed zoom level. */
         this.maxZoom = input(2, ...(ngDevMode ? [{ debugName: "maxZoom" }] : /* istanbul ignore next */ []));
+        /** `[[x1, y1], [x2, y2]]` extent the viewport can be panned within. */
         this.translateExtent = input(infiniteExtent, ...(ngDevMode ? [{ debugName: "translateExtent" }] : /* istanbul ignore next */ []));
+        /** `[[x1, y1], [x2, y2]]` extent node positions are clamped to. */
         this.nodeExtent = input(infiniteExtent, ...(ngDevMode ? [{ debugName: "nodeExtent" }] : /* istanbul ignore next */ []));
         // ── Grid/Snap ─────────────────────────────────────────────────────────
+        /** Snap dragged nodes to `snapGrid`. */
         this.snapToGrid = input(false, ...(ngDevMode ? [{ debugName: "snapToGrid" }] : /* istanbul ignore next */ []));
+        /** `[x, y]` grid size used when `snapToGrid` is `true`. */
         this.snapGrid = input([15, 15], ...(ngDevMode ? [{ debugName: "snapGrid" }] : /* istanbul ignore next */ []));
         // ── Fit view ──────────────────────────────────────────────────────────
+        /** Fit all nodes into view on initial render. */
         this.fitView = input(false, ...(ngDevMode ? [{ debugName: "fitView" }] : /* istanbul ignore next */ []));
+        /** Options for the initial `fitView` call (padding, specific nodes, min/max zoom). */
         this.fitViewOptions = input(...(ngDevMode ? [undefined, { debugName: "fitViewOptions" }] : /* istanbul ignore next */ []));
         // ── Keyboard keys ─────────────────────────────────────────────────────
+        /** Key(s) that delete selected elements. `null` disables the shortcut. */
         this.deleteKeyCode = input(['Backspace', 'Delete'], ...(ngDevMode ? [{ debugName: "deleteKeyCode" }] : /* istanbul ignore next */ []));
+        /** Key held to start a box-selection. `null` disables. */
         this.selectionKeyCode = input('Shift', ...(ngDevMode ? [{ debugName: "selectionKeyCode" }] : /* istanbul ignore next */ []));
+        /** Key held to temporarily enable panning. `null` disables. */
         this.panActivationKeyCode = input(' ', ...(ngDevMode ? [{ debugName: "panActivationKeyCode" }] : /* istanbul ignore next */ []));
+        /** Key held to add to an existing selection instead of replacing it. `null` disables. */
         this.multiSelectionKeyCode = input(['Meta', 'Control'], ...(ngDevMode ? [{ debugName: "multiSelectionKeyCode" }] : /* istanbul ignore next */ []));
+        /** Key held to enable zooming when it's otherwise disabled. `null` disables. */
         this.zoomActivationKeyCode = input('Meta', ...(ngDevMode ? [{ debugName: "zoomActivationKeyCode" }] : /* istanbul ignore next */ []));
         // ── Auto-pan ──────────────────────────────────────────────────────────
+        /** Pan the viewport automatically when dragging a node near the edge. */
         this.autoPanOnNodeDrag = input(true, ...(ngDevMode ? [{ debugName: "autoPanOnNodeDrag" }] : /* istanbul ignore next */ []));
+        /** Pan the viewport automatically when dragging a connection near the edge. */
         this.autoPanOnConnect = input(true, ...(ngDevMode ? [{ debugName: "autoPanOnConnect" }] : /* istanbul ignore next */ []));
+        /** Pixels-per-frame speed for auto-pan. */
         this.autoPanSpeed = input(15, ...(ngDevMode ? [{ debugName: "autoPanSpeed" }] : /* istanbul ignore next */ []));
         // ── Distances ─────────────────────────────────────────────────────────
+        /** Radius (in px) within which a handle is considered a valid connection target. */
         this.connectionRadius = input(20, ...(ngDevMode ? [{ debugName: "connectionRadius" }] : /* istanbul ignore next */ []));
+        /** Radius (in px) within which an edge endpoint is considered a valid reconnection target. */
         this.reconnectRadius = input(10, ...(ngDevMode ? [{ debugName: "reconnectRadius" }] : /* istanbul ignore next */ []));
+        /** Minimum pixels the pointer must travel before a node drag begins. */
         this.nodeDragThreshold = input(1, ...(ngDevMode ? [{ debugName: "nodeDragThreshold" }] : /* istanbul ignore next */ []));
+        /** Minimum pixels the pointer must travel before a connection drag begins. */
         this.connectionDragThreshold = input(1, ...(ngDevMode ? [{ debugName: "connectionDragThreshold" }] : /* istanbul ignore next */ []));
+        /** Maximum pixels between mousedown and mouseup that still count as a pane click. */
         this.paneClickDistance = input(0, ...(ngDevMode ? [{ debugName: "paneClickDistance" }] : /* istanbul ignore next */ []));
+        /** Maximum pixels between mousedown and mouseup that still count as a node click. */
         this.nodeClickDistance = input(0, ...(ngDevMode ? [{ debugName: "nodeClickDistance" }] : /* istanbul ignore next */ []));
         // ── Appearance ────────────────────────────────────────────────────────
+        /** `'light'` | `'dark'` | `'system'`. When `'system'`, resolves via `prefers-color-scheme`. */
         this.colorMode = input('light', ...(ngDevMode ? [{ debugName: "colorMode" }] : /* istanbul ignore next */ []));
+        /** Raise a node's `z-index` when selected. */
         this.elevateNodesOnSelect = input(true, ...(ngDevMode ? [{ debugName: "elevateNodesOnSelect" }] : /* istanbul ignore next */ []));
+        /** Raise an edge's `z-index` when selected. */
         this.elevateEdgesOnSelect = input(false, ...(ngDevMode ? [{ debugName: "elevateEdgesOnSelect" }] : /* istanbul ignore next */ []));
+        /** Skip rendering nodes/edges outside the viewport (expensive graphs benefit). */
         this.onlyRenderVisibleElements = input(false, ...(ngDevMode ? [{ debugName: "onlyRenderVisibleElements" }] : /* istanbul ignore next */ []));
+        /** `'basic'` flat layering or `'auto'` based on selection and connection state. */
         this.zIndexMode = input('basic', ...(ngDevMode ? [{ debugName: "zIndexMode" }] : /* istanbul ignore next */ []));
+        /** `[x, y]` origin within a node that its `position` refers to (0 = top-left, 0.5 = center). */
         this.nodeOrigin = input([0, 0], ...(ngDevMode ? [{ debugName: "nodeOrigin" }] : /* istanbul ignore next */ []));
+        /** Default fill color for SVG edge markers. */
         this.defaultMarkerColor = input('#b1b1b7', ...(ngDevMode ? [{ debugName: "defaultMarkerColor" }] : /* istanbul ignore next */ []));
         // ── CSS class names ───────────────────────────────────────────────────
+        /** Elements with this class prevent node dragging when interacted with. */
         this.noDragClassName = input('nodrag', ...(ngDevMode ? [{ debugName: "noDragClassName" }] : /* istanbul ignore next */ []));
+        /** Elements with this class prevent wheel/pinch zooming when scrolled. */
         this.noWheelClassName = input('nowheel', ...(ngDevMode ? [{ debugName: "noWheelClassName" }] : /* istanbul ignore next */ []));
+        /** Elements with this class prevent pane panning when dragged. */
         this.noPanClassName = input('nopan', ...(ngDevMode ? [{ debugName: "noPanClassName" }] : /* istanbul ignore next */ []));
         // ── Accessibility ─────────────────────────────────────────────────────
+        /** Disable all keyboard interaction (arrow-key move, delete, select-all). */
         this.disableKeyboardA11y = input(false, ...(ngDevMode ? [{ debugName: "disableKeyboardA11y" }] : /* istanbul ignore next */ []));
+        /** Overrides for ARIA labels and live-region announcements. */
         this.ariaLabelConfig = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelConfig" }] : /* istanbul ignore next */ []));
         // ── Validation ────────────────────────────────────────────────────────
+        /** Callback that decides whether a proposed `Connection` is allowed. */
         this.isValidConnection = input(...(ngDevMode ? [undefined, { debugName: "isValidConnection" }] : /* istanbul ignore next */ []));
         // ── Pro ────────────────────────────────────────────────────────────────
+        /** Reserved options object (no-op in the open-source build). */
         this.proOptions = input(...(ngDevMode ? [undefined, { debugName: "proOptions" }] : /* istanbul ignore next */ []));
+        /** Where the library attribution badge is placed. */
         this.attributionPosition = input('bottom-right', ...(ngDevMode ? [{ debugName: "attributionPosition" }] : /* istanbul ignore next */ []));
+        /** Hide the library attribution badge entirely. */
         this.hideAttribution = input(false, ...(ngDevMode ? [{ debugName: "hideAttribution" }] : /* istanbul ignore next */ []));
         // ── ID ────────────────────────────────────────────────────────────────
+        /** Unique id for this flow instance; used to namespace DOM ids when mounting multiple flows. */
         this.flowId = input(undefined, { ...(ngDevMode ? { debugName: "flowId" } : /* istanbul ignore next */ {}), alias: 'id' });
         // ── Debug ─────────────────────────────────────────────────────────────
+        /** Log internal state transitions to the console. */
         this.debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
         // ── Event outputs ─────────────────────────────────────────────────────
-        // State change events
+        /** Fires with an array of `NodeChange` whenever the internal node state is about to change. Apply with `applyNodeChanges`. */
         this.nodesChange = output({ alias: 'nodesChange' });
+        /** Fires with an array of `EdgeChange` whenever the internal edge state is about to change. Apply with `applyEdgeChanges`. */
         this.edgesChange = output({ alias: 'edgesChange' });
-        // Init
+        /** Fires once after the pan/zoom viewport is initialized. Payload is the `NgFlowService` for imperative calls. */
         this.init = output({ alias: 'init' });
-        // Node events
+        /** Single-click on a node. */
         this.nodeClick = output({ alias: 'nodeClick' });
+        /** Double-click on a node. */
         this.nodeDoubleClick = output({ alias: 'nodeDoubleClick' });
+        /** Pointer entered a node. */
         this.nodeMouseEnter = output({ alias: 'nodeMouseEnter' });
+        /** Pointer moved over a node. */
         this.nodeMouseMove = output({ alias: 'nodeMouseMove' });
+        /** Pointer left a node. */
         this.nodeMouseLeave = output({ alias: 'nodeMouseLeave' });
+        /** Right-click on a node. */
         this.nodeContextMenu = output({ alias: 'nodeContextMenu' });
+        /** A node drag started. `nodes` contains all nodes being dragged (for multi-select). */
         this.nodeDragStart = output({ alias: 'nodeDragStart' });
+        /** A node drag is in progress (fires per pointer move). */
         this.nodeDrag = output({ alias: 'nodeDrag' });
+        /** A node drag ended. */
         this.nodeDragStop = output({ alias: 'nodeDragStop' });
-        // Edge events
+        /** Single-click on an edge. */
         this.edgeClick = output({ alias: 'edgeClick' });
+        /** Double-click on an edge. */
         this.edgeDoubleClick = output({ alias: 'edgeDoubleClick' });
+        /** Right-click on an edge. */
         this.edgeContextMenu = output({ alias: 'edgeContextMenu' });
+        /** Pointer entered an edge. */
         this.edgeMouseEnter = output({ alias: 'edgeMouseEnter' });
+        /** Pointer moved over an edge. */
         this.edgeMouseMove = output({ alias: 'edgeMouseMove' });
+        /** Pointer left an edge. */
         this.edgeMouseLeave = output({ alias: 'edgeMouseLeave' });
-        // Connection events
+        /** A new connection was completed. Pair with `addEdge` to append it to `edges`. */
         this.connect = output({ alias: 'connect' });
+        /** A drag-to-connect started on a handle. */
         this.connectStart = output({ alias: 'connectStart' });
+        /** A drag-to-connect ended (regardless of whether it produced a valid connection). */
         this.connectEnd = output({ alias: 'connectEnd' });
-        // Click-connect events
+        /** The first click of a click-to-connect interaction landed on a handle. */
         this.clickConnectStart = output({ alias: 'clickConnectStart' });
+        /** The second click of a click-to-connect interaction landed (on any handle or elsewhere). */
         this.clickConnectEnd = output({ alias: 'clickConnectEnd' });
-        // Reconnection events
+        /** An existing edge was dragged to a new endpoint. Pair with `reconnectEdge` to update `edges`. */
         this.reconnect = output({ alias: 'reconnect' });
+        /** A reconnection drag on an edge endpoint started. */
         this.reconnectStart = output({ alias: 'reconnectStart' });
+        /** A reconnection drag ended; includes the final `connectionState`. */
         this.reconnectEnd = output({ alias: 'reconnectEnd' });
-        // Pane events
+        /** Click on the empty pane (not on a node, edge, or handle). */
         this.paneClick = output({ alias: 'paneClick' });
+        /** Right-click on the empty pane. */
         this.paneContextMenu = output({ alias: 'paneContextMenu' });
+        /** Pointer entered the pane. */
         this.paneMouseEnter = output({ alias: 'paneMouseEnter' });
+        /** Pointer moved over the pane. */
         this.paneMouseMove = output({ alias: 'paneMouseMove' });
+        /** Pointer left the pane. */
         this.paneMouseLeave = output({ alias: 'paneMouseLeave' });
+        /** Scroll wheel on the pane (only fires when `panOnScroll` is enabled). */
         this.paneScroll = output({ alias: 'paneScroll' });
-        // Viewport events
+        /** A pan/zoom interaction started. */
         this.moveStart = output({ alias: 'moveStart' });
+        /** A pan/zoom interaction is in progress (fires per frame). */
         this.move = output({ alias: 'move' });
+        /** A pan/zoom interaction ended. */
         this.moveEnd = output({ alias: 'moveEnd' });
+        /** Fires with the new `Viewport` after any pan/zoom change. */
         this.viewportChange = output({ alias: 'viewportChange' });
-        // Selection events
+        /** Fires whenever the set of selected nodes/edges changes. */
         this.selectionChange = output({ alias: 'selectionChange' });
+        /** A drag of the current multi-selection started. */
         this.selectionDragStart = output({ alias: 'selectionDragStart' });
+        /** A drag of the current multi-selection is in progress. */
         this.selectionDrag = output({ alias: 'selectionDrag' });
+        /** A drag of the current multi-selection ended. */
         this.selectionDragStop = output({ alias: 'selectionDragStop' });
+        /** A box-selection gesture started. */
         this.selectionStart = output({ alias: 'selectionStart' });
+        /** A box-selection gesture ended. */
         this.selectionEnd = output({ alias: 'selectionEnd' });
+        /** Right-click on the current multi-selection. */
         this.selectionContextMenu = output({ alias: 'selectionContextMenu' });
-        // Delete events
+        /** Fires with the set of nodes about to be deleted (after `onBeforeDelete` approved). */
         this.nodesDelete = output({ alias: 'nodesDelete' });
+        /** Fires with the set of edges about to be deleted. */
         this.edgesDelete = output({ alias: 'edgesDelete' });
+        /** Combined `(delete)` output firing once with both deleted `nodes` and `edges`. */
         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
+        /** Fires when the store reports an internal validation or consistency 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)
+        /** Reserved — fires when auto-pan begins. Not yet wired. */
         this.autoPanStart = output({ alias: 'autoPanStart' });
+        /** Reserved — fires when auto-pan ends. Not yet wired. */
         this.autoPanEnd = output({ alias: 'autoPanEnd' });
         this.lastNodesRef = null;
         this.lastEdgesRef = null;
@@ -481,13 +622,11 @@ export class NgFlowComponent {
                 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);
-                });
+                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 });
@@ -522,7 +661,7 @@ export class NgFlowComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NgFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgFlowComponent, isStandalone: true, selector: "ng-flow", inputs: { nodesModel: { classPropertyName: "nodesModel", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, edgesModel: { classPropertyName: "edgesModel", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null }, viewportModel: { classPropertyName: "viewportModel", publicName: "viewport", isSignal: true, isRequired: false, transformFunction: null }, defaultNodes: { classPropertyName: "defaultNodes", publicName: "defaultNodes", isSignal: true, isRequired: false, transformFunction: null }, defaultEdges: { classPropertyName: "defaultEdges", publicName: "defaultEdges", isSignal: true, isRequired: false, transformFunction: null }, defaultViewport: { classPropertyName: "defaultViewport", publicName: "defaultViewport", isSignal: true, isRequired: false, transformFunction: null }, nodeTypes: { classPropertyName: "nodeTypes", publicName: "nodeTypes", isSignal: true, isRequired: false, transformFunction: null }, edgeTypes: { classPropertyName: "edgeTypes", publicName: "edgeTypes", isSignal: true, isRequired: false, transformFunction: null }, defaultEdgeOptions: { classPropertyName: "defaultEdgeOptions", publicName: "defaultEdgeOptions", isSignal: true, isRequired: false, transformFunction: null }, connectionMode: { classPropertyName: "connectionMode", publicName: "connectionMode", isSignal: true, isRequired: false, transformFunction: null }, connectionLineType: { classPropertyName: "connectionLineType", publicName: "connectionLineType", isSignal: true, isRequired: false, transformFunction: null }, connectionLineComponent: { classPropertyName: "connectionLineComponent", publicName: "connectionLineComponent", isSignal: true, isRequired: false, transformFunction: null }, connectionLineStyle: { classPropertyName: "connectionLineStyle", publicName: "connectionLineStyle", isSignal: true, isRequired: false, transformFunction: null }, connectionLineContainerStyle: { classPropertyName: "connectionLineContainerStyle", publicName: "connectionLineContainerStyle", isSignal: true, isRequired: false, transformFunction: null }, widthInput: { classPropertyName: "widthInput", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, heightInput: { classPropertyName: "heightInput", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, nodesDraggable: { classPropertyName: "nodesDraggable", publicName: "nodesDraggable", isSignal: true, isRequired: false, transformFunction: null }, nodesConnectable: { classPropertyName: "nodesConnectable", publicName: "nodesConnectable", isSignal: true, isRequired: false, transformFunction: null }, nodesFocusable: { classPropertyName: "nodesFocusable", publicName: "nodesFocusable", isSignal: true, isRequired: false, transformFunction: null }, edgesFocusable: { classPropertyName: "edgesFocusable", publicName: "edgesFocusable", isSignal: true, isRequired: false, transformFunction: null }, edgesReconnectable: { classPropertyName: "edgesReconnectable", publicName: "edgesReconnectable", isSignal: true, isRequired: false, transformFunction: null }, elementsSelectable: { classPropertyName: "elementsSelectable", publicName: "elementsSelectable", isSignal: true, isRequired: false, transformFunction: null }, selectNodesOnDrag: { classPropertyName: "selectNodesOnDrag", publicName: "selectNodesOnDrag", isSignal: true, isRequired: false, transformFunction: null }, connectOnClick: { classPropertyName: "connectOnClick", publicName: "connectOnClick", isSignal: true, isRequired: false, transformFunction: null }, panOnDrag: { classPropertyName: "panOnDrag", publicName: "panOnDrag", isSignal: true, isRequired: false, transformFunction: null }, panOnScroll: { classPropertyName: "panOnScroll", publicName: "panOnScroll", isSignal: true, isRequired: false, transformFunction: null }, panOnScrollMode: { classPropertyName: "panOnScrollMode", publicName: "panOnScrollMode", isSignal: true, isRequired: false, transformFunction: null }, panOnScrollSpeed: { classPropertyName: "panOnScrollSpeed", publicName: "panOnScrollSpeed", isSignal: true, isRequired: false, transformFunction: null }, zoomOnScroll: { classPropertyName: "zoomOnScroll", publicName: "zoomOnScroll", isSignal: true, isRequired: false, transformFunction: null }, zoomOnPinch: { classPropertyName: "zoomOnPinch", publicName: "zoomOnPinch", isSignal: true, isRequired: false, transformFunction: null }, zoomOnDoubleClick: { classPropertyName: "zoomOnDoubleClick", publicName: "zoomOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null }, preventScrolling: { classPropertyName: "preventScrolling", publicName: "preventScrolling", isSignal: true, isRequired: false, transformFunction: null }, selectionOnDrag: { classPropertyName: "selectionOnDrag", publicName: "selectionOnDrag", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, translateExtent: { classPropertyName: "translateExtent", publicName: "translateExtent", isSignal: true, isRequired: false, transformFunction: null }, nodeExtent: { classPropertyName: "nodeExtent", publicName: "nodeExtent", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: true, isRequired: false, transformFunction: null }, fitView: { classPropertyName: "fitView", publicName: "fitView", isSignal: true, isRequired: false, transformFunction: null }, fitViewOptions: { classPropertyName: "fitViewOptions", publicName: "fitViewOptions", isSignal: true, isRequired: false, transformFunction: null }, deleteKeyCode: { classPropertyName: "deleteKeyCode", publicName: "deleteKeyCode", isSignal: true, isRequired: false, transformFunction: null }, selectionKeyCode: { classPropertyName: "selectionKeyCode", publicName: "selectionKeyCode", isSignal: true, isRequired: false, transformFunction: null }, panActivationKeyCode: { classPropertyName: "panActivationKeyCode", publicName: "panActivationKeyCode", isSignal: true, isRequired: false, transformFunction: null }, multiSelectionKeyCode: { classPropertyName: "multiSelectionKeyCode", publicName: "multiSelectionKeyCode", isSignal: true, isRequired: false, transformFunction: null }, zoomActivationKeyCode: { classPropertyName: "zoomActivationKeyCode", publicName: "zoomActivationKeyCode", isSignal: true, isRequired: false, transformFunction: null }, autoPanOnNodeDrag: { classPropertyName: "autoPanOnNodeDrag", publicName: "autoPanOnNodeDrag", isSignal: true, isRequired: false, transformFunction: null }, autoPanOnConnect: { classPropertyName: "autoPanOnConnect", publicName: "autoPanOnConnect", isSignal: true, isRequired: false, transformFunction: null }, autoPanSpeed: { classPropertyName: "autoPanSpeed", publicName: "autoPanSpeed", isSignal: true, isRequired: false, transformFunction: null }, connectionRadius: { classPropertyName: "connectionRadius", publicName: "connectionRadius", isSignal: true, isRequired: false, transformFunction: null }, reconnectRadius: { classPropertyName: "reconnectRadius", publicName: "reconnectRadius", isSignal: true, isRequired: false, transformFunction: null }, nodeDragThreshold: { classPropertyName: "nodeDragThreshold", publicName: "nodeDragThreshold", isSignal: true, isRequired: false, transformFunction: null }, connectionDragThreshold: { classPropertyName: "connectionDragThreshold", publicName: "connectionDragThreshold", isSignal: true, isRequired: false, transformFunction: null }, paneClickDistance: { classPropertyName: "paneClickDistance", publicName: "paneClickDistance", isSignal: true, isRequired: false, transformFunction: null }, nodeClickDistance: { classPropertyName: "nodeClickDistance", publicName: "nodeClickDistance", isSignal: true, isRequired: false, transformFunction: null }, colorMode: { classPropertyName: "colorMode", publicName: "colorMode", isSignal: true, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: true, isRequired: false, transformFunction: null }, elevateEdgesOnSelect: { classPropertyName: "elevateEdgesOnSelect", publicName: "elevateEdgesOnSelect", isSignal: true, isRequired: false, transformFunction: null }, onlyRenderVisibleElements: { classPropertyName: "onlyRenderVisibleElements", publicName: "onlyRenderVisibleElements", isSignal: true, isRequired: false, transformFunction: null }, zIndexMode: { classPropertyName: "zIndexMode", publicName: "zIndexMode", isSignal: true, isRequired: false, transformFunction: null }, nodeOrigin: { classPropertyName: "nodeOrigin", publicName: "nodeOrigin", isSignal: true, isRequired: false, transformFunction: null }, defaultMarkerColor: { classPropertyName: "defaultMarkerColor", publicName: "defaultMarkerColor", isSignal: true, isRequired: false, transformFunction: null }, noDragClassName: { classPropertyName: "noDragClassName", publicName: "noDragClassName", isSignal: true, isRequired: false, transformFunction: null }, noWheelClassName: { classPropertyName: "noWheelClassName", publicName: "noWheelClassName", isSignal: true, isRequired: false, transformFunction: null }, noPanClassName: { classPropertyName: "noPanClassName", publicName: "noPanClassName", isSignal: true, isRequired: false, transformFunction: null }, disableKeyboardA11y: { classPropertyName: "disableKeyboardA11y", publicName: "disableKeyboardA11y", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelConfig: { classPropertyName: "ariaLabelConfig", publicName: "ariaLabelConfig", isSignal: true, isRequired: false, transformFunction: null }, isValidConnection: { classPropertyName: "isValidConnection", publicName: "isValidConnection", isSignal: true, isRequired: false, transformFunction: null }, proOptions: { classPropertyName: "proOptions", publicName: "proOptions", isSignal: true, isRequired: false, transformFunction: null }, attributionPosition: { classPropertyName: "attributionPosition", publicName: "attributionPosition", isSignal: true, isRequired: false, transformFunction: null }, hideAttribution: { classPropertyName: "hideAttribution", publicName: "hideAttribution", isSignal: true, isRequired: false, transformFunction: null }, flowId: { classPropertyName: "flowId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, onBeforeDelete: { classPropertyName: "onBeforeDelete", publicName: "onBeforeDelete", isSignal: true, isRequired: false, transformFunction: null } }, 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" }, host: { attributes: { "role": "application" }, properties: { "class.dark": "resolvedColorMode() === \"dark\"", "class.light": "resolvedColorMode() === \"light\"", "style.width.px": "widthInput()", "style.height.px": "heightInput()" }, styleAttribute: "display: block; position: relative; overflow: hidden; width: 100%; height: 100%;", classAttribute: "ng-flow xy-flow" }, providers: [FlowStore, NgFlowService], queries: [{ propertyName: "nodeTypeDirectives", predicate: NgFlowNodeTypeDirective, isSignal: true }], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "paneRef", first: true, predicate: PaneComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NgFlowComponent, isStandalone: true, selector: "ng-flow", inputs: { nodesModel: { classPropertyName: "nodesModel", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, edgesModel: { classPropertyName: "edgesModel", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null }, viewportModel: { classPropertyName: "viewportModel", publicName: "viewport", isSignal: true, isRequired: false, transformFunction: null }, defaultNodes: { classPropertyName: "defaultNodes", publicName: "defaultNodes", isSignal: true, isRequired: false, transformFunction: null }, defaultEdges: { classPropertyName: "defaultEdges", publicName: "defaultEdges", isSignal: true, isRequired: false, transformFunction: null }, defaultViewport: { classPropertyName: "defaultViewport", publicName: "defaultViewport", isSignal: true, isRequired: false, transformFunction: null }, nodeTypes: { classPropertyName: "nodeTypes", publicName: "nodeTypes", isSignal: true, isRequired: false, transformFunction: null }, edgeTypes: { classPropertyName: "edgeTypes", publicName: "edgeTypes", isSignal: true, isRequired: false, transformFunction: null }, defaultEdgeOptions: { classPropertyName: "defaultEdgeOptions", publicName: "defaultEdgeOptions", isSignal: true, isRequired: false, transformFunction: null }, connectionMode: { classPropertyName: "connectionMode", publicName: "connectionMode", isSignal: true, isRequired: false, transformFunction: null }, connectionLineType: { classPropertyName: "connectionLineType", publicName: "connectionLineType", isSignal: true, isRequired: false, transformFunction: null }, connectionLineComponent: { classPropertyName: "connectionLineComponent", publicName: "connectionLineComponent", isSignal: true, isRequired: false, transformFunction: null }, connectionLineStyle: { classPropertyName: "connectionLineStyle", publicName: "connectionLineStyle", isSignal: true, isRequired: false, transformFunction: null }, connectionLineContainerStyle: { classPropertyName: "connectionLineContainerStyle", publicName: "connectionLineContainerStyle", isSignal: true, isRequired: false, transformFunction: null }, widthInput: { classPropertyName: "widthInput", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, heightInput: { classPropertyName: "heightInput", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, nodesDraggable: { classPropertyName: "nodesDraggable", publicName: "nodesDraggable", isSignal: true, isRequired: false, transformFunction: null }, nodesConnectable: { classPropertyName: "nodesConnectable", publicName: "nodesConnectable", isSignal: true, isRequired: false, transformFunction: null }, nodesFocusable: { classPropertyName: "nodesFocusable", publicName: "nodesFocusable", isSignal: true, isRequired: false, transformFunction: null }, edgesFocusable: { classPropertyName: "edgesFocusable", publicName: "edgesFocusable", isSignal: true, isRequired: false, transformFunction: null }, edgesReconnectable: { classPropertyName: "edgesReconnectable", publicName: "edgesReconnectable", isSignal: true, isRequired: false, transformFunction: null }, elementsSelectable: { classPropertyName: "elementsSelectable", publicName: "elementsSelectable", isSignal: true, isRequired: false, transformFunction: null }, selectNodesOnDrag: { classPropertyName: "selectNodesOnDrag", publicName: "selectNodesOnDrag", isSignal: true, isRequired: false, transformFunction: null }, connectOnClick: { classPropertyName: "connectOnClick", publicName: "connectOnClick", isSignal: true, isRequired: false, transformFunction: null }, panOnDrag: { classPropertyName: "panOnDrag", publicName: "panOnDrag", isSignal: true, isRequired: false, transformFunction: null }, panOnScroll: { classPropertyName: "panOnScroll", publicName: "panOnScroll", isSignal: true, isRequired: false, transformFunction: null }, panOnScrollMode: { classPropertyName: "panOnScrollMode", publicName: "panOnScrollMode", isSignal: true, isRequired: false, transformFunction: null }, panOnScrollSpeed: { classPropertyName: "panOnScrollSpeed", publicName: "panOnScrollSpeed", isSignal: true, isRequired: false, transformFunction: null }, zoomOnScroll: { classPropertyName: "zoomOnScroll", publicName: "zoomOnScroll", isSignal: true, isRequired: false, transformFunction: null }, zoomOnPinch: { classPropertyName: "zoomOnPinch", publicName: "zoomOnPinch", isSignal: true, isRequired: false, transformFunction: null }, zoomOnDoubleClick: { classPropertyName: "zoomOnDoubleClick", publicName: "zoomOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null }, preventScrolling: { classPropertyName: "preventScrolling", publicName: "preventScrolling", isSignal: true, isRequired: false, transformFunction: null }, selectionOnDrag: { classPropertyName: "selectionOnDrag", publicName: "selectionOnDrag", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, translateExtent: { classPropertyName: "translateExtent", publicName: "translateExtent", isSignal: true, isRequired: false, transformFunction: null }, nodeExtent: { classPropertyName: "nodeExtent", publicName: "nodeExtent", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: true, isRequired: false, transformFunction: null }, fitView: { classPropertyName: "fitView", publicName: "fitView", isSignal: true, isRequired: false, transformFunction: null }, fitViewOptions: { classPropertyName: "fitViewOptions", publicName: "fitViewOptions", isSignal: true, isRequired: false, transformFunction: null }, deleteKeyCode: { classPropertyName: "deleteKeyCode", publicName: "deleteKeyCode", isSignal: true, isRequired: false, transformFunction: null }, selectionKeyCode: { classPropertyName: "selectionKeyCode", publicName: "selectionKeyCode", isSignal: true, isRequired: false, transformFunction: null }, panActivationKeyCode: { classPropertyName: "panActivationKeyCode", publicName: "panActivationKeyCode", isSignal: true, isRequired: false, transformFunction: null }, multiSelectionKeyCode: { classPropertyName: "multiSelectionKeyCode", publicName: "multiSelectionKeyCode", isSignal: true, isRequired: false, transformFunction: null }, zoomActivationKeyCode: { classPropertyName: "zoomActivationKeyCode", publicName: "zoomActivationKeyCode", isSignal: true, isRequired: false, transformFunction: null }, autoPanOnNodeDrag: { classPropertyName: "autoPanOnNodeDrag", publicName: "autoPanOnNodeDrag", isSignal: true, isRequired: false, transformFunction: null }, autoPanOnConnect: { classPropertyName: "autoPanOnConnect", publicName: "autoPanOnConnect", isSignal: true, isRequired: false, transformFunction: null }, autoPanSpeed: { classPropertyName: "autoPanSpeed", publicName: "autoPanSpeed", isSignal: true, isRequired: false, transformFunction: null }, connectionRadius: { classPropertyName: "connectionRadius", publicName: "connectionRadius", isSignal: true, isRequired: false, transformFunction: null }, reconnectRadius: { classPropertyName: "reconnectRadius", publicName: "reconnectRadius", isSignal: true, isRequired: false, transformFunction: null }, nodeDragThreshold: { classPropertyName: "nodeDragThreshold", publicName: "nodeDragThreshold", isSignal: true, isRequired: false, transformFunction: null }, connectionDragThreshold: { classPropertyName: "connectionDragThreshold", publicName: "connectionDragThreshold", isSignal: true, isRequired: false, transformFunction: null }, paneClickDistance: { classPropertyName: "paneClickDistance", publicName: "paneClickDistance", isSignal: true, isRequired: false, transformFunction: null }, nodeClickDistance: { classPropertyName: "nodeClickDistance", publicName: "nodeClickDistance", isSignal: true, isRequired: false, transformFunction: null }, colorMode: { classPropertyName: "colorMode", publicName: "colorMode", isSignal: true, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: true, isRequired: false, transformFunction: null }, elevateEdgesOnSelect: { classPropertyName: "elevateEdgesOnSelect", publicName: "elevateEdgesOnSelect", isSignal: true, isRequired: false, transformFunction: null }, onlyRenderVisibleElements: { classPropertyName: "onlyRenderVisibleElements", publicName: "onlyRenderVisibleElements", isSignal: true, isRequired: false, transformFunction: null }, zIndexMode: { classPropertyName: "zIndexMode", publicName: "zIndexMode", isSignal: true, isRequired: false, transformFunction: null }, nodeOrigin: { classPropertyName: "nodeOrigin", publicName: "nodeOrigin", isSignal: true, isRequired: false, transformFunction: null }, defaultMarkerColor: { classPropertyName: "defaultMarkerColor", publicName: "defaultMarkerColor", isSignal: true, isRequired: false, transformFunction: null }, noDragClassName: { classPropertyName: "noDragClassName", publicName: "noDragClassName", isSignal: true, isRequired: false, transformFunction: null }, noWheelClassName: { classPropertyName: "noWheelClassName", publicName: "noWheelClassName", isSignal: true, isRequired: false, transformFunction: null }, noPanClassName: { classPropertyName: "noPanClassName", publicName: "noPanClassName", isSignal: true, isRequired: false, transformFunction: null }, disableKeyboardA11y: { classPropertyName: "disableKeyboardA11y", publicName: "disableKeyboardA11y", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelConfig: { classPropertyName: "ariaLabelConfig", publicName: "ariaLabelConfig", isSignal: true, isRequired: false, transformFunction: null }, isValidConnection: { classPropertyName: "isValidConnection", publicName: "isValidConnection", isSignal: true, isRequired: false, transformFunction: null }, proOptions: { classPropertyName: "proOptions", publicName: "proOptions", isSignal: true, isRequired: false, transformFunction: null }, attributionPosition: { classPropertyName: "attributionPosition", publicName: "attributionPosition", isSignal: true, isRequired: false, transformFunction: null }, hideAttribution: { classPropertyName: "hideAttribution", publicName: "hideAttribution", isSignal: true, isRequired: false, transformFunction: null }, flowId: { classPropertyName: "flowId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, onBeforeDelete: { classPropertyName: "onBeforeDelete", publicName: "onBeforeDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { 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" }, host: { attributes: { "role": "application" }, properties: { "class.dark": "resolvedColorMode() === \"dark\"", "class.light": "resolvedColorMode() === \"light\"", "style.width.px": "widthInput()", "style.height.px": "heightInput()" }, styleAttribute: "display: block; position: relative; overflow: hidden; width: 100%; height: 100%; isolation: isolate;", classAttribute: "ng-flow xy-flow" }, providers: [FlowStore, NgFlowService], queries: [{ propertyName: "nodeTypeDirectives", predicate: NgFlowNodeTypeDirective, isSignal: true }], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "paneRef", first: true, predicate: PaneComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       class="ng-flow__container xy-flow__container"
       #container
@@ -615,7 +754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[class.light]': 'resolvedColorMode() === "light"',
                         '[style.width.px]': 'widthInput()',
                         '[style.height.px]': 'heightInput()',
-                        'style': 'display: block; position: relative; overflow: hidden; width: 100%; height: 100%;',
+                        'style': 'display: block; position: relative; overflow: hidden; width: 100%; height: 100%; isolation: isolate;',
                     },
                     template: `
     <div
@@ -684,5 +823,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { 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"] }] } });
+        }], ctorParameters: () => [], propDecorators: { 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 }] }], edgesModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "edges", required: false }] }], viewportModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewport", required: false }] }], 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"] }] } });
 //# sourceMappingURL=ng-flow.component.js.map