nuxeo-development-framework 4.1.0 → 4.1.2

package/fesm2015/nuxeo-development-framework.js

@@ -1814,7 +1814,7 @@ class NdfNuxeoDialog extends BaseComponent {
     }
 }
 NdfNuxeoDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfNuxeoDialog, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-NdfNuxeoDialog.ɵcmp = i0.ɵɵ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, 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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: SetDirRtlDirective, selector: "[SetDirRtl]" }, { type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1.TranslatePipe } });
+NdfNuxeoDialog.ɵcmp = i0.ɵɵ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, 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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: SetDirRtlDirective, selector: "[SetDirRtl]" }, { type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfNuxeoDialog, decorators: [{
             type: Component,
             args: [{
@@ -5657,7 +5657,7 @@ class CorrespondenceRelationListComponent {
     }
 }
 CorrespondenceRelationListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CorrespondenceRelationListComponent, deps: [{ token: CorrespondenceRelationService }, { token: i1$3.MatDialog }, { token: ViewerFilesService }, { token: DocumentsService }, { token: AdapterService }], target: i0.ɵɵFactoryTarget.Component });
-CorrespondenceRelationListComponent.ɵcmp = i0.ɵɵ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, 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$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight"] }, { type: i2$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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i6$3.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+CorrespondenceRelationListComponent.ɵcmp = i0.ɵɵ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, 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$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight"] }, { type: i2$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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i6$3.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CorrespondenceRelationListComponent, decorators: [{
             type: Component,
             args: [{
@@ -20735,10 +20735,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: ['fileInput']
             }] } });
 
