nuxeo-development-framework 4.1.1 → 4.1.2

package/bundles/nuxeo-development-framework.umd.js

@@ -30289,6 +30289,7 @@
       start: 'start',
       content: 'content',
       template: 'template',
+      gateway: 'gateway',
       end: 'end',
   };
 
@@ -30300,6 +30301,7 @@
   var NODE_WIDTH = 150;
   var NODE_HEIGHT = 118;
   var NODE_CIRCLE_SIZE = 72;
+  var NODE_GATEWAY_SIZE = 60;
   var DIAGRAM_HEIGHT = 600;
   var SOCKET_WIDTH = 8;
 
@@ -30310,6 +30312,9 @@
       inProgress: 'inProgress',
       upcoming: 'upcoming',
       approved: 'approved',
+      suspended: 'suspended',
+      ready: 'ready',
+      canceled: 'canceled'
   };
 
   var DiagramPluginsService = /** @class */ (function () {
@@ -30342,7 +30347,7 @@
           _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;
@@ -30354,6 +30359,7 @@
           _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;
           return _this;
       }
       return BaseNodeClass;
@@ -30370,11 +30376,235 @@
       return CircleNode;
   }(BaseNodeClass));
 
+  var DiagramUtils = /** @class */ (function () {
+      function DiagramUtils() {
+      }
+      DiagramUtils.createInputId = function (id, type) {
+          if (type === void 0) { type = 'primary'; }
+          return id + "-" + type + "-input";
+      };
+      DiagramUtils.createOutputId = function (id, type) {
+          if (type === void 0) { type = 'primary'; }
+          return id + "-" + type + "-output";
+      };
+      DiagramUtils.createInputClass = function (type) {
+          if (type === void 0) { type = 'primary'; }
+          return "input-" + type + "-port";
+      };
+      DiagramUtils.createOutputClass = function (type) {
+          if (type === void 0) { type = 'primary'; }
+          return "output-" + type + "-port";
+      };
+      DiagramUtils.createOutputsConfig = function (id, types) {
+          return types.map(function (type) {
+              return {
+                  id: DiagramUtils.createOutputId(id, type),
+                  config: {
+                      styleClass: DiagramUtils.createOutputClass(type)
+                  }
+              };
+          });
+      };
+      DiagramUtils.createInputsConfig = function (id, types) {
+          return types.map(function (type) {
+              return {
+                  id: DiagramUtils.createInputId(id, type),
+                  config: {
+                      styleClass: DiagramUtils.createInputClass(type)
+                  }
+              };
+          });
+      };
+      return DiagramUtils;
+  }());
+
+  function getRandomNumber(x, y, step, min, max) {
+      if (step === void 0) { step = 1; }
+      if (min === void 0) { min = 0; }
+      if (max === void 0) { max = 1000; }
+      // Create a deterministic seed based on x and y
+      var seed = Math.abs(x * 31 + y * 17) % 100000;
+      // Generate a pseudo-random number based on the seed
+      var seededRandom = ((seed * 9301 + 49297) % 233280) / 233280;
+      // Calculate range
+      var range = Math.floor((max - min) / step) + 1;
+      // Return the adjusted number
+      return min + Math.floor(seededRandom * range) * step;
+  }
+
+  /**
+   *
+   * @param node
+   * @returns
+   */
+  var removeNode = function (data, editor) { return __awaiter(void 0, void 0, void 0, function () {
+      var nodes, node, nodeConfig, _a;
+      return __generator(this, function (_b) {
+          switch (_b.label) {
+              case 0:
+                  if (!data || !editor) {
+                      console.log('Node not found.');
+                      return [2 /*return*/];
+                  }
+                  nodes = editor.getNodes();
+                  node = editor.getNode(data.nodeId);
+                  if (!node) {
+                      console.log('Node not found.');
+                      return [2 /*return*/];
+                  }
+                  if (node.type === NODE_TYPE.start && nodes.length > 1) {
+                      return [2 /*return*/];
+                  }
+                  nodeConfig = node.config;
+                  if (!(nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.isLinked)) return [3 /*break*/, 2];
+                  return [4 /*yield*/, removeNodeAndReplaceConnections(node, editor)];
+              case 1:
+                  _a = _b.sent();
+                  return [3 /*break*/, 4];
+              case 2: return [4 /*yield*/, removeNodeAndConnections(node, editor)];
+              case 3:
+                  _a = _b.sent();
+                  _b.label = 4;
+              case 4: return [2 /*return*/, _a];
+          }
+      });
+  }); };
+  /**
+   *
+   * @param node
+   * @param editor
+   */
+  var removeNodeAndConnections = function (node, editor) { return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+          switch (_a.label) {
+              case 0:
+                  removeConnections(node, editor);
+                  return [4 /*yield*/, editor.removeNode(node.id)];
+              case 1:
+                  _a.sent();
+                  return [2 /*return*/];
+          }
+      });
+  }); };
+  /**
+   *
+   * @param node
+   * @param editor
+   */
+  var removeNodeAndReplaceConnections = function (node, editor) { return __awaiter(void 0, void 0, void 0, function () {
+      var outputs, inputs;
+      return __generator(this, function (_a) {
+          switch (_a.label) {
+              case 0:
+                  outputs = getConnections(editor, function (connection) { return connection.source == node.id; });
+                  inputs = getConnections(editor, function (connection) { return connection.target == node.id; });
+                  if (!(!!inputs.length && !!outputs.length)) return [3 /*break*/, 2];
+                  return [4 /*yield*/, _updateConnections(outputs, inputs, editor)];
+              case 1:
+                  _a.sent();
+                  return [3 /*break*/, 3];
+              case 2:
+                  removeConnections(node, editor);
+                  _a.label = 3;
+              case 3: return [4 /*yield*/, editor.removeNode(node.id)];
+              case 4:
+                  _a.sent();
+                  return [2 /*return*/];
+          }
+      });
+  }); };
+  /**
+   *
+   * @param node
+   * @param editor
+   */
+  var removeConnections = function (node, editor) {
+      var connections = getConnections(editor, function (connection) { return connection.source === node.id || connection.target === node.id; });
+      if (connections.length) {
+          connections.forEach(function (connection) {
+              editor.removeConnection(connection.id);
+          });
+      }
+  };
+  /**
+   *
+   * @param editor
+   * @param predicate
+   * @returns
+   */
+  var getConnections = function (editor, predicate) {
+      return editor.getConnections().filter(predicate);
+  };
+  /**
+   *
+   * @param outputs
+   * @param inputs
+   * @param editor
+   */
+  var _updateConnections = function (outputs, inputs, editor) { return __awaiter(void 0, void 0, void 0, function () {
+      var source, target, sourceNode, targetNode, connection;
+      return __generator(this, function (_a) {
+          switch (_a.label) {
+              case 0:
+                  source = inputs[0].source;
+                  target = outputs[0].target;
+                  sourceNode = editor.getNode(source);
+                  targetNode = editor.getNode(target);
+                  __spreadArray(__spreadArray([], __read(outputs)), __read(inputs)).forEach(function (connection) { return __awaiter(void 0, void 0, void 0, function () {
+                      return __generator(this, function (_a) {
+                          switch (_a.label) {
+                              case 0: return [4 /*yield*/, editor.removeConnection(connection.id)];
+                              case 1:
+                                  _a.sent();
+                                  return [2 /*return*/];
+                          }
+                      });
+                  }); });
+                  if (!sourceNode || !targetNode) {
+                      return [2 /*return*/];
+                  }
+                  connection = new Connection(sourceNode, targetNode);
+                  return [4 /*yield*/, editor.addConnection(connection)];
+              case 1:
+                  _a.sent();
+                  return [2 /*return*/];
+          }
+      });
+  }); };
+
+  function serializePort(port) {
+      return {
+          id: port.id,
+          label: port.label,
+          socket: {
+              name: port.socket.name,
+          },
+      };
+  }
+  function serializeControl(control) {
+      if (control instanceof rete.ClassicPreset.InputControl) {
+          return {
+              __type: 'ClassicPreset.InputControl',
+              id: control.id,
+              readonly: control.readonly,
+              type: control.type,
+              value: control.value,
+          };
+      }
+      return null;
+  }
+
   var Connection = /** @class */ (function (_super) {
       __extends(Connection, _super);
-      function Connection() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-          _this.renderType = 'default';
+      function Connection(source, target, config) {
+          var _this = _super.call(this, 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;
+          _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;
           return _this;
       }
       return Connection;
@@ -30388,12 +30618,31 @@
       return ContentNode;
   }(BaseNodeClass));
 
+  var OutputPort = /** @class */ (function (_super) {
+      __extends(OutputPort, _super);
+      function OutputPort(config) {
+          var _this = _super.call(this, config.socket, config === null || config === void 0 ? void 0 : config.label, (config === null || config === void 0 ? void 0 : config.multipleConnections) !== false) || this;
+          _this.styleClass = config === null || config === void 0 ? void 0 : config.styleClass;
+          return _this;
+      }
+      return OutputPort;
+  }(rete.ClassicPreset.Output));
+  var InputPort = /** @class */ (function (_super) {
+      __extends(InputPort, _super);
+      function InputPort(config) {
+          var _this = _super.call(this, config.socket, config === null || config === void 0 ? void 0 : config.label, (config === null || config === void 0 ? void 0 : config.multipleConnections) !== false) || this;
+          _this.styleClass = config === null || config === void 0 ? void 0 : config.styleClass;
+          return _this;
+      }
+      return InputPort;
+  }(rete.ClassicPreset.Input));
+
   var Socket = /** @class */ (function (_super) {
       __extends(Socket, _super);
-      function Socket(name, renderType) {
-          if (renderType === void 0) { renderType = 'default'; }
-          var _this = _super.call(this, name) || this;
-          _this.renderType = renderType;
+      function Socket(config) {
+          var _this = _super.call(this, config.name) || this;
+          _this.renderType = (config === null || config === void 0 ? void 0 : config.renderType) || 'default';
+          _this.styleClass = config === null || config === void 0 ? void 0 : config.styleClass;
           return _this;
       }
       return Socket;
@@ -30412,6 +30661,18 @@
       return TemplateNode;
   }(BaseNodeClass));
 
+  var GateWayNode = /** @class */ (function (_super) {
+      __extends(GateWayNode, _super);
+      function GateWayNode(config) {
+          var _this = _super.call(this, config) || this;
+          _this.type = NODE_TYPE.gateway;
+          _this.width = NODE_GATEWAY_SIZE;
+          _this.height = NODE_GATEWAY_SIZE;
+          return _this;
+      }
+      return GateWayNode;
+  }(BaseNodeClass));
+
   /**
    *
    * @param config
@@ -30449,44 +30710,72 @@
       return i2$8.ConnectionComponent;
   }; };
   var initNodeByType = function (type, config) {
-      var _nodes = {
-          start: CircleNode,
-          content: ContentNode,
-          template: TemplateNode,
-          end: CircleNode,
-      };
+      var _b;
+      var _nodes = (_b = {},
+          _b[NODE_TYPE.start] = CircleNode,
+          _b[NODE_TYPE.content] = ContentNode,
+          _b[NODE_TYPE.template] = TemplateNode,
+          _b[NODE_TYPE.end] = CircleNode,
+          _b[NODE_TYPE.gateway] = GateWayNode,
+          _b);
       return new _nodes[type](config) || new ContentNode(config);
   };
   var initAngularComponentByType = function (type) {
-      var _components = {
-          content: ContentNodeComponent,
-          start: CircleNodeComponent,
-          end: CircleNodeComponent,
-          template: TemplateNodeComponent,
-      };
+      var _b;
+      var _components = (_b = {},
+          _b[NODE_TYPE.content] = ContentNodeComponent,
+          _b[NODE_TYPE.start] = CircleNodeComponent,
+          _b[NODE_TYPE.end] = CircleNodeComponent,
+          _b[NODE_TYPE.template] = TemplateNodeComponent,
+          _b[NODE_TYPE.gateway] = GatewayNodeComponent,
+          _b);
       return _components[type] || i2$8.NodeComponent;
   };
 
   var createSegmentedPath = function (connection, options) {
-      var _a = options || {}, _b = _a.multiPoints, multiPoints = _b === void 0 ? true : _b, _c = _a.offset, offset = _c === void 0 ? 0 : _c;
+      var _a;
+      var _b = ((_a = options === null || options === void 0 ? void 0 : options.transform) === null || _a === void 0 ? void 0 : _a.options) || {}, _c = _b.multiPoints, multiPoints = _c === void 0 ? true : _c, _d = _b.offset, offset = _d === void 0 ? 0 : _d;
+      var isVertical = !!(options === null || options === void 0 ? void 0 : options.vertical);
+      var direction = connection.direction;
       return function (points) {
           if (points.length !== 2) {
               throw new Error('Exactly two points are required to create a linear path.');
           }
-          var _a = __read(points, 2), start = _a[0], end = _a[1];
+          var _b = __read(points, 2), start = _b[0], end = _b[1];
+          if (!isVertical) {
+              switch (direction) {
+                  case 'down': {
+                      var offset_1 = getRandomNumber(start.x, start.y, 10, 50, 150);
+                      var _points = [
+                          { x: start.x, y: start.y + offset_1 },
+                          { x: end.x, y: end.y + offset_1 }
+                      ];
+                      return __spreadArray(__spreadArray([start], __read(_points)), [end]);
+                  }
+                  case 'backward': {
+                      var _points = [{ x: end.x, y: start.y }];
+                      return __spreadArray(__spreadArray([start], __read(_points)), [end]);
+                  }
+                  case 'forward': {
+                      if (end.y < start.y) {
+                          var _points = [{ x: start.x, y: end.y }];
+                          return __spreadArray(__spreadArray([start], __read(_points)), [end]);
+                      }
+                      break;
+                  }
+              }
+          }
           if (multiPoints) {
               var midpointY = (end.y - start.y) / 2 + start.y;
               var intermediatePoints = [
                   { x: start.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 } }),
+                  { x: end.x, y: midpointY + offset }
               ];
+              return __spreadArray(__spreadArray([
+                  Object.assign(Object.assign({}, start), { controlOut: { x: start.x, y: midpointY - offset } })
+              ], __read(intermediatePoints)), [
+                  Object.assign(Object.assign({}, end), { controlIn: { x: end.x, y: midpointY + offset } })
+              ]);
           }
           return [start, end];
       };
@@ -30496,14 +30785,15 @@
       curve: function (c) { var _a; return (_a = (c.curve || (config === null || config === void 0 ? void 0 : config.curve))) !== null && _a !== void 0 ? _a : d3Shape.curveLinear; },
       transformer: function (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)
-              : reteConnectionPathPlugin.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 reteConnectionPathPlugin.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: function (connection) { return (!(config === null || config === void 0 ? void 0 : config.arrow) ? false : config === null || config === void 0 ? void 0 : config.arrow); },
+      arrow: function (connection) { return (!(config === null || config === void 0 ? void 0 : config.arrow) ? false : config === null || config === void 0 ? void 0 : config.arrow); }
   }); };
 
   var socketPositionWatcher = function (offset, isVertical, editor) {
@@ -30518,9 +30808,9 @@
   };
 
   var createDiagramEditor = function (container, injector, config) { return __awaiter(void 0, void 0, void 0, function () {
-      var _a, _b, _c, _d, _e, _f, _g, socket, editor, area, connection, pathPlugin, angularRender, readonly, arrange, reroute, minimap, selector, accumulating, _scaling_1;
-      return __generator(this, function (_h) {
-          socket = new Socket('', config === null || config === void 0 ? void 0 : config.socketType);
+      var _a, _b, _c, _d, _e, _f, _g, _h, socket, editor, area, connection, pathPlugin, angularRender, readonly, arrange, reroute, minimap, selector, accumulating, _scaling_1;
+      return __generator(this, function (_j) {
+          socket = new Socket({ name: '', renderType: config === null || config === void 0 ? void 0 : config.socketType });
           editor = new rete.NodeEditor();
           area = new reteAreaPlugin.AreaPlugin(container);
           connection = new reteConnectionPlugin.ConnectionPlugin();
@@ -30536,31 +30826,33 @@
           reteConnectionReroutePlugin.RerouteExtensions.selectablePins(reroute, selector, accumulating);
           //#endregion
           //#region PRESETS
-          arrange.addPreset(reteAutoArrangePlugin.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)
+              : reteAutoArrangePlugin.Presets.classic.setup());
           angularRender.addPreset(i2$8.Presets.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(i2$8.Presets.minimap.setup({ size: ((_c = config === null || config === void 0 ? void 0 : config.minimap) === null || _c === void 0 ? void 0 : _c.size) || 150 }));
+          angularRender.addPreset(i2$8.Presets.minimap.setup({ size: ((_d = config === null || config === void 0 ? void 0 : config.minimap) === null || _d === void 0 ? void 0 : _d.size) || 150 }));
           connection.addPreset(reteConnectionPlugin.Presets.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) {
               _scaling_1 = (config === null || config === void 0 ? void 0 : config.area.scaling) || { min: 0.5, max: 1.5 };
               reteAreaPlugin.AreaExtensions.restrictor(area, {
-                  scaling: function () { return _scaling_1; },
+                  scaling: function () { return _scaling_1; }
               });
           }
           //#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);
           }
@@ -30573,7 +30865,7 @@
               //@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
@@ -30587,179 +30879,17 @@
                       connection: connection,
                       arrange: arrange,
                       reroute: reroute,
-                      readonly: readonly,
+                      readonly: readonly
                   },
                   destroy: function () { return area.destroy(); },
                   layout: function (props) { return arrange.layout(props); },
                   fitToZoom: function () {
                       reteAreaPlugin.AreaExtensions.zoomAt(area, editor.getNodes());
-                  },
-              }];
-      });
-  }); };
-
-  /**
-   *
-   * @param node
-   * @returns
-   */
-  var removeNode = function (data, editor) { return __awaiter(void 0, void 0, void 0, function () {
-      var nodes, node, nodeConfig, _a;
-      return __generator(this, function (_b) {
-          switch (_b.label) {
-              case 0:
-                  if (!data || !editor) {
-                      console.log('Node not found.');
-                      return [2 /*return*/];
-                  }
-                  nodes = editor.getNodes();
-                  node = editor.getNode(data.nodeId);
-                  if (!node) {
-                      console.log('Node not found.');
-                      return [2 /*return*/];
-                  }
-                  if (node.type === NODE_TYPE.start && nodes.length > 1) {
-                      return [2 /*return*/];
                   }
-                  nodeConfig = node.config;
-                  if (!(nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.isLinked)) return [3 /*break*/, 2];
-                  return [4 /*yield*/, removeNodeAndReplaceConnections(node, editor)];
-              case 1:
-                  _a = _b.sent();
-                  return [3 /*break*/, 4];
-              case 2: return [4 /*yield*/, removeNodeAndConnections(node, editor)];
-              case 3:
-                  _a = _b.sent();
-                  _b.label = 4;
-              case 4: return [2 /*return*/, _a];
-          }
-      });
-  }); };
-  /**
-   *
-   * @param node
-   * @param editor
-   */
-  var removeNodeAndConnections = function (node, editor) { return __awaiter(void 0, void 0, void 0, function () {
-      return __generator(this, function (_a) {
-          switch (_a.label) {
-              case 0:
-                  removeConnections(node, editor);
-                  return [4 /*yield*/, editor.removeNode(node.id)];
-              case 1:
-                  _a.sent();
-                  return [2 /*return*/];
-          }
-      });
-  }); };
-  /**
-   *
-   * @param node
-   * @param editor
-   */
-  var removeNodeAndReplaceConnections = function (node, editor) { return __awaiter(void 0, void 0, void 0, function () {
-      var outputs, inputs;
-      return __generator(this, function (_a) {
-          switch (_a.label) {
-              case 0:
-                  outputs = getConnections(editor, function (connection) { return connection.source == node.id; });
-                  inputs = getConnections(editor, function (connection) { return connection.target == node.id; });
-                  if (!(!!inputs.length && !!outputs.length)) return [3 /*break*/, 2];
-                  return [4 /*yield*/, _updateConnections(outputs, inputs, editor)];
-              case 1:
-                  _a.sent();
-                  return [3 /*break*/, 3];
-              case 2:
-                  removeConnections(node, editor);
-                  _a.label = 3;
-              case 3: return [4 /*yield*/, editor.removeNode(node.id)];
-              case 4:
-                  _a.sent();
-                  return [2 /*return*/];
-          }
-      });
-  }); };
-  /**
-   *
-   * @param node
-   * @param editor
-   */
-  var removeConnections = function (node, editor) {
-      var connections = getConnections(editor, function (connection) { return connection.source === node.id || connection.target === node.id; });
-      if (connections.length) {
-          connections.forEach(function (connection) {
-              editor.removeConnection(connection.id);
-          });
-      }
-  };
-  /**
-   *
-   * @param editor
-   * @param predicate
-   * @returns
-   */
-  var getConnections = function (editor, predicate) {
-      return editor.getConnections().filter(predicate);
-  };
-  /**
-   *
-   * @param outputs
-   * @param inputs
-   * @param editor
-   */
-  var _updateConnections = function (outputs, inputs, editor) { return __awaiter(void 0, void 0, void 0, function () {
-      var source, target, sourceNode, targetNode, connection;
-      return __generator(this, function (_a) {
-          switch (_a.label) {
-              case 0:
-                  source = inputs[0].source;
-                  target = outputs[0].target;
-                  sourceNode = editor.getNode(source);
-                  targetNode = editor.getNode(target);
-                  __spreadArray(__spreadArray([], __read(outputs)), __read(inputs)).forEach(function (connection) { return __awaiter(void 0, void 0, void 0, function () {
-                      return __generator(this, function (_a) {
-                          switch (_a.label) {
-                              case 0: return [4 /*yield*/, editor.removeConnection(connection.id)];
-                              case 1:
-                                  _a.sent();
-                                  return [2 /*return*/];
-                          }
-                      });
-                  }); });
-                  if (!sourceNode || !targetNode) {
-                      return [2 /*return*/];
-                  }
-                  connection = new Connection(sourceNode, sourceNode.id + "-output", targetNode, targetNode.id + "-input");
-                  return [4 /*yield*/, editor.addConnection(connection)];
-              case 1:
-                  _a.sent();
-                  return [2 /*return*/];
-          }
+              }];
       });
   }); };
 
