nuxeo-development-framework 4.1.1 → 4.1.2

package/fesm2015/nuxeo-development-framework.js

@@ -28317,6 +28317,7 @@ const NODE_TYPE = {
     start: 'start',
     content: 'content',
     template: 'template',
+    gateway: 'gateway',
     end: 'end',
 };
 
@@ -28328,6 +28329,7 @@ const NODE_MARGIN = 60;
 const NODE_WIDTH = 150;
 const NODE_HEIGHT = 118;
 const NODE_CIRCLE_SIZE = 72;
+const NODE_GATEWAY_SIZE = 60;
 const DIAGRAM_HEIGHT = 600;
 const SOCKET_WIDTH = 8;
 
@@ -28338,6 +28340,9 @@ const NODE_STATUS = {
     inProgress: 'inProgress',
     upcoming: 'upcoming',
     approved: 'approved',
+    suspended: 'suspended',
+    ready: 'ready',
+    canceled: 'canceled'
 };
 
 class DiagramPluginsService {
@@ -28365,7 +28370,7 @@ class BaseNodeClass extends ClassicPreset.Node {
         this.height = NODE_HEIGHT;
         this.directions = {
             inputs: IN_OUT_DIRECTION.start,
-            outputs: IN_OUT_DIRECTION.end,
+            outputs: IN_OUT_DIRECTION.end
         };
         this.name = config === null || config === void 0 ? void 0 : config.name;
         this.directions = (config === null || config === void 0 ? void 0 : config.directions) || this.directions;
@@ -28377,6 +28382,7 @@ class BaseNodeClass extends ClassicPreset.Node {
         this.content = config === null || config === void 0 ? void 0 : config.content;
         this.config = config === null || config === void 0 ? void 0 : config.config;
         this.styleClass = config === null || config === void 0 ? void 0 : config.styleClass;
+        this.options = config === null || config === void 0 ? void 0 : config.options;
     }
 }
 
@@ -28388,10 +28394,176 @@ class CircleNode extends BaseNodeClass {
     }
 }
 
+class DiagramUtils {
+    static createInputId(id, type = 'primary') {
+        return `${id}-${type}-input`;
+    }
+    static createOutputId(id, type = 'primary') {
+        return `${id}-${type}-output`;
+    }
+    static createInputClass(type = 'primary') {
+        return `input-${type}-port`;
+    }
+    static createOutputClass(type = 'primary') {
+        return `output-${type}-port`;
+    }
+    static createOutputsConfig(id, types) {
+        return types.map((type) => {
+            return {
+                id: DiagramUtils.createOutputId(id, type),
+                config: {
+                    styleClass: DiagramUtils.createOutputClass(type)
+                }
+            };
+        });
+    }
+    static createInputsConfig(id, types) {
+        return types.map((type) => {
+            return {
+                id: DiagramUtils.createInputId(id, type),
+                config: {
+                    styleClass: DiagramUtils.createInputClass(type)
+                }
+            };
+        });
+    }
+}
+
+function getRandomNumber(x, y, step = 1, min = 0, max = 1000) {
+    // Create a deterministic seed based on x and y
+    const seed = Math.abs(x * 31 + y * 17) % 100000;
+    // Generate a pseudo-random number based on the seed
+    const seededRandom = ((seed * 9301 + 49297) % 233280) / 233280;
+    // Calculate range
+    const range = Math.floor((max - min) / step) + 1;
+    // Return the adjusted number
+    return min + Math.floor(seededRandom * range) * step;
+}
+
+/**
+ *
+ * @param node
+ * @returns
+ */
+const removeNode = (data, editor) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!data || !editor) {
+        console.log('Node not found.');
+        return;
+    }
+    const nodes = editor.getNodes();
+    const node = editor.getNode(data.nodeId);
+    if (!node) {
+        console.log('Node not found.');
+        return;
+    }
+    if (node.type === NODE_TYPE.start && nodes.length > 1) {
+        return;
+    }
+    const nodeConfig = node.config;
+    return (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.isLinked)
+        ? yield removeNodeAndReplaceConnections(node, editor)
+        : yield removeNodeAndConnections(node, editor);
+});
+/**
+ *
+ * @param node
+ * @param editor
+ */
+const removeNodeAndConnections = (node, editor) => __awaiter(void 0, void 0, void 0, function* () {
+    removeConnections(node, editor);
+    yield editor.removeNode(node.id);
+});
+/**
+ *
+ * @param node
+ * @param editor
+ */
+const removeNodeAndReplaceConnections = (node, editor) => __awaiter(void 0, void 0, void 0, function* () {
+    const outputs = getConnections(editor, (connection) => connection.source == node.id);
+    const inputs = getConnections(editor, (connection) => connection.target == node.id);
+    if (!!inputs.length && !!outputs.length) {
+        yield _updateConnections(outputs, inputs, editor);
+    }
+    else {
+        removeConnections(node, editor);
+    }
+    yield editor.removeNode(node.id);
+});
+/**
+ *
+ * @param node
+ * @param editor
+ */
+const removeConnections = (node, editor) => {
+    const connections = getConnections(editor, (connection) => connection.source === node.id || connection.target === node.id);
+    if (connections.length) {
+        connections.forEach((connection) => {
+            editor.removeConnection(connection.id);
+        });
+    }
+};
+/**
+ *
+ * @param editor
+ * @param predicate
+ * @returns
+ */
+const getConnections = (editor, predicate) => {
+    return editor.getConnections().filter(predicate);
+};
+/**
+ *
+ * @param outputs
+ * @param inputs
+ * @param editor
+ */
+const _updateConnections = (outputs, inputs, editor) => __awaiter(void 0, void 0, void 0, function* () {
+    const source = inputs[0].source;
+    const target = outputs[0].target;
+    const sourceNode = editor.getNode(source);
+    const targetNode = editor.getNode(target);
+    [...outputs, ...inputs].forEach((connection) => __awaiter(void 0, void 0, void 0, function* () {
+        yield editor.removeConnection(connection.id);
+    }));
+    if (!sourceNode || !targetNode) {
+        return;
+    }
+    const connection = new Connection(sourceNode, targetNode);
+    yield editor.addConnection(connection);
+});
+
+function serializePort(port) {
+    return {
+        id: port.id,
+        label: port.label,
+        socket: {
+            name: port.socket.name,
+        },
+    };
+}
+function serializeControl(control) {
+    if (control instanceof ClassicPreset.InputControl) {
+        return {
+            __type: 'ClassicPreset.InputControl',
+            id: control.id,
+            readonly: control.readonly,
+            type: control.type,
+            value: control.value,
+        };
+    }
+    return null;
+}
+
 class Connection extends ClassicPreset.Connection {
-    constructor() {
-        super(...arguments);
-        this.renderType = 'default';
+    constructor(source, target, config) {
+        super(source, (config === null || config === void 0 ? void 0 : config.sourceOutput) || DiagramUtils.createOutputId(source.id), target, (config === null || config === void 0 ? void 0 : config.targetInput) || DiagramUtils.createInputId(target.id));
+        this.status = (config === null || config === void 0 ? void 0 : config.status) || target.status;
+        this.styleClass = config === null || config === void 0 ? void 0 : config.styleClass;
+        this.label = config === null || config === void 0 ? void 0 : config.label;
+        this.renderType = (config === null || config === void 0 ? void 0 : config.renderType) || 'default';
+        this.sourceNode = source;
+        this.targetNode = target;
+        this.direction = config === null || config === void 0 ? void 0 : config.direction;
     }
 }
 
@@ -28401,10 +28573,24 @@ class ContentNode extends BaseNodeClass {
     }
 }
 
+class OutputPort extends ClassicPreset.Output {
+    constructor(config) {
+        super(config.socket, config === null || config === void 0 ? void 0 : config.label, (config === null || config === void 0 ? void 0 : config.multipleConnections) !== false);
+        this.styleClass = config === null || config === void 0 ? void 0 : config.styleClass;
+    }
+}
+class InputPort extends ClassicPreset.Input {
+    constructor(config) {
+        super(config.socket, config === null || config === void 0 ? void 0 : config.label, (config === null || config === void 0 ? void 0 : config.multipleConnections) !== false);
+        this.styleClass = config === null || config === void 0 ? void 0 : config.styleClass;
+    }
+}
+
 class Socket extends ClassicPreset.Socket {
-    constructor(name, renderType = 'default') {
-        super(name);
-        this.renderType = renderType;
+    constructor(config) {
+        super(config.name);
+        this.renderType = (config === null || config === void 0 ? void 0 : config.renderType) || 'default';
+        this.styleClass = config === null || config === void 0 ? void 0 : config.styleClass;
     }
 }
 
@@ -28418,6 +28604,15 @@ class TemplateNode extends BaseNodeClass {
     }
 }
 
