nuxeo-development-framework 4.1.0 → 4.1.2

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

@@ -2441,7 +2441,7 @@
       return NdfNuxeoDialog;
   }(BaseComponent));
   NdfNuxeoDialog.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfNuxeoDialog, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NdfNuxeoDialog.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: { dialogTitle: "dialogTitle", subTitle: "subTitle", loaderMode: "loaderMode" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], viewQueries: [{ propertyName: "dialogBody", first: true, predicate: ["dialogBody"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div SetDirRtl class=\"ndf-dialog-wrapper flex flex-col\">\r\n\t<div\r\n\t\tclass=\"dialog-header flex h-20 p-6 justify-between items-center w-full bg-vapor text-blue-munsell text-xl not-italic font-bold leading-7\"\r\n\t>\r\n\t\t<div class=\"flex flex-col\">\r\n\t\t\t<span>{{ data?.dialogConfig?.title || dialogTitle }}</span>\r\n\t\t\t<span class=\"text-base font-normal\"\r\n\t\t\t\t>{{ data?.dialogConfig?.subTitle || subTitle }}</span\r\n\t\t\t>\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\tclass=\"flex items-center justify-center rounded-full bg-anti-flash-white w-10 h-10\"\r\n\t\t\t(click)=\"executeAction()\"\r\n\t\t\tmatTooltip=\"{{'BUTTONS.CLOSE' | translate}}\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"icon-size-3.5\" [svgIcon]=\"'icons:cancel-icon'\">\r\n\t\t\t</mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<div\r\n\t\t#dialogBody\r\n\t\tclass=\"dialog-body flex flex-col gap-y-4 p-6 overflow-y-auto relative z-99\"\r\n\t\t[ngClass]=\"{'overflow-hidden': loading}\"\r\n\t>\r\n\t\t<ng-container\r\n\t\t\t*ngTemplateOutlet=\"data?.dialogConfig?.contentTemplate || contentTemplate\"\r\n\t\t></ng-container>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"overlay flex w-full h-full items-center justify-center absolute left-0 bottom-0 right-0 bg-gray-300 opacity-40 z-999\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t></div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"overlay flex w-full h-full items-center justify-center absolute left-0 bottom-0 right-0 z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'spinner'\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t>\r\n\t\t\t\t<mat-spinner\r\n\t\t\t\t\t[value]=\"90\"\r\n\t\t\t\t\t[strokeWidth]=\"4\"\r\n\t\t\t\t\toverlay=\"true\"\r\n\t\t\t\t\t[diameter]=\"40\"\r\n\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-spinner>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"block w-full h-px absolute inset-0 z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'progressBar'\"\r\n\t\t\t>\r\n\t\t\t\t<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"flex w-full justify-end p-6 pt-0 gap-x-4\">\r\n\t\t<button class=\"cancelation-button\" (click)=\"executeAction()\">\r\n\t\t\t{{\"BUTTONS.CANCEL\" | translate}}\r\n\t\t</button>\r\n\t\t<ng-container\r\n\t\t\t*ngTemplateOutlet=\"(data?.dialogConfig?.actionsTemplate || actionsTemplate); context: { dialog: this }\"\r\n\t\t></ng-container>\r\n\t</div>\r\n</div>\r\n", styles: ["::ng-deep .ndf-dialog .mat-dialog-container{overflow:hidden!important;border-radius:8px!important}.ndf-dialog-wrapper .dialog-body{height:auto;max-height:calc(100vh - 208px)}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: SetDirRtlDirective, selector: "[SetDirRtl]" }, { type: i2__namespace$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  NdfNuxeoDialog.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: { dialogTitle: "dialogTitle", subTitle: "subTitle", loaderMode: "loaderMode" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], viewQueries: [{ propertyName: "dialogBody", first: true, predicate: ["dialogBody"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div SetDirRtl class=\"ndf-dialog-wrapper flex flex-col h-full\">\r\n\t<div\r\n\t\tclass=\"dialog-header flex h-20 p-6 justify-between items-center w-full bg-vapor text-blue-munsell text-xl not-italic font-bold leading-7\"\r\n\t>\r\n\t\t<div class=\"flex flex-col\">\r\n\t\t\t<span>{{ data?.dialogConfig?.title || dialogTitle }}</span>\r\n\t\t\t<span class=\"text-base font-normal\"\r\n\t\t\t\t>{{ data?.dialogConfig?.subTitle || subTitle }}</span\r\n\t\t\t>\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\tclass=\"flex items-center justify-center rounded-full bg-anti-flash-white w-10 h-10\"\r\n\t\t\t(click)=\"executeAction()\"\r\n\t\t\tmatTooltip=\"{{'BUTTONS.CLOSE' | translate}}\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"icon-size-3.5\" [svgIcon]=\"'icons:cancel-icon'\">\r\n\t\t\t</mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<div\r\n\t\t#dialogBody\r\n\t\tclass=\"dialog-body flex flex-col gap-y-4 p-6 overflow-y-auto relative z-99\"\r\n\t\t[ngClass]=\"{'overflow-hidden': loading}\"\r\n\t>\r\n\t\t<ng-container\r\n\t\t\t*ngTemplateOutlet=\"data?.dialogConfig?.contentTemplate || contentTemplate\"\r\n\t\t></ng-container>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"overlay flex w-full h-full items-center justify-center absolute left-0 bottom-0 right-0 bg-gray-300 opacity-40 z-999\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t></div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"overlay flex w-full h-full items-center justify-center absolute left-0 bottom-0 right-0 z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'spinner'\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t>\r\n\t\t\t\t<mat-spinner\r\n\t\t\t\t\t[value]=\"90\"\r\n\t\t\t\t\t[strokeWidth]=\"4\"\r\n\t\t\t\t\toverlay=\"true\"\r\n\t\t\t\t\t[diameter]=\"40\"\r\n\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-spinner>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"block w-full h-px absolute inset-0 z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'progressBar'\"\r\n\t\t\t>\r\n\t\t\t\t<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"flex w-full justify-end p-6 pt-0 gap-x-4\">\r\n\t\t<button class=\"cancelation-button\" (click)=\"executeAction()\">\r\n\t\t\t{{\"BUTTONS.CANCEL\" | translate}}\r\n\t\t</button>\r\n\t\t<ng-container\r\n\t\t\t*ngTemplateOutlet=\"(data?.dialogConfig?.actionsTemplate || actionsTemplate); context: { dialog: this }\"\r\n\t\t></ng-container>\r\n\t</div>\r\n</div>\r\n", styles: ["::ng-deep .ndf-dialog .mat-dialog-container{overflow:hidden!important;border-radius:8px!important}.ndf-dialog-wrapper .dialog-body{height:100%;max-height:calc(100vh - 208px)}:host{height:100%;display:block}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: SetDirRtlDirective, selector: "[SetDirRtl]" }, { type: i2__namespace$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfNuxeoDialog, decorators: [{
               type: i0.Component,
               args: [{
@@ -6665,7 +6665,7 @@
       return CorrespondenceRelationListComponent;
   }());
   CorrespondenceRelationListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CorrespondenceRelationListComponent, deps: [{ token: CorrespondenceRelationService }, { token: i1__namespace$3.MatDialog }, { token: ViewerFilesService }, { token: DocumentsService }, { token: AdapterService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CorrespondenceRelationListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceRelationListComponent, selector: "cts-correspondence-relation-list", inputs: { correspondence_id: "correspondence_id", reload: "reload" }, ngImport: i0__namespace, template: "<div class=\"relations-list\" *ngIf=\"relateddoc.length > 0\">\r\n  <ng-container>\r\n    <div *ngFor=\"let group of relateddoc; first as isFirst\">\r\n      <mat-accordion class=\"example-headers-align\" multi>\r\n        <mat-expansion-panel [expanded]=\"isFirst\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{ group[0] }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <ng-template matExpansionPanelContent>\r\n            <mat-list>\r\n              <div class=\"mat-list-items\" *ngFor=\"let item of group[1]\">\r\n                <cts-item-list\r\n                  [item]=\"item\"\r\n                  [title]=\"item.title\"\r\n                  [iconname]=\"'link'\"\r\n                  [actions]=\"menu_actions\"\r\n                  (actionclicked)=\"handleMenuItemClicked($event)\"\r\n                  (itemClicked)=\"showCorrespondenceInViewer(item)\"\r\n                  [moreclasses]=\"'link-relation'\"\r\n                ></cts-item-list>\r\n              </div>\r\n            </mat-list>\r\n          </ng-template>\r\n        </mat-expansion-panel>\r\n      </mat-accordion>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n<div class=\"nocontent\" *ngIf=\"relateddoc.length === 0\">\r\n  <p>{{ \"correspondence-relation.nocontent\" | translate }}</p>\r\n</div>\r\n", styles: [".relations-list{border:1px solid #eee}.relations-list .mat-expansion-panel{box-shadow:none!important}.relations-list .mat-expansion-panel-header{border-bottom:1px solid #d9dce2;background-color:#f5f6f8;height:50px!important}.relations-list .mat-expansion-panel-header:hover{background-color:#f5f6f8!important}.relations-list .mat-expansion-panel-header:focus{background-color:#f5f6f8!important}.relations-list .mat-expansion-panel-header-title{font-weight:500}.relations-list .mat-accordion .mat-expansion-panel{border-radius:0!important}.relations-list .mat-expansion-panel-body{padding:0!important}.nocontent{color:gray;padding:10px;font-size:14px;border:1px solid #d9dce2}.nocontent p{margin:0;text-align:center}\n"], components: [{ type: i6__namespace$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6__namespace$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight"] }, { type: i2__namespace$4.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: ItemListComponent, selector: "cts-item-list", inputs: ["item", "iconname", "title", "actions", "isselected", "moreclasses"], outputs: ["itemClicked", "actionclicked"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i6__namespace$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i6__namespace$3.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  CorrespondenceRelationListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceRelationListComponent, selector: "cts-correspondence-relation-list", inputs: { correspondence_id: "correspondence_id", reload: "reload" }, ngImport: i0__namespace, template: "<div class=\"relations-list\" *ngIf=\"relateddoc.length > 0\">\r\n  <ng-container>\r\n    <div *ngFor=\"let group of relateddoc; first as isFirst\">\r\n      <mat-accordion class=\"example-headers-align\" multi>\r\n        <mat-expansion-panel [expanded]=\"isFirst\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{('vocabulary.VOC_CorrespondenceRelationsNames.' + group[0]) | translate }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <ng-template matExpansionPanelContent>\r\n            <mat-list>\r\n              <div class=\"mat-list-items\" *ngFor=\"let item of group[1]\">\r\n                <cts-item-list\r\n                  [item]=\"item\"\r\n                  [title]=\"item.title\"\r\n                  [iconname]=\"'link'\"\r\n                  [actions]=\"menu_actions\"\r\n                  (actionclicked)=\"handleMenuItemClicked($event)\"\r\n                  (itemClicked)=\"showCorrespondenceInViewer(item)\"\r\n                  [moreclasses]=\"'link-relation'\"\r\n                ></cts-item-list>\r\n              </div>\r\n            </mat-list>\r\n          </ng-template>\r\n        </mat-expansion-panel>\r\n      </mat-accordion>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n<div class=\"nocontent\" *ngIf=\"relateddoc.length === 0\">\r\n  <p>{{ \"correspondence-relation.nocontent\" | translate }}</p>\r\n</div>\r\n", styles: [".relations-list{border:1px solid #eee}.relations-list .mat-expansion-panel{box-shadow:none!important}.relations-list .mat-expansion-panel-header{border-bottom:1px solid #d9dce2;background-color:#f5f6f8;height:50px!important}.relations-list .mat-expansion-panel-header:hover{background-color:#f5f6f8!important}.relations-list .mat-expansion-panel-header:focus{background-color:#f5f6f8!important}.relations-list .mat-expansion-panel-header-title{font-weight:500}.relations-list .mat-accordion .mat-expansion-panel{border-radius:0!important}.relations-list .mat-expansion-panel-body{padding:0!important}.nocontent{color:gray;padding:10px;font-size:14px;border:1px solid #d9dce2}.nocontent p{margin:0;text-align:center}\n"], components: [{ type: i6__namespace$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6__namespace$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight"] }, { type: i2__namespace$4.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: ItemListComponent, selector: "cts-item-list", inputs: ["item", "iconname", "title", "actions", "isselected", "moreclasses"], outputs: ["itemClicked", "actionclicked"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i6__namespace$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i6__namespace$3.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CorrespondenceRelationListComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -22340,62 +22340,171 @@
                   args: ['fileInput']
               }] } });
 
-  var CreateModalComponent = /** @class */ (function () {
-      function CreateModalComponent(data, dialogRef, uploadMangmentService, dialogMangmentService, fileMangerService, tosterService, formBuilder, adapeter, fileManagerService, appConfService, dateHelperService, translationService, userService, nuxeoService, environment, dynamicFormService) {
-          var _this = this;
-          this.data = data;
-          this.dialogRef = dialogRef;
-          this.uploadMangmentService = uploadMangmentService;
-          this.dialogMangmentService = dialogMangmentService;
-          this.fileMangerService = fileMangerService;
-          this.tosterService = tosterService;
-          this.formBuilder = formBuilder;
-          this.adapeter = adapeter;
-          this.fileManagerService = fileManagerService;
-          this.appConfService = appConfService;
-          this.dateHelperService = dateHelperService;
-          this.translationService = translationService;
-          this.userService = userService;
-          this.nuxeoService = nuxeoService;
-          this.environment = environment;
-          this.dynamicFormService = dynamicFormService;
-          this.addingProperties = false;
-          this.payloadList = [];
-          this.createWhenFinishMode = false;
-          this.showRenderer = false; // used to force renderer to feel changes in forms and value when changing files
+  var CreateModalComponent = /** @class */ (function (_super) {
+      __extends(CreateModalComponent, _super);
+      function CreateModalComponent(data, uploadMangmentService, dialogMangmentService, fileMangerService, tosterService, formBuilder, adapeter, fileManagerService, appConfService, dateHelperService, userService, environment, injector, dynamicFormService) {
+          var _this = _super.call(this, injector) || this;
+          _this.data = data;
+          _this.uploadMangmentService = uploadMangmentService;
+          _this.dialogMangmentService = dialogMangmentService;
+          _this.fileMangerService = fileMangerService;
+          _this.tosterService = tosterService;
+          _this.formBuilder = formBuilder;
+          _this.adapeter = adapeter;
+          _this.fileManagerService = fileManagerService;
+          _this.appConfService = appConfService;
+          _this.dateHelperService = dateHelperService;
+          _this.userService = userService;
+          _this.environment = environment;
+          _this.dynamicFormService = dynamicFormService;
+          _this.addingProperties = false;
+          _this.payloadList = [];
+          _this.createWhenFinishMode = false;
+          _this.showRenderer = false; // used to force renderer to feel changes in forms and value when changing files
           // uploadFinishSubscription: Subscription;
-          this.usingExtraFields = false; // flage to switch between static form types
-          this.isArabic = false;
-          this.showStaticForm = false;
-          this.disableCreateWhenFinishBtn = true;
-          this.creating = false;
-          this.displayNoteMessage = true;
-          this.myEnvironment = this.environment;
-          this.createWhenFinishMode = false;
-          this.addingProperties = this.uploadMangmentService.addingPropertiesMode;
-          this.fileType = this.dialogMangmentService.fileType; // object that was constructed inside subtypes service
-          this.source = this.dialogMangmentService.addingFrom;
-          this.fileManagerService.getFileSchemas(this.fileType.type).subscribe(function (schemas) {
+          _this.usingExtraFields = false; // flage to switch between static form types
+          _this.showStaticForm = false;
+          _this.disableCreateWhenFinishBtn = true;
+          _this.creating = false;
+          _this.displayNoteMessage = true;
+          _this.createWhenFinish = function () {
+              _this.createWhenFinishMode = true;
+              return _this.minimizDialog();
+          };
+          _this.startAddingProperties = function () {
+              //if starting from filemnager then i have fixed file type for all attachmetn and single dynaimc form  type
+              if (_this.source === 'fileManger') {
+                  // this.dynamicFormService.getDynamicForm(this.fileType).subscribe(res => {
+                  _this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.forEach(function (file) {
+                      file['fileType'] = _this.source === 'fileManger' ? _this.fileType : {};
+                      file['dynamicForm'] = _this.dialogMangmentService.storedDynamicForm;
+                      file['dynamicData'] = {};
+                      file['staticFormValid'] = _this.usingExtraFields ? false : true;
+                      file['staticData'] = _this.setStaticData(file.title ? file.title : file.name);
+                      file['generalValidationValid'] = true;
+                  });
+                  _this.uploadMangmentService.uploadedFilesStatus.allfiles.forEach(function (file) {
+                      file['fileType'] = _this.source === 'fileManger' ? _this.fileType : {};
+                      file['dynamicForm'] = _this.dialogMangmentService.storedDynamicForm;
+                      file['dynamicData'] = {};
+                      file['staticFormValid'] = _this.usingExtraFields ? false : true;
+                      file['staticData'] = _this.setStaticData(file.title ? file.title : file.name);
+                      file['generalValidationValid'] = true;
+                  });
+              }
+              _this.addingProperties = true;
+              _this.uploadMangmentService.addingPropertiesMode = true;
+          };
+          _this.createDocument = function () {
+              var _a, _b;
+              _this.creating = true;
+              _this.uploadMangmentService.failedFiles = [];
+              _this.uploadMangmentService.GeneralFormValidation = _this.checkValidation();
+              if (_this.uploadMangmentService.GeneralFormValidation) {
+                  var apiCalls_1 = [];
+                  if (((_a = _this.data) === null || _a === void 0 ? void 0 : _a.path.includes('/default-domain/workspaces/DMSWorkspaces')) ||
+                      ((_b = _this.data) === null || _b === void 0 ? void 0 : _b.path.includes('/default-domain/UserWorkspaces/'))) {
+                      _this.constructPayLoadToWorkSpace(_this.uploadMangmentService.uploadedFilesStatus.uploadedFiles);
+                      _this.payloadList.forEach(function (payload) {
+                          apiCalls_1.push(_this.fileMangerService.createFile(payload, _this.fileManagerService.selectedFolderId, 'DMS.CreateDocumentFromBlob'));
+                      });
+                  }
+                  else {
+                      _this.constructPayLoad(_this.uploadMangmentService.uploadedFilesStatus.uploadedFiles);
+                      _this.payloadList.forEach(function (payload) {
+                          apiCalls_1.push(_this.fileMangerService.createFile(payload, _this.fileManagerService.selectedFolderId));
+                      });
+                  }
+                  return rxjs.forkJoin(apiCalls_1).pipe(operators.tap(function (response) {
+                      _this.creating = false;
+                      response.forEach(function (singleRes) {
+                          if (singleRes['status'] && singleRes['status'] === 'failed') {
+                              _this.uploadMangmentService.failedFiles.push(singleRes['originFile']);
+                          }
+                      });
+                      if (_this.uploadMangmentService.failedFiles.length > 0) {
+                          _this.tosterService.show('error', 'TOASTER.ERROR', 'TOASTER.UPLOAD_ERROR');
+                          _this.uploadMangmentService.uploadedFilesStatus.uploadedFiles = [];
+                          _this.selectedFile = null;
+                          _this.uploadMangmentService.uploadedFilesStatus.allfiles = __spreadArray([], __read(_this.uploadMangmentService.failedFiles));
+                      }
+                      else {
+                          _this.fileMangerService.onRefreshingFileManger.next();
+                          _this.tosterService.show('success', 'TOASTER.SUCCESS', 'TOASTER.FILE_CREATED_SUCCE');
+                          _super.prototype.close.call(_this, false);
+                          _this.uploadMangmentService.resetStatus();
+                      }
+                  }, function (error) {
+                      _this.creating = false;
+                  }));
+              }
+              else {
+                  _this.creating = false;
+                  return rxjs.of(null);
+              }
+          };
+          _this.tryAgainCreateDocument = function () {
+              _this.uploadMangmentService.uploadFilesMangment(_this.uploadMangmentService.failedFiles);
+              return rxjs.of(null);
+          };
+          _this.minimizDialog = function () {
+              _super.prototype.close.call(_this, true);
+              return rxjs.of(null);
+          };
+          _this.ApplyChangesToAll = function () {
+              _this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.forEach(function (file) {
+                  var title = file['staticData']
+                      ? file['staticData']['title']
+                      : file.name;
+                  file['fileType'] = _this.selectedFile.fileType;
+                  file['dynamicForm'] = _this.selectedFile.dynamicForm;
+                  file['dynamicData'] = _this.selectedFile.dynamicData;
+                  file['staticFormValid'] = _this.selectedFile.staticFormValid;
+                  file['staticData'] = Object.assign({}, _this.fileForm.value);
+                  file['staticData']['title'] = title;
+              });
+              _this.uploadMangmentService.uploadedFilesStatus.allfiles.forEach(function (file) {
+                  var title = file['staticData'] ? file['staticData']['title'] : file.name;
+                  file['fileType'] = _this.selectedFile.fileType;
+                  file['dynamicForm'] = _this.selectedFile.dynamicForm;
+                  file['dynamicData'] = _this.selectedFile.dynamicData;
+                  file['staticFormValid'] = _this.selectedFile.staticFormValid;
+                  file['staticData'] = Object.assign({}, _this.fileForm.value);
+                  file['staticData']['title'] = title;
+              });
+              return rxjs.of(null);
+          };
+          _this.myEnvironment = _this.environment;
+          _this.createWhenFinishMode = false;
+          _this.addingProperties = _this.uploadMangmentService.addingPropertiesMode;
+          _this.fileType = _this.dialogMangmentService.fileType; // object that was constructed inside subtypes service
+          _this.source = _this.dialogMangmentService.addingFrom;
+          _this.fileManagerService
+              .getFileSchemas(_this.fileType.type)
+              .subscribe(function (schemas) {
               schemas.map(function (item) {
-                  if (item.name === "generaldocument") {
+                  if (item.name === 'generaldocument') {
                       _this.usingExtraFields = true;
                   }
               });
               _this.initiatfileForm();
               _this.uploadMangmentService.gettingPropFromModal({
-                  'fileType': _this.source === 'fileManger' ? _this.fileType : {},
-                  'dynamicForm': _this.dialogMangmentService.storedDynamicForm,
-                  'dynamicData': {},
-                  'staticFormValid': _this.usingExtraFields ? false : true,
-                  'generalValidationValid': true,
-                  'usingExtraFields': _this.usingExtraFields,
-                  'path': _this.data.path
+                  fileType: _this.source === 'fileManger' ? _this.fileType : {},
+                  dynamicForm: _this.dialogMangmentService.storedDynamicForm,
+                  dynamicData: {},
+                  staticFormValid: _this.usingExtraFields ? false : true,
+                  generalValidationValid: true,
+                  usingExtraFields: _this.usingExtraFields,
+                  path: _this.data.path
               });
           });
+          return _this;
       }
       CreateModalComponent.prototype.KeyUpEvent = function (event) {
-          if (this.addingProperties && this.uploadMangmentService.failedFiles.length === 0) {
-              if (this.uploadMangmentService.uploadedFilesStatus.uploadInProgress && !this.disableCreateWhenFinishBtn) {
+          if (this.addingProperties &&
+              this.uploadMangmentService.failedFiles.length === 0) {
+              if (this.uploadMangmentService.uploadedFilesStatus.uploadInProgress &&
+                  !this.disableCreateWhenFinishBtn) {
                   this.createWhenFinish();
               }
               else {
@@ -22405,17 +22514,16 @@
       };
       CreateModalComponent.prototype.ngOnInit = function () {
           var _this = this;
-          this.langSubscription = this.translationService.isArabic.subscribe(function (res) {
-              _this.isArabic = res;
-          });
           if (this.uploadMangmentService.uploadFinishSubscription) {
               this.uploadMangmentService.uploadFinishSubscription.unsubscribe();
           }
-          this.uploadMangmentService.uploadFinishSubscription = this.uploadMangmentService.onUploadFinish.subscribe(function (res) {
-              if (_this.createWhenFinishMode || _this.uploadMangmentService.failedFiles.length > 0) {
-                  _this.createDocument();
-              }
-          });
+          this.uploadMangmentService.uploadFinishSubscription =
+              this.uploadMangmentService.onUploadFinish.subscribe(function (res) {
+                  if (_this.createWhenFinishMode ||
+                      _this.uploadMangmentService.failedFiles.length > 0) {
+                      _this.createDocument();
+                  }
+              });
       };
       CreateModalComponent.prototype.initiatfileForm = function () {
           if (this.usingExtraFields) {
@@ -22441,44 +22549,16 @@
                   description: ['']
               });
           }
-          this.staticFormFields = this.appConfService.myConfiguration.staticFormFields;
+          this.staticFormFields =
+              this.appConfService.myConfiguration.staticFormFields;
       };
-      CreateModalComponent.prototype.createWhenFinish = function () {
-          this.createWhenFinishMode = true;
-          this.minimizDialog();
-      };
-      CreateModalComponent.prototype.closeDialog = function () {
+      CreateModalComponent.prototype.close = function () {
           this.uploadMangmentService.GeneralFormValidation = true;
           this.fileFormSubscription ? this.fileFormSubscription.unsubscribe() : '';
           this.addingProperties = false;
           this.uploadMangmentService.resetStatus();
-          this.dialogRef.close(false);
-      };
-      CreateModalComponent.prototype.startAddingProperties = function () {
-          var _this = this;
-          //if starting from filemnager then i have fixed file type for all attachmetn and single dynaimc form  type
-          if (this.source === 'fileManger') {
-              // this.dynamicFormService.getDynamicForm(this.fileType).subscribe(res => {
-              this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.map(function (file) {
-                  file['fileType'] = _this.source === 'fileManger' ? _this.fileType : {};
-                  file['dynamicForm'] = _this.dialogMangmentService.storedDynamicForm;
-                  file['dynamicData'] = {};
-                  file['staticFormValid'] = _this.usingExtraFields ? false : true;
-                  file['staticData'] = _this.setStaticData(file.title ? file.title : file.name);
-                  file['generalValidationValid'] = true;
-              });
-              this.uploadMangmentService.uploadedFilesStatus.allfiles.map(function (file) {
-                  file['fileType'] = _this.source === 'fileManger' ? _this.fileType : {};
-                  file['dynamicForm'] = _this.dialogMangmentService.storedDynamicForm;
-                  file['dynamicData'] = {};
-                  file['staticFormValid'] = _this.usingExtraFields ? false : true;
-                  file['staticData'] = _this.setStaticData(file.title ? file.title : file.name);
-                  file['generalValidationValid'] = true;
-              });
-              // })
-          }
-          this.addingProperties = true;
-          this.uploadMangmentService.addingPropertiesMode = true;
+          _super.prototype.close.call(this);
+          return rxjs.of(null);
       };
       CreateModalComponent.prototype.setStaticData = function (title) {
           if (this.usingExtraFields) {
@@ -22505,73 +22585,19 @@
               };
           }
       };
-      CreateModalComponent.prototype.createDocument = function () {
-          var _this = this;
-          var _a, _b;
-          this.creating = true;
-          this.uploadMangmentService.failedFiles = [];
-          this.uploadMangmentService.GeneralFormValidation = this.checkValidation();
-          if (this.uploadMangmentService.GeneralFormValidation) {
-              var apiCalls_1 = [];
-              if (((_a = this.data) === null || _a === void 0 ? void 0 : _a.path.includes('/default-domain/workspaces/DMSWorkspaces')) || ((_b = this.data) === null || _b === void 0 ? void 0 : _b.path.includes('/default-domain/UserWorkspaces/'))) {
-                  this.constructPayLoadToWorkSpace(this.uploadMangmentService.uploadedFilesStatus.uploadedFiles);
-                  this.payloadList.map(function (payload) {
-                      apiCalls_1.push(_this.fileMangerService.createFile(payload, _this.fileManagerService.selectedFolderId, 'DMS.CreateDocumentFromBlob'));
-                  });
-              }
-              else {
-                  this.constructPayLoad(this.uploadMangmentService.uploadedFilesStatus.uploadedFiles);
-                  this.payloadList.map(function (payload) {
-                      apiCalls_1.push(_this.fileMangerService.createFile(payload, _this.fileManagerService.selectedFolderId));
-                  });
-              }
-              rxjs.forkJoin(apiCalls_1).subscribe(function (response) {
-                  //console.log(res);
-                  _this.creating = false;
-                  response.map(function (singleRes) {
-                      if (singleRes['status'] && singleRes['status'] === 'failed') {
-                          _this.uploadMangmentService.failedFiles.push(singleRes['originFile']);
-                      }
-                  });
-                  if (_this.uploadMangmentService.failedFiles.length > 0) {
-                      _this.tosterService.show('error', 'TOASTER.ERROR', 'TOASTER.UPLOAD_ERROR');
-                      _this.uploadMangmentService.uploadedFilesStatus.uploadedFiles = [];
-                      _this.selectedFile = null;
-                      _this.uploadMangmentService.uploadedFilesStatus.allfiles = __spreadArray([], __read(_this.uploadMangmentService.failedFiles));
-                  }
-                  else {
-                      _this.fileMangerService.onRefreshingFileManger.next();
-                      _this.tosterService.show('success', 'TOASTER.SUCCESS', "TOASTER.FILE_CREATED_SUCCE");
-                      _this.dialogRef.close(false);
-                      _this.uploadMangmentService.resetStatus();
-                  }
-              }, function (error) {
-                  _this.creating = false;
-                  // console.log(error);
-                  // this.tosterService.show('error' , 'TOASTER.ERROR' , 'TOASTER.UPLOAD_ERROR');
-                  // this.closeDialog();
-              });
-          }
-          else {
-              this.creating = false;
-          }
-      };
       CreateModalComponent.prototype.constructPayLoadToWorkSpace = function (files) {
           var _this = this;
           this.payloadList = [];
           files.map(function (file) {
               var param = {
-                  "fileindex": 0,
-                  "fileName": file.staticData.title,
-                  "batchid": file.batch.blob['upload-batch'],
-                  "description": _this.fileForm.controls.description.value
+                  fileindex: 0,
+                  fileName: file.staticData.title,
+                  batchid: file.batch.blob['upload-batch'],
+                  description: _this.fileForm.controls.description.value
               };
               _this.payloadList.push({ params: param, originFile: file });
           });
       };
-      CreateModalComponent.prototype.tryAgainCreateDocument = function () {
-          this.uploadMangmentService.uploadFilesMangment(this.uploadMangmentService.failedFiles);
-      };
       CreateModalComponent.prototype.constructPayLoad = function (files) {
           var _this = this;
           this.payloadList = [];
@@ -22579,18 +22605,18 @@
               var props = _this.dynamicFormService.constructDynamicFormPayload(file.dynamicData.data ? file.dynamicData.data : {}, file.dynamicForm);
               var staticFormData = _this.mappingStaticData(file.staticData);
               var param = {
-                  "document": {
-                      "type": file.fileType.type,
-                      "name": file.staticData.title,
-                      "properties": Object.assign(Object.assign(Object.assign({}, props), staticFormData), { "file:content": {
-                              "upload-batch": file.batch.blob['upload-batch'],
-                              "upload-fileId": file.batch.blob['upload-fileId'],
-                              "mime-type": file.type
+                  document: {
+                      type: file.fileType.type,
+                      name: file.staticData.title,
+                      properties: Object.assign(Object.assign(Object.assign({}, props), staticFormData), { 'file:content': {
+                              'upload-batch': file.batch.blob['upload-batch'],
+                              'upload-fileId': file.batch.blob['upload-fileId'],
+                              'mime-type': file.type
                           } })
                   }
               };
               if (file.fileType.documentCode) {
-                  param["documentTypeCode"] = file.fileType.documentCode;
+                  param['documentTypeCode'] = file.fileType.documentCode;
               }
               _this.payloadList.push({ params: param, originFile: file });
           });
@@ -22599,13 +22625,14 @@
           if (data.gdocumentDate && data.gdocumentDate !== null) {
               moment__namespace.locale('en');
               data['hdocumentDate'] = this.dateHelperService.gregorianToHijri(data.gdocumentDate, 'iYYYY-iMM-iDD');
-              data.gdocumentDate = (moment__namespace(data.gdocumentDate).format("YYYY-MM-DDT00:00:00.000") + "Z");
+              data.gdocumentDate =
+                  moment__namespace(data.gdocumentDate).format('YYYY-MM-DDT00:00:00.000') + 'Z';
           }
           return this.adapeter.adaptOut(data, this.staticFormFields);
       };
       CreateModalComponent.prototype.selectFile = function (file) {
           var _this = this;
-          console.log("file in select", file);
+          console.log('file in select', file);
           this.showStaticForm = false;
           this.agencyNameFilter = undefined;
           this.countryNameFilter = undefined;
@@ -22617,8 +22644,13 @@
               this.showRenderer = false;
               // check if file has properties of adding properties or not then add it to him
               if (!file.hasOwnProperty('fileType')) {
-                  this.dynamicFormService.getDynamicForm(this.fileType.documentCode ? this.fileType.documentCode : this.fileType.type).subscribe(function (res) {
-                      file['fileType'] = _this.source === 'fileManger' ? _this.fileType : {};
+                  this.dynamicFormService
+                      .getDynamicForm(this.fileType.documentCode
+                      ? this.fileType.documentCode
+                      : this.fileType.type)
+                      .subscribe(function (res) {
+                      file['fileType'] =
+                          _this.source === 'fileManger' ? _this.fileType : {};
                       file['dynamicForm'] = res;
                       file['dynamicData'] = {};
                       file['staticFormValid'] = _this.usingExtraFields ? false : true;
@@ -22630,7 +22662,8 @@
                       }
                       _this.fileForm.patchValue(_this.selectedFile['staticData']);
                       _this.temporaryDyanmicData = {};
-                      _this.temporaryDyanmicData = _this.selectedFile.dynamicData.data ? Object.assign({}, _this.selectedFile.dynamicData.data) : {};
+                      _this.temporaryDyanmicData = _this.selectedFile.dynamicData.data
+                          ? Object.assign({}, _this.selectedFile.dynamicData.data) : {};
                       setTimeout(function () {
                           _this.showRenderer = true;
                           _this.showStaticForm = true;
@@ -22638,12 +22671,19 @@
                       //console.log(file);
                       if (!_this.fileFormSubscription) {
                           setTimeout(function () {
-                              _this.fileFormSubscription = _this.fileForm.valueChanges.subscribe(function (res) {
-                                  _this.selectedFile.staticFormValid = _this.fileForm ? _this.fileForm.valid : false;
-                                  _this.selectedFile.staticData = _this.fileForm ? _this.fileForm.value : {};
-                              });
+                              _this.fileFormSubscription =
+                                  _this.fileForm.valueChanges.subscribe(function (res) {
+                                      _this.selectedFile.staticFormValid = _this.fileForm
+                                          ? _this.fileForm.valid
+                                          : false;
+                                      _this.selectedFile.staticData = _this.fileForm
+                                          ? _this.fileForm.value
+                                          : {};
+                                  });
                               if (_this.fileForm.get('agencyCategoryCode')) {
-                                  _this.agencyCategCodeSubscription = _this.fileForm.get('agencyCategoryCode').valueChanges.subscribe(function (res) {
+                                  _this.agencyCategCodeSubscription = _this.fileForm
+                                      .get('agencyCategoryCode')
+                                      .valueChanges.subscribe(function (res) {
                                       _this.fileForm.get('agencyName').setValue(null);
                                       _this.agencyNameFilter = {
                                           category: res
@@ -22651,7 +22691,9 @@
                                   });
                               }
                               if (_this.fileForm.get('countryCategoryCode')) {
-                                  _this.countryCategCodeSubscription = _this.fileForm.get('countryCategoryCode').valueChanges.subscribe(function (res) {
+                                  _this.countryCategCodeSubscription = _this.fileForm
+                                      .get('countryCategoryCode')
+                                      .valueChanges.subscribe(function (res) {
                                       _this.fileForm.get('countryName').setValue(null);
                                       _this.countryNameFilter = {
                                           category: res
@@ -22679,7 +22721,9 @@
                       };
                   }
                   this.temporaryDyanmicData = {};
-                  this.temporaryDyanmicData = this.selectedFile.dynamicData.data ? this.selectedFile.dynamicData.data : {};
+                  this.temporaryDyanmicData = this.selectedFile.dynamicData.data
+                      ? this.selectedFile.dynamicData.data
+                      : {};
                   setTimeout(function () {
                       _this.showRenderer = true;
                       _this.showStaticForm = true;
@@ -22687,11 +22731,17 @@
                   if (!this.fileFormSubscription) {
                       setTimeout(function () {
                           _this.fileFormSubscription = _this.fileForm.valueChanges.subscribe(function (res) {
-                              _this.selectedFile.staticFormValid = _this.fileForm ? _this.fileForm.valid : false;
-                              _this.selectedFile.staticData = _this.fileForm ? _this.fileForm.value : {};
+                              _this.selectedFile.staticFormValid = _this.fileForm
+                                  ? _this.fileForm.valid
+                                  : false;
+                              _this.selectedFile.staticData = _this.fileForm
+                                  ? _this.fileForm.value
+                                  : {};
                           });
                           if (_this.fileForm.get('agencyCategoryCode')) {
-                              _this.agencyCategCodeSubscription = _this.fileForm.get('agencyCategoryCode').valueChanges.subscribe(function (res) {
+                              _this.agencyCategCodeSubscription = _this.fileForm
+                                  .get('agencyCategoryCode')
+                                  .valueChanges.subscribe(function (res) {
                                   _this.fileForm.get('agencyName').setValue(null);
                                   _this.agencyNameFilter = {
                                       category: res
@@ -22699,7 +22749,9 @@
                               });
                           }
                           if (_this.fileForm.get('countryCategoryCode')) {
-                              _this.countryCategCodeSubscription = _this.fileForm.get('countryCategoryCode').valueChanges.subscribe(function (res) {
+                              _this.countryCategCodeSubscription = _this.fileForm
+                                  .get('countryCategoryCode')
+                                  .valueChanges.subscribe(function (res) {
                                   _this.fileForm.get('countryName').setValue(null);
                                   _this.countryNameFilter = {
                                       category: res
@@ -22721,9 +22773,6 @@
               this.selectedFile.dynamicData = Object.assign({}, dynamicData);
           }
       };
-      CreateModalComponent.prototype.minimizDialog = function () {
-          this.dialogRef.close(true);
-      };
       CreateModalComponent.prototype.removeItem = function (item, listofFiles) {
           var removeIndex = listofFiles.findIndex(function (file) { return file.name === item.name; });
           listofFiles.splice(removeIndex, 1);
@@ -22737,33 +22786,14 @@
               // this.selectedFile = null;
           }
       };
-      CreateModalComponent.prototype.ApplyChangesToAll = function () {
-          var _this = this;
-          this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.map(function (file) {
-              var title = file['staticData'] ? file['staticData']['title'] : file.name;
-              file['fileType'] = _this.selectedFile.fileType;
-              file['dynamicForm'] = _this.selectedFile.dynamicForm;
-              file['dynamicData'] = _this.selectedFile.dynamicData;
-              file['staticFormValid'] = _this.selectedFile.staticFormValid;
-              file['staticData'] = Object.assign({}, _this.fileForm.value);
-              file['staticData']['title'] = title;
-          });
-          this.uploadMangmentService.uploadedFilesStatus.allfiles.map(function (file) {
-              var title = file['staticData'] ? file['staticData']['title'] : file.name;
-              file['fileType'] = _this.selectedFile.fileType;
-              file['dynamicForm'] = _this.selectedFile.dynamicForm;
-              file['dynamicData'] = _this.selectedFile.dynamicData;
-              file['staticFormValid'] = _this.selectedFile.staticFormValid;
-              file['staticData'] = Object.assign({}, _this.fileForm.value);
-              file['staticData']['title'] = title;
-          });
-      };
       CreateModalComponent.prototype.checkValidation = function () {
           var validation = true;
-          this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.map(function (file) {
+          this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.forEach(function (file) {
               var _a, _b;
-              console.log("file", file);
-              if (!file.hasOwnProperty('fileType') || file['staticFormValid'] === false || ((_b = (_a = file.dynamicData) === null || _a === void 0 ? void 0 : _a.originalEvent) === null || _b === void 0 ? void 0 : _b.isValid) === false) {
+              console.log('file', file);
+              if (!file.hasOwnProperty('fileType') ||
+                  file['staticFormValid'] === false ||
+                  ((_b = (_a = file.dynamicData) === null || _a === void 0 ? void 0 : _a.originalEvent) === null || _b === void 0 ? void 0 : _b.isValid) === false) {
                   file['generalValidationValid'] = false;
                   validation = false;
               }
@@ -22773,7 +22803,8 @@
           });
           this.uploadMangmentService.uploadedFilesStatus.allfiles.map(function (file) {
               var _a, _b;
-              if (file['staticFormValid'] === false || ((_b = (_a = file.dynamicData) === null || _a === void 0 ? void 0 : _a.originalEvent) === null || _b === void 0 ? void 0 : _b.isValid) === false) {
+              if (file['staticFormValid'] === false ||
+                  ((_b = (_a = file.dynamicData) === null || _a === void 0 ? void 0 : _a.originalEvent) === null || _b === void 0 ? void 0 : _b.isValid) === false) {
                   file['generalValidationValid'] = false;
                   validation = false;
               }
@@ -22785,14 +22816,17 @@
       };
       CreateModalComponent.prototype.ngOnDestroy = function () {
           this.fileFormSubscription ? this.fileFormSubscription.unsubscribe() : '';
-          this.langSubscription ? this.langSubscription.unsubscribe() : '';
-          this.countryCategCodeSubscription ? this.countryCategCodeSubscription.unsubscribe() : '';
-          this.agencyCategCodeSubscription ? this.agencyCategCodeSubscription.unsubscribe() : '';
+          this.countryCategCodeSubscription
+              ? this.countryCategCodeSubscription.unsubscribe()
+              : '';
+          this.agencyCategCodeSubscription
+              ? this.agencyCategCodeSubscription.unsubscribe()
+              : '';
       };
       return CreateModalComponent;
-  }());
-  CreateModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreateModalComponent, deps: [{ token: i1$4.MAT_DIALOG_DATA }, { token: i1__namespace$3.MatDialogRef }, { token: UploadManagmentService }, { token: DialogMangmentService }, { token: FileManagerService }, { token: CustomToastrService }, { token: i6__namespace.FormBuilder }, { token: AdapterService }, { token: FileManagerService }, { token: AppConfigService }, { token: DateHelperService }, { token: TranslationService }, { token: UserService }, { token: NuxeoService }, { token: 'environment' }, { token: DynamicFormService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CreateModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreateModalComponent, selector: "app-create-modal", host: { listeners: { "document:keyup.enter": "KeyUpEvent($event)" } }, ngImport: i0__namespace, template: "<div class=\"relative w-full h-full\">\r\n    <div class=\"iner-wrapper\" [ngClass]=\"{ 'd-flex': addingProperties }\">\r\n        <div *ngIf=\"addingProperties\" class=\"properties-section p-3 overflow-x-hidden overflow-y-auto\">\r\n            <div class=\"\" *ngIf=\"selectedFile && source === 'fileManger' && showStaticForm\">\r\n                <div class=\"mb-5\">\r\n                    <div class=\"label-style\">\r\n                        {{ \"CREATE.FILE_TYPE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-base text-gray-900\">{{ isArabic ? fileType.arabicText : fileType.englishText }}\r\n                    </div>\r\n                </div>\r\n                <div class=\"file-fields mt-3\" SetRtl>\r\n                    <form [formGroup]=\"fileForm\">\r\n                        <!-- -----------------old static form ---------------------- -->\r\n                        <div>\r\n                            <div class=\"single-field mb-3\">\r\n                                <div class=\"label-style\">\r\n                                    {{ \"CREATE.TITLE\" | translate\r\n                                    }}<span class=\"text-red-500\">*</span>\r\n                                </div>\r\n                                <input class=\"\r\n                                 field-style\r\n                                     \" formControlName=\"title\" placeholder=\" {{ 'CREATE.TITLE' | translate}}\" />\r\n                            </div>\r\n                            <div class=\"single-field mb-3\">\r\n                                <div class=\"label-style\">\r\n                                    {{ \"CREATE.DESCRIPTION\" | translate }}\r\n                                </div>\r\n                                <input class=\"field-style\" formControlName=\"description\"\r\n                                    placeholder=\" {{ 'CREATE.DESCRIPTION' | translate}}\" />\r\n                            </div>\r\n                        </div>\r\n                        <!-- ---------------------------------- -->\r\n\r\n                        <!------------------ new statis form  ---------------------------->\r\n                        <div *ngIf=\"usingExtraFields\">\r\n                            <app-dynamic-fields-renderer [form]=\"fileForm\" [agencyNameFilter]=\"agencyNameFilter\"\r\n                                [countryNameFilter]=\"countryNameFilter\"></app-dynamic-fields-renderer>\r\n                        </div>\r\n                    </form>\r\n\r\n                    <div class=\"dynamic-part\" *ngIf=\"showRenderer\">\r\n                        <app-dynamic-form [form]=\"selectedFile.dynamicForm\" [data]=\"temporaryDyanmicData\"\r\n                            (change)=\"ondynamicFormChange($event)\"></app-dynamic-form>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"\r\n                    w-full\r\n                    h-full\r\n                    p-3\r\n                    flex\r\n                    justify-center\r\n                    items-center\r\n                    text-lg text-gray-900\"\r\n                    *ngIf=\"!selectedFile\">\r\n                {{ \"CREATE.SELECT_TOSTART_ADDING\" | translate }}\r\n            </div>\r\n            \r\n        </div>\r\n        <div class=\"attachment-tab-body overflow-hidden\" [ngClass]=\"{ 'attachment-iner-small-body': addingProperties }\">\r\n            <app-attachments [multiple]=\"true\" (onSelectingItem)=\"selectFile($event)\"></app-attachments>\r\n        </div>\r\n    </div>\r\n    <div class=\"w-full text-red-500 text-base text-start px-3\" *ngIf=\"!uploadMangmentService.GeneralFormValidation\">\r\n\r\n        {{ \"CREATE.FILL_REQUIRED_FIELD\" | translate }}\r\n    </div>\r\n    <div class=\"actions-iner-wrapper w-full flex justify-between items-center absolute bottom-0\">\r\n        <div class=\"flex\">\r\n            <button *ngIf=\"\r\n                    (uploadMangmentService.uploadedFilesStatus\r\n                        .uploadInProgress ||\r\n                        uploadMangmentService.uploadedFilesStatus.uploadedFiles\r\n                            .length > 0) &&\r\n                    !addingProperties\r\n                \" (click)=\"startAddingProperties()\" class=\"submission-button\">\r\n                {{ \"BUTTONS.ADD_PROPERTIES\" | translate }}\r\n            </button>\r\n            <button *ngIf=\"\r\n                    addingProperties &&\r\n                    uploadMangmentService.uploadedFilesStatus.uploadedFiles\r\n                        .length +\r\n                        uploadMangmentService.uploadedFilesStatus.allfiles\r\n                            .length >\r\n                        1\r\n                \" (click)=\"ApplyChangesToAll()\" [disabled]=\"!selectedFile || !selectedFile.staticFormValid\" [ngClass]=\"{\r\n                    'opacity-30 cursor-not-allowed':\r\n                        !selectedFile || !selectedFile.staticFormValid,\r\n                    'cursor-pointer hover:text-white hover:bg-gray-900': !(\r\n                        !selectedFile || !selectedFile.staticFormValid\r\n                    )\r\n                }\" class=\"submission-button mx-2\">\r\n                {{ \"BUTTONS.APPLY_TO_ALL\" | translate }}\r\n            </button>\r\n\r\n            <ng-container *ngIf=\"\r\n            addingProperties &&\r\n            !uploadMangmentService.uploadedFilesStatus.uploadInProgress &&\r\n            uploadMangmentService.failedFiles.length === 0\r\n        \">\r\n                <button (click)=\"createDocument()\" class=\"submission-button relative\" [disabled]=\"creating\">\r\n                    <span *ngIf=\"!creating; else loader\">{{ \"BUTTONS.CREATE\" | translate }}</span>\r\n                </button>\r\n                <ng-template #loader>\r\n                    <mat-spinner [value]=\"90\" [strokeWidth]=\"3\" overlay=\"true\" [diameter]=\"25\" color=\"warn\">\r\n                    </mat-spinner>\r\n                </ng-template>\r\n            </ng-container>\r\n\r\n            <button *ngIf=\"\r\n            addingProperties &&\r\n            !uploadMangmentService.uploadedFilesStatus.uploadInProgress &&\r\n            uploadMangmentService.failedFiles.length > 0\r\n        \" (click)=\"tryAgainCreateDocument()\" class=\"submission-button\">\r\n                {{ \"BUTTONS.TRY_AGAIN\" | translate }}\r\n            </button>\r\n\r\n            <button [disabled]=\"!fileForm?.valid || disableCreateWhenFinishBtn\" *ngIf=\"\r\n                    addingProperties &&\r\n                    uploadMangmentService.uploadedFilesStatus.uploadInProgress\r\n                \" (click)=\"createWhenFinish()\" class=\"submission-button w-44\">\r\n                {{ \"BUTTONS.CREATE_WHEN_FINSH\" | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"flex\">\r\n            <button class=\"cancelation-button mx-2\" (click)=\"minimizDialog()\" *ngIf=\"\r\n                    uploadMangmentService.uploadedFilesStatus\r\n                        .uploadInProgress ||\r\n                    uploadMangmentService.uploadedFilesStatus\r\n                        .numberOfUploadedFiles !== 0 ||\r\n                    addingProperties\r\n                \">\r\n                {{ \"BUTTONS.MINIMIZED\" | translate }}\r\n            </button>\r\n            <button class=\"cancelation-button\" (click)=\"closeDialog()\">\r\n                {{ \"BUTTONS.CANCEL\" | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".dynamic-part{margin-left:-15px;margin-right:-15px}.iner-wrapper{height:calc(100% - 70px)}.iner-wrapper .properties-section{width:calc(100% - 270px);height:calc(100% - 15px)}.iner-wrapper .attachment-tab-body{height:calc(100% - -20px);overflow-y:auto;overflow-x:hidden}.iner-wrapper .attachment-iner-small-body{width:350px}.rtl .actions-iner-wrapper{direction:ltr}.actions-iner-wrapper{direction:rtl}\n"], components: [{ type: DynamicFieldsRendererComponent, selector: "app-dynamic-fields-renderer", inputs: ["form", "agencyNameFilter", "countryNameFilter", "mode", "fields"] }, { type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["form", "data", "readOnly"], outputs: ["change"] }, { type: AttachmentsComponent, selector: "app-attachments", inputs: ["allowedTypes", "params", "path", "maxSize", "docParams", "multiple", "createDocument", "allowedMaxNumberOfFiles", "source"], outputs: ["uploadSuccess", "uploadError", "onSelectingItem", "itemRemoved"] }, { type: i8__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i6__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  }(BaseDialogComponent));
+  CreateModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreateModalComponent, deps: [{ token: i1$4.MAT_DIALOG_DATA }, { token: UploadManagmentService }, { token: DialogMangmentService }, { token: FileManagerService }, { token: CustomToastrService }, { token: i6__namespace.FormBuilder }, { token: AdapterService }, { token: FileManagerService }, { token: AppConfigService }, { token: DateHelperService }, { token: UserService }, { token: 'environment' }, { token: i0__namespace.Injector }, { token: DynamicFormService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  CreateModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreateModalComponent, selector: "app-create-modal", host: { listeners: { "document:keyup.enter": "KeyUpEvent($event)" } }, usesInheritance: true, ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ 'CREATE.createFile' | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<div class=\"relative w-full h-full\">\r\n\t\t\t<div class=\"iner-wrapper\" [ngClass]=\"{ 'd-flex': addingProperties }\">\r\n\t\t\t\t<div\r\n\t\t\t\t\t*ngIf=\"addingProperties\"\r\n\t\t\t\t\tclass=\"properties-section p-3 overflow-x-hidden overflow-y-auto\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"\"\r\n\t\t\t\t\t\t*ngIf=\"selectedFile && source === 'fileManger' && showStaticForm\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<div class=\"mb-5\">\r\n\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t{{ 'CREATE.FILE_TYPE' | translate }}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"text-base text-gray-900\">\r\n\t\t\t\t\t\t\t\t{{ isArabic ? fileType.arabicText : fileType.englishText }}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"file-fields mt-3\" SetRtl>\r\n\t\t\t\t\t\t\t<form [formGroup]=\"fileForm\">\r\n\t\t\t\t\t\t\t\t<!-- -----------------old static form ---------------------- -->\r\n\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"single-field mb-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t\t\t\t{{ 'CREATE.TITLE' | translate\r\n\t\t\t\t\t\t\t\t\t\t\t}}<span class=\"text-red-500\">*</span>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"title\"\r\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\" {{ 'CREATE.TITLE' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"single-field mb-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t\t\t\t{{ 'CREATE.DESCRIPTION' | translate }}\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"description\"\r\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\" {{ 'CREATE.DESCRIPTION' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<!-- ---------------------------------- -->\r\n\r\n\t\t\t\t\t\t\t\t<!------------------ new statis form  ---------------------------->\r\n\t\t\t\t\t\t\t\t<div *ngIf=\"usingExtraFields\">\r\n\t\t\t\t\t\t\t\t\t<app-dynamic-fields-renderer\r\n\t\t\t\t\t\t\t\t\t\t[form]=\"fileForm\"\r\n\t\t\t\t\t\t\t\t\t\t[agencyNameFilter]=\"agencyNameFilter\"\r\n\t\t\t\t\t\t\t\t\t\t[countryNameFilter]=\"countryNameFilter\"\r\n\t\t\t\t\t\t\t\t\t></app-dynamic-fields-renderer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</form>\r\n\r\n\t\t\t\t\t\t\t<div class=\"dynamic-part\" *ngIf=\"showRenderer\">\r\n\t\t\t\t\t\t\t\t<app-dynamic-form\r\n\t\t\t\t\t\t\t\t\t[form]=\"selectedFile.dynamicForm\"\r\n\t\t\t\t\t\t\t\t\t[data]=\"temporaryDyanmicData\"\r\n\t\t\t\t\t\t\t\t\t(change)=\"ondynamicFormChange($event)\"\r\n\t\t\t\t\t\t\t\t></app-dynamic-form>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"w-full h-full p-3 flex justify-center items-center text-lg text-gray-900\"\r\n\t\t\t\t\t\t*ngIf=\"!selectedFile\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'CREATE.SELECT_TOSTART_ADDING' | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"attachment-tab-body overflow-hidden\"\r\n\t\t\t\t\t[ngClass]=\"{ 'attachment-iner-small-body': addingProperties }\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<app-attachments\r\n\t\t\t\t\t\t[multiple]=\"true\"\r\n\t\t\t\t\t\t(onSelectingItem)=\"selectFile($event)\"\r\n\t\t\t\t\t></app-attachments>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"w-full text-red-500 text-base text-start px-3\"\r\n\t\t\t\t*ngIf=\"!uploadMangmentService.GeneralFormValidation\"\r\n\t\t\t>\r\n\t\t\t\t{{ 'CREATE.FILL_REQUIRED_FIELD' | translate }}\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\t(uploadMangmentService.uploadedFilesStatus.uploadInProgress ||\r\n\t\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadedFiles.length > 0) &&\r\n\t\t\t\t!addingProperties\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(startAddingProperties)\"\r\n\t\t\tclass=\"submission-button\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.ADD_PROPERTIES' | translate }}\r\n\t\t</button>\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadedFiles.length +\r\n\t\t\t\t\tuploadMangmentService.uploadedFilesStatus.allfiles.length >\r\n\t\t\t\t\t1\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(ApplyChangesToAll)\"\r\n\t\t\t[disabled]=\"!selectedFile || !selectedFile.staticFormValid\"\r\n\t\t\t[ngClass]=\"{\r\n\t\t\t\t'opacity-30 cursor-not-allowed':\r\n\t\t\t\t\t!selectedFile || !selectedFile.staticFormValid,\r\n\t\t\t\t'cursor-pointer hover:text-white hover:bg-gray-900': !(\r\n\t\t\t\t\t!selectedFile || !selectedFile.staticFormValid\r\n\t\t\t\t)\r\n\t\t\t}\"\r\n\t\t\tclass=\"submission-button mx-2\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.APPLY_TO_ALL' | translate }}\r\n\t\t</button>\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\t!uploadMangmentService.uploadedFilesStatus.uploadInProgress &&\r\n\t\t\t\tuploadMangmentService.failedFiles.length === 0\r\n\t\t\t\"\r\n\t\t>\r\n\t\t\t<button\r\n\t\t\t\t(click)=\"dialog.executeAction(createDocument)\"\r\n\t\t\t\tclass=\"submission-button relative\"\r\n\t\t\t\t[disabled]=\"creating\"\r\n\t\t\t>\r\n\t\t\t\t<span *ngIf=\"!creating; else loader\">{{\r\n\t\t\t\t\t'BUTTONS.CREATE' | translate\r\n\t\t\t\t}}</span>\r\n\t\t\t</button>\r\n\t\t\t<ng-template #loader>\r\n\t\t\t\t<mat-spinner\r\n\t\t\t\t\t[value]=\"90\"\r\n\t\t\t\t\t[strokeWidth]=\"3\"\r\n\t\t\t\t\toverlay=\"true\"\r\n\t\t\t\t\t[diameter]=\"25\"\r\n\t\t\t\t\tcolor=\"warn\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-spinner>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\t!uploadMangmentService.uploadedFilesStatus.uploadInProgress &&\r\n\t\t\t\tuploadMangmentService.failedFiles.length > 0\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(tryAgainCreateDocument)\"\r\n\t\t\tclass=\"submission-button\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.TRY_AGAIN' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<button\r\n\t\t\t[disabled]=\"!fileForm?.valid || disableCreateWhenFinishBtn\"\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadInProgress\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(createWhenFinish)\"\r\n\t\t\tclass=\"submission-button w-44\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.CREATE_WHEN_FINSH' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\t\t<button\r\n\t\t\tclass=\"cancelation-button mx-2\"\r\n\t\t\t(click)=\"dialog.executeAction(minimizDialog)\"\r\n\t\t\t*ngIf=\"\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadInProgress ||\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.numberOfUploadedFiles !== 0 ||\r\n\t\t\t\taddingProperties\r\n\t\t\t\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.MINIMIZED' | translate }}\r\n\t\t</button>\r\n\t\t<!-- <button class=\"cancelation-button\" (click)=\" dialog.executeAction(closeDialog)\">\r\n{{ 'BUTTONS.CANCEL' | translate }}\r\n</button> -->\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [".dynamic-part{margin-left:-15px;margin-right:-15px}.iner-wrapper{height:calc(100% - 70px)}.iner-wrapper .properties-section{width:calc(100% - 270px);height:calc(100% - 15px)}.iner-wrapper .attachment-tab-body{height:calc(100% - -20px);overflow-y:auto;overflow-x:hidden}.iner-wrapper .attachment-iner-small-body{width:350px}.rtl .actions-iner-wrapper{direction:ltr}.actions-iner-wrapper{direction:rtl}:host{height:100%;display:block}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "loaderMode"] }, { type: DynamicFieldsRendererComponent, selector: "app-dynamic-fields-renderer", inputs: ["form", "agencyNameFilter", "countryNameFilter", "mode", "fields"] }, { type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["form", "data", "readOnly"], outputs: ["change"] }, { type: AttachmentsComponent, selector: "app-attachments", inputs: ["allowedTypes", "params", "path", "maxSize", "docParams", "multiple", "createDocument", "allowedMaxNumberOfFiles", "source"], outputs: ["uploadSuccess", "uploadError", "onSelectingItem", "itemRemoved"] }, { type: i8__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i6__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreateModalComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -22804,10 +22838,10 @@
           return [{ type: undefined, decorators: [{
                           type: i0.Inject,
                           args: [i1$4.MAT_DIALOG_DATA]
-                      }] }, { type: i1__namespace$3.MatDialogRef }, { type: UploadManagmentService }, { type: DialogMangmentService }, { type: FileManagerService }, { type: CustomToastrService }, { type: i6__namespace.FormBuilder }, { type: AdapterService }, { type: FileManagerService }, { type: AppConfigService }, { type: DateHelperService }, { type: TranslationService }, { type: UserService }, { type: NuxeoService }, { type: undefined, decorators: [{
+                      }] }, { type: UploadManagmentService }, { type: DialogMangmentService }, { type: FileManagerService }, { type: CustomToastrService }, { type: i6__namespace.FormBuilder }, { type: AdapterService }, { type: FileManagerService }, { type: AppConfigService }, { type: DateHelperService }, { type: UserService }, { type: undefined, decorators: [{
                           type: i0.Inject,
                           args: ['environment']
-                      }] }, { type: DynamicFormService }];
+                      }] }, { type: i0__namespace.Injector }, { type: DynamicFormService }];
       }, propDecorators: { KeyUpEvent: [{
                   type: i0.HostListener,
                   args: ['document:keyup.enter', ['$event']]
@@ -28504,7 +28538,8 @@
           i6.FormsModule,
           DisplaySuitableIconModule,
           i4$3.MatProgressBarModule,
-          i7$1.MatCheckboxModule], exports: [SidepanelComponent,
+          i7$1.MatCheckboxModule,
+          NuxeoDialogModule], exports: [SidepanelComponent,
           CopyComponent,
           DeleteComponent,
           MoveComponent,
@@ -28574,7 +28609,8 @@
               i6.FormsModule,
               DisplaySuitableIconModule,
               i4$3.MatProgressBarModule,
-              i7$1.MatCheckboxModule
+              i7$1.MatCheckboxModule,
+              NuxeoDialogModule
           ], i3$3.DxPopupModule,
           i3$3.DxScrollViewModule,
           i4$4.DxiToolbarItemModule,
@@ -28605,7 +28641,7 @@
                           TemplateModalComponent,
                           UpdateModalComponent,
                           ClipboardComponent,
-                          FileGridInfiniteScrollDirective,
+                          FileGridInfiniteScrollDirective
                       ],
                       imports: [
                           i4.CommonModule,
@@ -28650,7 +28686,8 @@
                           i6.FormsModule,
                           DisplaySuitableIconModule,
                           i4$3.MatProgressBarModule,
-                          i7$1.MatCheckboxModule
+                          i7$1.MatCheckboxModule,
+                          NuxeoDialogModule
                       ],
                       exports: [
                           SidepanelComponent,
@@ -28679,7 +28716,7 @@
                           i3$3.DxFormModule,
                           i3$3.DxTreeViewModule,
                           ClipboardComponent,
-                          FileGridInfiniteScrollDirective,
+                          FileGridInfiniteScrollDirective
                       ]
                   }]
           }] });
@@ -30252,6 +30289,7 @@
       start: 'start',
       content: 'content',
       template: 'template',
+      gateway: 'gateway',
       end: 'end',
   };
 
@@ -30263,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;
 
@@ -30273,6 +30312,9 @@
       inProgress: 'inProgress',
       upcoming: 'upcoming',
       approved: 'approved',
+      suspended: 'suspended',
+      ready: 'ready',
+      canceled: 'canceled'
   };
 
   var DiagramPluginsService = /** @class */ (function () {
@@ -30305,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;
@@ -30317,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;
@@ -30333,123 +30376,406 @@
       return CircleNode;
   }(BaseNodeClass));
 
-  var Connection = /** @class */ (function (_super) {
-      __extends(Connection, _super);
-      function Connection() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-          _this.renderType = 'default';
-          return _this;
-      }
-      return Connection;
-  }(rete.ClassicPreset.Connection));
-
-  var ContentNode = /** @class */ (function (_super) {
-      __extends(ContentNode, _super);
-      function ContentNode(config) {
-          return _super.call(this, config) || this;
-      }
-      return ContentNode;
-  }(BaseNodeClass));
-
-  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;
-          return _this;
+  var DiagramUtils = /** @class */ (function () {
+      function DiagramUtils() {
       }
-      return Socket;
-  }(rete.ClassicPreset.Socket));
+      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;
+  }());
 
-  var TemplateNode = /** @class */ (function (_super) {
-      __extends(TemplateNode, _super);
-      function TemplateNode(config) {
-          var _this = _super.call(this, config) || this;
-          _this.type = NODE_TYPE.template;
-          if (config.template) {
-              _this.template = config.template;
-          }
-          return _this;
-      }
-      return TemplateNode;
-  }(BaseNodeClass));
+  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 config
+   * @param node
    * @returns
    */
-  var customizeSocket = function (config) { return function (data) {
-      var payload = data.payload;
-      if (payload.renderType === 'custom' || config.socketType === 'custom') {
-          return CustomSocketComponent;
-      }
-      return i2$8.SocketComponent;
-  }; };
+  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 config
+   * @param node
    * @param editor
-   * @returns
    */
-  var customizeNode = function (config, editor) { return function (data) {
-      var _a;
-      var node = data.payload;
-      (_a = node.config) !== null && _a !== void 0 ? _a : (node.config = config['node']);
-      return initAngularComponentByType(node.type);
-  }; };
+  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 config
-   * @returns
+   * @param node
+   * @param editor
    */
-  var customizeConnection = function (config) { return function (data) {
-      var payload = data.payload;
-      if (payload.renderType === 'custom' || config.connectionType == 'custom') {
+  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(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;
+  }(rete.ClassicPreset.Connection));
+
+  var ContentNode = /** @class */ (function (_super) {
+      __extends(ContentNode, _super);
+      function ContentNode(config) {
+          return _super.call(this, config) || this;
+      }
+      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(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;
+  }(rete.ClassicPreset.Socket));
+
+  var TemplateNode = /** @class */ (function (_super) {
+      __extends(TemplateNode, _super);
+      function TemplateNode(config) {
+          var _this = _super.call(this, config) || this;
+          _this.type = NODE_TYPE.template;
+          if (config.template) {
+              _this.template = config.template;
+          }
+          return _this;
+      }
+      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
+   * @returns
+   */
+  var customizeSocket = function (config) { return function (data) {
+      var payload = data.payload;
+      if (payload.renderType === 'custom' || config.socketType === 'custom') {
+          return CustomSocketComponent;
+      }
+      return i2$8.SocketComponent;
+  }; };
+  /**
+   *
+   * @param config
+   * @param editor
+   * @returns
+   */
+  var customizeNode = function (config, editor) { return function (data) {
+      var _a;
+      var node = data.payload;
+      (_a = node.config) !== null && _a !== void 0 ? _a : (node.config = config['node']);
+      return initAngularComponentByType(node.type);
+  }; };
+  /**
+   *
+   * @param config
+   * @returns
+   */
+  var customizeConnection = function (config) { return function (data) {
+      var payload = data.payload;
+      if (payload.renderType === 'custom' || config.connectionType == 'custom') {
           return CustomConnectionComponent;
       }
       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];
       };
@@ -30459,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) {
@@ -30481,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();
@@ -30499,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);
           }
@@ -30536,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
@@ -30550,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 () {
       /**
        *
@@ -30739,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()
@@ -30768,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;
@@ -30787,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;
@@ -30794,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*/];
@@ -30818,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 () {
@@ -30862,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;
@@ -30915,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 });
@@ -30970,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);
@@ -31035,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*/];
                   }
               });
           });
@@ -31060,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) {
@@ -31084,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);
                               });
@@ -31105,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) {
@@ -31114,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 }];
@@ -31150,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:
@@ -31198,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;
       };
@@ -31213,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) {
@@ -31226,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();
@@ -31240,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();
@@ -31296,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
@@ -31346,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) {
@@ -31383,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: [{
@@ -31392,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() {
       }
@@ -31456,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: [{
@@ -31470,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
               }] } });
 
@@ -31495,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() {
@@ -31531,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: [{
@@ -31607,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*/];
@@ -31634,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);
           });
       };
@@ -31653,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
@@ -31684,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,
@@ -31698,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,
@@ -31716,6 +32121,10 @@
                           StatusIconComponent,
                           NodeInputsComponent,
                           NodeOutputsComponent,
+                          GatewayNodeComponent,
+                          ConnectionLabelComponent,
+                          NodePortsComponent,
+                          GatewayPortsComponent
                       ],
                       imports: [
                           i4.CommonModule,
@@ -31724,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]
                   }]
           }] });
 
@@ -33991,6 +34400,7 @@
   exports.ConfirmationDialogComponent = ConfirmationDialogComponent;
   exports.ConfirmationDialogModule = ConfirmationDialogModule;
   exports.Connection = Connection;
+  exports.ConnectionLabelComponent = ConnectionLabelComponent;
   exports.ContentNode = ContentNode;
   exports.ContentNodeComponent = ContentNodeComponent;
   exports.CopyComponent = CopyComponent;
@@ -34026,6 +34436,7 @@
   exports.DiagramDirective = DiagramDirective;
   exports.DiagramPluginsService = DiagramPluginsService;
   exports.DiagramService = DiagramService;
+  exports.DiagramUtils = DiagramUtils;
   exports.DiagramsModule = DiagramsModule;
   exports.DialogMangmentService = DialogMangmentService;
   exports.DirectiveModule = DirectiveModule;
@@ -34097,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;
@@ -34106,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;
@@ -34124,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;
@@ -34141,6 +34556,7 @@
   exports.NodeIconComponent = NodeIconComponent;
   exports.NodeInputsComponent = NodeInputsComponent;
   exports.NodeOutputsComponent = NodeOutputsComponent;
+  exports.NodePortsComponent = NodePortsComponent;
   exports.NotificationIconDirective = NotificationIconDirective;
   exports.NotificationItemComponent = NotificationItemComponent;
   exports.NotificationItemDirective = NotificationItemDirective;
@@ -34162,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;
@@ -34242,6 +34659,7 @@
   exports.extensionJsonsFactory = extensionJsonsFactory;
   exports.filterEnabled = filterEnabled;
   exports.getConnections = getConnections;
+  exports.getRandomNumber = getRandomNumber;
   exports.getValue = getValue;
   exports.mergeArrays = mergeArrays;
   exports.mergeObjects = mergeObjects;