-class CreateModalComponent {
-    constructor(data, dialogRef, uploadMangmentService, dialogMangmentService, fileMangerService, tosterService, formBuilder, adapeter, fileManagerService, appConfService, dateHelperService, translationService, userService, nuxeoService, environment, dynamicFormService) {
+class CreateModalComponent extends BaseDialogComponent {
+    constructor(data, uploadMangmentService, dialogMangmentService, fileMangerService, tosterService, formBuilder, adapeter, fileManagerService, appConfService, dateHelperService, userService, environment, injector, dynamicFormService) {
+        super(injector);
         this.data = data;
-        this.dialogRef = dialogRef;
         this.uploadMangmentService = uploadMangmentService;
         this.dialogMangmentService = dialogMangmentService;
         this.fileMangerService = fileMangerService;
@@ -20748,9 +20748,7 @@ class CreateModalComponent {
         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;
@@ -20759,37 +20757,149 @@ class CreateModalComponent {
         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.createWhenFinish = () => {
+            this.createWhenFinishMode = true;
+            return this.minimizDialog();
+        };
+        this.startAddingProperties = () => {
+            //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((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((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 = () => {
+            var _a, _b;
+            this.creating = true;
+            this.uploadMangmentService.failedFiles = [];
+            this.uploadMangmentService.GeneralFormValidation = this.checkValidation();
+            if (this.uploadMangmentService.GeneralFormValidation) {
+                let apiCalls = [];
+                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((payload) => {
+                        apiCalls.push(this.fileMangerService.createFile(payload, this.fileManagerService.selectedFolderId, 'DMS.CreateDocumentFromBlob'));
+                    });
+                }
+                else {
+                    this.constructPayLoad(this.uploadMangmentService.uploadedFilesStatus.uploadedFiles);
+                    this.payloadList.forEach((payload) => {
+                        apiCalls.push(this.fileMangerService.createFile(payload, this.fileManagerService.selectedFolderId));
+                    });
+                }
+                return forkJoin(apiCalls).pipe(tap((response) => {
+                    this.creating = false;
+                    response.forEach((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 = [
+                            ...this.uploadMangmentService.failedFiles
+                        ];
+                    }
+                    else {
+                        this.fileMangerService.onRefreshingFileManger.next();
+                        this.tosterService.show('success', 'TOASTER.SUCCESS', 'TOASTER.FILE_CREATED_SUCCE');
+                        super.close(false);
+                        this.uploadMangmentService.resetStatus();
+                    }
+                }, (error) => {
+                    this.creating = false;
+                }));
+            }
+            else {
+                this.creating = false;
+                return of(null);
+            }
+        };
+        this.tryAgainCreateDocument = () => {
+            this.uploadMangmentService.uploadFilesMangment(this.uploadMangmentService.failedFiles);
+            return of(null);
+        };
+        this.minimizDialog = () => {
+            super.close(true);
+            return of(null);
+        };
+        this.ApplyChangesToAll = () => {
+            this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.forEach((file) => {
+                let 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((file) => {
+                let 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 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(schemas => {
-            schemas.map(item => {
-                if (item.name === "generaldocument") {
+        this.fileManagerService
+            .getFileSchemas(this.fileType.type)
+            .subscribe((schemas) => {
+            schemas.map((item) => {
+                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
             });
         });
     }
     KeyUpEvent(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 {
@@ -20798,17 +20908,16 @@ class CreateModalComponent {
         }
     }
     ngOnInit() {
-        this.langSubscription = this.translationService.isArabic.subscribe(res => {
-            this.isArabic = res;
-        });
         if (this.uploadMangmentService.uploadFinishSubscription) {
             this.uploadMangmentService.uploadFinishSubscription.unsubscribe();
         }
-        this.uploadMangmentService.uploadFinishSubscription = this.uploadMangmentService.onUploadFinish.subscribe(res => {
-            if (this.createWhenFinishMode || this.uploadMangmentService.failedFiles.length > 0) {
-                this.createDocument();
-            }
-        });
+        this.uploadMangmentService.uploadFinishSubscription =
+            this.uploadMangmentService.onUploadFinish.subscribe((res) => {
+                if (this.createWhenFinishMode ||
+                    this.uploadMangmentService.failedFiles.length > 0) {
+                    this.createDocument();
+                }
+            });
     }
     initiatfileForm() {
         if (this.usingExtraFields) {
@@ -20834,43 +20943,16 @@ class CreateModalComponent {
                 description: ['']
             });
         }
-        this.staticFormFields = this.appConfService.myConfiguration.staticFormFields;
-    }
-    createWhenFinish() {
-        this.createWhenFinishMode = true;
-        this.minimizDialog();
+        this.staticFormFields =
+            this.appConfService.myConfiguration.staticFormFields;
     }
-    closeDialog() {
+    close() {
         this.uploadMangmentService.GeneralFormValidation = true;
         this.fileFormSubscription ? this.fileFormSubscription.unsubscribe() : '';
         this.addingProperties = false;
         this.uploadMangmentService.resetStatus();
-        this.dialogRef.close(false);
-    }
-    startAddingProperties() {
-        //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(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(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.close();
+        return of(null);
     }
     setStaticData(title) {
         if (this.usingExtraFields) {
@@ -20897,89 +20979,36 @@ class CreateModalComponent {
             };
         }
     }
-    createDocument() {
-        var _a, _b;
-        this.creating = true;
-        this.uploadMangmentService.failedFiles = [];
-        this.uploadMangmentService.GeneralFormValidation = this.checkValidation();
-        if (this.uploadMangmentService.GeneralFormValidation) {
-            let apiCalls = [];
-            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(payload => {
-                    apiCalls.push(this.fileMangerService.createFile(payload, this.fileManagerService.selectedFolderId, 'DMS.CreateDocumentFromBlob'));
-                });
-            }
-            else {
-                this.constructPayLoad(this.uploadMangmentService.uploadedFilesStatus.uploadedFiles);
-                this.payloadList.map(payload => {
-                    apiCalls.push(this.fileMangerService.createFile(payload, this.fileManagerService.selectedFolderId));
-                });
-            }
-            forkJoin(apiCalls).subscribe(response => {
-                //console.log(res);
-                this.creating = false;
-                response.map(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 = [...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();
-                }
-            }, error => {
-                this.creating = false;
-                // console.log(error);
-                // this.tosterService.show('error' , 'TOASTER.ERROR' , 'TOASTER.UPLOAD_ERROR');
-                // this.closeDialog();
-            });
-        }
-        else {
-            this.creating = false;
-        }
-    }
     constructPayLoadToWorkSpace(files) {
         this.payloadList = [];
-        files.map(file => {
+        files.map((file) => {
             let 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 });
         });
     }
-    tryAgainCreateDocument() {
-        this.uploadMangmentService.uploadFilesMangment(this.uploadMangmentService.failedFiles);
-    }
     constructPayLoad(files) {
         this.payloadList = [];
-        files.map(file => {
+        files.map((file) => {
             let props = this.dynamicFormService.constructDynamicFormPayload(file.dynamicData.data ? file.dynamicData.data : {}, file.dynamicForm);
             let staticFormData = this.mappingStaticData(file.staticData);
             let 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 });
         });
@@ -20988,12 +21017,13 @@ class CreateModalComponent {
         if (data.gdocumentDate && data.gdocumentDate !== null) {
             moment$4.locale('en');
             data['hdocumentDate'] = this.dateHelperService.gregorianToHijri(data.gdocumentDate, 'iYYYY-iMM-iDD');
-            data.gdocumentDate = (moment$4(data.gdocumentDate).format("YYYY-MM-DDT00:00:00.000") + "Z");
+            data.gdocumentDate =
+                moment$4(data.gdocumentDate).format('YYYY-MM-DDT00:00:00.000') + 'Z';
         }
         return this.adapeter.adaptOut(data, this.staticFormFields);
     }
     selectFile(file) {
-        console.log("file in select", file);
+        console.log('file in select', file);
         this.showStaticForm = false;
         this.agencyNameFilter = undefined;
         this.countryNameFilter = undefined;
@@ -21005,8 +21035,13 @@ class CreateModalComponent {
             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(res => {
-                    file['fileType'] = this.source === 'fileManger' ? this.fileType : {};
+                this.dynamicFormService
+                    .getDynamicForm(this.fileType.documentCode
+                    ? this.fileType.documentCode
+                    : this.fileType.type)
+                    .subscribe((res) => {
+                    file['fileType'] =
+                        this.source === 'fileManger' ? this.fileType : {};
                     file['dynamicForm'] = res;
                     file['dynamicData'] = {};
                     file['staticFormValid'] = this.usingExtraFields ? false : true;
@@ -21018,7 +21053,8 @@ class CreateModalComponent {
                     }
                     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(() => {
                         this.showRenderer = true;
                         this.showStaticForm = true;
@@ -21026,12 +21062,19 @@ class CreateModalComponent {
                     //console.log(file);
                     if (!this.fileFormSubscription) {
                         setTimeout(() => {
-                            this.fileFormSubscription = this.fileForm.valueChanges.subscribe(res => {
-                                this.selectedFile.staticFormValid = this.fileForm ? this.fileForm.valid : false;
-                                this.selectedFile.staticData = this.fileForm ? this.fileForm.value : {};
-                            });
+                            this.fileFormSubscription =
+                                this.fileForm.valueChanges.subscribe((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(res => {
+                                this.agencyCategCodeSubscription = this.fileForm
+                                    .get('agencyCategoryCode')
+                                    .valueChanges.subscribe((res) => {
                                     this.fileForm.get('agencyName').setValue(null);
                                     this.agencyNameFilter = {
                                         category: res
@@ -21039,7 +21082,9 @@ class CreateModalComponent {
                                 });
                             }
                             if (this.fileForm.get('countryCategoryCode')) {
-                                this.countryCategCodeSubscription = this.fileForm.get('countryCategoryCode').valueChanges.subscribe(res => {
+                                this.countryCategCodeSubscription = this.fileForm
+                                    .get('countryCategoryCode')
+                                    .valueChanges.subscribe((res) => {
                                     this.fileForm.get('countryName').setValue(null);
                                     this.countryNameFilter = {
                                         category: res
@@ -21067,19 +21112,27 @@ class CreateModalComponent {
                     };
                 }
                 this.temporaryDyanmicData = {};
-                this.temporaryDyanmicData = this.selectedFile.dynamicData.data ? this.selectedFile.dynamicData.data : {};
+                this.temporaryDyanmicData = this.selectedFile.dynamicData.data
+                    ? this.selectedFile.dynamicData.data
+                    : {};
                 setTimeout(() => {
                     this.showRenderer = true;
                     this.showStaticForm = true;
                 }, 200);
                 if (!this.fileFormSubscription) {
                     setTimeout(() => {
-                        this.fileFormSubscription = this.fileForm.valueChanges.subscribe(res => {
-                            this.selectedFile.staticFormValid = this.fileForm ? this.fileForm.valid : false;
-                            this.selectedFile.staticData = this.fileForm ? this.fileForm.value : {};
+                        this.fileFormSubscription = this.fileForm.valueChanges.subscribe((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(res => {
+                            this.agencyCategCodeSubscription = this.fileForm
+                                .get('agencyCategoryCode')
+                                .valueChanges.subscribe((res) => {
                                 this.fileForm.get('agencyName').setValue(null);
                                 this.agencyNameFilter = {
                                     category: res
@@ -21087,7 +21140,9 @@ class CreateModalComponent {
                             });
                         }
                         if (this.fileForm.get('countryCategoryCode')) {
-                            this.countryCategCodeSubscription = this.fileForm.get('countryCategoryCode').valueChanges.subscribe(res => {
+                            this.countryCategCodeSubscription = this.fileForm
+                                .get('countryCategoryCode')
+                                .valueChanges.subscribe((res) => {
                                 this.fileForm.get('countryName').setValue(null);
                                 this.countryNameFilter = {
                                     category: res
@@ -21109,11 +21164,8 @@ class CreateModalComponent {
             this.selectedFile.dynamicData = Object.assign({}, dynamicData);
         }
     }
-    minimizDialog() {
-        this.dialogRef.close(true);
-    }
     removeItem(item, listofFiles) {
-        const removeIndex = listofFiles.findIndex(file => file.name === item.name);
+        const removeIndex = listofFiles.findIndex((file) => file.name === item.name);
         listofFiles.splice(removeIndex, 1);
         if (item.name === this.selectedFile.name) {
             if (this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.length > 0) {
@@ -21125,32 +21177,14 @@ class CreateModalComponent {
             // this.selectedFile = null;
         }
     }
-    ApplyChangesToAll() {
-        this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.map(file => {
-            let 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(file => {
-            let 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;
-        });
-    }
     checkValidation() {
         let validation = true;
-        this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.map(file => {
+        this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.forEach((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;
             }
@@ -21158,9 +21192,10 @@ class CreateModalComponent {
                 file['generalValidationValid'] = true;
             }
         });
-        this.uploadMangmentService.uploadedFilesStatus.allfiles.map(file => {
+        this.uploadMangmentService.uploadedFilesStatus.allfiles.map((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;
             }
@@ -21172,13 +21207,16 @@ class CreateModalComponent {
     }
     ngOnDestroy() {
         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()
+            : '';
     }
 }
-CreateModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateModalComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$3.MatDialogRef }, { token: UploadManagmentService }, { token: DialogMangmentService }, { token: FileManagerService }, { token: CustomToastrService }, { token: i6.FormBuilder }, { token: AdapterService }, { token: FileManagerService }, { token: AppConfigService }, { token: DateHelperService }, { token: TranslationService }, { token: UserService }, { token: NuxeoService }, { token: 'environment' }, { token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
-CreateModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreateModalComponent, selector: "app-create-modal", host: { listeners: { "document:keyup.enter": "KeyUpEvent($event)" } }, ngImport: i0, 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.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1.TranslatePipe } });
+CreateModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateModalComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: UploadManagmentService }, { token: DialogMangmentService }, { token: FileManagerService }, { token: CustomToastrService }, { token: i6.FormBuilder }, { token: AdapterService }, { token: FileManagerService }, { token: AppConfigService }, { token: DateHelperService }, { token: UserService }, { token: 'environment' }, { token: i0.Injector }, { token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
+CreateModalComponent.ɵcmp = i0.ɵɵ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, 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.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateModalComponent, decorators: [{
             type: Component,
             args: [{
@@ -21189,10 +21227,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$3.MatDialogRef }, { type: UploadManagmentService }, { type: DialogMangmentService }, { type: FileManagerService }, { type: CustomToastrService }, { type: i6.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.FormBuilder }, { type: AdapterService }, { type: FileManagerService }, { type: AppConfigService }, { type: DateHelperService }, { type: UserService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['environment']
-                }] }, { type: DynamicFormService }]; }, propDecorators: { KeyUpEvent: [{
+                }] }, { type: i0.Injector }, { type: DynamicFormService }]; }, propDecorators: { KeyUpEvent: [{
                 type: HostListener,
                 args: ['document:keyup.enter', ['$event']]
             }] } });
@@ -26610,7 +26648,8 @@ FileMangerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         FormsModule,
         DisplaySuitableIconModule,
         MatProgressBarModule,
-        MatCheckboxModule], exports: [SidepanelComponent,
+        MatCheckboxModule,
+        NuxeoDialogModule], exports: [SidepanelComponent,
         CopyComponent,
         DeleteComponent,
         MoveComponent,
@@ -26680,7 +26719,8 @@ FileMangerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
             FormsModule,
             DisplaySuitableIconModule,
             MatProgressBarModule,
-            MatCheckboxModule
+            MatCheckboxModule,
+            NuxeoDialogModule
         ], DxPopupModule,
         DxScrollViewModule,
         DxiToolbarItemModule,
@@ -26711,7 +26751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         TemplateModalComponent,
                         UpdateModalComponent,
                         ClipboardComponent,
-                        FileGridInfiniteScrollDirective,
+                        FileGridInfiniteScrollDirective
                     ],
                     imports: [
                         CommonModule,
@@ -26756,7 +26796,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         FormsModule,
                         DisplaySuitableIconModule,
                         MatProgressBarModule,
-                        MatCheckboxModule
+                        MatCheckboxModule,
+                        NuxeoDialogModule
                     ],
                     exports: [
                         SidepanelComponent,
@@ -26785,7 +26826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         DxFormModule,
                         DxTreeViewModule,
                         ClipboardComponent,
-                        FileGridInfiniteScrollDirective,
+                        FileGridInfiniteScrollDirective
                     ]
                 }]
         }] });
@@ -28276,6 +28317,7 @@ const NODE_TYPE = {
     start: 'start',
     content: 'content',
     template: 'template',
+    gateway: 'gateway',
     end: 'end',
 };
 
@@ -28287,6 +28329,7 @@ const NODE_MARGIN = 60;
 const NODE_WIDTH = 150;
 const NODE_HEIGHT = 118;
 const NODE_CIRCLE_SIZE = 72;
+const NODE_GATEWAY_SIZE = 60;
 const DIAGRAM_HEIGHT = 600;
 const SOCKET_WIDTH = 8;
 
@@ -28297,6 +28340,9 @@ const NODE_STATUS = {
     inProgress: 'inProgress',
     upcoming: 'upcoming',
     approved: 'approved',
+    suspended: 'suspended',
+    ready: 'ready',
+    canceled: 'canceled'
 };
 
 class DiagramPluginsService {
@@ -28324,7 +28370,7 @@ class BaseNodeClass extends ClassicPreset.Node {
         this.height = NODE_HEIGHT;
         this.directions = {
             inputs: IN_OUT_DIRECTION.start,
-            outputs: IN_OUT_DIRECTION.end,
+            outputs: IN_OUT_DIRECTION.end
         };
         this.name = config === null || config === void 0 ? void 0 : config.name;
         this.directions = (config === null || config === void 0 ? void 0 : config.directions) || this.directions;
@@ -28336,6 +28382,7 @@ class BaseNodeClass extends ClassicPreset.Node {
         this.content = config === null || config === void 0 ? void 0 : config.content;
         this.config = config === null || config === void 0 ? void 0 : config.config;
         this.styleClass = config === null || config === void 0 ? void 0 : config.styleClass;
+        this.options = config === null || config === void 0 ? void 0 : config.options;
     }
 }
 
@@ -28347,110 +28394,325 @@ class CircleNode extends BaseNodeClass {
     }
 }
 
-class Connection extends ClassicPreset.Connection {
-    constructor() {
-        super(...arguments);
-        this.renderType = 'default';
+class DiagramUtils {
+    static createInputId(id, type = 'primary') {
+        return `${id}-${type}-input`;
     }
-}
-
-class ContentNode extends BaseNodeClass {
-    constructor(config) {
-        super(config);
+    static createOutputId(id, type = 'primary') {
+        return `${id}-${type}-output`;
     }
-}
-
-class Socket extends ClassicPreset.Socket {
-    constructor(name, renderType = 'default') {
-        super(name);
-        this.renderType = renderType;
+    static createInputClass(type = 'primary') {
+        return `input-${type}-port`;
+    }
+    static createOutputClass(type = 'primary') {
+        return `output-${type}-port`;
+    }
+    static createOutputsConfig(id, types) {
+        return types.map((type) => {
+            return {
+                id: DiagramUtils.createOutputId(id, type),
+                config: {
+                    styleClass: DiagramUtils.createOutputClass(type)
+                }
+            };
+        });
+    }
+    static createInputsConfig(id, types) {
+        return types.map((type) => {
+            return {
+                id: DiagramUtils.createInputId(id, type),
+                config: {
+                    styleClass: DiagramUtils.createInputClass(type)
+                }
+            };
+        });
     }
 }
 
-class TemplateNode extends BaseNodeClass {
-    constructor(config) {
-        super(config);
-        this.type = NODE_TYPE.template;
-        if (config.template) {
-            this.template = config.template;
-        }
-    }
+function getRandomNumber(x, y, step = 1, min = 0, max = 1000) {
+    // Create a deterministic seed based on x and y
+    const seed = Math.abs(x * 31 + y * 17) % 100000;
+    // Generate a pseudo-random number based on the seed
+    const seededRandom = ((seed * 9301 + 49297) % 233280) / 233280;
+    // Calculate range
+    const range = Math.floor((max - min) / step) + 1;
+    // Return the adjusted number
+    return min + Math.floor(seededRandom * range) * step;
 }
 
 /**
  *
- * @param config
+ * @param node
  * @returns
  */
-const customizeSocket = (config) => (data) => {
-    const payload = data.payload;
-    if (payload.renderType === 'custom' || config.socketType === 'custom') {
-        return CustomSocketComponent;
+const removeNode = (data, editor) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!data || !editor) {
+        console.log('Node not found.');
+        return;
+    }
+    const nodes = editor.getNodes();
+    const node = editor.getNode(data.nodeId);
+    if (!node) {
+        console.log('Node not found.');
+        return;
+    }
+    if (node.type === NODE_TYPE.start && nodes.length > 1) {
+        return;
+    }
+    const nodeConfig = node.config;
+    return (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.isLinked)
+        ? yield removeNodeAndReplaceConnections(node, editor)
+        : yield removeNodeAndConnections(node, editor);
+});
+/**
+ *
+ * @param node
+ * @param editor
+ */
+const removeNodeAndConnections = (node, editor) => __awaiter(void 0, void 0, void 0, function* () {
+    removeConnections(node, editor);
+    yield editor.removeNode(node.id);
+});
+/**
+ *
+ * @param node
+ * @param editor
+ */
+const removeNodeAndReplaceConnections = (node, editor) => __awaiter(void 0, void 0, void 0, function* () {
+    const outputs = getConnections(editor, (connection) => connection.source == node.id);
+    const inputs = getConnections(editor, (connection) => connection.target == node.id);
+    if (!!inputs.length && !!outputs.length) {
+        yield _updateConnections(outputs, inputs, editor);
+    }
+    else {
+        removeConnections(node, editor);
+    }
+    yield editor.removeNode(node.id);
+});
+/**
+ *
+ * @param node
+ * @param editor
+ */
+const removeConnections = (node, editor) => {
+    const connections = getConnections(editor, (connection) => connection.source === node.id || connection.target === node.id);
+    if (connections.length) {
+        connections.forEach((connection) => {
+            editor.removeConnection(connection.id);
+        });
     }
-    return SocketComponent;
 };
 /**
  *
- * @param config
  * @param editor
+ * @param predicate
  * @returns
  */
-const customizeNode = (config, editor) => (data) => {
-    var _a;
-    const node = data.payload;
-    (_a = node.config) !== null && _a !== void 0 ? _a : (node.config = config['node']);
-    return initAngularComponentByType(node.type);
+const getConnections = (editor, predicate) => {
+    return editor.getConnections().filter(predicate);
 };
 /**
  *
- * @param config
- * @returns
+ * @param outputs
+ * @param inputs
+ * @param editor
  */
-const customizeConnection = (config) => (data) => {
-    const payload = data.payload;
-    if (payload.renderType === 'custom' || config.connectionType == 'custom') {
-        return CustomConnectionComponent;
+const _updateConnections = (outputs, inputs, editor) => __awaiter(void 0, void 0, void 0, function* () {
+    const source = inputs[0].source;
+    const target = outputs[0].target;
+    const sourceNode = editor.getNode(source);
+    const targetNode = editor.getNode(target);
+    [...outputs, ...inputs].forEach((connection) => __awaiter(void 0, void 0, void 0, function* () {
+        yield editor.removeConnection(connection.id);
+    }));
+    if (!sourceNode || !targetNode) {
+        return;
     }
-    return ConnectionComponent;
-};
-const initNodeByType = (type, config) => {
-    const _nodes = {
-        start: CircleNode,
-        content: ContentNode,
-        template: TemplateNode,
-        end: CircleNode,
-    };
-    return new _nodes[type](config) || new ContentNode(config);
-};
-const initAngularComponentByType = (type) => {
-    const _components = {
-        content: ContentNodeComponent,
-        start: CircleNodeComponent,
-        end: CircleNodeComponent,
-        template: TemplateNodeComponent,
-    };
-    return _components[type] || NodeComponent;
-};
+    const connection = new Connection(sourceNode, targetNode);
+    yield editor.addConnection(connection);
+});
+
+function serializePort(port) {
+    return {
+        id: port.id,
+        label: port.label,
+        socket: {
+            name: port.socket.name,
+        },
+    };
+}
+function serializeControl(control) {
+    if (control instanceof ClassicPreset.InputControl) {
+        return {
+            __type: 'ClassicPreset.InputControl',
+            id: control.id,
+            readonly: control.readonly,
+            type: control.type,
+            value: control.value,
+        };
+    }
+    return null;
+}
+
+class Connection extends ClassicPreset.Connection {
+    constructor(source, target, config) {
+        super(source, (config === null || config === void 0 ? void 0 : config.sourceOutput) || DiagramUtils.createOutputId(source.id), target, (config === null || config === void 0 ? void 0 : config.targetInput) || DiagramUtils.createInputId(target.id));
+        this.status = (config === null || config === void 0 ? void 0 : config.status) || target.status;
+        this.styleClass = config === null || config === void 0 ? void 0 : config.styleClass;
+        this.label = config === null || config === void 0 ? void 0 : config.label;
+        this.renderType = (config === null || config === void 0 ? void 0 : config.renderType) || 'default';
+        this.sourceNode = source;
+        this.targetNode = target;
+        this.direction = config === null || config === void 0 ? void 0 : config.direction;
+    }
+}
+
+class ContentNode extends BaseNodeClass {
+    constructor(config) {
+        super(config);
+    }
+}
+
+class OutputPort extends ClassicPreset.Output {
+    constructor(config) {
+        super(config.socket, config === null || config === void 0 ? void 0 : config.label, (config === null || config === void 0 ? void 0 : config.multipleConnections) !== false);
+        this.styleClass = config === null || config === void 0 ? void 0 : config.styleClass;
+    }
+}
+class InputPort extends ClassicPreset.Input {
+    constructor(config) {
+        super(config.socket, config === null || config === void 0 ? void 0 : config.label, (config === null || config === void 0 ? void 0 : config.multipleConnections) !== false);
+        this.styleClass = config === null || config === void 0 ? void 0 : config.styleClass;
+    }
+}
+
+class Socket extends ClassicPreset.Socket {
+    constructor(config) {
+        super(config.name);
+        this.renderType = (config === null || config === void 0 ? void 0 : config.renderType) || 'default';
+        this.styleClass = config === null || config === void 0 ? void 0 : config.styleClass;
+    }
+}
+
+class TemplateNode extends BaseNodeClass {
+    constructor(config) {
+        super(config);
+        this.type = NODE_TYPE.template;
+        if (config.template) {
+            this.template = config.template;
+        }
+    }
+}
+
+class GateWayNode extends BaseNodeClass {
+    constructor(config) {
+        super(config);
+        this.type = NODE_TYPE.gateway;
+        this.width = NODE_GATEWAY_SIZE;
+        this.height = NODE_GATEWAY_SIZE;
+    }
+}
+
+/**
+ *
+ * @param config
+ * @returns
+ */
+const customizeSocket = (config) => (data) => {
+    const payload = data.payload;
+    if (payload.renderType === 'custom' || config.socketType === 'custom') {
+        return CustomSocketComponent;
+    }
+    return SocketComponent;
+};
+/**
+ *
+ * @param config
+ * @param editor
+ * @returns
+ */
+const customizeNode = (config, editor) => (data) => {
+    var _a;
+    const node = data.payload;
+    (_a = node.config) !== null && _a !== void 0 ? _a : (node.config = config['node']);
+    return initAngularComponentByType(node.type);
+};
+/**
+ *
+ * @param config
+ * @returns
+ */
+const customizeConnection = (config) => (data) => {
+    const payload = data.payload;
+    if (payload.renderType === 'custom' || config.connectionType == 'custom') {
+        return CustomConnectionComponent;
+    }
+    return ConnectionComponent;
+};
+const initNodeByType = (type, config) => {
+    const _nodes = {
+        [NODE_TYPE.start]: CircleNode,
+        [NODE_TYPE.content]: ContentNode,
+        [NODE_TYPE.template]: TemplateNode,
+        [NODE_TYPE.end]: CircleNode,
+        [NODE_TYPE.gateway]: GateWayNode
+    };
+    return new _nodes[type](config) || new ContentNode(config);
+};
+const initAngularComponentByType = (type) => {
+    const _components = {
+        [NODE_TYPE.content]: ContentNodeComponent,
+        [NODE_TYPE.start]: CircleNodeComponent,
+        [NODE_TYPE.end]: CircleNodeComponent,
+        [NODE_TYPE.template]: TemplateNodeComponent,
+        [NODE_TYPE.gateway]: GatewayNodeComponent
+    };
+    return _components[type] || NodeComponent;
+};
 
 const createSegmentedPath = (connection, options) => {
-    const { multiPoints = true, offset = 0 } = options || {};
+    var _a;
+    const { multiPoints = true, offset = 0 } = ((_a = options === null || options === void 0 ? void 0 : options.transform) === null || _a === void 0 ? void 0 : _a.options) || {};
+    const isVertical = !!(options === null || options === void 0 ? void 0 : options.vertical);
+    const direction = connection.direction;
     return (points) => {
         if (points.length !== 2) {
             throw new Error('Exactly two points are required to create a linear path.');
         }
         const [start, end] = points;
+        if (!isVertical) {
+            switch (direction) {
+                case 'down': {
+                    const offset = getRandomNumber(start.x, start.y, 10, 50, 150);
+                    const _points = [
+                        { x: start.x, y: start.y + offset },
+                        { x: end.x, y: end.y + offset }
+                    ];
+                    return [start, ..._points, end];
+                }
+                case 'backward': {
+                    const _points = [{ x: end.x, y: start.y }];
+                    return [start, ..._points, end];
+                }
+                case 'forward': {
+                    if (end.y < start.y) {
+                        const _points = [{ x: start.x, y: end.y }];
+                        return [start, ..._points, end];
+                    }
+                    break;
+                }
+            }
+        }
         if (multiPoints) {
             const midpointY = (end.y - start.y) / 2 + start.y;
             const intermediatePoints = [
                 { x: start.x, y: midpointY - offset },
-                { x: end.x, y: midpointY + offset },
+                { x: end.x, y: midpointY + offset }
             ];
-            // Use bezier curves between points to smooth corners
             return [
                 Object.assign(Object.assign({}, start), { controlOut: { x: start.x, y: midpointY - offset } }),
-                intermediatePoints[0],
-                intermediatePoints[1],
-                Object.assign(Object.assign({}, end), { controlIn: { x: end.x, y: midpointY + offset } }),
+                ...intermediatePoints,
+                Object.assign(Object.assign({}, end), { controlIn: { x: end.x, y: midpointY + offset } })
             ];
         }
         return [start, end];
@@ -28461,14 +28723,15 @@ const initPathPlugin = (config) => new ConnectionPathPlugin({
     curve: (c) => { var _a; return (_a = (c.curve || (config === null || config === void 0 ? void 0 : config.curve))) !== null && _a !== void 0 ? _a : curveLinear; },
     transformer: (c) => {
         var _a, _b, _c;
-        return ((_a = config === null || config === void 0 ? void 0 : config.transform) === null || _a === void 0 ? void 0 : _a.active)
-            ? createSegmentedPath(c, (_b = config === null || config === void 0 ? void 0 : config.transform) === null || _b === void 0 ? void 0 : _b.options)
-            : Transformers.classic({
-                vertical: !!(config === null || config === void 0 ? void 0 : config.vertical),
-                curvature: (_c = config === null || config === void 0 ? void 0 : config.curvature) !== null && _c !== void 0 ? _c : 0.3,
-            });
+        if ((_a = config === null || config === void 0 ? void 0 : config.transform) === null || _a === void 0 ? void 0 : _a.active) {
+            return (((_b = c === null || c === void 0 ? void 0 : c.createSegmentedPath) === null || _b === void 0 ? void 0 : _b.call(c, c, config)) || createSegmentedPath(c, config));
+        }
+        return Transformers.classic({
+            vertical: !!(config === null || config === void 0 ? void 0 : config.vertical),
+            curvature: (_c = config === null || config === void 0 ? void 0 : config.curvature) !== null && _c !== void 0 ? _c : 0.3
+        });
     },
-    arrow: (connection) => (!(config === null || config === void 0 ? void 0 : config.arrow) ? false : config === null || config === void 0 ? void 0 : config.arrow),
+    arrow: (connection) => (!(config === null || config === void 0 ? void 0 : config.arrow) ? false : config === null || config === void 0 ? void 0 : config.arrow)
 });
 
 const socketPositionWatcher = (offset = 1, isVertical = false, editor) => getDOMSocketPosition({
@@ -28478,9 +28741,9 @@ const socketPositionWatcher = (offset = 1, isVertical = false, editor) => getDOM
 });
 
 const createDiagramEditor = (container, injector, config) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     //#region PLUGINS
-    const socket = new Socket('', config === null || config === void 0 ? void 0 : config.socketType);
+    const socket = new Socket({ name: '', renderType: config === null || config === void 0 ? void 0 : config.socketType });
     const editor = new NodeEditor();
     const area = new AreaPlugin(container);
     const connection = new ConnectionPlugin();
@@ -28498,31 +28761,33 @@ const createDiagramEditor = (container, injector, config) => __awaiter(void 0, v
     RerouteExtensions.selectablePins(reroute, selector, accumulating);
     //#endregion
     //#region PRESETS
-    arrange.addPreset(Presets.classic.setup());
+    arrange.addPreset(((_b = config === null || config === void 0 ? void 0 : config.presets) === null || _b === void 0 ? void 0 : _b.arrange)
+        ? config === null || config === void 0 ? void 0 : config.presets.arrange(editor)
+        : Presets.classic.setup());
     angularRender.addPreset(Presets$1.classic.setup({
-        socketPositionWatcher: socketPositionWatcher(0, (_b = config === null || config === void 0 ? void 0 : config.path) === null || _b === void 0 ? void 0 : _b.vertical, editor),
+        socketPositionWatcher: socketPositionWatcher(0, (_c = config === null || config === void 0 ? void 0 : config.path) === null || _c === void 0 ? void 0 : _c.vertical, editor),
         customize: {
             node: customizeNode(config, editor),
             connection: customizeConnection(config),
-            socket: customizeSocket(config),
-        },
+            socket: customizeSocket(config)
+        }
     }));
-    angularRender.addPreset(Presets$1.minimap.setup({ size: ((_c = config === null || config === void 0 ? void 0 : config.minimap) === null || _c === void 0 ? void 0 : _c.size) || 150 }));
+    angularRender.addPreset(Presets$1.minimap.setup({ size: ((_d = config === null || config === void 0 ? void 0 : config.minimap) === null || _d === void 0 ? void 0 : _d.size) || 150 }));
     connection.addPreset(Presets$2.classic.setup());
-    if ((_d = config === null || config === void 0 ? void 0 : config.area) === null || _d === void 0 ? void 0 : _d.restrict) {
+    if ((_e = config === null || config === void 0 ? void 0 : config.area) === null || _e === void 0 ? void 0 : _e.restrict) {
         const _scaling = (config === null || config === void 0 ? void 0 : config.area.scaling) || { min: 0.5, max: 1.5 };
         AreaExtensions.restrictor(area, {
-            scaling: () => _scaling,
+            scaling: () => _scaling
         });
     }
     //#endregion
     //#region USE
-    if ((_e = config === null || config === void 0 ? void 0 : config.readonly) === null || _e === void 0 ? void 0 : _e.active) {
+    if ((_f = config === null || config === void 0 ? void 0 : config.readonly) === null || _f === void 0 ? void 0 : _f.active) {
         editor.use(readonly.root);
         area.use(readonly.area);
     }
     editor.use(area);
-    if (!((_f = config === null || config === void 0 ? void 0 : config.readonly) === null || _f === void 0 ? void 0 : _f.active)) {
+    if (!((_g = config === null || config === void 0 ? void 0 : config.readonly) === null || _g === void 0 ? void 0 : _g.active)) {
         // Don't use the connection plugin in readonly mode
         area.use(connection);
     }
@@ -28535,7 +28800,7 @@ const createDiagramEditor = (container, injector, config) => __awaiter(void 0, v
         //@ts-ignore
         angularRender.use(reroute);
     }
-    if ((_g = config === null || config === void 0 ? void 0 : config.minimap) === null || _g === void 0 ? void 0 : _g.active) {
+    if ((_h = config === null || config === void 0 ? void 0 : config.minimap) === null || _h === void 0 ? void 0 : _h.active) {
         area.use(minimap);
     }
     // Render Diagram
@@ -28549,130 +28814,16 @@ const createDiagramEditor = (container, injector, config) => __awaiter(void 0, v
             connection,
             arrange,
             reroute,
-            readonly,
+            readonly
         },
         destroy: () => area.destroy(),
         layout: (props) => arrange.layout(props),
         fitToZoom: () => {
             AreaExtensions.zoomAt(area, editor.getNodes());
-        },
+        }
     };
 });
 
-/**
- *
- * @param node
- * @returns
- */
-const removeNode = (data, editor) => __awaiter(void 0, void 0, void 0, function* () {
-    if (!data || !editor) {
-        console.log('Node not found.');
-        return;
-    }
-    const nodes = editor.getNodes();
-    const node = editor.getNode(data.nodeId);
-    if (!node) {
-        console.log('Node not found.');
-        return;
-    }
-    if (node.type === NODE_TYPE.start && nodes.length > 1) {
-        return;
-    }
-    const nodeConfig = node.config;
-    return (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.isLinked)
-        ? yield removeNodeAndReplaceConnections(node, editor)
-        : yield removeNodeAndConnections(node, editor);
-});
-/**
- *
- * @param node
- * @param editor
- */
-const removeNodeAndConnections = (node, editor) => __awaiter(void 0, void 0, void 0, function* () {
-    removeConnections(node, editor);
-    yield editor.removeNode(node.id);
-});
-/**
- *
- * @param node
- * @param editor
- */
-const removeNodeAndReplaceConnections = (node, editor) => __awaiter(void 0, void 0, void 0, function* () {
-    const outputs = getConnections(editor, (connection) => connection.source == node.id);
-    const inputs = getConnections(editor, (connection) => connection.target == node.id);
-    if (!!inputs.length && !!outputs.length) {
-        yield _updateConnections(outputs, inputs, editor);
-    }
-    else {
-        removeConnections(node, editor);
-    }
-    yield editor.removeNode(node.id);
-});
-/**
- *
- * @param node
- * @param editor
- */
-const removeConnections = (node, editor) => {
-    const connections = getConnections(editor, (connection) => connection.source === node.id || connection.target === node.id);
-    if (connections.length) {
-        connections.forEach((connection) => {
-            editor.removeConnection(connection.id);
-        });
-    }
-};
-/**
- *
- * @param editor
- * @param predicate
- * @returns
- */
-const getConnections = (editor, predicate) => {
-    return editor.getConnections().filter(predicate);
-};
-/**
- *
- * @param outputs
- * @param inputs
- * @param editor
- */
-const _updateConnections = (outputs, inputs, editor) => __awaiter(void 0, void 0, void 0, function* () {
-    const source = inputs[0].source;
-    const target = outputs[0].target;
-    const sourceNode = editor.getNode(source);
-    const targetNode = editor.getNode(target);
-    [...outputs, ...inputs].forEach((connection) => __awaiter(void 0, void 0, void 0, function* () {
-        yield editor.removeConnection(connection.id);
-    }));
-    if (!sourceNode || !targetNode) {
-        return;
-    }
-    const connection = new Connection(sourceNode, `${sourceNode.id}-output`, targetNode, `${targetNode.id}-input`);
-    yield editor.addConnection(connection);
-});
-
-function serializePort(port) {
-    return {
-        id: port.id,
-        label: port.label,
-        socket: {
-            name: port.socket.name,
-        },
-    };
-}
-function serializeControl(control) {
-    if (control instanceof ClassicPreset.InputControl) {
-        return {
-            __type: 'ClassicPreset.InputControl',
-            id: control.id,
-            readonly: control.readonly,
-            type: control.type,
-            value: control.value,
-        };
-    }
-    return null;
-}
-
 class DiagramService {
     /**
      *
@@ -28689,6 +28840,9 @@ class DiagramService {
         this.destroy = editor.destroy;
         this.fitToZoom = editor.fitToZoom;
     }
+    diagramClientRect() {
+        return this.plugins.area.container.getBoundingClientRect();
+    }
     getContentNodes() {
         return this.editor
             .getNodes()
@@ -28713,10 +28867,22 @@ class DiagramService {
     createNode(type = NODE_TYPE.content, config) {
         const _node = initNodeByType(type, config);
         if (config.type !== NODE_TYPE.start) {
-            this.createInputs(_node);
+            this.createInput(_node, DiagramUtils.createInputId(_node.id), {
+                styleClass: DiagramUtils.createInputClass()
+            });
         }
         if (config.type !== NODE_TYPE.end) {
-            this.createOutputs(_node);
+            this.createOutput(_node, DiagramUtils.createOutputId(_node.id), {
+                styleClass: DiagramUtils.createOutputClass()
+            });
+        }
+        if (config.type === NODE_TYPE.gateway) {
+            this._creteGatewayOutput(_node);
+        }
+        if ([NODE_TYPE.content, NODE_TYPE.template].includes(config.type)) {
+            const contentPorts = ['secondary', 'tertiary', 'quaternary'];
+            DiagramUtils.createInputsConfig(_node.id, contentPorts).forEach(({ id, config }) => this.createInput(_node, id, config));
+            DiagramUtils.createOutputsConfig(_node.id, contentPorts).forEach(({ id, config }) => this.createOutput(_node, id, config));
         }
         _node.notify = this.notifyListener(_node);
         return _node;
@@ -28729,6 +28895,18 @@ class DiagramService {
         const _isExist = _nodes.some((nd) => nd.type === NODE_TYPE.start);
         return !_isExist;
     }
+    getNode(id) {
+        return this.editor.getNode(id);
+    }
+    getNodes() {
+        return this.editor.getNodes();
+    }
+    getConnections() {
+        return this.editor.getConnections();
+    }
+    getConnection(id) {
+        return this.editor.getConnection(id);
+    }
     getLastNode() {
         const nodes = this.editor.getNodes();
         return nodes.length ? nodes[nodes.length - 1] : null;
@@ -28736,27 +28914,35 @@ class DiagramService {
     getNodesByType(type) {
         return this.editor.getNodes().filter((nd) => nd.type === type);
     }
+    getViewNodes() {
+        return Array.from(this.plugins.area.nodeViews.values());
+    }
     getLastViewNode() {
-        const nodes = Array.from(this.plugins.area.nodeViews.values());
+        const nodes = this.getViewNodes();
         return nodes.length ? nodes[nodes.length - 1] : null;
     }
-    createInputs(node) {
-        node.addInput(`${node.id}-input`, new ClassicPreset.Input(this.socket));
+    getViewNode(id) {
+        return this.plugins.area.nodeViews.get(id);
+    }
+    getViewNodePosition(id) {
+        const node = this.getViewNode(id);
+        return node ? node.position : null;
+    }
+    createInput(node, id = `${node.id}-input`, config) {
+        node.addInput(id, new InputPort(Object.assign({ socket: this.socket }, config)));
         return node;
     }
-    createOutputs(node) {
-        node.addOutput(`${node.id}-output`, new ClassicPreset.Output(this.socket, '', false));
+    createOutput(node, id = `${node.id}-output`, config) {
+        node.addOutput(id, new OutputPort(Object.assign({ socket: this.socket }, config)));
         return node;
     }
-    addConnection(sourceNode, targetNode) {
+    addConnection(sourceNode, targetNode, config) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.editor.addConnection(this.createConnection(sourceNode, targetNode));
+            yield this.editor.addConnection(this.createConnection(sourceNode, targetNode, config));
         });
     }
-    createConnection(sourceNode, targetNode) {
-        const connection = new Connection(sourceNode, `${sourceNode.id}-output`, targetNode, `${targetNode.id}-input`);
-        connection.status = targetNode.status;
-        return connection;
+    createConnection(sourceNode, targetNode, config) {
+        return new Connection(sourceNode, targetNode, config);
     }
     appendConnection(connection) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -28777,11 +28963,36 @@ class DiagramService {
         return (eventType, payload) => {
             var _a;
             const _actions = {
-                [NOTIFY_EVENT.remove]: this._removeNode.bind(this),
+                [NOTIFY_EVENT.remove]: this._removeNode.bind(this)
             };
             return (_a = _actions[eventType]) === null || _a === void 0 ? void 0 : _a.call(_actions, payload);
         };
     }
+    translateView() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { container, area } = this.plugins.area;
+            const rect = container.getBoundingClientRect();
+            const k = area.transform.k;
+            const delta = -0.2;
+            const ox = Math.max(0, (rect.left - container.clientWidth / 2) * k);
+            const oy = Math.max(0, (rect.top - container.clientHeight / 2) * k);
+            area.zoom(Math.max(0.1, k * (1 + delta)), ox * delta, oy * delta);
+        });
+    }
+    removeEndNode() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const node = this.getNodesByType(NODE_TYPE.end)[0];
+            if (node) {
+                yield removeNodeAndConnections(node, this.editor);
+            }
+        });
+    }
+    _creteGatewayOutput(_node) {
+        DiagramUtils.createOutputsConfig(_node.id, [
+            'secondary',
+            'tertiary'
+        ]).forEach((input) => this.createOutput(_node, input.id, input === null || input === void 0 ? void 0 : input.config));
+    }
     _removeNode(data) {
         return __awaiter(this, void 0, void 0, function* () {
             const node = this.editor.getNode(data.nodeId);
@@ -28819,17 +29030,6 @@ class DiagramService {
             this.plugins.readonly.enable();
         });
     }
-    translateView() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { container, area } = this.plugins.area;
-            const rect = container.getBoundingClientRect();
-            const k = area.transform.k;
-            const delta = -0.2;
-            const ox = Math.max(0, (rect.left - container.clientWidth / 2) * k);
-            const oy = Math.max(0, (rect.top - container.clientHeight / 2) * k);
-            area.zoom(Math.max(0.1, k * (1 + delta)), ox * delta, oy * delta);
-        });
-    }
 }
 DiagramService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramService, deps: [{ token: DiagramPluginsService }], target: i0.ɵɵFactoryTarget.Injectable });
 DiagramService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramService });
@@ -28868,9 +29068,6 @@ class WorkflowService {
         this._defaultNodeMargin = NODE_MARGIN;
         this._offset = 60;
     }
-    get _diagramClientRect() {
-        return this._plugins.area.container.getBoundingClientRect();
-    }
     setConfig(_config) {
         this._config = _config;
         this._message.sendMessage(MESSAGE_TYPE.configUpdated, _config);
@@ -28912,10 +29109,7 @@ class WorkflowService {
     }
     removeEndNode() {
         return __awaiter(this, void 0, void 0, function* () {
-            const node = this._diagram.getNodesByType(NODE_TYPE.end)[0];
-            if (node) {
-                yield removeNodeAndConnections(node, this._diagram.editor);
-            }
+            yield this._diagram.removeEndNode();
         });
     }
     /**
@@ -28928,7 +29122,7 @@ class WorkflowService {
         const isEndNode = _node.type === NODE_TYPE.end;
         return {
             x: this._calculatePositionX(lastNode.node.type, lastNode.viewNode.position.x),
-            y: this._calculatePositionY(isEndNode ? NODE_TYPE.end : lastNode.node.type, lastNode.viewNode.position.y),
+            y: this._calculatePositionY(isEndNode ? NODE_TYPE.end : lastNode.node.type, lastNode.viewNode.position.y)
         };
     }
     _createNode(nodeType, data, config) {
@@ -28946,7 +29140,8 @@ class WorkflowService {
                     return this._changeNodeSocketPosition(context);
                 }
             }
-            if (context.type === 'nodecreated' && context.data.type !== NODE_TYPE.end) {
+            if (context.type === 'nodecreated' &&
+                context.data.type !== NODE_TYPE.end) {
                 setTimeout(() => {
                     this._updateNodePosition(context);
                 });
@@ -28965,12 +29160,12 @@ class WorkflowService {
         }
         return Object.assign({}, context);
     }
-    _linkToLastNode(_addedNode) {
+    _linkToLastNode(_addedNode, connectionConfig) {
         return __awaiter(this, void 0, void 0, function* () {
             let node = this._diagram.getLastNode();
             let viewNode = this._diagram.getLastViewNode();
             if (node && viewNode) {
-                yield this._diagram.addConnection(node, _addedNode);
+                yield this._diagram.addConnection(node, _addedNode, connectionConfig);
                 return { node, viewNode };
             }
             return null;
@@ -28999,7 +29194,7 @@ class WorkflowService {
             const startNode = this._diagram.createNode(NODE_TYPE.start, {
                 type: NODE_TYPE.start,
                 label: NODE_TYPE.start,
-                name: 'start',
+                name: 'start'
             });
             yield this._diagram.addNode(startNode);
             yield this._plugins.area.translate(startNode.id, position);
@@ -29040,7 +29235,7 @@ class WorkflowService {
      */
     _isOverEndBoundary(node, previousNode) {
         var _a;
-        const _diagramWidth = Number((_a = this._diagramClientRect) === null || _a === void 0 ? void 0 : _a.width) - this._defaultNodeMargin;
+        const _diagramWidth = Number((_a = this._diagram.diagramClientRect()) === null || _a === void 0 ? void 0 : _a.width) - this._defaultNodeMargin;
         const _width = previousNode.position.x + (node.width + this._defaultNodeMargin) * 2;
         return _width >= _diagramWidth;
     }
@@ -29055,7 +29250,8 @@ class WorkflowService {
             this._defaultNodeWidth +
             this._defaultNodeMargin * 2 +
             this._offset;
-        const wrapLine = Number((_a = this._diagramClientRect) === null || _a === void 0 ? void 0 : _a.width) - this._defaultNodeWidth * 2;
+        const wrapLine = Number((_a = this._diagram.diagramClientRect()) === null || _a === void 0 ? void 0 : _a.width) -
+            this._defaultNodeWidth * 2;
         return currentPosition >= wrapLine;
     }
     _updateNodePosition(context) {
@@ -29064,7 +29260,7 @@ class WorkflowService {
             const _previousNode = this._diagram.getLastNode();
             const _nodeViewPosition = (_a = this._plugins.area.nodeViews.get(context.data.id)) === null || _a === void 0 ? void 0 : _a.position;
             if (_previousNode && _nodeViewPosition) {
-                const _diagramWidth = Number((_b = this._diagramClientRect) === null || _b === void 0 ? void 0 : _b.width);
+                const _diagramWidth = Number((_b = this._diagram.diagramClientRect()) === null || _b === void 0 ? void 0 : _b.width);
                 const _currentX = _nodeViewPosition.x + context.data.width;
                 if (_currentX >= _diagramWidth) {
                     this._plugins.readonly.disable();
@@ -29078,7 +29274,7 @@ class WorkflowService {
                     }
                     yield this._plugins.area.translate(context.data.id, {
                         x: x,
-                        y: _nodeViewPosition.y + this._defaultNodeMargin + context.data.height,
+                        y: _nodeViewPosition.y + this._defaultNodeMargin + context.data.height
                     });
                     this._plugins.readonly.enable();
                 }
@@ -29127,114 +29323,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-class RemoveButtonComponent {
-    constructor() {
-        this.remove = new EventEmitter();
-    }
-}
-RemoveButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RemoveButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RemoveButtonComponent, selector: "node-remove-button", outputs: { remove: "remove" }, ngImport: i0, template: `
-    <button
-      mat-icon-button
-      (click)="remove.emit()"
-      (pointerdown)="$event.stopPropagation()"
-      (dblclick)="$event.stopPropagation()"
-      class="remove-icon"
-    >
-      <mat-icon>close</mat-icon>
-    </button>
-  `, isInline: true, styles: ["\n      :host {\n        --size: var(--remove-icon-size, 30px);\n        position: var(--remove-icon-position, absolute);\n        inset: var(--remove-icon-inset, 0 0 auto auto);\n        opacity: var(--remove-icon-opacity, 0);\n        background: var(--remove-icon-background, inherit);\n        width: var(--size);\n        height: var(--size);\n        line-height: var(var(--remove-icon-size), calc(var(--size) - 6));\n        border-radius: 50%;\n        z-index: 2;\n        .remove-icon {\n          border: 1px solid currentColor;\n          border-radius: 50%;\n          width: var(--size);\n          height: var(--size);\n          line-height: var(--remove-icon-size, 30px);\n          background: var(--remove-icon-background, inherit);\n        }\n      }\n    "], components: [{ type: i1$8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'node-remove-button',
-                    template: `
-    <button
-      mat-icon-button
-      (click)="remove.emit()"
-      (pointerdown)="$event.stopPropagation()"
-      (dblclick)="$event.stopPropagation()"
-      class="remove-icon"
-    >
-      <mat-icon>close</mat-icon>
-    </button>
-  `,
-                    styles: [
-                        `
-      :host {
-        --size: var(--remove-icon-size, 30px);
-        position: var(--remove-icon-position, absolute);
-        inset: var(--remove-icon-inset, 0 0 auto auto);
-        opacity: var(--remove-icon-opacity, 0);
-        background: var(--remove-icon-background, inherit);
-        width: var(--size);
-        height: var(--size);
-        line-height: var(var(--remove-icon-size), calc(var(--size) - 6));
-        border-radius: 50%;
-        z-index: 2;
-        .remove-icon {
-          border: 1px solid currentColor;
-          border-radius: 50%;
-          width: var(--size);
-          height: var(--size);
-          line-height: var(--remove-icon-size, 30px);
-          background: var(--remove-icon-background, inherit);
-        }
-      }
-    `,
-                    ],
-                }]
-        }], propDecorators: { remove: [{
-                type: Output
-            }] } });
-
-class NodeInputsComponent {
-}
-NodeInputsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeInputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NodeInputsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeInputsComponent, selector: "node-inputs", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": " 'da-node__inputs inputs-' + direction" } }, ngImport: i0, template: `
-    <div
-      *ngFor="let input of data.inputs | keyvalue : sortByIndex"
-      class="da-node__inputs__socket"
-      style=" height: var(--socket-size, 16px);"
-      refComponent
-      [data]="{
-        type: 'socket',
-        side: 'input',
-        key: input.key,
-        nodeId: data.id,
-        payload: input.value?.socket,
-        seed: seed
-      }"
-      [emit]="emit"
-    ></div>
-  `, isInline: true, directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4$1.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeInputsComponent, decorators: [{
+class NodePortsComponent {
+}
+NodePortsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodePortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NodePortsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodePortsComponent, selector: "node-ports", inputs: { inputsDirection: "inputsDirection", outputsDirection: "outputsDirection", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": "'node-ports--inputs--' + inputsDirection + ' ' + 'node-ports--outputs--' + outputsDirection " }, classAttribute: "node-ports" }, ngImport: i0, template: `
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="node-port node-port--input  {{ input.value.styleClass }}"
+			refComponent
+			[title]="input.value.styleClass"
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+
+		<div
+			*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+			class="node-port node-port--output  {{ output.value.styleClass }}"
+			refComponent
+			[title]="output.value.styleClass"
+			[data]="{
+				type: 'socket',
+				side: 'output',
+				key: output.key,
+				nodeId: data.id,
+				payload: output.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`, isInline: true, styles: [".node-ports{--port-size: 16px;position:absolute;width:100%;height:100%}.node-port{position:absolute;inset-inline:var(--port-inset-inline);inset-block:var(--port-inset-block);display:inline-block;width:var(--port-size);height:var(--port-size)}.node-ports--inputs--start .input-primary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--start .input-secondary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--start .input-tertiary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--start .input-quaternary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--end .input-primary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--end .input-secondary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--end .input-tertiary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--end .input-quaternary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--top .input-primary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--top .input-secondary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--top .input-tertiary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--top .input-quaternary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--bottom .input-primary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--bottom .input-secondary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--bottom .input-tertiary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--bottom .input-quaternary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--outputs--top .output-primary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--top .output-secondary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--top .output-tertiary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--top .output-quaternary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--bottom .output-primary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--bottom .output-secondary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--bottom .output-tertiary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--bottom .output-quaternary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-primary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-secondary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--start .output-tertiary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-quaternary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--end .output-primary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--end .output-secondary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--end .output-tertiary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--end .output-quaternary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}\n"], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4$1.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodePortsComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'node-inputs',
+                    selector: 'node-ports',
                     encapsulation: ViewEncapsulation.None,
+                    styleUrls: ['../styles/ports.scss'],
                     host: {
-                        '[class]': " 'da-node__inputs inputs-' + direction",
+                        class: 'node-ports',
+                        '[class]': "'node-ports--inputs--' + inputsDirection + ' ' + 'node-ports--outputs--' + outputsDirection "
                     },
                     template: `
-    <div
-      *ngFor="let input of data.inputs | keyvalue : sortByIndex"
-      class="da-node__inputs__socket"
-      style=" height: var(--socket-size, 16px);"
-      refComponent
-      [data]="{
-        type: 'socket',
-        side: 'input',
-        key: input.key,
-        nodeId: data.id,
-        payload: input.value?.socket,
-        seed: seed
-      }"
-      [emit]="emit"
-    ></div>
-  `,
-                }]
-        }], propDecorators: { direction: [{
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="node-port node-port--input  {{ input.value.styleClass }}"
+			refComponent
+			[title]="input.value.styleClass"
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+
+		<div
+			*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+			class="node-port node-port--output  {{ output.value.styleClass }}"
+			refComponent
+			[title]="output.value.styleClass"
+			[data]="{
+				type: 'socket',
+				side: 'output',
+				key: output.key,
+				nodeId: data.id,
+				payload: output.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`
+                }]
+        }], propDecorators: { inputsDirection: [{
+                type: Input
+            }], outputsDirection: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -29246,64 +29417,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-class NodeOutputsComponent {
+class RemoveButtonComponent {
+    constructor() {
+        this.remove = new EventEmitter();
+    }
 }
-NodeOutputsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeOutputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NodeOutputsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeOutputsComponent, selector: "node-outputs", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": " 'da-node__outputs outputs-' + direction" } }, ngImport: i0, template: `<div
-    class="da-node__outputs__socket"
-    style=" height: var(--socket-size, 16px);"
-    *ngFor="let output of data.outputs | keyvalue : sortByIndex"
-    refComponent
-    [data]="{
-      type: 'socket',
-      side: 'output',
-      key: output.key,
-      nodeId: data.id,
-      payload: output.value?.socket,
-      seed: seed
-    }"
-    [emit]="emit"
-  ></div>`, isInline: true, directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4$1.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeOutputsComponent, decorators: [{
+RemoveButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RemoveButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RemoveButtonComponent, selector: "node-remove-button", outputs: { remove: "remove" }, ngImport: i0, template: `
+		<button
+			mat-icon-button
+			(click)="remove.emit()"
+			(pointerdown)="$event.stopPropagation()"
+			(dblclick)="$event.stopPropagation()"
+			class="remove-icon"
+		>
+			<mat-icon>close</mat-icon>
+		</button>
+	`, isInline: true, styles: ["\n\t\t\t:host {\n\t\t\t\t--size: var(--remove-icon-size, 30px);\n\t\t\t\tposition: var(--remove-icon-position, absolute);\n\t\t\t\tinset: var(--remove-icon-inset, 0 0 auto auto);\n\t\t\t\topacity: var(--remove-icon-opacity, 0);\n\t\t\t\tbackground: var(--remove-icon-background, #fff);\n\t\t\t\twidth: var(--size);\n\t\t\t\theight: var(--size);\n\t\t\t\tline-height: var(var(--remove-icon-size), calc(var(--size) - 6));\n\t\t\t\tborder-radius: var(--remove-icon-radius, 50%);\n\t\t\t\tz-index: 2;\n\t\t\t\t.remove-icon {\n\t\t\t\t\tborder: 1px solid currentColor;\n\t\t\t\t\tborder-radius: var(--remove-icon-radius, 50%);\n\t\t\t\t\twidth: var(--size);\n\t\t\t\t\theight: var(--size);\n\t\t\t\t\tline-height: var(--remove-icon-size, 24px);\n\t\t\t\t\tbackground: var(--remove-icon-background, #fff);\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\t\t\t}\n\t\t"], components: [{ type: i1$8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveButtonComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'node-outputs',
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': " 'da-node__outputs outputs-' + direction",
-                    },
-                    template: `<div
-    class="da-node__outputs__socket"
-    style=" height: var(--socket-size, 16px);"
-    *ngFor="let output of data.outputs | keyvalue : sortByIndex"
-    refComponent
-    [data]="{
-      type: 'socket',
-      side: 'output',
-      key: output.key,
-      nodeId: data.id,
-      payload: output.value?.socket,
-      seed: seed
-    }"
-    [emit]="emit"
-  ></div>`,
+                    selector: 'node-remove-button',
+                    template: `
+		<button
+			mat-icon-button
+			(click)="remove.emit()"
+			(pointerdown)="$event.stopPropagation()"
+			(dblclick)="$event.stopPropagation()"
+			class="remove-icon"
+		>
+			<mat-icon>close</mat-icon>
+		</button>
+	`,
+                    styles: [
+                        `
+			:host {
+				--size: var(--remove-icon-size, 30px);
+				position: var(--remove-icon-position, absolute);
+				inset: var(--remove-icon-inset, 0 0 auto auto);
+				opacity: var(--remove-icon-opacity, 0);
+				background: var(--remove-icon-background, #fff);
+				width: var(--size);
+				height: var(--size);
+				line-height: var(var(--remove-icon-size), calc(var(--size) - 6));
+				border-radius: var(--remove-icon-radius, 50%);
+				z-index: 2;
+				.remove-icon {
+					border: 1px solid currentColor;
+					border-radius: var(--remove-icon-radius, 50%);
+					width: var(--size);
+					height: var(--size);
+					line-height: var(--remove-icon-size, 24px);
+					background: var(--remove-icon-background, #fff);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+		`
+                    ]
                 }]
-        }], propDecorators: { direction: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], seed: [{
-                type: Input
-            }], emit: [{
-                type: Input
-            }], sortByIndex: [{
-                type: Input
+        }], propDecorators: { remove: [{
+                type: Output
             }] } });
 
 class CircleNodeComponent extends BaseNodeComponent {
 }
 CircleNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CircleNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CircleNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CircleNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"da-node da-node--{{ data.type }} circle-node circle-node--{{ data.type }} {{\r\n    data?.status ? ' da-node--' + data?.status : ''\r\n  }} \"\r\n  [style.--node-width]=\"data.width + 'px'\"\r\n  [style.--node-height]=\"data.width + 'px'\"\r\n>\r\n  <node-remove-button\r\n    (remove)=\"removeNode()\"\r\n    *ngIf=\"data.config?.canRemove\"\r\n  ></node-remove-button>\r\n\r\n  <div\r\n    class=\"da-node__title circle-node__title\"\r\n    [attr.tooltip]=\"data.content?.data?.tooltip\"\r\n    [class.node-tooltip]=\"!!data.content?.data?.tooltip\"\r\n  >\r\n    {{ 'diagram.' + data.name | translate }}\r\n  </div>\r\n\r\n  <node-inputs\r\n    [direction]=\"data.directions.inputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-inputs>\r\n\r\n  <node-outputs\r\n    [direction]=\"data.directions.outputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-outputs>\r\n</div>\r\n", styles: [".da-node{--width: var(--node-width);--height: var(--node-height);--socket-offset-negative: 0;--socket-position-start: var(--socket-offset-negative) auto;--socket-position-end: auto var(--socket-offset-negative);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer)}.da-node--draft{--node-color: var(--status-draft-color, #555);--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var(--status-draft-border, 1px solid #555);--node-shadow: var(--status-draft-shadow, unset)}.da-node--upcoming{--node-color: var(--status-upcoming-color, var(--Primary-100, #234990));--node-background: var( --status-upcoming-background, #fff );--node-border: var(--status-upcoming-border, 1px solid var(--node-color, #234990));--node-shadow: var(--status-upcoming-shadow, unset)}.da-node--inProgress{--node-color: var(--status-progress-color, var(--orange-color, #f29339));--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var(--status-progress-border, 1px solid var(--orange-color, #f29339));--node-shadow: var(--status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)))}.da-node--completed{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--approved{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--rejected{--node-color: var(--status-rejected-color, var(--red-color, #bf0b30));--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var(--status-rejected-border, 1px solid var(--red-color, #bf0b30));--node-shadow: var(--status-rejected-shadow, unset)}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node__inputs,.da-node__outputs{position:var(--input-output-position, absolute);inset-inline:var(--in-out-inset-inline);inset-block:var(--in-out-inset-block);height:var(--socket-size, 16px)}.da-node__inputs__socket,.da-node__outputs__socket{height:var(--socket-size, 16px)}.da-node__inputs.inputs-top{--in-out-inset-block: var(--socket-position-start)}.da-node__inputs.inputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__inputs.inputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__inputs.inputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node__outputs.outputs-top{--in-out-inset-block: var(--socket-offset-negative)}.da-node__outputs.outputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__outputs.outputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__outputs.outputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", ".circle-node{--node-radius: 50%}.circle-node__title.node-tooltip:after{content:attr(tooltip);position:absolute;left:50%;top:-6px;transform:translate(-50%) translateY(-100%);background:rgba(0,0,0,.7);text-align:center;color:#fff;padding:4px 2px;font-size:12px;min-width:100px;border-radius:5px;pointer-events:none;display:var(--tooltip-display, none)}.circle-node:hover{--tooltip-display: block}.da-node--end{border-width:3px}\n"], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: NodeInputsComponent, selector: "node-inputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }, { type: NodeOutputsComponent, selector: "node-outputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe } });
+CircleNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CircleNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n\tclass=\"da-node da-node--{{ data.type }} circle-node circle-node--{{\r\n\t\tdata.type\r\n\t}} {{ data?.status ? ' da-node--' + data?.status : '' }} \"\r\n\t[style.--node-width]=\"data.width + 'px'\"\r\n\t[style.--node-height]=\"data.width + 'px'\"\r\n>\r\n\t<node-ports\r\n\t\t[inputsDirection]=\"data.directions.inputs\"\r\n\t\t[outputsDirection]=\"data.directions.outputs\"\r\n\t\t[data]=\"data\"\r\n\t\t[seed]=\"seed\"\r\n\t\t[emit]=\"emit\"\r\n\t\t[sortByIndex]=\"sortByIndex\"\r\n\t></node-ports>\r\n\r\n\t<div class=\"da-node__content circle-node__content\">\r\n\t\t<node-remove-button\r\n\t\t\t(remove)=\"removeNode()\"\r\n\t\t\t*ngIf=\"data.config?.canRemove\"\r\n\t\t></node-remove-button>\r\n\r\n\t\t<div\r\n\t\t\tclass=\"da-node__title circle-node__title\"\r\n\t\t\t[attr.tooltip]=\"data.content?.data?.tooltip\"\r\n\t\t\t[class.node-tooltip]=\"!!data.content?.data?.tooltip\"\r\n\t\t>\r\n\t\t\t{{ 'diagram.' + data.name | translate }}\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [".da-node{--socket-size: 16px;--width: var(--node-width);--height: var(--node-height);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer);z-index:var(--node-z-index, 1)}.da-node--draft{--node-color: var( --status-draft-color, #555 );--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var( --status-draft-border, 1px solid #555 );--node-shadow: var( --status-draft-shadow, unset )}.da-node--upcoming{--node-color: var( --status-upcoming-color, var(--Primary-100, #234990) );--node-background: var( --status-upcoming-background, #fff );--node-border: var( --status-upcoming-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-upcoming-shadow, unset )}.da-node--ready{--node-color: var( --status-ready-color, var(--Primary-100, #234990) );--node-background: var( --status-ready-background, #fff );--node-border: var( --status-ready-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-ready-shadow, unset )}.da-node--suspended{--node-color: var( --status-suspended-color, var(--orange-color, #f29339) );--node-background: var( --status-suspended-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-suspended-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-suspended-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--inProgress{--node-color: var( --status-progress-color, var(--orange-color, #f29339) );--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-progress-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--completed{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--approved{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--rejected{--node-color: var( --status-rejected-color, var(--red-color, #bf0b30) );--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-rejected-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-rejected-shadow, unset )}.da-node--canceled{--node-color: var( --status-canceled-color, var(--red-color, #bf0b30) );--node-background: var( --status-canceled-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-canceled-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-canceled-shadow, unset )}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__content{width:calc(100% - var(--socket-size));height:calc(100% - var(--socket-size));display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);z-index:var(--node-z-index, 1)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", ".circle-node{--node-radius: 50%}.circle-node__title.node-tooltip:after{content:attr(tooltip);position:absolute;left:50%;top:-6px;transform:translate(-50%) translateY(-100%);background:rgba(0,0,0,.7);text-align:center;color:#fff;padding:4px 2px;font-size:12px;min-width:100px;border-radius:5px;pointer-events:none;display:var(--tooltip-display, none)}.circle-node:hover{--tooltip-display: block}.da-node--end{border-width:3px}\n"], components: [{ type: NodePortsComponent, selector: "node-ports", inputs: ["inputsDirection", "outputsDirection", "data", "seed", "emit", "sortByIndex"] }, { type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CircleNodeComponent, decorators: [{
             type: Component,
             args: [{
@@ -29312,6 +29493,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+class ConnectionLabelComponent {
+    constructor(_zone) {
+        this._zone = _zone;
+        this.transformStyle = '';
+        this.observer = new MutationObserver(() => {
+            this.calculatePosition();
+        });
+    }
+    ngAfterViewInit() {
+        if (!this.path) {
+            return;
+        }
+        this._zone.runOutsideAngular(() => {
+            this.observer.observe(this.path, {
+                attributes: true
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.observer.disconnect();
+    }
+    calculatePosition() {
+        const positionPoint = this._getPositionPoint();
+        this.labelContainer.nativeElement.style.transform = `translate(${positionPoint.x}px, ${positionPoint.y}px)`;
+    }
+    _getPositionPoint() {
+        const pathLength = this.path.getTotalLength();
+        const textWidth = 12 * `${this.text}`.length;
+        return this.position === 'center'
+            ? this.path.getPointAtLength(pathLength / 2)
+            : this.path.getPointAtLength((this.position === 'start' ? 0 : pathLength) +
+                (this.position === 'end' ? -1 : 1) * (textWidth / 2 + 20));
+    }
+}
+ConnectionLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConnectionLabelComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ConnectionLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ConnectionLabelComponent, selector: "app-connection-label", inputs: { path: "path", position: "position", text: "text" }, viewQueries: [{ propertyName: "labelContainer", first: true, predicate: ["labelContainer"], descendants: true, static: true }], ngImport: i0, template: ` <div
+		#labelContainer
+		[ngStyle]="{
+			position: 'absolute',
+			top: '0',
+			left: '0',
+			zIndex: ' var(--label-z-index, -1)'
+		}"
+	>
+		<div [ngClass]="{ 'label-text': !!text }">{{ text }}</div>
+	</div>`, isInline: true, styles: ["\n\t\t\t.label-text {\n\t\t\t\tposition: absolute;\n\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\tbackground: var(--c-label-background, #fff);\n\t\t\t\tcolor: var(--c-label-color, #333);\n\t\t\t\tborder-radius: var(--c-label-radius, 2em);\n\t\t\t\tpadding: var(--c-label-padding, 0.2em 0.6em);\n\t\t\t\tfont-size: var(--c-label-size, 0.7rem);\n\t\t\t\tborder: var(--c-label-border, 1px solid var(--path-color, #1b3e7f));\n\t\t\t\tz-index: var(--c-label-z-index, 0);\n\t\t\t\twhite-space: pre;\n\t\t\t}\n\t\t"], directives: [{ type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConnectionLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-connection-label',
+                    template: ` <div
+		#labelContainer
+		[ngStyle]="{
+			position: 'absolute',
+			top: '0',
+			left: '0',
+			zIndex: ' var(--label-z-index, -1)'
+		}"
+	>
+		<div [ngClass]="{ 'label-text': !!text }">{{ text }}</div>
+	</div>`,
+                    styles: [
+                        `
+			.label-text {
+				position: absolute;
+				transform: translate(-50%, -50%);
+				background: var(--c-label-background, #fff);
+				color: var(--c-label-color, #333);
+				border-radius: var(--c-label-radius, 2em);
+				padding: var(--c-label-padding, 0.2em 0.6em);
+				font-size: var(--c-label-size, 0.7rem);
+				border: var(--c-label-border, 1px solid var(--path-color, #1b3e7f));
+				z-index: var(--c-label-z-index, 0);
+				white-space: pre;
+			}
+		`
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { path: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], labelContainer: [{
+                type: ViewChild,
+                args: ['labelContainer', { static: true }]
+            }] } });
+
 class StatusIconComponent {
     getIcon() {
         switch (this.status) {
@@ -29379,7 +29649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class ContentNodeComponent extends BaseNodeComponent {
 }
 ContentNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ContentNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ContentNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ContentNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"da-node da-node--{{ data.type }} {{\r\n    data?.status ? ' da-node--' + data?.status : ''\r\n  }}  {{ data?.styleClass }}\"\r\n  [style.--node-width]=\"data.width + 'px'\"\r\n  [style.--node-height]=\"data.height + 'px'\"\r\n>\r\n  <node-remove-button (remove)=\"removeNode()\" *ngIf=\"data?.config?.canRemove\">\r\n  </node-remove-button>\r\n\r\n  <status-icon [status]=\"data?.status\" *ngIf=\"data?.status\"></status-icon>\r\n\r\n  <node-icon *ngIf=\"data.content?.icon\" [icon]=\"data.content?.icon\"></node-icon>\r\n\r\n  <div class=\"da-node__title\">{{ data.name }}</div>\r\n  <div class=\"da-node__description\" *ngIf=\"data.description\">\r\n    {{ data.description }}\r\n  </div>\r\n  <node-inputs\r\n    [direction]=\"data.directions.inputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-inputs>\r\n\r\n  <node-outputs\r\n    [direction]=\"data.directions.outputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-outputs>\r\n</div>\r\n", styles: [".da-node{--width: var(--node-width);--height: var(--node-height);--socket-offset-negative: 0;--socket-position-start: var(--socket-offset-negative) auto;--socket-position-end: auto var(--socket-offset-negative);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer)}.da-node--draft{--node-color: var(--status-draft-color, #555);--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var(--status-draft-border, 1px solid #555);--node-shadow: var(--status-draft-shadow, unset)}.da-node--upcoming{--node-color: var(--status-upcoming-color, var(--Primary-100, #234990));--node-background: var( --status-upcoming-background, #fff );--node-border: var(--status-upcoming-border, 1px solid var(--node-color, #234990));--node-shadow: var(--status-upcoming-shadow, unset)}.da-node--inProgress{--node-color: var(--status-progress-color, var(--orange-color, #f29339));--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var(--status-progress-border, 1px solid var(--orange-color, #f29339));--node-shadow: var(--status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)))}.da-node--completed{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--approved{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--rejected{--node-color: var(--status-rejected-color, var(--red-color, #bf0b30));--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var(--status-rejected-border, 1px solid var(--red-color, #bf0b30));--node-shadow: var(--status-rejected-shadow, unset)}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node__inputs,.da-node__outputs{position:var(--input-output-position, absolute);inset-inline:var(--in-out-inset-inline);inset-block:var(--in-out-inset-block);height:var(--socket-size, 16px)}.da-node__inputs__socket,.da-node__outputs__socket{height:var(--socket-size, 16px)}.da-node__inputs.inputs-top{--in-out-inset-block: var(--socket-position-start)}.da-node__inputs.inputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__inputs.inputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__inputs.inputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node__outputs.outputs-top{--in-out-inset-block: var(--socket-offset-negative)}.da-node__outputs.outputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__outputs.outputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__outputs.outputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n"], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: StatusIconComponent, selector: "status-icon", inputs: ["status"] }, { type: NodeIconComponent, selector: "node-icon", inputs: ["icon"] }, { type: NodeInputsComponent, selector: "node-inputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }, { type: NodeOutputsComponent, selector: "node-outputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ContentNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ContentNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n\tclass=\"da-node da-node--{{ data.type }} {{\r\n\t\tdata?.status ? ' da-node--' + data?.status : ''\r\n\t}}  {{ data?.styleClass }}\"\r\n\t[style.--node-width]=\"data.width + 'px'\"\r\n\t[style.--node-height]=\"data.height + 'px'\"\r\n>\r\n\t<node-ports\r\n\t\t[inputsDirection]=\"data.directions.inputs\"\r\n\t\t[outputsDirection]=\"data.directions.outputs\"\r\n\t\t[data]=\"data\"\r\n\t\t[seed]=\"seed\"\r\n\t\t[emit]=\"emit\"\r\n\t\t[sortByIndex]=\"sortByIndex\"\r\n\t></node-ports>\r\n\r\n\t<div class=\"da-node__content\">\r\n\t\t<node-remove-button (remove)=\"removeNode()\" *ngIf=\"data?.config?.canRemove\">\r\n\t\t</node-remove-button>\r\n\t\t<status-icon [status]=\"data?.status\" *ngIf=\"data?.status\"></status-icon>\r\n\r\n\t\t<node-icon\r\n\t\t\t*ngIf=\"data.content?.icon\"\r\n\t\t\t[icon]=\"data.content?.icon\"\r\n\t\t></node-icon>\r\n\r\n\t\t<div class=\"da-node__title\">{{ data.name }}</div>\r\n\t\t<div class=\"da-node__description\" *ngIf=\"data.description\">\r\n\t\t\t{{ data.description }}\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [".da-node{--socket-size: 16px;--width: var(--node-width);--height: var(--node-height);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer);z-index:var(--node-z-index, 1)}.da-node--draft{--node-color: var( --status-draft-color, #555 );--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var( --status-draft-border, 1px solid #555 );--node-shadow: var( --status-draft-shadow, unset )}.da-node--upcoming{--node-color: var( --status-upcoming-color, var(--Primary-100, #234990) );--node-background: var( --status-upcoming-background, #fff );--node-border: var( --status-upcoming-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-upcoming-shadow, unset )}.da-node--ready{--node-color: var( --status-ready-color, var(--Primary-100, #234990) );--node-background: var( --status-ready-background, #fff );--node-border: var( --status-ready-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-ready-shadow, unset )}.da-node--suspended{--node-color: var( --status-suspended-color, var(--orange-color, #f29339) );--node-background: var( --status-suspended-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-suspended-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-suspended-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--inProgress{--node-color: var( --status-progress-color, var(--orange-color, #f29339) );--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-progress-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--completed{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--approved{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--rejected{--node-color: var( --status-rejected-color, var(--red-color, #bf0b30) );--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-rejected-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-rejected-shadow, unset )}.da-node--canceled{--node-color: var( --status-canceled-color, var(--red-color, #bf0b30) );--node-background: var( --status-canceled-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-canceled-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-canceled-shadow, unset )}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__content{width:calc(100% - var(--socket-size));height:calc(100% - var(--socket-size));display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);z-index:var(--node-z-index, 1)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n"], components: [{ type: NodePortsComponent, selector: "node-ports", inputs: ["inputsDirection", "outputsDirection", "data", "seed", "emit", "sortByIndex"] }, { type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: StatusIconComponent, selector: "status-icon", inputs: ["status"] }, { type: NodeIconComponent, selector: "node-icon", inputs: ["icon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ContentNodeComponent, decorators: [{
             type: Component,
             args: [{
@@ -29389,81 +29659,354 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }] });
 
 class CustomConnectionComponent extends ConnectionComponent {
+    get pathNative() {
+        var _a;
+        return (_a = this.pathElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
+    }
+    get labelText() {
+        var _a, _b, _c;
+        return typeof ((_a = this.data) === null || _a === void 0 ? void 0 : _a.label) === 'string'
+            ? (_b = this.data) === null || _b === void 0 ? void 0 : _b.label
+            : (_c = this.data) === null || _c === void 0 ? void 0 : _c.label.text;
+    }
+    get labelPosition() {
+        return typeof this.data.label === 'string'
+            ? 'center'
+            : this.data.label.position;
+    }
 }
 CustomConnectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomConnectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CustomConnectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomConnectionComponent, selector: "connection", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: `
-    <svg
-      data-testid="connection"
-      style="z-index:-1"
-      class="{{ data?.status ? 'connection-status-' + data?.status : '' }}"
-    >
-      <path [attr.d]="path" />
-    </svg>
-  `, isInline: true, styles: ["\n      svg {\n        overflow: visible;\n        position: absolute;\n        pointer-events: none;\n        path {\n          fill: none;\n          stroke-width: 2px;\n          stroke: var(--path-color, #1b3e7f);\n          pointer-events: auto;\n        }\n      }\n    "] });
+CustomConnectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomConnectionComponent, selector: "connection", inputs: { data: "data" }, viewQueries: [{ propertyName: "pathElement", first: true, predicate: ["pathElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+		<svg
+			data-testid="connection"
+			style="z-index:-2"
+			class="{{ data?.status ? 'connection-status-' + data?.status : '' }} {{
+				data?.styleClass
+			}}"
+		>
+			<path [attr.d]="path" #pathElement />
+		</svg>
+		<app-connection-label
+			*ngIf="data?.label && pathNative"
+			[path]="pathNative"
+			[text]="labelText"
+			[position]="labelPosition"
+		></app-connection-label>
+	`, isInline: true, styles: ["\n\t\t\tsvg {\n\t\t\t\toverflow: visible;\n\t\t\t\tposition: absolute;\n\t\t\t\tpointer-events: none;\n\t\t\t\tpath {\n\t\t\t\t\tfill: none;\n\t\t\t\t\tstroke-width: 2px;\n\t\t\t\t\tstroke: var(--path-color, #1b3e7f);\n\t\t\t\t\tpointer-events: auto;\n\t\t\t\t}\n\t\t\t}\n\t\t"], components: [{ type: ConnectionLabelComponent, selector: "app-connection-label", inputs: ["path", "position", "text"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomConnectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'connection',
                     styles: [
                         `
-      svg {
-        overflow: visible;
-        position: absolute;
-        pointer-events: none;
-        path {
-          fill: none;
-          stroke-width: 2px;
-          stroke: var(--path-color, #1b3e7f);
-          pointer-events: auto;
-        }
-      }
-    `,
+			svg {
+				overflow: visible;
+				position: absolute;
+				pointer-events: none;
+				path {
+					fill: none;
+					stroke-width: 2px;
+					stroke: var(--path-color, #1b3e7f);
+					pointer-events: auto;
+				}
+			}
+		`
                     ],
                     template: `
-    <svg
-      data-testid="connection"
-      style="z-index:-1"
-      class="{{ data?.status ? 'connection-status-' + data?.status : '' }}"
-    >
-      <path [attr.d]="path" />
-    </svg>
-  `,
-                }]
-        }], propDecorators: { data: [{
+		<svg
+			data-testid="connection"
+			style="z-index:-2"
+			class="{{ data?.status ? 'connection-status-' + data?.status : '' }} {{
+				data?.styleClass
+			}}"
+		>
+			<path [attr.d]="path" #pathElement />
+		</svg>
+		<app-connection-label
+			*ngIf="data?.label && pathNative"
+			[path]="pathNative"
+			[text]="labelText"
+			[position]="labelPosition"
+		></app-connection-label>
+	`
+                }]
+        }], propDecorators: { pathElement: [{
+                type: ViewChild,
+                args: ['pathElement', { static: true }]
+            }], data: [{
                 type: Input
             }] } });
 
 class CustomSocketComponent extends SocketComponent {
 }
 CustomSocketComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomSocketComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CustomSocketComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomSocketComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: ["\n      :host {\n        display: inline-block;\n        cursor: pointer;\n        border: 1px solid var(--primary-color, #1b3e7f);\n        width: var(--socket-size, 16px);\n        height: var(--socket-size, 16px);\n        vertical-align: middle;\n        background: white;\n        z-index: 2;\n        box-sizing: border-box;\n        opacity: var(--socket-opacity, 0);\n        border-radius: var(--socket-radius, 50%);\n        &:hover {\n          box-shadow: 0 0 0 1px var(--primary-color, #1b3e7f);\n        }\n      }\n    "] });
+CustomSocketComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomSocketComponent, selector: "ng-component", host: { properties: { "class": "data?.styleClass" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: ["\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tcursor: pointer;\n\t\t\t\tborder: 1px solid var(--primary-color, #1b3e7f);\n\t\t\t\twidth: var(--socket-size, 16px);\n\t\t\t\theight: var(--socket-size, 16px);\n\t\t\t\tvertical-align: var(--socket-vertical-align, top);\n\t\t\t\tbackground: white;\n\t\t\t\tz-index: 2;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\topacity: var(--socket-opacity, 0);\n\t\t\t\tborder-radius: var(--socket-radius, 0);\n\t\t\t\t&:hover {\n\t\t\t\t\tbox-shadow: 0 0 0 1px var(--primary-color, #1b3e7f);\n\t\t\t\t}\n\t\t\t}\n\t\t"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomSocketComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
                     styles: [
                         `
-      :host {
-        display: inline-block;
-        cursor: pointer;
-        border: 1px solid var(--primary-color, #1b3e7f);
-        width: var(--socket-size, 16px);
-        height: var(--socket-size, 16px);
-        vertical-align: middle;
-        background: white;
-        z-index: 2;
-        box-sizing: border-box;
-        opacity: var(--socket-opacity, 0);
-        border-radius: var(--socket-radius, 50%);
-        &:hover {
-          box-shadow: 0 0 0 1px var(--primary-color, #1b3e7f);
-        }
-      }
-    `,
+			:host {
+				display: inline-block;
+				cursor: pointer;
+				border: 1px solid var(--primary-color, #1b3e7f);
+				width: var(--socket-size, 16px);
+				height: var(--socket-size, 16px);
+				vertical-align: var(--socket-vertical-align, top);
+				background: white;
+				z-index: 2;
+				box-sizing: border-box;
+				opacity: var(--socket-opacity, 0);
+				border-radius: var(--socket-radius, 0);
+				&:hover {
+					box-shadow: 0 0 0 1px var(--primary-color, #1b3e7f);
+				}
+			}
+		`
                     ],
+                    host: {
+                        '[class]': 'data?.styleClass'
+                    }
+                }]
+        }] });
+
+class GatewayPortsComponent {
+}
+GatewayPortsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GatewayPortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GatewayPortsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GatewayPortsComponent, selector: "gateway-ports", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, ngImport: i0, template: `
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="gateway-port gateway-port--input  {{ input.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+
+		<div
+			*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+			class="gateway-port gateway-port--output  {{ output.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'output',
+				key: output.key,
+				nodeId: data.id,
+				payload: output.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`, isInline: true, styles: ["\n\t\t\t.gateway-port {\n\t\t\t\t--socket-vertical-align: top;\n\t\t\t\t--width: var(--port-width, var(--socket-size, 14px));\n\t\t\t\t--height: var(--port-height, var(--socket-size, 14px));\n\t\t\t\tposition: absolute;\n\t\t\t\tinset-inline: var(--port-inset-inline);\n\t\t\t\tinset-block: var(--port-inset-block);\n\t\t\t\tdisplay: inline-block;\n\t\t\t\twidth: var(--width);\n\t\t\t\theight: var(--height);\n\t\t\t\t&.input-primary-port {\n\t\t\t\t\t--port-inset-inline: calc(var(--width) / -2) auto;\n\t\t\t\t\t--port-inset-block: calc(50% - var(--height) / 2) 0;\n\t\t\t\t}\n\t\t\t\t&.output-primary-port {\n\t\t\t\t\t--port-inset-inline: auto calc(var(--width) / -2);\n\t\t\t\t\t--port-inset-block: calc(50% - var(--height) / 2) auto;\n\t\t\t\t}\n\t\t\t\t&.output-secondary-port {\n\t\t\t\t\t--port-inset-inline: calc(50% - var(--width) / 2) auto;\n\t\t\t\t\t--port-inset-block: calc(var(--height) / -2) auto;\n\t\t\t\t}\n\t\t\t\t&.output-tertiary-port {\n\t\t\t\t\t--port-inset-inline: calc(50% - var(--width) / 2) 0;\n\t\t\t\t\t--port-inset-block: auto calc(var(--height) / -2);\n\t\t\t\t}\n\t\t\t}\n\t\t"], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4$1.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GatewayPortsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gateway-ports',
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="gateway-port gateway-port--input  {{ input.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+
+		<div
+			*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+			class="gateway-port gateway-port--output  {{ output.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'output',
+				key: output.key,
+				nodeId: data.id,
+				payload: output.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`,
+                    styles: [
+                        `
+			.gateway-port {
+				--socket-vertical-align: top;
+				--width: var(--port-width, var(--socket-size, 14px));
+				--height: var(--port-height, var(--socket-size, 14px));
+				position: absolute;
+				inset-inline: var(--port-inset-inline);
+				inset-block: var(--port-inset-block);
+				display: inline-block;
+				width: var(--width);
+				height: var(--height);
+				&.input-primary-port {
+					--port-inset-inline: calc(var(--width) / -2) auto;
+					--port-inset-block: calc(50% - var(--height) / 2) 0;
+				}
+				&.output-primary-port {
+					--port-inset-inline: auto calc(var(--width) / -2);
+					--port-inset-block: calc(50% - var(--height) / 2) auto;
+				}
+				&.output-secondary-port {
+					--port-inset-inline: calc(50% - var(--width) / 2) auto;
+					--port-inset-block: calc(var(--height) / -2) auto;
+				}
+				&.output-tertiary-port {
+					--port-inset-inline: calc(50% - var(--width) / 2) 0;
+					--port-inset-block: auto calc(var(--height) / -2);
+				}
+			}
+		`
+                    ]
+                }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], seed: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }], sortByIndex: [{
+                type: Input
+            }] } });
+
+class GatewayNodeComponent extends BaseNodeComponent {
+}
+GatewayNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GatewayNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GatewayNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GatewayNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n\tclass=\"da-node gateway-node--{{ data.type }} gateway-node {{\r\n\t\tdata?.status ? ' da-node--' + data?.status : ''\r\n\t}}\"\r\n\t[style.--node-width]=\"data.width + 'px'\"\r\n\t[style.--node-height]=\"data.width + 'px'\"\r\n>\r\n\t<div class=\"gateway-node__wrapper\">\r\n\t\t<node-remove-button\r\n\t\t\t(remove)=\"removeNode()\"\r\n\t\t\t*ngIf=\"data.config?.canRemove\"\r\n\t\t></node-remove-button>\r\n\t\t<div class=\"gateway-node__content\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"da-node__title gate-node__title\"\r\n\t\t\t\t[attr.tooltip]=\"data.content?.data?.tooltip\"\r\n\t\t\t\t[class.node-tooltip]=\"!!data.content?.data?.tooltip\"\r\n\t\t\t>\r\n\t\t\t\t{{ data.name }}\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<gateway-ports\r\n\t\tclass=\"gateway-node__ports\"\r\n\t\t[data]=\"data\"\r\n\t\t[seed]=\"seed\"\r\n\t\t[emit]=\"emit\"\r\n\t\t[sortByIndex]=\"sortByIndex\"\r\n\t></gateway-ports>\r\n</div>\r\n", styles: [".da-node{--socket-size: 16px;--width: var(--node-width);--height: var(--node-height);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer);z-index:var(--node-z-index, 1)}.da-node--draft{--node-color: var( --status-draft-color, #555 );--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var( --status-draft-border, 1px solid #555 );--node-shadow: var( --status-draft-shadow, unset )}.da-node--upcoming{--node-color: var( --status-upcoming-color, var(--Primary-100, #234990) );--node-background: var( --status-upcoming-background, #fff );--node-border: var( --status-upcoming-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-upcoming-shadow, unset )}.da-node--ready{--node-color: var( --status-ready-color, var(--Primary-100, #234990) );--node-background: var( --status-ready-background, #fff );--node-border: var( --status-ready-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-ready-shadow, unset )}.da-node--suspended{--node-color: var( --status-suspended-color, var(--orange-color, #f29339) );--node-background: var( --status-suspended-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-suspended-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-suspended-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--inProgress{--node-color: var( --status-progress-color, var(--orange-color, #f29339) );--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-progress-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--completed{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--approved{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--rejected{--node-color: var( --status-rejected-color, var(--red-color, #bf0b30) );--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-rejected-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-rejected-shadow, unset )}.da-node--canceled{--node-color: var( --status-canceled-color, var(--red-color, #bf0b30) );--node-background: var( --status-canceled-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-canceled-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-canceled-shadow, unset )}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__content{width:calc(100% - var(--socket-size));height:calc(100% - var(--socket-size));display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);z-index:var(--node-z-index, 1)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", ".gateway-node{--node-radius: 0;--angle: 45deg;--socket-radius: 0;border-width:0;background:transparent}.gateway-node__wrapper{width:calc(100% - var(--socket-size, 14px));height:calc(100% - var(--socket-size, 14px));transform:rotate(var(--angle));border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius);background:var(--node-background, #fff)}.gateway-node__content{--rotate: calc(var(--angle) * -1);transform:rotate(var(--rotate));height:100%;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}\n"], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: GatewayPortsComponent, selector: "gateway-ports", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GatewayNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './gateway-node.component.html',
+                    styleUrls: ['../../styles/node.scss', './gateway-node.component.scss']
                 }]
         }] });
 
+class NodeInputsComponent {
+}
+NodeInputsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeInputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NodeInputsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeInputsComponent, selector: "node-inputs", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": " 'node-ports node-ports--inputs  node-ports--' + direction" } }, ngImport: i0, template: `
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="node-ports__port {{ input.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`, isInline: true, styles: [".node-ports{--port-size: 16px;position:absolute;width:100%;height:100%}.node-port{position:absolute;inset-inline:var(--port-inset-inline);inset-block:var(--port-inset-block);display:inline-block;width:var(--port-size);height:var(--port-size)}.node-ports--inputs--start .input-primary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--start .input-secondary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--start .input-tertiary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--start .input-quaternary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--end .input-primary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--end .input-secondary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--end .input-tertiary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--end .input-quaternary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--top .input-primary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--top .input-secondary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--top .input-tertiary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--top .input-quaternary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--bottom .input-primary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--bottom .input-secondary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--bottom .input-tertiary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--bottom .input-quaternary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--outputs--top .output-primary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--top .output-secondary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--top .output-tertiary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--top .output-quaternary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--bottom .output-primary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--bottom .output-secondary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--bottom .output-tertiary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--bottom .output-quaternary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-primary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-secondary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--start .output-tertiary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-quaternary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--end .output-primary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--end .output-secondary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--end .output-tertiary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--end .output-quaternary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}\n"], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4$1.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeInputsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'node-inputs',
+                    encapsulation: ViewEncapsulation.None,
+                    styleUrls: ['../styles/ports.scss'],
+                    host: {
+                        '[class]': " 'node-ports node-ports--inputs  node-ports--' + direction"
+                    },
+                    template: `
+		<div
+			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
+			class="node-ports__port {{ input.value.styleClass }}"
+			refComponent
+			[data]="{
+				type: 'socket',
+				side: 'input',
+				key: input.key,
+				nodeId: data.id,
+				payload: input.value?.socket,
+				seed: seed
+			}"
+			[emit]="emit"
+		></div>
+	`
+                }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], seed: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }], sortByIndex: [{
+                type: Input
+            }] } });
+
+class NodeOutputsComponent {
+}
+NodeOutputsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeOutputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NodeOutputsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeOutputsComponent, selector: "node-outputs", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": " 'node-ports node-ports--outputs  node-ports--' + direction" } }, ngImport: i0, template: `<div
+		class="node-ports__port {{ output.value.styleClass }}"
+		*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+		refComponent
+		[data]="{
+			type: 'socket',
+			side: 'output',
+			key: output.key,
+			nodeId: data.id,
+			payload: output.value?.socket,
+			seed: seed
+		}"
+		[emit]="emit"
+	></div>`, isInline: true, styles: [".node-ports{--port-size: 16px;position:absolute;width:100%;height:100%}.node-port{position:absolute;inset-inline:var(--port-inset-inline);inset-block:var(--port-inset-block);display:inline-block;width:var(--port-size);height:var(--port-size)}.node-ports--inputs--start .input-primary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--start .input-secondary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--start .input-tertiary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--start .input-quaternary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--end .input-primary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--end .input-secondary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--end .input-tertiary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--end .input-quaternary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--top .input-primary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--top .input-secondary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--top .input-tertiary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--top .input-quaternary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--bottom .input-primary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: auto 0}.node-ports--inputs--bottom .input-secondary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--inputs--bottom .input-tertiary-port{--port-inset-inline: var( --port-offset, calc(50% - var(--port-size)) ) auto;--port-inset-block: 0 auto}.node-ports--inputs--bottom .input-quaternary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, calc(50% - var(--port-size)) ) auto}.node-ports--outputs--top .output-primary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--top .output-secondary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--top .output-tertiary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--top .output-quaternary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--bottom .output-primary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--bottom .output-secondary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--bottom .output-tertiary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--bottom .output-quaternary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-primary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-secondary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}.node-ports--outputs--start .output-tertiary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--start .output-quaternary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--end .output-primary-port{--port-inset-inline: auto 0;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--end .output-secondary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: auto 0}.node-ports--outputs--end .output-tertiary-port{--port-inset-inline: 0 auto;--port-inset-block: var( --port-offset, 50% ) auto}.node-ports--outputs--end .output-quaternary-port{--port-inset-inline: var( --port-offset, 50% ) auto;--port-inset-block: 0 auto}\n"], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4$1.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeOutputsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'node-outputs',
+                    encapsulation: ViewEncapsulation.None,
+                    styleUrls: ['../styles/ports.scss'],
+                    host: {
+                        '[class]': " 'node-ports node-ports--outputs  node-ports--' + direction"
+                    },
+                    template: `<div
+		class="node-ports__port {{ output.value.styleClass }}"
+		*ngFor="let output of data.outputs | keyvalue : sortByIndex"
+		refComponent
+		[data]="{
+			type: 'socket',
+			side: 'output',
+			key: output.key,
+			nodeId: data.id,
+			payload: output.value?.socket,
+			seed: seed
+		}"
+		[emit]="emit"
+	></div>`
+                }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], seed: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }], sortByIndex: [{
+                type: Input
+            }] } });
+
 class TemplateNodeComponent extends BaseNodeComponent {
     ngOnInit() { }
     get templateOutletContext() {
@@ -29480,7 +30023,7 @@ class TemplateNodeComponent extends BaseNodeComponent {
     }
 }
 TemplateNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TemplateNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplateNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"da-node da-node--{{ data.type }} {{\r\n    data?.status ? ' da-node--' + data?.status : ''\r\n  }} {{ data?.styleClass }}\"\r\n  [style.--node-width]=\"data.width + 'px'\"\r\n  [style.--node-height]=\"data.height + 'px'\"\r\n>\r\n  <node-remove-button (remove)=\"removeNode()\" *ngIf=\"data?.config?.canRemove\">\r\n  </node-remove-button>\r\n\r\n  <node-icon\r\n    *ngIf=\"data.content?.icon\"\r\n    [icon]=\"data.content?.icon\"\r\n    class=\"da-node__icon\"\r\n  ></node-icon>\r\n\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"data?.template || defaultTemplate\"\r\n    [ngTemplateOutletContext]=\"templateOutletContext\"\r\n  ></ng-container>\r\n\r\n  <ng-template #defaultTemplate>\r\n    <div class=\"da-node__title\">{{ data?.name }}</div>\r\n  </ng-template>\r\n\r\n  <node-inputs\r\n    [direction]=\"data.directions.inputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-inputs>\r\n\r\n  <node-outputs\r\n    [direction]=\"data.directions.outputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-outputs>\r\n</div>\r\n", styles: [".da-node{--width: var(--node-width);--height: var(--node-height);--socket-offset-negative: 0;--socket-position-start: var(--socket-offset-negative) auto;--socket-position-end: auto var(--socket-offset-negative);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer)}.da-node--draft{--node-color: var(--status-draft-color, #555);--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var(--status-draft-border, 1px solid #555);--node-shadow: var(--status-draft-shadow, unset)}.da-node--upcoming{--node-color: var(--status-upcoming-color, var(--Primary-100, #234990));--node-background: var( --status-upcoming-background, #fff );--node-border: var(--status-upcoming-border, 1px solid var(--node-color, #234990));--node-shadow: var(--status-upcoming-shadow, unset)}.da-node--inProgress{--node-color: var(--status-progress-color, var(--orange-color, #f29339));--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var(--status-progress-border, 1px solid var(--orange-color, #f29339));--node-shadow: var(--status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)))}.da-node--completed{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--approved{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--rejected{--node-color: var(--status-rejected-color, var(--red-color, #bf0b30));--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var(--status-rejected-border, 1px solid var(--red-color, #bf0b30));--node-shadow: var(--status-rejected-shadow, unset)}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node__inputs,.da-node__outputs{position:var(--input-output-position, absolute);inset-inline:var(--in-out-inset-inline);inset-block:var(--in-out-inset-block);height:var(--socket-size, 16px)}.da-node__inputs__socket,.da-node__outputs__socket{height:var(--socket-size, 16px)}.da-node__inputs.inputs-top{--in-out-inset-block: var(--socket-position-start)}.da-node__inputs.inputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__inputs.inputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__inputs.inputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node__outputs.outputs-top{--in-out-inset-block: var(--socket-offset-negative)}.da-node__outputs.outputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__outputs.outputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__outputs.outputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", "\n      :host {\n        display: block;\n      }\n    "], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: NodeIconComponent, selector: "node-icon", inputs: ["icon"] }, { type: NodeInputsComponent, selector: "node-inputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }, { type: NodeOutputsComponent, selector: "node-outputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+TemplateNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplateNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n\tclass=\"da-node da-node--{{ data.type }} {{\r\n\t\tdata?.status ? ' da-node--' + data?.status : ''\r\n\t}} {{ data?.styleClass }}\"\r\n\t[style.--node-width]=\"data.width + 'px'\"\r\n\t[style.--node-height]=\"data.height + 'px'\"\r\n>\r\n\t<node-ports\r\n\t\t[inputsDirection]=\"data.directions.inputs\"\r\n\t\t[outputsDirection]=\"data.directions.outputs\"\r\n\t\t[data]=\"data\"\r\n\t\t[seed]=\"seed\"\r\n\t\t[emit]=\"emit\"\r\n\t\t[sortByIndex]=\"sortByIndex\"\r\n\t></node-ports>\r\n\t<div class=\"da-node__content\">\r\n\t\t<node-remove-button (remove)=\"removeNode()\" *ngIf=\"data?.config?.canRemove\">\r\n\t\t</node-remove-button>\r\n\r\n\t\t<node-icon\r\n\t\t\t*ngIf=\"data.content?.icon\"\r\n\t\t\t[icon]=\"data.content?.icon\"\r\n\t\t\tclass=\"da-node__icon\"\r\n\t\t></node-icon>\r\n\r\n\t\t<ng-container\r\n\t\t\t[ngTemplateOutlet]=\"data?.template || defaultTemplate\"\r\n\t\t\t[ngTemplateOutletContext]=\"templateOutletContext\"\r\n\t\t></ng-container>\r\n\r\n\t\t<ng-template #defaultTemplate>\r\n\t\t\t<div class=\"da-node__title\">{{ data?.name }}</div>\r\n\t\t</ng-template>\r\n\t</div>\r\n</div>\r\n", styles: [".da-node{--socket-size: 16px;--width: var(--node-width);--height: var(--node-height);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer);z-index:var(--node-z-index, 1)}.da-node--draft{--node-color: var( --status-draft-color, #555 );--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var( --status-draft-border, 1px solid #555 );--node-shadow: var( --status-draft-shadow, unset )}.da-node--upcoming{--node-color: var( --status-upcoming-color, var(--Primary-100, #234990) );--node-background: var( --status-upcoming-background, #fff );--node-border: var( --status-upcoming-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-upcoming-shadow, unset )}.da-node--ready{--node-color: var( --status-ready-color, var(--Primary-100, #234990) );--node-background: var( --status-ready-background, #fff );--node-border: var( --status-ready-border, 1px solid var(--node-color, #234990) );--node-shadow: var( --status-ready-shadow, unset )}.da-node--suspended{--node-color: var( --status-suspended-color, var(--orange-color, #f29339) );--node-background: var( --status-suspended-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-suspended-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-suspended-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--inProgress{--node-color: var( --status-progress-color, var(--orange-color, #f29339) );--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var( --status-progress-border, 1px solid var(--orange-color, #f29339) );--node-shadow: var( --status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)) )}.da-node--completed{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--approved{--node-color: var( --status-completed-color, var(--green-color, #05cd99) );--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var( --status-completed-border, 1px solid var(--green-color, #05cd99) );--node-shadow: var( --status-completed-shadow, unset )}.da-node--rejected{--node-color: var( --status-rejected-color, var(--red-color, #bf0b30) );--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-rejected-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-rejected-shadow, unset )}.da-node--canceled{--node-color: var( --status-canceled-color, var(--red-color, #bf0b30) );--node-background: var( --status-canceled-background, var(--light-red-color, #ffe0e7) );--node-border: var( --status-canceled-border, 1px solid var(--red-color, #bf0b30) );--node-shadow: var( --status-canceled-shadow, unset )}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__content{width:calc(100% - var(--socket-size));height:calc(100% - var(--socket-size));display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);z-index:var(--node-z-index, 1)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", "\n      :host {\n        display: block;\n      }\n    "], components: [{ type: NodePortsComponent, selector: "node-ports", inputs: ["inputsDirection", "outputsDirection", "data", "seed", "emit", "sortByIndex"] }, { type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: NodeIconComponent, selector: "node-icon", inputs: ["icon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateNodeComponent, decorators: [{
             type: Component,
             args: [{
@@ -29586,8 +30129,7 @@ class DiagramDirective {
         return __awaiter(this, void 0, void 0, function* () {
             this._appendZoomComponent();
             try {
-                const editor = yield createDiagramEditor(this._elementRef.nativeElement, this._injector, this.config //TODO it's Should be merged with DIAGRAM_DEFAULT_OPTIONS
-                );
+                const editor = yield createDiagramEditor(this._elementRef.nativeElement, this._injector, this.config);
                 this._pluginsService.setPlugins(editor);
                 this._diagramService.setEditor(editor);
                 this.diagramEditor = editor;
@@ -29599,12 +30141,16 @@ class DiagramDirective {
         });
     }
     _appendStyles() {
+        var _a, _b;
         const _requiredStyles = {
             position: 'var(--diagram-position, relative)',
             width: `var(--diagram-width, ${this.width})`,
             height: `var(--diagram-height, ${this.height})`,
-            direction: 'ltr',
+            direction: 'ltr'
         };
+        if ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.readonly) === null || _b === void 0 ? void 0 : _b.active) {
+            this._elementRef.nativeElement.style.setProperty('--port-offset', 'var(--custom-diagram-port-offset , calc(50% - 8px))');
+        }
         Object.entries(_requiredStyles).forEach(([key, value]) => {
             this._renderer.setStyle(this._elementRef.nativeElement, key, value);
         });
@@ -29616,7 +30162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Directive,
             args: [{
                     selector: '[appDiagram]',
-                    exportAs: 'diagram',
+                    exportAs: 'diagram'
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: DiagramService }, { type: DiagramPluginsService }]; }, propDecorators: { height: [{
                 type: Input
@@ -29644,7 +30190,11 @@ DiagramsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         NodeIconComponent,
         StatusIconComponent,
         NodeInputsComponent,
-        NodeOutputsComponent], imports: [CommonModule,
+        NodeOutputsComponent,
+        GatewayNodeComponent,
+        ConnectionLabelComponent,
+        NodePortsComponent,
+        GatewayPortsComponent], imports: [CommonModule,
         ReteModule,
         MatButtonModule,
         MatIconModule,
@@ -29658,7 +30208,7 @@ DiagramsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             MatIconModule,
             FormsModule,
             TranslateModule,
-            MatTooltipModule,
+            MatTooltipModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramsModule, decorators: [{
             type: NgModule,
@@ -29676,6 +30226,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         StatusIconComponent,
                         NodeInputsComponent,
                         NodeOutputsComponent,
+                        GatewayNodeComponent,
+                        ConnectionLabelComponent,
+                        NodePortsComponent,
+                        GatewayPortsComponent
                     ],
                     imports: [
                         CommonModule,
@@ -29684,10 +30238,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         MatIconModule,
                         FormsModule,
                         TranslateModule,
-                        MatTooltipModule,
+                        MatTooltipModule
                     ],
                     exports: [DiagramDirective, ZoomControlComponent],
-                    providers: [DiagramService, DiagramPluginsService, WorkflowService],
+                    providers: [DiagramService, DiagramPluginsService, WorkflowService]
                 }]
         }] });
 
@@ -31721,5 +32275,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActivitiesLogComponent, ActivitiesLogModule, ActivityLineComponent, AdapterService, AddPermissionsDialogComponent, AddToCollectionComponent, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AvatarComponent, AvatarModule, BaseColumnComponent, BaseComponent, BaseDialogComponent, BaseNodeClass, BaseSelector, BaseService, BooleanViewerComponent, ButtonComponent, CachingExpiryUnit, CallApiService, CardComponent, CardModule, ChartDataService, CircleNode, CircleNodeComponent, ClickOutsideDirective, ClipboardComponent, CommentApiService, CommentsDashletComponent, CommentsModule, ComponentRegisterService, ComponentTranslationModel, ConfirmCallerDialogComponent, ConfirmCallerModule, ConfirmDialogComponent, ConfirmationDialogComponent, ConfirmationDialogModule, Connection, ContentActionType, ContentNode, ContentNodeComponent, CopyComponent, CorrespondenceRelationComponent, CorrespondenceRelationModule, CorrespondenceRelationService, CorrespondenceTagsComponent, CreateDirectoryComponent, CreateEntityComponent, CreateEntityModule, CreateModalComponent, CreationTypeComponent, CtsTagsModule, CustomConnectionComponent, CustomDocumentViewerComponent, CustomPpViewerComponent, CustomSocketComponent, CustomToastrModule, CustomToastrService, CutomeVocViewerComponent, DIAGRAM_DEFAULT_OPTIONS, DIAGRAM_HEIGHT, DataViewerComponent, DateFormatterService, DateHelperService, DateViewerComponent, DeleteComponent, DepartmentApiService, DepartmentFormComponent, DepartmentManagementService, DepartmentViewerComponent, DestroySubject$1 as DestroySubject, DiagramDirective, DiagramPluginsService, DiagramService, DiagramsModule, DialogMangmentService, DirectiveModule, DisplaySuitableIconComponent, DisplaySuitableIconModule, DocumentScanService, DocumentTemplatesConstants, DocumentTemplatesService, DocumentUploadComponent, DocumentsComponent, DocumentsConstants, DocumentsListComponent, DocumentsModule, DocumentsService, DragAndDropDirective, DropdownViewerComponent, DynamicChartComponent, DynamicChartModule, DynamicColumnComponent, DynamicFieldsRendererComponent, DynamicFieldsRendererModule, DynamicFilterComponent, DynamicFilterModule, DynamicFormBoolItemComponent, DynamicFormBuilderComponent, DynamicFormCheckboxItemComponent, DynamicFormComponent, DynamicFormDateItemComponent, DynamicFormDepartmentComponent, DynamicFormFieldComponent, DynamicFormHijriDateitemComponent, DynamicFormMapItemComponent, DynamicFormModule, DynamicFormOptionsComponent, DynamicFormSelectItemComponent, DynamicFormSelectTagComponent, DynamicFormSelectUserFilterComponent, DynamicFormSelectUsersComponent, DynamicFormService, DynamicFormSlideToggleitemComponent, DynamicFormTextItemComponent, DynamicFormTextareaComponent, DynamicFormViewerComponent, DynamicFormVocabularyItemComponent, DynamicSearchComponent, DynamicSearchModule, DynamicSingleChartComponent, DynamicTableComponent, DynamicTableModule, DynamicTableService, DynamicTabsComponent, DynamicTabsModule, DynamicViewModule, ENTITY_TYPE, EXTENSION_JSONS, EnvManager, EvaluatorsService, ExtensionLoaderService, ExtensionService, FILTER_DATES_TYPE, FileGridInfiniteScrollDirective, FileManagerAbstract, FileManagerAdapter, FileManagerPaginationConfig, FileManagerService, FileMangerModule, FileSizePipe, FilterComponent, FilterModule, FolderModalComponent, FolderishType, FormBuilderService, GlobalAdminService, GlobalPdfTron, GregorianDatepickerComponent, HijriDatePipe, HijriDatepickerComponent, HijriGregorianDatepickerComponent, IN_OUT_DIRECTION, IconService, InitializationService, ItemListComponent, Lang, LatestActivityComponent, LatestActivityModule, LibrarySharedModule, ListViewerComponent, LoanRequestComponent, LocalStoragService, LocalizedDatePipe, MESSAGE_TYPE, MY_MOMENT_FORMATS, MainfolderService, MessageService, MomentDateAdapter, MoveComponent, MultiValuePipe, MultipleDynamicFormViewerComponent, MutipleDynamicFormViewerModule, NODE_CIRCLE_SIZE, NODE_HEIGHT, NODE_MARGIN, NODE_STATUS, NODE_TYPE, NODE_WIDTH, NOTIFICATIONS_LIST_OPTIONS, NOTIFICATION_ICON, NOTIFICATION_ITEM, NOTIFICATION_STATUS, NOTIFY_EVENT, NdfConfirmationDialogComponent, NdfNuxeoDialog, NgxHijriGregorianDatepickerModule, NoDataComponent, NodeIconComponent, NodeInputsComponent, NodeOutputsComponent, NotificationIconDirective, NotificationItemComponent, NotificationItemDirective, NotificationSourceSelectComponent, NotificationStatusToggleComponent, NotificationToastComponent, NotificationsButtonComponent, NotificationsDateSelectComponent, NotificationsListComponent, NotificationsListContainerComponent, NotificationsModule, NotificationsService, NotificationsSettingsContainerComponent, NuxeoCoreModule, NuxeoDevelopmentFrameworkComponent, NuxeoDevelopmentFrameworkModule, NuxeoDevelopmentFrameworkService, NuxeoDialogModule, NuxeoDialogService, NuxeoMapper, NuxeoService, PAGINATION_MODE, PANEL_MODE, PaginationComponent, PaginationModule, PdfTronModule, PdftronComponent, PdftronService, PermissionService, PermissionsComponent, PermissionsDirective, PermissionsModule, PermissionsTemplateComponent, PipesModule, PublishDialogComponent, PublishingDocumentService, ReadMoreComponent, RecentlyViewedService, RemoveButtonComponent, RenameComponent, RolesService, SOCKET_WIDTH, SUBSCRIPTION_STATE, SafeHtmlPipe, ScanComponent, ScanModalComponent, SearchAutocompleteComponent, SecurePipe, SelectComponent, SelectModule, SelectUsersByDepartmentModule, SelectUsersByDepartmentsComponent, SetDirRtlDirective, SetRtlDirective, ShareDialogComponent, SharedDocsService, SharedServicesModule, SidepanelComponent, SingleActivityComponent, Socket, SpinnerComponent, StatusIconComponent, TRANSLATION_PROVIDER, TableComponent, TableModule, TagsApiService, TemplateModalComponent, TemplateNode, TemplateNodeComponent, TimeAgoPipe, ToastsModule, TransferDocComponent, TranslateLoaderService, TranslatedVocabularySelectComponent, TranslationService, TreeviewSelectComponent, UpdateModalComponent, UploadFileService, UploadManagmentService, UserCardComponent, UserComponent, UserModule, UserPreferenceValues, UserPreferencesService, UserService, UsersCardComponent, UsersCardModule, UtilityService, VersionsComponent, ViewerFilesService, ViewerLogComponent, ViewerLogModule, VocabularyApiService, VocabularyComponent, VocabularyModule, WorkflowService, ZoomControlComponent, appInitializer, departmentCacheBuster$, extensionJsonsFactory, filterEnabled, getConnections, getValue, mergeArrays, mergeObjects, minute$1 as minute, provideExtensionConfig, reduceEmptyMenus, reduceSeparators, removeConnections, removeNode, removeNodeAndConnections, serializeControl, serializePort, sortByOrder };
+export { ActivitiesLogComponent, ActivitiesLogModule, ActivityLineComponent, AdapterService, AddPermissionsDialogComponent, AddToCollectionComponent, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AvatarComponent, AvatarModule, BaseColumnComponent, BaseComponent, BaseDialogComponent, BaseNodeClass, BaseSelector, BaseService, BooleanViewerComponent, ButtonComponent, CachingExpiryUnit, CallApiService, CardComponent, CardModule, ChartDataService, CircleNode, CircleNodeComponent, ClickOutsideDirective, ClipboardComponent, CommentApiService, CommentsDashletComponent, CommentsModule, ComponentRegisterService, ComponentTranslationModel, ConfirmCallerDialogComponent, ConfirmCallerModule, ConfirmDialogComponent, ConfirmationDialogComponent, ConfirmationDialogModule, Connection, ConnectionLabelComponent, ContentActionType, ContentNode, ContentNodeComponent, CopyComponent, CorrespondenceRelationComponent, CorrespondenceRelationModule, CorrespondenceRelationService, CorrespondenceTagsComponent, CreateDirectoryComponent, CreateEntityComponent, CreateEntityModule, CreateModalComponent, CreationTypeComponent, CtsTagsModule, CustomConnectionComponent, CustomDocumentViewerComponent, CustomPpViewerComponent, CustomSocketComponent, CustomToastrModule, CustomToastrService, CutomeVocViewerComponent, DIAGRAM_DEFAULT_OPTIONS, DIAGRAM_HEIGHT, DataViewerComponent, DateFormatterService, DateHelperService, DateViewerComponent, DeleteComponent, DepartmentApiService, DepartmentFormComponent, DepartmentManagementService, DepartmentViewerComponent, DestroySubject$1 as DestroySubject, DiagramDirective, DiagramPluginsService, DiagramService, DiagramUtils, DiagramsModule, DialogMangmentService, DirectiveModule, DisplaySuitableIconComponent, DisplaySuitableIconModule, DocumentScanService, DocumentTemplatesConstants, DocumentTemplatesService, DocumentUploadComponent, DocumentsComponent, DocumentsConstants, DocumentsListComponent, DocumentsModule, DocumentsService, DragAndDropDirective, DropdownViewerComponent, DynamicChartComponent, DynamicChartModule, DynamicColumnComponent, DynamicFieldsRendererComponent, DynamicFieldsRendererModule, DynamicFilterComponent, DynamicFilterModule, DynamicFormBoolItemComponent, DynamicFormBuilderComponent, DynamicFormCheckboxItemComponent, DynamicFormComponent, DynamicFormDateItemComponent, DynamicFormDepartmentComponent, DynamicFormFieldComponent, DynamicFormHijriDateitemComponent, DynamicFormMapItemComponent, DynamicFormModule, DynamicFormOptionsComponent, DynamicFormSelectItemComponent, DynamicFormSelectTagComponent, DynamicFormSelectUserFilterComponent, DynamicFormSelectUsersComponent, DynamicFormService, DynamicFormSlideToggleitemComponent, DynamicFormTextItemComponent, DynamicFormTextareaComponent, DynamicFormViewerComponent, DynamicFormVocabularyItemComponent, DynamicSearchComponent, DynamicSearchModule, DynamicSingleChartComponent, DynamicTableComponent, DynamicTableModule, DynamicTableService, DynamicTabsComponent, DynamicTabsModule, DynamicViewModule, ENTITY_TYPE, EXTENSION_JSONS, EnvManager, EvaluatorsService, ExtensionLoaderService, ExtensionService, FILTER_DATES_TYPE, FileGridInfiniteScrollDirective, FileManagerAbstract, FileManagerAdapter, FileManagerPaginationConfig, FileManagerService, FileMangerModule, FileSizePipe, FilterComponent, FilterModule, FolderModalComponent, FolderishType, FormBuilderService, GatewayNodeComponent, GatewayPortsComponent, GlobalAdminService, GlobalPdfTron, GregorianDatepickerComponent, HijriDatePipe, HijriDatepickerComponent, HijriGregorianDatepickerComponent, IN_OUT_DIRECTION, IconService, InitializationService, InputPort, ItemListComponent, Lang, LatestActivityComponent, LatestActivityModule, LibrarySharedModule, ListViewerComponent, LoanRequestComponent, LocalStoragService, LocalizedDatePipe, MESSAGE_TYPE, MY_MOMENT_FORMATS, MainfolderService, MessageService, MomentDateAdapter, MoveComponent, MultiValuePipe, MultipleDynamicFormViewerComponent, MutipleDynamicFormViewerModule, NODE_CIRCLE_SIZE, NODE_GATEWAY_SIZE, NODE_HEIGHT, NODE_MARGIN, NODE_STATUS, NODE_TYPE, NODE_WIDTH, NOTIFICATIONS_LIST_OPTIONS, NOTIFICATION_ICON, NOTIFICATION_ITEM, NOTIFICATION_STATUS, NOTIFY_EVENT, NdfConfirmationDialogComponent, NdfNuxeoDialog, NgxHijriGregorianDatepickerModule, NoDataComponent, NodeIconComponent, NodeInputsComponent, NodeOutputsComponent, NodePortsComponent, NotificationIconDirective, NotificationItemComponent, NotificationItemDirective, NotificationSourceSelectComponent, NotificationStatusToggleComponent, NotificationToastComponent, NotificationsButtonComponent, NotificationsDateSelectComponent, NotificationsListComponent, NotificationsListContainerComponent, NotificationsModule, NotificationsService, NotificationsSettingsContainerComponent, NuxeoCoreModule, NuxeoDevelopmentFrameworkComponent, NuxeoDevelopmentFrameworkModule, NuxeoDevelopmentFrameworkService, NuxeoDialogModule, NuxeoDialogService, NuxeoMapper, NuxeoService, OutputPort, PAGINATION_MODE, PANEL_MODE, PaginationComponent, PaginationModule, PdfTronModule, PdftronComponent, PdftronService, PermissionService, PermissionsComponent, PermissionsDirective, PermissionsModule, PermissionsTemplateComponent, PipesModule, PublishDialogComponent, PublishingDocumentService, ReadMoreComponent, RecentlyViewedService, RemoveButtonComponent, RenameComponent, RolesService, SOCKET_WIDTH, SUBSCRIPTION_STATE, SafeHtmlPipe, ScanComponent, ScanModalComponent, SearchAutocompleteComponent, SecurePipe, SelectComponent, SelectModule, SelectUsersByDepartmentModule, SelectUsersByDepartmentsComponent, SetDirRtlDirective, SetRtlDirective, ShareDialogComponent, SharedDocsService, SharedServicesModule, SidepanelComponent, SingleActivityComponent, Socket, SpinnerComponent, StatusIconComponent, TRANSLATION_PROVIDER, TableComponent, TableModule, TagsApiService, TemplateModalComponent, TemplateNode, TemplateNodeComponent, TimeAgoPipe, ToastsModule, TransferDocComponent, TranslateLoaderService, TranslatedVocabularySelectComponent, TranslationService, TreeviewSelectComponent, UpdateModalComponent, UploadFileService, UploadManagmentService, UserCardComponent, UserComponent, UserModule, UserPreferenceValues, UserPreferencesService, UserService, UsersCardComponent, UsersCardModule, UtilityService, VersionsComponent, ViewerFilesService, ViewerLogComponent, ViewerLogModule, VocabularyApiService, VocabularyComponent, VocabularyModule, WorkflowService, ZoomControlComponent, appInitializer, departmentCacheBuster$, extensionJsonsFactory, filterEnabled, getConnections, getRandomNumber, getValue, mergeArrays, mergeObjects, minute$1 as minute, provideExtensionConfig, reduceEmptyMenus, reduceSeparators, removeConnections, removeNode, removeNodeAndConnections, serializeControl, serializePort, sortByOrder };
 //# sourceMappingURL=nuxeo-development-framework.js.map