+class GateWayNode extends BaseNodeClass {
+    constructor(config) {
+        super(config);
+        this.type = NODE_TYPE.gateway;
+        this.width = NODE_GATEWAY_SIZE;
+        this.height = NODE_GATEWAY_SIZE;
+    }
+}
+
 /**
  *
  * @param config
@@ -28456,42 +28651,68 @@ const customizeConnection = (config) => (data) => {
 };
 const initNodeByType = (type, config) => {
     const _nodes = {
-        start: CircleNode,
-        content: ContentNode,
-        template: TemplateNode,
-        end: CircleNode,
+        [NODE_TYPE.start]: CircleNode,
+        [NODE_TYPE.content]: ContentNode,
+        [NODE_TYPE.template]: TemplateNode,
+        [NODE_TYPE.end]: CircleNode,
+        [NODE_TYPE.gateway]: GateWayNode
     };
     return new _nodes[type](config) || new ContentNode(config);
 };
 const initAngularComponentByType = (type) => {
     const _components = {
-        content: ContentNodeComponent,
-        start: CircleNodeComponent,
-        end: CircleNodeComponent,
-        template: TemplateNodeComponent,
+        [NODE_TYPE.content]: ContentNodeComponent,
+        [NODE_TYPE.start]: CircleNodeComponent,
+        [NODE_TYPE.end]: CircleNodeComponent,
+        [NODE_TYPE.template]: TemplateNodeComponent,
+        [NODE_TYPE.gateway]: GatewayNodeComponent
     };
     return _components[type] || NodeComponent;
 };
 
 const createSegmentedPath = (connection, options) => {
-    const { multiPoints = true, offset = 0 } = options || {};
+    var _a;
+    const { multiPoints = true, offset = 0 } = ((_a = options === null || options === void 0 ? void 0 : options.transform) === null || _a === void 0 ? void 0 : _a.options) || {};
+    const isVertical = !!(options === null || options === void 0 ? void 0 : options.vertical);
+    const direction = connection.direction;
     return (points) => {
         if (points.length !== 2) {
             throw new Error('Exactly two points are required to create a linear path.');
         }
         const [start, end] = points;
+        if (!isVertical) {
+            switch (direction) {
+                case 'down': {
+                    const offset = getRandomNumber(start.x, start.y, 10, 50, 150);
+                    const _points = [
+                        { x: start.x, y: start.y + offset },
+                        { x: end.x, y: end.y + offset }
+                    ];
+                    return [start, ..._points, end];
+                }
+                case 'backward': {
+                    const _points = [{ x: end.x, y: start.y }];
+                    return [start, ..._points, end];
+                }
+                case 'forward': {
+                    if (end.y < start.y) {
+                        const _points = [{ x: start.x, y: end.y }];
+                        return [start, ..._points, end];
+                    }
+                    break;
+                }
+            }
+        }
         if (multiPoints) {
             const midpointY = (end.y - start.y) / 2 + start.y;
             const intermediatePoints = [
                 { x: start.x, y: midpointY - offset },
-                { x: end.x, y: midpointY + offset },
+                { x: end.x, y: midpointY + offset }
             ];
-            // Use bezier curves between points to smooth corners
             return [
                 Object.assign(Object.assign({}, start), { controlOut: { x: start.x, y: midpointY - offset } }),
-                intermediatePoints[0],
-                intermediatePoints[1],
-                Object.assign(Object.assign({}, end), { controlIn: { x: end.x, y: midpointY + offset } }),
+                ...intermediatePoints,
+                Object.assign(Object.assign({}, end), { controlIn: { x: end.x, y: midpointY + offset } })
             ];
         }
         return [start, end];
@@ -28502,14 +28723,15 @@ const initPathPlugin = (config) => new ConnectionPathPlugin({
     curve: (c) => { var _a; return (_a = (c.curve || (config === null || config === void 0 ? void 0 : config.curve))) !== null && _a !== void 0 ? _a : curveLinear; },
     transformer: (c) => {
         var _a, _b, _c;
-        return ((_a = config === null || config === void 0 ? void 0 : config.transform) === null || _a === void 0 ? void 0 : _a.active)
-            ? createSegmentedPath(c, (_b = config === null || config === void 0 ? void 0 : config.transform) === null || _b === void 0 ? void 0 : _b.options)
-            : Transformers.classic({
-                vertical: !!(config === null || config === void 0 ? void 0 : config.vertical),
-                curvature: (_c = config === null || config === void 0 ? void 0 : config.curvature) !== null && _c !== void 0 ? _c : 0.3,
-            });
+        if ((_a = config === null || config === void 0 ? void 0 : config.transform) === null || _a === void 0 ? void 0 : _a.active) {
+            return (((_b = c === null || c === void 0 ? void 0 : c.createSegmentedPath) === null || _b === void 0 ? void 0 : _b.call(c, c, config)) || createSegmentedPath(c, config));
+        }
+        return Transformers.classic({
+            vertical: !!(config === null || config === void 0 ? void 0 : config.vertical),
+            curvature: (_c = config === null || config === void 0 ? void 0 : config.curvature) !== null && _c !== void 0 ? _c : 0.3
+        });
     },
-    arrow: (connection) => (!(config === null || config === void 0 ? void 0 : config.arrow) ? false : config === null || config === void 0 ? void 0 : config.arrow),
+    arrow: (connection) => (!(config === null || config === void 0 ? void 0 : config.arrow) ? false : config === null || config === void 0 ? void 0 : config.arrow)
 });
 
 const socketPositionWatcher = (offset = 1, isVertical = false, editor) => getDOMSocketPosition({
@@ -28519,9 +28741,9 @@ const socketPositionWatcher = (offset = 1, isVertical = false, editor) => getDOM
 });
 
 const createDiagramEditor = (container, injector, config) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     //#region PLUGINS
-    const socket = new Socket('', config === null || config === void 0 ? void 0 : config.socketType);
+    const socket = new Socket({ name: '', renderType: config === null || config === void 0 ? void 0 : config.socketType });
     const editor = new NodeEditor();
     const area = new AreaPlugin(container);
     const connection = new ConnectionPlugin();
@@ -28539,31 +28761,33 @@ const createDiagramEditor = (container, injector, config) => __awaiter(void 0, v
     RerouteExtensions.selectablePins(reroute, selector, accumulating);
     //#endregion
     //#region PRESETS
-    arrange.addPreset(Presets.classic.setup());
+    arrange.addPreset(((_b = config === null || config === void 0 ? void 0 : config.presets) === null || _b === void 0 ? void 0 : _b.arrange)
+        ? config === null || config === void 0 ? void 0 : config.presets.arrange(editor)
+        : Presets.classic.setup());
     angularRender.addPreset(Presets$1.classic.setup({
-        socketPositionWatcher: socketPositionWatcher(0, (_b = config === null || config === void 0 ? void 0 : config.path) === null || _b === void 0 ? void 0 : _b.vertical, editor),
+        socketPositionWatcher: socketPositionWatcher(0, (_c = config === null || config === void 0 ? void 0 : config.path) === null || _c === void 0 ? void 0 : _c.vertical, editor),
         customize: {
             node: customizeNode(config, editor),
             connection: customizeConnection(config),
-            socket: customizeSocket(config),
-        },
+            socket: customizeSocket(config)
+        }
     }));
-    angularRender.addPreset(Presets$1.minimap.setup({ size: ((_c = config === null || config === void 0 ? void 0 : config.minimap) === null || _c === void 0 ? void 0 : _c.size) || 150 }));
+    angularRender.addPreset(Presets$1.minimap.setup({ size: ((_d = config === null || config === void 0 ? void 0 : config.minimap) === null || _d === void 0 ? void 0 : _d.size) || 150 }));
     connection.addPreset(Presets$2.classic.setup());
-    if ((_d = config === null || config === void 0 ? void 0 : config.area) === null || _d === void 0 ? void 0 : _d.restrict) {
+    if ((_e = config === null || config === void 0 ? void 0 : config.area) === null || _e === void 0 ? void 0 : _e.restrict) {
         const _scaling = (config === null || config === void 0 ? void 0 : config.area.scaling) || { min: 0.5, max: 1.5 };
         AreaExtensions.restrictor(area, {
-            scaling: () => _scaling,
+            scaling: () => _scaling
         });
     }
     //#endregion
     //#region USE
-    if ((_e = config === null || config === void 0 ? void 0 : config.readonly) === null || _e === void 0 ? void 0 : _e.active) {
+    if ((_f = config === null || config === void 0 ? void 0 : config.readonly) === null || _f === void 0 ? void 0 : _f.active) {
         editor.use(readonly.root);
         area.use(readonly.area);
     }
     editor.use(area);
-    if (!((_f = config === null || config === void 0 ? void 0 : config.readonly) === null || _f === void 0 ? void 0 : _f.active)) {
+    if (!((_g = config === null || config === void 0 ? void 0 : config.readonly) === null || _g === void 0 ? void 0 : _g.active)) {
         // Don't use the connection plugin in readonly mode
         area.use(connection);
     }
@@ -28576,7 +28800,7 @@ const createDiagramEditor = (container, injector, config) => __awaiter(void 0, v
         //@ts-ignore
         angularRender.use(reroute);
     }
-    if ((_g = config === null || config === void 0 ? void 0 : config.minimap) === null || _g === void 0 ? void 0 : _g.active) {
+    if ((_h = config === null || config === void 0 ? void 0 : config.minimap) === null || _h === void 0 ? void 0 : _h.active) {
         area.use(minimap);
     }
     // Render Diagram
@@ -28590,130 +28814,16 @@ const createDiagramEditor = (container, injector, config) => __awaiter(void 0, v
             connection,
             arrange,
             reroute,
-            readonly,
+            readonly
         },
         destroy: () => area.destroy(),
         layout: (props) => arrange.layout(props),
         fitToZoom: () => {
             AreaExtensions.zoomAt(area, editor.getNodes());
-        },
+        }
     };
 });
 
-/**
- *
- * @param node
- * @returns
- */
-const removeNode = (data, editor) => __awaiter(void 0, void 0, void 0, function* () {
-    if (!data || !editor) {
-        console.log('Node not found.');
-        return;
-    }
-    const nodes = editor.getNodes();
-    const node = editor.getNode(data.nodeId);
-    if (!node) {
-        console.log('Node not found.');
-        return;
-    }
-    if (node.type === NODE_TYPE.start && nodes.length > 1) {
-        return;
-    }
-    const nodeConfig = node.config;
-    return (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.isLinked)
-        ? yield removeNodeAndReplaceConnections(node, editor)
-        : yield removeNodeAndConnections(node, editor);
-});
-/**
- *
- * @param node
- * @param editor
- */
-const removeNodeAndConnections = (node, editor) => __awaiter(void 0, void 0, void 0, function* () {
-    removeConnections(node, editor);
-    yield editor.removeNode(node.id);
-});
-/**
- *
- * @param node
- * @param editor
- */
-const removeNodeAndReplaceConnections = (node, editor) => __awaiter(void 0, void 0, void 0, function* () {
-    const outputs = getConnections(editor, (connection) => connection.source == node.id);
-    const inputs = getConnections(editor, (connection) => connection.target == node.id);
-    if (!!inputs.length && !!outputs.length) {
-        yield _updateConnections(outputs, inputs, editor);
-    }
-    else {
-        removeConnections(node, editor);
-    }
-    yield editor.removeNode(node.id);
-});
-/**
- *
- * @param node
- * @param editor
- */
-const removeConnections = (node, editor) => {
-    const connections = getConnections(editor, (connection) => connection.source === node.id || connection.target === node.id);
-    if (connections.length) {
-        connections.forEach((connection) => {
-            editor.removeConnection(connection.id);
-        });
-    }
-};
-/**
- *
- * @param editor
- * @param predicate
- * @returns
- */
-const getConnections = (editor, predicate) => {
-    return editor.getConnections().filter(predicate);
-};
-/**
- *
- * @param outputs
- * @param inputs
- * @param editor
- */
-const _updateConnections = (outputs, inputs, editor) => __awaiter(void 0, void 0, void 0, function* () {
-    const source = inputs[0].source;
-    const target = outputs[0].target;
-    const sourceNode = editor.getNode(source);
-    const targetNode = editor.getNode(target);
-    [...outputs, ...inputs].forEach((connection) => __awaiter(void 0, void 0, void 0, function* () {
-        yield editor.removeConnection(connection.id);
-    }));
-    if (!sourceNode || !targetNode) {
-        return;
-    }
-    const connection = new Connection(sourceNode, `${sourceNode.id}-output`, targetNode, `${targetNode.id}-input`);
-    yield editor.addConnection(connection);
-});
-
-function serializePort(port) {
-    return {
-        id: port.id,
-        label: port.label,
-        socket: {
-            name: port.socket.name,
-        },
-    };
-}
-function serializeControl(control) {
-    if (control instanceof ClassicPreset.InputControl) {
-        return {
-            __type: 'ClassicPreset.InputControl',
-            id: control.id,
-            readonly: control.readonly,
-            type: control.type,
-            value: control.value,
-        };
-    }
-    return null;
-}
-
 class DiagramService {
     /**
      *
@@ -28730,6 +28840,9 @@ class DiagramService {
         this.destroy = editor.destroy;
         this.fitToZoom = editor.fitToZoom;
     }
+    diagramClientRect() {
+        return this.plugins.area.container.getBoundingClientRect();
+    }
     getContentNodes() {
         return this.editor
             .getNodes()
@@ -28754,10 +28867,22 @@ class DiagramService {
     createNode(type = NODE_TYPE.content, config) {
         const _node = initNodeByType(type, config);
         if (config.type !== NODE_TYPE.start) {
-            this.createInputs(_node);
+            this.createInput(_node, DiagramUtils.createInputId(_node.id), {
+                styleClass: DiagramUtils.createInputClass()
+            });
         }
         if (config.type !== NODE_TYPE.end) {
-            this.createOutputs(_node);
+            this.createOutput(_node, DiagramUtils.createOutputId(_node.id), {
+                styleClass: DiagramUtils.createOutputClass()
+            });
+        }
+        if (config.type === NODE_TYPE.gateway) {
+            this._creteGatewayOutput(_node);
+        }
+        if ([NODE_TYPE.content, NODE_TYPE.template].includes(config.type)) {
+            const contentPorts = ['secondary', 'tertiary', 'quaternary'];
+            DiagramUtils.createInputsConfig(_node.id, contentPorts).forEach(({ id, config }) => this.createInput(_node, id, config));
+            DiagramUtils.createOutputsConfig(_node.id, contentPorts).forEach(({ id, config }) => this.createOutput(_node, id, config));
         }
         _node.notify = this.notifyListener(_node);
         return _node;
@@ -28770,6 +28895,18 @@ class DiagramService {
         const _isExist = _nodes.some((nd) => nd.type === NODE_TYPE.start);
         return !_isExist;
     }
+    getNode(id) {
+        return this.editor.getNode(id);
+    }
+    getNodes() {
+        return this.editor.getNodes();
+    }
+    getConnections() {
+        return this.editor.getConnections();
+    }
+    getConnection(id) {
+        return this.editor.getConnection(id);
+    }
     getLastNode() {
         const nodes = this.editor.getNodes();
         return nodes.length ? nodes[nodes.length - 1] : null;
@@ -28777,27 +28914,35 @@ class DiagramService {
     getNodesByType(type) {
         return this.editor.getNodes().filter((nd) => nd.type === type);
     }
+    getViewNodes() {
+        return Array.from(this.plugins.area.nodeViews.values());
+    }
     getLastViewNode() {
-        const nodes = Array.from(this.plugins.area.nodeViews.values());
+        const nodes = this.getViewNodes();
         return nodes.length ? nodes[nodes.length - 1] : null;
     }
-    createInputs(node) {
-        node.addInput(`${node.id}-input`, new ClassicPreset.Input(this.socket));
+    getViewNode(id) {
+        return this.plugins.area.nodeViews.get(id);
+    }
+    getViewNodePosition(id) {
+        const node = this.getViewNode(id);
+        return node ? node.position : null;
+    }
+    createInput(node, id = `${node.id}-input`, config) {
+        node.addInput(id, new InputPort(Object.assign({ socket: this.socket }, config)));
         return node;
     }
-    createOutputs(node) {
-        node.addOutput(`${node.id}-output`, new ClassicPreset.Output(this.socket, '', false));
+    createOutput(node, id = `${node.id}-output`, config) {
+        node.addOutput(id, new OutputPort(Object.assign({ socket: this.socket }, config)));
         return node;
     }
-    addConnection(sourceNode, targetNode) {
+    addConnection(sourceNode, targetNode, config) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.editor.addConnection(this.createConnection(sourceNode, targetNode));
+            yield this.editor.addConnection(this.createConnection(sourceNode, targetNode, config));
         });
     }
-    createConnection(sourceNode, targetNode) {
-        const connection = new Connection(sourceNode, `${sourceNode.id}-output`, targetNode, `${targetNode.id}-input`);
-        connection.status = targetNode.status;
-        return connection;
+    createConnection(sourceNode, targetNode, config) {
+        return new Connection(sourceNode, targetNode, config);
     }
     appendConnection(connection) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -28818,11 +28963,36 @@ class DiagramService {
         return (eventType, payload) => {
             var _a;
             const _actions = {
-                [NOTIFY_EVENT.remove]: this._removeNode.bind(this),
+                [NOTIFY_EVENT.remove]: this._removeNode.bind(this)
             };
             return (_a = _actions[eventType]) === null || _a === void 0 ? void 0 : _a.call(_actions, payload);
         };
     }
+    translateView() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { container, area } = this.plugins.area;
+            const rect = container.getBoundingClientRect();
+            const k = area.transform.k;
+            const delta = -0.2;
+            const ox = Math.max(0, (rect.left - container.clientWidth / 2) * k);
+            const oy = Math.max(0, (rect.top - container.clientHeight / 2) * k);
+            area.zoom(Math.max(0.1, k * (1 + delta)), ox * delta, oy * delta);
+        });
+    }
+    removeEndNode() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const node = this.getNodesByType(NODE_TYPE.end)[0];
+            if (node) {
+                yield removeNodeAndConnections(node, this.editor);
+            }
+        });
+    }
+    _creteGatewayOutput(_node) {
+        DiagramUtils.createOutputsConfig(_node.id, [
+            'secondary',
+            'tertiary'
+        ]).forEach((input) => this.createOutput(_node, input.id, input === null || input === void 0 ? void 0 : input.config));
+    }
     _removeNode(data) {
         return __awaiter(this, void 0, void 0, function* () {
             const node = this.editor.getNode(data.nodeId);
@@ -28860,17 +29030,6 @@ class DiagramService {
             this.plugins.readonly.enable();
         });
     }
-    translateView() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { container, area } = this.plugins.area;
-            const rect = container.getBoundingClientRect();
-            const k = area.transform.k;
-            const delta = -0.2;
-            const ox = Math.max(0, (rect.left - container.clientWidth / 2) * k);
-            const oy = Math.max(0, (rect.top - container.clientHeight / 2) * k);
-            area.zoom(Math.max(0.1, k * (1 + delta)), ox * delta, oy * delta);
-        });
-    }
 }
 DiagramService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramService, deps: [{ token: DiagramPluginsService }], target: i0.ɵɵFactoryTarget.Injectable });
 DiagramService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramService });
@@ -28909,9 +29068,6 @@ class WorkflowService {
         this._defaultNodeMargin = NODE_MARGIN;
         this._offset = 60;
     }
-    get _diagramClientRect() {
-        return this._plugins.area.container.getBoundingClientRect();
-    }
     setConfig(_config) {
         this._config = _config;
         this._message.sendMessage(MESSAGE_TYPE.configUpdated, _config);
@@ -28953,10 +29109,7 @@ class WorkflowService {
     }
     removeEndNode() {
         return __awaiter(this, void 0, void 0, function* () {
-            const node = this._diagram.getNodesByType(NODE_TYPE.end)[0];
-            if (node) {
-                yield removeNodeAndConnections(node, this._diagram.editor);
-            }
+            yield this._diagram.removeEndNode();
         });
     }
     /**
@@ -28969,7 +29122,7 @@ class WorkflowService {
         const isEndNode = _node.type === NODE_TYPE.end;
         return {
             x: this._calculatePositionX(lastNode.node.type, lastNode.viewNode.position.x),
-            y: this._calculatePositionY(isEndNode ? NODE_TYPE.end : lastNode.node.type, lastNode.viewNode.position.y),
+            y: this._calculatePositionY(isEndNode ? NODE_TYPE.end : lastNode.node.type, lastNode.viewNode.position.y)
         };
     }
     _createNode(nodeType, data, config) {
@@ -28987,7 +29140,8 @@ class WorkflowService {
                     return this._changeNodeSocketPosition(context);
                 }
             }
-            if (context.type === 'nodecreated' && context.data.type !== NODE_TYPE.end) {
+            if (context.type === 'nodecreated' &&
+                context.data.type !== NODE_TYPE.end) {
                 setTimeout(() => {
                     this._updateNodePosition(context);
                 });
@@ -29006,12 +29160,12 @@ class WorkflowService {
         }
         return Object.assign({}, context);
     }
-    _linkToLastNode(_addedNode) {
+    _linkToLastNode(_addedNode, connectionConfig) {
         return __awaiter(this, void 0, void 0, function* () {
             let node = this._diagram.getLastNode();
             let viewNode = this._diagram.getLastViewNode();
             if (node && viewNode) {
-                yield this._diagram.addConnection(node, _addedNode);
+                yield this._diagram.addConnection(node, _addedNode, connectionConfig);
                 return { node, viewNode };
             }
             return null;
@@ -29040,7 +29194,7 @@ class WorkflowService {
             const startNode = this._diagram.createNode(NODE_TYPE.start, {
                 type: NODE_TYPE.start,
                 label: NODE_TYPE.start,
-                name: 'start',
+                name: 'start'
             });
             yield this._diagram.addNode(startNode);
             yield this._plugins.area.translate(startNode.id, position);
@@ -29081,7 +29235,7 @@ class WorkflowService {
      */
     _isOverEndBoundary(node, previousNode) {
         var _a;
-        const _diagramWidth = Number((_a = this._diagramClientRect) === null || _a === void 0 ? void 0 : _a.width) - this._defaultNodeMargin;
+        const _diagramWidth = Number((_a = this._diagram.diagramClientRect()) === null || _a === void 0 ? void 0 : _a.width) - this._defaultNodeMargin;
         const _width = previousNode.position.x + (node.width + this._defaultNodeMargin) * 2;
         return _width >= _diagramWidth;
     }
@@ -29096,7 +29250,8 @@ class WorkflowService {
             this._defaultNodeWidth +
             this._defaultNodeMargin * 2 +
             this._offset;
-        const wrapLine = Number((_a = this._diagramClientRect) === null || _a === void 0 ? void 0 : _a.width) - this._defaultNodeWidth * 2;
+        const wrapLine = Number((_a = this._diagram.diagramClientRect()) === null || _a === void 0 ? void 0 : _a.width) -
+            this._defaultNodeWidth * 2;
         return currentPosition >= wrapLine;
     }
     _updateNodePosition(context) {
@@ -29105,7 +29260,7 @@ class WorkflowService {
             const _previousNode = this._diagram.getLastNode();
             const _nodeViewPosition = (_a = this._plugins.area.nodeViews.get(context.data.id)) === null || _a === void 0 ? void 0 : _a.position;
             if (_previousNode && _nodeViewPosition) {
-                const _diagramWidth = Number((_b = this._diagramClientRect) === null || _b === void 0 ? void 0 : _b.width);
+                const _diagramWidth = Number((_b = this._diagram.diagramClientRect()) === null || _b === void 0 ? void 0 : _b.width);
                 const _currentX = _nodeViewPosition.x + context.data.width;
                 if (_currentX >= _diagramWidth) {
                     this._plugins.readonly.disable();
@@ -29119,7 +29274,7 @@ class WorkflowService {
                     }
                     yield this._plugins.area.translate(context.data.id, {
                         x: x,
-                        y: _nodeViewPosition.y + this._defaultNodeMargin + context.data.height,
+                        y: _nodeViewPosition.y + this._defaultNodeMargin + context.data.height
                     });
                     this._plugins.readonly.enable();
                 }
@@ -29168,114 +29323,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-class RemoveButtonComponent {
-    constructor() {
-        this.remove = new EventEmitter();
-    }
-}
-RemoveButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RemoveButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RemoveButtonComponent, selector: "node-remove-button", outputs: { remove: "remove" }, ngImport: i0, template: `
-    <button
-      mat-icon-button
-      (click)="remove.emit()"
-      (pointerdown)="$event.stopPropagation()"
-      (dblclick)="$event.stopPropagation()"
-      class="remove-icon"
-    >
-      <mat-icon>close</mat-icon>
-    </button>
-  `, isInline: true, styles: ["\n      :host {\n        --size: var(--remove-icon-size, 30px);\n        position: var(--remove-icon-position, absolute);\n        inset: var(--remove-icon-inset, 0 0 auto auto);\n        opacity: var(--remove-icon-opacity, 0);\n        background: var(--remove-icon-background, inherit);\n        width: var(--size);\n        height: var(--size);\n        line-height: var(var(--remove-icon-size), calc(var(--size) - 6));\n        border-radius: 50%;\n        z-index: 2;\n        .remove-icon {\n          border: 1px solid currentColor;\n          border-radius: 50%;\n          width: var(--size);\n          height: var(--size);\n          line-height: var(--remove-icon-size, 30px);\n          background: var(--remove-icon-background, inherit);\n        }\n      }\n    "], components: [{ type: i1$8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'node-remove-button',
-                    template: `
-    <button
-      mat-icon-button
-      (click)="remove.emit()"
-      (pointerdown)="$event.stopPropagation()"
-      (dblclick)="$event.stopPropagation()"
-      class="remove-icon"
-    >
-      <mat-icon>close</mat-icon>
-    </button>
-  `,
-                    styles: [
-                        `
-      :host {
-        --size: var(--remove-icon-size, 30px);
-        position: var(--remove-icon-position, absolute);
-        inset: var(--remove-icon-inset, 0 0 auto auto);
-        opacity: var(--remove-icon-opacity, 0);
-        background: var(--remove-icon-background, inherit);
-        width: var(--size);
-        height: var(--size);
-        line-height: var(var(--remove-icon-size), calc(var(--size) - 6));
-        border-radius: 50%;
-        z-index: 2;
-        .remove-icon {
-          border: 1px solid currentColor;
-          border-radius: 50%;
-          width: var(--size);
-          height: var(--size);
-          line-height: var(--remove-icon-size, 30px);
-          background: var(--remove-icon-background, inherit);
-        }
-      }
-    `,
-                    ],
-                }]
-        }], propDecorators: { remove: [{
-                type: Output
-            }] } });
-
-class NodeInputsComponent {
-}
-NodeInputsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeInputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NodeInputsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeInputsComponent, selector: "node-inputs", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": " 'da-node__inputs inputs-' + direction" } }, ngImport: i0, template: `
-    <div
-      *ngFor="let input of data.inputs | keyvalue : sortByIndex"
-      class="da-node__inputs__socket"
-      style=" height: var(--socket-size, 16px);"
-      refComponent
-      [data]="{
-        type: 'socket',
-        side: 'input',
-        key: input.key,
-        nodeId: data.id,
-        payload: input.value?.socket,
-        seed: seed
-      }"
-      [emit]="emit"
-    ></div>
-  `, isInline: true, directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4$1.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeInputsComponent, decorators: [{
+class NodePortsComponent {
+}
+NodePortsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodePortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NodePortsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodePortsComponent, selector: "node-ports", inputs: { inputsDirection: "inputsDirection", outputsDirection: "outputsDirection", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": "'node-ports--inputs--' + inputsDirection + ' ' + 'node-ports--outputs--' + outputsDirection " }, classAttribute: "node-ports" }, ngImport: i0, template: `
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="node-port node-port--input  {{ input.value.styleClass }}"
+			refComponent
+			[title]="input.value.styleClass"
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+
+		<div
+			*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+			class="node-port node-port--output  {{ output.value.styleClass }}"
+			refComponent
+			[title]="output.value.styleClass"
+			[data]="{
+				type: 'socket',
+				side: 'output',
+				key: output.key,
+				nodeId: data.id,
+				payload: output.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`, isInline: true, styles: [".node-ports{--port-size: 16px;position:absolute;width:100%;height:100%}.node-port{position:absolute;inset-inline:var(--port-inset-inline);inset-block:var(--port-inset-block);display:inline-block;width:var(--port-size);height:var(--port-size)}.node-ports--inputs--start .input-primary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--start .input-secondary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--start .input-tertiary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--start .input-quaternary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--end .input-primary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--end .input-secondary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--end .input-tertiary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--end .input-quaternary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--top .input-primary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--top .input-secondary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--top .input-tertiary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--top .input-quaternary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--bottom .input-primary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--bottom .input-secondary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--bottom .input-tertiary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--bottom .input-quaternary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--outputs--top .output-primary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--top .output-secondary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--top .output-tertiary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--top .output-quaternary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--bottom .output-primary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--bottom .output-secondary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--bottom .output-tertiary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--bottom .output-quaternary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-primary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-secondary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--start .output-tertiary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-quaternary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--end .output-primary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--end .output-secondary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--end .output-tertiary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--end .output-quaternary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}\n"], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4$1.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodePortsComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'node-inputs',
+                    selector: 'node-ports',
                     encapsulation: ViewEncapsulation.None,
+                    styleUrls: ['../styles/ports.scss'],
                     host: {
-                        '[class]': " 'da-node__inputs inputs-' + direction",
+                        class: 'node-ports',
+                        '[class]': "'node-ports--inputs--' + inputsDirection + ' ' + 'node-ports--outputs--' + outputsDirection "
                     },
                     template: `