-  function serializePort(port) {
-      return {
-          id: port.id,
-          label: port.label,
-          socket: {
-              name: port.socket.name,
-          },
-      };
-  }
-  function serializeControl(control) {
-      if (control instanceof rete.ClassicPreset.InputControl) {
-          return {
-              __type: 'ClassicPreset.InputControl',
-              id: control.id,
-              readonly: control.readonly,
-              type: control.type,
-              value: control.value,
-          };
-      }
-      return null;
-  }
-
   var DiagramService = /** @class */ (function () {
       /**
        *
@@ -30776,6 +30906,9 @@
           this.destroy = editor.destroy;
           this.fitToZoom = editor.fitToZoom;
       };
+      DiagramService.prototype.diagramClientRect = function () {
+          return this.plugins.area.container.getBoundingClientRect();
+      };
       DiagramService.prototype.getContentNodes = function () {
           return this.editor
               .getNodes()
@@ -30805,13 +30938,32 @@
           });
       };
       DiagramService.prototype.createNode = function (type, config) {
+          var _this = this;
           if (type === void 0) { type = NODE_TYPE.content; }
           var _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)) {
+              var contentPorts = ['secondary', 'tertiary', 'quaternary'];
+              DiagramUtils.createInputsConfig(_node.id, contentPorts).forEach(function (_b) {
+                  var id = _b.id, config = _b.config;
+                  return _this.createInput(_node, id, config);
+              });
+              DiagramUtils.createOutputsConfig(_node.id, contentPorts).forEach(function (_b) {
+                  var id = _b.id, config = _b.config;
+                  return _this.createOutput(_node, id, config);
+              });
           }
           _node.notify = this.notifyListener(_node);
           return _node;
@@ -30824,6 +30976,18 @@
           var _isExist = _nodes.some(function (nd) { return nd.type === NODE_TYPE.start; });
           return !_isExist;
       };
+      DiagramService.prototype.getNode = function (id) {
+          return this.editor.getNode(id);
+      };
+      DiagramService.prototype.getNodes = function () {
+          return this.editor.getNodes();
+      };
+      DiagramService.prototype.getConnections = function () {
+          return this.editor.getConnections();
+      };
+      DiagramService.prototype.getConnection = function (id) {
+          return this.editor.getConnection(id);
+      };
       DiagramService.prototype.getLastNode = function () {
           var nodes = this.editor.getNodes();
           return nodes.length ? nodes[nodes.length - 1] : null;
@@ -30831,23 +30995,35 @@
       DiagramService.prototype.getNodesByType = function (type) {
           return this.editor.getNodes().filter(function (nd) { return nd.type === type; });
       };
+      DiagramService.prototype.getViewNodes = function () {
+          return Array.from(this.plugins.area.nodeViews.values());
+      };
       DiagramService.prototype.getLastViewNode = function () {
-          var nodes = Array.from(this.plugins.area.nodeViews.values());
+          var nodes = this.getViewNodes();
           return nodes.length ? nodes[nodes.length - 1] : null;
       };
-      DiagramService.prototype.createInputs = function (node) {
-          node.addInput(node.id + "-input", new rete.ClassicPreset.Input(this.socket));
+      DiagramService.prototype.getViewNode = function (id) {
+          return this.plugins.area.nodeViews.get(id);
+      };
+      DiagramService.prototype.getViewNodePosition = function (id) {
+          var node = this.getViewNode(id);
+          return node ? node.position : null;
+      };
+      DiagramService.prototype.createInput = function (node, id, config) {
+          if (id === void 0) { id = node.id + "-input"; }
+          node.addInput(id, new InputPort(Object.assign({ socket: this.socket }, config)));
           return node;
       };
-      DiagramService.prototype.createOutputs = function (node) {
-          node.addOutput(node.id + "-output", new rete.ClassicPreset.Output(this.socket, '', false));
+      DiagramService.prototype.createOutput = function (node, id, config) {
+          if (id === void 0) { id = node.id + "-output"; }
+          node.addOutput(id, new OutputPort(Object.assign({ socket: this.socket }, config)));
           return node;
       };
-      DiagramService.prototype.addConnection = function (sourceNode, targetNode) {
+      DiagramService.prototype.addConnection = function (sourceNode, targetNode, config) {
           return __awaiter(this, void 0, void 0, function () {
               return __generator(this, function (_b) {
                   switch (_b.label) {
-                      case 0: return [4 /*yield*/, this.editor.addConnection(this.createConnection(sourceNode, targetNode))];
+                      case 0: return [4 /*yield*/, this.editor.addConnection(this.createConnection(sourceNode, targetNode, config))];
                       case 1:
                           _b.sent();
                           return [2 /*return*/];
@@ -30855,10 +31031,8 @@
               });
           });
       };
