nuxeo-development-framework 4.0.1 → 4.0.3

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/forms'), require('rxjs/operators'), require('@angular/platform-browser'), require('rxjs'), require('crypto-js'), require('@ngx-translate/core'), require('moment-es6'), require('keycloak-angular'), require('ngx-cookie-service'), require('moment-hijri'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('@angular/material/tooltip'), require('ngx-infinite-scroll'), require('@angular/router'), require('@angular/material/list'), require('@angular/material/menu'), require('angular-ng-autocomplete'), require('@angular/material/core'), require('@angular/material/dialog'), require('ngx-toastr'), require('@angular/animations'), require('@angular/cdk/bidi'), require('ts-cacheable'), require('@ng-select/ng-select'), require('@angular/material/form-field'), require('@angular/material/chips'), require('@angular/material/expansion'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/datepicker'), require('@angular/material/input'), require('@angular/material/radio'), require('@angular/material/slide-toggle'), require('@busacca/ng-pick-datetime'), require('@mat-datetimepicker/core'), require('angular-formio'), require('ngx-treeview'), require('@ng-bootstrap/ng-bootstrap'), require('moment'), require('formiojs'), require('lodash'), require('lodash/find'), require('lodash/isEqual'), require('@swimlane/ngx-datatable'), require('@angular/cdk/layout'), require('@angular/material/autocomplete'), require('dwt'), require('@angular/material/progress-bar'), require('chart.js'), require('chartjs-plugin-piechart-outlabels'), require('chartjs-plugin-labels'), require('devextreme-angular'), require('file-saver'), require('devextreme-angular/ui/nested'), require('devextreme-angular/core'), require('@pdftron/webviewer'), require('@angular/material/tabs'), require('@angular/material/divider'), require('@angular/common/locales/ar'), require('@angular/common/locales/en'), require('@rxweb/reactive-form-validators'), require('@angular/material/badge'), require('@angular/material/toolbar')) :
-  typeof define === 'function' && define.amd ? define('nuxeo-development-framework', ['exports', '@angular/core', '@angular/common', '@angular/common/http', '@angular/forms', 'rxjs/operators', '@angular/platform-browser', 'rxjs', 'crypto-js', '@ngx-translate/core', 'moment-es6', 'keycloak-angular', 'ngx-cookie-service', 'moment-hijri', '@angular/material/icon', '@angular/material/progress-spinner', '@angular/material/tooltip', 'ngx-infinite-scroll', '@angular/router', '@angular/material/list', '@angular/material/menu', 'angular-ng-autocomplete', '@angular/material/core', '@angular/material/dialog', 'ngx-toastr', '@angular/animations', '@angular/cdk/bidi', 'ts-cacheable', '@ng-select/ng-select', '@angular/material/form-field', '@angular/material/chips', '@angular/material/expansion', '@angular/material/button', '@angular/material/checkbox', '@angular/material/datepicker', '@angular/material/input', '@angular/material/radio', '@angular/material/slide-toggle', '@busacca/ng-pick-datetime', '@mat-datetimepicker/core', 'angular-formio', 'ngx-treeview', '@ng-bootstrap/ng-bootstrap', 'moment', 'formiojs', 'lodash', 'lodash/find', 'lodash/isEqual', '@swimlane/ngx-datatable', '@angular/cdk/layout', '@angular/material/autocomplete', 'dwt', '@angular/material/progress-bar', 'chart.js', 'chartjs-plugin-piechart-outlabels', 'chartjs-plugin-labels', 'devextreme-angular', 'file-saver', 'devextreme-angular/ui/nested', 'devextreme-angular/core', '@pdftron/webviewer', '@angular/material/tabs', '@angular/material/divider', '@angular/common/locales/ar', '@angular/common/locales/en', '@rxweb/reactive-form-validators', '@angular/material/badge', '@angular/material/toolbar'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["nuxeo-development-framework"] = {}, global.ng.core, global.ng.common, global.ng.common.http, global.ng.forms, global.rxjs.operators, global.ng.platformBrowser, global.rxjs, global.CryptoJS, global.i1$1, global.moment$4, global.i2$1, global.i3, global.moment_, global.ng.material.icon, global.ng.material.progressSpinner, global.ng.material.tooltip, global.i9, global.ng.router, global.ng.material.list, global.ng.material.menu, global.i6$1, global.ng.material.core, global.ng.material.dialog, global.i1$4, global.ng.animations, global.ng.cdk.bidi, global.tsCacheable, global.i5, global.ng.material.formField, global.ng.material.chips, global.ng.material.expansion, global.ng.material.button, global.ng.material.checkbox, global.ng.material.datepicker, global.ng.material.input, global.ng.material.radio, global.ng.material.slideToggle, global.i6$4, global.core, global.i3$2, global.i1$6, global.i1$5, global.moment$5, global.formiojs, global._, global._find, global._isEqual, global.i4$2, global.ng.cdk.layout, global.ng.material.autocomplete, global.Dynamsoft, global.ng.material.progressBar, global.chart_js, null, null, global.i3$3, global.FileSaver, global.i4$4, global.i5$3, global.WebViewer, global.ng.material.tabs, global.ng.material.divider, global.ng.common.locales.ar, global.ng.common.locales.en, global.reactiveFormValidators, global.ng.material.badge, global.ng.material.toolbar));
-})(this, (function (exports, i0, i4, i1, i6, operators, i2, rxjs, CryptoJS, i1$1, moment$4, i2$1, i3, moment_, i2$3, i8, i2$5, i9, i1$2, i2$2, i3$1, i6$1, i2$4, i1$3, i1$4, animations, i4$1, tsCacheable, i5, i6$2, i7, i6$3, i1$7, i7$1, datepicker, i5$1, i2$7, i2$6, i6$4, core, i3$2, i1$6, i1$5, moment$5, formiojs, _, _find, _isEqual, i4$2, i5$2, i7$2, Dynamsoft, i4$3, chart_js, chartjsPluginPiechartOutlabels, chartjsPluginLabels, i3$3, FileSaver, i4$4, i5$3, WebViewer, i1$8, i8$1, localeAr, localeEn, reactiveFormValidators, i7$3, toolbar) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/forms'), require('rxjs/operators'), require('@angular/platform-browser'), require('rxjs'), require('crypto-js'), require('@ngx-translate/core'), require('moment-es6'), require('keycloak-angular'), require('ngx-cookie-service'), require('moment-hijri'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('@angular/material/tooltip'), require('ngx-infinite-scroll'), require('@angular/router'), require('@angular/material/list'), require('@angular/material/menu'), require('angular-ng-autocomplete'), require('@angular/material/core'), require('@angular/material/dialog'), require('ngx-toastr'), require('@angular/animations'), require('@angular/cdk/bidi'), require('ts-cacheable'), require('@ng-select/ng-select'), require('@angular/material/form-field'), require('@angular/material/chips'), require('@angular/material/expansion'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/datepicker'), require('@angular/material/input'), require('@angular/material/radio'), require('@angular/material/slide-toggle'), require('@busacca/ng-pick-datetime'), require('@mat-datetimepicker/core'), require('angular-formio'), require('ngx-treeview'), require('@ng-bootstrap/ng-bootstrap'), require('moment'), require('formiojs'), require('lodash'), require('lodash/find'), require('lodash/isEqual'), require('@swimlane/ngx-datatable'), require('@angular/cdk/layout'), require('@angular/material/autocomplete'), require('dwt'), require('@angular/material/progress-bar'), require('chart.js'), require('chartjs-plugin-piechart-outlabels'), require('chartjs-plugin-labels'), require('devextreme-angular'), require('file-saver'), require('devextreme-angular/ui/nested'), require('devextreme-angular/core'), require('@pdftron/webviewer'), require('@angular/material/tabs'), require('@angular/material/divider'), require('@angular/common/locales/ar'), require('@angular/common/locales/en'), require('@rxweb/reactive-form-validators'), require('rete-angular-plugin'), require('rete'), require('rete-area-plugin'), require('rete-auto-arrange-plugin'), require('rete-connection-plugin'), require('rete-connection-reroute-plugin'), require('rete-readonly-plugin'), require('rete-minimap-plugin'), require('d3-shape'), require('rete-connection-path-plugin'), require('rete-render-utils'), require('@angular/material/badge'), require('@angular/material/toolbar')) :
+  typeof define === 'function' && define.amd ? define('nuxeo-development-framework', ['exports', '@angular/core', '@angular/common', '@angular/common/http', '@angular/forms', 'rxjs/operators', '@angular/platform-browser', 'rxjs', 'crypto-js', '@ngx-translate/core', 'moment-es6', 'keycloak-angular', 'ngx-cookie-service', 'moment-hijri', '@angular/material/icon', '@angular/material/progress-spinner', '@angular/material/tooltip', 'ngx-infinite-scroll', '@angular/router', '@angular/material/list', '@angular/material/menu', 'angular-ng-autocomplete', '@angular/material/core', '@angular/material/dialog', 'ngx-toastr', '@angular/animations', '@angular/cdk/bidi', 'ts-cacheable', '@ng-select/ng-select', '@angular/material/form-field', '@angular/material/chips', '@angular/material/expansion', '@angular/material/button', '@angular/material/checkbox', '@angular/material/datepicker', '@angular/material/input', '@angular/material/radio', '@angular/material/slide-toggle', '@busacca/ng-pick-datetime', '@mat-datetimepicker/core', 'angular-formio', 'ngx-treeview', '@ng-bootstrap/ng-bootstrap', 'moment', 'formiojs', 'lodash', 'lodash/find', 'lodash/isEqual', '@swimlane/ngx-datatable', '@angular/cdk/layout', '@angular/material/autocomplete', 'dwt', '@angular/material/progress-bar', 'chart.js', 'chartjs-plugin-piechart-outlabels', 'chartjs-plugin-labels', 'devextreme-angular', 'file-saver', 'devextreme-angular/ui/nested', 'devextreme-angular/core', '@pdftron/webviewer', '@angular/material/tabs', '@angular/material/divider', '@angular/common/locales/ar', '@angular/common/locales/en', '@rxweb/reactive-form-validators', 'rete-angular-plugin', 'rete', 'rete-area-plugin', 'rete-auto-arrange-plugin', 'rete-connection-plugin', 'rete-connection-reroute-plugin', 'rete-readonly-plugin', 'rete-minimap-plugin', 'd3-shape', 'rete-connection-path-plugin', 'rete-render-utils', '@angular/material/badge', '@angular/material/toolbar'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["nuxeo-development-framework"] = {}, global.ng.core, global.ng.common, global.ng.common.http, global.ng.forms, global.rxjs.operators, global.ng.platformBrowser, global.rxjs, global.CryptoJS, global.i1$1, global.moment$4, global.i2$1, global.i3, global.moment_, global.ng.material.icon, global.ng.material.progressSpinner, global.ng.material.tooltip, global.i9, global.ng.router, global.ng.material.list, global.ng.material.menu, global.i6$1, global.ng.material.core, global.ng.material.dialog, global.i1$4, global.ng.animations, global.ng.cdk.bidi, global.tsCacheable, global.i5, global.ng.material.formField, global.ng.material.chips, global.ng.material.expansion, global.ng.material.button, global.ng.material.checkbox, global.ng.material.datepicker, global.ng.material.input, global.ng.material.radio, global.ng.material.slideToggle, global.i6$4, global.core, global.i3$2, global.i1$6, global.i1$5, global.moment$5, global.formiojs, global._, global._find, global._isEqual, global.i4$2, global.ng.cdk.layout, global.ng.material.autocomplete, global.Dynamsoft, global.ng.material.progressBar, global.chart_js, null, null, global.i3$3, global.FileSaver, global.i4$4, global.i5$3, global.WebViewer, global.ng.material.tabs, global.ng.material.divider, global.ng.common.locales.ar, global.ng.common.locales.en, global.reactiveFormValidators, global.i2$8, global.rete, global.reteAreaPlugin, global.reteAutoArrangePlugin, global.reteConnectionPlugin, global.reteConnectionReroutePlugin, global.reteReadonlyPlugin, global.reteMinimapPlugin, global.d3Shape, global.reteConnectionPathPlugin, global.reteRenderUtils, global.ng.material.badge, global.ng.material.toolbar));
+})(this, (function (exports, i0, i4, i1, i6, operators, i2, rxjs, CryptoJS, i1$1, moment$4, i2$1, i3, moment_, i2$3, i8, i2$5, i9, i1$2, i2$2, i3$1, i6$1, i2$4, i1$3, i1$4, animations, i4$1, tsCacheable, i5, i6$2, i7, i6$3, i1$7, i7$1, datepicker, i5$1, i2$7, i2$6, i6$4, core, i3$2, i1$6, i1$5, moment$5, formiojs, _, _find, _isEqual, i4$2, i5$2, i7$2, Dynamsoft, i4$3, chart_js, chartjsPluginPiechartOutlabels, chartjsPluginLabels, i3$3, FileSaver, i4$4, i5$3, WebViewer, i1$8, i8$1, localeAr, localeEn, reactiveFormValidators, i2$8, rete, reteAreaPlugin, reteAutoArrangePlugin, reteConnectionPlugin, reteConnectionReroutePlugin, reteReadonlyPlugin, reteMinimapPlugin, d3Shape, reteConnectionPathPlugin, reteRenderUtils, i7$3, toolbar) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -79,6 +79,7 @@
   var i8__namespace$1 = /*#__PURE__*/_interopNamespace(i8$1);
   var localeAr__default = /*#__PURE__*/_interopDefaultLegacy(localeAr);
   var localeEn__default = /*#__PURE__*/_interopDefaultLegacy(localeEn);
+  var i2__namespace$8 = /*#__PURE__*/_interopNamespace(i2$8);
   var i7__namespace$3 = /*#__PURE__*/_interopNamespace(i7$3);
 
   var NuxeoDevelopmentFrameworkComponent = /** @class */ (function () {
@@ -7948,6 +7949,23 @@
               return treeItem;
           });
       };
+      DepartmentApiService.prototype.getFullDepartmentTree = function (customPageProvider, customParams) {
+          var obj = customParams ? customParams : {};
+          var params = Object.assign({ pageProvider: customPageProvider ? customPageProvider : 'PP_Department', currentPageIndex: 0, offset: 0, pageSize: 40, quickFilters: 'Parent Dept' }, obj);
+          if (this.globalAdminService.isGlobalAdmin) {
+              params['queryParams'] = this.globalAdminService.activeTenant;
+          }
+          else if (!this.globalAdminService.isGlobalAdmin && this.nuxeoService.nuxeoClient.user.properties.tenantId) {
+              params['queryParams'] = this.nuxeoService.nuxeoClient.user.properties.tenantId;
+          }
+          return this.CallApiService.query(Object.assign({}, params), {
+              headers: {
+                  'X-NXproperties': '*',
+                  'enrichers-document': 'children',
+                  depth: 'max',
+              },
+          });
+      };
       return DepartmentApiService;
   }());
   DepartmentApiService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DepartmentApiService, deps: [{ token: CallApiService }, { token: TranslationService }, { token: NuxeoService }, { token: AdapterService }, { token: GlobalAdminService }, { token: 'environment' }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
@@ -7990,6 +8008,12 @@
           cacheBusterNotifier: departmentCacheBuster$,
       })
   ], DepartmentApiService.prototype, "updateDepartment", null);