-    <div
-      *ngFor="let input of data.inputs | keyvalue : sortByIndex"
-      class="da-node__inputs__socket"
-      style=" height: var(--socket-size, 16px);"
-      refComponent
-      [data]="{
-        type: 'socket',
-        side: 'input',
-        key: input.key,
-        nodeId: data.id,
-        payload: input.value?.socket,
-        seed: seed
-      }"
-      [emit]="emit"
-    ></div>
-  `,
-                }]
-        }], propDecorators: { direction: [{
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="node-port node-port--input  {{ input.value.styleClass }}"
+			refComponent
+			[title]="input.value.styleClass"
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+
+		<div
+			*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+			class="node-port node-port--output  {{ output.value.styleClass }}"
+			refComponent
+			[title]="output.value.styleClass"
+			[data]="{
+				type: 'socket',
+				side: 'output',
+				key: output.key,
+				nodeId: data.id,
+				payload: output.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`
+                }]
+        }], propDecorators: { inputsDirection: [{
+                type: Input
+            }], outputsDirection: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -29287,64 +29417,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-class NodeOutputsComponent {
+class RemoveButtonComponent {
+    constructor() {
+        this.remove = new EventEmitter();
+    }
 }
-NodeOutputsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeOutputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NodeOutputsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeOutputsComponent, selector: "node-outputs", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": " 'da-node__outputs outputs-' + direction" } }, ngImport: i0, template: `<div
-    class="da-node__outputs__socket"
-    style=" height: var(--socket-size, 16px);"
-    *ngFor="let output of data.outputs | keyvalue : sortByIndex"
-    refComponent
-    [data]="{
-      type: 'socket',
-      side: 'output',
-      key: output.key,
-      nodeId: data.id,
-      payload: output.value?.socket,
-      seed: seed
-    }"
-    [emit]="emit"
-  ></div>`, isInline: true, directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4$1.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeOutputsComponent, decorators: [{
+RemoveButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RemoveButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RemoveButtonComponent, selector: "node-remove-button", outputs: { remove: "remove" }, ngImport: i0, template: `
+		<button
+			mat-icon-button
+			(click)="remove.emit()"
+			(pointerdown)="$event.stopPropagation()"
+			(dblclick)="$event.stopPropagation()"
+			class="remove-icon"
+		>
+			<mat-icon>close</mat-icon>
+		</button>
+	`, isInline: true, styles: ["\n\t\t\t:host {\n\t\t\t\t--size: var(--remove-icon-size, 30px);\n\t\t\t\tposition: var(--remove-icon-position, absolute);\n\t\t\t\tinset: var(--remove-icon-inset, 0 0 auto auto);\n\t\t\t\topacity: var(--remove-icon-opacity, 0);\n\t\t\t\tbackground: var(--remove-icon-background, #fff);\n\t\t\t\twidth: var(--size);\n\t\t\t\theight: var(--size);\n\t\t\t\tline-height: var(var(--remove-icon-size), calc(var(--size) - 6));\n\t\t\t\tborder-radius: var(--remove-icon-radius, 50%);\n\t\t\t\tz-index: 2;\n\t\t\t\t.remove-icon {\n\t\t\t\t\tborder: 1px solid currentColor;\n\t\t\t\t\tborder-radius: var(--remove-icon-radius, 50%);\n\t\t\t\t\twidth: var(--size);\n\t\t\t\t\theight: var(--size);\n\t\t\t\t\tline-height: var(--remove-icon-size, 24px);\n\t\t\t\t\tbackground: var(--remove-icon-background, #fff);\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\t\t\t}\n\t\t"], components: [{ type: i1$8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveButtonComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'node-outputs',
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': " 'da-node__outputs outputs-' + direction",
-                    },
-                    template: `<div
-    class="da-node__outputs__socket"
-    style=" height: var(--socket-size, 16px);"
-    *ngFor="let output of data.outputs | keyvalue : sortByIndex"
-    refComponent
-    [data]="{
-      type: 'socket',
-      side: 'output',
-      key: output.key,
-      nodeId: data.id,
-      payload: output.value?.socket,
-      seed: seed
-    }"
-    [emit]="emit"
-  ></div>`,
+                    selector: 'node-remove-button',
+                    template: `
+		<button
+			mat-icon-button
+			(click)="remove.emit()"
+			(pointerdown)="$event.stopPropagation()"
+			(dblclick)="$event.stopPropagation()"
+			class="remove-icon"
+		>
+			<mat-icon>close</mat-icon>
+		</button>
+	`,
+                    styles: [
+                        `
+			:host {
+				--size: var(--remove-icon-size, 30px);
+				position: var(--remove-icon-position, absolute);
+				inset: var(--remove-icon-inset, 0 0 auto auto);
+				opacity: var(--remove-icon-opacity, 0);
+				background: var(--remove-icon-background, #fff);
+				width: var(--size);
+				height: var(--size);
+				line-height: var(var(--remove-icon-size), calc(var(--size) - 6));
+				border-radius: var(--remove-icon-radius, 50%);
+				z-index: 2;
+				.remove-icon {
+					border: 1px solid currentColor;
+					border-radius: var(--remove-icon-radius, 50%);
+					width: var(--size);
+					height: var(--size);
+					line-height: var(--remove-icon-size, 24px);
+					background: var(--remove-icon-background, #fff);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+		`
+                    ]
                 }]
-        }], propDecorators: { direction: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], seed: [{
-                type: Input
-            }], emit: [{
-                type: Input
-            }], sortByIndex: [{
-                type: Input
+        }], propDecorators: { remove: [{
+                type: Output
             }] } });
 
 class CircleNodeComponent extends BaseNodeComponent {
 }
 CircleNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CircleNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CircleNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CircleNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"da-node da-node--{{ data.type }} circle-node circle-node--{{ data.type }} {{\r\n    data?.status ? ' da-node--' + data?.status : ''\r\n  }} \"\r\n  [style.--node-width]=\"data.width + 'px'\"\r\n  [style.--node-height]=\"data.width + 'px'\"\r\n>\r\n  <node-remove-button\r\n    (remove)=\"removeNode()\"\r\n    *ngIf=\"data.config?.canRemove\"\r\n  ></node-remove-button>\r\n\r\n  <div\r\n    class=\"da-node__title circle-node__title\"\r\n    [attr.tooltip]=\"data.content?.data?.tooltip\"\r\n    [class.node-tooltip]=\"!!data.content?.data?.tooltip\"\r\n  >\r\n    {{ 'diagram.' + data.name | translate }}\r\n  </div>\r\n\r\n  <node-inputs\r\n    [direction]=\"data.directions.inputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-inputs>\r\n\r\n  <node-outputs\r\n    [direction]=\"data.directions.outputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-outputs>\r\n</div>\r\n", styles: [".da-node{--width: var(--node-width);--height: var(--node-height);--socket-offset-negative: 0;--socket-position-start: var(--socket-offset-negative) auto;--socket-position-end: auto var(--socket-offset-negative);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer)}.da-node--draft{--node-color: var(--status-draft-color, #555);--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var(--status-draft-border, 1px solid #555);--node-shadow: var(--status-draft-shadow, unset)}.da-node--upcoming{--node-color: var(--status-upcoming-color, var(--Primary-100, #234990));--node-background: var( --status-upcoming-background, #fff );--node-border: var(--status-upcoming-border, 1px solid var(--node-color, #234990));--node-shadow: var(--status-upcoming-shadow, unset)}.da-node--inProgress{--node-color: var(--status-progress-color, var(--orange-color, #f29339));--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var(--status-progress-border, 1px solid var(--orange-color, #f29339));--node-shadow: var(--status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)))}.da-node--completed{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--approved{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--rejected{--node-color: var(--status-rejected-color, var(--red-color, #bf0b30));--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var(--status-rejected-border, 1px solid var(--red-color, #bf0b30));--node-shadow: var(--status-rejected-shadow, unset)}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node__inputs,.da-node__outputs{position:var(--input-output-position, absolute);inset-inline:var(--in-out-inset-inline);inset-block:var(--in-out-inset-block);height:var(--socket-size, 16px)}.da-node__inputs__socket,.da-node__outputs__socket{height:var(--socket-size, 16px)}.da-node__inputs.inputs-top{--in-out-inset-block: var(--socket-position-start)}.da-node__inputs.inputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__inputs.inputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__inputs.inputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node__outputs.outputs-top{--in-out-inset-block: var(--socket-offset-negative)}.da-node__outputs.outputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__outputs.outputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__outputs.outputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", ".circle-node{--node-radius: 50%}.circle-node__title.node-tooltip:after{content:attr(tooltip);position:absolute;left:50%;top:-6px;transform:translate(-50%) translateY(-100%);background:rgba(0,0,0,.7);text-align:center;color:#fff;padding:4px 2px;font-size:12px;min-width:100px;border-radius:5px;pointer-events:none;display:var(--tooltip-display, none)}.circle-node:hover{--tooltip-display: block}.da-node--end{border-width:3px}\n"], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: NodeInputsComponent, selector: "node-inputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }, { type: NodeOutputsComponent, selector: "node-outputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe } });
+CircleNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CircleNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n\tclass=\"da-node da-node--{{ data.type }} circle-node circle-node--{{\r\n\t\tdata.type\r\n\t}} {{ data?.status ? ' da-node--' + data?.status : '' }} \"\r\n\t[style.--node-width]=\"data.width + 'px'\"\r\n\t[style.--node-height]=\"data.width + 'px'\"\r\n>\r\n\t<node-ports\r\n\t\t[inputsDirection]=\"data.directions.inputs\"\r\n\t\t[outputsDirection]=\"data.directions.outputs\"\r\n\t\t[data]=\"data\"\r\n\t\t[seed]=\"seed\"\r\n\t\t[emit]=\"emit\"\r\n\t\t[sortByIndex]=\"sortByIndex\"\r\n\t></node-ports>\r\n\r\n\t<div class=\"da-node__content circle-node__content\">\r\n\t\t<node-remove-button\r\n\t\t\t(remove)=\"removeNode()\"\r\n\t\t\t*ngIf=\"data.config?.canRemove\"\r\n\t\t></node-remove-button>\r\n\r\n\t\t<div\r\n\t\t\tclass=\"da-node__title circle-node__title\"\r\n\t\t\t[attr.tooltip]=\"data.content?.data?.tooltip\"\r\n\t\t\t[class.node-tooltip]=\"!!data.content?.data?.tooltip\"\r\n\t\t>\r\n\t\t\t{{ 'diagram.' + data.name | translate }}\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [".da-node{--socket-size: 16px;--width: var(--node-width);--height: var(--node-height);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer);z-index:var(--node-z-index, 1)}.da-node--draft{--node-color: var( --status-draft-color, #555 );--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var( --status-draft-border, 1px solid #555 );--node-shadow: var( --status-draft-shadow, unset )}.da-node--upcoming{--node-color: var( --status-upcoming-color, var(--Primary-100, #234990) );--node-background: var( --status-upcoming-background, #fff );--node-border: var( --status-upcoming-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-upcoming-shadow, unset )}.da-node--ready{--node-color: var( --status-ready-color, var(--Primary-100, #234990) );--node-background: var( --status-ready-background, #fff );--node-border: var( --status-ready-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-ready-shadow, unset )}.da-node--suspended{--node-color: var( --status-suspended-color, var(--orange-color, #f29339) );--node-background: var( --status-suspended-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-suspended-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-suspended-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--inProgress{--node-color: var( --status-progress-color, var(--orange-color, #f29339) );--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-progress-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--completed{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--approved{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--rejected{--node-color: var( --status-rejected-color, var(--red-color, #bf0b30) );--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-rejected-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-rejected-shadow, unset )}.da-node--canceled{--node-color: var( --status-canceled-color, var(--red-color, #bf0b30) );--node-background: var( --status-canceled-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-canceled-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-canceled-shadow, unset )}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__content{width:calc(100% - var(--socket-size));height:calc(100% - var(--socket-size));display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);z-index:var(--node-z-index, 1)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", ".circle-node{--node-radius: 50%}.circle-node__title.node-tooltip:after{content:attr(tooltip);position:absolute;left:50%;top:-6px;transform:translate(-50%) translateY(-100%);background:rgba(0,0,0,.7);text-align:center;color:#fff;padding:4px 2px;font-size:12px;min-width:100px;border-radius:5px;pointer-events:none;display:var(--tooltip-display, none)}.circle-node:hover{--tooltip-display: block}.da-node--end{border-width:3px}\n"], components: [{ type: NodePortsComponent, selector: "node-ports", inputs: ["inputsDirection", "outputsDirection", "data", "seed", "emit", "sortByIndex"] }, { type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CircleNodeComponent, decorators: [{
             type: Component,
             args: [{
@@ -29353,6 +29493,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+class ConnectionLabelComponent {
+    constructor(_zone) {
+        this._zone = _zone;
+        this.transformStyle = '';
+        this.observer = new MutationObserver(() => {
+            this.calculatePosition();
+        });
+    }
+    ngAfterViewInit() {
+        if (!this.path) {
+            return;
+        }
+        this._zone.runOutsideAngular(() => {
+            this.observer.observe(this.path, {
+                attributes: true
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.observer.disconnect();
+    }
+    calculatePosition() {
+        const positionPoint = this._getPositionPoint();
+        this.labelContainer.nativeElement.style.transform = `translate(${positionPoint.x}px, ${positionPoint.y}px)`;
+    }
+    _getPositionPoint() {
+        const pathLength = this.path.getTotalLength();
+        const textWidth = 12 * `${this.text}`.length;
+        return this.position === 'center'
+            ? this.path.getPointAtLength(pathLength / 2)
+            : this.path.getPointAtLength((this.position === 'start' ? 0 : pathLength) +
+                (this.position === 'end' ? -1 : 1) * (textWidth / 2 + 20));
+    }
+}
+ConnectionLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConnectionLabelComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ConnectionLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ConnectionLabelComponent, selector: "app-connection-label", inputs: { path: "path", position: "position", text: "text" }, viewQueries: [{ propertyName: "labelContainer", first: true, predicate: ["labelContainer"], descendants: true, static: true }], ngImport: i0, template: ` <div
+		#labelContainer
+		[ngStyle]="{
+			position: 'absolute',
+			top: '0',
+			left: '0',
+			zIndex: ' var(--label-z-index, -1)'
+		}"
+	>
+		<div [ngClass]="{ 'label-text': !!text }">{{ text }}</div>
+	</div>`, isInline: true, styles: ["\n\t\t\t.label-text {\n\t\t\t\tposition: absolute;\n\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\tbackground: var(--c-label-background, #fff);\n\t\t\t\tcolor: var(--c-label-color, #333);\n\t\t\t\tborder-radius: var(--c-label-radius, 2em);\n\t\t\t\tpadding: var(--c-label-padding, 0.2em 0.6em);\n\t\t\t\tfont-size: var(--c-label-size, 0.7rem);\n\t\t\t\tborder: var(--c-label-border, 1px solid var(--path-color, #1b3e7f));\n\t\t\t\tz-index: var(--c-label-z-index, 0);\n\t\t\t\twhite-space: pre;\n\t\t\t}\n\t\t"], directives: [{ type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConnectionLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-connection-label',
+                    template: ` <div
+		#labelContainer
+		[ngStyle]="{
+			position: 'absolute',
+			top: '0',
+			left: '0',
+			zIndex: ' var(--label-z-index, -1)'
+		}"
+	>
+		<div [ngClass]="{ 'label-text': !!text }">{{ text }}</div>
+	</div>`,
+                    styles: [
+                        `
+			.label-text {
+				position: absolute;
+				transform: translate(-50%, -50%);
+				background: var(--c-label-background, #fff);
+				color: var(--c-label-color, #333);
+				border-radius: var(--c-label-radius, 2em);
+				padding: var(--c-label-padding, 0.2em 0.6em);
+				font-size: var(--c-label-size, 0.7rem);
+				border: var(--c-label-border, 1px solid var(--path-color, #1b3e7f));
+				z-index: var(--c-label-z-index, 0);
+				white-space: pre;
+			}
+		`
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { path: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], labelContainer: [{
+                type: ViewChild,
+                args: ['labelContainer', { static: true }]
+            }] } });
+
 class StatusIconComponent {
     getIcon() {
         switch (this.status) {
@@ -29420,7 +29649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class ContentNodeComponent extends BaseNodeComponent {
 }
 ContentNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ContentNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ContentNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ContentNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"da-node da-node--{{ data.type }} {{\r\n    data?.status ? ' da-node--' + data?.status : ''\r\n  }}  {{ data?.styleClass }}\"\r\n  [style.--node-width]=\"data.width + 'px'\"\r\n  [style.--node-height]=\"data.height + 'px'\"\r\n>\r\n  <node-remove-button (remove)=\"removeNode()\" *ngIf=\"data?.config?.canRemove\">\r\n  </node-remove-button>\r\n\r\n  <status-icon [status]=\"data?.status\" *ngIf=\"data?.status\"></status-icon>\r\n\r\n  <node-icon *ngIf=\"data.content?.icon\" [icon]=\"data.content?.icon\"></node-icon>\r\n\r\n  <div class=\"da-node__title\">{{ data.name }}</div>\r\n  <div class=\"da-node__description\" *ngIf=\"data.description\">\r\n    {{ data.description }}\r\n  </div>\r\n  <node-inputs\r\n    [direction]=\"data.directions.inputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-inputs>\r\n\r\n  <node-outputs\r\n    [direction]=\"data.directions.outputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-outputs>\r\n</div>\r\n", styles: [".da-node{--width: var(--node-width);--height: var(--node-height);--socket-offset-negative: 0;--socket-position-start: var(--socket-offset-negative) auto;--socket-position-end: auto var(--socket-offset-negative);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer)}.da-node--draft{--node-color: var(--status-draft-color, #555);--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var(--status-draft-border, 1px solid #555);--node-shadow: var(--status-draft-shadow, unset)}.da-node--upcoming{--node-color: var(--status-upcoming-color, var(--Primary-100, #234990));--node-background: var( --status-upcoming-background, #fff );--node-border: var(--status-upcoming-border, 1px solid var(--node-color, #234990));--node-shadow: var(--status-upcoming-shadow, unset)}.da-node--inProgress{--node-color: var(--status-progress-color, var(--orange-color, #f29339));--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var(--status-progress-border, 1px solid var(--orange-color, #f29339));--node-shadow: var(--status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)))}.da-node--completed{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--approved{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--rejected{--node-color: var(--status-rejected-color, var(--red-color, #bf0b30));--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var(--status-rejected-border, 1px solid var(--red-color, #bf0b30));--node-shadow: var(--status-rejected-shadow, unset)}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node__inputs,.da-node__outputs{position:var(--input-output-position, absolute);inset-inline:var(--in-out-inset-inline);inset-block:var(--in-out-inset-block);height:var(--socket-size, 16px)}.da-node__inputs__socket,.da-node__outputs__socket{height:var(--socket-size, 16px)}.da-node__inputs.inputs-top{--in-out-inset-block: var(--socket-position-start)}.da-node__inputs.inputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__inputs.inputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__inputs.inputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node__outputs.outputs-top{--in-out-inset-block: var(--socket-offset-negative)}.da-node__outputs.outputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__outputs.outputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__outputs.outputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n"], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: StatusIconComponent, selector: "status-icon", inputs: ["status"] }, { type: NodeIconComponent, selector: "node-icon", inputs: ["icon"] }, { type: NodeInputsComponent, selector: "node-inputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }, { type: NodeOutputsComponent, selector: "node-outputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ContentNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ContentNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n\tclass=\"da-node da-node--{{ data.type }} {{\r\n\t\tdata?.status ? ' da-node--' + data?.status : ''\r\n\t}}  {{ data?.styleClass }}\"\r\n\t[style.--node-width]=\"data.width + 'px'\"\r\n\t[style.--node-height]=\"data.height + 'px'\"\r\n>\r\n\t<node-ports\r\n\t\t[inputsDirection]=\"data.directions.inputs\"\r\n\t\t[outputsDirection]=\"data.directions.outputs\"\r\n\t\t[data]=\"data\"\r\n\t\t[seed]=\"seed\"\r\n\t\t[emit]=\"emit\"\r\n\t\t[sortByIndex]=\"sortByIndex\"\r\n\t></node-ports>\r\n\r\n\t<div class=\"da-node__content\">\r\n\t\t<node-remove-button (remove)=\"removeNode()\" *ngIf=\"data?.config?.canRemove\">\r\n\t\t</node-remove-button>\r\n\t\t<status-icon [status]=\"data?.status\" *ngIf=\"data?.status\"></status-icon>\r\n\r\n\t\t<node-icon\r\n\t\t\t*ngIf=\"data.content?.icon\"\r\n\t\t\t[icon]=\"data.content?.icon\"\r\n\t\t></node-icon>\r\n\r\n\t\t<div class=\"da-node__title\">{{ data.name }}</div>\r\n\t\t<div class=\"da-node__description\" *ngIf=\"data.description\">\r\n\t\t\t{{ data.description }}\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [".da-node{--socket-size: 16px;--width: var(--node-width);--height: var(--node-height);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer);z-index:var(--node-z-index, 1)}.da-node--draft{--node-color: var( --status-draft-color, #555 );--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var( --status-draft-border, 1px solid #555 );--node-shadow: var( --status-draft-shadow, unset )}.da-node--upcoming{--node-color: var( --status-upcoming-color, var(--Primary-100, #234990) );--node-background: var( --status-upcoming-background, #fff );--node-border: var( --status-upcoming-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-upcoming-shadow, unset )}.da-node--ready{--node-color: var( --status-ready-color, var(--Primary-100, #234990) );--node-background: var( --status-ready-background, #fff );--node-border: var( --status-ready-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-ready-shadow, unset )}.da-node--suspended{--node-color: var( --status-suspended-color, var(--orange-color, #f29339) );--node-background: var( --status-suspended-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-suspended-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-suspended-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--inProgress{--node-color: var( --status-progress-color, var(--orange-color, #f29339) );--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-progress-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--completed{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--approved{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--rejected{--node-color: var( --status-rejected-color, var(--red-color, #bf0b30) );--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-rejected-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-rejected-shadow, unset )}.da-node--canceled{--node-color: var( --status-canceled-color, var(--red-color, #bf0b30) );--node-background: var( --status-canceled-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-canceled-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-canceled-shadow, unset )}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__content{width:calc(100% - var(--socket-size));height:calc(100% - var(--socket-size));display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);z-index:var(--node-z-index, 1)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n"], components: [{ type: NodePortsComponent, selector: "node-ports", inputs: ["inputsDirection", "outputsDirection", "data", "seed", "emit", "sortByIndex"] }, { type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: StatusIconComponent, selector: "status-icon", inputs: ["status"] }, { type: NodeIconComponent, selector: "node-icon", inputs: ["icon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ContentNodeComponent, decorators: [{
             type: Component,
             args: [{
@@ -29430,81 +29659,354 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }] });
 
 class CustomConnectionComponent extends ConnectionComponent {
+    get pathNative() {
+        var _a;
+        return (_a = this.pathElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
+    }
+    get labelText() {
+        var _a, _b, _c;
+        return typeof ((_a = this.data) === null || _a === void 0 ? void 0 : _a.label) === 'string'
+            ? (_b = this.data) === null || _b === void 0 ? void 0 : _b.label
+            : (_c = this.data) === null || _c === void 0 ? void 0 : _c.label.text;
+    }
+    get labelPosition() {
+        return typeof this.data.label === 'string'
+            ? 'center'
+            : this.data.label.position;
+    }
 }
 CustomConnectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomConnectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CustomConnectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomConnectionComponent, selector: "connection", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: `
-    <svg
-      data-testid="connection"
-      style="z-index:-1"
-      class="{{ data?.status ? 'connection-status-' + data?.status : '' }}"
-    >
-      <path [attr.d]="path" />
-    </svg>
-  `, isInline: true, styles: ["\n      svg {\n        overflow: visible;\n        position: absolute;\n        pointer-events: none;\n        path {\n          fill: none;\n          stroke-width: 2px;\n          stroke: var(--path-color, #1b3e7f);\n          pointer-events: auto;\n        }\n      }\n    "] });
+CustomConnectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomConnectionComponent, selector: "connection", inputs: { data: "data" }, viewQueries: [{ propertyName: "pathElement", first: true, predicate: ["pathElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+		<svg
+			data-testid="connection"
+			style="z-index:-2"
+			class="{{ data?.status ? 'connection-status-' + data?.status : '' }} {{
+				data?.styleClass
+			}}"
+		>
+			<path [attr.d]="path" #pathElement />
+		</svg>
+		<app-connection-label
+			*ngIf="data?.label && pathNative"
+			[path]="pathNative"
+			[text]="labelText"
+			[position]="labelPosition"
+		></app-connection-label>
+	`, isInline: true, styles: ["\n\t\t\tsvg {\n\t\t\t\toverflow: visible;\n\t\t\t\tposition: absolute;\n\t\t\t\tpointer-events: none;\n\t\t\t\tpath {\n\t\t\t\t\tfill: none;\n\t\t\t\t\tstroke-width: 2px;\n\t\t\t\t\tstroke: var(--path-color, #1b3e7f);\n\t\t\t\t\tpointer-events: auto;\n\t\t\t\t}\n\t\t\t}\n\t\t"], components: [{ type: ConnectionLabelComponent, selector: "app-connection-label", inputs: ["path", "position", "text"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomConnectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'connection',
                     styles: [
                         `
-      svg {
-        overflow: visible;
-        position: absolute;
-        pointer-events: none;
-        path {
-          fill: none;
-          stroke-width: 2px;
-          stroke: var(--path-color, #1b3e7f);
-          pointer-events: auto;
-        }
-      }
-    `,
+			svg {
+				overflow: visible;
+				position: absolute;
+				pointer-events: none;
+				path {
+					fill: none;
+					stroke-width: 2px;
+					stroke: var(--path-color, #1b3e7f);
+					pointer-events: auto;
+				}
+			}
+		`
                     ],
                     template: `
-    <svg
-      data-testid="connection"
-      style="z-index:-1"
-      class="{{ data?.status ? 'connection-status-' + data?.status : '' }}"
-    >
-      <path [attr.d]="path" />
-    </svg>
-  `,
-                }]
-        }], propDecorators: { data: [{
+		<svg
+			data-testid="connection"
+			style="z-index:-2"
+			class="{{ data?.status ? 'connection-status-' + data?.status : '' }} {{
+				data?.styleClass
+			}}"
+		>
+			<path [attr.d]="path" #pathElement />
+		</svg>
+		<app-connection-label
+			*ngIf="data?.label && pathNative"
+			[path]="pathNative"
+			[text]="labelText"
+			[position]="labelPosition"
+		></app-connection-label>
+	`
+                }]
+        }], propDecorators: { pathElement: [{
+                type: ViewChild,
+                args: ['pathElement', { static: true }]
+            }], data: [{
                 type: Input
             }] } });
 
 class CustomSocketComponent extends SocketComponent {
 }
 CustomSocketComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomSocketComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CustomSocketComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomSocketComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: ["\n      :host {\n        display: inline-block;\n        cursor: pointer;\n        border: 1px solid var(--primary-color, #1b3e7f);\n        width: var(--socket-size, 16px);\n        height: var(--socket-size, 16px);\n        vertical-align: middle;\n        background: white;\n        z-index: 2;\n        box-sizing: border-box;\n        opacity: var(--socket-opacity, 0);\n        border-radius: var(--socket-radius, 50%);\n        &:hover {\n          box-shadow: 0 0 0 1px var(--primary-color, #1b3e7f);\n        }\n      }\n    "] });
+CustomSocketComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomSocketComponent, selector: "ng-component", host: { properties: { "class": "data?.styleClass" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: ["\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tcursor: pointer;\n\t\t\t\tborder: 1px solid var(--primary-color, #1b3e7f);\n\t\t\t\twidth: var(--socket-size, 16px);\n\t\t\t\theight: var(--socket-size, 16px);\n\t\t\t\tvertical-align: var(--socket-vertical-align, top);\n\t\t\t\tbackground: white;\n\t\t\t\tz-index: 2;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\topacity: var(--socket-opacity, 0);\n\t\t\t\tborder-radius: var(--socket-radius, 0);\n\t\t\t\t&:hover {\n\t\t\t\t\tbox-shadow: 0 0 0 1px var(--primary-color, #1b3e7f);\n\t\t\t\t}\n\t\t\t}\n\t\t"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomSocketComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
                     styles: [
                         `
-      :host {
-        display: inline-block;
-        cursor: pointer;
-        border: 1px solid var(--primary-color, #1b3e7f);
-        width: var(--socket-size, 16px);
-        height: var(--socket-size, 16px);
-        vertical-align: middle;
-        background: white;
-        z-index: 2;
-        box-sizing: border-box;
-        opacity: var(--socket-opacity, 0);
-        border-radius: var(--socket-radius, 50%);
-        &:hover {
-          box-shadow: 0 0 0 1px var(--primary-color, #1b3e7f);
-        }
-      }
-    `,
+			:host {
+				display: inline-block;
+				cursor: pointer;
+				border: 1px solid var(--primary-color, #1b3e7f);
+				width: var(--socket-size, 16px);
+				height: var(--socket-size, 16px);
+				vertical-align: var(--socket-vertical-align, top);
+				background: white;
+				z-index: 2;
+				box-sizing: border-box;
+				opacity: var(--socket-opacity, 0);
+				border-radius: var(--socket-radius, 0);
+				&:hover {
+					box-shadow: 0 0 0 1px var(--primary-color, #1b3e7f);
+				}
+			}
+		`
                     ],
+                    host: {
+                        '[class]': 'data?.styleClass'
+                    }
+                }]
+        }] });
+
+class GatewayPortsComponent {
+}
+GatewayPortsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GatewayPortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GatewayPortsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GatewayPortsComponent, selector: "gateway-ports", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, ngImport: i0, template: `
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="gateway-port gateway-port--input  {{ input.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+
+		<div
+			*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+			class="gateway-port gateway-port--output  {{ output.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'output',
+				key: output.key,
+				nodeId: data.id,
+				payload: output.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`, isInline: true, styles: ["\n\t\t\t.gateway-port {\n\t\t\t\t--socket-vertical-align: top;\n\t\t\t\t--width: var(--port-width, var(--socket-size, 14px));\n\t\t\t\t--height: var(--port-height, var(--socket-size, 14px));\n\t\t\t\tposition: absolute;\n\t\t\t\tinset-inline: var(--port-inset-inline);\n\t\t\t\tinset-block: var(--port-inset-block);\n\t\t\t\tdisplay: inline-block;\n\t\t\t\twidth: var(--width);\n\t\t\t\theight: var(--height);\n\t\t\t\t&.input-primary-port {\n\t\t\t\t\t--port-inset-inline: calc(var(--width) / -2) auto;\n\t\t\t\t\t--port-inset-block: calc(50% - var(--height) / 2) 0;\n\t\t\t\t}\n\t\t\t\t&.output-primary-port {\n\t\t\t\t\t--port-inset-inline: auto calc(var(--width) / -2);\n\t\t\t\t\t--port-inset-block: calc(50% - var(--height) / 2) auto;\n\t\t\t\t}\n\t\t\t\t&.output-secondary-port {\n\t\t\t\t\t--port-inset-inline: calc(50% - var(--width) / 2) auto;\n\t\t\t\t\t--port-inset-block: calc(var(--height) / -2) auto;\n\t\t\t\t}\n\t\t\t\t&.output-tertiary-port {\n\t\t\t\t\t--port-inset-inline: calc(50% - var(--width) / 2) 0;\n\t\t\t\t\t--port-inset-block: auto calc(var(--height) / -2);\n\t\t\t\t}\n\t\t\t}\n\t\t"], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4$1.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GatewayPortsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gateway-ports',
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="gateway-port gateway-port--input  {{ input.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+
+		<div
+			*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+			class="gateway-port gateway-port--output  {{ output.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'output',
+				key: output.key,
+				nodeId: data.id,
+				payload: output.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`,
+                    styles: [
+                        `
+			.gateway-port {
+				--socket-vertical-align: top;
+				--width: var(--port-width, var(--socket-size, 14px));
+				--height: var(--port-height, var(--socket-size, 14px));
+				position: absolute;
+				inset-inline: var(--port-inset-inline);
+				inset-block: var(--port-inset-block);
+				display: inline-block;
+				width: var(--width);
+				height: var(--height);
+				&.input-primary-port {
+					--port-inset-inline: calc(var(--width) / -2) auto;
+					--port-inset-block: calc(50% - var(--height) / 2) 0;
+				}
+				&.output-primary-port {
+					--port-inset-inline: auto calc(var(--width) / -2);
+					--port-inset-block: calc(50% - var(--height) / 2) auto;
+				}
+				&.output-secondary-port {
+					--port-inset-inline: calc(50% - var(--width) / 2) auto;
+					--port-inset-block: calc(var(--height) / -2) auto;
+				}
+				&.output-tertiary-port {
+					--port-inset-inline: calc(50% - var(--width) / 2) 0;
+					--port-inset-block: auto calc(var(--height) / -2);
+				}
+			}
+		`
+                    ]
+                }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], seed: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }], sortByIndex: [{
+                type: Input
+            }] } });
+
+class GatewayNodeComponent extends BaseNodeComponent {
+}
+GatewayNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GatewayNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GatewayNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GatewayNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n\tclass=\"da-node gateway-node--{{ data.type }} gateway-node {{\r\n\t\tdata?.status ? ' da-node--' + data?.status : ''\r\n\t}}\"\r\n\t[style.--node-width]=\"data.width + 'px'\"\r\n\t[style.--node-height]=\"data.width + 'px'\"\r\n>\r\n\t<div class=\"gateway-node__wrapper\">\r\n\t\t<node-remove-button\r\n\t\t\t(remove)=\"removeNode()\"\r\n\t\t\t*ngIf=\"data.config?.canRemove\"\r\n\t\t></node-remove-button>\r\n\t\t<div class=\"gateway-node__content\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"da-node__title gate-node__title\"\r\n\t\t\t\t[attr.tooltip]=\"data.content?.data?.tooltip\"\r\n\t\t\t\t[class.node-tooltip]=\"!!data.content?.data?.tooltip\"\r\n\t\t\t>\r\n\t\t\t\t{{ data.name }}\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<gateway-ports\r\n\t\tclass=\"gateway-node__ports\"\r\n\t\t[data]=\"data\"\r\n\t\t[seed]=\"seed\"\r\n\t\t[emit]=\"emit\"\r\n\t\t[sortByIndex]=\"sortByIndex\"\r\n\t></gateway-ports>\r\n</div>\r\n", styles: [".da-node{--socket-size: 16px;--width: var(--node-width);--height: var(--node-height);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer);z-index:var(--node-z-index, 1)}.da-node--draft{--node-color: var( --status-draft-color, #555 );--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var( --status-draft-border, 1px solid #555 );--node-shadow: var( --status-draft-shadow, unset )}.da-node--upcoming{--node-color: var( --status-upcoming-color, var(--Primary-100, #234990) );--node-background: var( --status-upcoming-background, #fff );--node-border: var( --status-upcoming-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-upcoming-shadow, unset )}.da-node--ready{--node-color: var( --status-ready-color, var(--Primary-100, #234990) );--node-background: var( --status-ready-background, #fff );--node-border: var( --status-ready-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-ready-shadow, unset )}.da-node--suspended{--node-color: var( --status-suspended-color, var(--orange-color, #f29339) );--node-background: var( --status-suspended-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-suspended-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-suspended-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--inProgress{--node-color: var( --status-progress-color, var(--orange-color, #f29339) );--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-progress-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--completed{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--approved{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--rejected{--node-color: var( --status-rejected-color, var(--red-color, #bf0b30) );--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-rejected-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-rejected-shadow, unset )}.da-node--canceled{--node-color: var( --status-canceled-color, var(--red-color, #bf0b30) );--node-background: var( --status-canceled-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-canceled-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-canceled-shadow, unset )}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__content{width:calc(100% - var(--socket-size));height:calc(100% - var(--socket-size));display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);z-index:var(--node-z-index, 1)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", ".gateway-node{--node-radius: 0;--angle: 45deg;--socket-radius: 0;border-width:0;background:transparent}.gateway-node__wrapper{width:calc(100% - var(--socket-size, 14px));height:calc(100% - var(--socket-size, 14px));transform:rotate(var(--angle));border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius);background:var(--node-background, #fff)}.gateway-node__content{--rotate: calc(var(--angle) * -1);transform:rotate(var(--rotate));height:100%;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}\n"], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: GatewayPortsComponent, selector: "gateway-ports", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GatewayNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './gateway-node.component.html',
+                    styleUrls: ['../../styles/node.scss', './gateway-node.component.scss']
                 }]
         }] });
 
+class NodeInputsComponent {
+}
+NodeInputsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeInputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NodeInputsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeInputsComponent, selector: "node-inputs", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": " 'node-ports node-ports--inputs  node-ports--' + direction" } }, ngImport: i0, template: `
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="node-ports__port {{ input.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`, isInline: true, styles: [".node-ports{--port-size: 16px;position:absolute;width:100%;height:100%}.node-port{position:absolute;inset-inline:var(--port-inset-inline);inset-block:var(--port-inset-block);display:inline-block;width:var(--port-size);height:var(--port-size)}.node-ports--inputs--start .input-primary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--start .input-secondary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--start .input-tertiary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--start .input-quaternary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--end .input-primary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--end .input-secondary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--end .input-tertiary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--end .input-quaternary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--top .input-primary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--top .input-secondary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--top .input-tertiary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--top .input-quaternary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--bottom .input-primary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--bottom .input-secondary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--bottom .input-tertiary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--bottom .input-quaternary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--outputs--top .output-primary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--top .output-secondary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--top .output-tertiary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--top .output-quaternary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--bottom .output-primary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--bottom .output-secondary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--bottom .output-tertiary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--bottom .output-quaternary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-primary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-secondary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--start .output-tertiary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-quaternary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--end .output-primary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--end .output-secondary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--end .output-tertiary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--end .output-quaternary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}\n"], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4$1.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeInputsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'node-inputs',
+                    encapsulation: ViewEncapsulation.None,
+                    styleUrls: ['../styles/ports.scss'],
+                    host: {
+                        '[class]': " 'node-ports node-ports--inputs  node-ports--' + direction"
+                    },
+                    template: `
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="node-ports__port {{ input.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`
+                }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], seed: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }], sortByIndex: [{
+                type: Input
+            }] } });
+
+class NodeOutputsComponent {
+}
+NodeOutputsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeOutputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NodeOutputsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeOutputsComponent, selector: "node-outputs", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": " 'node-ports node-ports--outputs  node-ports--' + direction" } }, ngImport: i0, template: `<div
+		class="node-ports__port {{ output.value.styleClass }}"
+		*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+		refComponent
+		[data]="{
+			type: 'socket',
+			side: 'output',
+			key: output.key,
+			nodeId: data.id,
+			payload: output.value?.socket,
+			seed: seed
+		}"
+		[emit]="emit"
+	></div>`, isInline: true, styles: [".node-ports{--port-size: 16px;position:absolute;width:100%;height:100%}.node-port{position:absolute;inset-inline:var(--port-inset-inline);inset-block:var(--port-inset-block);display:inline-block;width:var(--port-size);height:var(--port-size)}.node-ports--inputs--start .input-primary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--start .input-secondary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--start .input-tertiary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--start .input-quaternary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--end .input-primary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--end .input-secondary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--end .input-tertiary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--end .input-quaternary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--top .input-primary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--top .input-secondary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--top .input-tertiary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--top .input-quaternary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--bottom .input-primary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--bottom .input-secondary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--bottom .input-tertiary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--bottom .input-quaternary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--outputs--top .output-primary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--top .output-secondary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--top .output-tertiary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--top .output-quaternary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--bottom .output-primary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--bottom .output-secondary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--bottom .output-tertiary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--bottom .output-quaternary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-primary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-secondary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--start .output-tertiary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-quaternary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--end .output-primary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--end .output-secondary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--end .output-tertiary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--end .output-quaternary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}\n"], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4$1.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeOutputsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'node-outputs',
+                    encapsulation: ViewEncapsulation.None,
+                    styleUrls: ['../styles/ports.scss'],
+                    host: {
+                        '[class]': " 'node-ports node-ports--outputs  node-ports--' + direction"
+                    },
+                    template: `<div
+		class="node-ports__port {{ output.value.styleClass }}"
+		*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+		refComponent
+		[data]="{
+			type: 'socket',
+			side: 'output',
+			key: output.key,
+			nodeId: data.id,
+			payload: output.value?.socket,
+			seed: seed
+		}"
+		[emit]="emit"
+	></div>`
+                }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], seed: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }], sortByIndex: [{
+                type: Input
+            }] } });
+
 class TemplateNodeComponent extends BaseNodeComponent {
     ngOnInit() { }
     get templateOutletContext() {
@@ -29521,7 +30023,7 @@ class TemplateNodeComponent extends BaseNodeComponent {
     }
 }
 TemplateNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TemplateNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplateNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"da-node da-node--{{ data.type }} {{\r\n    data?.status ? ' da-node--' + data?.status : ''\r\n  }} {{ data?.styleClass }}\"\r\n  [style.--node-width]=\"data.width + 'px'\"\r\n  [style.--node-height]=\"data.height + 'px'\"\r\n>\r\n  <node-remove-button (remove)=\"removeNode()\" *ngIf=\"data?.config?.canRemove\">\r\n  </node-remove-button>\r\n\r\n  <node-icon\r\n    *ngIf=\"data.content?.icon\"\r\n    [icon]=\"data.content?.icon\"\r\n    class=\"da-node__icon\"\r\n  ></node-icon>\r\n\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"data?.template || defaultTemplate\"\r\n    [ngTemplateOutletContext]=\"templateOutletContext\"\r\n  ></ng-container>\r\n\r\n  <ng-template #defaultTemplate>\r\n    <div class=\"da-node__title\">{{ data?.name }}</div>\r\n  </ng-template>\r\n\r\n  <node-inputs\r\n    [direction]=\"data.directions.inputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-inputs>\r\n\r\n  <node-outputs\r\n    [direction]=\"data.directions.outputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-outputs>\r\n</div>\r\n", styles: [".da-node{--width: var(--node-width);--height: var(--node-height);--socket-offset-negative: 0;--socket-position-start: var(--socket-offset-negative) auto;--socket-position-end: auto var(--socket-offset-negative);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer)}.da-node--draft{--node-color: var(--status-draft-color, #555);--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var(--status-draft-border, 1px solid #555);--node-shadow: var(--status-draft-shadow, unset)}.da-node--upcoming{--node-color: var(--status-upcoming-color, var(--Primary-100, #234990));--node-background: var( --status-upcoming-background, #fff );--node-border: var(--status-upcoming-border, 1px solid var(--node-color, #234990));--node-shadow: var(--status-upcoming-shadow, unset)}.da-node--inProgress{--node-color: var(--status-progress-color, var(--orange-color, #f29339));--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var(--status-progress-border, 1px solid var(--orange-color, #f29339));--node-shadow: var(--status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)))}.da-node--completed{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--approved{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--rejected{--node-color: var(--status-rejected-color, var(--red-color, #bf0b30));--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var(--status-rejected-border, 1px solid var(--red-color, #bf0b30));--node-shadow: var(--status-rejected-shadow, unset)}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node__inputs,.da-node__outputs{position:var(--input-output-position, absolute);inset-inline:var(--in-out-inset-inline);inset-block:var(--in-out-inset-block);height:var(--socket-size, 16px)}.da-node__inputs__socket,.da-node__outputs__socket{height:var(--socket-size, 16px)}.da-node__inputs.inputs-top{--in-out-inset-block: var(--socket-position-start)}.da-node__inputs.inputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__inputs.inputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__inputs.inputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node__outputs.outputs-top{--in-out-inset-block: var(--socket-offset-negative)}.da-node__outputs.outputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__outputs.outputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__outputs.outputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", "\n      :host {\n        display: block;\n      }\n    "], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: NodeIconComponent, selector: "node-icon", inputs: ["icon"] }, { type: NodeInputsComponent, selector: "node-inputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }, { type: NodeOutputsComponent, selector: "node-outputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+TemplateNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplateNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n\tclass=\"da-node da-node--{{ data.type }} {{\r\n\t\tdata?.status ? ' da-node--' + data?.status : ''\r\n\t}} {{ data?.styleClass }}\"\r\n\t[style.--node-width]=\"data.width + 'px'\"\r\n\t[style.--node-height]=\"data.height + 'px'\"\r\n>\r\n\t<node-ports\r\n\t\t[inputsDirection]=\"data.directions.inputs\"\r\n\t\t[outputsDirection]=\"data.directions.outputs\"\r\n\t\t[data]=\"data\"\r\n\t\t[seed]=\"seed\"\r\n\t\t[emit]=\"emit\"\r\n\t\t[sortByIndex]=\"sortByIndex\"\r\n\t></node-ports>\r\n\t<div class=\"da-node__content\">\r\n\t\t<node-remove-button (remove)=\"removeNode()\" *ngIf=\"data?.config?.canRemove\">\r\n\t\t</node-remove-button>\r\n\r\n\t\t<node-icon\r\n\t\t\t*ngIf=\"data.content?.icon\"\r\n\t\t\t[icon]=\"data.content?.icon\"\r\n\t\t\tclass=\"da-node__icon\"\r\n\t\t></node-icon>\r\n\r\n\t\t<ng-container\r\n\t\t\t[ngTemplateOutlet]=\"data?.template || defaultTemplate\"\r\n\t\t\t[ngTemplateOutletContext]=\"templateOutletContext\"\r\n\t\t></ng-container>\r\n\r\n\t\t<ng-template #defaultTemplate>\r\n\t\t\t<div class=\"da-node__title\">{{ data?.name }}</div>\r\n\t\t</ng-template>\r\n\t</div>\r\n</div>\r\n", styles: [".da-node{--socket-size: 16px;--width: var(--node-width);--height: var(--node-height);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer);z-index:var(--node-z-index, 1)}.da-node--draft{--node-color: var( --status-draft-color, #555 );--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var( --status-draft-border, 1px solid #555 );--node-shadow: var( --status-draft-shadow, unset )}.da-node--upcoming{--node-color: var( --status-upcoming-color, var(--Primary-100, #234990) );--node-background: var( --status-upcoming-background, #fff );--node-border: var( --status-upcoming-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-upcoming-shadow, unset )}.da-node--ready{--node-color: var( --status-ready-color, var(--Primary-100, #234990) );--node-background: var( --status-ready-background, #fff );--node-border: var( --status-ready-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-ready-shadow, unset )}.da-node--suspended{--node-color: var( --status-suspended-color, var(--orange-color, #f29339) );--node-background: var( --status-suspended-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-suspended-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-suspended-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--inProgress{--node-color: var( --status-progress-color, var(--orange-color, #f29339) );--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-progress-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--completed{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--approved{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--rejected{--node-color: var( --status-rejected-color, var(--red-color, #bf0b30) );--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-rejected-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-rejected-shadow, unset )}.da-node--canceled{--node-color: var( --status-canceled-color, var(--red-color, #bf0b30) );--node-background: var( --status-canceled-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-canceled-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-canceled-shadow, unset )}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__content{width:calc(100% - var(--socket-size));height:calc(100% - var(--socket-size));display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);z-index:var(--node-z-index, 1)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", "\n      :host {\n        display: block;\n      }\n    "], components: [{ type: NodePortsComponent, selector: "node-ports", inputs: ["inputsDirection", "outputsDirection", "data", "seed", "emit", "sortByIndex"] }, { type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: NodeIconComponent, selector: "node-icon", inputs: ["icon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateNodeComponent, decorators: [{
             type: Component,
             args: [{
@@ -29627,8 +30129,7 @@ class DiagramDirective {
         return __awaiter(this, void 0, void 0, function* () {
             this._appendZoomComponent();
             try {
-                const editor = yield createDiagramEditor(this._elementRef.nativeElement, this._injector, this.config //TODO it's Should be merged with DIAGRAM_DEFAULT_OPTIONS
-                );
+                const editor = yield createDiagramEditor(this._elementRef.nativeElement, this._injector, this.config);
                 this._pluginsService.setPlugins(editor);
                 this._diagramService.setEditor(editor);
                 this.diagramEditor = editor;
@@ -29640,12 +30141,16 @@ class DiagramDirective {
         });
     }
     _appendStyles() {
+        var _a, _b;
         const _requiredStyles = {
             position: 'var(--diagram-position, relative)',
             width: `var(--diagram-width, ${this.width})`,
             height: `var(--diagram-height, ${this.height})`,
-            direction: 'ltr',
+            direction: 'ltr'
         };
+        if ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.readonly) === null || _b === void 0 ? void 0 : _b.active) {
+            this._elementRef.nativeElement.style.setProperty('--port-offset', 'var(--custom-diagram-port-offset , calc(50% - 8px))');
+        }
         Object.entries(_requiredStyles).forEach(([key, value]) => {
             this._renderer.setStyle(this._elementRef.nativeElement, key, value);
         });
@@ -29657,7 +30162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Directive,
             args: [{
                     selector: '[appDiagram]',
-                    exportAs: 'diagram',
+                    exportAs: 'diagram'
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: DiagramService }, { type: DiagramPluginsService }]; }, propDecorators: { height: [{
                 type: Input
@@ -29685,7 +30190,11 @@ DiagramsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         NodeIconComponent,
         StatusIconComponent,
         NodeInputsComponent,
-        NodeOutputsComponent], imports: [CommonModule,
+        NodeOutputsComponent,
+        GatewayNodeComponent,
+        ConnectionLabelComponent,
+        NodePortsComponent,
+        GatewayPortsComponent], imports: [CommonModule,
         ReteModule,
         MatButtonModule,
         MatIconModule,
@@ -29699,7 +30208,7 @@ DiagramsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             MatIconModule,
             FormsModule,
             TranslateModule,
-            MatTooltipModule,
+            MatTooltipModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramsModule, decorators: [{
             type: NgModule,
@@ -29717,6 +30226,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         StatusIconComponent,
                         NodeInputsComponent,
                         NodeOutputsComponent,
+                        GatewayNodeComponent,
+                        ConnectionLabelComponent,
+                        NodePortsComponent,
+                        GatewayPortsComponent
                     ],
                     imports: [
                         CommonModule,
@@ -29725,10 +30238,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         MatIconModule,
                         FormsModule,
                         TranslateModule,
-                        MatTooltipModule,
+                        MatTooltipModule
                     ],
                     exports: [DiagramDirective, ZoomControlComponent],
-                    providers: [DiagramService, DiagramPluginsService, WorkflowService],
+                    providers: [DiagramService, DiagramPluginsService, WorkflowService]
                 }]
         }] });
 
@@ -31762,5 +32275,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActivitiesLogComponent, ActivitiesLogModule, ActivityLineComponent, AdapterService, AddPermissionsDialogComponent, AddToCollectionComponent, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AvatarComponent, AvatarModule, BaseColumnComponent, BaseComponent, BaseDialogComponent, BaseNodeClass, BaseSelector, BaseService, BooleanViewerComponent, ButtonComponent, CachingExpiryUnit, CallApiService, CardComponent, CardModule, ChartDataService, CircleNode, CircleNodeComponent, ClickOutsideDirective, ClipboardComponent, CommentApiService, CommentsDashletComponent, CommentsModule, ComponentRegisterService, ComponentTranslationModel, ConfirmCallerDialogComponent, ConfirmCallerModule, ConfirmDialogComponent, ConfirmationDialogComponent, ConfirmationDialogModule, Connection, ContentActionType, ContentNode, ContentNodeComponent, CopyComponent, CorrespondenceRelationComponent, CorrespondenceRelationModule, CorrespondenceRelationService, CorrespondenceTagsComponent, CreateDirectoryComponent, CreateEntityComponent, CreateEntityModule, CreateModalComponent, CreationTypeComponent, CtsTagsModule, CustomConnectionComponent, CustomDocumentViewerComponent, CustomPpViewerComponent, CustomSocketComponent, CustomToastrModule, CustomToastrService, CutomeVocViewerComponent, DIAGRAM_DEFAULT_OPTIONS, DIAGRAM_HEIGHT, DataViewerComponent, DateFormatterService, DateHelperService, DateViewerComponent, DeleteComponent, DepartmentApiService, DepartmentFormComponent, DepartmentManagementService, DepartmentViewerComponent, DestroySubject$1 as DestroySubject, DiagramDirective, DiagramPluginsService, DiagramService, DiagramsModule, DialogMangmentService, DirectiveModule, DisplaySuitableIconComponent, DisplaySuitableIconModule, DocumentScanService, DocumentTemplatesConstants, DocumentTemplatesService, DocumentUploadComponent, DocumentsComponent, DocumentsConstants, DocumentsListComponent, DocumentsModule, DocumentsService, DragAndDropDirective, DropdownViewerComponent, DynamicChartComponent, DynamicChartModule, DynamicColumnComponent, DynamicFieldsRendererComponent, DynamicFieldsRendererModule, DynamicFilterComponent, DynamicFilterModule, DynamicFormBoolItemComponent, DynamicFormBuilderComponent, DynamicFormCheckboxItemComponent, DynamicFormComponent, DynamicFormDateItemComponent, DynamicFormDepartmentComponent, DynamicFormFieldComponent, DynamicFormHijriDateitemComponent, DynamicFormMapItemComponent, DynamicFormModule, DynamicFormOptionsComponent, DynamicFormSelectItemComponent, DynamicFormSelectTagComponent, DynamicFormSelectUserFilterComponent, DynamicFormSelectUsersComponent, DynamicFormService, DynamicFormSlideToggleitemComponent, DynamicFormTextItemComponent, DynamicFormTextareaComponent, DynamicFormViewerComponent, DynamicFormVocabularyItemComponent, DynamicSearchComponent, DynamicSearchModule, DynamicSingleChartComponent, DynamicTableComponent, DynamicTableModule, DynamicTableService, DynamicTabsComponent, DynamicTabsModule, DynamicViewModule, ENTITY_TYPE, EXTENSION_JSONS, EnvManager, EvaluatorsService, ExtensionLoaderService, ExtensionService, FILTER_DATES_TYPE, FileGridInfiniteScrollDirective, FileManagerAbstract, FileManagerAdapter, FileManagerPaginationConfig, FileManagerService, FileMangerModule, FileSizePipe, FilterComponent, FilterModule, FolderModalComponent, FolderishType, FormBuilderService, GlobalAdminService, GlobalPdfTron, GregorianDatepickerComponent, HijriDatePipe, HijriDatepickerComponent, HijriGregorianDatepickerComponent, IN_OUT_DIRECTION, IconService, InitializationService, ItemListComponent, Lang, LatestActivityComponent, LatestActivityModule, LibrarySharedModule, ListViewerComponent, LoanRequestComponent, LocalStoragService, LocalizedDatePipe, MESSAGE_TYPE, MY_MOMENT_FORMATS, MainfolderService, MessageService, MomentDateAdapter, MoveComponent, MultiValuePipe, MultipleDynamicFormViewerComponent, MutipleDynamicFormViewerModule, NODE_CIRCLE_SIZE, NODE_HEIGHT, NODE_MARGIN, NODE_STATUS, NODE_TYPE, NODE_WIDTH, NOTIFICATIONS_LIST_OPTIONS, NOTIFICATION_ICON, NOTIFICATION_ITEM, NOTIFICATION_STATUS, NOTIFY_EVENT, NdfConfirmationDialogComponent, NdfNuxeoDialog, NgxHijriGregorianDatepickerModule, NoDataComponent, NodeIconComponent, NodeInputsComponent, NodeOutputsComponent, NotificationIconDirective, NotificationItemComponent, NotificationItemDirective, NotificationSourceSelectComponent, NotificationStatusToggleComponent, NotificationToastComponent, NotificationsButtonComponent, NotificationsDateSelectComponent, NotificationsListComponent, NotificationsListContainerComponent, NotificationsModule, NotificationsService, NotificationsSettingsContainerComponent, NuxeoCoreModule, NuxeoDevelopmentFrameworkComponent, NuxeoDevelopmentFrameworkModule, NuxeoDevelopmentFrameworkService, NuxeoDialogModule, NuxeoDialogService, NuxeoMapper, NuxeoService, PAGINATION_MODE, PANEL_MODE, PaginationComponent, PaginationModule, PdfTronModule, PdftronComponent, PdftronService, PermissionService, PermissionsComponent, PermissionsDirective, PermissionsModule, PermissionsTemplateComponent, PipesModule, PublishDialogComponent, PublishingDocumentService, ReadMoreComponent, RecentlyViewedService, RemoveButtonComponent, RenameComponent, RolesService, SOCKET_WIDTH, SUBSCRIPTION_STATE, SafeHtmlPipe, ScanComponent, ScanModalComponent, SearchAutocompleteComponent, SecurePipe, SelectComponent, SelectModule, SelectUsersByDepartmentModule, SelectUsersByDepartmentsComponent, SetDirRtlDirective, SetRtlDirective, ShareDialogComponent, SharedDocsService, SharedServicesModule, SidepanelComponent, SingleActivityComponent, Socket, SpinnerComponent, StatusIconComponent, TRANSLATION_PROVIDER, TableComponent, TableModule, TagsApiService, TemplateModalComponent, TemplateNode, TemplateNodeComponent, TimeAgoPipe, ToastsModule, TransferDocComponent, TranslateLoaderService, TranslatedVocabularySelectComponent, TranslationService, TreeviewSelectComponent, UpdateModalComponent, UploadFileService, UploadManagmentService, UserCardComponent, UserComponent, UserModule, UserPreferenceValues, UserPreferencesService, UserService, UsersCardComponent, UsersCardModule, UtilityService, VersionsComponent, ViewerFilesService, ViewerLogComponent, ViewerLogModule, VocabularyApiService, VocabularyComponent, VocabularyModule, WorkflowService, ZoomControlComponent, appInitializer, departmentCacheBuster$, extensionJsonsFactory, filterEnabled, getConnections, getValue, mergeArrays, mergeObjects, minute$1 as minute, provideExtensionConfig, reduceEmptyMenus, reduceSeparators, removeConnections, removeNode, removeNodeAndConnections, serializeControl, serializePort, sortByOrder };
+export { ActivitiesLogComponent, ActivitiesLogModule, ActivityLineComponent, AdapterService, AddPermissionsDialogComponent, AddToCollectionComponent, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AvatarComponent, AvatarModule, BaseColumnComponent, BaseComponent, BaseDialogComponent, BaseNodeClass, BaseSelector, BaseService, BooleanViewerComponent, ButtonComponent, CachingExpiryUnit, CallApiService, CardComponent, CardModule, ChartDataService, CircleNode, CircleNodeComponent, ClickOutsideDirective, ClipboardComponent, CommentApiService, CommentsDashletComponent, CommentsModule, ComponentRegisterService, ComponentTranslationModel, ConfirmCallerDialogComponent, ConfirmCallerModule, ConfirmDialogComponent, ConfirmationDialogComponent, ConfirmationDialogModule, Connection, ConnectionLabelComponent, ContentActionType, ContentNode, ContentNodeComponent, CopyComponent, CorrespondenceRelationComponent, CorrespondenceRelationModule, CorrespondenceRelationService, CorrespondenceTagsComponent, CreateDirectoryComponent, CreateEntityComponent, CreateEntityModule, CreateModalComponent, CreationTypeComponent, CtsTagsModule, CustomConnectionComponent, CustomDocumentViewerComponent, CustomPpViewerComponent, CustomSocketComponent, CustomToastrModule, CustomToastrService, CutomeVocViewerComponent, DIAGRAM_DEFAULT_OPTIONS, DIAGRAM_HEIGHT, DataViewerComponent, DateFormatterService, DateHelperService, DateViewerComponent, DeleteComponent, DepartmentApiService, DepartmentFormComponent, DepartmentManagementService, DepartmentViewerComponent, DestroySubject$1 as DestroySubject, DiagramDirective, DiagramPluginsService, DiagramService, DiagramUtils, DiagramsModule, DialogMangmentService, DirectiveModule, DisplaySuitableIconComponent, DisplaySuitableIconModule, DocumentScanService, DocumentTemplatesConstants, DocumentTemplatesService, DocumentUploadComponent, DocumentsComponent, DocumentsConstants, DocumentsListComponent, DocumentsModule, DocumentsService, DragAndDropDirective, DropdownViewerComponent, DynamicChartComponent, DynamicChartModule, DynamicColumnComponent, DynamicFieldsRendererComponent, DynamicFieldsRendererModule, DynamicFilterComponent, DynamicFilterModule, DynamicFormBoolItemComponent, DynamicFormBuilderComponent, DynamicFormCheckboxItemComponent, DynamicFormComponent, DynamicFormDateItemComponent, DynamicFormDepartmentComponent, DynamicFormFieldComponent, DynamicFormHijriDateitemComponent, DynamicFormMapItemComponent, DynamicFormModule, DynamicFormOptionsComponent, DynamicFormSelectItemComponent, DynamicFormSelectTagComponent, DynamicFormSelectUserFilterComponent, DynamicFormSelectUsersComponent, DynamicFormService, DynamicFormSlideToggleitemComponent, DynamicFormTextItemComponent, DynamicFormTextareaComponent, DynamicFormViewerComponent, DynamicFormVocabularyItemComponent, DynamicSearchComponent, DynamicSearchModule, DynamicSingleChartComponent, DynamicTableComponent, DynamicTableModule, DynamicTableService, DynamicTabsComponent, DynamicTabsModule, DynamicViewModule, ENTITY_TYPE, EXTENSION_JSONS, EnvManager, EvaluatorsService, ExtensionLoaderService, ExtensionService, FILTER_DATES_TYPE, FileGridInfiniteScrollDirective, FileManagerAbstract, FileManagerAdapter, FileManagerPaginationConfig, FileManagerService, FileMangerModule, FileSizePipe, FilterComponent, FilterModule, FolderModalComponent, FolderishType, FormBuilderService, GatewayNodeComponent, GatewayPortsComponent, GlobalAdminService, GlobalPdfTron, GregorianDatepickerComponent, HijriDatePipe, HijriDatepickerComponent, HijriGregorianDatepickerComponent, IN_OUT_DIRECTION, IconService, InitializationService, InputPort, ItemListComponent, Lang, LatestActivityComponent, LatestActivityModule, LibrarySharedModule, ListViewerComponent, LoanRequestComponent, LocalStoragService, LocalizedDatePipe, MESSAGE_TYPE, MY_MOMENT_FORMATS, MainfolderService, MessageService, MomentDateAdapter, MoveComponent, MultiValuePipe, MultipleDynamicFormViewerComponent, MutipleDynamicFormViewerModule, NODE_CIRCLE_SIZE, NODE_GATEWAY_SIZE, NODE_HEIGHT, NODE_MARGIN, NODE_STATUS, NODE_TYPE, NODE_WIDTH, NOTIFICATIONS_LIST_OPTIONS, NOTIFICATION_ICON, NOTIFICATION_ITEM, NOTIFICATION_STATUS, NOTIFY_EVENT, NdfConfirmationDialogComponent, NdfNuxeoDialog, NgxHijriGregorianDatepickerModule, NoDataComponent, NodeIconComponent, NodeInputsComponent, NodeOutputsComponent, NodePortsComponent, NotificationIconDirective, NotificationItemComponent, NotificationItemDirective, NotificationSourceSelectComponent, NotificationStatusToggleComponent, NotificationToastComponent, NotificationsButtonComponent, NotificationsDateSelectComponent, NotificationsListComponent, NotificationsListContainerComponent, NotificationsModule, NotificationsService, NotificationsSettingsContainerComponent, NuxeoCoreModule, NuxeoDevelopmentFrameworkComponent, NuxeoDevelopmentFrameworkModule, NuxeoDevelopmentFrameworkService, NuxeoDialogModule, NuxeoDialogService, NuxeoMapper, NuxeoService, OutputPort, PAGINATION_MODE, PANEL_MODE, PaginationComponent, PaginationModule, PdfTronModule, PdftronComponent, PdftronService, PermissionService, PermissionsComponent, PermissionsDirective, PermissionsModule, PermissionsTemplateComponent, PipesModule, PublishDialogComponent, PublishingDocumentService, ReadMoreComponent, RecentlyViewedService, RemoveButtonComponent, RenameComponent, RolesService, SOCKET_WIDTH, SUBSCRIPTION_STATE, SafeHtmlPipe, ScanComponent, ScanModalComponent, SearchAutocompleteComponent, SecurePipe, SelectComponent, SelectModule, SelectUsersByDepartmentModule, SelectUsersByDepartmentsComponent, SetDirRtlDirective, SetRtlDirective, ShareDialogComponent, SharedDocsService, SharedServicesModule, SidepanelComponent, SingleActivityComponent, Socket, SpinnerComponent, StatusIconComponent, TRANSLATION_PROVIDER, TableComponent, TableModule, TagsApiService, TemplateModalComponent, TemplateNode, TemplateNodeComponent, TimeAgoPipe, ToastsModule, TransferDocComponent, TranslateLoaderService, TranslatedVocabularySelectComponent, TranslationService, TreeviewSelectComponent, UpdateModalComponent, UploadFileService, UploadManagmentService, UserCardComponent, UserComponent, UserModule, UserPreferenceValues, UserPreferencesService, UserService, UsersCardComponent, UsersCardModule, UtilityService, VersionsComponent, ViewerFilesService, ViewerLogComponent, ViewerLogModule, VocabularyApiService, VocabularyComponent, VocabularyModule, WorkflowService, ZoomControlComponent, appInitializer, departmentCacheBuster$, extensionJsonsFactory, filterEnabled, getConnections, getRandomNumber, getValue, mergeArrays, mergeObjects, minute$1 as minute, provideExtensionConfig, reduceEmptyMenus, reduceSeparators, removeConnections, removeNode, removeNodeAndConnections, serializeControl, serializePort, sortByOrder };
 //# sourceMappingURL=nuxeo-development-framework.js.map