-      DiagramService.prototype.createConnection = function (sourceNode, targetNode) {
-          var connection = new Connection(sourceNode, sourceNode.id + "-output", targetNode, targetNode.id + "-input");
-          connection.status = targetNode.status;
-          return connection;
+      DiagramService.prototype.createConnection = function (sourceNode, targetNode, config) {
+          return new Connection(sourceNode, targetNode, config);
       };
       DiagramService.prototype.appendConnection = function (connection) {
           return __awaiter(this, void 0, void 0, function () {
@@ -30899,6 +31073,45 @@
               return (_a = _actions[eventType]) === null || _a === void 0 ? void 0 : _a.call(_actions, payload);
           };
       };
+      DiagramService.prototype.translateView = function () {
+          return __awaiter(this, void 0, void 0, function () {
+              var _b, container, area, rect, k, delta, ox, oy;
+              return __generator(this, function (_c) {
+                  _b = this.plugins.area, container = _b.container, area = _b.area;
+                  rect = container.getBoundingClientRect();
+                  k = area.transform.k;
+                  delta = -0.2;
+                  ox = Math.max(0, (rect.left - container.clientWidth / 2) * k);
+                  oy = Math.max(0, (rect.top - container.clientHeight / 2) * k);
+                  area.zoom(Math.max(0.1, k * (1 + delta)), ox * delta, oy * delta);
+                  return [2 /*return*/];
+              });
+          });
+      };
+      DiagramService.prototype.removeEndNode = function () {
+          return __awaiter(this, void 0, void 0, function () {
+              var node;
+              return __generator(this, function (_b) {
+                  switch (_b.label) {
+                      case 0:
+                          node = this.getNodesByType(NODE_TYPE.end)[0];
+                          if (!node) return [3 /*break*/, 2];
+                          return [4 /*yield*/, removeNodeAndConnections(node, this.editor)];
+                      case 1:
+                          _b.sent();
+                          _b.label = 2;
+                      case 2: return [2 /*return*/];
+                  }
+              });
+          });
+      };
+      DiagramService.prototype._creteGatewayOutput = function (_node) {
+          var _this = this;
+          DiagramUtils.createOutputsConfig(_node.id, [
+              'secondary',
+              'tertiary'
+          ]).forEach(function (input) { return _this.createOutput(_node, input.id, input === null || input === void 0 ? void 0 : input.config); });
+      };
       DiagramService.prototype._removeNode = function (data) {
           return __awaiter(this, void 0, void 0, function () {
               var node, viewNode, config, index, position, direction, nodes, _node, _dir, _position;
@@ -30952,21 +31165,6 @@
               });
           });
       };
