nuxeo-development-framework 4.0.1 → 4.0.3

package/fesm2015/nuxeo-development-framework.js

@@ -105,6 +105,18 @@ import { MatDividerModule } from '@angular/material/divider';
 import localeAr from '@angular/common/locales/ar';
 import localeEn from '@angular/common/locales/en';
 import { RxReactiveFormsModule } from '@rxweb/reactive-form-validators';
+import * as i2$8 from 'rete-angular-plugin';
+import { SocketComponent, ConnectionComponent, NodeComponent, AngularPlugin, Presets as Presets$1, ReteModule } from 'rete-angular-plugin';
+import { ClassicPreset, NodeEditor } from 'rete';
+import { AreaPlugin, AreaExtensions } from 'rete-area-plugin';
+import { AutoArrangePlugin, Presets } from 'rete-auto-arrange-plugin';
+import { ConnectionPlugin, Presets as Presets$2 } from 'rete-connection-plugin';
+import { ReroutePlugin, RerouteExtensions } from 'rete-connection-reroute-plugin';
+import { ReadonlyPlugin } from 'rete-readonly-plugin';
+import { MinimapPlugin } from 'rete-minimap-plugin';
+import { curveLinear } from 'd3-shape';
+import { ConnectionPathPlugin, Transformers } from 'rete-connection-path-plugin';
+import { getDOMSocketPosition } from 'rete-render-utils';
 import * as i7$3 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -7011,6 +7023,23 @@ class DepartmentApiService {
             return treeItem;
         });
     }
+    getFullDepartmentTree(customPageProvider, customParams) {
+        let obj = customParams ? customParams : {};
+        let 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',
+            },
+        });
+    }
 }
 DepartmentApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DepartmentApiService, deps: [{ token: CallApiService }, { token: TranslationService }, { token: NuxeoService }, { token: AdapterService }, { token: GlobalAdminService }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Injectable });
 DepartmentApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DepartmentApiService, providedIn: 'root' });
@@ -7052,6 +7081,12 @@ __decorate([
         cacheBusterNotifier: departmentCacheBuster$,
     })
 ], DepartmentApiService.prototype, "updateDepartment", null);
+__decorate([
+    Cacheable({
+        cacheBusterObserver: departmentCacheBuster$,
+        storageStrategy: LocalStorageStrategy
+    })
+], DepartmentApiService.prototype, "getFullDepartmentTree", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DepartmentApiService, decorators: [{
             type: Injectable,
             args: [{
@@ -7060,7 +7095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], ctorParameters: function () { return [{ type: CallApiService }, { type: TranslationService }, { type: NuxeoService }, { type: AdapterService }, { type: GlobalAdminService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['environment']
-                }] }]; }, propDecorators: { getDepartmentTree: [], getDepartmentDetails: [], getDepartmentNestedTree: [], createDepartment: [], createDepartmentInRoot: [], updateDepartment: [] } });
+                }] }]; }, propDecorators: { getDepartmentTree: [], getDepartmentDetails: [], getDepartmentNestedTree: [], createDepartment: [], createDepartmentInRoot: [], updateDepartment: [], getFullDepartmentTree: [] } });
 
 var _DropdownTreeviewSelectI18n_defaultSelection;
 /** @ignore */
@@ -14005,6 +14040,7 @@ class ScanComponent {
                 allinputs[i].value = '';
             }
         }
+        //@ts-ignore
         if (Dynamsoft.Lib.env.bIE === true && Dynamsoft.Lib.env.bWin64 === true) {
             let o = document.getElementById('samplesource64bit');
             if (o) {
@@ -23436,6 +23472,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
+var _FileGridInfiniteScrollDirective_instances, _FileGridInfiniteScrollDirective_scrollSubject, _FileGridInfiniteScrollDirective_scrollHandler, _FileGridInfiniteScrollDirective_isNodeChanging, _FileGridInfiniteScrollDirective_handleViewModeChanged, _FileGridInfiniteScrollDirective_removeListener;
+class FileGridInfiniteScrollDirective {
+    constructor() {
+        _FileGridInfiniteScrollDirective_instances.add(this);
+        this.infiniteScrollDistance = 5;
+        this.scrolled = new EventEmitter();
+        _FileGridInfiniteScrollDirective_scrollSubject.set(this, new Subject());
+        _FileGridInfiniteScrollDirective_scrollHandler.set(this, void 0);
+        _FileGridInfiniteScrollDirective_isNodeChanging.set(this, false);
+    }
+    ngAfterViewInit() {
+        this.fileManager.instance.on('contentReady', (e) => {
+            __classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_instances, "m", _FileGridInfiniteScrollDirective_handleViewModeChanged).call(this);
+        });
+        this.fileManager.instance.on('optionChanged', (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(() => { __classPrivateFieldSet(this, _FileGridInfiniteScrollDirective_isNodeChanging, false, "f"); }, 1000);
+            }
+        });
+        __classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_scrollSubject, "f").pipe(debounceTime(500)).subscribe(() => {
+            this.scrolled.emit();
+            console.log('scroll trigered');
+        });
+    }
+}
+_FileGridInfiniteScrollDirective_scrollSubject = new WeakMap(), _FileGridInfiniteScrollDirective_scrollHandler = new WeakMap(), _FileGridInfiniteScrollDirective_isNodeChanging = new WeakMap(), _FileGridInfiniteScrollDirective_instances = new WeakSet(), _FileGridInfiniteScrollDirective_handleViewModeChanged = function _FileGridInfiniteScrollDirective_handleViewModeChanged() {
+    try {
+        __classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_instances, "m", _FileGridInfiniteScrollDirective_removeListener).call(this);
+        setTimeout(() => {
+            const scrollableElement = this.fileManager.instance._itemView._$element[0].getElementsByClassName('dx-scrollable-container')[0];
+            // Define the event handler function
+            const onScroll = () => {
+                if (__classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_isNodeChanging, "f"))
+                    return;
+                const scrollTop = scrollableElement.scrollTop;
+                const scrollHeight = scrollableElement.scrollHeight;
+                const 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() {
+    const 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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileGridInfiniteScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FileGridInfiniteScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FileGridInfiniteScrollDirective, selector: "[ndfFileGridInfiniteScroll]", inputs: { fileManager: ["ndfFileGridInfiniteScroll", "fileManager"], infiniteScrollDistance: "infiniteScrollDistance" }, outputs: { scrolled: "scrolled" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileGridInfiniteScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ndfFileGridInfiniteScroll]'
+                }]
+        }], propDecorators: { fileManager: [{
+                type: Input,
+                args: ['ndfFileGridInfiniteScroll']
+            }], infiniteScrollDistance: [{
+                type: Input
+            }], scrolled: [{
+                type: Output
+            }] } });
+
 var _FileManagerAbstract_instances, _FileManagerAbstract_foldersSubscription$, _FileManagerAbstract_loadMore, _FileManagerAbstract_resetPagination, _FileManagerAbstract_initPagination, _FileManagerAbstract_getNode, _FileManagerAbstract_addOrReplace;
 //
 class FileManagerAbstract {
@@ -25425,79 +25534,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
-var _FileGridInfiniteScrollDirective_instances, _FileGridInfiniteScrollDirective_scrollSubject, _FileGridInfiniteScrollDirective_scrollHandler, _FileGridInfiniteScrollDirective_isNodeChanging, _FileGridInfiniteScrollDirective_handleViewModeChanged, _FileGridInfiniteScrollDirective_removeListener;
-class FileGridInfiniteScrollDirective {
-    constructor() {
-        _FileGridInfiniteScrollDirective_instances.add(this);
-        this.infiniteScrollDistance = 5;
-        this.scrolled = new EventEmitter();
-        _FileGridInfiniteScrollDirective_scrollSubject.set(this, new Subject());
-        _FileGridInfiniteScrollDirective_scrollHandler.set(this, void 0);
-        _FileGridInfiniteScrollDirective_isNodeChanging.set(this, false);
-    }
-    ngAfterViewInit() {
-        this.fileManager.instance.on('contentReady', (e) => {
-            __classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_instances, "m", _FileGridInfiniteScrollDirective_handleViewModeChanged).call(this);
-        });
-        this.fileManager.instance.on('optionChanged', (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(() => { __classPrivateFieldSet(this, _FileGridInfiniteScrollDirective_isNodeChanging, false, "f"); }, 1000);
-            }
-        });
-        __classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_scrollSubject, "f").pipe(debounceTime(500)).subscribe(() => {
-            this.scrolled.emit();
-            console.log('scroll trigered');
-        });
-    }
-}
-_FileGridInfiniteScrollDirective_scrollSubject = new WeakMap(), _FileGridInfiniteScrollDirective_scrollHandler = new WeakMap(), _FileGridInfiniteScrollDirective_isNodeChanging = new WeakMap(), _FileGridInfiniteScrollDirective_instances = new WeakSet(), _FileGridInfiniteScrollDirective_handleViewModeChanged = function _FileGridInfiniteScrollDirective_handleViewModeChanged() {
-    try {
-        __classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_instances, "m", _FileGridInfiniteScrollDirective_removeListener).call(this);
-        setTimeout(() => {
-            const scrollableElement = this.fileManager.instance._itemView._$element[0].getElementsByClassName('dx-scrollable-container')[0];
-            // Define the event handler function
-            const onScroll = () => {
-                if (__classPrivateFieldGet(this, _FileGridInfiniteScrollDirective_isNodeChanging, "f"))
-                    return;
-                const scrollTop = scrollableElement.scrollTop;
-                const scrollHeight = scrollableElement.scrollHeight;
-                const 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() {
-    const 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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileGridInfiniteScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FileGridInfiniteScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FileGridInfiniteScrollDirective, selector: "[ndfFileGridInfiniteScroll]", inputs: { fileManager: ["ndfFileGridInfiniteScroll", "fileManager"], infiniteScrollDistance: "infiniteScrollDistance" }, outputs: { scrolled: "scrolled" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileGridInfiniteScrollDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ndfFileGridInfiniteScroll]'
-                }]
-        }], propDecorators: { fileManager: [{
-                type: Input,
-                args: ['ndfFileGridInfiniteScroll']
-            }], infiniteScrollDistance: [{
-                type: Input
-            }], scrolled: [{
-                type: Output
-            }] } });
-
 class FileMangerModule {
 }
 FileMangerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileMangerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -27192,6 +27228,1456 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+const 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,
