@xxmachina/components 19.50.0 → 19.80.0

package/fesm2022/xxmachina-components-extras-flow.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { input, output, Directive, Component, inject, EnvironmentInjector, createComponent, Injectable, Input, ElementRef, ViewContainerRef, contentChildren, computed, effect, ViewEncapsulation } from '@angular/core';
+import { input, output, Directive, Input, inject, ElementRef, ViewContainerRef, contentChildren, computed, effect, ViewEncapsulation, Component } from '@angular/core';
 import { NgAtomicComponent } from '@ng-atomic/core';
 import * as React from 'react';
-import React__default, { useMemo, useRef, useEffect, memo, useState } from 'react';
+import React__default, { useRef, useEffect, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import ReactFlow, { useViewport, BackgroundVariant, MiniMap, Controls, Background, ReactFlowProvider, NodeResizer, Handle, Position } from 'reactflow';
+import ReactFlow, { useStore, useViewport, BackgroundVariant, MiniMap, Controls, Background, ReactFlowProvider, NodeResizer, Handle, Position } from 'reactflow';
 
 function arePropsEqual(prev, next) {
     return (prev.props.nodes === next.props.nodes &&
@@ -22,11 +22,41 @@ function arePropsEqual(prev, next) {
         prev.props.coordinateLabelInterval === next.props.coordinateLabelInterval);
 }
 
+const VisibleNodesReporter = ({ marginPx, onChange }) => {
+    const visibleIdsKey = useStore((s) => {
+        const [tx, ty, zoom] = s.transform;
+        const rect = {
+            x: (-marginPx - tx) / zoom,
+            y: (-marginPx - ty) / zoom,
+            width: (s.width + marginPx * 2) / zoom,
+            height: (s.height + marginPx * 2) / zoom,
+        };
+        const ids = [];
+        s.nodeInternals.forEach((n) => {
+            const pos = n.positionAbsolute ?? n.position;
+            const w = n.width;
+            const h = n.height;
+            const notInitialized = w == null || h == null;
+            const overlapX = Math.min(pos.x + (w ?? 0), rect.x + rect.width) - Math.max(pos.x, rect.x);
+            const overlapY = Math.min(pos.y + (h ?? 0), rect.y + rect.height) - Math.max(pos.y, rect.y);
+            if (notInitialized || n.dragging || (overlapX > 0 && overlapY > 0)) {
+                ids.push(n.id);
+            }
+        });
+        return ids.sort().join(' ');
+    });
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    useEffect(() => {
+        onChangeRef.current(visibleIdsKey ? visibleIdsKey.split(' ') : []);
+    }, [visibleIdsKey]);
+    return null;
+};
+
 const CoordinateLabels = ({ gap, interval }) => {
     const { x, y, zoom } = useViewport();
     const labels = useMemo(() => {
         const result = [];
-        // Calculate visible range based on viewport (assume 2000x1500 visible area)
         const viewWidth = 2000 / zoom;
         const viewHeight = 1500 / zoom;
         const startX = Math.floor(-x / zoom / gap / interval) * interval;
@@ -75,6 +105,7 @@ const ReactFlowWrapperComponent = ({ props }) => {
     const minimapStyle = {
         height: 120,
     };
+    const onVisibleNodesChange = props.onVisibleNodesChange;
     const mergedProps = {
         ...props,
         nodesDraggable: props.nodesDraggable !== false,
@@ -82,13 +113,12 @@ const ReactFlowWrapperComponent = ({ props }) => {
         elementsSelectable: props.elementsSelectable !== false,
         proOptions: { hideAttribution: true, ...props.proOptions },
     };
-    // Background settings with defaults
+    delete mergedProps.onVisibleNodesChange;
     const showBackground = props.showBackground !== false;
     const backgroundVariant = props.backgroundVariant ?? BackgroundVariant.Dots;
     const backgroundGap = props.backgroundGap ?? 16;
     const backgroundSize = props.backgroundSize ?? 1;
     const backgroundColor = props.backgroundColor;
-    // MiniMap and Controls are opt-in (hidden by default)
     const showMiniMap = props.showMiniMap === true;
     const showControls = props.showControls === true;
     const showCoordinateLabels = props.showCoordinateLabels === true;
@@ -111,22 +141,24 @@ const ReactFlowWrapperComponent = ({ props }) => {
         const gap = typeof backgroundGap === 'number' ? backgroundGap : backgroundGap[0];
         children.push(React.createElement(CoordinateLabels, { key: 'coordinates', gap, interval: coordinateLabelInterval }));
     }
+    if (onVisibleNodesChange) {
+        children.push(React.createElement(VisibleNodesReporter, {
+            key: 'visible-nodes-reporter',
+            marginPx: 200,
+            onChange: onVisibleNodesChange,
+        }));
+    }
     return React.createElement(ReactFlowProvider, null, React.createElement(ReactFlow, mergedProps, ...children));
 };
-// Memoize ReactFlowWrapper to prevent unnecessary re-renders
-// Re-render when nodes, edges, or background/coordinate settings change
 const ReactFlowWrapper = React.memo(ReactFlowWrapperComponent, arePropsEqual);
 
 class ReactFlowComponentStore {
-    // Signal inputs
     nodes = input(...(ngDevMode ? [undefined, { debugName: "nodes" }] : []));
     edges = input(...(ngDevMode ? [undefined, { debugName: "edges" }] : []));
     defaultNodes = input(...(ngDevMode ? [undefined, { debugName: "defaultNodes" }] : []));
     defaultEdges = input(...(ngDevMode ? [undefined, { debugName: "defaultEdges" }] : []));
     defaultEdgeOptions = input(...(ngDevMode ? [undefined, { debugName: "defaultEdgeOptions" }] : []));
-    // Node templates for custom rendering
     nodeTemplates = input(...(ngDevMode ? [undefined, { debugName: "nodeTemplates" }] : []));
-    // Signal inputs for configuration
     nodeTypes = input(...(ngDevMode ? [undefined, { debugName: "nodeTypes" }] : []));
     edgeTypes = input(...(ngDevMode ? [undefined, { debugName: "edgeTypes" }] : []));
     connectionLineType = input(...(ngDevMode ? [undefined, { debugName: "connectionLineType" }] : []));
@@ -181,7 +213,6 @@ class ReactFlowComponentStore {
     autoPanOnNodeDrag = input(...(ngDevMode ? [undefined, { debugName: "autoPanOnNodeDrag" }] : []));
     autoPanOnConnect = input(...(ngDevMode ? [undefined, { debugName: "autoPanOnConnect" }] : []));
     connectionRadius = input(...(ngDevMode ? [undefined, { debugName: "connectionRadius" }] : []));
-    // Background configuration
     backgroundVariant = input(...(ngDevMode ? [undefined, { debugName: "backgroundVariant" }] : []));
     backgroundGap = input(...(ngDevMode ? [undefined, { debugName: "backgroundGap" }] : []));
     backgroundColor = input(...(ngDevMode ? [undefined, { debugName: "backgroundColor" }] : []));
@@ -191,7 +222,6 @@ class ReactFlowComponentStore {
     showControls = input(...(ngDevMode ? [undefined, { debugName: "showControls" }] : []));
     showCoordinateLabels = input(...(ngDevMode ? [undefined, { debugName: "showCoordinateLabels" }] : []));
     coordinateLabelInterval = input(...(ngDevMode ? [undefined, { debugName: "coordinateLabelInterval" }] : []));
-    // Signal outputs for events
     onNodeClick = output();
     onNodeDoubleClick = output();
     onNodeMouseEnter = output();
@@ -240,96 +270,35 @@ class ReactFlowComponentStore {
     onPaneMouseLeave = output();
     onError = output();
     onNodeResizeEnd = output();
+    onVisibleNodesChange = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ReactFlowComponentStore, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: ReactFlowComponentStore, isStandalone: true, inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", 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 }, defaultEdgeOptions: { classPropertyName: "defaultEdgeOptions", publicName: "defaultEdgeOptions", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplates: { classPropertyName: "nodeTemplates", publicName: "nodeTemplates", 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 }, connectionLineType: { classPropertyName: "connectionLineType", publicName: "connectionLineType", isSignal: true, isRequired: false, transformFunction: null }, connectionLineStyle: { classPropertyName: "connectionLineStyle", publicName: "connectionLineStyle", isSignal: true, isRequired: false, transformFunction: null }, connectionLineComponent: { classPropertyName: "connectionLineComponent", publicName: "connectionLineComponent", isSignal: true, isRequired: false, transformFunction: null }, connectionLineContainerStyle: { classPropertyName: "connectionLineContainerStyle", publicName: "connectionLineContainerStyle", isSignal: true, isRequired: false, transformFunction: null }, connectionMode: { classPropertyName: "connectionMode", publicName: "connectionMode", 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 }, selectionOnDrag: { classPropertyName: "selectionOnDrag", publicName: "selectionOnDrag", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", 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 }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: true, isRequired: false, transformFunction: null }, onlyRenderVisibleElements: { classPropertyName: "onlyRenderVisibleElements", publicName: "onlyRenderVisibleElements", 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 }, nodeOrigin: { classPropertyName: "nodeOrigin", publicName: "nodeOrigin", isSignal: true, isRequired: false, transformFunction: null }, edgesFocusable: { classPropertyName: "edgesFocusable", publicName: "edgesFocusable", isSignal: true, isRequired: false, transformFunction: null }, initNodeOrigin: { classPropertyName: "initNodeOrigin", publicName: "initNodeOrigin", 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 }, panOnDrag: { classPropertyName: "panOnDrag", publicName: "panOnDrag", 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 }, defaultViewport: { classPropertyName: "defaultViewport", publicName: "defaultViewport", isSignal: true, isRequired: false, transformFunction: null }, translateExtent: { classPropertyName: "translateExtent", publicName: "translateExtent", isSignal: true, isRequired: false, transformFunction: null }, preventScrolling: { classPropertyName: "preventScrolling", publicName: "preventScrolling", isSignal: true, isRequired: false, transformFunction: null }, nodeExtent: { classPropertyName: "nodeExtent", publicName: "nodeExtent", isSignal: true, isRequired: false, transformFunction: null }, defaultMarkerColor: { classPropertyName: "defaultMarkerColor", publicName: "defaultMarkerColor", 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 }, panOnScroll: { classPropertyName: "panOnScroll", publicName: "panOnScroll", isSignal: true, isRequired: false, transformFunction: null }, panOnScrollSpeed: { classPropertyName: "panOnScrollSpeed", publicName: "panOnScrollSpeed", isSignal: true, isRequired: false, transformFunction: null }, panOnScrollMode: { classPropertyName: "panOnScrollMode", publicName: "panOnScrollMode", isSignal: true, isRequired: false, transformFunction: null }, zoomOnDoubleClick: { classPropertyName: "zoomOnDoubleClick", publicName: "zoomOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null }, edgeUpdaterRadius: { classPropertyName: "edgeUpdaterRadius", publicName: "edgeUpdaterRadius", 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 }, fitView: { classPropertyName: "fitView", publicName: "fitView", isSignal: true, isRequired: false, transformFunction: null }, fitViewOptions: { classPropertyName: "fitViewOptions", publicName: "fitViewOptions", isSignal: true, isRequired: false, transformFunction: null }, connectOnClick: { classPropertyName: "connectOnClick", publicName: "connectOnClick", isSignal: true, isRequired: false, transformFunction: null }, attributionPosition: { classPropertyName: "attributionPosition", publicName: "attributionPosition", isSignal: true, isRequired: false, transformFunction: null }, proOptions: { classPropertyName: "proOptions", publicName: "proOptions", 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 }, disableKeyboardA11y: { classPropertyName: "disableKeyboardA11y", publicName: "disableKeyboardA11y", 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 }, connectionRadius: { classPropertyName: "connectionRadius", publicName: "connectionRadius", isSignal: true, isRequired: false, transformFunction: null }, backgroundVariant: { classPropertyName: "backgroundVariant", publicName: "backgroundVariant", isSignal: true, isRequired: false, transformFunction: null }, backgroundGap: { classPropertyName: "backgroundGap", publicName: "backgroundGap", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, backgroundSize: { classPropertyName: "backgroundSize", publicName: "backgroundSize", isSignal: true, isRequired: false, transformFunction: null }, showBackground: { classPropertyName: "showBackground", publicName: "showBackground", isSignal: true, isRequired: false, transformFunction: null }, showMiniMap: { classPropertyName: "showMiniMap", publicName: "showMiniMap", isSignal: true, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, showCoordinateLabels: { classPropertyName: "showCoordinateLabels", publicName: "showCoordinateLabels", isSignal: true, isRequired: false, transformFunction: null }, coordinateLabelInterval: { classPropertyName: "coordinateLabelInterval", publicName: "coordinateLabelInterval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onNodeClick: "onNodeClick", onNodeDoubleClick: "onNodeDoubleClick", onNodeMouseEnter: "onNodeMouseEnter", onNodeMouseMove: "onNodeMouseMove", onNodeMouseLeave: "onNodeMouseLeave", onNodeContextMenu: "onNodeContextMenu", onNodeDragStart: "onNodeDragStart", onNodeDrag: "onNodeDrag", onNodeDragStop: "onNodeDragStop", onEdgeClick: "onEdgeClick", onEdgeUpdate: "onEdgeUpdate", onEdgeContextMenu: "onEdgeContextMenu", onEdgeMouseEnter: "onEdgeMouseEnter", onEdgeMouseMove: "onEdgeMouseMove", onEdgeMouseLeave: "onEdgeMouseLeave", onEdgeDoubleClick: "onEdgeDoubleClick", onEdgeUpdateStart: "onEdgeUpdateStart", onEdgeUpdateEnd: "onEdgeUpdateEnd", onNodesChange: "onNodesChange", onEdgesChange: "onEdgesChange", onNodesDelete: "onNodesDelete", onEdgesDelete: "onEdgesDelete", onSelectionDragStart: "onSelectionDragStart", onSelectionDrag: "onSelectionDrag", onSelectionDragStop: "onSelectionDragStop", onSelectionStart: "onSelectionStart", onSelectionEnd: "onSelectionEnd", onSelectionContextMenu: "onSelectionContextMenu", onConnect: "onConnect", onConnectStart: "onConnectStart", onConnectEnd: "onConnectEnd", onClickConnectStart: "onClickConnectStart", onClickConnectEnd: "onClickConnectEnd", onDragOver: "onDragOver", onDrop: "onDrop", onInit: "onInit", onMove: "onMove", onMoveStart: "onMoveStart", onMoveEnd: "onMoveEnd", onSelectionChange: "onSelectionChange", onPaneScroll: "onPaneScroll", onPaneClick: "onPaneClick", onPaneContextMenu: "onPaneContextMenu", onPaneMouseEnter: "onPaneMouseEnter", onPaneMouseMove: "onPaneMouseMove", onPaneMouseLeave: "onPaneMouseLeave", onError: "onError", onNodeResizeEnd: "onNodeResizeEnd" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: ReactFlowComponentStore, isStandalone: true, inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", 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 }, defaultEdgeOptions: { classPropertyName: "defaultEdgeOptions", publicName: "defaultEdgeOptions", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplates: { classPropertyName: "nodeTemplates", publicName: "nodeTemplates", 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 }, connectionLineType: { classPropertyName: "connectionLineType", publicName: "connectionLineType", isSignal: true, isRequired: false, transformFunction: null }, connectionLineStyle: { classPropertyName: "connectionLineStyle", publicName: "connectionLineStyle", isSignal: true, isRequired: false, transformFunction: null }, connectionLineComponent: { classPropertyName: "connectionLineComponent", publicName: "connectionLineComponent", isSignal: true, isRequired: false, transformFunction: null }, connectionLineContainerStyle: { classPropertyName: "connectionLineContainerStyle", publicName: "connectionLineContainerStyle", isSignal: true, isRequired: false, transformFunction: null }, connectionMode: { classPropertyName: "connectionMode", publicName: "connectionMode", 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 }, selectionOnDrag: { classPropertyName: "selectionOnDrag", publicName: "selectionOnDrag", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", 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 }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: true, isRequired: false, transformFunction: null }, onlyRenderVisibleElements: { classPropertyName: "onlyRenderVisibleElements", publicName: "onlyRenderVisibleElements", 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 }, nodeOrigin: { classPropertyName: "nodeOrigin", publicName: "nodeOrigin", isSignal: true, isRequired: false, transformFunction: null }, edgesFocusable: { classPropertyName: "edgesFocusable", publicName: "edgesFocusable", isSignal: true, isRequired: false, transformFunction: null }, initNodeOrigin: { classPropertyName: "initNodeOrigin", publicName: "initNodeOrigin", 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 }, panOnDrag: { classPropertyName: "panOnDrag", publicName: "panOnDrag", 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 }, defaultViewport: { classPropertyName: "defaultViewport", publicName: "defaultViewport", isSignal: true, isRequired: false, transformFunction: null }, translateExtent: { classPropertyName: "translateExtent", publicName: "translateExtent", isSignal: true, isRequired: false, transformFunction: null }, preventScrolling: { classPropertyName: "preventScrolling", publicName: "preventScrolling", isSignal: true, isRequired: false, transformFunction: null }, nodeExtent: { classPropertyName: "nodeExtent", publicName: "nodeExtent", isSignal: true, isRequired: false, transformFunction: null }, defaultMarkerColor: { classPropertyName: "defaultMarkerColor", publicName: "defaultMarkerColor", 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 }, panOnScroll: { classPropertyName: "panOnScroll", publicName: "panOnScroll", isSignal: true, isRequired: false, transformFunction: null }, panOnScrollSpeed: { classPropertyName: "panOnScrollSpeed", publicName: "panOnScrollSpeed", isSignal: true, isRequired: false, transformFunction: null }, panOnScrollMode: { classPropertyName: "panOnScrollMode", publicName: "panOnScrollMode", isSignal: true, isRequired: false, transformFunction: null }, zoomOnDoubleClick: { classPropertyName: "zoomOnDoubleClick", publicName: "zoomOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null }, edgeUpdaterRadius: { classPropertyName: "edgeUpdaterRadius", publicName: "edgeUpdaterRadius", 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 }, fitView: { classPropertyName: "fitView", publicName: "fitView", isSignal: true, isRequired: false, transformFunction: null }, fitViewOptions: { classPropertyName: "fitViewOptions", publicName: "fitViewOptions", isSignal: true, isRequired: false, transformFunction: null }, connectOnClick: { classPropertyName: "connectOnClick", publicName: "connectOnClick", isSignal: true, isRequired: false, transformFunction: null }, attributionPosition: { classPropertyName: "attributionPosition", publicName: "attributionPosition", isSignal: true, isRequired: false, transformFunction: null }, proOptions: { classPropertyName: "proOptions", publicName: "proOptions", 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 }, disableKeyboardA11y: { classPropertyName: "disableKeyboardA11y", publicName: "disableKeyboardA11y", 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 }, connectionRadius: { classPropertyName: "connectionRadius", publicName: "connectionRadius", isSignal: true, isRequired: false, transformFunction: null }, backgroundVariant: { classPropertyName: "backgroundVariant", publicName: "backgroundVariant", isSignal: true, isRequired: false, transformFunction: null }, backgroundGap: { classPropertyName: "backgroundGap", publicName: "backgroundGap", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, backgroundSize: { classPropertyName: "backgroundSize", publicName: "backgroundSize", isSignal: true, isRequired: false, transformFunction: null }, showBackground: { classPropertyName: "showBackground", publicName: "showBackground", isSignal: true, isRequired: false, transformFunction: null }, showMiniMap: { classPropertyName: "showMiniMap", publicName: "showMiniMap", isSignal: true, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, showCoordinateLabels: { classPropertyName: "showCoordinateLabels", publicName: "showCoordinateLabels", isSignal: true, isRequired: false, transformFunction: null }, coordinateLabelInterval: { classPropertyName: "coordinateLabelInterval", publicName: "coordinateLabelInterval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onNodeClick: "onNodeClick", onNodeDoubleClick: "onNodeDoubleClick", onNodeMouseEnter: "onNodeMouseEnter", onNodeMouseMove: "onNodeMouseMove", onNodeMouseLeave: "onNodeMouseLeave", onNodeContextMenu: "onNodeContextMenu", onNodeDragStart: "onNodeDragStart", onNodeDrag: "onNodeDrag", onNodeDragStop: "onNodeDragStop", onEdgeClick: "onEdgeClick", onEdgeUpdate: "onEdgeUpdate", onEdgeContextMenu: "onEdgeContextMenu", onEdgeMouseEnter: "onEdgeMouseEnter", onEdgeMouseMove: "onEdgeMouseMove", onEdgeMouseLeave: "onEdgeMouseLeave", onEdgeDoubleClick: "onEdgeDoubleClick", onEdgeUpdateStart: "onEdgeUpdateStart", onEdgeUpdateEnd: "onEdgeUpdateEnd", onNodesChange: "onNodesChange", onEdgesChange: "onEdgesChange", onNodesDelete: "onNodesDelete", onEdgesDelete: "onEdgesDelete", onSelectionDragStart: "onSelectionDragStart", onSelectionDrag: "onSelectionDrag", onSelectionDragStop: "onSelectionDragStop", onSelectionStart: "onSelectionStart", onSelectionEnd: "onSelectionEnd", onSelectionContextMenu: "onSelectionContextMenu", onConnect: "onConnect", onConnectStart: "onConnectStart", onConnectEnd: "onConnectEnd", onClickConnectStart: "onClickConnectStart", onClickConnectEnd: "onClickConnectEnd", onDragOver: "onDragOver", onDrop: "onDrop", onInit: "onInit", onMove: "onMove", onMoveStart: "onMoveStart", onMoveEnd: "onMoveEnd", onSelectionChange: "onSelectionChange", onPaneScroll: "onPaneScroll", onPaneClick: "onPaneClick", onPaneContextMenu: "onPaneContextMenu", onPaneMouseEnter: "onPaneMouseEnter", onPaneMouseMove: "onPaneMouseMove", onPaneMouseLeave: "onPaneMouseLeave", onError: "onError", onNodeResizeEnd: "onNodeResizeEnd", onVisibleNodesChange: "onVisibleNodesChange" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ReactFlowComponentStore, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
-        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], edges: [{ type: i0.Input, args: [{ isSignal: true, alias: "edges", required: false }] }], defaultNodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultNodes", required: false }] }], defaultEdges: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultEdges", required: false }] }], defaultEdgeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultEdgeOptions", required: false }] }], nodeTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplates", required: false }] }], nodeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTypes", required: false }] }], edgeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgeTypes", required: false }] }], connectionLineType: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineType", required: false }] }], connectionLineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineStyle", required: false }] }], connectionLineComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineComponent", required: false }] }], connectionLineContainerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineContainerStyle", required: false }] }], connectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionMode", required: false }] }], deleteKeyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteKeyCode", required: false }] }], selectionKeyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionKeyCode", required: false }] }], selectionOnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionOnDrag", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", 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 }] }], snapToGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToGrid", required: false }] }], snapGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapGrid", required: false }] }], onlyRenderVisibleElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyRenderVisibleElements", 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 }] }], nodeOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeOrigin", required: false }] }], edgesFocusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgesFocusable", required: false }] }], initNodeOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "initNodeOrigin", required: false }] }], elementsSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementsSelectable", required: false }] }], selectNodesOnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectNodesOnDrag", required: false }] }], panOnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "panOnDrag", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], defaultViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultViewport", required: false }] }], translateExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateExtent", required: false }] }], preventScrolling: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventScrolling", required: false }] }], nodeExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeExtent", required: false }] }], defaultMarkerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMarkerColor", required: false }] }], zoomOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOnScroll", required: false }] }], zoomOnPinch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOnPinch", required: false }] }], panOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "panOnScroll", required: false }] }], panOnScrollSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "panOnScrollSpeed", required: false }] }], panOnScrollMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "panOnScrollMode", required: false }] }], zoomOnDoubleClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOnDoubleClick", required: false }] }], edgeUpdaterRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgeUpdaterRadius", 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 }] }], fitView: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitView", required: false }] }], fitViewOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitViewOptions", required: false }] }], connectOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectOnClick", required: false }] }], attributionPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "attributionPosition", required: false }] }], proOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "proOptions", required: false }] }], elevateNodesOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevateNodesOnSelect", required: false }] }], elevateEdgesOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevateEdgesOnSelect", required: false }] }], disableKeyboardA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableKeyboardA11y", required: false }] }], autoPanOnNodeDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPanOnNodeDrag", required: false }] }], autoPanOnConnect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPanOnConnect", required: false }] }], connectionRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionRadius", required: false }] }], backgroundVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundVariant", required: false }] }], backgroundGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundGap", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], backgroundSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundSize", required: false }] }], showBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackground", required: false }] }], showMiniMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMiniMap", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], showCoordinateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCoordinateLabels", required: false }] }], coordinateLabelInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "coordinateLabelInterval", required: false }] }], onNodeClick: [{ type: i0.Output, args: ["onNodeClick"] }], onNodeDoubleClick: [{ type: i0.Output, args: ["onNodeDoubleClick"] }], onNodeMouseEnter: [{ type: i0.Output, args: ["onNodeMouseEnter"] }], onNodeMouseMove: [{ type: i0.Output, args: ["onNodeMouseMove"] }], onNodeMouseLeave: [{ type: i0.Output, args: ["onNodeMouseLeave"] }], onNodeContextMenu: [{ type: i0.Output, args: ["onNodeContextMenu"] }], onNodeDragStart: [{ type: i0.Output, args: ["onNodeDragStart"] }], onNodeDrag: [{ type: i0.Output, args: ["onNodeDrag"] }], onNodeDragStop: [{ type: i0.Output, args: ["onNodeDragStop"] }], onEdgeClick: [{ type: i0.Output, args: ["onEdgeClick"] }], onEdgeUpdate: [{ type: i0.Output, args: ["onEdgeUpdate"] }], onEdgeContextMenu: [{ type: i0.Output, args: ["onEdgeContextMenu"] }], onEdgeMouseEnter: [{ type: i0.Output, args: ["onEdgeMouseEnter"] }], onEdgeMouseMove: [{ type: i0.Output, args: ["onEdgeMouseMove"] }], onEdgeMouseLeave: [{ type: i0.Output, args: ["onEdgeMouseLeave"] }], onEdgeDoubleClick: [{ type: i0.Output, args: ["onEdgeDoubleClick"] }], onEdgeUpdateStart: [{ type: i0.Output, args: ["onEdgeUpdateStart"] }], onEdgeUpdateEnd: [{ type: i0.Output, args: ["onEdgeUpdateEnd"] }], onNodesChange: [{ type: i0.Output, args: ["onNodesChange"] }], onEdgesChange: [{ type: i0.Output, args: ["onEdgesChange"] }], onNodesDelete: [{ type: i0.Output, args: ["onNodesDelete"] }], onEdgesDelete: [{ type: i0.Output, args: ["onEdgesDelete"] }], onSelectionDragStart: [{ type: i0.Output, args: ["onSelectionDragStart"] }], onSelectionDrag: [{ type: i0.Output, args: ["onSelectionDrag"] }], onSelectionDragStop: [{ type: i0.Output, args: ["onSelectionDragStop"] }], onSelectionStart: [{ type: i0.Output, args: ["onSelectionStart"] }], onSelectionEnd: [{ type: i0.Output, args: ["onSelectionEnd"] }], onSelectionContextMenu: [{ type: i0.Output, args: ["onSelectionContextMenu"] }], onConnect: [{ type: i0.Output, args: ["onConnect"] }], onConnectStart: [{ type: i0.Output, args: ["onConnectStart"] }], onConnectEnd: [{ type: i0.Output, args: ["onConnectEnd"] }], onClickConnectStart: [{ type: i0.Output, args: ["onClickConnectStart"] }], onClickConnectEnd: [{ type: i0.Output, args: ["onClickConnectEnd"] }], onDragOver: [{ type: i0.Output, args: ["onDragOver"] }], onDrop: [{ type: i0.Output, args: ["onDrop"] }], onInit: [{ type: i0.Output, args: ["onInit"] }], onMove: [{ type: i0.Output, args: ["onMove"] }], onMoveStart: [{ type: i0.Output, args: ["onMoveStart"] }], onMoveEnd: [{ type: i0.Output, args: ["onMoveEnd"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], onPaneScroll: [{ type: i0.Output, args: ["onPaneScroll"] }], onPaneClick: [{ type: i0.Output, args: ["onPaneClick"] }], onPaneContextMenu: [{ type: i0.Output, args: ["onPaneContextMenu"] }], onPaneMouseEnter: [{ type: i0.Output, args: ["onPaneMouseEnter"] }], onPaneMouseMove: [{ type: i0.Output, args: ["onPaneMouseMove"] }], onPaneMouseLeave: [{ type: i0.Output, args: ["onPaneMouseLeave"] }], onError: [{ type: i0.Output, args: ["onError"] }], onNodeResizeEnd: [{ type: i0.Output, args: ["onNodeResizeEnd"] }] } });
-
-class NodeComponent {
-    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: NodeComponent, isStandalone: true, selector: "machina-task-node", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="task-node" [class]="'status-' + data()?.status">
-      <div class="task-header">
-        <span class="status-indicator"></span>
-        <span class="assignee">あああ{{ data()?.assignee }}</span>
-      </div>
-      <div class="task-label">{{ data()?.label }}</div>
-    </div>
-  `, isInline: true, styles: [":host .task-node{background:#fff;border:2px solid #ddd;border-radius:8px;padding:10px;min-width:200px;box-shadow:0 2px 4px #0000001a}:host .task-node.status-pending{border-color:#9e9e9e}:host .task-node.status-pending .status-indicator{background:#9e9e9e}:host .task-node.status-in_progress{border-color:#2196f3}:host .task-node.status-in_progress .status-indicator{background:#2196f3}:host .task-node.status-completed{border-color:#4caf50}:host .task-node.status-completed .status-indicator{background:#4caf50}:host .task-node.status-abandoned{border-color:#f44336}:host .task-node.status-abandoned .status-indicator{background:#f44336}:host .task-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}:host .status-indicator{width:8px;height:8px;border-radius:50%;background:#ddd}:host .assignee{font-size:12px;color:#666}:host .task-label{font-size:14px;font-weight:500;color:#333}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NodeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'machina-task-node', standalone: true, imports: [], template: `
-    <div class="task-node" [class]="'status-' + data()?.status">
-      <div class="task-header">
-        <span class="status-indicator"></span>
-        <span class="assignee">あああ{{ data()?.assignee }}</span>
-      </div>
-      <div class="task-label">{{ data()?.label }}</div>
-    </div>
-  `, styles: [":host .task-node{background:#fff;border:2px solid #ddd;border-radius:8px;padding:10px;min-width:200px;box-shadow:0 2px 4px #0000001a}:host .task-node.status-pending{border-color:#9e9e9e}:host .task-node.status-pending .status-indicator{background:#9e9e9e}:host .task-node.status-in_progress{border-color:#2196f3}:host .task-node.status-in_progress .status-indicator{background:#2196f3}:host .task-node.status-completed{border-color:#4caf50}:host .task-node.status-completed .status-indicator{background:#4caf50}:host .task-node.status-abandoned{border-color:#f44336}:host .task-node.status-abandoned .status-indicator{background:#f44336}:host .task-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}:host .status-indicator{width:8px;height:8px;border-radius:50%;background:#ddd}:host .assignee{font-size:12px;color:#666}:host .task-label{font-size:14px;font-weight:500;color:#333}\n"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], edges: [{ type: i0.Input, args: [{ isSignal: true, alias: "edges", required: false }] }], defaultNodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultNodes", required: false }] }], defaultEdges: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultEdges", required: false }] }], defaultEdgeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultEdgeOptions", required: false }] }], nodeTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplates", required: false }] }], nodeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTypes", required: false }] }], edgeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgeTypes", required: false }] }], connectionLineType: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineType", required: false }] }], connectionLineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineStyle", required: false }] }], connectionLineComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineComponent", required: false }] }], connectionLineContainerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionLineContainerStyle", required: false }] }], connectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionMode", required: false }] }], deleteKeyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteKeyCode", required: false }] }], selectionKeyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionKeyCode", required: false }] }], selectionOnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionOnDrag", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", 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 }] }], snapToGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToGrid", required: false }] }], snapGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapGrid", required: false }] }], onlyRenderVisibleElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyRenderVisibleElements", 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 }] }], nodeOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeOrigin", required: false }] }], edgesFocusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgesFocusable", required: false }] }], initNodeOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "initNodeOrigin", required: false }] }], elementsSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementsSelectable", required: false }] }], selectNodesOnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectNodesOnDrag", required: false }] }], panOnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "panOnDrag", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], defaultViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultViewport", required: false }] }], translateExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateExtent", required: false }] }], preventScrolling: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventScrolling", required: false }] }], nodeExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeExtent", required: false }] }], defaultMarkerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMarkerColor", required: false }] }], zoomOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOnScroll", required: false }] }], zoomOnPinch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOnPinch", required: false }] }], panOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "panOnScroll", required: false }] }], panOnScrollSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "panOnScrollSpeed", required: false }] }], panOnScrollMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "panOnScrollMode", required: false }] }], zoomOnDoubleClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOnDoubleClick", required: false }] }], edgeUpdaterRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgeUpdaterRadius", 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 }] }], fitView: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitView", required: false }] }], fitViewOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitViewOptions", required: false }] }], connectOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectOnClick", required: false }] }], attributionPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "attributionPosition", required: false }] }], proOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "proOptions", required: false }] }], elevateNodesOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevateNodesOnSelect", required: false }] }], elevateEdgesOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevateEdgesOnSelect", required: false }] }], disableKeyboardA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableKeyboardA11y", required: false }] }], autoPanOnNodeDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPanOnNodeDrag", required: false }] }], autoPanOnConnect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPanOnConnect", required: false }] }], connectionRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionRadius", required: false }] }], backgroundVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundVariant", required: false }] }], backgroundGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundGap", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], backgroundSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundSize", required: false }] }], showBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackground", required: false }] }], showMiniMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMiniMap", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], showCoordinateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCoordinateLabels", required: false }] }], coordinateLabelInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "coordinateLabelInterval", required: false }] }], onNodeClick: [{ type: i0.Output, args: ["onNodeClick"] }], onNodeDoubleClick: [{ type: i0.Output, args: ["onNodeDoubleClick"] }], onNodeMouseEnter: [{ type: i0.Output, args: ["onNodeMouseEnter"] }], onNodeMouseMove: [{ type: i0.Output, args: ["onNodeMouseMove"] }], onNodeMouseLeave: [{ type: i0.Output, args: ["onNodeMouseLeave"] }], onNodeContextMenu: [{ type: i0.Output, args: ["onNodeContextMenu"] }], onNodeDragStart: [{ type: i0.Output, args: ["onNodeDragStart"] }], onNodeDrag: [{ type: i0.Output, args: ["onNodeDrag"] }], onNodeDragStop: [{ type: i0.Output, args: ["onNodeDragStop"] }], onEdgeClick: [{ type: i0.Output, args: ["onEdgeClick"] }], onEdgeUpdate: [{ type: i0.Output, args: ["onEdgeUpdate"] }], onEdgeContextMenu: [{ type: i0.Output, args: ["onEdgeContextMenu"] }], onEdgeMouseEnter: [{ type: i0.Output, args: ["onEdgeMouseEnter"] }], onEdgeMouseMove: [{ type: i0.Output, args: ["onEdgeMouseMove"] }], onEdgeMouseLeave: [{ type: i0.Output, args: ["onEdgeMouseLeave"] }], onEdgeDoubleClick: [{ type: i0.Output, args: ["onEdgeDoubleClick"] }], onEdgeUpdateStart: [{ type: i0.Output, args: ["onEdgeUpdateStart"] }], onEdgeUpdateEnd: [{ type: i0.Output, args: ["onEdgeUpdateEnd"] }], onNodesChange: [{ type: i0.Output, args: ["onNodesChange"] }], onEdgesChange: [{ type: i0.Output, args: ["onEdgesChange"] }], onNodesDelete: [{ type: i0.Output, args: ["onNodesDelete"] }], onEdgesDelete: [{ type: i0.Output, args: ["onEdgesDelete"] }], onSelectionDragStart: [{ type: i0.Output, args: ["onSelectionDragStart"] }], onSelectionDrag: [{ type: i0.Output, args: ["onSelectionDrag"] }], onSelectionDragStop: [{ type: i0.Output, args: ["onSelectionDragStop"] }], onSelectionStart: [{ type: i0.Output, args: ["onSelectionStart"] }], onSelectionEnd: [{ type: i0.Output, args: ["onSelectionEnd"] }], onSelectionContextMenu: [{ type: i0.Output, args: ["onSelectionContextMenu"] }], onConnect: [{ type: i0.Output, args: ["onConnect"] }], onConnectStart: [{ type: i0.Output, args: ["onConnectStart"] }], onConnectEnd: [{ type: i0.Output, args: ["onConnectEnd"] }], onClickConnectStart: [{ type: i0.Output, args: ["onClickConnectStart"] }], onClickConnectEnd: [{ type: i0.Output, args: ["onClickConnectEnd"] }], onDragOver: [{ type: i0.Output, args: ["onDragOver"] }], onDrop: [{ type: i0.Output, args: ["onDrop"] }], onInit: [{ type: i0.Output, args: ["onInit"] }], onMove: [{ type: i0.Output, args: ["onMove"] }], onMoveStart: [{ type: i0.Output, args: ["onMoveStart"] }], onMoveEnd: [{ type: i0.Output, args: ["onMoveEnd"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], onPaneScroll: [{ type: i0.Output, args: ["onPaneScroll"] }], onPaneClick: [{ type: i0.Output, args: ["onPaneClick"] }], onPaneContextMenu: [{ type: i0.Output, args: ["onPaneContextMenu"] }], onPaneMouseEnter: [{ type: i0.Output, args: ["onPaneMouseEnter"] }], onPaneMouseMove: [{ type: i0.Output, args: ["onPaneMouseMove"] }], onPaneMouseLeave: [{ type: i0.Output, args: ["onPaneMouseLeave"] }], onError: [{ type: i0.Output, args: ["onError"] }], onNodeResizeEnd: [{ type: i0.Output, args: ["onNodeResizeEnd"] }], onVisibleNodesChange: [{ type: i0.Output, args: ["onVisibleNodesChange"] }] } });
 
-// Global reference to Angular app injector (will be set by ReactFlowComponent)
-let globalInjector = null;
-function setAngularContext(injector, appRef) {
-    globalInjector = injector;
+function isOutputLike(value) {
+    return !!value && typeof value.emit === 'function';
 }
-class NodeService {
-    componentCache = new Map();
-    injector = inject(EnvironmentInjector);
-    createNodeComponent(hostElement) {
-        if (this.componentCache.has(hostElement)) {
-            return this.componentCache.get(hostElement);
-        }
-        const component = createComponent(NodeComponent, {
-            environmentInjector: this.injector,
-            hostElement,
-        });
-        this.componentCache.set(hostElement, component);
-        return component;
+function buildOutputHandlers(store) {
+    const handlers = {};
+    for (const [key, value] of Object.entries(store)) {
+        if (!key.startsWith('on') || !isOutputLike(value))
+            continue;
+        handlers[key] = (...args) => {
+            value.emit(key === 'onError' ? args[0] : args);
+        };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NodeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NodeService, providedIn: 'root' });
+    return handlers;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NodeService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-const Node = ({ data }) => {
-    const containerRef = useRef(null);
-    const component = globalInjector?.get(NodeService).createNodeComponent(containerRef.current);
-    useEffect(() => component.setInput('data', data), [data]);
-    return (React__default.createElement("div", { ref: containerRef },
-        React__default.createElement(NodeResizer, { minWidth: 400, minHeight: 300, isVisible: true }),
-        React__default.createElement(Handle, { type: "target", position: Position.Left, style: { zIndex: 10 } }),
-        React__default.createElement(Handle, { type: "source", position: Position.Right, style: { zIndex: 10 } })));
-};
-var TaskNode = memo(Node);
-
-const GroupNode = ({ data }) => {
-    return (React__default.createElement("div", { className: "group-node" },
-        React__default.createElement(Handle, { type: "target", position: Position.Left }),
-        React__default.createElement("div", { className: "group-node-header" },
-            React__default.createElement("h3", null, data.label),
-            React__default.createElement("span", { className: "group-assignee" }, data.assignee)),
-        React__default.createElement(Handle, { type: "source", position: Position.Right })));
-};
-var GroupNode$1 = memo(GroupNode);
 
-function createTemplateNodeComponent(template, vcr, onNodeResizeEnd) {
+function createTemplateNodeComponent(template, vcr, onNodeResizeEnd, showHandles = true) {
     const TemplateNode = ({ data, selected, id }) => {
         const containerRef = useRef(null);
         const viewRefRef = useRef(null);
-        // resize ハンドル drag 中の即時反映用ローカル state。
-        // NodeResizer は onResize/onResizeEnd が wire up されないと、
-        // SVG handle だけ伸びて Angular template (中身) は元サイズのままになる。
         const [resizeOverride, setResizeOverride] = useState(null);
-        // 初回のみAngularビューを作成（破棄・再作成を防ぐ）
         useEffect(() => {
             const viewRef = vcr.createEmbeddedView(template, {});
             viewRef.rootNodes.forEach(node => containerRef.current.appendChild(node));
@@ -342,8 +311,7 @@ function createTemplateNodeComponent(template, vcr, onNodeResizeEnd) {
                     viewRefRef.current = null;
                 }
             };
-        }, []); // 空の依存配列 - 初回のみ実行
-        // dataが変更されたときはコンテキストのみ更新（ビューは再作成しない）
+        }, []);
         useEffect(() => {
             if (viewRefRef.current) {
                 viewRefRef.current.context = { $implicit: data, data };
@@ -351,36 +319,25 @@ function createTemplateNodeComponent(template, vcr, onNodeResizeEnd) {
             }
         }, [data]);
         const handleResize = (_event, params) => {
-            // drag の各 frame で wrapper div を伸縮 → Angular template も追従
             setResizeOverride({ width: params.width, height: params.height });
         };
         const handleResizeEnd = (_event, params) => {
-            // drag 完了。 server へ通知 → applyLayout で sizes/sizePinned 書き込み →
-            // round-trip で signal の node.style.width/height が新値になるため override は不要になる。
             setResizeOverride(null);
             if (onNodeResizeEnd) {
                 onNodeResizeEnd(id, params.width, params.height);
             }
         };
-        // resize 中は wrapper を強制サイズ、 通常時は親 (React Flow) が style.width/height を制御。
         const wrapperStyle = resizeOverride
             ? { width: resizeOverride.width, height: resizeOverride.height }
             : { width: '100%', height: '100%' };
         return (React__default.createElement("div", { ref: containerRef, style: wrapperStyle },
-            React__default.createElement(NodeResizer, { minWidth: 400, minHeight: 300, isVisible: true, onResize: handleResize, onResizeEnd: handleResizeEnd }),
-            React__default.createElement(Handle, { type: "target", position: data.targetPosition ?? Position.Left, style: { zIndex: 10 } }),
-            React__default.createElement(Handle, { type: "source", position: data.sourcePosition ?? Position.Right, style: { zIndex: 10 } })));
+            React__default.createElement(NodeResizer, { minWidth: 400, minHeight: 300, isVisible: true, lineStyle: { borderColor: 'transparent' }, handleStyle: { opacity: 0 }, onResize: handleResize, onResizeEnd: handleResizeEnd }),
+            React__default.createElement(Handle, { type: "target", position: data.targetPosition ?? Position.Left, style: { zIndex: 10, opacity: showHandles ? 1 : 0 } }),
+            React__default.createElement(Handle, { type: "source", position: data.sourcePosition ?? Position.Right, style: { zIndex: 10, opacity: showHandles ? 1 : 0 } })));
     };
-    // memoなしで返す（デバッグ用：renameが動作するか確認）
-    // 動作確認後、適切なmemo戦略を検討
     return TemplateNode;
 }
 
-const NODE_TYPES = {
-    task: TaskNode,
-    group: GroupNode$1,
-};
-
 class FlowNodeDirective {
     template;
     type;
@@ -412,16 +369,12 @@ class ReactFlowComponent extends NgAtomicComponent {
     contentNodeTemplates = contentChildren(FlowNodeDirective, ...(ngDevMode ? [{ debugName: "contentNodeTemplates" }] : []));
     _touchCleanup = null;
     _ancestorScrollCleanup = null;
-    /**
-     * PR-G fix: drag end 直後の server-driven snap back を react flow internal state に強制反映する用。
-     * effect 内で常時 setNodes 呼ぶと updateNodeDimensions chain で NG0103 大量発生するため、
-     * onNodeDragStop event hook で drag 完了 800ms 後に one-shot で呼ぶ局所化。
-     */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     _instance = null;
     _dragEndSnapBackTimer = null;
     enableTouchPassthrough = input(false, ...(ngDevMode ? [{ debugName: "enableTouchPassthrough" }] : []));
-    /** Pre-computed React props — signal依存を分離してrender()を軽量化 */
+    handlesVisible = input(true, ...(ngDevMode ? [{ debugName: "handlesVisible" }] : []));
+    outputHandlers = buildOutputHandlers(this.store);
     reactFlowProps = computed(() => ({
         ...Object.entries(this.store)
             .filter(([key, value]) => !key.startsWith('on') && typeof value === 'function' && key !== 'nodeTypes' && key !== 'nodeTemplates')
@@ -430,20 +383,12 @@ class ReactFlowComponent extends NgAtomicComponent {
             return acc;
         }, {}),
         nodeTypes: this.nodeTypes(),
-        ...Object.entries(this.store)
-            .filter(([key, value]) => key.startsWith('on') && value && typeof value.emit === 'function')
-            .reduce((handlers, [eventName, output]) => {
-            handlers[eventName] = (...args) => {
-                const emitValue = eventName === 'onError' ? args[0] : args;
-                output.emit(emitValue);
-            };
-            return handlers;
-        }, {})
+        ...this.outputHandlers,
     }), ...(ngDevMode ? [{ debugName: "reactFlowProps" }] : []));
     constructor() {
         super();
         effect(() => this.render());
-        effect(() => this.applyTransitionClass()); // DOM操作をrender()ホットパスから分離
+        effect(() => this.applyTransitionClass());
         effect(() => {
             if (this.enableTouchPassthrough()) {
                 this.setupTouchPassthrough();
@@ -452,14 +397,10 @@ class ReactFlowComponent extends NgAtomicComponent {
                 this.cleanupTouchPassthrough();
             }
         });
-        // PR-G fix: onInit event で react flow instance を取得して保持。
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.store.onInit?.subscribe((args) => {
             this._instance = Array.isArray(args) ? args[0] : args;
         });
-        // PR-G fix: drag end 後 800ms に server-driven snap back を強制反映 (one-shot)。
-        // 副作用を drag end 直後の局所範囲のみに限定し、 effect 常時 setNodes による
-        // NG0103 (updateNodeDimensions → output emit chain → CD cycle 中 signal 変化) を回避。
         this.store.onNodeDragStop?.subscribe(() => {
             if (this._dragEndSnapBackTimer)
                 clearTimeout(this._dragEndSnapBackTimer);
@@ -526,13 +467,6 @@ class ReactFlowComponent extends NgAtomicComponent {
             this.store.onNodeClick?.emit([new MouseEvent('click', { clientX, clientY }), node]);
         }
     }
-    /**
-     * 祖先要素のスクロールをロックする。
-     * overflow:clip は .react-flow 自体のスクロールを防ぐが、
-     * 祖先のスクロールコンテナ（例: ScrollFrame の .contents）には効かない。
-     * ノード内 input 入力時のブラウザ自動スクロールを防ぐため、
-     * 全祖先の scroll イベントを監視して即座にリセットする。
-     */
     lockAncestorScroll() {
         const cleanups = [];
         let parent = this.el.nativeElement.parentElement;
@@ -555,10 +489,9 @@ class ReactFlowComponent extends NgAtomicComponent {
         if (templates) {
             templates.forEach((template) => {
                 if (!this._nodeTypesCache[template.type]) {
-                    // onNodeResizeEndコールバックを渡す
                     this._nodeTypesCache[template.type] = createTemplateNodeComponent(template.template, this.vcr, (nodeId, width, height) => {
                         this.store.onNodeResizeEnd?.emit({ nodeId, width, height });
-                    });
+                    }, this.handlesVisible());
                 }
                 nodeTypes[template.type] = this._nodeTypesCache[template.type];
             });
@@ -569,7 +502,6 @@ class ReactFlowComponent extends NgAtomicComponent {
         const nodes = this.store.nodes?.();
         const positionKey = nodes?.map(n => `${n.id}:${n.position?.x},${n.position?.y}:${n.style?.width},${n.style?.height}`).join('|') ?? '';
         if (this._prevNodePositions !== null && this._prevNodePositions !== positionKey) {
-            // 複数ノードの位置が一括で変わった場合のみtransitionを適用（autolayout検知）
             const prevPositions = this._prevNodePositions.split('|');
             const currPositions = positionKey.split('|');
             const changedCount = prevPositions.filter((p, i) => p !== currPositions[i]).length;
@@ -592,7 +524,7 @@ class ReactFlowComponent extends NgAtomicComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ReactFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.6", type: ReactFlowComponent, isStandalone: true, selector: "machina-react-flow", inputs: { enableTouchPassthrough: { classPropertyName: "enableTouchPassthrough", publicName: "enableTouchPassthrough", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentNodeTemplates", predicate: FlowNodeDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: ReactFlowComponentStore, inputs: ["nodes", "nodes", "edges", "edges", "defaultNodes", "defaultNodes", "defaultEdges", "defaultEdges", "defaultEdgeOptions", "defaultEdgeOptions", "nodeTemplates", "nodeTemplates", "nodeTypes", "nodeTypes", "edgeTypes", "edgeTypes", "connectionLineType", "connectionLineType", "connectionLineStyle", "connectionLineStyle", "connectionLineComponent", "connectionLineComponent", "connectionLineContainerStyle", "connectionLineContainerStyle", "connectionMode", "connectionMode", "deleteKeyCode", "deleteKeyCode", "selectionKeyCode", "selectionKeyCode", "selectionOnDrag", "selectionOnDrag", "selectionMode", "selectionMode", "panActivationKeyCode", "panActivationKeyCode", "multiSelectionKeyCode", "multiSelectionKeyCode", "zoomActivationKeyCode", "zoomActivationKeyCode", "snapToGrid", "snapToGrid", "snapGrid", "snapGrid", "onlyRenderVisibleElements", "onlyRenderVisibleElements", "nodesDraggable", "nodesDraggable", "nodesConnectable", "nodesConnectable", "nodesFocusable", "nodesFocusable", "nodeOrigin", "nodeOrigin", "edgesFocusable", "edgesFocusable", "initNodeOrigin", "initNodeOrigin", "elementsSelectable", "elementsSelectable", "selectNodesOnDrag", "selectNodesOnDrag", "panOnDrag", "panOnDrag", "minZoom", "minZoom", "maxZoom", "maxZoom", "defaultViewport", "defaultViewport", "translateExtent", "translateExtent", "preventScrolling", "preventScrolling", "nodeExtent", "nodeExtent", "defaultMarkerColor", "defaultMarkerColor", "zoomOnScroll", "zoomOnScroll", "zoomOnPinch", "zoomOnPinch", "panOnScroll", "panOnScroll", "panOnScrollSpeed", "panOnScrollSpeed", "panOnScrollMode", "panOnScrollMode", "zoomOnDoubleClick", "zoomOnDoubleClick", "edgeUpdaterRadius", "edgeUpdaterRadius", "noDragClassName", "noDragClassName", "noWheelClassName", "noWheelClassName", "noPanClassName", "noPanClassName", "fitView", "fitView", "fitViewOptions", "fitViewOptions", "connectOnClick", "connectOnClick", "attributionPosition", "attributionPosition", "proOptions", "proOptions", "elevateNodesOnSelect", "elevateNodesOnSelect", "elevateEdgesOnSelect", "elevateEdgesOnSelect", "disableKeyboardA11y", "disableKeyboardA11y", "autoPanOnNodeDrag", "autoPanOnNodeDrag", "autoPanOnConnect", "autoPanOnConnect", "connectionRadius", "connectionRadius", "backgroundVariant", "backgroundVariant", "backgroundGap", "backgroundGap", "backgroundColor", "backgroundColor", "backgroundSize", "backgroundSize", "showBackground", "showBackground", "showMiniMap", "showMiniMap", "showControls", "showControls", "showCoordinateLabels", "showCoordinateLabels", "coordinateLabelInterval", "coordinateLabelInterval"], outputs: ["onNodeClick", "onNodeClick", "onNodeDoubleClick", "onNodeDoubleClick", "onNodeMouseEnter", "onNodeMouseEnter", "onNodeMouseMove", "onNodeMouseMove", "onNodeMouseLeave", "onNodeMouseLeave", "onNodeContextMenu", "onNodeContextMenu", "onNodeDragStart", "onNodeDragStart", "onNodeDrag", "onNodeDrag", "onNodeDragStop", "onNodeDragStop", "onEdgeClick", "onEdgeClick", "onEdgeUpdate", "onEdgeUpdate", "onEdgeContextMenu", "onEdgeContextMenu", "onEdgeMouseEnter", "onEdgeMouseEnter", "onEdgeMouseMove", "onEdgeMouseMove", "onEdgeMouseLeave", "onEdgeMouseLeave", "onEdgeDoubleClick", "onEdgeDoubleClick", "onEdgeUpdateStart", "onEdgeUpdateStart", "onEdgeUpdateEnd", "onEdgeUpdateEnd", "onNodesChange", "onNodesChange", "onEdgesChange", "onEdgesChange", "onNodesDelete", "onNodesDelete", "onEdgesDelete", "onEdgesDelete", "onSelectionDragStart", "onSelectionDragStart", "onSelectionDrag", "onSelectionDrag", "onSelectionDragStop", "onSelectionDragStop", "onSelectionStart", "onSelectionStart", "onSelectionEnd", "onSelectionEnd", "onSelectionContextMenu", "onSelectionContextMenu", "onConnect", "onConnect", "onConnectStart", "onConnectStart", "onConnectEnd", "onConnectEnd", "onClickConnectStart", "onClickConnectStart", "onClickConnectEnd", "onClickConnectEnd", "onDragOver", "onDragOver", "onDrop", "onDrop", "onInit", "onInit", "onMove", "onMove", "onMoveStart", "onMoveStart", "onMoveEnd", "onMoveEnd", "onSelectionChange", "onSelectionChange", "onPaneScroll", "onPaneScroll", "onPaneClick", "onPaneClick", "onPaneContextMenu", "onPaneContextMenu", "onPaneMouseEnter", "onPaneMouseEnter", "onPaneMouseMove", "onPaneMouseMove", "onPaneMouseLeave", "onPaneMouseLeave", "onError", "onError", "onNodeResizeEnd", "onNodeResizeEnd"] }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}machina-react-flow{display:block;width:100%;height:100%}machina-react-flow.touch-mode .react-flow .react-flow__node{pointer-events:none!important}machina-react-flow .react-flow{width:100%;height:100%;overflow:clip!important}machina-react-flow .react-flow .react-flow__renderer{z-index:1}machina-react-flow .react-flow .react-flow__nodes{z-index:4}machina-react-flow .react-flow .react-flow__node{cursor:grab!important;z-index:5!important}machina-react-flow .react-flow .react-flow__node.transitioning{transition:transform .3s ease-out,width .3s ease-out,height .3s ease-out!important}machina-react-flow .react-flow .react-flow__node:active{cursor:grabbing!important}machina-react-flow .react-flow .react-flow__node.nopan{cursor:grab!important}machina-react-flow .react-flow .react-flow__node-default{background:#4ecdc4!important;border:3px solid #333!important;border-radius:8px!important;padding:15px!important;color:#fff!important;font-weight:700!important;font-size:18px!important;box-shadow:0 4px 8px #0000004d!important;opacity:1!important;min-width:200px!important}machina-react-flow .react-flow .react-flow__node-default[data-id=\"1\"]{background:#ff6b6b!important}machina-react-flow .react-flow .react-flow__node-default[data-id=\"2\"]{background:#4ecdc4!important}machina-react-flow .react-flow .react-flow__handle{background:#555!important;width:12px!important;height:12px!important;border:2px solid #fff!important;opacity:1!important}machina-react-flow .react-flow .react-flow__handle:hover{background:#1976d2!important}machina-react-flow .react-flow .react-flow__handle-top{top:-6px!important}machina-react-flow .react-flow .react-flow__handle-right{right:-6px!important}machina-react-flow .react-flow .react-flow__handle-bottom{bottom:-6px!important}machina-react-flow .react-flow .react-flow__handle-left{left:-6px!important}machina-react-flow .react-flow .react-flow__edge-path{stroke:#000!important;stroke-width:3px!important}machina-react-flow .react-flow .react-flow__edge.selected .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3}machina-react-flow .react-flow .react-flow__controls button{background:#fff!important;border:1px solid #333!important;color:#333!important}machina-react-flow .react-flow .react-flow__controls button:hover{background:#f0f0f0!important}machina-react-flow .react-flow .react-flow__minimap{border:1px solid #333!important}machina-react-flow .react-flow .react-flow__minimap .react-flow__minimap-mask{fill:#e0e0e0!important}machina-react-flow .react-flow .react-flow__minimap .react-flow__minimap-node{fill:#333!important}machina-react-flow .react-flow .react-flow__connectionline .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3px!important;stroke-dasharray:5 5!important;animation:dash .5s linear infinite!important}@keyframes dash{to{stroke-dashoffset:-10}}machina-react-flow .react-flow .react-flow__node-group{background:#f0f0f099!important;border:2px dashed #d1d5db!important;border-radius:16px!important;padding:60px 40px 40px!important;pointer-events:all!important;box-sizing:border-box!important}machina-react-flow .react-flow .react-flow__node-group.selected{border-color:#3b82f6!important;border-style:solid!important;background:#f0f0f0cc!important}machina-react-flow .react-flow .react-flow__node-task{background:transparent!important;border:none!important;padding:0!important}machina-react-flow .react-flow .react-flow__node-issue{background:transparent!important;border:none!important;padding:0!important}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.6", type: ReactFlowComponent, isStandalone: true, selector: "machina-react-flow", inputs: { enableTouchPassthrough: { classPropertyName: "enableTouchPassthrough", publicName: "enableTouchPassthrough", isSignal: true, isRequired: false, transformFunction: null }, handlesVisible: { classPropertyName: "handlesVisible", publicName: "handlesVisible", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentNodeTemplates", predicate: FlowNodeDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: ReactFlowComponentStore, inputs: ["nodes", "nodes", "edges", "edges", "defaultNodes", "defaultNodes", "defaultEdges", "defaultEdges", "defaultEdgeOptions", "defaultEdgeOptions", "nodeTemplates", "nodeTemplates", "nodeTypes", "nodeTypes", "edgeTypes", "edgeTypes", "connectionLineType", "connectionLineType", "connectionLineStyle", "connectionLineStyle", "connectionLineComponent", "connectionLineComponent", "connectionLineContainerStyle", "connectionLineContainerStyle", "connectionMode", "connectionMode", "deleteKeyCode", "deleteKeyCode", "selectionKeyCode", "selectionKeyCode", "selectionOnDrag", "selectionOnDrag", "selectionMode", "selectionMode", "panActivationKeyCode", "panActivationKeyCode", "multiSelectionKeyCode", "multiSelectionKeyCode", "zoomActivationKeyCode", "zoomActivationKeyCode", "snapToGrid", "snapToGrid", "snapGrid", "snapGrid", "onlyRenderVisibleElements", "onlyRenderVisibleElements", "nodesDraggable", "nodesDraggable", "nodesConnectable", "nodesConnectable", "nodesFocusable", "nodesFocusable", "nodeOrigin", "nodeOrigin", "edgesFocusable", "edgesFocusable", "initNodeOrigin", "initNodeOrigin", "elementsSelectable", "elementsSelectable", "selectNodesOnDrag", "selectNodesOnDrag", "panOnDrag", "panOnDrag", "minZoom", "minZoom", "maxZoom", "maxZoom", "defaultViewport", "defaultViewport", "translateExtent", "translateExtent", "preventScrolling", "preventScrolling", "nodeExtent", "nodeExtent", "defaultMarkerColor", "defaultMarkerColor", "zoomOnScroll", "zoomOnScroll", "zoomOnPinch", "zoomOnPinch", "panOnScroll", "panOnScroll", "panOnScrollSpeed", "panOnScrollSpeed", "panOnScrollMode", "panOnScrollMode", "zoomOnDoubleClick", "zoomOnDoubleClick", "edgeUpdaterRadius", "edgeUpdaterRadius", "noDragClassName", "noDragClassName", "noWheelClassName", "noWheelClassName", "noPanClassName", "noPanClassName", "fitView", "fitView", "fitViewOptions", "fitViewOptions", "connectOnClick", "connectOnClick", "attributionPosition", "attributionPosition", "proOptions", "proOptions", "elevateNodesOnSelect", "elevateNodesOnSelect", "elevateEdgesOnSelect", "elevateEdgesOnSelect", "disableKeyboardA11y", "disableKeyboardA11y", "autoPanOnNodeDrag", "autoPanOnNodeDrag", "autoPanOnConnect", "autoPanOnConnect", "connectionRadius", "connectionRadius", "backgroundVariant", "backgroundVariant", "backgroundGap", "backgroundGap", "backgroundColor", "backgroundColor", "backgroundSize", "backgroundSize", "showBackground", "showBackground", "showMiniMap", "showMiniMap", "showControls", "showControls", "showCoordinateLabels", "showCoordinateLabels", "coordinateLabelInterval", "coordinateLabelInterval"], outputs: ["onNodeClick", "onNodeClick", "onNodeDoubleClick", "onNodeDoubleClick", "onNodeMouseEnter", "onNodeMouseEnter", "onNodeMouseMove", "onNodeMouseMove", "onNodeMouseLeave", "onNodeMouseLeave", "onNodeContextMenu", "onNodeContextMenu", "onNodeDragStart", "onNodeDragStart", "onNodeDrag", "onNodeDrag", "onNodeDragStop", "onNodeDragStop", "onEdgeClick", "onEdgeClick", "onEdgeUpdate", "onEdgeUpdate", "onEdgeContextMenu", "onEdgeContextMenu", "onEdgeMouseEnter", "onEdgeMouseEnter", "onEdgeMouseMove", "onEdgeMouseMove", "onEdgeMouseLeave", "onEdgeMouseLeave", "onEdgeDoubleClick", "onEdgeDoubleClick", "onEdgeUpdateStart", "onEdgeUpdateStart", "onEdgeUpdateEnd", "onEdgeUpdateEnd", "onNodesChange", "onNodesChange", "onEdgesChange", "onEdgesChange", "onNodesDelete", "onNodesDelete", "onEdgesDelete", "onEdgesDelete", "onSelectionDragStart", "onSelectionDragStart", "onSelectionDrag", "onSelectionDrag", "onSelectionDragStop", "onSelectionDragStop", "onSelectionStart", "onSelectionStart", "onSelectionEnd", "onSelectionEnd", "onSelectionContextMenu", "onSelectionContextMenu", "onConnect", "onConnect", "onConnectStart", "onConnectStart", "onConnectEnd", "onConnectEnd", "onClickConnectStart", "onClickConnectStart", "onClickConnectEnd", "onClickConnectEnd", "onDragOver", "onDragOver", "onDrop", "onDrop", "onInit", "onInit", "onMove", "onMove", "onMoveStart", "onMoveStart", "onMoveEnd", "onMoveEnd", "onSelectionChange", "onSelectionChange", "onPaneScroll", "onPaneScroll", "onPaneClick", "onPaneClick", "onPaneContextMenu", "onPaneContextMenu", "onPaneMouseEnter", "onPaneMouseEnter", "onPaneMouseMove", "onPaneMouseMove", "onPaneMouseLeave", "onPaneMouseLeave", "onError", "onError", "onNodeResizeEnd", "onNodeResizeEnd", "onVisibleNodesChange", "onVisibleNodesChange"] }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}machina-react-flow{display:block;width:100%;height:100%}machina-react-flow.touch-mode .react-flow .react-flow__node{pointer-events:none!important}machina-react-flow .react-flow{width:100%;height:100%;overflow:clip!important}machina-react-flow .react-flow .react-flow__renderer{z-index:1}machina-react-flow .react-flow .react-flow__nodes{z-index:4}machina-react-flow .react-flow .react-flow__node{cursor:grab!important;z-index:5!important}machina-react-flow .react-flow .react-flow__node.transitioning{transition:transform .3s ease-out,width .3s ease-out,height .3s ease-out!important}machina-react-flow .react-flow .react-flow__node:active{cursor:grabbing!important}machina-react-flow .react-flow .react-flow__node.nopan{cursor:grab!important}machina-react-flow .react-flow .react-flow__handle{background:#555!important;width:12px!important;height:12px!important;border:2px solid #fff!important}machina-react-flow .react-flow .react-flow__handle:hover{background:#1976d2!important}machina-react-flow .react-flow .react-flow__handle-top{top:-6px!important}machina-react-flow .react-flow .react-flow__handle-right{right:-6px!important}machina-react-flow .react-flow .react-flow__handle-bottom{bottom:-6px!important}machina-react-flow .react-flow .react-flow__handle-left{left:-6px!important}machina-react-flow .react-flow .react-flow__edge-path{stroke:#000!important;stroke-width:3px!important}machina-react-flow .react-flow .react-flow__edge.selected .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3}machina-react-flow .react-flow .react-flow__controls button{background:#fff!important;border:1px solid #333!important;color:#333!important}machina-react-flow .react-flow .react-flow__controls button:hover{background:#f0f0f0!important}machina-react-flow .react-flow .react-flow__minimap{border:1px solid #333!important}machina-react-flow .react-flow .react-flow__minimap .react-flow__minimap-mask{fill:#e0e0e0!important}machina-react-flow .react-flow .react-flow__minimap .react-flow__minimap-node{fill:#333!important}machina-react-flow .react-flow .react-flow__connectionline .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3px!important;stroke-dasharray:5 5!important;animation:dash .5s linear infinite!important}@keyframes dash{to{stroke-dashoffset:-10}}machina-react-flow .react-flow .react-flow__node-node{background:transparent!important;border:none!important;padding:0!important}machina-react-flow .react-flow .react-flow__node-node.flow-node--group{background:#f0f0f099!important;border:2px dashed #d1d5db!important;border-radius:16px!important;padding:60px 40px 40px!important;pointer-events:all!important;box-sizing:border-box!important}machina-react-flow .react-flow .react-flow__node-node.flow-node--group.selected{border-color:#3b82f6!important;border-style:solid!important;background:#f0f0f0cc!important}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ReactFlowComponent, decorators: [{
             type: Component,
@@ -630,15 +562,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                                 'onConnect', 'onConnectStart', 'onConnectEnd', 'onClickConnectStart',
                                 'onClickConnectEnd', 'onDragOver', 'onDrop', 'onInit', 'onMove', 'onMoveStart',
                                 'onMoveEnd', 'onSelectionChange', 'onPaneScroll', 'onPaneClick', 'onPaneContextMenu',
-                                'onPaneMouseEnter', 'onPaneMouseMove', 'onPaneMouseLeave', 'onError', 'onNodeResizeEnd'
+                                'onPaneMouseEnter', 'onPaneMouseMove', 'onPaneMouseLeave', 'onError', 'onNodeResizeEnd',
+                                'onVisibleNodesChange'
                             ]
                         }
-                    ], styles: [".react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}machina-react-flow{display:block;width:100%;height:100%}machina-react-flow.touch-mode .react-flow .react-flow__node{pointer-events:none!important}machina-react-flow .react-flow{width:100%;height:100%;overflow:clip!important}machina-react-flow .react-flow .react-flow__renderer{z-index:1}machina-react-flow .react-flow .react-flow__nodes{z-index:4}machina-react-flow .react-flow .react-flow__node{cursor:grab!important;z-index:5!important}machina-react-flow .react-flow .react-flow__node.transitioning{transition:transform .3s ease-out,width .3s ease-out,height .3s ease-out!important}machina-react-flow .react-flow .react-flow__node:active{cursor:grabbing!important}machina-react-flow .react-flow .react-flow__node.nopan{cursor:grab!important}machina-react-flow .react-flow .react-flow__node-default{background:#4ecdc4!important;border:3px solid #333!important;border-radius:8px!important;padding:15px!important;color:#fff!important;font-weight:700!important;font-size:18px!important;box-shadow:0 4px 8px #0000004d!important;opacity:1!important;min-width:200px!important}machina-react-flow .react-flow .react-flow__node-default[data-id=\"1\"]{background:#ff6b6b!important}machina-react-flow .react-flow .react-flow__node-default[data-id=\"2\"]{background:#4ecdc4!important}machina-react-flow .react-flow .react-flow__handle{background:#555!important;width:12px!important;height:12px!important;border:2px solid #fff!important;opacity:1!important}machina-react-flow .react-flow .react-flow__handle:hover{background:#1976d2!important}machina-react-flow .react-flow .react-flow__handle-top{top:-6px!important}machina-react-flow .react-flow .react-flow__handle-right{right:-6px!important}machina-react-flow .react-flow .react-flow__handle-bottom{bottom:-6px!important}machina-react-flow .react-flow .react-flow__handle-left{left:-6px!important}machina-react-flow .react-flow .react-flow__edge-path{stroke:#000!important;stroke-width:3px!important}machina-react-flow .react-flow .react-flow__edge.selected .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3}machina-react-flow .react-flow .react-flow__controls button{background:#fff!important;border:1px solid #333!important;color:#333!important}machina-react-flow .react-flow .react-flow__controls button:hover{background:#f0f0f0!important}machina-react-flow .react-flow .react-flow__minimap{border:1px solid #333!important}machina-react-flow .react-flow .react-flow__minimap .react-flow__minimap-mask{fill:#e0e0e0!important}machina-react-flow .react-flow .react-flow__minimap .react-flow__minimap-node{fill:#333!important}machina-react-flow .react-flow .react-flow__connectionline .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3px!important;stroke-dasharray:5 5!important;animation:dash .5s linear infinite!important}@keyframes dash{to{stroke-dashoffset:-10}}machina-react-flow .react-flow .react-flow__node-group{background:#f0f0f099!important;border:2px dashed #d1d5db!important;border-radius:16px!important;padding:60px 40px 40px!important;pointer-events:all!important;box-sizing:border-box!important}machina-react-flow .react-flow .react-flow__node-group.selected{border-color:#3b82f6!important;border-style:solid!important;background:#f0f0f0cc!important}machina-react-flow .react-flow .react-flow__node-task{background:transparent!important;border:none!important;padding:0!important}machina-react-flow .react-flow .react-flow__node-issue{background:transparent!important;border:none!important;padding:0!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { contentNodeTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FlowNodeDirective), { isSignal: true }] }], enableTouchPassthrough: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTouchPassthrough", required: false }] }] } });
+                    ], styles: [".react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}machina-react-flow{display:block;width:100%;height:100%}machina-react-flow.touch-mode .react-flow .react-flow__node{pointer-events:none!important}machina-react-flow .react-flow{width:100%;height:100%;overflow:clip!important}machina-react-flow .react-flow .react-flow__renderer{z-index:1}machina-react-flow .react-flow .react-flow__nodes{z-index:4}machina-react-flow .react-flow .react-flow__node{cursor:grab!important;z-index:5!important}machina-react-flow .react-flow .react-flow__node.transitioning{transition:transform .3s ease-out,width .3s ease-out,height .3s ease-out!important}machina-react-flow .react-flow .react-flow__node:active{cursor:grabbing!important}machina-react-flow .react-flow .react-flow__node.nopan{cursor:grab!important}machina-react-flow .react-flow .react-flow__handle{background:#555!important;width:12px!important;height:12px!important;border:2px solid #fff!important}machina-react-flow .react-flow .react-flow__handle:hover{background:#1976d2!important}machina-react-flow .react-flow .react-flow__handle-top{top:-6px!important}machina-react-flow .react-flow .react-flow__handle-right{right:-6px!important}machina-react-flow .react-flow .react-flow__handle-bottom{bottom:-6px!important}machina-react-flow .react-flow .react-flow__handle-left{left:-6px!important}machina-react-flow .react-flow .react-flow__edge-path{stroke:#000!important;stroke-width:3px!important}machina-react-flow .react-flow .react-flow__edge.selected .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3}machina-react-flow .react-flow .react-flow__controls button{background:#fff!important;border:1px solid #333!important;color:#333!important}machina-react-flow .react-flow .react-flow__controls button:hover{background:#f0f0f0!important}machina-react-flow .react-flow .react-flow__minimap{border:1px solid #333!important}machina-react-flow .react-flow .react-flow__minimap .react-flow__minimap-mask{fill:#e0e0e0!important}machina-react-flow .react-flow .react-flow__minimap .react-flow__minimap-node{fill:#333!important}machina-react-flow .react-flow .react-flow__connectionline .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3px!important;stroke-dasharray:5 5!important;animation:dash .5s linear infinite!important}@keyframes dash{to{stroke-dashoffset:-10}}machina-react-flow .react-flow .react-flow__node-node{background:transparent!important;border:none!important;padding:0!important}machina-react-flow .react-flow .react-flow__node-node.flow-node--group{background:#f0f0f099!important;border:2px dashed #d1d5db!important;border-radius:16px!important;padding:60px 40px 40px!important;pointer-events:all!important;box-sizing:border-box!important}machina-react-flow .react-flow .react-flow__node-node.flow-node--group.selected{border-color:#3b82f6!important;border-style:solid!important;background:#f0f0f0cc!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { contentNodeTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FlowNodeDirective), { isSignal: true }] }], enableTouchPassthrough: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTouchPassthrough", required: false }] }], handlesVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlesVisible", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FlowNodeDirective, NODE_TYPES, ReactFlowComponent, ReactFlowComponentStore, createTemplateNodeComponent, setAngularContext };
+export { FlowNodeDirective, ReactFlowComponent, ReactFlowComponentStore, createTemplateNodeComponent };
 //# sourceMappingURL=xxmachina-components-extras-flow.mjs.map