-      DiagramService.prototype.translateView = function () {
-          return __awaiter(this, void 0, void 0, function () {
-              var _b, container, area, rect, k, delta, ox, oy;
-              return __generator(this, function (_c) {
-                  _b = this.plugins.area, container = _b.container, area = _b.area;
-                  rect = container.getBoundingClientRect();
-                  k = area.transform.k;
-                  delta = -0.2;
-                  ox = Math.max(0, (rect.left - container.clientWidth / 2) * k);
-                  oy = Math.max(0, (rect.top - container.clientHeight / 2) * k);
-                  area.zoom(Math.max(0.1, k * (1 + delta)), ox * delta, oy * delta);
-                  return [2 /*return*/];
-              });
-          });
-      };
       return DiagramService;
   }());
   DiagramService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramService, deps: [{ token: DiagramPluginsService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
@@ -31007,13 +31205,6 @@
           this._defaultNodeMargin = NODE_MARGIN;
           this._offset = 60;
       }
-      Object.defineProperty(WorkflowService.prototype, "_diagramClientRect", {
-          get: function () {
-              return this._plugins.area.container.getBoundingClientRect();
-          },
-          enumerable: false,
-          configurable: true
-      });
       WorkflowService.prototype.setConfig = function (_config) {
           this._config = _config;
           this._message.sendMessage(MESSAGE_TYPE.configUpdated, _config);
@@ -31072,17 +31263,12 @@
       };
       WorkflowService.prototype.removeEndNode = function () {
           return __awaiter(this, void 0, void 0, function () {
-              var node;
               return __generator(this, function (_c) {
                   switch (_c.label) {
-                      case 0:
-                          node = this._diagram.getNodesByType(NODE_TYPE.end)[0];
-                          if (!node) return [3 /*break*/, 2];
-                          return [4 /*yield*/, removeNodeAndConnections(node, this._diagram.editor)];
+                      case 0: return [4 /*yield*/, this._diagram.removeEndNode()];
                       case 1:
                           _c.sent();
-                          _c.label = 2;
-                      case 2: return [2 /*return*/];
+                          return [2 /*return*/];
                   }
               });
           });
@@ -31097,7 +31283,7 @@
           var 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)
           };
       };
       WorkflowService.prototype._createNode = function (nodeType, data, config) {
@@ -31121,7 +31307,8 @@
                           return [3 /*break*/, 3];
                       case 2: return [2 /*return*/, this._changeNodeSocketPosition(context)];
                       case 3:
-                          if (context.type === 'nodecreated' && context.data.type !== NODE_TYPE.end) {
+                          if (context.type === 'nodecreated' &&
+                              context.data.type !== NODE_TYPE.end) {
                               setTimeout(function () {
                                   _this._updateNodePosition(context);
                               });
@@ -31142,7 +31329,7 @@
           }
           return Object.assign({}, context);
       };
-      WorkflowService.prototype._linkToLastNode = function (_addedNode) {
+      WorkflowService.prototype._linkToLastNode = function (_addedNode, connectionConfig) {
           return __awaiter(this, void 0, void 0, function () {
               var node, viewNode;
               return __generator(this, function (_c) {
@@ -31151,7 +31338,7 @@
                           node = this._diagram.getLastNode();
                           viewNode = this._diagram.getLastViewNode();
                           if (!(node && viewNode)) return [3 /*break*/, 2];
-                          return [4 /*yield*/, this._diagram.addConnection(node, _addedNode)];
+                          return [4 /*yield*/, this._diagram.addConnection(node, _addedNode, connectionConfig)];
                       case 1:
                           _c.sent();
                           return [2 /*return*/, { node: node, viewNode: viewNode }];
@@ -31187,7 +31374,7 @@
                           startNode = this._diagram.createNode(NODE_TYPE.start, {
                               type: NODE_TYPE.start,
                               label: NODE_TYPE.start,
-                              name: 'start',
+                              name: 'start'
                           });
                           return [4 /*yield*/, this._diagram.addNode(startNode)];
                       case 1:
@@ -31235,7 +31422,7 @@
        */
       WorkflowService.prototype._isOverEndBoundary = function (node, previousNode) {
           var _a;
-          var _diagramWidth = Number((_a = this._diagramClientRect) === null || _a === void 0 ? void 0 : _a.width) - this._defaultNodeMargin;
+          var _diagramWidth = Number((_a = this._diagram.diagramClientRect()) === null || _a === void 0 ? void 0 : _a.width) - this._defaultNodeMargin;
           var _width = previousNode.position.x + (node.width + this._defaultNodeMargin) * 2;
           return _width >= _diagramWidth;
       };
@@ -31250,7 +31437,8 @@
               this._defaultNodeWidth +
               this._defaultNodeMargin * 2 +
               this._offset;
-          var wrapLine = Number((_a = this._diagramClientRect) === null || _a === void 0 ? void 0 : _a.width) - this._defaultNodeWidth * 2;
+          var wrapLine = Number((_a = this._diagram.diagramClientRect()) === null || _a === void 0 ? void 0 : _a.width) -
+              this._defaultNodeWidth * 2;
           return currentPosition >= wrapLine;
       };
       WorkflowService.prototype._updateNodePosition = function (context) {
@@ -31263,7 +31451,7 @@
                           _previousNode = this._diagram.getLastNode();
                           _nodeViewPosition = (_a = this._plugins.area.nodeViews.get(context.data.id)) === null || _a === void 0 ? void 0 : _a.position;
                           if (!(_previousNode && _nodeViewPosition)) return [3 /*break*/, 2];
-                          _diagramWidth = Number((_b = this._diagramClientRect) === null || _b === void 0 ? void 0 : _b.width);
+                          _diagramWidth = Number((_b = this._diagram.diagramClientRect()) === null || _b === void 0 ? void 0 : _b.width);
                           _currentX = _nodeViewPosition.x + context.data.width;
                           if (!(_currentX >= _diagramWidth)) return [3 /*break*/, 2];
                           this._plugins.readonly.disable();
@@ -31277,7 +31465,7 @@
                           }
                           return [4 /*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
                               })];
                       case 1:
                           _c.sent();
@@ -31333,45 +31521,28 @@
                   type: i0.Input
               }] } });
 
-  var RemoveButtonComponent = /** @class */ (function () {
-      function RemoveButtonComponent() {
-          this.remove = new i0.EventEmitter();
-      }
-      return RemoveButtonComponent;
-  }());
-  RemoveButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RemoveButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  RemoveButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RemoveButtonComponent, selector: "node-remove-button", outputs: { remove: "remove" }, ngImport: i0__namespace, template: "\n    <button\n      mat-icon-button\n      (click)=\"remove.emit()\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (dblclick)=\"$event.stopPropagation()\"\n      class=\"remove-icon\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  ", 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__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RemoveButtonComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'node-remove-button',
-                      template: "\n    <button\n      mat-icon-button\n      (click)=\"remove.emit()\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (dblclick)=\"$event.stopPropagation()\"\n      class=\"remove-icon\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  ",
-                      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    ",
-                      ],
-                  }]
-          }], propDecorators: { remove: [{
-                  type: i0.Output
-              }] } });
-
-  var NodeInputsComponent = /** @class */ (function () {
-      function NodeInputsComponent() {
+  var NodePortsComponent = /** @class */ (function () {
+      function NodePortsComponent() {
       }
-      return NodeInputsComponent;
+      return NodePortsComponent;
   }());
-  NodeInputsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeInputsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NodeInputsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n    <div\n      *ngFor=\"let input of data.inputs | keyvalue : sortByIndex\"\n      class=\"da-node__inputs__socket\"\n      style=\" height: var(--socket-size, 16px);\"\n      refComponent\n      [data]=\"{\n        type: 'socket',\n        side: 'input',\n        key: input.key,\n        nodeId: data.id,\n        payload: input.value?.socket,\n        seed: seed\n      }\"\n      [emit]=\"emit\"\n    ></div>\n  ", isInline: true, directives: [{ type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4__namespace$1.KeyValuePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeInputsComponent, decorators: [{
+  NodePortsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodePortsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  NodePortsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n\t\t<div\n\t\t\t*ngFor=\"let input of data.inputs | keyvalue : sortByIndex\"\n\t\t\tclass=\"node-port node-port--input  {{ input.value.styleClass }}\"\n\t\t\trefComponent\n\t\t\t[title]=\"input.value.styleClass\"\n\t\t\t[data]=\"{\n\t\t\t\ttype: 'socket',\n\t\t\t\tside: 'input',\n\t\t\t\tkey: input.key,\n\t\t\t\tnodeId: data.id,\n\t\t\t\tpayload: input.value?.socket,\n\t\t\t\tseed: seed\n\t\t\t}\"\n\t\t\t[emit]=\"emit\"\n\t\t></div>\n\n\t\t<div\n\t\t\t*ngFor=\"let output of data.outputs | keyvalue : sortByIndex\"\n\t\t\tclass=\"node-port node-port--output  {{ output.value.styleClass }}\"\n\t\t\trefComponent\n\t\t\t[title]=\"output.value.styleClass\"\n\t\t\t[data]=\"{\n\t\t\t\ttype: 'socket',\n\t\t\t\tside: 'output',\n\t\t\t\tkey: output.key,\n\t\t\t\tnodeId: data.id,\n\t\t\t\tpayload: output.value?.socket,\n\t\t\t\tseed: seed\n\t\t\t}\"\n\t\t\t[emit]=\"emit\"\n\t\t></div>\n\t", 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__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4__namespace$1.KeyValuePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodePortsComponent, decorators: [{
               type: i0.Component,
               args: [{
-                      selector: 'node-inputs',
+                      selector: 'node-ports',
                       encapsulation: i0.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: "\n    <div\n      *ngFor=\"let input of data.inputs | keyvalue : sortByIndex\"\n      class=\"da-node__inputs__socket\"\n      style=\" height: var(--socket-size, 16px);\"\n      refComponent\n      [data]=\"{\n        type: 'socket',\n        side: 'input',\n        key: input.key,\n        nodeId: data.id,\n        payload: input.value?.socket,\n        seed: seed\n      }\"\n      [emit]=\"emit\"\n    ></div>\n  ",
+                      template: "\n\t\t<div\n\t\t\t*ngFor=\"let input of data.inputs | keyvalue : sortByIndex\"\n\t\t\tclass=\"node-port node-port--input  {{ input.value.styleClass }}\"\n\t\t\trefComponent\n\t\t\t[title]=\"input.value.styleClass\"\n\t\t\t[data]=\"{\n\t\t\t\ttype: 'socket',\n\t\t\t\tside: 'input',\n\t\t\t\tkey: input.key,\n\t\t\t\tnodeId: data.id,\n\t\t\t\tpayload: input.value?.socket,\n\t\t\t\tseed: seed\n\t\t\t}\"\n\t\t\t[emit]=\"emit\"\n\t\t></div>\n\n\t\t<div\n\t\t\t*ngFor=\"let output of data.outputs | keyvalue : sortByIndex\"\n\t\t\tclass=\"node-port node-port--output  {{ output.value.styleClass }}\"\n\t\t\trefComponent\n\t\t\t[title]=\"output.value.styleClass\"\n\t\t\t[data]=\"{\n\t\t\t\ttype: 'socket',\n\t\t\t\tside: 'output',\n\t\t\t\tkey: output.key,\n\t\t\t\tnodeId: data.id,\n\t\t\t\tpayload: output.value?.socket,\n\t\t\t\tseed: seed\n\t\t\t}\"\n\t\t\t[emit]=\"emit\"\n\t\t></div>\n\t"
                   }]
-          }], propDecorators: { direction: [{
+          }], propDecorators: { inputsDirection: [{
+                  type: i0.Input
+              }], outputsDirection: [{
                   type: i0.Input
               }], data: [{
                   type: i0.Input
@@ -31383,33 +31554,25 @@
                   type: i0.Input
               }] } });
 
-  var NodeOutputsComponent = /** @class */ (function () {
-      function NodeOutputsComponent() {
+  var RemoveButtonComponent = /** @class */ (function () {
+      function RemoveButtonComponent() {
+          this.remove = new i0.EventEmitter();
       }
-      return NodeOutputsComponent;
+      return RemoveButtonComponent;
   }());
-  NodeOutputsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeOutputsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NodeOutputsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div\n    class=\"da-node__outputs__socket\"\n    style=\" height: var(--socket-size, 16px);\"\n    *ngFor=\"let output of data.outputs | keyvalue : sortByIndex\"\n    refComponent\n    [data]=\"{\n      type: 'socket',\n      side: 'output',\n      key: output.key,\n      nodeId: data.id,\n      payload: output.value?.socket,\n      seed: seed\n    }\"\n    [emit]=\"emit\"\n  ></div>", isInline: true, directives: [{ type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4__namespace$1.KeyValuePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeOutputsComponent, decorators: [{
+  RemoveButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RemoveButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  RemoveButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RemoveButtonComponent, selector: "node-remove-button", outputs: { remove: "remove" }, ngImport: i0__namespace, template: "\n\t\t<button\n\t\t\tmat-icon-button\n\t\t\t(click)=\"remove.emit()\"\n\t\t\t(pointerdown)=\"$event.stopPropagation()\"\n\t\t\t(dblclick)=\"$event.stopPropagation()\"\n\t\t\tclass=\"remove-icon\"\n\t\t>\n\t\t\t<mat-icon>close</mat-icon>\n\t\t</button>\n\t", 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__namespace$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__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RemoveButtonComponent, decorators: [{
               type: i0.Component,
               args: [{
-                      selector: 'node-outputs',
-                      encapsulation: i0.ViewEncapsulation.None,
-                      host: {
-                          '[class]': " 'da-node__outputs outputs-' + direction",
-                      },
-                      template: "<div\n    class=\"da-node__outputs__socket\"\n    style=\" height: var(--socket-size, 16px);\"\n    *ngFor=\"let output of data.outputs | keyvalue : sortByIndex\"\n    refComponent\n    [data]=\"{\n      type: 'socket',\n      side: 'output',\n      key: output.key,\n      nodeId: data.id,\n      payload: output.value?.socket,\n      seed: seed\n    }\"\n    [emit]=\"emit\"\n  ></div>",
+                      selector: 'node-remove-button',
+                      template: "\n\t\t<button\n\t\t\tmat-icon-button\n\t\t\t(click)=\"remove.emit()\"\n\t\t\t(pointerdown)=\"$event.stopPropagation()\"\n\t\t\t(dblclick)=\"$event.stopPropagation()\"\n\t\t\tclass=\"remove-icon\"\n\t\t>\n\t\t\t<mat-icon>close</mat-icon>\n\t\t</button>\n\t",
+                      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"
+                      ]
                   }]
-          }], propDecorators: { direction: [{
-                  type: i0.Input
-              }], data: [{
-                  type: i0.Input
-              }], seed: [{
-                  type: i0.Input
-              }], emit: [{
-                  type: i0.Input
-              }], sortByIndex: [{
-                  type: i0.Input
+          }], propDecorators: { remove: [{
+                  type: i0.Output
               }] } });
 
   var CircleNodeComponent = /** @class */ (function (_super) {
@@ -31420,7 +31583,7 @@
       return CircleNodeComponent;
   }(BaseNodeComponent));
   CircleNodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CircleNodeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  CircleNodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CircleNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  CircleNodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CircleNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CircleNodeComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -31429,6 +31592,65 @@
                   }]
           }] });
 
+  var ConnectionLabelComponent = /** @class */ (function () {
+      function ConnectionLabelComponent(_zone) {
+          var _this = this;
+          this._zone = _zone;
+          this.transformStyle = '';
+          this.observer = new MutationObserver(function () {
+              _this.calculatePosition();
+          });
+      }
+      ConnectionLabelComponent.prototype.ngAfterViewInit = function () {
+          var _this = this;
+          if (!this.path) {
+              return;
+          }
+          this._zone.runOutsideAngular(function () {
+              _this.observer.observe(_this.path, {
+                  attributes: true
+              });
+          });
+      };
+      ConnectionLabelComponent.prototype.ngOnDestroy = function () {
+          this.observer.disconnect();
+      };
+      ConnectionLabelComponent.prototype.calculatePosition = function () {
+          var positionPoint = this._getPositionPoint();
+          this.labelContainer.nativeElement.style.transform = "translate(" + positionPoint.x + "px, " + positionPoint.y + "px)";
+      };
+      ConnectionLabelComponent.prototype._getPositionPoint = function () {
+          var pathLength = this.path.getTotalLength();
+          var 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));
+      };
+      return ConnectionLabelComponent;
+  }());
+  ConnectionLabelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ConnectionLabelComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  ConnectionLabelComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: " <div\n\t\t#labelContainer\n\t\t[ngStyle]=\"{\n\t\t\tposition: 'absolute',\n\t\t\ttop: '0',\n\t\t\tleft: '0',\n\t\t\tzIndex: ' var(--label-z-index, -1)'\n\t\t}\"\n\t>\n\t\t<div [ngClass]=\"{ 'label-text': !!text }\">{{ text }}</div>\n\t</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__namespace$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ConnectionLabelComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'app-connection-label',
+                      template: " <div\n\t\t#labelContainer\n\t\t[ngStyle]=\"{\n\t\t\tposition: 'absolute',\n\t\t\ttop: '0',\n\t\t\tleft: '0',\n\t\t\tzIndex: ' var(--label-z-index, -1)'\n\t\t}\"\n\t>\n\t\t<div [ngClass]=\"{ 'label-text': !!text }\">{{ text }}</div>\n\t</div>",
+                      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"
+                      ]
+                  }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { path: [{
+                  type: i0.Input
+              }], position: [{
+                  type: i0.Input
+              }], text: [{
+                  type: i0.Input
+              }], labelContainer: [{
+                  type: i0.ViewChild,
+                  args: ['labelContainer', { static: true }]
+              }] } });
+
   var StatusIconComponent = /** @class */ (function () {
       function StatusIconComponent() {
       }
@@ -31493,7 +31715,7 @@
       return ContentNodeComponent;
   }(BaseNodeComponent));
   ContentNodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ContentNodeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ContentNodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ContentNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  ContentNodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ContentNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ContentNodeComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -31507,20 +31729,50 @@
       function CustomConnectionComponent() {
           return _super !== null && _super.apply(this, arguments) || this;
       }
