ngx-xyflow
Version:
Angular wrapper for the popular xyflow (formerly Reactflow) library
891 lines • 74.4 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, booleanAttribute, Output, Input, Directive, ContentChild, ViewEncapsulation, Component, TemplateRef, ContentChildren, NgModule } from '@angular/core';
import { Background, Controls, MiniMap, applyNodeChanges, applyEdgeChanges, addEdge, ReactFlowProvider, ReactFlow, NodeResizer, NodeToolbar, Handle } from '@xyflow/react';
import { ReactifyNgComponent, AutoWrapAngularObject, ng2ReactProps } from 'ngx-reactify';
import * as React from 'react';
import { NgTemplateOutlet } from '@angular/common';
class ControlsDirective {
constructor(xyflow) {
this.xyflow = xyflow;
this.onFitView = new EventEmitter();
this.onInteractiveChange = new EventEmitter();
this.onZoomIn = new EventEmitter();
this.onZoomOut = new EventEmitter();
}
ngOnChanges(changes) {
this.xyflow.ngOnChanges(changes);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlsDirective, deps: [{ token: XYFlowComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.12", type: ControlsDirective, selector: "ngx-xyflow>ngx-xyflow-controls", inputs: { "aria-label": "aria-label", children: "children", className: "className", fitViewOptions: "fitViewOptions", orientation: "orientation", position: "position", showFitView: ["showFitView", "showFitView", booleanAttribute], showInteractive: ["showInteractive", "showInteractive", booleanAttribute], showZoom: ["showZoom", "showZoom", booleanAttribute], style: "style" }, outputs: { onFitView: "onFitView", onInteractiveChange: "onInteractiveChange", onZoomIn: "onZoomIn", onZoomOut: "onZoomOut" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlsDirective, decorators: [{
type: Directive,
args: [{
selector: 'ngx-xyflow>ngx-xyflow-controls'
}]
}], ctorParameters: () => [{ type: XYFlowComponent }], propDecorators: { 'aria-label': [{
type: Input
}], children: [{
type: Input
}], className: [{
type: Input
}], fitViewOptions: [{
type: Input
}], orientation: [{
type: Input
}], position: [{
type: Input
}], showFitView: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], showInteractive: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], showZoom: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], style: [{
type: Input
}], onFitView: [{
type: Output
}], onInteractiveChange: [{
type: Output
}], onZoomIn: [{
type: Output
}], onZoomOut: [{
type: Output
}] } });
class MinimapDirective {
constructor(xyflow) {
this.xyflow = xyflow;
this.onClick = new EventEmitter();
this.onNodeClick = new EventEmitter();
}
ngOnChanges(changes) {
this.xyflow.ngOnChanges(changes);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MinimapDirective, deps: [{ token: XYFlowComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.12", type: MinimapDirective, selector: "ngx-xyflow>ngx-xyflow-minimap", inputs: { ariaLabel: "ariaLabel", bgColor: "bgColor", inversePan: "inversePan", maskColor: "maskColor", maskStrokeColor: "maskStrokeColor", maskStrokeWidth: "maskStrokeWidth", nodeBorderRadius: "nodeBorderRadius", nodeClassName: "nodeClassName", nodeColor: "nodeColor", nodeComponent: "nodeComponent", nodeStrokeColor: "nodeStrokeColor", nodeStrokeWidth: "nodeStrokeWidth", offsetScale: "offsetScale", pannable: ["pannable", "pannable", booleanAttribute], position: "position", zoomable: ["zoomable", "zoomable", booleanAttribute], zoomStep: "zoomStep" }, outputs: { onClick: "onClick", onNodeClick: "onNodeClick" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MinimapDirective, decorators: [{
type: Directive,
args: [{
selector: 'ngx-xyflow>ngx-xyflow-minimap'
}]
}], ctorParameters: () => [{ type: XYFlowComponent }], propDecorators: { ariaLabel: [{
type: Input
}], bgColor: [{
type: Input
}], inversePan: [{
type: Input
}], maskColor: [{
type: Input
}], maskStrokeColor: [{
type: Input
}], maskStrokeWidth: [{
type: Input
}], nodeBorderRadius: [{
type: Input
}], nodeClassName: [{
type: Input
}], nodeColor: [{
type: Input
}], nodeComponent: [{
type: Input
}], nodeStrokeColor: [{
type: Input
}], nodeStrokeWidth: [{
type: Input
}], offsetScale: [{
type: Input
}], pannable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], position: [{
type: Input
}], zoomable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], zoomStep: [{
type: Input
}], onClick: [{
type: Output
}], onNodeClick: [{
type: Output
}] } });
class XYFlowComponent extends ReactifyNgComponent {
constructor(ngContainer, ngZone) {
super(ngContainer, ngZone);
this._nodesChange = new EventEmitter();
this._edgesChange = new EventEmitter();
this.nodeTypes = {}; //XYFlowProps['nodeTypes'] = {};
this.edgeTypes = {};
// `as any` casting for the Output properties to inherit the description from the xyflow JSDOC comments.
// As of now I don't know of a better way to replace the types while keeping the comments.
// @Output() onBeforeDelete = new EventEmitter<[XYFlowProps['onBeforeDelete']]> as any;
this.onClickConnectEnd = new EventEmitter;
this.onClickConnectStart = new EventEmitter;
this.onConnect = new EventEmitter;
this.onConnectEnd = new EventEmitter;
this.onConnectStart = new EventEmitter;
this.onDelete = new EventEmitter;
this.onEdgeClick = new EventEmitter;
this.onEdgeContextMenu = new EventEmitter;
this.onEdgeDoubleClick = new EventEmitter;
this.onEdgeMouseEnter = new EventEmitter;
this.onEdgeMouseLeave = new EventEmitter;
this.onEdgeMouseMove = new EventEmitter;
this.onEdgesChange = new EventEmitter;
this.onEdgesDelete = new EventEmitter;
this.onError = new EventEmitter;
this.onInit = new EventEmitter;
this.onMove = new EventEmitter;
this.onMoveEnd = new EventEmitter;
this.onMoveStart = new EventEmitter;
this.onNodeClick = new EventEmitter;
this.onNodeContextMenu = new EventEmitter;
this.onNodeDoubleClick = new EventEmitter;
this.onNodeDrag = new EventEmitter;
this.onNodeDragStart = new EventEmitter;
this.onNodeDragStop = new EventEmitter;
this.onNodeMouseEnter = new EventEmitter;
this.onNodeMouseLeave = new EventEmitter;
this.onNodeMouseMove = new EventEmitter;
this.onNodesChange = new EventEmitter;
this.onNodesDelete = new EventEmitter;
this.onPaneClick = new EventEmitter;
this.onPaneContextMenu = new EventEmitter;
this.onPaneMouseEnter = new EventEmitter;
this.onPaneMouseLeave = new EventEmitter;
this.onPaneMouseMove = new EventEmitter;
this.onPaneScroll = new EventEmitter;
this.onReconnect = new EventEmitter;
this.onReconnectStart = new EventEmitter;
this.onReconnectEnd = new EventEmitter;
this.onSelectionChange = new EventEmitter;
this.onSelectionContextMenu = new EventEmitter;
this.onSelectionDrag = new EventEmitter;
this.onSelectionDragStart = new EventEmitter;
this.onSelectionDragStop = new EventEmitter;
this.onSelectionEnd = new EventEmitter;
this.onSelectionStart = new EventEmitter;
this.ngReactComponent = ({ props }) => {
const getProps = (obj = {}) => {
const props = {};
Object.entries(obj).forEach(([k, v]) => {
// Omit keys prefixed with _
if (k.startsWith('_'))
return;
// Omit event emitter properties
if (k.startsWith('on'))
return;
props[k] = v;
});
return props;
};
const controlProps = getProps(this._controls);
const minimapProps = getProps(this._minimap);
controlProps.onFitView = () => this._controls.onFitView.emit();
controlProps.onInteractiveChange = (interactiveStatus) => this._controls.onInteractiveChange.emit(interactiveStatus);
controlProps.onZoomIn = () => this._controls.onZoomIn.emit();
controlProps.onZoomOut = () => this._controls.onZoomOut.emit();
minimapProps.onClick = () => this._minimap.onClick.emit();
minimapProps.onNodeClick = () => this._minimap.onNodeClick.emit();
const reactDirectives = [
this._background ? React.createElement(Background, getProps(this._background)) : null,
this._controls ? React.createElement(Controls, controlProps) : null,
this._minimap ? React.createElement(MiniMap, minimapProps) : null,
].filter(r => r);
const [nodes, setNodes] = React.useState(this._nodes);
const [edges, setEdges] = React.useState(this._edges);
// Store setState functions for use in ngOnChanges
React.useEffect(() => {
this._setNodes = setNodes;
this._setEdges = setEdges;
}, [setNodes, setEdges]);
props.onNodesChange = React.useCallback((changes) => setNodes((nds) => {
const nodes = applyNodeChanges(changes, nds);
this._nodesChange.emit(this._nodes = nodes);
return nodes;
}), []);
props.onEdgesChange = React.useCallback((changes) => setEdges((eds) => {
console.log("SED");
const edges = applyEdgeChanges(changes, eds);
this._edgesChange.emit(this._edges = edges);
return edges;
}), []);
props.onConnect = React.useCallback((params) => setEdges((eds) => {
const edges = addEdge(params, eds);
this._edgesChange.emit(this._edges = edges);
return edges;
}), []);
// Overwrite the property bindings
props.nodes = nodes;
props.edges = edges;
// Effectively outputs this:
// <ReactFlowProvider>
// <ReactFlow props={props}>
// <Background/>
// <Controls/>
// <MiniMap/>
// </ReactFlow>
// </ReactFlowProvider>
return React.createElement(ReactFlowProvider, { children: [] }, React.createElement(ReactFlow, { ...props, onInit: rf => {
this.instance = rf;
} }, ...reactDirectives));
};
}
ngOnInit() {
}
ngAfterViewInit() {
super.ngAfterViewInit();
}
ngOnChanges(changes) {
if (this._setNodes && changes['_nodes']?.firstChange == false) {
this._setNodes(changes['_nodes'].currentValue);
}
if (this._setEdges && changes['_edges']?.firstChange == false) {
this._setEdges(changes['_edges'].currentValue);
}
super.ngOnChanges();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: XYFlowComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: XYFlowComponent, selector: "ngx-xyflow", inputs: { _nodes: ["nodes", "_nodes"], _edges: ["edges", "_edges"], defaultEdgeOptions: "defaultEdgeOptions", 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", 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", 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" }, outputs: { _nodesChange: "nodesChange", _edgesChange: "edgesChange", onClickConnectEnd: "onClickConnectEnd", onClickConnectStart: "onClickConnectStart", onConnect: "onConnect", onConnectEnd: "onConnectEnd", onConnectStart: "onConnectStart", onDelete: "onDelete", onEdgeClick: "onEdgeClick", onEdgeContextMenu: "onEdgeContextMenu", onEdgeDoubleClick: "onEdgeDoubleClick", onEdgeMouseEnter: "onEdgeMouseEnter", onEdgeMouseLeave: "onEdgeMouseLeave", onEdgeMouseMove: "onEdgeMouseMove", onEdgesChange: "onEdgesChange", onEdgesDelete: "onEdgesDelete", onError: "onError", onInit: "onInit", onMove: "onMove", onMoveEnd: "onMoveEnd", onMoveStart: "onMoveStart", onNodeClick: "onNodeClick", onNodeContextMenu: "onNodeContextMenu", onNodeDoubleClick: "onNodeDoubleClick", onNodeDrag: "onNodeDrag", onNodeDragStart: "onNodeDragStart", onNodeDragStop: "onNodeDragStop", onNodeMouseEnter: "onNodeMouseEnter", onNodeMouseLeave: "onNodeMouseLeave", onNodeMouseMove: "onNodeMouseMove", onNodesChange: "onNodesChange", onNodesDelete: "onNodesDelete", onPaneClick: "onPaneClick", onPaneContextMenu: "onPaneContextMenu", onPaneMouseEnter: "onPaneMouseEnter", onPaneMouseLeave: "onPaneMouseLeave", onPaneMouseMove: "onPaneMouseMove", onPaneScroll: "onPaneScroll", onReconnect: "onReconnect", onReconnectStart: "onReconnectStart", onReconnectEnd: "onReconnectEnd", onSelectionChange: "onSelectionChange", onSelectionContextMenu: "onSelectionContextMenu", onSelectionDrag: "onSelectionDrag", onSelectionDragStart: "onSelectionDragStart", onSelectionDragStop: "onSelectionDragStop", onSelectionEnd: "onSelectionEnd", onSelectionStart: "onSelectionStart" }, queries: [{ propertyName: "_background", first: true, predicate: BackgroundDirective, descendants: true }, { propertyName: "_controls", first: true, predicate: ControlsDirective, descendants: true }, { propertyName: "_minimap", first: true, predicate: MinimapDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [".react-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgba(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.react-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgba(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.react-flow__background{background-color:var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.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__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray: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.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.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;animation:dashdraw .5s linear infinite}svg.react-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.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:default}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{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:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-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.top.center,.react-flow__panel.bottom.center{left:50%;transform:translate(-50%)}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.left.center,.react-flow__panel.right.center{top:50%;transform:translateY(-50%)}.react-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@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;left:0;top:0}.react-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.react-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.react-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.react-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.react-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.react-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.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-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.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:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.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-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.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:var(--xy-resize-background-color, var(--xy-resize-background-color-default));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:var(--xy-resize-background-color, var(--xy-resize-background-color-default));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%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color, var(--xy-edge-label-color-default))}\n"], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: XYFlowComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-xyflow', template: '', encapsulation: ViewEncapsulation.None, styles: [".react-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgba(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.react-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgba(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.react-flow__background{background-color:var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.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__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray: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.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.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;animation:dashdraw .5s linear infinite}svg.react-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.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:default}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{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:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-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.top.center,.react-flow__panel.bottom.center{left:50%;transform:translate(-50%)}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.left.center,.react-flow__panel.right.center{top:50%;transform:translateY(-50%)}.react-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@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;left:0;top:0}.react-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.react-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.react-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.react-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.react-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.react-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.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-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.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:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.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-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.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:var(--xy-resize-background-color, var(--xy-resize-background-color-default));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:var(--xy-resize-background-color, var(--xy-resize-background-color-default));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%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color, var(--xy-edge-label-color-default))}\n"] }]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.NgZone }], propDecorators: { _nodes: [{
type: Input,
args: ["nodes"]
}], _nodesChange: [{
type: Output,
args: ["nodesChange"]
}], _edges: [{
type: Input,
args: ["edges"]
}], _edgesChange: [{
type: Output,
args: ["edgesChange"]
}], defaultEdgeOptions: [{
type: Input
}], connectionLineType: [{
type: Input
}], connectionLineStyle: [{
type: Input
}], connectionLineComponent: [{
type: Input
}], connectionLineContainerStyle: [{
type: Input
}], connectionMode: [{
type: Input
}], deleteKeyCode: [{
type: Input
}], selectionKeyCode: [{
type: Input
}], selectionOnDrag: [{
type: Input
}], selectionMode: [{
type: Input
}], panActivationKeyCode: [{
type: Input
}], multiSelectionKeyCode: [{
type: Input
}], zoomActivationKeyCode: [{
type: Input
}], snapToGrid: [{
type: Input
}], snapGrid: [{
type: Input
}], onlyRenderVisibleElements: [{
type: Input
}], nodesDraggable: [{
type: Input
}], nodesConnectable: [{
type: Input
}], nodesFocusable: [{
type: Input
}], nodeOrigin: [{
type: Input
}], edgesFocusable: [{
type: Input
}], elementsSelectable: [{
type: Input
}], selectNodesOnDrag: [{
type: Input
}], panOnDrag: [{
type: Input
}], minZoom: [{
type: Input
}], maxZoom: [{
type: Input
}], defaultViewport: [{
type: Input
}], translateExtent: [{
type: Input
}], preventScrolling: [{
type: Input
}], nodeExtent: [{
type: Input
}], defaultMarkerColor: [{
type: Input
}], zoomOnScroll: [{
type: Input
}], zoomOnPinch: [{
type: Input
}], panOnScroll: [{
type: Input
}], panOnScrollSpeed: [{
type: Input
}], panOnScrollMode: [{
type: Input
}], zoomOnDoubleClick: [{
type: Input
}], noDragClassName: [{
type: Input
}], noWheelClassName: [{
type: Input
}], noPanClassName: [{
type: Input
}], fitView: [{
type: Input
}], fitViewOptions: [{
type: Input
}], connectOnClick: [{
type: Input
}], attributionPosition: [{
type: Input
}], proOptions: [{
type: Input
}], elevateNodesOnSelect: [{
type: Input
}], elevateEdgesOnSelect: [{
type: Input
}], disableKeyboardA11y: [{
type: Input
}], autoPanOnNodeDrag: [{
type: Input
}], autoPanOnConnect: [{
type: Input
}], connectionRadius: [{
type: Input
}], onClickConnectEnd: [{
type: Output
}], onClickConnectStart: [{
type: Output
}], onConnect: [{
type: Output
}], onConnectEnd: [{
type: Output
}], onConnectStart: [{
type: Output
}], onDelete: [{
type: Output
}], onEdgeClick: [{
type: Output
}], onEdgeContextMenu: [{
type: Output
}], onEdgeDoubleClick: [{
type: Output
}], onEdgeMouseEnter: [{
type: Output
}], onEdgeMouseLeave: [{
type: Output
}], onEdgeMouseMove: [{
type: Output
}], onEdgesChange: [{
type: Output
}], onEdgesDelete: [{
type: Output
}], onError: [{
type: Output
}], onInit: [{
type: Output
}], onMove: [{
type: Output
}], onMoveEnd: [{
type: Output
}], onMoveStart: [{
type: Output
}], onNodeClick: [{
type: Output
}], onNodeContextMenu: [{
type: Output
}], onNodeDoubleClick: [{
type: Output
}], onNodeDrag: [{
type: Output
}], onNodeDragStart: [{
type: Output
}], onNodeDragStop: [{
type: Output
}], onNodeMouseEnter: [{
type: Output
}], onNodeMouseLeave: [{
type: Output
}], onNodeMouseMove: [{
type: Output
}], onNodesChange: [{
type: Output
}], onNodesDelete: [{
type: Output
}], onPaneClick: [{
type: Output
}], onPaneContextMenu: [{
type: Output
}], onPaneMouseEnter: [{
type: Output
}], onPaneMouseLeave: [{
type: Output
}], onPaneMouseMove: [{
type: Output
}], onPaneScroll: [{
type: Output
}], onReconnect: [{
type: Output
}], onReconnectStart: [{
type: Output
}], onReconnectEnd: [{
type: Output
}], onSelectionChange: [{
type: Output
}], onSelectionContextMenu: [{
type: Output
}], onSelectionDrag: [{
type: Output
}], onSelectionDragStart: [{
type: Output
}], onSelectionDragStop: [{
type: Output
}], onSelectionEnd: [{
type: Output
}], onSelectionStart: [{
type: Output
}], _background: [{
type: ContentChild,
args: [BackgroundDirective]
}], _controls: [{
type: ContentChild,
args: [ControlsDirective]
}], _minimap: [{
type: ContentChild,
args: [MinimapDirective]
}] } });
class BackgroundDirective {
constructor(xyflow) {
this.xyflow = xyflow;
}
ngOnChanges(changes) {
this.xyflow.ngOnChanges(changes);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BackgroundDirective, deps: [{ token: XYFlowComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: BackgroundDirective, selector: "ngx-xyflow>ngx-xyflow-background", inputs: { bgColor: "bgColor", className: "className", color: "color", gap: "gap", id: "id", lineWidth: "lineWidth", offset: "offset", patternClassName: "patternClassName", size: "size", style: "style", variant: "variant" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BackgroundDirective, decorators: [{
type: Directive,
args: [{
selector: 'ngx-xyflow>ngx-xyflow-background'
}]
}], ctorParameters: () => [{ type: XYFlowComponent }], propDecorators: { bgColor: [{
type: Input
}], className: [{
type: Input
}], color: [{
type: Input
}], gap: [{
type: Input
}], id: [{
type: Input
}], lineWidth: [{
type: Input
}], offset: [{
type: Input
}], patternClassName: [{
type: Input
}], size: [{
type: Input
}], style: [{
type: Input
}], variant: [{
type: Input
}] } });
class HandleDirective {
// @Output() onConnect = new EventEmitter<Connection>();
// @Output() onEdgesDelete = new EventEmitter<[XYFlowProps['onEdgesDelete']]>
constructor(xyflow) {
this.xyflow = xyflow;
}
ngOnChanges(changes) {
this.xyflow.ngOnChanges(changes);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleDirective, deps: [{ token: XYFlowComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.12", type: HandleDirective, selector: "ngx-xyflow>ngx-xyflow-node>ngx-xyflow-handle", inputs: { id: "id", isConnectable: ["isConnectable", "isConnectable", booleanAttribute], isConnectableEnd: ["isConnectableEnd", "isConnectableEnd", booleanAttribute], isConnectableStart: ["isConnectableStart", "isConnectableStart", booleanAttribute], isValidConnection: "isValidConnection", position: "position", type: "type" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleDirective, decorators: [{
type: Directive,
args: [{
selector: 'ngx-xyflow>ngx-xyflow-node>ngx-xyflow-handle'
}]
}], ctorParameters: () => [{ type: XYFlowComponent }], propDecorators: { id: [{
type: Input
}], isConnectable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], isConnectableEnd: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], isConnectableStart: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], isValidConnection: [{
type: Input
}], position: [{
type: Input
}], type: [{
type: Input
}] } });
class NodeResizerDirective {
constructor(xyflow) {
this.xyflow = xyflow;
}
ngOnChanges(changes) {
this.xyflow.ngOnChanges(changes);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeResizerDirective, deps: [{ token: XYFlowComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.12", type: NodeResizerDirective, selector: "ngx-xyflow>ngx-xyflow-node>ngx-xyflow-node-resizer", inputs: { color: "color", handleClassName: "handleClassName", handleStyle: "handleStyle", isVisible: ["isVisible", "isVisible", booleanAttribute], keepAspectRatio: ["keepAspectRatio", "keepAspectRatio", booleanAttribute], lineClassName: "lineClassName", lineStyle: "lineStyle", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", nodeId: "nodeId", shouldResize: "shouldResize", onResizeStart: "onResizeStart", onResize: "onResize", onResizeEnd: "onResizeEnd" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeResizerDirective, decorators: [{
type: Directive,
args: [{
selector: 'ngx-xyflow>ngx-xyflow-node>ngx-xyflow-node-resizer'
}]
}], ctorParameters: () => [{ type: XYFlowComponent }], propDecorators: { color: [{
type: Input
}], handleClassName: [{
type: Input
}], handleStyle: [{
type: Input
}], isVisible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], keepAspectRatio: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], lineClassName: [{
type: Input
}], lineStyle: [{
type: Input
}], maxHeight: [{
type: Input
}], maxWidth: [{
type: Input
}], minHeight: [{
type: Input
}], minWidth: [{
type: Input
}], nodeId: [{
type: Input
}], shouldResize: [{
type: Input
}], onResizeStart: [{
type: Input
}], onResize: [{
type: Input
}], onResizeEnd: [{
type: Input
}] } });
class NodeToolbarDirective {
constructor(xyflow) {
this.xyflow = xyflow;
}
ngOnChanges(changes) {
this.xyflow.ngOnChanges(changes);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarDirective, deps: [{ token: XYFlowComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.12", type: NodeToolbarDirective, selector: "ngx-xyflow>ngx-xyflow-node>ngx-xyflow-node-toolbar", inputs: { isVisible: ["isVisible", "isVisible", booleanAttribute], nodeId: "nodeId", offset: "offset", position: "position" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarDirective, decorators: [{
type: Directive,
args: [{
selector: 'ngx-xyflow>ngx-xyflow-node>ngx-xyflow-node-toolbar'
}]
}], ctorParameters: () => [{ type: XYFlowComponent }], propDecorators: { isVisible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nodeId: [{
type: Input
}], offset: [{
type: Input
}], position: [{
type: Input
}] } });
class XYFlowNodeComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: XYFlowNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: XYFlowNodeComponent, isStandalone: true, selector: "ngx-xyflow-node", inputs: { template: "template", data: "data", node: "node" }, ngImport: i0, template: `
@if(template) {
<ng-container
[ngTemplateOutlet]="template"
[ngTemplateOutletContext]="{ '$implicit': data }"
/>
}
@else {
<span style="color: red">
Node has no template.
</span>
}
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: XYFlowNodeComponent, decorators: [{
type: Component,
args: [{
selector: "ngx-xyflow-node",
template: `
@if(template) {
<ng-container
[ngTemplateOutlet]="template"
[ngTemplateOutletContext]="{ '$implicit': data }"
/>
}
@else {
<span style="color: red">
Node has no template.
</span>
}
`,
imports: [
NgTemplateOutlet
],
standalone: true
}]
}], propDecorators: { template: [{
type: Input
}], data: [{
type: Input
}], node: [{
type: Input
}] } });
class NodeDirective {
constructor(xyflow, appRef, injector, ngZone) {
this.xyflow = xyflow;
this.appRef = appRef;
this.injector = injector;
this.ngZone = ngZone;
this.blur = new EventEmitter();
this.click = new EventEmitter();
this.contextmenu = new EventEmitter();
this.dblclick = new EventEmitter();
this.drag = new EventEmitter();
this.dragend = new EventEmitter();
this.dragenter = new EventEmitter();
this.dragleave = new EventEmitter();
this.dragover = new EventEmitter();
this.dragstart = new EventEmitter();
this.focus = new EventEmitter();
this.keydown = new EventEmitter();
this.keyup = new EventEmitter();
this.keypress = new EventEmitter();
this.mousedown = new EventEmitter();
this.mouseenter = new EventEmitter();
this.mouseleave = new EventEmitter();
this.mousemove = new EventEmitter();
this.mouseout = new EventEmitter();
this.mouseover = new EventEmitter();
this.mouseup = new EventEmitter();
this.mousewheel = new EventEmitter();
this.pointercancel = new EventEmitter();
this.pointerdown = new EventEmitter();
this.pointerenter = new EventEmitter();
this.pointerleave = new EventEmitter();
this.pointermove = new EventEmitter();
this.pointerout = new EventEmitter();
this.pointerover = new EventEmitter();
this.pointerrawupdate = new EventEmitter();
this.pointerup = new EventEmitter();
this.resize = new EventEmitter();
this.scroll = new EventEmitter();
this.wheel = new EventEmitter();
}
ngOnChanges(changes) {
this.xyflow.ngOnChanges(changes);
}
ngAfterViewInit() {
if (!this.nodeType) {
console.error(new Error("NGX: XYFlow Node bootstrapped without a node type!\n"));
return;
}
this.xyflow.nodeTypes[this.nodeType] = AutoWrapAngularObject({
component: XYFlowNodeComponent,
appRef: this.appRef,
injector: this.injector,
instance: this,
ngZone: this.ngZone,
containerTag: "ngx-xyflow-node-container",
reactTemplate: el => {
return React.createElement(React.Fragment, {}, ...[
this.nodeResizer ? React.createElement(NodeResizer, ng2ReactProps(this.nodeResizer)) : null,
this.nodeToolbar ? React.createElement(NodeToolbar, ng2ReactProps(this.nodeToolbar)) : null,
el,
...(this.handles?.map(handle => {
const props = ng2ReactProps(handle);
// props.onConnect = (connection) =>
// handle.onConnect.next(connection);
return React.createElement(Handle, props);
}) || []),
].filter(n => !!n));
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeDirective, deps: [{ token: XYFlowComponent }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NodeDirective, selector: "ngx-xyflow>ngx-xyflow-node", inputs: { nodeType: "nodeType" }, outputs: { blur: "blur", click: "click", contextmenu: "contextmenu", dblclick: "dblclick", drag: "drag", dragend: "dragend", dragenter: "dragenter", dragleave: "dragleave", dragover: "dragover", dragstart: "dragstart", focus: "focus", keydown: "keydown", keyup: "keyup", keypress: "keypress", mousedown: "mousedown", mouseenter: "mouseenter", mouseleave: "mouseleave", mousemove: "mousemove", mouseout: "mouseout", mouseover: "mouseover", mouseup: "mouseup", mousewheel: "mousewheel", pointercancel: "pointercancel", pointerdown: "pointerdown", pointerenter: "pointerenter", pointerleave: "pointerleave", pointermove: "pointermove", pointerout: "pointerout", pointerover: "pointerover", pointerrawupdate: "pointerrawupdate", pointerup: "pointerup", resize: "resize", scroll: "scroll", wheel: "wheel" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }, { propertyName: "nodeResizer", first: true, predicate: NodeResizerDirective, descendants: true }, { propertyName: "nodeToolbar", first: true, predicate: NodeToolbarDirective, descendants: true }, { propertyName: "handles", predicate: HandleDirective }], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeDirective, decorators: [{
type: Directive,
args: [{
selector: 'ngx-xyflow>ngx-xyflow-node'
}]
}], ctorParameters: () => [{ type: XYFlowComponent }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.NgZone }], propDecorators: { handles: [{
type: ContentChildren,
args: [HandleDirective]
}], nodeType: [{
type: Input
}], template: [{
type: ContentChild,
args: [TemplateRef]
}], nodeResizer: [{
type: ContentChild,
args: [NodeResizerDirective]
}], nodeToolbar: [{
type: ContentChild,
args: [NodeToolbarDirective]
}], blur: [{
type: Output
}], click: [{
type: Output
}], contextmenu: [{
type: Output
}], dblclick: [{
type: Output
}], drag: [{
type: Output
}], dragend: [{
type: Output
}], dragenter: [{
type: Output
}], dragleave: [{
type: Output
}], dragover: [{
type: Output
}], dragstart: [{
type: Output
}], focus: [{
type: Output
}], keydown: [{
type: Output
}], keyup: [{
type: Output
}], keypress: [{
type: Output
}], mousedown: [{
type: Output
}], mouseenter: [{
type: Output
}], mouseleave: [{
type: Output
}], mousemove: [{
type: Output
}], mouseout: [{
type: Output
}], mouseover: [{
type: Output
}], mouseup: [{
type: Output
}], mousewheel: [{
type: Output
}], pointercancel: [{
type: Output
}], pointerdown: [{
type: Output
}], pointerenter: [{
type: Output
}], pointerleave: [{
type: Output
}], pointermove: [{
type: Output
}], pointerout: [{
type: Output
}], pointerover: [{
type: Output
}], pointerrawupdate: [{
type: Output
}], pointerup: [{
type: Output
}], resize: [{
type: Output
}], scroll: [{
type: Output
}], wheel: [{
type: Output
}] } });
class XYFlowModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: XYFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: XYFlowModule, declarations: [XYFlowComponent,
NodeDirective,
BackgroundDirective,
ControlsDirective,
HandleDirective,
MinimapDirective,
NodeResizerDirective,
NodeToolbarDirective], exports: [XYFlowComponent,
NodeDirective,
HandleDirective,
BackgroundDirective,
ControlsDirective,
HandleDirective,
MinimapDirective,
NodeResizerDirective,
NodeToolbarDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: XYFlowModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: XYFlowModule, decorators: [{
type: NgModule,
args: [{
declarations: [
XYFlowComponent,
NodeDirective,
BackgroundDirective,
ControlsDirective,
HandleDirective,
MinimapDirective,
NodeResizerDirective,
NodeToolbarDirective
],
exports: [
XYFlowComponent,
NodeDirective,
HandleDirective,
BackgroundDirective,
ControlsDirective,
HandleDirective,
MinimapDirective,
NodeResizerDirective,
NodeToolbarDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { BackgroundDirective, ControlsDirective, HandleDirective, MinimapDirective, NodeDirective, NodeResizerDirective, NodeToolbarDirective, XYFlowComponent, XYFlowModule };
//# sourceMappingURL=ngx-xyflow.mjs.map