+  __decorate([
+      tsCacheable.Cacheable({
+          cacheBusterObserver: departmentCacheBuster$,
+          storageStrategy: tsCacheable.LocalStorageStrategy
+      })
+  ], DepartmentApiService.prototype, "getFullDepartmentTree", null);
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DepartmentApiService, decorators: [{
               type: i0.Injectable,
               args: [{
@@ -8000,7 +8024,7 @@
                           type: i0.Inject,
                           args: ['environment']
                       }] }];
-      }, propDecorators: { getDepartmentTree: [], getDepartmentDetails: [], getDepartmentNestedTree: [], createDepartment: [], createDepartmentInRoot: [], updateDepartment: [] } });
+      }, propDecorators: { getDepartmentTree: [], getDepartmentDetails: [], getDepartmentNestedTree: [], createDepartment: [], createDepartmentInRoot: [], updateDepartment: [], getFullDepartmentTree: [] } });
 
   var _DropdownTreeviewSelectI18n_defaultSelection;
   /** @ignore */
@@ -15290,6 +15314,7 @@
                   allinputs[i].value = '';
               }
           }
+          //@ts-ignore
           if (Dynamsoft__default["default"].Lib.env.bIE === true && Dynamsoft__default["default"].Lib.env.bWin64 === true) {
               var o = document.getElementById('samplesource64bit');
               if (o) {
@@ -25048,6 +25073,82 @@
                   type: i0.Input
               }] } });
 
+  var _FileGridInfiniteScrollDirective_instances, _FileGridInfiniteScrollDirective_scrollSubject, _FileGridInfiniteScrollDirective_scrollHandler, _FileGridInfiniteScrollDirective_isNodeChanging, _FileGridInfiniteScrollDirective_handleViewModeChanged, _FileGridInfiniteScrollDirective_removeListener;
+  var FileGridInfiniteScrollDirective = /** @class */ (function () {
+      function FileGridInfiniteScrollDirective() {
+          _FileGridInfiniteScrollDirective_instances.add(this);
+          this.infiniteScrollDistance = 5;
+          this.scrolled = new i0.EventEmitter();
+          _FileGridInfiniteScrollDirective_scrollSubject.set(this, new rxjs.Subject());
+          _FileGridInfiniteScrollDirective_scrollHandler.set(this, void 0);
+          _FileGridInfiniteScrollDirective_isNodeChanging.set(this, false);
+      }
+      FileGridInfiniteScrollDirective.prototype.ngAfterViewInit = function () {
+          var _this = this;
+          this.fileManager.instance.on('contentReady', function (e) {
+              __classPrivateFieldGet(_this, _FileGridInfiniteScrollDirective_instances, "m", _FileGridInfiniteScrollDirective_handleViewModeChanged).call(_this);
+          });
+          this.fileManager.instance.on('optionChanged', function (e) {
+              if (e.fullName === 'itemView.mode') {
+                  __classPrivateFieldGet(_this, _FileGridInfiniteScrollDirective_instances, "m", _FileGridInfiniteScrollDirective_handleViewModeChanged).call(_this);
+              }
+              else if (e.fullName === 'currentPath') {
+                  __classPrivateFieldSet(_this, _FileGridInfiniteScrollDirective_isNodeChanging, true, "f");
+                  __classPrivateFieldGet(_this, _FileGridInfiniteScrollDirective_instances, "m", _FileGridInfiniteScrollDirective_handleViewModeChanged).call(_this);
+                  setTimeout(function () { __classPrivateFieldSet(_this, _FileGridInfiniteScrollDirective_isNodeChanging, false, "f"); }, 1000);
+              }
+          });
+          __classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_scrollSubject, "f").pipe(operators.debounceTime(500)).subscribe(function () {
+              _this.scrolled.emit();
+              console.log('scroll trigered');
+          });
+      };
+      return FileGridInfiniteScrollDirective;
+  }());
+  _FileGridInfiniteScrollDirective_scrollSubject = new WeakMap(), _FileGridInfiniteScrollDirective_scrollHandler = new WeakMap(), _FileGridInfiniteScrollDirective_isNodeChanging = new WeakMap(), _FileGridInfiniteScrollDirective_instances = new WeakSet(), _FileGridInfiniteScrollDirective_handleViewModeChanged = function _FileGridInfiniteScrollDirective_handleViewModeChanged() {
+      var _this = this;
+      try {
+          __classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_instances, "m", _FileGridInfiniteScrollDirective_removeListener).call(this);
+          setTimeout(function () {
+              var scrollableElement = _this.fileManager.instance._itemView._$element[0].getElementsByClassName('dx-scrollable-container')[0];
+              // Define the event handler function
+              var onScroll = function () {
+                  if (__classPrivateFieldGet(_this, _FileGridInfiniteScrollDirective_isNodeChanging, "f"))
+                      return;
+                  var scrollTop = scrollableElement.scrollTop;
+                  var scrollHeight = scrollableElement.scrollHeight;
+                  var clientHeight = scrollableElement.clientHeight;
+                  if (scrollTop + clientHeight >= scrollHeight - _this.infiniteScrollDistance) {
+                      __classPrivateFieldGet(_this, _FileGridInfiniteScrollDirective_scrollSubject, "f").next();
+                  }
+              };
+              __classPrivateFieldSet(_this, _FileGridInfiniteScrollDirective_scrollHandler, onScroll, "f");
+              scrollableElement.addEventListener('scroll', onScroll);
+          }, 100);
+      }
+      catch (e) { }
+  }, _FileGridInfiniteScrollDirective_removeListener = function _FileGridInfiniteScrollDirective_removeListener() {
+      var scrollableElement = this.fileManager.instance._itemView._$element[0].getElementsByClassName('dx-scrollable-container')[0];
+      if (__classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_scrollHandler, "f")) {
+          scrollableElement.removeEventListener('scroll', __classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_scrollHandler, "f"));
+      }
+  };
+  FileGridInfiniteScrollDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileGridInfiniteScrollDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+  FileGridInfiniteScrollDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FileGridInfiniteScrollDirective, selector: "[ndfFileGridInfiniteScroll]", inputs: { fileManager: ["ndfFileGridInfiniteScroll", "fileManager"], infiniteScrollDistance: "infiniteScrollDistance" }, outputs: { scrolled: "scrolled" }, ngImport: i0__namespace });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileGridInfiniteScrollDirective, decorators: [{
+              type: i0.Directive,
+              args: [{
+                      selector: '[ndfFileGridInfiniteScroll]'
+                  }]
+          }], propDecorators: { fileManager: [{
+                  type: i0.Input,
+                  args: ['ndfFileGridInfiniteScroll']
+              }], infiniteScrollDistance: [{
+                  type: i0.Input
+              }], scrolled: [{
+                  type: i0.Output
+              }] } });
+
   var _FileManagerAbstract_instances, _FileManagerAbstract_foldersSubscription$, _FileManagerAbstract_loadMore, _FileManagerAbstract_resetPagination, _FileManagerAbstract_initPagination, _FileManagerAbstract_getNode, _FileManagerAbstract_addOrReplace;
   //
   var FileManagerAbstract = /** @class */ (function () {
@@ -27170,82 +27271,6 @@
                   }]
           }] });
 
-  var _FileGridInfiniteScrollDirective_instances, _FileGridInfiniteScrollDirective_scrollSubject, _FileGridInfiniteScrollDirective_scrollHandler, _FileGridInfiniteScrollDirective_isNodeChanging, _FileGridInfiniteScrollDirective_handleViewModeChanged, _FileGridInfiniteScrollDirective_removeListener;
-  var FileGridInfiniteScrollDirective = /** @class */ (function () {
-      function FileGridInfiniteScrollDirective() {
-          _FileGridInfiniteScrollDirective_instances.add(this);
-          this.infiniteScrollDistance = 5;
-          this.scrolled = new i0.EventEmitter();
-          _FileGridInfiniteScrollDirective_scrollSubject.set(this, new rxjs.Subject());
-          _FileGridInfiniteScrollDirective_scrollHandler.set(this, void 0);
-          _FileGridInfiniteScrollDirective_isNodeChanging.set(this, false);
-      }
-      FileGridInfiniteScrollDirective.prototype.ngAfterViewInit = function () {
-          var _this = this;
-          this.fileManager.instance.on('contentReady', function (e) {
-              __classPrivateFieldGet(_this, _FileGridInfiniteScrollDirective_instances, "m", _FileGridInfiniteScrollDirective_handleViewModeChanged).call(_this);
-          });
-          this.fileManager.instance.on('optionChanged', function (e) {
-              if (e.fullName === 'itemView.mode') {
-                  __classPrivateFieldGet(_this, _FileGridInfiniteScrollDirective_instances, "m", _FileGridInfiniteScrollDirective_handleViewModeChanged).call(_this);
-              }
-              else if (e.fullName === 'currentPath') {
-                  __classPrivateFieldSet(_this, _FileGridInfiniteScrollDirective_isNodeChanging, true, "f");
-                  __classPrivateFieldGet(_this, _FileGridInfiniteScrollDirective_instances, "m", _FileGridInfiniteScrollDirective_handleViewModeChanged).call(_this);
-                  setTimeout(function () { __classPrivateFieldSet(_this, _FileGridInfiniteScrollDirective_isNodeChanging, false, "f"); }, 1000);
-              }
-          });
-          __classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_scrollSubject, "f").pipe(operators.debounceTime(500)).subscribe(function () {
-              _this.scrolled.emit();
-              console.log('scroll trigered');
-          });
-      };
-      return FileGridInfiniteScrollDirective;
-  }());
-  _FileGridInfiniteScrollDirective_scrollSubject = new WeakMap(), _FileGridInfiniteScrollDirective_scrollHandler = new WeakMap(), _FileGridInfiniteScrollDirective_isNodeChanging = new WeakMap(), _FileGridInfiniteScrollDirective_instances = new WeakSet(), _FileGridInfiniteScrollDirective_handleViewModeChanged = function _FileGridInfiniteScrollDirective_handleViewModeChanged() {
-      var _this = this;
-      try {
-          __classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_instances, "m", _FileGridInfiniteScrollDirective_removeListener).call(this);
-          setTimeout(function () {
-              var scrollableElement = _this.fileManager.instance._itemView._$element[0].getElementsByClassName('dx-scrollable-container')[0];
-              // Define the event handler function
-              var onScroll = function () {
-                  if (__classPrivateFieldGet(_this, _FileGridInfiniteScrollDirective_isNodeChanging, "f"))
-                      return;
-                  var scrollTop = scrollableElement.scrollTop;
-                  var scrollHeight = scrollableElement.scrollHeight;
-                  var clientHeight = scrollableElement.clientHeight;
-                  if (scrollTop + clientHeight >= scrollHeight - _this.infiniteScrollDistance) {
-                      __classPrivateFieldGet(_this, _FileGridInfiniteScrollDirective_scrollSubject, "f").next();
-                  }
-              };
-              __classPrivateFieldSet(_this, _FileGridInfiniteScrollDirective_scrollHandler, onScroll, "f");
-              scrollableElement.addEventListener('scroll', onScroll);
-          }, 100);
-      }
-      catch (e) { }
-  }, _FileGridInfiniteScrollDirective_removeListener = function _FileGridInfiniteScrollDirective_removeListener() {
-      var scrollableElement = this.fileManager.instance._itemView._$element[0].getElementsByClassName('dx-scrollable-container')[0];
-      if (__classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_scrollHandler, "f")) {
-          scrollableElement.removeEventListener('scroll', __classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_scrollHandler, "f"));
-      }
-  };
-  FileGridInfiniteScrollDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileGridInfiniteScrollDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-  FileGridInfiniteScrollDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FileGridInfiniteScrollDirective, selector: "[ndfFileGridInfiniteScroll]", inputs: { fileManager: ["ndfFileGridInfiniteScroll", "fileManager"], infiniteScrollDistance: "infiniteScrollDistance" }, outputs: { scrolled: "scrolled" }, ngImport: i0__namespace });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileGridInfiniteScrollDirective, decorators: [{
-              type: i0.Directive,
-              args: [{
-                      selector: '[ndfFileGridInfiniteScroll]'
-                  }]
-          }], propDecorators: { fileManager: [{
-                  type: i0.Input,
-                  args: ['ndfFileGridInfiniteScroll']
-              }], infiniteScrollDistance: [{
-                  type: i0.Input
-              }], scrolled: [{
-                  type: i0.Output
-              }] } });
-
   var FileMangerModule = /** @class */ (function () {
       function FileMangerModule() {
       }
@@ -29025,6 +29050,1520 @@
                   }]
           }] });
 