+      Object.defineProperty(CustomConnectionComponent.prototype, "pathNative", {
+          get: function () {
+              var _a;
+              return (_a = this.pathElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(CustomConnectionComponent.prototype, "labelText", {
+          get: function () {
+              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;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(CustomConnectionComponent.prototype, "labelPosition", {
+          get: function () {
+              return typeof this.data.label === 'string'
+                  ? 'center'
+                  : this.data.label.position;
+          },
+          enumerable: false,
+          configurable: true
+      });
       return CustomConnectionComponent;
   }(i2$8.ConnectionComponent));
   CustomConnectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomConnectionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  CustomConnectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomConnectionComponent, selector: "connection", inputs: { data: "data" }, usesInheritance: true, ngImport: i0__namespace, template: "\n    <svg\n      data-testid=\"connection\"\n      style=\"z-index:-1\"\n      class=\"{{ data?.status ? 'connection-status-' + data?.status : '' }}\"\n    >\n      <path [attr.d]=\"path\" />\n    </svg>\n  ", 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__namespace.ɵɵ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__namespace, template: "\n\t\t<svg\n\t\t\tdata-testid=\"connection\"\n\t\t\tstyle=\"z-index:-2\"\n\t\t\tclass=\"{{ data?.status ? 'connection-status-' + data?.status : '' }} {{\n\t\t\t\tdata?.styleClass\n\t\t\t}}\"\n\t\t>\n\t\t\t<path [attr.d]=\"path\" #pathElement />\n\t\t</svg>\n\t\t<app-connection-label\n\t\t\t*ngIf=\"data?.label && pathNative\"\n\t\t\t[path]=\"pathNative\"\n\t\t\t[text]=\"labelText\"\n\t\t\t[position]=\"labelPosition\"\n\t\t></app-connection-label>\n\t", 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__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomConnectionComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'connection',
                       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    ",
+                          "\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"
                       ],
-                      template: "\n    <svg\n      data-testid=\"connection\"\n      style=\"z-index:-1\"\n      class=\"{{ data?.status ? 'connection-status-' + data?.status : '' }}\"\n    >\n      <path [attr.d]=\"path\" />\n    </svg>\n  ",
+                      template: "\n\t\t<svg\n\t\t\tdata-testid=\"connection\"\n\t\t\tstyle=\"z-index:-2\"\n\t\t\tclass=\"{{ data?.status ? 'connection-status-' + data?.status : '' }} {{\n\t\t\t\tdata?.styleClass\n\t\t\t}}\"\n\t\t>\n\t\t\t<path [attr.d]=\"path\" #pathElement />\n\t\t</svg>\n\t\t<app-connection-label\n\t\t\t*ngIf=\"data?.label && pathNative\"\n\t\t\t[path]=\"pathNative\"\n\t\t\t[text]=\"labelText\"\n\t\t\t[position]=\"labelPosition\"\n\t\t></app-connection-label>\n\t"
                   }]
-          }], propDecorators: { data: [{
+          }], propDecorators: { pathElement: [{
+                  type: i0.ViewChild,
+                  args: ['pathElement', { static: true }]
+              }], data: [{
                   type: i0.Input
               }] } });
 
@@ -31532,17 +31784,126 @@
       return CustomSocketComponent;
   }(i2$8.SocketComponent));
   CustomSocketComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomSocketComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  CustomSocketComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomSocketComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, 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__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomSocketComponent, selector: "ng-component", host: { properties: { "class": "data?.styleClass" } }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomSocketComponent, decorators: [{
               type: i0.Component,
               args: [{
                       template: "",
                       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    ",
+                          "\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"
                       ],
+                      host: {
+                          '[class]': 'data?.styleClass'
+                      }
+                  }]
+          }] });
+
+  var GatewayPortsComponent = /** @class */ (function () {
+      function GatewayPortsComponent() {
+      }
+      return GatewayPortsComponent;
+  }());
+  GatewayPortsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GatewayPortsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  GatewayPortsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n\t\t<div\n\t\t\t*ngFor=\"let input of data.inputs | keyvalue : sortByIndex\"\n\t\t\tclass=\"gateway-port gateway-port--input  {{ input.value.styleClass }}\"\n\t\t\trefComponent\n\t\t\t[data]=\"{\n\t\t\t\ttype: 'socket',\n\t\t\t\tside: 'input',\n\t\t\t\tkey: input.key,\n\t\t\t\tnodeId: data.id,\n\t\t\t\tpayload: input.value?.socket,\n\t\t\t\tseed: seed\n\t\t\t}\"\n\t\t\t[emit]=\"emit\"\n\t\t></div>\n\n\t\t<div\n\t\t\t*ngFor=\"let output of data.outputs | keyvalue : sortByIndex\"\n\t\t\tclass=\"gateway-port gateway-port--output  {{ output.value.styleClass }}\"\n\t\t\trefComponent\n\t\t\t[data]=\"{\n\t\t\t\ttype: 'socket',\n\t\t\t\tside: 'output',\n\t\t\t\tkey: output.key,\n\t\t\t\tnodeId: data.id,\n\t\t\t\tpayload: output.value?.socket,\n\t\t\t\tseed: seed\n\t\t\t}\"\n\t\t\t[emit]=\"emit\"\n\t\t></div>\n\t", 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__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4__namespace$1.KeyValuePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GatewayPortsComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'gateway-ports',
+                      encapsulation: i0.ViewEncapsulation.None,
+                      template: "\n\t\t<div\n\t\t\t*ngFor=\"let input of data.inputs | keyvalue : sortByIndex\"\n\t\t\tclass=\"gateway-port gateway-port--input  {{ input.value.styleClass }}\"\n\t\t\trefComponent\n\t\t\t[data]=\"{\n\t\t\t\ttype: 'socket',\n\t\t\t\tside: 'input',\n\t\t\t\tkey: input.key,\n\t\t\t\tnodeId: data.id,\n\t\t\t\tpayload: input.value?.socket,\n\t\t\t\tseed: seed\n\t\t\t}\"\n\t\t\t[emit]=\"emit\"\n\t\t></div>\n\n\t\t<div\n\t\t\t*ngFor=\"let output of data.outputs | keyvalue : sortByIndex\"\n\t\t\tclass=\"gateway-port gateway-port--output  {{ output.value.styleClass }}\"\n\t\t\trefComponent\n\t\t\t[data]=\"{\n\t\t\t\ttype: 'socket',\n\t\t\t\tside: 'output',\n\t\t\t\tkey: output.key,\n\t\t\t\tnodeId: data.id,\n\t\t\t\tpayload: output.value?.socket,\n\t\t\t\tseed: seed\n\t\t\t}\"\n\t\t\t[emit]=\"emit\"\n\t\t></div>\n\t",
+                      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"
+                      ]
+                  }]
+          }], propDecorators: { direction: [{
+                  type: i0.Input
+              }], data: [{
+                  type: i0.Input
+              }], seed: [{
+                  type: i0.Input
+              }], emit: [{
+                  type: i0.Input
+              }], sortByIndex: [{
+                  type: i0.Input
+              }] } });
+
+  var GatewayNodeComponent = /** @class */ (function (_super) {
+      __extends(GatewayNodeComponent, _super);
+      function GatewayNodeComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      return GatewayNodeComponent;
+  }(BaseNodeComponent));
+  GatewayNodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GatewayNodeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  GatewayNodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GatewayNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GatewayNodeComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      templateUrl: './gateway-node.component.html',
+                      styleUrls: ['../../styles/node.scss', './gateway-node.component.scss']
                   }]
           }] });
 