+        },
+    },
+};
+
+const IN_OUT_DIRECTION = {
+    start: 'start',
+    end: 'end',
+    top: 'top',
+    bottom: 'bottom',
+};
+
+const MESSAGE_TYPE = {
+    configUpdated: 'configUpdated',
+    refresh: 'refresh',
+};
+
+const NODE_TYPE = {
+    start: 'start',
+    content: 'content',
+    template: 'template',
+    end: 'end',
+};
+
+const NOTIFY_EVENT = {
+    remove: 'remove',
+};
+
+const NODE_MARGIN = 60;
+const NODE_WIDTH = 150;
+const NODE_HEIGHT = 118;
+const NODE_CIRCLE_SIZE = 72;
+const DIAGRAM_HEIGHT = 600;
+const SOCKET_WIDTH = 8;
+
+const NODE_STATUS = {
+    draft: 'draft',
+    completed: 'completed',
+    rejected: 'rejected',
+    inProgress: 'inProgress',
+    upcoming: 'upcoming',
+    approved: 'approved',
+};
+
+class DiagramPluginsService {
+    setPlugins({ plugins, layout }) {
+        this.area = plugins.area;
+        this.readonly = plugins.readonly;
+        this.arrange = plugins.arrange;
+        this.reroute = plugins.reroute;
+    }
+    destroy() {
+        this.area.destroy();
+    }
+}
+DiagramPluginsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramPluginsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DiagramPluginsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramPluginsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramPluginsService, decorators: [{
+            type: Injectable
+        }] });
+
+class BaseNodeClass extends ClassicPreset.Node {
+    constructor(config) {
+        super(config.label);
+        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;
+    }
+}
+
+class CircleNode extends BaseNodeClass {
+    constructor(config) {
+        super(config);
+        this.width = NODE_CIRCLE_SIZE;
+        this.height = NODE_CIRCLE_SIZE;
+    }
+}
+
+class Connection extends ClassicPreset.Connection {
+    constructor() {
+        super(...arguments);
+        this.renderType = 'default';
+    }
+}
+
+class ContentNode extends BaseNodeClass {
+    constructor(config) {
+        super(config);
+    }
+}
+
+class Socket extends ClassicPreset.Socket {
+    constructor(name, renderType = 'default') {
+        super(name);
+        this.renderType = renderType;
+    }
+}
+
+class TemplateNode extends BaseNodeClass {
+    constructor(config) {
+        super(config);
+        this.type = NODE_TYPE.template;
+        if (config.template) {
+            this.template = config.template;
+        }
+    }
+}
+
+/**
+ *
+ * @param config
+ * @returns
+ */
+const customizeSocket = (config) => (data) => {
+    const payload = data.payload;
+    if (payload.renderType === 'custom' || config.socketType === 'custom') {
+        return CustomSocketComponent;
+    }
+    return SocketComponent;
+};
+/**
+ *
+ * @param config
+ * @param editor
+ * @returns
+ */
+const customizeNode = (config, editor) => (data) => {
+    var _a;
+    const node = data.payload;
+    (_a = node.config) !== null && _a !== void 0 ? _a : (node.config = config['node']);
+    return initAngularComponentByType(node.type);
+};
+/**
+ *
+ * @param config
+ * @returns
+ */
+const customizeConnection = (config) => (data) => {
+    const payload = data.payload;
+    if (payload.renderType === 'custom' || config.connectionType == 'custom') {
+        return CustomConnectionComponent;
+    }
+    return ConnectionComponent;
+};
+const initNodeByType = (type, config) => {
+    const _nodes = {
+        start: CircleNode,
+        content: ContentNode,
+        template: TemplateNode,
+        end: CircleNode,
+    };
+    return new _nodes[type](config) || new ContentNode(config);
+};
+const initAngularComponentByType = (type) => {
+    const _components = {
+        content: ContentNodeComponent,
+        start: CircleNodeComponent,
+        end: CircleNodeComponent,
+        template: TemplateNodeComponent,
+    };
+    return _components[type] || NodeComponent;
+};
+
+const createSegmentedPath = (connection, options) => {
+    const { multiPoints = true, offset = 0 } = options || {};
+    return (points) => {
+        if (points.length !== 2) {
+            throw new Error('Exactly two points are required to create a linear path.');
+        }
+        const [start, end] = points;
+        if (multiPoints) {
+            const midpointY = (end.y - start.y) / 2 + start.y;
+            const intermediatePoints = [
+                { x: start.x, y: midpointY - offset },
+                { x: end.x, y: midpointY + offset },
+            ];
+            // 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];
+    };
+};
+
+const initPathPlugin = (config) => new ConnectionPathPlugin({
+    curve: (c) => { var _a; return (_a = (c.curve || (config === null || config === void 0 ? void 0 : config.curve))) !== null && _a !== void 0 ? _a : curveLinear; },
+    transformer: (c) => {
+        var _a, _b, _c;
+        return ((_a = config === null || config === void 0 ? void 0 : config.transform) === null || _a === void 0 ? void 0 : _a.active)
+            ? createSegmentedPath(c, (_b = config === null || config === void 0 ? void 0 : config.transform) === null || _b === void 0 ? void 0 : _b.options)
+            : Transformers.classic({
+                vertical: !!(config === null || config === void 0 ? void 0 : config.vertical),
+                curvature: (_c = config === null || config === void 0 ? void 0 : config.curvature) !== null && _c !== void 0 ? _c : 0.3,
+            });
+    },
+    arrow: (connection) => (!(config === null || config === void 0 ? void 0 : config.arrow) ? false : config === null || config === void 0 ? void 0 : config.arrow),
+});
+
+const socketPositionWatcher = (offset = 1, isVertical = false, editor) => getDOMSocketPosition({
+    offset({ x, y }, nodeId, side, key) {
+        return { x, y };
+    },
+});
+
+const createDiagramEditor = (container, injector, config) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c, _d, _e, _f, _g;
+    //#region PLUGINS
+    const socket = new Socket('', config === null || config === void 0 ? void 0 : config.socketType);
+    const editor = new NodeEditor();
+    const area = new AreaPlugin(container);
+    const connection = new ConnectionPlugin();
+    const pathPlugin = initPathPlugin(config === null || config === void 0 ? void 0 : config.path);
+    const angularRender = new AngularPlugin({ injector });
+    const readonly = new ReadonlyPlugin();
+    const arrange = new AutoArrangePlugin();
+    const reroute = new ReroutePlugin();
+    const minimap = new MinimapPlugin((_a = config === null || config === void 0 ? void 0 : config.minimap) === null || _a === void 0 ? void 0 : _a.options);
+    //#endregion
+    //#region SELECTORS
+    const selector = AreaExtensions.selector();
+    const accumulating = AreaExtensions.accumulateOnCtrl();
+    AreaExtensions.selectableNodes(area, selector, { accumulating });
+    RerouteExtensions.selectablePins(reroute, selector, accumulating);
+    //#endregion
+    //#region PRESETS
+    arrange.addPreset(Presets.classic.setup());
+    angularRender.addPreset(Presets$1.classic.setup({
+        socketPositionWatcher: socketPositionWatcher(0, (_b = config === null || config === void 0 ? void 0 : config.path) === null || _b === void 0 ? void 0 : _b.vertical, editor),
+        customize: {
+            node: customizeNode(config, editor),
+            connection: customizeConnection(config),
+            socket: customizeSocket(config),
+        },
+    }));
+    angularRender.addPreset(Presets$1.minimap.setup({ size: ((_c = config === null || config === void 0 ? void 0 : config.minimap) === null || _c === void 0 ? void 0 : _c.size) || 150 }));
+    connection.addPreset(Presets$2.classic.setup());
+    if ((_d = config === null || config === void 0 ? void 0 : config.area) === null || _d === void 0 ? void 0 : _d.restrict) {
+        const _scaling = (config === null || config === void 0 ? void 0 : config.area.scaling) || { min: 0.5, max: 1.5 };
+        AreaExtensions.restrictor(area, {
+            scaling: () => _scaling,
+        });
+    }
+    //#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 {
+        editor,
+        socket,
+        plugins: {
+            area,
+            connection,
+            arrange,
+            reroute,
+            readonly,
+        },
+        destroy: () => area.destroy(),
+        layout: (props) => arrange.layout(props),
+        fitToZoom: () => {
+            AreaExtensions.zoomAt(area, editor.getNodes());
+        },
+    };
+});
+
+/**
+ *
+ * @param node
+ * @returns
+ */
+const removeNode = (data, editor) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!data || !editor) {
+        console.log('Node not found.');
+        return;
+    }
+    const nodes = editor.getNodes();
+    const node = editor.getNode(data.nodeId);
+    if (!node) {
+        console.log('Node not found.');
+        return;
+    }
+    if (node.type === NODE_TYPE.start && nodes.length > 1) {
+        return;
+    }
+    const nodeConfig = node.config;
+    return (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.isLinked)
+        ? yield removeNodeAndReplaceConnections(node, editor)
+        : yield removeNodeAndConnections(node, editor);
+});
+/**
+ *
+ * @param node
+ * @param editor
+ */
+const removeNodeAndConnections = (node, editor) => __awaiter(void 0, void 0, void 0, function* () {
+    removeConnections(node, editor);
+    yield editor.removeNode(node.id);
+});
+/**
+ *
+ * @param node
+ * @param editor
+ */
+const removeNodeAndReplaceConnections = (node, editor) => __awaiter(void 0, void 0, void 0, function* () {
+    const outputs = getConnections(editor, (connection) => connection.source == node.id);
+    const inputs = getConnections(editor, (connection) => connection.target == node.id);
+    if (!!inputs.length && !!outputs.length) {
+        yield _updateConnections(outputs, inputs, editor);
+    }
+    else {
+        removeConnections(node, editor);
+    }
+    yield editor.removeNode(node.id);
+});
+/**
+ *
+ * @param node
+ * @param editor
+ */
+const removeConnections = (node, editor) => {
+    const connections = getConnections(editor, (connection) => connection.source === node.id || connection.target === node.id);
+    if (connections.length) {
+        connections.forEach((connection) => {
+            editor.removeConnection(connection.id);
+        });
+    }
+};
+/**
+ *
+ * @param editor
+ * @param predicate
+ * @returns
+ */
+const getConnections = (editor, predicate) => {
+    return editor.getConnections().filter(predicate);
+};
+/**
+ *
+ * @param outputs
+ * @param inputs
+ * @param editor
+ */
+const _updateConnections = (outputs, inputs, editor) => __awaiter(void 0, void 0, void 0, function* () {
+    const source = inputs[0].source;
+    const target = outputs[0].target;
+    const sourceNode = editor.getNode(source);
+    const targetNode = editor.getNode(target);
+    [...outputs, ...inputs].forEach((connection) => __awaiter(void 0, void 0, void 0, function* () {
+        yield editor.removeConnection(connection.id);
+    }));
+    if (!sourceNode || !targetNode) {
+        return;
+    }
+    const connection = new Connection(sourceNode, `${sourceNode.id}-output`, targetNode, `${targetNode.id}-input`);
+    yield editor.addConnection(connection);
+});
+
+function serializePort(port) {
+    return {
+        id: port.id,
+        label: port.label,
+        socket: {
+            name: port.socket.name,
+        },
+    };
+}
+function serializeControl(control) {
+    if (control instanceof ClassicPreset.InputControl) {
+        return {
+            __type: 'ClassicPreset.InputControl',
+            id: control.id,
+            readonly: control.readonly,
+            type: control.type,
+            value: control.value,
+        };
+    }
+    return null;
+}
+
+class DiagramService {
+    /**
+     *
+     */
+    constructor(plugins) {
+        this.plugins = plugins;
+        this._editorSub = new Subject();
+        this.onReady$ = this._editorSub.asObservable();
+    }
+    setEditor(editor) {
+        this._editorSub.next(editor);
+        this.editor = editor.editor;
+        this.socket = editor.socket;
+        this.destroy = editor.destroy;
+        this.fitToZoom = editor.fitToZoom;
+    }
+    getContentNodes() {
+        return this.editor
+            .getNodes()
+            .filter((nd) => ![NODE_TYPE.start, NODE_TYPE.end].includes(nd.type));
+    }
+    getNodesData() {
+        return this.getContentNodes().map((node) => node.content.data);
+    }
+    canAddNode(nodeType) {
+        if (nodeType === NODE_TYPE.content) {
+            return true;
+        }
+        const _nodes = this.editor.getNodes();
+        const _isExist = _nodes.some((nd) => nd.type === nodeType);
+        return !_isExist;
+    }
+    addNode(node) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.editor.addNode(node);
+        });
+    }
+    createNode(type = NODE_TYPE.content, config) {
+        const _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;
+    }
+    shouldAddStart(nodeType) {
+        if (nodeType === NODE_TYPE.start) {
+            return false;
+        }
+        const _nodes = this.editor.getNodes();
+        const _isExist = _nodes.some((nd) => nd.type === NODE_TYPE.start);
+        return !_isExist;
+    }
+    getLastNode() {
+        const nodes = this.editor.getNodes();
+        return nodes.length ? nodes[nodes.length - 1] : null;
+    }
+    getNodesByType(type) {
+        return this.editor.getNodes().filter((nd) => nd.type === type);
+    }
+    getLastViewNode() {
+        const nodes = Array.from(this.plugins.area.nodeViews.values());
+        return nodes.length ? nodes[nodes.length - 1] : null;
+    }
+    createInputs(node) {
+        node.addInput(`${node.id}-input`, new ClassicPreset.Input(this.socket));
+        return node;
+    }
+    createOutputs(node) {
+        node.addOutput(`${node.id}-output`, new ClassicPreset.Output(this.socket, '', false));
+        return node;
+    }
+    addConnection(sourceNode, targetNode) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.editor.addConnection(this.createConnection(sourceNode, targetNode));
+        });
+    }
+    createConnection(sourceNode, targetNode) {
+        const connection = new Connection(sourceNode, `${sourceNode.id}-output`, targetNode, `${targetNode.id}-input`);
+        connection.status = targetNode.status;
+        return connection;
+    }
+    appendConnection(connection) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.editor.addConnection(connection);
+        });
+    }
+    clear() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.editor.clear();
+        });
+    }
+    redraw() {
+        this.editor.getNodes().forEach((node) => {
+            this.plugins.area.update('node', node.id);
+        });
+    }
+    notifyListener(node) {
+        return (eventType, payload) => {
+            var _a;
+            const _actions = {
+                [NOTIFY_EVENT.remove]: this._removeNode.bind(this),
+            };
+            return (_a = _actions[eventType]) === null || _a === void 0 ? void 0 : _a.call(_actions, payload);
+        };
+    }
+    _removeNode(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const node = this.editor.getNode(data.nodeId);
+            if (!node) {
+                return;
+            }
+            const viewNode = (id) => this.plugins.area.nodeViews.get(id);
+            let config = node.config;
+            let index = null;
+            let position = null;
+            let direction = null;
+            if (config.isLinked) {
+                index = this.editor.getNodes().findIndex((nd) => nd.id === data.nodeId);
+                position = viewNode(data.nodeId).position;
+                direction = node.directions;
+            }
+            this.plugins.readonly.disable();
+            yield removeNode(data, this.editor);
+            if (config.isLinked) {
+                const nodes = this.editor.getNodes().slice(index);
+                while (nodes.length) {
+                    const _node = nodes.shift();
+                    const _dir = Object.assign({}, _node.directions);
+                    const _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));
+                    }
+                    yield this.plugins.area.translate(_node.id, position);
+                    yield this.plugins.area.update('node', _node.id);
+                    position = _position;
+                    direction = _dir;
+                }
+            }
+            this.plugins.readonly.enable();
+        });
+    }
+    translateView() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { container, area } = this.plugins.area;
+            const rect = container.getBoundingClientRect();
+            const k = area.transform.k;
+            const delta = -0.2;
+            const ox = Math.max(0, (rect.left - container.clientWidth / 2) * k);
+            const oy = Math.max(0, (rect.top - container.clientHeight / 2) * k);
+            area.zoom(Math.max(0.1, k * (1 + delta)), ox * delta, oy * delta);
+        });
+    }
+}
+DiagramService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramService, deps: [{ token: DiagramPluginsService }], target: i0.ɵɵFactoryTarget.Injectable });
+DiagramService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: DiagramPluginsService }]; } });
+
+class MessageService {
+    constructor() {
+        this.messageSubject = new Subject();
+    }
+    sendMessage(key, payload) {
+        this.messageSubject.next({ key, payload });
+    }
+    onMessage(key) {
+        return this.messageSubject.asObservable().pipe(filter$1((data) => data.key === key), map((data) => data.payload));
+    }
+}
+MessageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MessageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MessageService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MessageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class WorkflowService {
+    constructor(_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;
+    }
+    get _diagramClientRect() {
+        return this._plugins.area.container.getBoundingClientRect();
+    }
+    setConfig(_config) {
+        this._config = _config;
+        this._message.sendMessage(MESSAGE_TYPE.configUpdated, _config);
+    }
+    addNode(nodeType, data) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this._diagram.canAddNode(nodeType)) {
+                if (this._isReadonlyDisabled()) {
+                    this._plugins.readonly.enable();
+                }
+                return;
+            }
+            let position = { x: this._offset, y: this._offset };
+            if (this._isReadonlyEnabled()) {
+                this._plugins.readonly.disable();
+            }
+            const _node = this._createNode(nodeType, data);
+            if (this._diagram.shouldAddStart(nodeType)) {
+                yield this.addStartNode(position);
+            }
+            if ((_a = this._config.node) === null || _a === void 0 ? void 0 : _a.isLinked) {
+                const lastNode = yield this._linkToLastNode(_node);
+                if (lastNode) {
+                    position = this._calculatePosition(_node, lastNode);
+                }
+            }
+            yield this._diagram.addNode(_node);
+            yield this._plugins.area.translate(_node.id, position);
+            if ((_b = this._config) === null || _b === void 0 ? void 0 : _b.fitToView) {
+                setTimeout(() => {
+                    this._diagram.fitToZoom();
+                }, 300);
+            }
+            if (this._isReadonlyDisabled()) {
+                this._plugins.readonly.enable();
+            }
+        });
+    }
+    removeEndNode() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const node = this._diagram.getNodesByType(NODE_TYPE.end)[0];
+            if (node) {
+                yield removeNodeAndConnections(node, this._diagram.editor);
+            }
+        });
+    }
+    /**
+     *
+     * @param _node
+     * @param lastNode
+     * @returns
+     */
+    _calculatePosition(_node, lastNode) {
+        const isEndNode = _node.type === NODE_TYPE.end;
+        return {
+            x: this._calculatePositionX(lastNode.node.type, lastNode.viewNode.position.x),
+            y: this._calculatePositionY(isEndNode ? NODE_TYPE.end : lastNode.node.type, lastNode.viewNode.position.y),
+        };
+    }
+    _createNode(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 }));
+    }
+    addWrapNodesPipe(editor) {
+        editor.addPipe((context) => __awaiter(this, void 0, void 0, function* () {
+            if (context.type === 'nodecreate') {
+                if (context.data.type === NODE_TYPE.end) {
+                    let node = this._diagram.getLastNode();
+                    node.directions.outputs = IN_OUT_DIRECTION.end;
+                    yield this._plugins.area.update('node', node.id);
+                }
+                else {
+                    return this._changeNodeSocketPosition(context);
+                }
+            }
+            if (context.type === 'nodecreated' && context.data.type !== NODE_TYPE.end) {
+                setTimeout(() => {
+                    this._updateNodePosition(context);
+                });
+            }
+            return context;
+        }));
+    }
+    _changeNodeSocketPosition(context) {
+        const 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);
+    }
+    _linkToLastNode(_addedNode) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let node = this._diagram.getLastNode();
+            let viewNode = this._diagram.getLastViewNode();
+            if (node && viewNode) {
+                yield this._diagram.addConnection(node, _addedNode);
+                return { node, viewNode };
+            }
+            return null;
+        });
+    }
+    /**
+     *
+     * @returns
+     */
+    _isReadonlyDisabled() {
+        return this._config.readonly && !this._plugins.readonly.enabled;
+    }
+    /**
+     *
+     * @returns
+     */
+    _isReadonlyEnabled() {
+        return this._config.readonly && this._plugins.readonly.enabled;
+    }
+    /**
+     *
+     * @param position
+     */
+    addStartNode(position) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const startNode = this._diagram.createNode(NODE_TYPE.start, {
+                type: NODE_TYPE.start,
+                label: NODE_TYPE.start,
+                name: 'start',
+            });
+            yield this._diagram.addNode(startNode);
+            yield this._plugins.area.translate(startNode.id, position);
+        });
+    }
+    /**
+     *
+     * @param nodeType
+     * @param y
+     * @returns
+     */
+    _calculatePositionY(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
+     */
+    _calculatePositionX(nodeType, lastNodePositionX) {
+        const _nodeWidth = nodeType === NODE_TYPE.content
+            ? this._defaultNodeWidth
+            : this._defaultNodeCircleSize;
+        return lastNodePositionX + this._defaultNodeMargin + _nodeWidth;
+    }
+    /**
+     *
+     * @param node
+     * @param previousNode
+     * @returns
+     */
+    _isOverEndBoundary(node, previousNode) {
+        var _a;
+        const _diagramWidth = Number((_a = this._diagramClientRect) === null || _a === void 0 ? void 0 : _a.width) - this._defaultNodeMargin;
+        const _width = previousNode.position.x + (node.width + this._defaultNodeMargin) * 2;
+        return _width >= _diagramWidth;
+    }
+    /**
+     *
+     * @param previousNode
+     * @returns
+     */
+    _isNearEndBoundary(previousNode) {
+        var _a;
+        const currentPosition = previousNode.position.x +
+            this._defaultNodeWidth +
+            this._defaultNodeMargin * 2 +
+            this._offset;
+        const wrapLine = Number((_a = this._diagramClientRect) === null || _a === void 0 ? void 0 : _a.width) - this._defaultNodeWidth * 2;
+        return currentPosition >= wrapLine;
+    }
+    _updateNodePosition(context) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const _previousNode = this._diagram.getLastNode();
+            const _nodeViewPosition = (_a = this._plugins.area.nodeViews.get(context.data.id)) === null || _a === void 0 ? void 0 : _a.position;
+            if (_previousNode && _nodeViewPosition) {
+                const _diagramWidth = Number((_b = this._diagramClientRect) === null || _b === void 0 ? void 0 : _b.width);
+                const _currentX = _nodeViewPosition.x + context.data.width;
+                if (_currentX >= _diagramWidth) {
+                    this._plugins.readonly.disable();
+                    const _fNode = this._diagram.editor
+                        .getNodes()
+                        .find((nd) => nd.type !== NODE_TYPE.start);
+                    let x = this._offset;
+                    if (_fNode) {
+                        const _fViewNode = this._plugins.area.nodeViews.get(_fNode.id);
+                        x = (_fViewNode === null || _fViewNode === void 0 ? void 0 : _fViewNode.position.x) || this._offset;
+                    }
+                    yield this._plugins.area.translate(context.data.id, {
+                        x: x,
+                        y: _nodeViewPosition.y + this._defaultNodeMargin + context.data.height,
+                    });
+                    this._plugins.readonly.enable();
+                }
+            }
+            return context;
+        });
+    }
+}
+WorkflowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: WorkflowService, deps: [{ token: DiagramService }, { token: DiagramPluginsService }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
+WorkflowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: WorkflowService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: WorkflowService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: DiagramService }, { type: DiagramPluginsService }, { type: MessageService }]; } });
+
+class BaseNodeComponent extends NodeComponent {
+    constructor(cdr, _messageService) {
+        super(cdr);
+        this._messageService = _messageService;
+        this.nodeTypes = NODE_TYPE;
+        this.directions = IN_OUT_DIRECTION;
+        this.destroy$ = new Subject();
+        this._cdr = cdr;
+        this._messageService
+            .onMessage(MESSAGE_TYPE.configUpdated)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((res) => {
+            this._cdr.detectChanges();
+        });
+    }
+    removeNode() {
+        this.data.notify(NOTIFY_EVENT.remove, { nodeId: this.data.id });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+BaseNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseNodeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
+BaseNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BaseNodeComponent, selector: "ng-component", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: MessageService }]; }, propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class RemoveButtonComponent {
+    constructor() {
+        this.remove = new EventEmitter();
+    }
+}
+RemoveButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RemoveButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RemoveButtonComponent, selector: "node-remove-button", outputs: { remove: "remove" }, ngImport: i0, template: `
+    <button
+      mat-icon-button
+      (click)="remove.emit()"
+      (pointerdown)="$event.stopPropagation()"
+      (dblclick)="$event.stopPropagation()"
+      class="remove-icon"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  `, isInline: true, styles: ["\n      :host {\n        --size: var(--remove-icon-size, 30px);\n        position: var(--remove-icon-position, absolute);\n        inset: var(--remove-icon-inset, 0 0 auto auto);\n        opacity: var(--remove-icon-opacity, 0);\n        background: var(--remove-icon-background, inherit);\n        width: var(--size);\n        height: var(--size);\n        line-height: var(var(--remove-icon-size), calc(var(--size) - 6));\n        border-radius: 50%;\n        z-index: 2;\n        .remove-icon {\n          border: 1px solid currentColor;\n          border-radius: 50%;\n          width: var(--size);\n          height: var(--size);\n          line-height: var(--remove-icon-size, 30px);\n          background: var(--remove-icon-background, inherit);\n        }\n      }\n    "], components: [{ type: i1$8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'node-remove-button',
+                    template: `
+    <button
+      mat-icon-button
+      (click)="remove.emit()"
+      (pointerdown)="$event.stopPropagation()"
+      (dblclick)="$event.stopPropagation()"
+      class="remove-icon"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  `,
+                    styles: [
+                        `
+      :host {
+        --size: var(--remove-icon-size, 30px);
+        position: var(--remove-icon-position, absolute);
+        inset: var(--remove-icon-inset, 0 0 auto auto);
+        opacity: var(--remove-icon-opacity, 0);
+        background: var(--remove-icon-background, inherit);
+        width: var(--size);
+        height: var(--size);
+        line-height: var(var(--remove-icon-size), calc(var(--size) - 6));
+        border-radius: 50%;
+        z-index: 2;
+        .remove-icon {
+          border: 1px solid currentColor;
+          border-radius: 50%;
+          width: var(--size);
+          height: var(--size);
+          line-height: var(--remove-icon-size, 30px);
+          background: var(--remove-icon-background, inherit);
+        }
+      }
+    `,
+                    ],
+                }]
+        }], propDecorators: { remove: [{
+                type: Output
+            }] } });
+
+class NodeInputsComponent {
+}
+NodeInputsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeInputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NodeInputsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeInputsComponent, selector: "node-inputs", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": " 'da-node__inputs inputs-' + direction" } }, ngImport: i0, template: `
+    <div
+      *ngFor="let input of data.inputs | keyvalue : sortByIndex"
+      class="da-node__inputs__socket"
+      style=" height: var(--socket-size, 16px);"
+      refComponent
+      [data]="{
+        type: 'socket',
+        side: 'input',
+        key: input.key,
+        nodeId: data.id,
+        payload: input.value?.socket,
+        seed: seed
+      }"
+      [emit]="emit"
+    ></div>
+  `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeInputsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'node-inputs',
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': " 'da-node__inputs inputs-' + direction",
+                    },
+                    template: `
+    <div
+      *ngFor="let input of data.inputs | keyvalue : sortByIndex"
+      class="da-node__inputs__socket"
+      style=" height: var(--socket-size, 16px);"
+      refComponent
+      [data]="{
+        type: 'socket',
+        side: 'input',
+        key: input.key,
+        nodeId: data.id,
+        payload: input.value?.socket,
+        seed: seed
+      }"
+      [emit]="emit"
+    ></div>
+  `,
+                }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], seed: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }], sortByIndex: [{
+                type: Input
+            }] } });
+
+class NodeOutputsComponent {
+}
+NodeOutputsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeOutputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NodeOutputsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeOutputsComponent, selector: "node-outputs", inputs: { direction: "direction", data: "data", seed: "seed", emit: "emit", sortByIndex: "sortByIndex" }, host: { properties: { "class": " 'da-node__outputs outputs-' + direction" } }, ngImport: i0, template: `<div
+    class="da-node__outputs__socket"
+    style=" height: var(--socket-size, 16px);"
+    *ngFor="let output of data.outputs | keyvalue : sortByIndex"
+    refComponent
+    [data]="{
+      type: 'socket',
+      side: 'output',
+      key: output.key,
+      nodeId: data.id,
+      payload: output.value?.socket,
+      seed: seed
+    }"
+    [emit]="emit"
+  ></div>`, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$8.RefDirective, selector: "[refComponent]", inputs: ["data", "emit"] }], pipes: { "keyvalue": i4.KeyValuePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeOutputsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'node-outputs',
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': " 'da-node__outputs outputs-' + direction",
+                    },
+                    template: `<div
+    class="da-node__outputs__socket"
+    style=" height: var(--socket-size, 16px);"
+    *ngFor="let output of data.outputs | keyvalue : sortByIndex"
+    refComponent
+    [data]="{
+      type: 'socket',
+      side: 'output',
+      key: output.key,
+      nodeId: data.id,
+      payload: output.value?.socket,
+      seed: seed
+    }"
+    [emit]="emit"
+  ></div>`,
+                }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], seed: [{
+                type: Input
+            }], emit: [{
+                type: Input
+            }], sortByIndex: [{
+                type: Input
+            }] } });
+
+class CircleNodeComponent extends BaseNodeComponent {
+}
+CircleNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CircleNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CircleNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CircleNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"da-node da-node--{{ data.type }} circle-node circle-node--{{ data.type }} {{\r\n    data?.status ? ' da-node--' + data?.status : ''\r\n  }} \"\r\n  [style.--node-width]=\"data.width + 'px'\"\r\n  [style.--node-height]=\"data.width + 'px'\"\r\n>\r\n  <node-remove-button\r\n    (remove)=\"removeNode()\"\r\n    *ngIf=\"data.config?.canRemove\"\r\n  ></node-remove-button>\r\n\r\n  <div\r\n    class=\"da-node__title circle-node__title\"\r\n    [attr.tooltip]=\"data.content?.data?.tooltip\"\r\n    [class.node-tooltip]=\"!!data.content?.data?.tooltip\"\r\n  >\r\n    {{ 'diagram.' + data.name | translate }}\r\n  </div>\r\n\r\n  <node-inputs\r\n    [direction]=\"data.directions.inputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-inputs>\r\n\r\n  <node-outputs\r\n    [direction]=\"data.directions.outputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-outputs>\r\n</div>\r\n", styles: [".da-node{--width: var(--node-width);--height: var(--node-height);--socket-offset-negative: 0;--socket-position-start: var(--socket-offset-negative) auto;--socket-position-end: auto var(--socket-offset-negative);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer)}.da-node--draft{--node-color: var(--status-draft-color, #555);--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var(--status-draft-border, 1px solid #555);--node-shadow: var(--status-draft-shadow, unset)}.da-node--upcoming{--node-color: var(--status-upcoming-color, var(--Primary-100, #234990));--node-background: var( --status-upcoming-background, #fff );--node-border: var(--status-upcoming-border, 1px solid var(--node-color, #234990));--node-shadow: var(--status-upcoming-shadow, unset)}.da-node--inProgress{--node-color: var(--status-progress-color, var(--orange-color, #f29339));--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var(--status-progress-border, 1px solid var(--orange-color, #f29339));--node-shadow: var(--status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)))}.da-node--completed{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--approved{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--rejected{--node-color: var(--status-rejected-color, var(--red-color, #bf0b30));--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var(--status-rejected-border, 1px solid var(--red-color, #bf0b30));--node-shadow: var(--status-rejected-shadow, unset)}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node__inputs,.da-node__outputs{position:var(--input-output-position, absolute);inset-inline:var(--in-out-inset-inline);inset-block:var(--in-out-inset-block);height:var(--socket-size, 16px)}.da-node__inputs__socket,.da-node__outputs__socket{height:var(--socket-size, 16px)}.da-node__inputs.inputs-top{--in-out-inset-block: var(--socket-position-start)}.da-node__inputs.inputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__inputs.inputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__inputs.inputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node__outputs.outputs-top{--in-out-inset-block: var(--socket-offset-negative)}.da-node__outputs.outputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__outputs.outputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__outputs.outputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", ".circle-node{--node-radius: 50%}.circle-node__title.node-tooltip:after{content:attr(tooltip);position:absolute;left:50%;top:-6px;transform:translate(-50%) translateY(-100%);background:rgba(0,0,0,.7);text-align:center;color:#fff;padding:4px 2px;font-size:12px;min-width:100px;border-radius:5px;pointer-events:none;display:var(--tooltip-display, none)}.circle-node:hover{--tooltip-display: block}.da-node--end{border-width:3px}\n"], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: NodeInputsComponent, selector: "node-inputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }, { type: NodeOutputsComponent, selector: "node-outputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CircleNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './circle-node.component.html',
+                    styleUrls: ['../../styles/node.scss', './circle-node.component.scss'],
+                }]
+        }] });
+
+class StatusIconComponent {
+    getIcon() {
+        switch (this.status) {
+            case NODE_STATUS.completed:
+                return 'check_circle';
+            case NODE_STATUS.rejected:
+                return 'cancel';
+            default:
+                return '';
+        }
+    }
+}
+StatusIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StatusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StatusIconComponent.ɵcmp = i0.ɵɵ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, template: ` <mat-icon>
+    {{ getIcon() }}
+  </mat-icon>`, isInline: true, components: [{ type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StatusIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'status-icon',
+                    template: ` <mat-icon>
+    {{ getIcon() }}
+  </mat-icon>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': "'da-node__check-status da-node__check-status--' + status",
+                    },
+                }]
+        }], propDecorators: { status: [{
+                type: Input
+            }] } });
+
+class NodeIconComponent {
+    isIconTemplate(icon) {
+        return icon instanceof TemplateRef;
+    }
+}
+NodeIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NodeIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NodeIconComponent, selector: "node-icon", inputs: { icon: "icon" }, host: { classAttribute: "da-node__icon" }, ngImport: i0, template: `
+    <mat-icon *ngIf="!isIconTemplate(icon)">{{ icon }}</mat-icon>
+    <span *ngIf="isIconTemplate(icon)">
+      <ng-container [ngTemplateOutlet]="icon"></ng-container>
+    </span>
+  `, isInline: true, components: [{ type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NodeIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'node-icon',
+                    template: `
+    <mat-icon *ngIf="!isIconTemplate(icon)">{{ icon }}</mat-icon>
+    <span *ngIf="isIconTemplate(icon)">
+      <ng-container [ngTemplateOutlet]="icon"></ng-container>
+    </span>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'da-node__icon',
+                    },
+                }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }] } });
+
+class ContentNodeComponent extends BaseNodeComponent {
+}
+ContentNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ContentNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ContentNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ContentNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"da-node da-node--{{ data.type }} {{\r\n    data?.status ? ' da-node--' + data?.status : ''\r\n  }}  {{ data?.styleClass }}\"\r\n  [style.--node-width]=\"data.width + 'px'\"\r\n  [style.--node-height]=\"data.height + 'px'\"\r\n>\r\n  <node-remove-button (remove)=\"removeNode()\" *ngIf=\"data?.config?.canRemove\">\r\n  </node-remove-button>\r\n\r\n  <status-icon [status]=\"data?.status\" *ngIf=\"data?.status\"></status-icon>\r\n\r\n  <node-icon *ngIf=\"data.content?.icon\" [icon]=\"data.content?.icon\"></node-icon>\r\n\r\n  <div class=\"da-node__title\">{{ data.name }}</div>\r\n  <div class=\"da-node__description\" *ngIf=\"data.description\">\r\n    {{ data.description }}\r\n  </div>\r\n  <node-inputs\r\n    [direction]=\"data.directions.inputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-inputs>\r\n\r\n  <node-outputs\r\n    [direction]=\"data.directions.outputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-outputs>\r\n</div>\r\n", styles: [".da-node{--width: var(--node-width);--height: var(--node-height);--socket-offset-negative: 0;--socket-position-start: var(--socket-offset-negative) auto;--socket-position-end: auto var(--socket-offset-negative);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer)}.da-node--draft{--node-color: var(--status-draft-color, #555);--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var(--status-draft-border, 1px solid #555);--node-shadow: var(--status-draft-shadow, unset)}.da-node--upcoming{--node-color: var(--status-upcoming-color, var(--Primary-100, #234990));--node-background: var( --status-upcoming-background, #fff );--node-border: var(--status-upcoming-border, 1px solid var(--node-color, #234990));--node-shadow: var(--status-upcoming-shadow, unset)}.da-node--inProgress{--node-color: var(--status-progress-color, var(--orange-color, #f29339));--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var(--status-progress-border, 1px solid var(--orange-color, #f29339));--node-shadow: var(--status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)))}.da-node--completed{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--approved{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--rejected{--node-color: var(--status-rejected-color, var(--red-color, #bf0b30));--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var(--status-rejected-border, 1px solid var(--red-color, #bf0b30));--node-shadow: var(--status-rejected-shadow, unset)}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node__inputs,.da-node__outputs{position:var(--input-output-position, absolute);inset-inline:var(--in-out-inset-inline);inset-block:var(--in-out-inset-block);height:var(--socket-size, 16px)}.da-node__inputs__socket,.da-node__outputs__socket{height:var(--socket-size, 16px)}.da-node__inputs.inputs-top{--in-out-inset-block: var(--socket-position-start)}.da-node__inputs.inputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__inputs.inputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__inputs.inputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node__outputs.outputs-top{--in-out-inset-block: var(--socket-offset-negative)}.da-node__outputs.outputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__outputs.outputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__outputs.outputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n"], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: StatusIconComponent, selector: "status-icon", inputs: ["status"] }, { type: NodeIconComponent, selector: "node-icon", inputs: ["icon"] }, { type: NodeInputsComponent, selector: "node-inputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }, { type: NodeOutputsComponent, selector: "node-outputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ContentNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './content-node.component.html',
+                    styleUrls: ['../../styles/node.scss'],
+                }]
+        }] });
+
+class CustomConnectionComponent extends ConnectionComponent {
+}
+CustomConnectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomConnectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CustomConnectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomConnectionComponent, selector: "connection", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: `
+    <svg
+      data-testid="connection"
+      style="z-index:-1"
+      class="{{ data?.status ? 'connection-status-' + data?.status : '' }}"
+    >
+      <path [attr.d]="path" />
+    </svg>
+  `, isInline: true, styles: ["\n      svg {\n        overflow: visible;\n        position: absolute;\n        pointer-events: none;\n        path {\n          fill: none;\n          stroke-width: 2px;\n          stroke: var(--path-color, #1b3e7f);\n          pointer-events: auto;\n        }\n      }\n    "] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomConnectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'connection',
+                    styles: [
+                        `
+      svg {
+        overflow: visible;
+        position: absolute;
+        pointer-events: none;
+        path {
+          fill: none;
+          stroke-width: 2px;
+          stroke: var(--path-color, #1b3e7f);
+          pointer-events: auto;
+        }
+      }
+    `,
+                    ],
+                    template: `
+    <svg
+      data-testid="connection"
+      style="z-index:-1"
+      class="{{ data?.status ? 'connection-status-' + data?.status : '' }}"
+    >
+      <path [attr.d]="path" />
+    </svg>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class CustomSocketComponent extends SocketComponent {
+}
+CustomSocketComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomSocketComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CustomSocketComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomSocketComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: ["\n      :host {\n        display: inline-block;\n        cursor: pointer;\n        border: 1px solid var(--primary-color, #1b3e7f);\n        width: var(--socket-size, 16px);\n        height: var(--socket-size, 16px);\n        vertical-align: middle;\n        background: white;\n        z-index: 2;\n        box-sizing: border-box;\n        opacity: var(--socket-opacity, 0);\n        border-radius: var(--socket-radius, 50%);\n        &:hover {\n          box-shadow: 0 0 0 1px var(--primary-color, #1b3e7f);\n        }\n      }\n    "] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomSocketComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    styles: [
+                        `
+      :host {
+        display: inline-block;
+        cursor: pointer;
+        border: 1px solid var(--primary-color, #1b3e7f);
+        width: var(--socket-size, 16px);
+        height: var(--socket-size, 16px);
+        vertical-align: middle;
+        background: white;
+        z-index: 2;
+        box-sizing: border-box;
+        opacity: var(--socket-opacity, 0);
+        border-radius: var(--socket-radius, 50%);
+        &:hover {
+          box-shadow: 0 0 0 1px var(--primary-color, #1b3e7f);
+        }
+      }
+    `,
+                    ],
+                }]
+        }] });
+
+class TemplateNodeComponent extends BaseNodeComponent {
+    ngOnInit() { }
+    get templateOutletContext() {
+        const { content, description, name, status, id } = this.data;
+        return {
+            $implicit: {
+                content: content,
+                description,
+                name,
+                status,
+                id,
+            },
+        };
+    }
+}
+TemplateNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TemplateNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplateNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"da-node da-node--{{ data.type }} {{\r\n    data?.status ? ' da-node--' + data?.status : ''\r\n  }} {{ data?.styleClass }}\"\r\n  [style.--node-width]=\"data.width + 'px'\"\r\n  [style.--node-height]=\"data.height + 'px'\"\r\n>\r\n  <node-remove-button (remove)=\"removeNode()\" *ngIf=\"data?.config?.canRemove\">\r\n  </node-remove-button>\r\n\r\n  <node-icon\r\n    *ngIf=\"data.content?.icon\"\r\n    [icon]=\"data.content?.icon\"\r\n    class=\"da-node__icon\"\r\n  ></node-icon>\r\n\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"data?.template || defaultTemplate\"\r\n    [ngTemplateOutletContext]=\"templateOutletContext\"\r\n  ></ng-container>\r\n\r\n  <ng-template #defaultTemplate>\r\n    <div class=\"da-node__title\">{{ data?.name }}</div>\r\n  </ng-template>\r\n\r\n  <node-inputs\r\n    [direction]=\"data.directions.inputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-inputs>\r\n\r\n  <node-outputs\r\n    [direction]=\"data.directions.outputs\"\r\n    [data]=\"data\"\r\n    [seed]=\"seed\"\r\n    [emit]=\"emit\"\r\n    [sortByIndex]=\"sortByIndex\"\r\n  ></node-outputs>\r\n</div>\r\n", styles: [".da-node{--width: var(--node-width);--height: var(--node-height);--socket-offset-negative: 0;--socket-position-start: var(--socket-offset-negative) auto;--socket-position-end: auto var(--socket-offset-negative);width:var(--width);height:var(--height);display:var(--node-display, flex);justify-content:var(--node-justify, center);align-items:var(--node-items, center);flex-direction:var(--node-direction, column);border:var(--node-border, 1px solid #234990);border-radius:var(--node-radius, 10px);color:var(--node-color, #234990);background:var(--node-background, #fff);box-shadow:var(--node-shadow, unset);cursor:var(--node-cursor, pointer)}.da-node--draft{--node-color: var(--status-draft-color, #555);--node-background: var( --status-draft-background, #f5f5f5 );--node-border: var(--status-draft-border, 1px solid #555);--node-shadow: var(--status-draft-shadow, unset)}.da-node--upcoming{--node-color: var(--status-upcoming-color, var(--Primary-100, #234990));--node-background: var( --status-upcoming-background, #fff );--node-border: var(--status-upcoming-border, 1px solid var(--node-color, #234990));--node-shadow: var(--status-upcoming-shadow, unset)}.da-node--inProgress{--node-color: var(--status-progress-color, var(--orange-color, #f29339));--node-background: var( --status-progress-background, var(--light-orange-color, #fdf4dc) );--node-border: var(--status-progress-border, 1px solid var(--orange-color, #f29339));--node-shadow: var(--status-progress-shadow, var(--node-shadow, inset 0 0 0 2px var(--node-background), inset 0 0 0 3px var(--orange-color, #f29339)))}.da-node--completed{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--approved{--node-color: var(--status-completed-color, var(--green-color, #05cd99));--node-background: var( --status-completed-background, var(--light-green-color, #f0fff0) );--node-border: var(--status-completed-border, 1px solid var(--green-color, #05cd99));--node-shadow: var(--status-completed-shadow, unset)}.da-node--rejected{--node-color: var(--status-rejected-color, var(--red-color, #bf0b30));--node-background: var( --status-rejected-background, var(--light-red-color, #ffe0e7) );--node-border: var(--status-rejected-border, 1px solid var(--red-color, #bf0b30));--node-shadow: var(--status-rejected-shadow, unset)}.da-node__check-status{position:absolute;position:var(--check-icon-position, absolute);inset:var(--check-icon-inset, -6px -6px auto auto);color:var(--check-icon-color)}.da-node__check-status--completed{--check-icon-color: var(--status-completed-color)}.da-node__check-status--rejected{--check-icon-color: var(--status-rejected-color)}.da-node__title{text-align:center;font-weight:600}.da-node__description,.da-node__title{color:var(--node-text-color, #28282d);font-size:var(--node-text-font-size, .8rem);text-align:var(--node-text-align, center);padding-inline:var(--node-text-inline, .4rem)}.da-node__icon{position:absolute;inset-inline-start:var(--node-icon-inset-inline, 5px);inset-block-start:var(--node-icon-inset-block, 5px)}.da-node__inputs,.da-node__outputs{position:var(--input-output-position, absolute);inset-inline:var(--in-out-inset-inline);inset-block:var(--in-out-inset-block);height:var(--socket-size, 16px)}.da-node__inputs__socket,.da-node__outputs__socket{height:var(--socket-size, 16px)}.da-node__inputs.inputs-top{--in-out-inset-block: var(--socket-position-start)}.da-node__inputs.inputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__inputs.inputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__inputs.inputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node__outputs.outputs-top{--in-out-inset-block: var(--socket-offset-negative)}.da-node__outputs.outputs-bottom{--in-out-inset-block: var(--socket-position-end)}.da-node__outputs.outputs-start{--in-out-inset-inline: var(--socket-position-start)}.da-node__outputs.outputs-end{--in-out-inset-inline: var(--socket-position-end)}.da-node:hover{--remove-icon-inset: -8px -8px auto auto;--remove-icon-opacity: 1}\n", "\n      :host {\n        display: block;\n      }\n    "], components: [{ type: RemoveButtonComponent, selector: "node-remove-button", outputs: ["remove"] }, { type: NodeIconComponent, selector: "node-icon", inputs: ["icon"] }, { type: NodeInputsComponent, selector: "node-inputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }, { type: NodeOutputsComponent, selector: "node-outputs", inputs: ["direction", "data", "seed", "emit", "sortByIndex"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './template-node.component.html',
+                    styleUrls: ['../../styles/node.scss'],
+                    changeDetection: ChangeDetectionStrategy.Default,
+                    styles: [
+                        `
+      :host {
+        display: block;
+      }
+    `,
+                    ],
+                }]
+        }] });
+
+class ZoomControlComponent {
+    constructor(_plugins) {
+        this._plugins = _plugins;
+        this.delta = 0.1;
+    }
+    zoomOut() {
+        const k = this._plugins.area.area.transform.k;
+        this._plugins.area.area.zoom(k - this.delta);
+    }
+    zoomIn() {
+        const k = this._plugins.area.area.transform.k;
+        this._plugins.area.area.zoom(k + this.delta);
+    }
+}
+ZoomControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ZoomControlComponent, deps: [{ token: DiagramPluginsService }], target: i0.ɵɵFactoryTarget.Component });
+ZoomControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ZoomControlComponent, selector: "app-zoom-control", ngImport: i0, template: `
+    <button mat-flat-button (click)="zoomOut()">
+      <mat-icon>zoom_out</mat-icon>
+    </button>
+    <button mat-flat-button (click)="zoomIn()">
+      <mat-icon>zoom_in</mat-icon>
+    </button>
+  `, 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$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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ZoomControlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-zoom-control',
+                    template: `
+    <button mat-flat-button (click)="zoomOut()">
+      <mat-icon>zoom_out</mat-icon>
+    </button>
+    <button mat-flat-button (click)="zoomIn()">
+      <mat-icon>zoom_in</mat-icon>
+    </button>
+  `,
+                    styles: [
+                        `
+      :host {
+        position: var(--diagram-zoom-position, absolute);
+        inset-inline: var(--diagram-zoom-inline, auto 5px);
+        inset-block: var(--diagram-zoom-block, 5px auto);
+        background: var(--diagram-zoom-background, #f8f8ff);
+        border-radius: var(--diagram-zoom-radius, 4px);
+        border: var(--diagram-zoom-border, 1px solid #dcdce4);
+        display: var(--diagram-zoom-display, inline-flex);
+        flex-direction: var(--diagram-zoom-direction, row);
+        box-shadow: var(--diagram-zoom-shadow, 0 0 0 0 #eee);
+        .mat-flat-button {
+          background-color: transparent;
+          min-width: 36px;
+        }
+      }
+    `,
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: DiagramPluginsService }]; } });
+
+class DiagramDirective {
+    constructor(_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 EventEmitter();
+    }
+    get clientRect() {
+        return this._elementRef.nativeElement.getBoundingClientRect();
+    }
+    ngOnInit() {
+        this._appendStyles();
+    }
+    _appendZoomComponent() {
+        if (!this.zoomCtrl) {
+            return;
+        }
+        const factory = this._resolver.resolveComponentFactory(ZoomControlComponent);
+        this._viewContainerRef.createComponent(factory);
+    }
+    ngAfterViewInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._appendZoomComponent();
+            try {
+                const editor = yield createDiagramEditor(this._elementRef.nativeElement, this._injector, this.config //TODO it's Should be merged with DIAGRAM_DEFAULT_OPTIONS
+                );
+                this._pluginsService.setPlugins(editor);
+                this._diagramService.setEditor(editor);
+                this.diagramEditor = editor;
+                this.onDiagramReady.emit(editor);
+            }
+            catch (error) {
+                console.log(error);
+            }
+        });
+    }
+    _appendStyles() {
+        const _requiredStyles = {
+            position: 'var(--diagram-position, relative)',
+            width: `var(--diagram-width, ${this.width})`,
+            height: `var(--diagram-height, ${this.height})`,
+            direction: 'ltr',
+        };
+        Object.entries(_requiredStyles).forEach(([key, value]) => {
+            this._renderer.setStyle(this._elementRef.nativeElement, key, value);
+        });
+    }
+}
+DiagramDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: DiagramService }, { token: DiagramPluginsService }], target: i0.ɵɵFactoryTarget.Directive });
+DiagramDirective.ɵdir = i0.ɵɵ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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appDiagram]',
+                    exportAs: 'diagram',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: DiagramService }, { type: DiagramPluginsService }]; }, propDecorators: { height: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], zoomCtrl: [{
+                type: Input
+            }], onDiagramReady: [{
+                type: Output
+            }] } });
+
+class DiagramsModule {
+}
+DiagramsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DiagramsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramsModule, declarations: [CircleNodeComponent,
+        ContentNodeComponent,
+        CustomConnectionComponent,
+        CustomSocketComponent,
+        TemplateNodeComponent,
+        DiagramDirective,
+        RemoveButtonComponent,
+        ZoomControlComponent,
+        NodeIconComponent,
+        StatusIconComponent,
+        NodeInputsComponent,
+        NodeOutputsComponent], imports: [CommonModule,
+        ReteModule,
+        MatButtonModule,
+        MatIconModule,
+        FormsModule,
+        TranslateModule,
+        MatTooltipModule], exports: [DiagramDirective, ZoomControlComponent] });
+DiagramsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramsModule, providers: [DiagramService, DiagramPluginsService, WorkflowService], imports: [[
+            CommonModule,
+            ReteModule,
+            MatButtonModule,
+            MatIconModule,
+            FormsModule,
+            TranslateModule,
+            MatTooltipModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagramsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CircleNodeComponent,
+                        ContentNodeComponent,
+                        CustomConnectionComponent,
+                        CustomSocketComponent,
+                        TemplateNodeComponent,
+                        DiagramDirective,
+                        RemoveButtonComponent,
+                        ZoomControlComponent,
+                        NodeIconComponent,
+                        StatusIconComponent,
+                        NodeInputsComponent,
+                        NodeOutputsComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        ReteModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        FormsModule,
+                        TranslateModule,
+                        MatTooltipModule,
+                    ],
+                    exports: [DiagramDirective, ZoomControlComponent],
+                    providers: [DiagramService, DiagramPluginsService, WorkflowService],
+                }]
+        }] });
+
 const FILTER_DATES_TYPE = {
     lastDay: 'from_now-24H_to_now',
     lastWeek: 'from_now-7d_to_now',
@@ -29222,5 +30708,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActivitiesLogComponent, ActivitiesLogModule, ActivityLineComponent, AdapterService, AddPermissionsDialogComponent, AddToCollectionComponent, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AvatarComponent, AvatarModule, BooleanViewerComponent, ButtonComponent, CallApiService, CardComponent, CardModule, ChartDataService, ClickOutsideDirective, ClipboardComponent, CommentApiService, CommentsDashletComponent, CommentsModule, ComponentRegisterService, ComponentTranslationModel, ConfirmCallerDialogComponent, ConfirmCallerModule, ConfirmDialogComponent, ConfirmationDialogComponent, ConfirmationDialogModule, ContentActionType, CopyComponent, CorrespondenceRelationComponent, CorrespondenceRelationModule, CorrespondenceRelationService, CorrespondenceTagsComponent, CreateDirectoryComponent, CreateEntityComponent, CreateEntityModule, CreateModalComponent, CreationTypeComponent, CtsTagsModule, CustomDocumentViewerComponent, CustomPpViewerComponent, CustomToastrModule, CustomToastrService, CutomeVocViewerComponent, DataViewerComponent, DateFormatterService, DateHelperService, DateViewerComponent, DeleteComponent, DepartmentApiService, DepartmentFormComponent, DepartmentManagementService, DepartmentViewerComponent, DialogMangmentService, DirectiveModule, DisplaySuitableIconComponent, DisplaySuitableIconModule, DocumentScanService, DocumentTemplatesConstants, DocumentTemplatesService, DocumentUploadComponent, DocumentsComponent, DocumentsConstants, DocumentsListComponent, DocumentsModule, DocumentsService, DragAndDropDirective, DropdownViewerComponent, DynamicChartComponent, DynamicChartModule, DynamicColumnComponent, DynamicFieldsRendererComponent, DynamicFieldsRendererModule, DynamicFilterComponent, DynamicFilterModule, DynamicFormBoolItemComponent, DynamicFormBuilderComponent, DynamicFormCheckboxItemComponent, DynamicFormComponent, DynamicFormDateItemComponent, DynamicFormDepartmentComponent, DynamicFormFieldComponent, DynamicFormHijriDateitemComponent, DynamicFormMapItemComponent, DynamicFormModule, DynamicFormOptionsComponent, DynamicFormSelectItemComponent, DynamicFormSelectTagComponent, DynamicFormSelectUserFilterComponent, DynamicFormSelectUsersComponent, DynamicFormService, DynamicFormSlideToggleitemComponent, DynamicFormTextItemComponent, DynamicFormTextareaComponent, DynamicFormViewerComponent, DynamicFormVocabularyItemComponent, DynamicSearchComponent, DynamicSearchModule, DynamicSingleChartComponent, DynamicTableComponent, DynamicTableModule, DynamicTableService, DynamicTabsComponent, DynamicTabsModule, DynamicViewModule, EXTENSION_JSONS, EnvManager, EvaluatorsService, ExtensionLoaderService, ExtensionService, FILTER_DATES_TYPE, FileGridInfiniteScrollDirective, FileManagerAbstract, FileManagerAdapter, FileManagerPaginationConfig, FileManagerService, FileMangerModule, FileSizePipe, FilterComponent, FilterModule, FolderModalComponent, FolderishType, FormBuilderService, GlobalAdminService, GlobalPdfTron, GregorianDatepickerComponent, HijriDatePipe, HijriDatepickerComponent, HijriGregorianDatepickerComponent, IconService, InitializationService, ItemListComponent, Lang, LatestActivityComponent, LatestActivityModule, LibrarySharedModule, ListViewerComponent, LoanRequestComponent, LocalStoragService, LocalizedDatePipe, MY_MOMENT_FORMATS, MainfolderService, MomentDateAdapter, MoveComponent, MultiValuePipe, MultipleDynamicFormViewerComponent, MutipleDynamicFormViewerModule, NOTIFICATIONS_LIST_OPTIONS, NOTIFICATION_ICON, NOTIFICATION_ITEM, NOTIFICATION_STATUS, NgxHijriGregorianDatepickerModule, NoDataComponent, NotificationIconDirective, NotificationItemComponent, NotificationItemDirective, NotificationSourceSelectComponent, NotificationStatusToggleComponent, NotificationToastComponent, NotificationsButtonComponent, NotificationsDateSelectComponent, NotificationsListComponent, NotificationsListContainerComponent, NotificationsModule, NotificationsService, NotificationsSettingsContainerComponent, NuxeoCoreModule, NuxeoDevelopmentFrameworkComponent, NuxeoDevelopmentFrameworkModule, NuxeoDevelopmentFrameworkService, NuxeoService, PAGINATION_MODE, PANEL_MODE, PaginationComponent, PaginationModule, PdfTronModule, PdftronComponent, PdftronService, PermissionService, PermissionsComponent, PermissionsDirective, PermissionsModule, PermissionsTemplateComponent, PipesModule, PublishDialogComponent, PublishingDocumentService, ReadMoreComponent, RecentlyViewedService, RenameComponent, RolesService, SUBSCRIPTION_STATE, SafeHtmlPipe, ScanComponent, ScanModalComponent, SearchAutocompleteComponent, SecurePipe, SelectComponent, SelectModule, SelectUsersByDepartmentModule, SelectUsersByDepartmentsComponent, SetDirRtlDirective, SetRtlDirective, ShareDialogComponent, SharedDocsService, SharedServicesModule, SidepanelComponent, SingleActivityComponent, SpinnerComponent, TRANSLATION_PROVIDER, TableComponent, TableModule, TagsApiService, TemplateModalComponent, TimeAgoPipe, ToastsModule, TransferDocComponent, TranslateLoaderService, TranslatedVocabularySelectComponent, TranslationService, TreeviewSelectComponent, UpdateModalComponent, UploadFileService, UploadManagmentService, UserCardComponent, UserComponent, UserModule, UserPreferenceValues, UserPreferencesService, UserService, UsersCardComponent, UsersCardModule, UtilityService, VersionsComponent, ViewerFilesService, ViewerLogComponent, ViewerLogModule, VocabularyApiService, VocabularyComponent, VocabularyModule, appInitializer, departmentCacheBuster$, extensionJsonsFactory, filterEnabled, getValue, mergeArrays, mergeObjects, minute$1 as minute, provideExtensionConfig, reduceEmptyMenus, reduceSeparators, sortByOrder };
+export { ActivitiesLogComponent, ActivitiesLogModule, ActivityLineComponent, AdapterService, AddPermissionsDialogComponent, AddToCollectionComponent, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AvatarComponent, AvatarModule, BaseNodeClass, BooleanViewerComponent, ButtonComponent, CallApiService, CardComponent, CardModule, ChartDataService, CircleNode, CircleNodeComponent, ClickOutsideDirective, ClipboardComponent, CommentApiService, CommentsDashletComponent, CommentsModule, ComponentRegisterService, ComponentTranslationModel, ConfirmCallerDialogComponent, ConfirmCallerModule, ConfirmDialogComponent, ConfirmationDialogComponent, ConfirmationDialogModule, Connection, ContentActionType, ContentNode, ContentNodeComponent, CopyComponent, CorrespondenceRelationComponent, CorrespondenceRelationModule, CorrespondenceRelationService, CorrespondenceTagsComponent, CreateDirectoryComponent, CreateEntityComponent, CreateEntityModule, CreateModalComponent, CreationTypeComponent, CtsTagsModule, CustomConnectionComponent, CustomDocumentViewerComponent, CustomPpViewerComponent, CustomSocketComponent, CustomToastrModule, CustomToastrService, CutomeVocViewerComponent, DIAGRAM_DEFAULT_OPTIONS, DIAGRAM_HEIGHT, DataViewerComponent, DateFormatterService, DateHelperService, DateViewerComponent, DeleteComponent, DepartmentApiService, DepartmentFormComponent, DepartmentManagementService, DepartmentViewerComponent, DiagramDirective, DiagramPluginsService, DiagramService, DiagramsModule, DialogMangmentService, DirectiveModule, DisplaySuitableIconComponent, DisplaySuitableIconModule, DocumentScanService, DocumentTemplatesConstants, DocumentTemplatesService, DocumentUploadComponent, DocumentsComponent, DocumentsConstants, DocumentsListComponent, DocumentsModule, DocumentsService, DragAndDropDirective, DropdownViewerComponent, DynamicChartComponent, DynamicChartModule, DynamicColumnComponent, DynamicFieldsRendererComponent, DynamicFieldsRendererModule, DynamicFilterComponent, DynamicFilterModule, DynamicFormBoolItemComponent, DynamicFormBuilderComponent, DynamicFormCheckboxItemComponent, DynamicFormComponent, DynamicFormDateItemComponent, DynamicFormDepartmentComponent, DynamicFormFieldComponent, DynamicFormHijriDateitemComponent, DynamicFormMapItemComponent, DynamicFormModule, DynamicFormOptionsComponent, DynamicFormSelectItemComponent, DynamicFormSelectTagComponent, DynamicFormSelectUserFilterComponent, DynamicFormSelectUsersComponent, DynamicFormService, DynamicFormSlideToggleitemComponent, DynamicFormTextItemComponent, DynamicFormTextareaComponent, DynamicFormViewerComponent, DynamicFormVocabularyItemComponent, DynamicSearchComponent, DynamicSearchModule, DynamicSingleChartComponent, DynamicTableComponent, DynamicTableModule, DynamicTableService, DynamicTabsComponent, DynamicTabsModule, DynamicViewModule, EXTENSION_JSONS, EnvManager, EvaluatorsService, ExtensionLoaderService, ExtensionService, FILTER_DATES_TYPE, FileGridInfiniteScrollDirective, FileManagerAbstract, FileManagerAdapter, FileManagerPaginationConfig, FileManagerService, FileMangerModule, FileSizePipe, FilterComponent, FilterModule, FolderModalComponent, FolderishType, FormBuilderService, GlobalAdminService, GlobalPdfTron, GregorianDatepickerComponent, HijriDatePipe, HijriDatepickerComponent, HijriGregorianDatepickerComponent, IN_OUT_DIRECTION, IconService, InitializationService, ItemListComponent, Lang, LatestActivityComponent, LatestActivityModule, LibrarySharedModule, ListViewerComponent, LoanRequestComponent, LocalStoragService, LocalizedDatePipe, MESSAGE_TYPE, MY_MOMENT_FORMATS, MainfolderService, MessageService, MomentDateAdapter, MoveComponent, MultiValuePipe, MultipleDynamicFormViewerComponent, MutipleDynamicFormViewerModule, NODE_CIRCLE_SIZE, NODE_HEIGHT, NODE_MARGIN, NODE_STATUS, NODE_TYPE, NODE_WIDTH, NOTIFICATIONS_LIST_OPTIONS, NOTIFICATION_ICON, NOTIFICATION_ITEM, NOTIFICATION_STATUS, NOTIFY_EVENT, NgxHijriGregorianDatepickerModule, NoDataComponent, NodeIconComponent, NodeInputsComponent, NodeOutputsComponent, NotificationIconDirective, NotificationItemComponent, NotificationItemDirective, NotificationSourceSelectComponent, NotificationStatusToggleComponent, NotificationToastComponent, NotificationsButtonComponent, NotificationsDateSelectComponent, NotificationsListComponent, NotificationsListContainerComponent, NotificationsModule, NotificationsService, NotificationsSettingsContainerComponent, NuxeoCoreModule, NuxeoDevelopmentFrameworkComponent, NuxeoDevelopmentFrameworkModule, NuxeoDevelopmentFrameworkService, NuxeoService, PAGINATION_MODE, PANEL_MODE, PaginationComponent, PaginationModule, PdfTronModule, PdftronComponent, PdftronService, PermissionService, PermissionsComponent, PermissionsDirective, PermissionsModule, PermissionsTemplateComponent, PipesModule, PublishDialogComponent, PublishingDocumentService, ReadMoreComponent, RecentlyViewedService, RemoveButtonComponent, RenameComponent, RolesService, SOCKET_WIDTH, SUBSCRIPTION_STATE, SafeHtmlPipe, ScanComponent, ScanModalComponent, SearchAutocompleteComponent, SecurePipe, SelectComponent, SelectModule, SelectUsersByDepartmentModule, SelectUsersByDepartmentsComponent, SetDirRtlDirective, SetRtlDirective, ShareDialogComponent, SharedDocsService, SharedServicesModule, SidepanelComponent, SingleActivityComponent, Socket, SpinnerComponent, StatusIconComponent, TRANSLATION_PROVIDER, TableComponent, TableModule, TagsApiService, TemplateModalComponent, TemplateNode, TemplateNodeComponent, TimeAgoPipe, ToastsModule, TransferDocComponent, TranslateLoaderService, TranslatedVocabularySelectComponent, TranslationService, TreeviewSelectComponent, UpdateModalComponent, UploadFileService, UploadManagmentService, UserCardComponent, UserComponent, UserModule, UserPreferenceValues, UserPreferencesService, UserService, UsersCardComponent, UsersCardModule, UtilityService, VersionsComponent, ViewerFilesService, ViewerLogComponent, ViewerLogModule, VocabularyApiService, VocabularyComponent, VocabularyModule, WorkflowService, ZoomControlComponent, appInitializer, departmentCacheBuster$, extensionJsonsFactory, filterEnabled, getConnections, getValue, mergeArrays, mergeObjects, minute$1 as minute, provideExtensionConfig, reduceEmptyMenus, reduceSeparators, removeConnections, removeNode, removeNodeAndConnections, serializeControl, serializePort, sortByOrder };
 //# sourceMappingURL=nuxeo-development-framework.js.map