+  var DIAGRAM_DEFAULT_OPTIONS = {
+      socketType: 'custom',
+      connectionType: 'custom',
+      fitToView: true,
+      area: {
+          restrict: true,
+          scaling: { min: 0.5, max: 1.3 },
+      },
+      path: {
+          arrow: {
+              color: 'var(--path-color , #5d6481)',
+              marker: 'M-3,-6 L-3,6 L10,0 Z',
+          },
+          transform: {
+              active: true,
+          },
+      },
+  };
+
+  var IN_OUT_DIRECTION = {
+      start: 'start',
+      end: 'end',
+      top: 'top',
+      bottom: 'bottom',
+  };
+
+  var MESSAGE_TYPE = {
+      configUpdated: 'configUpdated',
+      refresh: 'refresh',
+  };
+
+  var NODE_TYPE = {
+      start: 'start',
+      content: 'content',
+      template: 'template',
+      end: 'end',
+  };
+
+  var NOTIFY_EVENT = {
+      remove: 'remove',
+  };
+
+  var NODE_MARGIN = 60;
+  var NODE_WIDTH = 150;
+  var NODE_HEIGHT = 118;
+  var NODE_CIRCLE_SIZE = 72;
+  var DIAGRAM_HEIGHT = 600;
+  var SOCKET_WIDTH = 8;
+
+  var NODE_STATUS = {
+      draft: 'draft',
+      completed: 'completed',
+      rejected: 'rejected',
+      inProgress: 'inProgress',
+      upcoming: 'upcoming',
+      approved: 'approved',
+  };
+
+  var DiagramPluginsService = /** @class */ (function () {
+      function DiagramPluginsService() {
+      }
+      DiagramPluginsService.prototype.setPlugins = function (_a) {
+          var plugins = _a.plugins, layout = _a.layout;
+          this.area = plugins.area;
+          this.readonly = plugins.readonly;
+          this.arrange = plugins.arrange;
+          this.reroute = plugins.reroute;
+      };
+      DiagramPluginsService.prototype.destroy = function () {
+          this.area.destroy();
+      };
+      return DiagramPluginsService;
+  }());
+  DiagramPluginsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramPluginsService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  DiagramPluginsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramPluginsService });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramPluginsService, decorators: [{
+              type: i0.Injectable
+          }] });
+
+  var BaseNodeClass = /** @class */ (function (_super) {
+      __extends(BaseNodeClass, _super);
+      function BaseNodeClass(config) {
+          var _this = _super.call(this, config.label) || this;
+          _this.type = NODE_TYPE.content;
+          _this.width = NODE_WIDTH;
+          _this.height = NODE_HEIGHT;
+          _this.directions = {
+              inputs: IN_OUT_DIRECTION.start,
+              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;
+          _this.type = config.type || NODE_TYPE.content;
+          _this.description = config === null || config === void 0 ? void 0 : config.description;
+          _this.status = config === null || config === void 0 ? void 0 : config.status;
+          _this.width = (config === null || config === void 0 ? void 0 : config.width) || NODE_WIDTH;
+          _this.height = (config === null || config === void 0 ? void 0 : config.height) || NODE_HEIGHT;
+          _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;
+          return _this;
+      }
+      return BaseNodeClass;
+  }(rete.ClassicPreset.Node));
+
+  var CircleNode = /** @class */ (function (_super) {
+      __extends(CircleNode, _super);
+      function CircleNode(config) {
+          var _this = _super.call(this, config) || this;
+          _this.width = NODE_CIRCLE_SIZE;
+          _this.height = NODE_CIRCLE_SIZE;
+          return _this;
+      }
+      return CircleNode;
+  }(BaseNodeClass));
+
+  var Connection = /** @class */ (function (_super) {
+      __extends(Connection, _super);
+      function Connection() {
+          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+          _this.renderType = 'default';
+          return _this;
+      }
+      return Connection;
+  }(rete.ClassicPreset.Connection));
+
+  var ContentNode = /** @class */ (function (_super) {
+      __extends(ContentNode, _super);
+      function ContentNode(config) {
+          return _super.call(this, config) || this;
+      }
+      return ContentNode;
+  }(BaseNodeClass));
+
+  var Socket = /** @class */ (function (_super) {
+      __extends(Socket, _super);
+      function Socket(name, renderType) {
+          if (renderType === void 0) { renderType = 'default'; }
+          var _this = _super.call(this, name) || this;
+          _this.renderType = renderType;
+          return _this;
+      }
+      return Socket;
+  }(rete.ClassicPreset.Socket));
+
+  var TemplateNode = /** @class */ (function (_super) {
+      __extends(TemplateNode, _super);
+      function TemplateNode(config) {
+          var _this = _super.call(this, config) || this;
+          _this.type = NODE_TYPE.template;
+          if (config.template) {
+              _this.template = config.template;
+          }
+          return _this;
+      }
+      return TemplateNode;
+  }(BaseNodeClass));
+
+  /**
+   *
+   * @param config
+   * @returns
+   */
+  var customizeSocket = function (config) { return function (data) {
+      var payload = data.payload;
+      if (payload.renderType === 'custom' || config.socketType === 'custom') {
+          return CustomSocketComponent;
+      }
+      return i2$8.SocketComponent;
+  }; };
+  /**
+   *
+   * @param config
+   * @param editor
+   * @returns
+   */
+  var customizeNode = function (config, editor) { return function (data) {
+      var _a;
+      var node = data.payload;
+      (_a = node.config) !== null && _a !== void 0 ? _a : (node.config = config['node']);
+      return initAngularComponentByType(node.type);
+  }; };
+  /**
+   *
+   * @param config
+   * @returns
+   */
+  var customizeConnection = function (config) { return function (data) {
+      var payload = data.payload;
+      if (payload.renderType === 'custom' || config.connectionType == 'custom') {
+          return CustomConnectionComponent;
+      }
+      return i2$8.ConnectionComponent;
+  }; };
+  var initNodeByType = function (type, config) {
+      var _nodes = {
+          start: CircleNode,
+          content: ContentNode,
+          template: TemplateNode,
+          end: CircleNode,
+      };
+      return new _nodes[type](config) || new ContentNode(config);
+  };
+  var initAngularComponentByType = function (type) {
+      var _components = {
+          content: ContentNodeComponent,
+          start: CircleNodeComponent,
+          end: CircleNodeComponent,
+          template: TemplateNodeComponent,
+      };
+      return _components[type] || i2$8.NodeComponent;
+  };
+
+  var createSegmentedPath = function (connection, options) {
+      var _a = options || {}, _b = _a.multiPoints, multiPoints = _b === void 0 ? true : _b, _c = _a.offset, offset = _c === void 0 ? 0 : _c;
+      return function (points) {
+          if (points.length !== 2) {
+              throw new Error('Exactly two points are required to create a linear path.');
+          }
+          var _a = __read(points, 2), start = _a[0], end = _a[1];
+          if (multiPoints) {
+              var midpointY = (end.y - start.y) / 2 + start.y;
+              var intermediatePoints = [
+                  { x: start.x, y: midpointY - offset },
+                  { x: end.x, y: midpointY + offset },
+              ];
+              // Use bezier curves between points to smooth corners
+              return [
+                  Object.assign(Object.assign({}, start), { controlOut: { x: start.x, y: midpointY - offset } }),
+                  intermediatePoints[0],
+                  intermediatePoints[1],
+                  Object.assign(Object.assign({}, end), { controlIn: { x: end.x, y: midpointY + offset } }),
+              ];
+          }
+          return [start, end];
+      };
+  };
+
+  var initPathPlugin = function (config) { return new reteConnectionPathPlugin.ConnectionPathPlugin({
+      curve: function (c) { var _a; return (_a = (c.curve || (config === null || config === void 0 ? void 0 : config.curve))) !== null && _a !== void 0 ? _a : d3Shape.curveLinear; },
+      transformer: function (c) {
+          var _a, _b, _c;
+          return ((_a = config === null || config === void 0 ? void 0 : config.transform) === null || _a === void 0 ? void 0 : _a.active)
+              ? createSegmentedPath(c, (_b = config === null || config === void 0 ? void 0 : config.transform) === null || _b === void 0 ? void 0 : _b.options)
+              : reteConnectionPathPlugin.Transformers.classic({
+                  vertical: !!(config === null || config === void 0 ? void 0 : config.vertical),
+                  curvature: (_c = config === null || config === void 0 ? void 0 : config.curvature) !== null && _c !== void 0 ? _c : 0.3,
+              });
+      },
+      arrow: function (connection) { return (!(config === null || config === void 0 ? void 0 : config.arrow) ? false : config === null || config === void 0 ? void 0 : config.arrow); },
+  }); };
+
+  var socketPositionWatcher = function (offset, isVertical, editor) {
+      if (offset === void 0) { offset = 1; }
+      if (isVertical === void 0) { isVertical = false; }
+      return reteRenderUtils.getDOMSocketPosition({
+          offset: function (_a, nodeId, side, key) {
+              var x = _a.x, y = _a.y;
+              return { x: x, y: y };
+          },
+      });
+  };
+
+  var createDiagramEditor = function (container, injector, config) { return __awaiter(void 0, void 0, void 0, function () {
+      var _a, _b, _c, _d, _e, _f, _g, socket, editor, area, connection, pathPlugin, angularRender, readonly, arrange, reroute, minimap, selector, accumulating, _scaling_1;
+      return __generator(this, function (_h) {
+          socket = new Socket('', config === null || config === void 0 ? void 0 : config.socketType);
+          editor = new rete.NodeEditor();
+          area = new reteAreaPlugin.AreaPlugin(container);
+          connection = new reteConnectionPlugin.ConnectionPlugin();
+          pathPlugin = initPathPlugin(config === null || config === void 0 ? void 0 : config.path);
+          angularRender = new i2$8.AngularPlugin({ injector: injector });
+          readonly = new reteReadonlyPlugin.ReadonlyPlugin();
+          arrange = new reteAutoArrangePlugin.AutoArrangePlugin();
+          reroute = new reteConnectionReroutePlugin.ReroutePlugin();
+          minimap = new reteMinimapPlugin.MinimapPlugin((_a = config === null || config === void 0 ? void 0 : config.minimap) === null || _a === void 0 ? void 0 : _a.options);
+          selector = reteAreaPlugin.AreaExtensions.selector();
+          accumulating = reteAreaPlugin.AreaExtensions.accumulateOnCtrl();
+          reteAreaPlugin.AreaExtensions.selectableNodes(area, selector, { accumulating: accumulating });
+          reteConnectionReroutePlugin.RerouteExtensions.selectablePins(reroute, selector, accumulating);
+          //#endregion
+          //#region PRESETS
+          arrange.addPreset(reteAutoArrangePlugin.Presets.classic.setup());
+          angularRender.addPreset(i2$8.Presets.classic.setup({
+              socketPositionWatcher: socketPositionWatcher(0, (_b = config === null || config === void 0 ? void 0 : config.path) === null || _b === void 0 ? void 0 : _b.vertical, editor),
+              customize: {
+                  node: customizeNode(config, editor),
+                  connection: customizeConnection(config),
+                  socket: customizeSocket(config),
+              },
+          }));
+          angularRender.addPreset(i2$8.Presets.minimap.setup({ size: ((_c = config === null || config === void 0 ? void 0 : config.minimap) === null || _c === void 0 ? void 0 : _c.size) || 150 }));
+          connection.addPreset(reteConnectionPlugin.Presets.classic.setup());
+          if ((_d = config === null || config === void 0 ? void 0 : config.area) === null || _d === void 0 ? void 0 : _d.restrict) {
+              _scaling_1 = (config === null || config === void 0 ? void 0 : config.area.scaling) || { min: 0.5, max: 1.5 };
+              reteAreaPlugin.AreaExtensions.restrictor(area, {
+                  scaling: function () { return _scaling_1; },
+              });
+          }
+          //#endregion
+          //#region USE
+          if ((_e = config === null || config === void 0 ? void 0 : config.readonly) === null || _e === void 0 ? void 0 : _e.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)) {
+              // Don't use the connection plugin in readonly mode
+              area.use(connection);
+          }
+          if (config === null || config === void 0 ? void 0 : config.enableArrange) {
+              area.use(arrange);
+          }
+          //@ts-ignore
+          angularRender.use(pathPlugin);
+          if (config.reroute) {
+              //@ts-ignore
+              angularRender.use(reroute);
+          }
+          if ((_g = config === null || config === void 0 ? void 0 : config.minimap) === null || _g === void 0 ? void 0 : _g.active) {
+              area.use(minimap);
+          }
+          // Render Diagram
+          area.use(angularRender);
+          //#endregion
+          return [2 /*return*/, {
+                  editor: editor,
+                  socket: socket,
+                  plugins: {
+                      area: area,
+                      connection: connection,
+                      arrange: arrange,
+                      reroute: reroute,
+                      readonly: readonly,
+                  },
+                  destroy: function () { return area.destroy(); },
+                  layout: function (props) { return arrange.layout(props); },
+                  fitToZoom: function () {
+                      reteAreaPlugin.AreaExtensions.zoomAt(area, editor.getNodes());
+                  },
+              }];
+      });
+  }); };
+
+  /**
+   *
+   * @param node
+   * @returns
+   */
+  var removeNode = function (data, editor) { return __awaiter(void 0, void 0, void 0, function () {
+      var nodes, node, nodeConfig, _a;
+      return __generator(this, function (_b) {
+          switch (_b.label) {
+              case 0:
+                  if (!data || !editor) {
+                      console.log('Node not found.');
+                      return [2 /*return*/];
+                  }
+                  nodes = editor.getNodes();
+                  node = editor.getNode(data.nodeId);
+                  if (!node) {
+                      console.log('Node not found.');
+                      return [2 /*return*/];
+                  }
+                  if (node.type === NODE_TYPE.start && nodes.length > 1) {
+                      return [2 /*return*/];
+                  }
+                  nodeConfig = node.config;
+                  if (!(nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.isLinked)) return [3 /*break*/, 2];
+                  return [4 /*yield*/, removeNodeAndReplaceConnections(node, editor)];
+              case 1:
+                  _a = _b.sent();
+                  return [3 /*break*/, 4];
+              case 2: return [4 /*yield*/, removeNodeAndConnections(node, editor)];
+              case 3:
+                  _a = _b.sent();
+                  _b.label = 4;
+              case 4: return [2 /*return*/, _a];
+          }
+      });
+  }); };
+  /**
+   *
+   * @param node
+   * @param editor
+   */
+  var removeNodeAndConnections = function (node, editor) { return __awaiter(void 0, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+          switch (_a.label) {
+              case 0:
+                  removeConnections(node, editor);
+                  return [4 /*yield*/, editor.removeNode(node.id)];
+              case 1:
+                  _a.sent();
+                  return [2 /*return*/];
+          }
+      });
+  }); };
+  /**
+   *
+   * @param node
+   * @param editor
+   */
+  var removeNodeAndReplaceConnections = function (node, editor) { return __awaiter(void 0, void 0, void 0, function () {
+      var outputs, inputs;
+      return __generator(this, function (_a) {
+          switch (_a.label) {
+              case 0:
+                  outputs = getConnections(editor, function (connection) { return connection.source == node.id; });
+                  inputs = getConnections(editor, function (connection) { return connection.target == node.id; });
+                  if (!(!!inputs.length && !!outputs.length)) return [3 /*break*/, 2];
+                  return [4 /*yield*/, _updateConnections(outputs, inputs, editor)];
+              case 1:
+                  _a.sent();
+                  return [3 /*break*/, 3];
+              case 2:
+                  removeConnections(node, editor);
+                  _a.label = 3;
+              case 3: return [4 /*yield*/, editor.removeNode(node.id)];
+              case 4:
+                  _a.sent();
+                  return [2 /*return*/];
+          }
+      });
+  }); };
+  /**
+   *
+   * @param node
+   * @param editor
+   */
+  var removeConnections = function (node, editor) {
+      var connections = getConnections(editor, function (connection) { return connection.source === node.id || connection.target === node.id; });
+      if (connections.length) {
+          connections.forEach(function (connection) {
+              editor.removeConnection(connection.id);
+          });
+      }
+  };
+  /**
+   *
+   * @param editor
+   * @param predicate
+   * @returns
+   */
+  var getConnections = function (editor, predicate) {
+      return editor.getConnections().filter(predicate);
+  };
+  /**
+   *
+   * @param outputs
+   * @param inputs
+   * @param editor
+   */
+  var _updateConnections = function (outputs, inputs, editor) { return __awaiter(void 0, void 0, void 0, function () {
+      var source, target, sourceNode, targetNode, connection;
+      return __generator(this, function (_a) {
+          switch (_a.label) {
+              case 0:
+                  source = inputs[0].source;
+                  target = outputs[0].target;
+                  sourceNode = editor.getNode(source);
+                  targetNode = editor.getNode(target);
+                  __spreadArray(__spreadArray([], __read(outputs)), __read(inputs)).forEach(function (connection) { return __awaiter(void 0, void 0, void 0, function () {
+                      return __generator(this, function (_a) {
+                          switch (_a.label) {
+                              case 0: return [4 /*yield*/, editor.removeConnection(connection.id)];
+                              case 1:
+                                  _a.sent();
+                                  return [2 /*return*/];
+                          }
+                      });
+                  }); });
+                  if (!sourceNode || !targetNode) {
+                      return [2 /*return*/];
+                  }
+                  connection = new Connection(sourceNode, sourceNode.id + "-output", targetNode, targetNode.id + "-input");
+                  return [4 /*yield*/, editor.addConnection(connection)];
+              case 1:
+                  _a.sent();
+                  return [2 /*return*/];
+          }
+      });
+  }); };
+
+  function serializePort(port) {
+      return {
+          id: port.id,
+          label: port.label,
+          socket: {
+              name: port.socket.name,
+          },
+      };
+  }
+  function serializeControl(control) {
+      if (control instanceof rete.ClassicPreset.InputControl) {
+          return {
+              __type: 'ClassicPreset.InputControl',
+              id: control.id,
+              readonly: control.readonly,
+              type: control.type,
+              value: control.value,
+          };
+      }
+      return null;
+  }
+
+  var DiagramService = /** @class */ (function () {
+      /**
+       *
+       */
+      function DiagramService(plugins) {
+          this.plugins = plugins;
+          this._editorSub = new rxjs.Subject();
+          this.onReady$ = this._editorSub.asObservable();
+      }
+      DiagramService.prototype.setEditor = function (editor) {
+          this._editorSub.next(editor);
+          this.editor = editor.editor;
+          this.socket = editor.socket;
+          this.destroy = editor.destroy;
+          this.fitToZoom = editor.fitToZoom;
+      };
+      DiagramService.prototype.getContentNodes = function () {
+          return this.editor
+              .getNodes()
+              .filter(function (nd) { return ![NODE_TYPE.start, NODE_TYPE.end].includes(nd.type); });
+      };
+      DiagramService.prototype.getNodesData = function () {
+          return this.getContentNodes().map(function (node) { return node.content.data; });
+      };
+      DiagramService.prototype.canAddNode = function (nodeType) {
+          if (nodeType === NODE_TYPE.content) {
+              return true;
+          }
+          var _nodes = this.editor.getNodes();
+          var _isExist = _nodes.some(function (nd) { return nd.type === nodeType; });
+          return !_isExist;
+      };
+      DiagramService.prototype.addNode = function (node) {
+          return __awaiter(this, void 0, void 0, function () {
+              return __generator(this, function (_b) {
+                  switch (_b.label) {
+                      case 0: return [4 /*yield*/, this.editor.addNode(node)];
+                      case 1:
+                          _b.sent();
+                          return [2 /*return*/];
+                  }
+              });
+          });
+      };
+      DiagramService.prototype.createNode = function (type, config) {
+          if (type === void 0) { type = NODE_TYPE.content; }
+          var _node = initNodeByType(type, config);
+          if (config.type !== NODE_TYPE.start) {
+              this.createInputs(_node);
+          }
+          if (config.type !== NODE_TYPE.end) {
+              this.createOutputs(_node);
+          }
+          _node.notify = this.notifyListener(_node);
+          return _node;
+      };
+      DiagramService.prototype.shouldAddStart = function (nodeType) {
+          if (nodeType === NODE_TYPE.start) {
+              return false;
+          }
+          var _nodes = this.editor.getNodes();
+          var _isExist = _nodes.some(function (nd) { return nd.type === NODE_TYPE.start; });
+          return !_isExist;
+      };
+      DiagramService.prototype.getLastNode = function () {
+          var nodes = this.editor.getNodes();
+          return nodes.length ? nodes[nodes.length - 1] : null;
+      };
+      DiagramService.prototype.getNodesByType = function (type) {
+          return this.editor.getNodes().filter(function (nd) { return nd.type === type; });
+      };
+      DiagramService.prototype.getLastViewNode = function () {
+          var nodes = Array.from(this.plugins.area.nodeViews.values());
+          return nodes.length ? nodes[nodes.length - 1] : null;
+      };
+      DiagramService.prototype.createInputs = function (node) {
+          node.addInput(node.id + "-input", new rete.ClassicPreset.Input(this.socket));
+          return node;
+      };
+      DiagramService.prototype.createOutputs = function (node) {
+          node.addOutput(node.id + "-output", new rete.ClassicPreset.Output(this.socket, '', false));
+          return node;
+      };
+      DiagramService.prototype.addConnection = function (sourceNode, targetNode) {
+          return __awaiter(this, void 0, void 0, function () {
+              return __generator(this, function (_b) {
+                  switch (_b.label) {
+                      case 0: return [4 /*yield*/, this.editor.addConnection(this.createConnection(sourceNode, targetNode))];
+                      case 1:
+                          _b.sent();
+                          return [2 /*return*/];
+                  }
+              });
+          });
+      };
+      DiagramService.prototype.createConnection = function (sourceNode, targetNode) {
+          var connection = new Connection(sourceNode, sourceNode.id + "-output", targetNode, targetNode.id + "-input");
+          connection.status = targetNode.status;
+          return connection;
+      };
+      DiagramService.prototype.appendConnection = function (connection) {
+          return __awaiter(this, void 0, void 0, function () {
+              return __generator(this, function (_b) {
+                  switch (_b.label) {
+                      case 0: return [4 /*yield*/, this.editor.addConnection(connection)];
+                      case 1:
+                          _b.sent();
+                          return [2 /*return*/];
+                  }
+              });
+          });
+      };
+      DiagramService.prototype.clear = function () {
+          return __awaiter(this, void 0, void 0, function () {
+              return __generator(this, function (_b) {
+                  switch (_b.label) {
+                      case 0: return [4 /*yield*/, this.editor.clear()];
+                      case 1: return [2 /*return*/, _b.sent()];
+                  }
+              });
+          });
+      };
+      DiagramService.prototype.redraw = function () {
+          var _this = this;
+          this.editor.getNodes().forEach(function (node) {
+              _this.plugins.area.update('node', node.id);
+          });
+      };
+      DiagramService.prototype.notifyListener = function (node) {
+          var _this = this;
+          return function (eventType, payload) {
+              var _b;
+              var _a;
+              var _actions = (_b = {},
+                  _b[NOTIFY_EVENT.remove] = _this._removeNode.bind(_this),
+                  _b);
+              return (_a = _actions[eventType]) === null || _a === void 0 ? void 0 : _a.call(_actions, payload);
+          };
+      };
+      DiagramService.prototype._removeNode = function (data) {
+          return __awaiter(this, void 0, void 0, function () {
+              var node, viewNode, config, index, position, direction, nodes, _node, _dir, _position;
+              var _this = this;
+              return __generator(this, function (_b) {
+                  switch (_b.label) {
+                      case 0:
+                          node = this.editor.getNode(data.nodeId);
+                          if (!node) {
+                              return [2 /*return*/];
+                          }
+                          viewNode = function (id) { return _this.plugins.area.nodeViews.get(id); };
+                          config = node.config;
+                          index = null;
+                          position = null;
+                          direction = null;
+                          if (config.isLinked) {
+                              index = this.editor.getNodes().findIndex(function (nd) { return nd.id === data.nodeId; });
+                              position = viewNode(data.nodeId).position;
+                              direction = node.directions;
+                          }
+                          this.plugins.readonly.disable();
+                          return [4 /*yield*/, removeNode(data, this.editor)];
+                      case 1:
+                          _b.sent();
+                          if (!config.isLinked) return [3 /*break*/, 5];
+                          nodes = this.editor.getNodes().slice(index);
+                          _b.label = 2;
+                      case 2:
+                          if (!nodes.length) return [3 /*break*/, 5];
+                          _node = nodes.shift();
+                          _dir = Object.assign({}, _node.directions);
+                          _position = Object.assign({}, viewNode(_node.id).position);
+                          _node.directions = direction;
+                          if (_node.type == NODE_TYPE.end) {
+                              position.y = Math.abs(Math.floor(position.y - (_node.height - NODE_CIRCLE_SIZE) / 2));
+                          }
+                          return [4 /*yield*/, this.plugins.area.translate(_node.id, position)];
+                      case 3:
+                          _b.sent();
+                          return [4 /*yield*/, this.plugins.area.update('node', _node.id)];
+                      case 4:
+                          _b.sent();
+                          position = _position;
+                          direction = _dir;
+                          return [3 /*break*/, 2];
+                      case 5:
+                          this.plugins.readonly.enable();
+                          return [2 /*return*/];
+                  }
+              });
+          });
+      };
+      DiagramService.prototype.translateView = function () {
+          return __awaiter(this, void 0, void 0, function () {
+              var _b, container, area, rect, k, delta, ox, oy;
+              return __generator(this, function (_c) {
+                  _b = this.plugins.area, container = _b.container, area = _b.area;
+                  rect = container.getBoundingClientRect();
+                  k = area.transform.k;
+                  delta = -0.2;
+                  ox = Math.max(0, (rect.left - container.clientWidth / 2) * k);
+                  oy = Math.max(0, (rect.top - container.clientHeight / 2) * k);
+                  area.zoom(Math.max(0.1, k * (1 + delta)), ox * delta, oy * delta);
+                  return [2 /*return*/];
+              });
+          });
+      };
+      return DiagramService;
+  }());
+  DiagramService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramService, deps: [{ token: DiagramPluginsService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  DiagramService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramService });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramService, decorators: [{
+              type: i0.Injectable
+          }], ctorParameters: function () { return [{ type: DiagramPluginsService }]; } });
+
+  var MessageService = /** @class */ (function () {
+      function MessageService() {
+          this.messageSubject = new rxjs.Subject();
+      }
+      MessageService.prototype.sendMessage = function (key, payload) {
+          this.messageSubject.next({ key: key, payload: payload });
+      };
+      MessageService.prototype.onMessage = function (key) {
+          return this.messageSubject.asObservable().pipe(operators.filter(function (data) { return data.key === key; }), operators.map(function (data) { return data.payload; }));
+      };
+      return MessageService;
+  }());
+  MessageService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  MessageService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageService, providedIn: 'root' });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageService, decorators: [{
+              type: i0.Injectable,
+              args: [{
+                      providedIn: 'root',
+                  }]
+          }] });
+
+  var WorkflowService = /** @class */ (function () {
+      function WorkflowService(_diagram, _plugins, _message) {
+          this._diagram = _diagram;
+          this._plugins = _plugins;
+          this._message = _message;
+          this._defaultNodeHeight = NODE_HEIGHT;
+          this._defaultNodeWidth = NODE_WIDTH;
+          this._defaultNodeCircleSize = NODE_CIRCLE_SIZE;
+          this._defaultNodeMargin = NODE_MARGIN;
+          this._offset = 60;
+      }
+      Object.defineProperty(WorkflowService.prototype, "_diagramClientRect", {
+          get: function () {
+              return this._plugins.area.container.getBoundingClientRect();
+          },
+          enumerable: false,
+          configurable: true
+      });
+      WorkflowService.prototype.setConfig = function (_config) {
+          this._config = _config;
+          this._message.sendMessage(MESSAGE_TYPE.configUpdated, _config);
+      };
+      WorkflowService.prototype.addNode = function (nodeType, data) {
+          var _a, _b;
+          return __awaiter(this, void 0, void 0, function () {
+              var position, _node, lastNode;
+              var _this = this;
+              return __generator(this, function (_c) {
+                  switch (_c.label) {
+                      case 0:
+                          if (!this._diagram.canAddNode(nodeType)) {
+                              if (this._isReadonlyDisabled()) {
+                                  this._plugins.readonly.enable();
+                              }
+                              return [2 /*return*/];
+                          }
+                          position = { x: this._offset, y: this._offset };
+                          if (this._isReadonlyEnabled()) {
+                              this._plugins.readonly.disable();
+                          }
+                          _node = this._createNode(nodeType, data);
+                          if (!this._diagram.shouldAddStart(nodeType)) return [3 /*break*/, 2];
+                          return [4 /*yield*/, this.addStartNode(position)];
+                      case 1:
+                          _c.sent();
+                          _c.label = 2;
+                      case 2:
+                          if (!((_a = this._config.node) === null || _a === void 0 ? void 0 : _a.isLinked)) return [3 /*break*/, 4];
+                          return [4 /*yield*/, this._linkToLastNode(_node)];
+                      case 3:
+                          lastNode = _c.sent();
+                          if (lastNode) {
+                              position = this._calculatePosition(_node, lastNode);
+                          }
+                          _c.label = 4;
+                      case 4: return [4 /*yield*/, this._diagram.addNode(_node)];
+                      case 5:
+                          _c.sent();
+                          return [4 /*yield*/, this._plugins.area.translate(_node.id, position)];
+                      case 6:
+                          _c.sent();
+                          if ((_b = this._config) === null || _b === void 0 ? void 0 : _b.fitToView) {
+                              setTimeout(function () {
+                                  _this._diagram.fitToZoom();
+                              }, 300);
+                          }
+                          if (this._isReadonlyDisabled()) {
+                              this._plugins.readonly.enable();
+                          }
+                          return [2 /*return*/];
+                  }
+              });
+          });
+      };
+      WorkflowService.prototype.removeEndNode = function () {
+          return __awaiter(this, void 0, void 0, function () {
+              var node;
+              return __generator(this, function (_c) {
+                  switch (_c.label) {
+                      case 0:
+                          node = this._diagram.getNodesByType(NODE_TYPE.end)[0];
+                          if (!node) return [3 /*break*/, 2];
+                          return [4 /*yield*/, removeNodeAndConnections(node, this._diagram.editor)];
+                      case 1:
+                          _c.sent();
+                          _c.label = 2;
+                      case 2: return [2 /*return*/];
+                  }
+              });
+          });
+      };
+      /**
+       *
+       * @param _node
+       * @param lastNode
+       * @returns
+       */
+      WorkflowService.prototype._calculatePosition = function (_node, lastNode) {
+          var isEndNode = _node.type === NODE_TYPE.end;
+          return {
+              x: this._calculatePositionX(lastNode.node.type, lastNode.viewNode.position.x),
+              y: this._calculatePositionY(isEndNode ? NODE_TYPE.end : lastNode.node.type, lastNode.viewNode.position.y),
+          };
+      };
+      WorkflowService.prototype._createNode = function (nodeType, data, config) {
+          return this._diagram.createNode(nodeType, Object.assign(Object.assign({ label: nodeType, type: nodeType, name: data.name, description: data.description, status: data.status }, (config ? config : {})), { content: data }));
+      };
+      WorkflowService.prototype.addWrapNodesPipe = function (editor) {
+          var _this = this;
+          editor.addPipe(function (context) { return __awaiter(_this, void 0, void 0, function () {
+              var node;
+              var _this = this;
+              return __generator(this, function (_c) {
+                  switch (_c.label) {
+                      case 0:
+                          if (!(context.type === 'nodecreate')) return [3 /*break*/, 3];
+                          if (!(context.data.type === NODE_TYPE.end)) return [3 /*break*/, 2];
+                          node = this._diagram.getLastNode();
+                          node.directions.outputs = IN_OUT_DIRECTION.end;
+                          return [4 /*yield*/, this._plugins.area.update('node', node.id)];
+                      case 1:
+                          _c.sent();
+                          return [3 /*break*/, 3];
+                      case 2: return [2 /*return*/, this._changeNodeSocketPosition(context)];
+                      case 3:
+                          if (context.type === 'nodecreated' && context.data.type !== NODE_TYPE.end) {
+                              setTimeout(function () {
+                                  _this._updateNodePosition(context);
+                              });
+                          }
+                          return [2 /*return*/, context];
+                  }
+              });
+          }); });
+      };
+      WorkflowService.prototype._changeNodeSocketPosition = function (context) {
+          var previousNode = this._diagram.getLastViewNode();
+          if (previousNode && this._isNearEndBoundary(previousNode)) {
+              context.data.directions.outputs = IN_OUT_DIRECTION.bottom;
+          }
+          if (previousNode && this._isOverEndBoundary(context.data, previousNode)) {
+              context.data.directions.inputs = IN_OUT_DIRECTION.top;
+              context.data.directions.outputs = IN_OUT_DIRECTION.end;
+          }
+          return Object.assign({}, context);
+      };
+      WorkflowService.prototype._linkToLastNode = function (_addedNode) {
+          return __awaiter(this, void 0, void 0, function () {
+              var node, viewNode;
+              return __generator(this, function (_c) {
+                  switch (_c.label) {
+                      case 0:
+                          node = this._diagram.getLastNode();
+                          viewNode = this._diagram.getLastViewNode();
+                          if (!(node && viewNode)) return [3 /*break*/, 2];
+                          return [4 /*yield*/, this._diagram.addConnection(node, _addedNode)];
+                      case 1:
+                          _c.sent();
+                          return [2 /*return*/, { node: node, viewNode: viewNode }];
+                      case 2: return [2 /*return*/, null];
+                  }
+              });
+          });
+      };
+      /**
+       *
+       * @returns
+       */
+      WorkflowService.prototype._isReadonlyDisabled = function () {
+          return this._config.readonly && !this._plugins.readonly.enabled;
+      };
+      /**
+       *
+       * @returns
+       */
+      WorkflowService.prototype._isReadonlyEnabled = function () {
+          return this._config.readonly && this._plugins.readonly.enabled;
+      };
+      /**
+       *
+       * @param position
+       */
+      WorkflowService.prototype.addStartNode = function (position) {
+          return __awaiter(this, void 0, void 0, function () {
+              var startNode;
+              return __generator(this, function (_c) {
+                  switch (_c.label) {
+                      case 0:
+                          startNode = this._diagram.createNode(NODE_TYPE.start, {
+                              type: NODE_TYPE.start,
+                              label: NODE_TYPE.start,
+                              name: 'start',
+                          });
+                          return [4 /*yield*/, this._diagram.addNode(startNode)];
+                      case 1:
+                          _c.sent();
+                          return [4 /*yield*/, this._plugins.area.translate(startNode.id, position)];
+                      case 2:
+                          _c.sent();
+                          return [2 /*return*/];
+                  }
+              });
+          });
+      };
+      /**
+       *
+       * @param nodeType
+       * @param y
+       * @returns
+       */
+      WorkflowService.prototype._calculatePositionY = function (nodeType, y) {
+          if (nodeType === NODE_TYPE.start) {
+              return Math.abs(Math.floor(y - (this._defaultNodeHeight - this._defaultNodeCircleSize) / 2));
+          }
+          if (nodeType === NODE_TYPE.end) {
+              return Math.abs(Math.floor(y + (this._defaultNodeHeight - this._defaultNodeCircleSize) / 2));
+          }
+          return y;
+      };
+      /**
+       *
+       * @param nodeType
+       * @param lastNodePositionX
+       * @returns
+       */
+      WorkflowService.prototype._calculatePositionX = function (nodeType, lastNodePositionX) {
+          var _nodeWidth = nodeType === NODE_TYPE.content
+              ? this._defaultNodeWidth
+              : this._defaultNodeCircleSize;
+          return lastNodePositionX + this._defaultNodeMargin + _nodeWidth;
+      };
+      /**
+       *
+       * @param node
+       * @param previousNode
+       * @returns
+       */
+      WorkflowService.prototype._isOverEndBoundary = function (node, previousNode) {
+          var _a;
+          var _diagramWidth = Number((_a = this._diagramClientRect) === null || _a === void 0 ? void 0 : _a.width) - this._defaultNodeMargin;
+          var _width = previousNode.position.x + (node.width + this._defaultNodeMargin) * 2;
+          return _width >= _diagramWidth;
+      };
+      /**
+       *
+       * @param previousNode
+       * @returns
+       */
+      WorkflowService.prototype._isNearEndBoundary = function (previousNode) {
+          var _a;
+          var currentPosition = previousNode.position.x +
+              this._defaultNodeWidth +
+              this._defaultNodeMargin * 2 +
+              this._offset;
+          var wrapLine = Number((_a = this._diagramClientRect) === null || _a === void 0 ? void 0 : _a.width) - this._defaultNodeWidth * 2;
+          return currentPosition >= wrapLine;
+      };
+      WorkflowService.prototype._updateNodePosition = function (context) {
+          var _a, _b;
+          return __awaiter(this, void 0, void 0, function () {
+              var _previousNode, _nodeViewPosition, _diagramWidth, _currentX, _fNode, x, _fViewNode;
+              return __generator(this, function (_c) {
+                  switch (_c.label) {
+                      case 0:
+                          _previousNode = this._diagram.getLastNode();
+                          _nodeViewPosition = (_a = this._plugins.area.nodeViews.get(context.data.id)) === null || _a === void 0 ? void 0 : _a.position;
+                          if (!(_previousNode && _nodeViewPosition)) return [3 /*break*/, 2];
+                          _diagramWidth = Number((_b = this._diagramClientRect) === null || _b === void 0 ? void 0 : _b.width);
+                          _currentX = _nodeViewPosition.x + context.data.width;
+                          if (!(_currentX >= _diagramWidth)) return [3 /*break*/, 2];
+                          this._plugins.readonly.disable();
+                          _fNode = this._diagram.editor
+                              .getNodes()
+                              .find(function (nd) { return nd.type !== NODE_TYPE.start; });
+                          x = this._offset;
+                          if (_fNode) {
+                              _fViewNode = this._plugins.area.nodeViews.get(_fNode.id);
+                              x = (_fViewNode === null || _fViewNode === void 0 ? void 0 : _fViewNode.position.x) || this._offset;
+                          }
+                          return [4 /*yield*/, this._plugins.area.translate(context.data.id, {
+                                  x: x,
+                                  y: _nodeViewPosition.y + this._defaultNodeMargin + context.data.height,
+                              })];
+                      case 1:
+                          _c.sent();
+                          this._plugins.readonly.enable();
+                          _c.label = 2;
+                      case 2: return [2 /*return*/, context];
+                  }
+              });
+          });
+      };
+      return WorkflowService;
+  }());
+  WorkflowService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: WorkflowService, deps: [{ token: DiagramService }, { token: DiagramPluginsService }, { token: MessageService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  WorkflowService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: WorkflowService });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: WorkflowService, decorators: [{
+              type: i0.Injectable
+          }], ctorParameters: function () { return [{ type: DiagramService }, { type: DiagramPluginsService }, { type: MessageService }]; } });
+
+  var BaseNodeComponent = /** @class */ (function (_super) {
+      __extends(BaseNodeComponent, _super);
+      function BaseNodeComponent(cdr, _messageService) {
+          var _this = _super.call(this, cdr) || this;
+          _this._messageService = _messageService;
+          _this.nodeTypes = NODE_TYPE;
+          _this.directions = IN_OUT_DIRECTION;
+          _this.destroy$ = new rxjs.Subject();
+          _this._cdr = cdr;
+          _this._messageService
+              .onMessage(MESSAGE_TYPE.configUpdated)
+              .pipe(operators.takeUntil(_this.destroy$))
+              .subscribe(function (res) {
+              _this._cdr.detectChanges();
+          });
+          return _this;
+      }
+      BaseNodeComponent.prototype.removeNode = function () {
+          this.data.notify(NOTIFY_EVENT.remove, { nodeId: this.data.id });
+      };
+      BaseNodeComponent.prototype.ngOnDestroy = function () {
+          this.destroy$.next();
+          this.destroy$.complete();
+      };
+      return BaseNodeComponent;
+  }(i2$8.NodeComponent));
+  BaseNodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseNodeComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: MessageService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  BaseNodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BaseNodeComponent, selector: "ng-component", inputs: { data: "data" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseNodeComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      template: '',
+                  }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: MessageService }]; }, propDecorators: { data: [{
+                  type: i0.Input
+              }] } });
+
+  var RemoveButtonComponent = /** @class */ (function () {
+      function RemoveButtonComponent() {
+          this.remove = new i0.EventEmitter();
+      }
+      return RemoveButtonComponent;
+  }());
+  RemoveButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RemoveButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  RemoveButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RemoveButtonComponent, selector: "node-remove-button", outputs: { remove: "remove" }, ngImport: i0__namespace, template: "\n    <button\n      mat-icon-button\n      (click)=\"remove.emit()\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (dblclick)=\"$event.stopPropagation()\"\n      class=\"remove-icon\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  ", isInline: true, styles: ["\n      :host {\n        --size: var(--remove-icon-size, 30px);\n        position: var(--remove-icon-position, absolute);\n        inset: var(--remove-icon-inset, 0 0 auto auto);\n        opacity: var(--remove-icon-opacity, 0);\n        background: var(--remove-icon-background, inherit);\n        width: var(--size);\n        height: var(--size);\n        line-height: var(var(--remove-icon-size), calc(var(--size) - 6));\n        border-radius: 50%;\n        z-index: 2;\n        .remove-icon {\n          border: 1px solid currentColor;\n          border-radius: 50%;\n          width: var(--size);\n          height: var(--size);\n          line-height: var(--remove-icon-size, 30px);\n          background: var(--remove-icon-background, inherit);\n        }\n      }\n    "], components: [{ type: i1__namespace$8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2__namespace$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RemoveButtonComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'node-remove-button',
+                      template: "\n    <button\n      mat-icon-button\n      (click)=\"remove.emit()\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (dblclick)=\"$event.stopPropagation()\"\n      class=\"remove-icon\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  ",
+                      styles: [
+                          "\n      :host {\n        --size: var(--remove-icon-size, 30px);\n        position: var(--remove-icon-position, absolute);\n        inset: var(--remove-icon-inset, 0 0 auto auto);\n        opacity: var(--remove-icon-opacity, 0);\n        background: var(--remove-icon-background, inherit);\n        width: var(--size);\n        height: var(--size);\n        line-height: var(var(--remove-icon-size), calc(var(--size) - 6));\n        border-radius: 50%;\n        z-index: 2;\n        .remove-icon {\n          border: 1px solid currentColor;\n          border-radius: 50%;\n          width: var(--size);\n          height: var(--size);\n          line-height: var(--remove-icon-size, 30px);\n          background: var(--remove-icon-background, inherit);\n        }\n      }\n    ",
+                      ],
+                  }]
+          }], propDecorators: { remove: [{
+                  type: i0.Output
+              }] } });
+
+  var NodeInputsComponent = /** @class */ (function () {
+      function NodeInputsComponent() {
+      }
+      return NodeInputsComponent;
+  }());
+  NodeInputsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeInputsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  NodeInputsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeInputsComponent, selector: "node-inputs", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": " 'da-node__inputs inputs-' + direction" } }, ngImport: i0__namespace, template: "\n    <div\n      *ngFor=\"let input of data.inputs | keyvalue : sortByIndex\"\n      class=\"da-node__inputs__socket\"\n      style=\" height: var(--socket-size, 16px);\"\n      refComponent\n      [data]=\"{\n        type: 'socket',\n        side: 'input',\n        key: input.key,\n        nodeId: data.id,\n        payload: input.value?.socket,\n        seed: seed\n      }\"\n      [emit]=\"emit\"\n    ></div>\n  ", isInline: true, directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4__namespace.KeyValuePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeInputsComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'node-inputs',
+                      encapsulation: i0.ViewEncapsulation.None,
+                      host: {
+                          '[class]': " 'da-node__inputs inputs-' + direction",
+                      },
+                      template: "\n    <div\n      *ngFor=\"let input of data.inputs | keyvalue : sortByIndex\"\n      class=\"da-node__inputs__socket\"\n      style=\" height: var(--socket-size, 16px);\"\n      refComponent\n      [data]=\"{\n        type: 'socket',\n        side: 'input',\n        key: input.key,\n        nodeId: data.id,\n        payload: input.value?.socket,\n        seed: seed\n      }\"\n      [emit]=\"emit\"\n    ></div>\n  ",
+                  }]
+          }], propDecorators: { direction: [{
+                  type: i0.Input
+              }], data: [{
+                  type: i0.Input
+              }], seed: [{
+                  type: i0.Input
+              }], emit: [{
+                  type: i0.Input
+              }], sortByIndex: [{
+                  type: i0.Input
+              }] } });
+
+  var NodeOutputsComponent = /** @class */ (function () {
+      function NodeOutputsComponent() {
+      }
+      return NodeOutputsComponent;
+  }());
+  NodeOutputsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeOutputsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  NodeOutputsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeOutputsComponent, selector: "node-outputs", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": " 'da-node__outputs outputs-' + direction" } }, ngImport: i0__namespace, template: "<div\n    class=\"da-node__outputs__socket\"\n    style=\" height: var(--socket-size, 16px);\"\n    *ngFor=\"let output of data.outputs | keyvalue : sortByIndex\"\n    refComponent\n    [data]=\"{\n      type: 'socket',\n      side: 'output',\n      key: output.key,\n      nodeId: data.id,\n      payload: output.value?.socket,\n      seed: seed\n    }\"\n    [emit]=\"emit\"\n  ></div>", isInline: true, directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4__namespace.KeyValuePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeOutputsComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'node-outputs',
+                      encapsulation: i0.ViewEncapsulation.None,
+                      host: {
+                          '[class]': " 'da-node__outputs outputs-' + direction",
+                      },
+                      template: "<div\n    class=\"da-node__outputs__socket\"\n    style=\" height: var(--socket-size, 16px);\"\n    *ngFor=\"let output of data.outputs | keyvalue : sortByIndex\"\n    refComponent\n    [data]=\"{\n      type: 'socket',\n      side: 'output',\n      key: output.key,\n      nodeId: data.id,\n      payload: output.value?.socket,\n      seed: seed\n    }\"\n    [emit]=\"emit\"\n  ></div>",
+                  }]
+          }], propDecorators: { direction: [{
+                  type: i0.Input
+              }], data: [{
+                  type: i0.Input
+              }], seed: [{
+                  type: i0.Input
+              }], emit: [{
+                  type: i0.Input
+              }], sortByIndex: [{
+                  type: i0.Input
+              }] } });
+
+  var CircleNodeComponent = /** @class */ (function (_super) {
+      __extends(CircleNodeComponent, _super);
+      function CircleNodeComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      return CircleNodeComponent;
+  }(BaseNodeComponent));
+  CircleNodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CircleNodeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  CircleNodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CircleNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, template: "<div\r\n  class=\"da-node da-node--{{ data.type }} circle-node circle-node--{{ data.type }} {{\r\n    data?.status ? ' da-node--' + data?.status : ''\r\n  }} \"\r\n  [style.--node-width]=\"data.width + 'px'\"\r\n  [style.--node-height]=\"data.width + 'px'\"\r\n>\r\n  <node-remove-button\r\n    (remove)=\"removeNode()\"\r\n    *ngIf=\"data.config?.canRemove\"\r\n  ></node-remove-button>\r\n\r\n  <div\r\n    class=\"da-node__title circle-node__title\"\r\n    [attr.tooltip]=\"data.content?.data?.tooltip\"\r\n    [class.node-tooltip]=\"!!data.content?.data?.tooltip\"\r\n  >\r\n    {{ 'diagram.' + data.name | translate }}\r\n  </div>\r\n\r\n  <node-inputs\r\n    [direction]=\"data.directions.inputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-inputs>\r\n\r\n  <node-outputs\r\n    [direction]=\"data.directions.outputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-outputs>\r\n</div>\r\n", styles: [".da-node{--width: var(--node-width);--height: var(--node-height);--socket-offset-negative: 0;--socket-position-start: var(--socket-offset-negative) auto;--socket-position-end: auto var(--socket-offset-negative);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer)}.da-node--draft{--node-color: var(--status-draft-color, #555);--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var(--status-draft-border, 1px solid #555);--node-shadow: var(--status-draft-shadow, unset)}.da-node--upcoming{--node-color: var(--status-upcoming-color, var(--Primary-100, #234990));--node-background: var( --status-upcoming-background, #fff );--node-border: var(--status-upcoming-border, 1px solid var(--node-color, #234990));--node-shadow: var(--status-upcoming-shadow, unset)}.da-node--inProgress{--node-color: var(--status-progress-color, var(--orange-color, #f29339));--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var(--status-progress-border, 1px solid var(--orange-color, #f29339));--node-shadow: var(--status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)))}.da-node--completed{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--approved{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--rejected{--node-color: var(--status-rejected-color, var(--red-color, #bf0b30));--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var(--status-rejected-border, 1px solid var(--red-color, #bf0b30));--node-shadow: var(--status-rejected-shadow, unset)}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node__inputs,.da-node__outputs{position:var(--input-output-position, absolute);inset-inline:var(--in-out-inset-inline);inset-block:var(--in-out-inset-block);height:var(--socket-size, 16px)}.da-node__inputs__socket,.da-node__outputs__socket{height:var(--socket-size, 16px)}.da-node__inputs.inputs-top{--in-out-inset-block: var(--socket-position-start)}.da-node__inputs.inputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__inputs.inputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__inputs.inputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node__outputs.outputs-top{--in-out-inset-block: var(--socket-offset-negative)}.da-node__outputs.outputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__outputs.outputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__outputs.outputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", ".circle-node{--node-radius: 50%}.circle-node__title.node-tooltip:after{content:attr(tooltip);position:absolute;left:50%;top:-6px;transform:translate(-50%) translateY(-100%);background:rgba(0,0,0,.7);text-align:center;color:#fff;padding:4px 2px;font-size:12px;min-width:100px;border-radius:5px;pointer-events:none;display:var(--tooltip-display, none)}.circle-node:hover{--tooltip-display: block}.da-node--end{border-width:3px}\n"], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: NodeInputsComponent, selector: "node-inputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }, { type: NodeOutputsComponent, selector: "node-outputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace$1.TranslatePipe } });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CircleNodeComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      templateUrl: './circle-node.component.html',
+                      styleUrls: ['../../styles/node.scss', './circle-node.component.scss'],
+                  }]
+          }] });
+
+  var StatusIconComponent = /** @class */ (function () {
+      function StatusIconComponent() {
+      }
+      StatusIconComponent.prototype.getIcon = function () {
+          switch (this.status) {
+              case NODE_STATUS.completed:
+                  return 'check_circle';
+              case NODE_STATUS.rejected:
+                  return 'cancel';
+              default:
+                  return '';
+          }
+      };
+      return StatusIconComponent;
+  }());
+  StatusIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StatusIconComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  StatusIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StatusIconComponent, selector: "status-icon", inputs: { status: "status" }, host: { properties: { "class": "'da-node__check-status da-node__check-status--' + status" } }, ngImport: i0__namespace, template: " <mat-icon>\n    {{ getIcon() }}\n  </mat-icon>", isInline: true, components: [{ type: i2__namespace$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StatusIconComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'status-icon',
+                      template: " <mat-icon>\n    {{ getIcon() }}\n  </mat-icon>",
+                      encapsulation: i0.ViewEncapsulation.None,
+                      changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                      host: {
+                          '[class]': "'da-node__check-status da-node__check-status--' + status",
+                      },
+                  }]
+          }], propDecorators: { status: [{
+                  type: i0.Input
+              }] } });
+
+  var NodeIconComponent = /** @class */ (function () {
+      function NodeIconComponent() {
+      }
+      NodeIconComponent.prototype.isIconTemplate = function (icon) {
+          return icon instanceof i0.TemplateRef;
+      };
+      return NodeIconComponent;
+  }());
+  NodeIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeIconComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  NodeIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeIconComponent, selector: "node-icon", inputs: { icon: "icon" }, host: { classAttribute: "da-node__icon" }, ngImport: i0__namespace, template: "\n    <mat-icon *ngIf=\"!isIconTemplate(icon)\">{{ icon }}</mat-icon>\n    <span *ngIf=\"isIconTemplate(icon)\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </span>\n  ", isInline: true, components: [{ type: i2__namespace$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NodeIconComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'node-icon',
+                      template: "\n    <mat-icon *ngIf=\"!isIconTemplate(icon)\">{{ icon }}</mat-icon>\n    <span *ngIf=\"isIconTemplate(icon)\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </span>\n  ",
+                      encapsulation: i0.ViewEncapsulation.None,
+                      host: {
+                          class: 'da-node__icon',
+                      },
+                  }]
+          }], propDecorators: { icon: [{
+                  type: i0.Input
+              }] } });
+
+  var ContentNodeComponent = /** @class */ (function (_super) {
+      __extends(ContentNodeComponent, _super);
+      function ContentNodeComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      return ContentNodeComponent;
+  }(BaseNodeComponent));
+  ContentNodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ContentNodeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  ContentNodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ContentNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, template: "<div\r\n  class=\"da-node da-node--{{ data.type }} {{\r\n    data?.status ? ' da-node--' + data?.status : ''\r\n  }}  {{ data?.styleClass }}\"\r\n  [style.--node-width]=\"data.width + 'px'\"\r\n  [style.--node-height]=\"data.height + 'px'\"\r\n>\r\n  <node-remove-button (remove)=\"removeNode()\" *ngIf=\"data?.config?.canRemove\">\r\n  </node-remove-button>\r\n\r\n  <status-icon [status]=\"data?.status\" *ngIf=\"data?.status\"></status-icon>\r\n\r\n  <node-icon *ngIf=\"data.content?.icon\" [icon]=\"data.content?.icon\"></node-icon>\r\n\r\n  <div class=\"da-node__title\">{{ data.name }}</div>\r\n  <div class=\"da-node__description\" *ngIf=\"data.description\">\r\n    {{ data.description }}\r\n  </div>\r\n  <node-inputs\r\n    [direction]=\"data.directions.inputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-inputs>\r\n\r\n  <node-outputs\r\n    [direction]=\"data.directions.outputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-outputs>\r\n</div>\r\n", styles: [".da-node{--width: var(--node-width);--height: var(--node-height);--socket-offset-negative: 0;--socket-position-start: var(--socket-offset-negative) auto;--socket-position-end: auto var(--socket-offset-negative);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer)}.da-node--draft{--node-color: var(--status-draft-color, #555);--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var(--status-draft-border, 1px solid #555);--node-shadow: var(--status-draft-shadow, unset)}.da-node--upcoming{--node-color: var(--status-upcoming-color, var(--Primary-100, #234990));--node-background: var( --status-upcoming-background, #fff );--node-border: var(--status-upcoming-border, 1px solid var(--node-color, #234990));--node-shadow: var(--status-upcoming-shadow, unset)}.da-node--inProgress{--node-color: var(--status-progress-color, var(--orange-color, #f29339));--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var(--status-progress-border, 1px solid var(--orange-color, #f29339));--node-shadow: var(--status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)))}.da-node--completed{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--approved{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--rejected{--node-color: var(--status-rejected-color, var(--red-color, #bf0b30));--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var(--status-rejected-border, 1px solid var(--red-color, #bf0b30));--node-shadow: var(--status-rejected-shadow, unset)}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node__inputs,.da-node__outputs{position:var(--input-output-position, absolute);inset-inline:var(--in-out-inset-inline);inset-block:var(--in-out-inset-block);height:var(--socket-size, 16px)}.da-node__inputs__socket,.da-node__outputs__socket{height:var(--socket-size, 16px)}.da-node__inputs.inputs-top{--in-out-inset-block: var(--socket-position-start)}.da-node__inputs.inputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__inputs.inputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__inputs.inputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node__outputs.outputs-top{--in-out-inset-block: var(--socket-offset-negative)}.da-node__outputs.outputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__outputs.outputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__outputs.outputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n"], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: StatusIconComponent, selector: "status-icon", inputs: ["status"] }, { type: NodeIconComponent, selector: "node-icon", inputs: ["icon"] }, { type: NodeInputsComponent, selector: "node-inputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }, { type: NodeOutputsComponent, selector: "node-outputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ContentNodeComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      templateUrl: './content-node.component.html',
+                      styleUrls: ['../../styles/node.scss'],
+                  }]
+          }] });
+
+  var CustomConnectionComponent = /** @class */ (function (_super) {
+      __extends(CustomConnectionComponent, _super);
+      function CustomConnectionComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      return CustomConnectionComponent;
+  }(i2$8.ConnectionComponent));
+  CustomConnectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomConnectionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  CustomConnectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomConnectionComponent, selector: "connection", inputs: { data: "data" }, usesInheritance: true, ngImport: i0__namespace, template: "\n    <svg\n      data-testid=\"connection\"\n      style=\"z-index:-1\"\n      class=\"{{ data?.status ? 'connection-status-' + data?.status : '' }}\"\n    >\n      <path [attr.d]=\"path\" />\n    </svg>\n  ", isInline: true, styles: ["\n      svg {\n        overflow: visible;\n        position: absolute;\n        pointer-events: none;\n        path {\n          fill: none;\n          stroke-width: 2px;\n          stroke: var(--path-color, #1b3e7f);\n          pointer-events: auto;\n        }\n      }\n    "] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomConnectionComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'connection',
+                      styles: [
+                          "\n      svg {\n        overflow: visible;\n        position: absolute;\n        pointer-events: none;\n        path {\n          fill: none;\n          stroke-width: 2px;\n          stroke: var(--path-color, #1b3e7f);\n          pointer-events: auto;\n        }\n      }\n    ",
+                      ],
+                      template: "\n    <svg\n      data-testid=\"connection\"\n      style=\"z-index:-1\"\n      class=\"{{ data?.status ? 'connection-status-' + data?.status : '' }}\"\n    >\n      <path [attr.d]=\"path\" />\n    </svg>\n  ",
+                  }]
+          }], propDecorators: { data: [{
+                  type: i0.Input
+              }] } });
+
+  var CustomSocketComponent = /** @class */ (function (_super) {
+      __extends(CustomSocketComponent, _super);
+      function CustomSocketComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      return CustomSocketComponent;
+  }(i2$8.SocketComponent));
+  CustomSocketComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomSocketComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  CustomSocketComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomSocketComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, template: "", isInline: true, styles: ["\n      :host {\n        display: inline-block;\n        cursor: pointer;\n        border: 1px solid var(--primary-color, #1b3e7f);\n        width: var(--socket-size, 16px);\n        height: var(--socket-size, 16px);\n        vertical-align: middle;\n        background: white;\n        z-index: 2;\n        box-sizing: border-box;\n        opacity: var(--socket-opacity, 0);\n        border-radius: var(--socket-radius, 50%);\n        &:hover {\n          box-shadow: 0 0 0 1px var(--primary-color, #1b3e7f);\n        }\n      }\n    "] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomSocketComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      template: "",
+                      styles: [
+                          "\n      :host {\n        display: inline-block;\n        cursor: pointer;\n        border: 1px solid var(--primary-color, #1b3e7f);\n        width: var(--socket-size, 16px);\n        height: var(--socket-size, 16px);\n        vertical-align: middle;\n        background: white;\n        z-index: 2;\n        box-sizing: border-box;\n        opacity: var(--socket-opacity, 0);\n        border-radius: var(--socket-radius, 50%);\n        &:hover {\n          box-shadow: 0 0 0 1px var(--primary-color, #1b3e7f);\n        }\n      }\n    ",
+                      ],
+                  }]
+          }] });
+
+  var TemplateNodeComponent = /** @class */ (function (_super) {
+      __extends(TemplateNodeComponent, _super);
+      function TemplateNodeComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      TemplateNodeComponent.prototype.ngOnInit = function () { };
+      Object.defineProperty(TemplateNodeComponent.prototype, "templateOutletContext", {
+          get: function () {
+              var _a = this.data, content = _a.content, description = _a.description, name = _a.name, status = _a.status, id = _a.id;
+              return {
+                  $implicit: {
+                      content: content,
+                      description: description,
+                      name: name,
+                      status: status,
+                      id: id,
+                  },
+              };
+          },
+          enumerable: false,
+          configurable: true
+      });
+      return TemplateNodeComponent;
+  }(BaseNodeComponent));
+  TemplateNodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateNodeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  TemplateNodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplateNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, template: "<div\r\n  class=\"da-node da-node--{{ data.type }} {{\r\n    data?.status ? ' da-node--' + data?.status : ''\r\n  }} {{ data?.styleClass }}\"\r\n  [style.--node-width]=\"data.width + 'px'\"\r\n  [style.--node-height]=\"data.height + 'px'\"\r\n>\r\n  <node-remove-button (remove)=\"removeNode()\" *ngIf=\"data?.config?.canRemove\">\r\n  </node-remove-button>\r\n\r\n  <node-icon\r\n    *ngIf=\"data.content?.icon\"\r\n    [icon]=\"data.content?.icon\"\r\n    class=\"da-node__icon\"\r\n  ></node-icon>\r\n\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"data?.template || defaultTemplate\"\r\n    [ngTemplateOutletContext]=\"templateOutletContext\"\r\n  ></ng-container>\r\n\r\n  <ng-template #defaultTemplate>\r\n    <div class=\"da-node__title\">{{ data?.name }}</div>\r\n  </ng-template>\r\n\r\n  <node-inputs\r\n    [direction]=\"data.directions.inputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-inputs>\r\n\r\n  <node-outputs\r\n    [direction]=\"data.directions.outputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-outputs>\r\n</div>\r\n", styles: [".da-node{--width: var(--node-width);--height: var(--node-height);--socket-offset-negative: 0;--socket-position-start: var(--socket-offset-negative) auto;--socket-position-end: auto var(--socket-offset-negative);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer)}.da-node--draft{--node-color: var(--status-draft-color, #555);--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var(--status-draft-border, 1px solid #555);--node-shadow: var(--status-draft-shadow, unset)}.da-node--upcoming{--node-color: var(--status-upcoming-color, var(--Primary-100, #234990));--node-background: var( --status-upcoming-background, #fff );--node-border: var(--status-upcoming-border, 1px solid var(--node-color, #234990));--node-shadow: var(--status-upcoming-shadow, unset)}.da-node--inProgress{--node-color: var(--status-progress-color, var(--orange-color, #f29339));--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var(--status-progress-border, 1px solid var(--orange-color, #f29339));--node-shadow: var(--status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)))}.da-node--completed{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--approved{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--rejected{--node-color: var(--status-rejected-color, var(--red-color, #bf0b30));--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var(--status-rejected-border, 1px solid var(--red-color, #bf0b30));--node-shadow: var(--status-rejected-shadow, unset)}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node__inputs,.da-node__outputs{position:var(--input-output-position, absolute);inset-inline:var(--in-out-inset-inline);inset-block:var(--in-out-inset-block);height:var(--socket-size, 16px)}.da-node__inputs__socket,.da-node__outputs__socket{height:var(--socket-size, 16px)}.da-node__inputs.inputs-top{--in-out-inset-block: var(--socket-position-start)}.da-node__inputs.inputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__inputs.inputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__inputs.inputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node__outputs.outputs-top{--in-out-inset-block: var(--socket-offset-negative)}.da-node__outputs.outputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__outputs.outputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__outputs.outputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", "\n      :host {\n        display: block;\n      }\n    "], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: NodeIconComponent, selector: "node-icon", inputs: ["icon"] }, { type: NodeInputsComponent, selector: "node-inputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }, { type: NodeOutputsComponent, selector: "node-outputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.Default });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateNodeComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      templateUrl: './template-node.component.html',
+                      styleUrls: ['../../styles/node.scss'],
+                      changeDetection: i0.ChangeDetectionStrategy.Default,
+                      styles: [
+                          "\n      :host {\n        display: block;\n      }\n    ",
+                      ],
+                  }]
+          }] });
+
+  var ZoomControlComponent = /** @class */ (function () {
+      function ZoomControlComponent(_plugins) {
+          this._plugins = _plugins;
+          this.delta = 0.1;
+      }
+      ZoomControlComponent.prototype.zoomOut = function () {
+          var k = this._plugins.area.area.transform.k;
+          this._plugins.area.area.zoom(k - this.delta);
+      };
+      ZoomControlComponent.prototype.zoomIn = function () {
+          var k = this._plugins.area.area.transform.k;
+          this._plugins.area.area.zoom(k + this.delta);
+      };
+      return ZoomControlComponent;
+  }());
+  ZoomControlComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ZoomControlComponent, deps: [{ token: DiagramPluginsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  ZoomControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ZoomControlComponent, selector: "app-zoom-control", ngImport: i0__namespace, template: "\n    <button mat-flat-button (click)=\"zoomOut()\">\n      <mat-icon>zoom_out</mat-icon>\n    </button>\n    <button mat-flat-button (click)=\"zoomIn()\">\n      <mat-icon>zoom_in</mat-icon>\n    </button>\n  ", isInline: true, styles: ["\n      :host {\n        position: var(--diagram-zoom-position, absolute);\n        inset-inline: var(--diagram-zoom-inline, auto 5px);\n        inset-block: var(--diagram-zoom-block, 5px auto);\n        background: var(--diagram-zoom-background, #f8f8ff);\n        border-radius: var(--diagram-zoom-radius, 4px);\n        border: var(--diagram-zoom-border, 1px solid #dcdce4);\n        display: var(--diagram-zoom-display, inline-flex);\n        flex-direction: var(--diagram-zoom-direction, row);\n        box-shadow: var(--diagram-zoom-shadow, 0 0 0 0 #eee);\n        .mat-flat-button {\n          background-color: transparent;\n          min-width: 36px;\n        }\n      }\n    "], components: [{ type: i1__namespace$8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2__namespace$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ZoomControlComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'app-zoom-control',
+                      template: "\n    <button mat-flat-button (click)=\"zoomOut()\">\n      <mat-icon>zoom_out</mat-icon>\n    </button>\n    <button mat-flat-button (click)=\"zoomIn()\">\n      <mat-icon>zoom_in</mat-icon>\n    </button>\n  ",
+                      styles: [
+                          "\n      :host {\n        position: var(--diagram-zoom-position, absolute);\n        inset-inline: var(--diagram-zoom-inline, auto 5px);\n        inset-block: var(--diagram-zoom-block, 5px auto);\n        background: var(--diagram-zoom-background, #f8f8ff);\n        border-radius: var(--diagram-zoom-radius, 4px);\n        border: var(--diagram-zoom-border, 1px solid #dcdce4);\n        display: var(--diagram-zoom-display, inline-flex);\n        flex-direction: var(--diagram-zoom-direction, row);\n        box-shadow: var(--diagram-zoom-shadow, 0 0 0 0 #eee);\n        .mat-flat-button {\n          background-color: transparent;\n          min-width: 36px;\n        }\n      }\n    ",
+                      ],
+                  }]
+          }], ctorParameters: function () { return [{ type: DiagramPluginsService }]; } });
+
+  var DiagramDirective = /** @class */ (function () {
+      function DiagramDirective(_elementRef, _renderer, _injector, _viewContainerRef, _resolver, _diagramService, _pluginsService) {
+          this._elementRef = _elementRef;
+          this._renderer = _renderer;
+          this._injector = _injector;
+          this._viewContainerRef = _viewContainerRef;
+          this._resolver = _resolver;
+          this._diagramService = _diagramService;
+          this._pluginsService = _pluginsService;
+          this.height = DIAGRAM_HEIGHT + "px";
+          this.width = '100%';
+          this.config = { readonly: { active: false } };
+          this.zoomCtrl = true;
+          this.onDiagramReady = new i0.EventEmitter();
+      }
+      Object.defineProperty(DiagramDirective.prototype, "clientRect", {
+          get: function () {
+              return this._elementRef.nativeElement.getBoundingClientRect();
+          },
+          enumerable: false,
+          configurable: true
+      });
+      DiagramDirective.prototype.ngOnInit = function () {
+          this._appendStyles();
+      };
+      DiagramDirective.prototype._appendZoomComponent = function () {
+          if (!this.zoomCtrl) {
+              return;
+          }
+          var factory = this._resolver.resolveComponentFactory(ZoomControlComponent);
+          this._viewContainerRef.createComponent(factory);
+      };
+      DiagramDirective.prototype.ngAfterViewInit = function () {
+          return __awaiter(this, void 0, void 0, function () {
+              var editor, error_1;
+              return __generator(this, function (_a) {
+                  switch (_a.label) {
+                      case 0:
+                          this._appendZoomComponent();
+                          _a.label = 1;
+                      case 1:
+                          _a.trys.push([1, 3, , 4]);
+                          return [4 /*yield*/, createDiagramEditor(this._elementRef.nativeElement, this._injector, this.config //TODO it's Should be merged with DIAGRAM_DEFAULT_OPTIONS
+                              )];
+                      case 2:
+                          editor = _a.sent();
+                          this._pluginsService.setPlugins(editor);
+                          this._diagramService.setEditor(editor);
+                          this.diagramEditor = editor;
+                          this.onDiagramReady.emit(editor);
+                          return [3 /*break*/, 4];
+                      case 3:
+                          error_1 = _a.sent();
+                          console.log(error_1);
+                          return [3 /*break*/, 4];
+                      case 4: return [2 /*return*/];
+                  }
+              });
+          });
+      };
+      DiagramDirective.prototype._appendStyles = function () {
+          var _this = this;
+          var _requiredStyles = {
+              position: 'var(--diagram-position, relative)',
+              width: "var(--diagram-width, " + this.width + ")",
+              height: "var(--diagram-height, " + this.height + ")",
+              direction: 'ltr',
+          };
+          Object.entries(_requiredStyles).forEach(function (_a) {
+              var _b = __read(_a, 2), key = _b[0], value = _b[1];
+              _this._renderer.setStyle(_this._elementRef.nativeElement, key, value);
+          });
+      };
+      return DiagramDirective;
+  }());
+  DiagramDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: i0__namespace.Injector }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ComponentFactoryResolver }, { token: DiagramService }, { token: DiagramPluginsService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+  DiagramDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DiagramDirective, selector: "[appDiagram]", inputs: { height: "height", width: "width", config: "config", zoomCtrl: "zoomCtrl" }, outputs: { onDiagramReady: "onDiagramReady" }, exportAs: ["diagram"], ngImport: i0__namespace });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramDirective, decorators: [{
+              type: i0.Directive,
+              args: [{
+                      selector: '[appDiagram]',
+                      exportAs: 'diagram',
+                  }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }, { type: i0__namespace.Injector }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.ComponentFactoryResolver }, { type: DiagramService }, { type: DiagramPluginsService }]; }, propDecorators: { height: [{
+                  type: i0.Input
+              }], width: [{
+                  type: i0.Input
+              }], config: [{
+                  type: i0.Input
+              }], zoomCtrl: [{
+                  type: i0.Input
+              }], onDiagramReady: [{
+                  type: i0.Output
+              }] } });
+
+  var DiagramsModule = /** @class */ (function () {
+      function DiagramsModule() {
+      }
+      return DiagramsModule;
+  }());
+  DiagramsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  DiagramsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramsModule, declarations: [CircleNodeComponent,
+          ContentNodeComponent,
+          CustomConnectionComponent,
+          CustomSocketComponent,
+          TemplateNodeComponent,
+          DiagramDirective,
+          RemoveButtonComponent,
+          ZoomControlComponent,
+          NodeIconComponent,
+          StatusIconComponent,
+          NodeInputsComponent,
+          NodeOutputsComponent], imports: [i4.CommonModule,
+          i2$8.ReteModule,
+          i1$7.MatButtonModule,
+          i2$3.MatIconModule,
+          i6.FormsModule,
+          i1$1.TranslateModule,
+          i2$5.MatTooltipModule], exports: [DiagramDirective, ZoomControlComponent] });
+  DiagramsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramsModule, providers: [DiagramService, DiagramPluginsService, WorkflowService], imports: [[
+              i4.CommonModule,
+              i2$8.ReteModule,
+              i1$7.MatButtonModule,
+              i2$3.MatIconModule,
+              i6.FormsModule,
+              i1$1.TranslateModule,
+              i2$5.MatTooltipModule,
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagramsModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [
+                          CircleNodeComponent,
+                          ContentNodeComponent,
+                          CustomConnectionComponent,
+                          CustomSocketComponent,
+                          TemplateNodeComponent,
+                          DiagramDirective,
+                          RemoveButtonComponent,
+                          ZoomControlComponent,
+                          NodeIconComponent,
+                          StatusIconComponent,
+                          NodeInputsComponent,
+                          NodeOutputsComponent,
+                      ],
+                      imports: [
+                          i4.CommonModule,
+                          i2$8.ReteModule,
+                          i1$7.MatButtonModule,
+                          i2$3.MatIconModule,
+                          i6.FormsModule,
+                          i1$1.TranslateModule,
+                          i2$5.MatTooltipModule,
+                      ],
+                      exports: [DiagramDirective, ZoomControlComponent],
+                      providers: [DiagramService, DiagramPluginsService, WorkflowService],
+                  }]
+          }] });
+
   var FILTER_DATES_TYPE = {
       lastDay: 'from_now-24H_to_now',
       lastWeek: 'from_now-7d_to_now',
@@ -31258,12 +32797,15 @@
   exports.AttachmentsPageProviderComponent = AttachmentsPageProviderComponent;
   exports.AvatarComponent = AvatarComponent;
   exports.AvatarModule = AvatarModule;
+  exports.BaseNodeClass = BaseNodeClass;
   exports.BooleanViewerComponent = BooleanViewerComponent;
   exports.ButtonComponent = ButtonComponent;
   exports.CallApiService = CallApiService;
   exports.CardComponent = CardComponent;
   exports.CardModule = CardModule;
   exports.ChartDataService = ChartDataService;
+  exports.CircleNode = CircleNode;
+  exports.CircleNodeComponent = CircleNodeComponent;
   exports.ClickOutsideDirective = ClickOutsideDirective;
   exports.ClipboardComponent = ClipboardComponent;
   exports.CommentApiService = CommentApiService;
@@ -31276,6 +32818,9 @@
   exports.ConfirmDialogComponent = ConfirmDialogComponent;
   exports.ConfirmationDialogComponent = ConfirmationDialogComponent;
   exports.ConfirmationDialogModule = ConfirmationDialogModule;
+  exports.Connection = Connection;
+  exports.ContentNode = ContentNode;
+  exports.ContentNodeComponent = ContentNodeComponent;
   exports.CopyComponent = CopyComponent;
   exports.CorrespondenceRelationComponent = CorrespondenceRelationComponent;
   exports.CorrespondenceRelationModule = CorrespondenceRelationModule;
@@ -31287,11 +32832,15 @@
   exports.CreateModalComponent = CreateModalComponent;
   exports.CreationTypeComponent = CreationTypeComponent;
   exports.CtsTagsModule = CtsTagsModule;
+  exports.CustomConnectionComponent = CustomConnectionComponent;
   exports.CustomDocumentViewerComponent = CustomDocumentViewerComponent;
   exports.CustomPpViewerComponent = CustomPpViewerComponent;
+  exports.CustomSocketComponent = CustomSocketComponent;
   exports.CustomToastrModule = CustomToastrModule;
   exports.CustomToastrService = CustomToastrService;
   exports.CutomeVocViewerComponent = CutomeVocViewerComponent;
+  exports.DIAGRAM_DEFAULT_OPTIONS = DIAGRAM_DEFAULT_OPTIONS;
+  exports.DIAGRAM_HEIGHT = DIAGRAM_HEIGHT;
   exports.DataViewerComponent = DataViewerComponent;
   exports.DateFormatterService = DateFormatterService;
   exports.DateHelperService = DateHelperService;
@@ -31301,6 +32850,10 @@
   exports.DepartmentFormComponent = DepartmentFormComponent;
   exports.DepartmentManagementService = DepartmentManagementService;
   exports.DepartmentViewerComponent = DepartmentViewerComponent;
+  exports.DiagramDirective = DiagramDirective;
+  exports.DiagramPluginsService = DiagramPluginsService;
+  exports.DiagramService = DiagramService;
+  exports.DiagramsModule = DiagramsModule;
   exports.DialogMangmentService = DialogMangmentService;
   exports.DirectiveModule = DirectiveModule;
   exports.DisplaySuitableIconComponent = DisplaySuitableIconComponent;
@@ -31376,6 +32929,7 @@
   exports.HijriDatePipe = HijriDatePipe;
   exports.HijriDatepickerComponent = HijriDatepickerComponent;
   exports.HijriGregorianDatepickerComponent = HijriGregorianDatepickerComponent;
+  exports.IN_OUT_DIRECTION = IN_OUT_DIRECTION;
   exports.IconService = IconService;
   exports.InitializationService = InitializationService;
   exports.ItemListComponent = ItemListComponent;
@@ -31386,19 +32940,31 @@
   exports.LoanRequestComponent = LoanRequestComponent;
   exports.LocalStoragService = LocalStoragService;
   exports.LocalizedDatePipe = LocalizedDatePipe;
+  exports.MESSAGE_TYPE = MESSAGE_TYPE;
   exports.MY_MOMENT_FORMATS = MY_MOMENT_FORMATS;
   exports.MainfolderService = MainfolderService;
+  exports.MessageService = MessageService;
   exports.MomentDateAdapter = MomentDateAdapter;
   exports.MoveComponent = MoveComponent;
   exports.MultiValuePipe = MultiValuePipe;
   exports.MultipleDynamicFormViewerComponent = MultipleDynamicFormViewerComponent;
   exports.MutipleDynamicFormViewerModule = MutipleDynamicFormViewerModule;
+  exports.NODE_CIRCLE_SIZE = NODE_CIRCLE_SIZE;
+  exports.NODE_HEIGHT = NODE_HEIGHT;
+  exports.NODE_MARGIN = NODE_MARGIN;
+  exports.NODE_STATUS = NODE_STATUS;
+  exports.NODE_TYPE = NODE_TYPE;
+  exports.NODE_WIDTH = NODE_WIDTH;
   exports.NOTIFICATIONS_LIST_OPTIONS = NOTIFICATIONS_LIST_OPTIONS;
   exports.NOTIFICATION_ICON = NOTIFICATION_ICON;
   exports.NOTIFICATION_ITEM = NOTIFICATION_ITEM;
   exports.NOTIFICATION_STATUS = NOTIFICATION_STATUS;
+  exports.NOTIFY_EVENT = NOTIFY_EVENT;
   exports.NgxHijriGregorianDatepickerModule = NgxHijriGregorianDatepickerModule;
   exports.NoDataComponent = NoDataComponent;
+  exports.NodeIconComponent = NodeIconComponent;
+  exports.NodeInputsComponent = NodeInputsComponent;
+  exports.NodeOutputsComponent = NodeOutputsComponent;
   exports.NotificationIconDirective = NotificationIconDirective;
   exports.NotificationItemComponent = NotificationItemComponent;
   exports.NotificationItemDirective = NotificationItemDirective;
@@ -31434,8 +33000,10 @@
   exports.PublishingDocumentService = PublishingDocumentService;
   exports.ReadMoreComponent = ReadMoreComponent;
   exports.RecentlyViewedService = RecentlyViewedService;
+  exports.RemoveButtonComponent = RemoveButtonComponent;
   exports.RenameComponent = RenameComponent;
   exports.RolesService = RolesService;
+  exports.SOCKET_WIDTH = SOCKET_WIDTH;
   exports.SUBSCRIPTION_STATE = SUBSCRIPTION_STATE;
   exports.SafeHtmlPipe = SafeHtmlPipe;
   exports.ScanComponent = ScanComponent;
@@ -31453,12 +33021,16 @@
   exports.SharedServicesModule = SharedServicesModule;
   exports.SidepanelComponent = SidepanelComponent;
   exports.SingleActivityComponent = SingleActivityComponent;
+  exports.Socket = Socket;
   exports.SpinnerComponent = SpinnerComponent;
+  exports.StatusIconComponent = StatusIconComponent;
   exports.TRANSLATION_PROVIDER = TRANSLATION_PROVIDER;
   exports.TableComponent = TableComponent;
   exports.TableModule = TableModule;
   exports.TagsApiService = TagsApiService;
   exports.TemplateModalComponent = TemplateModalComponent;
+  exports.TemplateNode = TemplateNode;
+  exports.TemplateNodeComponent = TemplateNodeComponent;
   exports.TimeAgoPipe = TimeAgoPipe;
   exports.ToastsModule = ToastsModule;
   exports.TransferDocComponent = TransferDocComponent;
@@ -31484,10 +33056,13 @@
   exports.VocabularyApiService = VocabularyApiService;
   exports.VocabularyComponent = VocabularyComponent;
   exports.VocabularyModule = VocabularyModule;
+  exports.WorkflowService = WorkflowService;
+  exports.ZoomControlComponent = ZoomControlComponent;
   exports.appInitializer = appInitializer;
   exports.departmentCacheBuster$ = departmentCacheBuster$;
   exports.extensionJsonsFactory = extensionJsonsFactory;
   exports.filterEnabled = filterEnabled;
+  exports.getConnections = getConnections;
   exports.getValue = getValue;
   exports.mergeArrays = mergeArrays;
   exports.mergeObjects = mergeObjects;
@@ -31495,6 +33070,11 @@
   exports.provideExtensionConfig = provideExtensionConfig;
   exports.reduceEmptyMenus = reduceEmptyMenus;
   exports.reduceSeparators = reduceSeparators;
+  exports.removeConnections = removeConnections;
+  exports.removeNode = removeNode;
+  exports.removeNodeAndConnections = removeNodeAndConnections;
+  exports.serializeControl = serializeControl;
+  exports.serializePort = serializePort;
   exports.sortByOrder = sortByOrder;
 
   Object.defineProperty(exports, '__esModule', { value: true });