+  var NodeInputsComponent = /** @class */ (function () {
+      function NodeInputsComponent() {
+      }
+      return NodeInputsComponent;
+  }());
+  NodeInputsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeInputsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  NodeInputsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n\t\t<div\n\t\t\t*ngFor=\"let input of data.inputs | keyvalue : sortByIndex\"\n\t\t\tclass=\"node-ports__port {{ input.value.styleClass }}\"\n\t\t\trefComponent\n\t\t\t[data]=\"{\n\t\t\t\ttype: 'socket',\n\t\t\t\tside: 'input',\n\t\t\t\tkey: input.key,\n\t\t\t\tnodeId: data.id,\n\t\t\t\tpayload: input.value?.socket,\n\t\t\t\tseed: seed\n\t\t\t}\"\n\t\t\t[emit]=\"emit\"\n\t\t></div>\n\t", 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__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4__namespace$1.KeyValuePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeInputsComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'node-inputs',
+                      encapsulation: i0.ViewEncapsulation.None,
+                      styleUrls: ['../styles/ports.scss'],
+                      host: {
+                          '[class]': " 'node-ports node-ports--inputs  node-ports--' + direction"
+                      },
+                      template: "\n\t\t<div\n\t\t\t*ngFor=\"let input of data.inputs | keyvalue : sortByIndex\"\n\t\t\tclass=\"node-ports__port {{ input.value.styleClass }}\"\n\t\t\trefComponent\n\t\t\t[data]=\"{\n\t\t\t\ttype: 'socket',\n\t\t\t\tside: 'input',\n\t\t\t\tkey: input.key,\n\t\t\t\tnodeId: data.id,\n\t\t\t\tpayload: input.value?.socket,\n\t\t\t\tseed: seed\n\t\t\t}\"\n\t\t\t[emit]=\"emit\"\n\t\t></div>\n\t"
+                  }]
+          }], propDecorators: { direction: [{
+                  type: i0.Input
+              }], data: [{
+                  type: i0.Input
+              }], seed: [{
+                  type: i0.Input
+              }], emit: [{
+                  type: i0.Input
+              }], sortByIndex: [{
+                  type: i0.Input
+              }] } });
+
+  var NodeOutputsComponent = /** @class */ (function () {
+      function NodeOutputsComponent() {
+      }
+      return NodeOutputsComponent;
+  }());
+  NodeOutputsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeOutputsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  NodeOutputsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div\n\t\tclass=\"node-ports__port {{ output.value.styleClass }}\"\n\t\t*ngFor=\"let output of data.outputs | keyvalue : sortByIndex\"\n\t\trefComponent\n\t\t[data]=\"{\n\t\t\ttype: 'socket',\n\t\t\tside: 'output',\n\t\t\tkey: output.key,\n\t\t\tnodeId: data.id,\n\t\t\tpayload: output.value?.socket,\n\t\t\tseed: seed\n\t\t}\"\n\t\t[emit]=\"emit\"\n\t></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__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4__namespace$1.KeyValuePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeOutputsComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'node-outputs',
+                      encapsulation: i0.ViewEncapsulation.None,
+                      styleUrls: ['../styles/ports.scss'],
+                      host: {
+                          '[class]': " 'node-ports node-ports--outputs  node-ports--' + direction"
+                      },
+                      template: "<div\n\t\tclass=\"node-ports__port {{ output.value.styleClass }}\"\n\t\t*ngFor=\"let output of data.outputs | keyvalue : sortByIndex\"\n\t\trefComponent\n\t\t[data]=\"{\n\t\t\ttype: 'socket',\n\t\t\tside: 'output',\n\t\t\tkey: output.key,\n\t\t\tnodeId: data.id,\n\t\t\tpayload: output.value?.socket,\n\t\t\tseed: seed\n\t\t}\"\n\t\t[emit]=\"emit\"\n\t></div>"
+                  }]
+          }], propDecorators: { direction: [{
+                  type: i0.Input
+              }], data: [{
+                  type: i0.Input
+              }], seed: [{
+                  type: i0.Input
+              }], emit: [{
+                  type: i0.Input
+              }], sortByIndex: [{
+                  type: i0.Input
+              }] } });
+
   var TemplateNodeComponent = /** @class */ (function (_super) {
       __extends(TemplateNodeComponent, _super);
       function TemplateNodeComponent() {
@@ -31568,7 +31929,7 @@
       return TemplateNodeComponent;
   }(BaseNodeComponent));
   TemplateNodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateNodeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  TemplateNodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplateNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.Default });
+  TemplateNodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplateNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.Default });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateNodeComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -31644,24 +32005,23 @@
       DiagramDirective.prototype.ngAfterViewInit = function () {
           return __awaiter(this, void 0, void 0, function () {
               var editor, error_1;
-              return __generator(this, function (_a) {
-                  switch (_a.label) {
+              return __generator(this, function (_c) {
+                  switch (_c.label) {
                       case 0:
                           this._appendZoomComponent();
-                          _a.label = 1;
+                          _c.label = 1;
                       case 1:
-                          _a.trys.push([1, 3, , 4]);
-                          return [4 /*yield*/, createDiagramEditor(this._elementRef.nativeElement, this._injector, this.config //TODO it's Should be merged with DIAGRAM_DEFAULT_OPTIONS
-                              )];
+                          _c.trys.push([1, 3, , 4]);
+                          return [4 /*yield*/, createDiagramEditor(this._elementRef.nativeElement, this._injector, this.config)];
                       case 2:
-                          editor = _a.sent();
+                          editor = _c.sent();
                           this._pluginsService.setPlugins(editor);
                           this._diagramService.setEditor(editor);
                           this.diagramEditor = editor;
                           this.onDiagramReady.emit(editor);
                           return [3 /*break*/, 4];
                       case 3:
-                          error_1 = _a.sent();
+                          error_1 = _c.sent();
                           console.log(error_1);
                           return [3 /*break*/, 4];
                       case 4: return [2 /*return*/];
@@ -31671,14 +32031,18 @@
       };
       DiagramDirective.prototype._appendStyles = function () {
           var _this = this;
+          var _a, _b;
           var _requiredStyles = {
               position: 'var(--diagram-position, relative)',
               width: "var(--diagram-width, " + this.width + ")",
               height: "var(--diagram-height, " + this.height + ")",
-              direction: 'ltr',
+              direction: 'ltr'
           };
-          Object.entries(_requiredStyles).forEach(function (_a) {
-              var _b = __read(_a, 2), key = _b[0], value = _b[1];
+          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(function (_c) {
+              var _d = __read(_c, 2), key = _d[0], value = _d[1];
               _this._renderer.setStyle(_this._elementRef.nativeElement, key, value);
           });
       };
@@ -31690,7 +32054,7 @@
               type: i0.Directive,
               args: [{
                       selector: '[appDiagram]',
-                      exportAs: 'diagram',
+                      exportAs: 'diagram'
                   }]
           }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }, { type: i0__namespace.Injector }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.ComponentFactoryResolver }, { type: DiagramService }, { type: DiagramPluginsService }]; }, propDecorators: { height: [{
                   type: i0.Input
@@ -31721,7 +32085,11 @@
           NodeIconComponent,
           StatusIconComponent,
           NodeInputsComponent,
-          NodeOutputsComponent], imports: [i4.CommonModule,
+          NodeOutputsComponent,
+          GatewayNodeComponent,
+          ConnectionLabelComponent,
+          NodePortsComponent,
+          GatewayPortsComponent], imports: [i4.CommonModule,
           i2$8.ReteModule,
           i1$7.MatButtonModule,
           i2$1.MatIconModule,
@@ -31735,7 +32103,7 @@
               i2$1.MatIconModule,
               i6.FormsModule,
               i1$1.TranslateModule,
-              i2$2.MatTooltipModule,
+              i2$2.MatTooltipModule
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramsModule, decorators: [{
               type: i0.NgModule,
@@ -31753,6 +32121,10 @@
                           StatusIconComponent,
                           NodeInputsComponent,
                           NodeOutputsComponent,
+                          GatewayNodeComponent,
+                          ConnectionLabelComponent,
+                          NodePortsComponent,
+                          GatewayPortsComponent
                       ],
                       imports: [
                           i4.CommonModule,
@@ -31761,10 +32133,10 @@
                           i2$1.MatIconModule,
                           i6.FormsModule,
                           i1$1.TranslateModule,
-                          i2$2.MatTooltipModule,
+                          i2$2.MatTooltipModule
                       ],
                       exports: [DiagramDirective, ZoomControlComponent],
-                      providers: [DiagramService, DiagramPluginsService, WorkflowService],
+                      providers: [DiagramService, DiagramPluginsService, WorkflowService]
                   }]
           }] });
 
@@ -34028,6 +34400,7 @@
   exports.ConfirmationDialogComponent = ConfirmationDialogComponent;
   exports.ConfirmationDialogModule = ConfirmationDialogModule;
   exports.Connection = Connection;
+  exports.ConnectionLabelComponent = ConnectionLabelComponent;
   exports.ContentNode = ContentNode;
   exports.ContentNodeComponent = ContentNodeComponent;
   exports.CopyComponent = CopyComponent;
@@ -34063,6 +34436,7 @@
   exports.DiagramDirective = DiagramDirective;
   exports.DiagramPluginsService = DiagramPluginsService;
   exports.DiagramService = DiagramService;
+  exports.DiagramUtils = DiagramUtils;
   exports.DiagramsModule = DiagramsModule;
   exports.DialogMangmentService = DialogMangmentService;
   exports.DirectiveModule = DirectiveModule;
@@ -34134,6 +34508,8 @@
   exports.FilterModule = FilterModule;
   exports.FolderModalComponent = FolderModalComponent;
   exports.FormBuilderService = FormBuilderService;
+  exports.GatewayNodeComponent = GatewayNodeComponent;
+  exports.GatewayPortsComponent = GatewayPortsComponent;
   exports.GlobalAdminService = GlobalAdminService;
   exports.GlobalPdfTron = GlobalPdfTron;
   exports.GregorianDatepickerComponent = GregorianDatepickerComponent;
@@ -34143,6 +34519,7 @@
   exports.IN_OUT_DIRECTION = IN_OUT_DIRECTION;
   exports.IconService = IconService;
   exports.InitializationService = InitializationService;
+  exports.InputPort = InputPort;
   exports.ItemListComponent = ItemListComponent;
   exports.LatestActivityComponent = LatestActivityComponent;
   exports.LatestActivityModule = LatestActivityModule;
@@ -34161,6 +34538,7 @@
   exports.MultipleDynamicFormViewerComponent = MultipleDynamicFormViewerComponent;
   exports.MutipleDynamicFormViewerModule = MutipleDynamicFormViewerModule;
   exports.NODE_CIRCLE_SIZE = NODE_CIRCLE_SIZE;
+  exports.NODE_GATEWAY_SIZE = NODE_GATEWAY_SIZE;
   exports.NODE_HEIGHT = NODE_HEIGHT;
   exports.NODE_MARGIN = NODE_MARGIN;
   exports.NODE_STATUS = NODE_STATUS;
@@ -34178,6 +34556,7 @@
   exports.NodeIconComponent = NodeIconComponent;
   exports.NodeInputsComponent = NodeInputsComponent;
   exports.NodeOutputsComponent = NodeOutputsComponent;
+  exports.NodePortsComponent = NodePortsComponent;
   exports.NotificationIconDirective = NotificationIconDirective;
   exports.NotificationItemComponent = NotificationItemComponent;
   exports.NotificationItemDirective = NotificationItemDirective;
@@ -34199,6 +34578,7 @@
   exports.NuxeoDialogService = NuxeoDialogService;
   exports.NuxeoMapper = NuxeoMapper;
   exports.NuxeoService = NuxeoService;
+  exports.OutputPort = OutputPort;
   exports.PAGINATION_MODE = PAGINATION_MODE;
   exports.PANEL_MODE = PANEL_MODE;
   exports.PaginationComponent = PaginationComponent;
@@ -34279,6 +34659,7 @@
   exports.extensionJsonsFactory = extensionJsonsFactory;
   exports.filterEnabled = filterEnabled;
   exports.getConnections = getConnections;
+  exports.getRandomNumber = getRandomNumber;
   exports.getValue = getValue;
   exports.mergeArrays = mergeArrays;
   exports.mergeObjects = mergeObjects;