ngx-xyflow
Version:
Angular wrapper for the popular xyflow (formerly Reactflow) library
367 lines • 80.4 kB
JavaScript
import { Component, ContentChild, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { addEdge, applyEdgeChanges, applyNodeChanges, Background, Controls, MiniMap, ReactFlow, ReactFlowProvider } from '@xyflow/react';
import { ReactifyNgComponent } from 'ngx-reactify';
import * as React from 'react';
import { BackgroundDirective } from './background.directive';
import { ControlsDirective } from './controls.directive';
import { MinimapDirective } from './minimap.directive';
import * as i0 from "@angular/core";
export 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]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoieHlmbG93LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy94eWZsb3cveHlmbG93LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsU0FBUyxFQUNULFlBQVksRUFDWixZQUFZLEVBQ1osS0FBSyxFQUdMLE1BQU0sRUFHTixpQkFBaUIsRUFDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUNILE9BQU8sRUFDUCxnQkFBZ0IsRUFDaEIsZ0JBQWdCLEVBQ2hCLFVBQVUsRUFDVixRQUFRLEVBQ1IsT0FBTyxFQUNQLFNBQVMsRUFHVCxpQkFBaUIsRUFDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ25ELE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQy9CLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQzdELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFN