@brggroup/share-lib 0.0.40 → 0.0.41

package/fesm2022/brggroup-share-lib.mjs

@@ -2748,15 +2748,15 @@ class WF_TemplateStage {
     Name;
     StageType;
     SeqValue;
+    NumberDay;
     LimitValue;
     IsRequireUser;
     // #endregion properties
-    OrgImplCode;
+    IsTempId;
     constructor(obj) {
         obj = obj || {};
         this.WF_TemplateStage_Id = obj.WF_TemplateStage_Id || null;
         this.App_Org_Id = obj.App_Org_Id || '';
-        this.OrgImplCode = obj.OrgImplCode || '';
         this.CreatedDate = obj.CreatedDate || null;
         this.CreatedUser = obj.CreatedUser || '';
         this.UpdatedDate = obj.UpdatedDate || null;
@@ -2767,8 +2767,10 @@ class WF_TemplateStage {
         this.Name = obj.Name || '';
         this.StageType = obj.StageType || '';
         this.SeqValue = obj.SeqValue || null;
+        this.NumberDay = obj.NumberDay || null;
         this.LimitValue = obj.LimitValue || null;
-        this.IsRequireUser = obj.IsRequireUser || null;
+        this.IsRequireUser = obj.IsRequireUser || false;
+        this.IsTempId = obj.IsTempId || false;
     }
 }
 class WF_TemplateStageAction {
@@ -2793,6 +2795,10 @@ class WF_TemplateStageAction {
     To_StageStatus;
     WF_TransitionsRule_Id;
     // #endregion properties
+    lstRoleId;
+    _lstRoleId;
+    lstEmailActionId;
+    _lstEmailActionId;
     constructor(obj) {
         obj = obj || {};
         this.WF_TemplateStageAction_Id = obj.WF_TemplateStageAction_Id || null;
@@ -2814,12 +2820,32 @@ class WF_TemplateStageAction {
         this.To_WF_TemplateStage_Id = obj.To_WF_TemplateStage_Id || null;
         this.To_StageStatus = obj.To_StageStatus || '';
         this.WF_TransitionsRule_Id = obj.WF_TransitionsRule_Id || null;
+        this.lstRoleId = obj.lstRoleId;
+        this._lstRoleId = this.lstRoleId ? this.lstRoleId.split(',') : [];
+        this.lstEmailActionId = obj.lstEmailActionId;
+        this._lstEmailActionId = this.lstEmailActionId
+            ? this.lstEmailActionId
+                .split(',')
+                .map((x) => Number(x.trim()))
+                .filter((x) => !isNaN(x))
+            : [];
     }
 }
 class Workflow extends WF_Template {
-    lstStageStatus = [];
-    lstActionType = [];
-    lstActionStatus = [];
+    lstTemplateType;
+    lstTemplatePrint;
+    lstStageStatus;
+    lstActionType;
+    lstActionStatus;
+    constructor(obj) {
+        obj = obj || {};
+        super(obj);
+        this.lstTemplateType = obj.lstTemplateType || [];
+        this.lstTemplatePrint = obj.lstTemplatePrint || [];
+        this.lstStageStatus = obj.lstStageStatus || [];
+        this.lstActionType = obj.lstActionType || [];
+        this.lstActionStatus = obj.lstActionStatus || [];
+    }
 }
 /**
  * STAGE
@@ -2830,55 +2856,93 @@ class WorkflowStage extends WF_TemplateStage {
     constructor(obj) {
         obj = obj || {};
         super(obj);
-        this.lstAction = obj.lstAction;
+        this.lstAction = [];
+        if (obj.lstAction) {
+            obj.lstAction.forEach((x) => {
+                this.lstAction = [...this.lstAction, new WorkflowAction(x)];
+            });
+        }
         this.editorOption = obj.editorOption || new WorkflowStageEditorOption();
     }
 }
 class WorkflowStageEditorOption {
-    x = 0;
-    y = 0;
+    x;
+    y;
     isReverse;
     isReverseLabel;
     drawerPosition;
     constructor(obj) {
         obj = obj || {};
-        this.x = obj.x;
-        this.y = obj.y;
-        this.isReverse = obj.isReverse;
-        this.isReverseLabel = obj.isReverseLabel;
-        this.drawerPosition = obj.drawerPosition;
+        this.x = obj.x || 0;
+        this.y = obj.y || 0;
+        this.isReverse = obj.isReverse || false;
+        this.isReverseLabel = obj.isReverseLabel || false;
+        this.drawerPosition = obj.drawerPosition || '';
     }
 }
 /**
  * Action
  */
 class WorkflowAction extends WF_TemplateStageAction {
+    FromStageCode;
+    FromStageName;
+    ToStageCode;
     NextStageStatus; // string
-    FromStage;
     FromSide;
-    ToStage;
     ToSide;
     allowBack; // true = 2 đầu, false/undefined = 1 đầu
     labelBack;
     isBackAction;
-    editorOption = new WorkflowActionEditorOption();
+    editorOption;
+    constructor(obj) {
+        obj = obj || {};
+        super(obj);
+        this.FromStageCode = obj.FromStageCode || '';
+        this.FromStageName = obj.FromStageName || '';
+        this.NextStageStatus = obj.NextStageStatus || '';
+        this.ToStageCode = obj.ToStageCode || '';
+        this.FromSide = obj.FromSide || '';
+        this.ToSide = obj.ToSide || '';
+        this.allowBack = obj.allowBack || false;
+        this.labelBack = obj.labelBack || '';
+        this.isBackAction = obj.isBackAction || false;
+        this.editorOption = new WorkflowActionEditorOption(obj.editorOption);
+    }
 }
 class WorkflowActionEditorOption {
     points;
     drawerPosition;
+    constructor(obj) {
+        obj = obj || {};
+        this.drawerPosition = obj.drawerPosition || '';
+        this.points = [];
+        if (obj.points) {
+            obj.points.forEach((p) => {
+                this.points = [...this.points, { x: p.x, y: p.y }];
+            });
+        }
+    }
 }
 class WorkflowEditorComponent extends BaseComponent {
     //#region NGHIỆP VỤ
     lstOrg = [];
-    lstTemplateType = [];
-    lstTemplatePrint = [];
+    lstRole = [];
     template = new Workflow();
-    lstStage = [
-        new WorkflowStage({ Code: 'start', Name: 'Start', x: -35, y: 120, StageType: 'START', SeqValue: 1 }),
-        new WorkflowStage({ Code: 'end', Name: 'End', x: 780, y: 120, StageType: 'END', SeqValue: 999 }),
-    ];
+    lstStage = [];
     lstAction = [];
+    get lstEmailAction() {
+        if (this.lstAction && this.lstAction.length) {
+            const res = this.lstAction.map((x) => ({
+                ID: x.WF_TemplateStageAction_Id,
+                Name: `${x.FromStageCode}${x.FromStageName ? ' - ' : ''}${x.FromStageName} / ${x.ActionStatus}${x.ActionText ? ' - ' : ''}${x.ActionText}`,
+            }));
+            return res;
+        }
+        return [];
+    }
     onSave = new EventEmitter();
+    onDeleteStage = new EventEmitter();
+    onDeleteAction = new EventEmitter();
     //#endregion
     Math = Math;
     drawTemplateVisibel = false;
@@ -2907,7 +2971,7 @@ class WorkflowEditorComponent extends BaseComponent {
     dragStartPositions = new Map();
     dragStartEdgePoints = new Map();
     /** list các điểm đang được chọn */
-    lstSelectedStageCode = new Set();
+    lstSelectedStageId = new Set();
     // SNAP point
     gridSize = 20; // 10 / 20 / 25 tuỳ thích
     snapToGrid = true;
@@ -2985,42 +3049,72 @@ class WorkflowEditorComponent extends BaseComponent {
             this.moveSelectedNodesBy(dx, dy);
         }
     }
-    ngOnInit() {
-        console.log('ngOnInit');
-        console.log('template', this.template);
-        console.log('lstStage', this.lstStage);
-        console.log('lstAction', this.lstAction);
+    ngOnInit() { }
+    ngAfterViewInit() {
+        this.updateCanvasSize();
+    }
+    afterInput() {
+        this.template = this.template ? new Workflow(this.template) : new Workflow();
         if (!this.lstStage || !this.lstStage.length) {
             this.lstStage = [
-                { Code: 'start', Name: 'Start', x: 5000 + -35, y: 5000 + 120, StageType: 'START', SeqValue: 1 },
-                {
+                new WorkflowStage({
+                    Code: 'start',
+                    Name: 'Start',
+                    StageType: 'START',
+                    SeqValue: 1,
+                    editorOption: {
+                        x: 5000 + -35,
+                        y: 5000 + 120,
+                    },
+                }),
+                new WorkflowStage({
                     Code: 'end',
                     Name: 'End',
-                    x: 5000 + 120,
-                    y: 5000 + 380,
                     StageType: 'END',
-                    isReverseLabel: true,
                     SeqValue: 999,
-                },
+                    editorOption: {
+                        x: 5000 + 120,
+                        y: 5000 + 300,
+                        isReverseLabel: true,
+                    },
+                }),
             ];
         }
+        else {
+            let lstStage = [];
+            this.lstStage.forEach((x) => {
+                lstStage = [...lstStage, new WorkflowStage(x)];
+            });
+            this.lstStage = lstStage;
+        }
+        if (!this.lstAction || !this.lstAction.length) {
+            this.lstAction = [];
+        }
+        else {
+            let lstAction = [];
+            this.lstAction.forEach((x) => {
+                lstAction = [...lstAction, new WorkflowAction(x)];
+            });
+            this.lstAction = lstAction;
+        }
         this.lstStage.forEach((x) => {
-            x.lstAction = this.lstAction.filter((y) => y.FromStage == x.Code);
+            x.lstAction = this.lstAction.filter((y) => y.WF_TemplateStage_Id == x.WF_TemplateStage_Id);
         });
-    }
-    ngAfterViewInit() {
-        this.updateCanvasSize();
+        console.log('WorkflowEditorComponent ngOnInit');
+        console.log('template', this.template);
+        console.log('lstStage', this.lstStage);
+        console.log('lstAction', this.lstAction);
     }
     moveSelectedNodesBy(dx, dy) {
-        if (this.lstSelectedStageCode.size === 0)
+        if (this.lstSelectedStageId.size === 0)
             return;
         // ⭐ UNDO SNAPSHOT
         this.pushUndo({
             type: 'move-nodes',
-            before: this.cloneNodePositions(this.lstSelectedStageCode),
+            before: this.cloneNodePositions(this.lstSelectedStageId),
         });
         for (const n of this.lstStage) {
-            if (!this.lstSelectedStageCode.has(n.Code))
+            if (!this.lstSelectedStageId.has(n.WF_TemplateStage_Id))
                 continue;
             n.editorOption.x = this.clamp(n.editorOption.x + dx, 0, this.CANVAS_WIDTH - this.NODE_WIDTH);
             n.editorOption.y = this.clamp(n.editorOption.y + dy, 0, this.CANVAS_HEIGHT - this.NODE_HEIGHT);
@@ -3031,7 +3125,8 @@ class WorkflowEditorComponent extends BaseComponent {
     }
     addStage() {
         console.log('addStage');
-        const code = 'New_Stage_' + Math.round(Math.random() * 1000);
+        const id = Date.now();
+        const code = 'New_Stage';
         // tìm vị trí trống (đơn giản & hiệu quả)
         const baseX = 200 - this.panX;
         const baseY = 120 - this.panY;
@@ -3043,6 +3138,8 @@ class WorkflowEditorComponent extends BaseComponent {
             y += GAP_Y;
         }
         const stage = new WorkflowStage();
+        stage.WF_TemplateStage_Id = id;
+        stage.IsTempId = true;
         stage.Code = code;
         stage.Name = 'New Stage';
         stage.editorOption.x = x;
@@ -3055,13 +3152,13 @@ class WorkflowEditorComponent extends BaseComponent {
         this.hoverStage = stage;
     }
     isConnectingFrom(node) {
-        return this.connectingFrom?.node.Code === node.Code;
+        return this.connectingFrom?.node.WF_TemplateStage_Id === node.WF_TemplateStage_Id;
     }
     isDraggingFrom(node) {
-        return this.draggingNode?.Code === node.Code;
+        return this.draggingNode?.WF_TemplateStage_Id === node.WF_TemplateStage_Id;
     }
     isSelectedNode(node) {
-        return this.selectedStage?.Code === node.Code;
+        return this.selectedStage?.WF_TemplateStage_Id === node.WF_TemplateStage_Id;
     }
     cancelConnecting() {
         if (this.connectingFrom) {
@@ -3072,27 +3169,32 @@ class WorkflowEditorComponent extends BaseComponent {
         }
     }
     //#region NGHIỆP VỤ
+    onselectedRoleEmail(action) {
+        action.lstRoleId = action._lstRoleId ? action._lstRoleId.join(',') : '';
+        action.lstEmailActionId = action._lstEmailActionId ? action._lstEmailActionId.join(',') : '';
+        console.log('onselectedRoleEmail', action);
+    }
     addAction() {
         if (!this.selectedStage)
             return;
         const action = new WorkflowAction();
-        action.FromStage = this.selectedStage.Code;
+        action.WF_TemplateStage_Id = this.selectedStage.WF_TemplateStage_Id;
         action.FromSide = 'right';
         this.selectedStage.lstAction = this.selectedStage.lstAction ? [...this.selectedStage.lstAction, action] : [action];
         this.lstAction = this.lstAction ? [...this.lstAction, action] : [action];
     }
     onchangeAllowBack(action) {
         console.log('onchangeAllowBack', action);
-        const stage = this.lstStage.find((x) => x.Code == action.ToStage);
+        const stage = this.lstStage.find((x) => x.WF_TemplateStage_Id == action.To_WF_TemplateStage_Id);
         if (!stage) {
             this.notiService.error('Stage not found');
             return;
         }
         if (action.allowBack) {
             const newAction = new WorkflowAction();
-            newAction.FromStage = action.ToStage;
+            newAction.WF_TemplateStage_Id = action.To_WF_TemplateStage_Id;
             newAction.FromSide = 'right';
-            newAction.ToStage = action.FromStage;
+            newAction.To_WF_TemplateStage_Id = action.WF_TemplateStage_Id;
             newAction.ToSide = 'left';
             newAction.isBackAction = true;
             console.log('newAction', newAction);
@@ -3102,7 +3204,9 @@ class WorkflowEditorComponent extends BaseComponent {
         }
         else {
             action.labelBack = '';
-            const backAction = this.lstAction.find((x) => x.FromStage == action.ToStage && x.ToStage == action.FromStage && x.isBackAction);
+            const backAction = this.lstAction.find((x) => x.WF_TemplateStage_Id == action.To_WF_TemplateStage_Id &&
+                x.To_WF_TemplateStage_Id == action.WF_TemplateStage_Id &&
+                x.isBackAction);
             console.log('remove action', backAction);
             if (!backAction) {
                 this.notiService.error('Action not found');
@@ -3115,7 +3219,9 @@ class WorkflowEditorComponent extends BaseComponent {
         }
     }
     onchangeLabelBack(action) {
-        const backAction = this.lstAction.find((x) => x.FromStage == action.ToStage && x.ToStage == action.FromStage && x.isBackAction);
+        const backAction = this.lstAction.find((x) => x.WF_TemplateStage_Id == action.To_WF_TemplateStage_Id &&
+            x.To_WF_TemplateStage_Id == action.WF_TemplateStage_Id &&
+            x.isBackAction);
         if (!backAction) {
             this.notiService.error('Action not found');
         }
@@ -3125,7 +3231,9 @@ class WorkflowEditorComponent extends BaseComponent {
     }
     onchangeActionText(action) {
         if (action.isBackAction) {
-            const goAction = this.lstAction.find((x) => x.FromStage == action.ToStage && x.ToStage == action.FromStage && !x.isBackAction);
+            const goAction = this.lstAction.find((x) => x.WF_TemplateStage_Id == action.To_WF_TemplateStage_Id &&
+                x.To_WF_TemplateStage_Id == action.WF_TemplateStage_Id &&
+                !x.isBackAction);
             if (!goAction) {
                 this.notiService.error('Action not found');
             }
@@ -3137,37 +3245,42 @@ class WorkflowEditorComponent extends BaseComponent {
     onchangeNextStage(action) {
         console.log('onchangeNextStage', action);
     }
-    async deleteNode() {
+    async deleteStage() {
+        console.log('deleteStage', this.selectedStage);
         if (!this.selectedStage)
             return;
-        if (!(await this.confirm(`Xoá node: ${this.selectedStage.Name}`)))
+        if (!(await this.confirm(`Xoá stage?`, `${this.selectedStage.Code} - ${this.selectedStage.Name}`)))
             return;
         const node = this.selectedStage;
         // 🔹 snapshot edges liên quan
-        const relatedEdges = this.lstAction.filter((e) => e.FromStage === node.Code || e.ToStage === node.Code);
+        const relatedEdges = this.lstAction.filter((e) => e.WF_TemplateStage_Id === node.WF_TemplateStage_Id || e.To_WF_TemplateStage_Id === node.WF_TemplateStage_Id);
         // 🔹 snapshot vị trí node trong mảng
-        const nodeIndex = this.lstStage.findIndex((n) => n.Code === node.Code);
-        // ⭐ PUSH UNDO
-        this.pushUndo({
-            type: 'delete-node',
-            node: { ...node }, // clone
-            nodeIndex,
-            edges: relatedEdges.map((e) => ({ ...e })),
-        });
+        const nodeIndex = this.lstStage.findIndex((n) => n.WF_TemplateStage_Id === node.WF_TemplateStage_Id);
+        // bỏ undo khi xóa node vì bắn event ra ngoài để xóa db
+        // // ⭐ PUSH UNDO
+        // this.pushUndo({
+        //   type: 'delete-node',
+        //   node: { ...node }, // clone
+        //   nodeIndex,
+        //   edges: relatedEdges.map((e) => ({ ...e })),
+        // });
         // ❌ xoá edges
-        this.lstAction = this.lstAction.filter((e) => e.FromStage !== node.Code && e.ToStage !== node.Code);
+        this.lstAction = this.lstAction.filter((e) => e.WF_TemplateStage_Id !== node.WF_TemplateStage_Id && e.To_WF_TemplateStage_Id !== node.WF_TemplateStage_Id);
         // ❌ xoá node
         this.lstStage.splice(nodeIndex, 1);
+        this.onDeleteStage.emit(node);
         this.selectedStage = undefined;
     }
     async deleteAction(action) {
+        console.log('deleteAction', action);
         if (!(await this.confirm(`Delete action ???`)))
             return;
-        const stage = this.lstStage.find((x) => x.Code == action.FromStage);
+        const stage = this.lstStage.find((x) => x.WF_TemplateStage_Id == action.WF_TemplateStage_Id);
         if (!stage)
             return;
         stage.lstAction = stage.lstAction?.filter((x) => x != action);
         this.lstAction = this.lstAction.filter((x) => x != action);
+        this.onDeleteAction.emit(action);
         this.selectedAction = undefined;
         this.hoverAction = undefined;
     }
@@ -3241,6 +3354,21 @@ class WorkflowEditorComponent extends BaseComponent {
         this.inputActionTypeVisible = false;
     }
     //#endregion
+    //#region Action role
+    inputActionRoleValue = '';
+    handleCloseActionRole(removedTag) {
+        this.template.lstActionStatus = this.template.lstActionStatus.filter((tag) => tag !== removedTag);
+    }
+    handleInputConfirmActionRole() {
+        if (this.inputActionRoleValue &&
+            !this.template.lstActionStatus?.find((x) => x.Code === this.inputActionRoleValue)) {
+            this.template.lstActionStatus = this.template.lstActionStatus
+                ? [...this.template.lstActionStatus, { Code: this.inputValue }]
+                : [{ Code: this.inputValue }];
+        }
+        this.inputActionRoleValue = '';
+    }
+    //#endregion
     //#region Action status
     inputVisible = false;
     inputValue = '';
@@ -3293,7 +3421,7 @@ class WorkflowEditorComponent extends BaseComponent {
         this.isSelecting = true;
         this.selectStart = p;
         this.selectEnd = p;
-        this.lstSelectedStageCode.clear();
+        this.lstSelectedStageId.clear();
     }
     onMouseMoveCanvas(event) {
         if (this.isPanning && this.panStart) {
@@ -3354,9 +3482,9 @@ class WorkflowEditorComponent extends BaseComponent {
             let maxX = -Infinity;
             let maxY = -Infinity;
             for (const n of this.lstStage) {
-                if (!this.lstSelectedStageCode.has(n.Code))
+                if (!this.lstSelectedStageId.has(n.WF_TemplateStage_Id))
                     continue;
-                const start = this.dragStartPositions.get(n.Code);
+                const start = this.dragStartPositions.get(n.WF_TemplateStage_Id);
                 minX = Math.min(minX, start.x);
                 minY = Math.min(minY, start.y);
                 maxX = Math.max(maxX, start.x + nodeW);
@@ -3367,9 +3495,9 @@ class WorkflowEditorComponent extends BaseComponent {
             const clampedDy = this.clamp(sdy, -minY, this.CANVAS_HEIGHT - maxY);
             // 🔹 move nodes
             for (const n of this.lstStage) {
-                if (!this.lstSelectedStageCode.has(n.Code))
+                if (!this.lstSelectedStageId.has(n.WF_TemplateStage_Id))
                     continue;
-                const start = this.dragStartPositions.get(n.Code);
+                const start = this.dragStartPositions.get(n.WF_TemplateStage_Id);
                 n.editorOption.x = start.x + clampedDx;
                 n.editorOption.y = start.y + clampedDy;
             }
@@ -3459,21 +3587,21 @@ class WorkflowEditorComponent extends BaseComponent {
         this.axisLock = null;
         const p = this.getSvgPoint(event);
         // CASE 1️⃣: node nằm trong selection → kéo cả group
-        if (this.lstSelectedStageCode.has(node.Code)) {
+        if (this.lstSelectedStageId.has(node.WF_TemplateStage_Id)) {
             /* =============================
              * UNDO SNAPSHOT (GROUP)
              * ============================= */
             this.pushUndo({
                 type: 'move-nodes',
-                before: this.cloneNodePositions(this.lstSelectedStageCode),
+                before: this.cloneNodePositions(this.lstSelectedStageId),
             });
             this.draggingGroup = true;
             this.dragStartMouse = p;
             // 🔹 snapshot node positions
             this.dragStartPositions.clear();
             for (const n of this.lstStage) {
-                if (this.lstSelectedStageCode.has(n.Code)) {
-                    this.dragStartPositions.set(n.Code, { x: n.editorOption.x, y: n.editorOption.y });
+                if (this.lstSelectedStageId.has(n.WF_TemplateStage_Id)) {
+                    this.dragStartPositions.set(n.WF_TemplateStage_Id, { x: n.editorOption.x, y: n.editorOption.y });
                 }
             }
             // 🔹 snapshot edge points
@@ -3481,21 +3609,22 @@ class WorkflowEditorComponent extends BaseComponent {
             for (const e of this.lstAction) {
                 if (!e.editorOption.points?.length)
                     continue;
-                if (this.lstSelectedStageCode.has(e.FromStage || '') || this.lstSelectedStageCode.has(e.ToStage || '')) {
+                if (this.lstSelectedStageId.has(e.WF_TemplateStage_Id) ||
+                    this.lstSelectedStageId.has(e.To_WF_TemplateStage_Id)) {
                     this.dragStartEdgePoints.set(e, e.editorOption.points.map((p) => ({ x: p.x, y: p.y })));
                 }
             }
             return;
         }
         // CASE 2️⃣: node chưa được chọn → kéo node đơn
-        this.lstSelectedStageCode.clear();
+        this.lstSelectedStageId.clear();
         // this.selectedNodeIds.add(node.id);
         /* =============================
          * UNDO SNAPSHOT (1 NODE)
          * ============================= */
         this.pushUndo({
             type: 'move-nodes',
-            before: this.cloneNodePositions(new Set([node.Code])),
+            before: this.cloneNodePositions(new Set([node.WF_TemplateStage_Id])),
         });
         this.draggingNode = node;
         this.dragStartX = event.clientX;
@@ -3507,26 +3636,31 @@ class WorkflowEditorComponent extends BaseComponent {
     onClickStage(node) {
         console.log('onClickStage', node);
         this.hoverStage = undefined;
+        this.selectedStage = undefined;
         if (this.isDragging)
             return;
         if (this.connectingFrom) {
-            if (this.connectingFrom.node.Code !== node.Code) {
-                const existed = this.lstAction.some((e) => e.FromStage === this.connectingFrom.node.Code && e.ToStage === node.Code);
+            if (this.connectingFrom.node.WF_TemplateStage_Id !== node.WF_TemplateStage_Id) {
+                const existed = this.lstAction.some((e) => e.WF_TemplateStage_Id === this.connectingFrom.node.WF_TemplateStage_Id &&
+                    e.To_WF_TemplateStage_Id === node.WF_TemplateStage_Id);
                 if (!existed) {
                     const newAction = new WorkflowAction();
-                    newAction.FromStage = this.connectingFrom.node.Code;
+                    newAction.WF_TemplateStage_Id = this.connectingFrom.node.WF_TemplateStage_Id;
                     newAction.FromSide = this.connectingFrom.side;
-                    newAction.ToStage = node.Code;
+                    newAction.To_WF_TemplateStage_Id = node.WF_TemplateStage_Id;
                     newAction.ToSide = 'left';
                     // ⭐ NẾU CÓ WAYPOINT → MANUAL ROUTE
                     if (this.connectingPoints.length > 0) {
                         newAction.editorOption.points = [...this.connectingPoints];
                     }
                     this.lstAction.push(newAction);
-                    const stage = this.lstStage.find((x) => x.Code == newAction.FromStage);
+                    const stage = this.lstStage.find((x) => x.WF_TemplateStage_Id == newAction.WF_TemplateStage_Id);
                     if (stage) {
                         stage.lstAction = stage.lstAction ? [...stage.lstAction, newAction] : [newAction];
                     }
+                    console.log('from action', this.connectingFrom.node);
+                    console.log('to action', node);
+                    console.log('newAction', newAction);
                 }
             }
             this.cancelConnecting();
@@ -3534,11 +3668,11 @@ class WorkflowEditorComponent extends BaseComponent {
         }
         if (this.isDragging)
             return;
-        if (this.lstSelectedStageCode.size)
+        if (this.lstSelectedStageId.size)
             return;
         // if (node.id == 'start' || node.id == 'end') return;
+        this.hoverStage = node;
         this.selectedStage = node;
-        console.log(this.selectedStage);
     }
     //#endregion
     //#region EDGE action
@@ -3569,10 +3703,14 @@ class WorkflowEditorComponent extends BaseComponent {
             return;
         }
         if (doAction) {
-            this.selectedAction = edge;
-            this.selectedBackAction = this.lstAction.find((x) => x.isBackAction == true &&
-                x.FromStage == this.selectedAction?.ToStage &&
-                x.ToStage == this.selectedAction?.FromStage);
+            // k cấu hình ở đây nữa, cấu trong stage
+            // this.selectedAction = edge;
+            // this.selectedBackAction = this.lstAction.find(
+            //   (x) =>
+            //     x.isBackAction == true &&
+            //     x.WF_TemplateStage_Id == this.selectedAction?.To_WF_TemplateStage_Id &&
+            //     x.To_WF_TemplateStage_Id == this.selectedAction?.WF_TemplateStage_Id,
+            // );
         }
         else {
             // 👉 SINGLE CLICK (chờ xem có dbl không)
@@ -3622,20 +3760,21 @@ class WorkflowEditorComponent extends BaseComponent {
          * CLICK IN (LEFT) → KẾT THÚC
          * ============================= */
         if (side === 'left' && this.connectingFrom) {
-            if (this.connectingFrom.node.Code !== node.Code) {
-                const existed = this.lstAction.some((e) => e.FromStage === this.connectingFrom.node.Code && e.ToStage === node.Code);
+            if (this.connectingFrom.node.WF_TemplateStage_Id !== node.WF_TemplateStage_Id) {
+                const existed = this.lstAction.some((e) => e.WF_TemplateStage_Id === this.connectingFrom.node.WF_TemplateStage_Id &&
+                    e.To_WF_TemplateStage_Id === node.WF_TemplateStage_Id);
                 if (!existed) {
                     const newAction = new WorkflowAction();
-                    newAction.FromStage = this.connectingFrom.node.Code;
+                    newAction.WF_TemplateStage_Id = this.connectingFrom.node.WF_TemplateStage_Id;
                     newAction.FromSide = this.connectingFrom.side;
-                    newAction.ToStage = node.Code;
+                    newAction.To_WF_TemplateStage_Id = node.WF_TemplateStage_Id;
                     newAction.ToSide = 'left';
                     // ⭐ NẾU CÓ WAYPOINT → MANUAL ROUTE
                     if (this.connectingPoints.length > 0) {
                         newAction.editorOption.points = [...this.connectingPoints];
                     }
                     this.lstAction.push(newAction);
-                    const stage = this.lstStage.find((x) => x.Code == newAction.FromStage);
+                    const stage = this.lstStage.find((x) => x.WF_TemplateStage_Id == newAction.WF_TemplateStage_Id);
                     if (stage) {
                         stage.lstAction = stage.lstAction ? [...stage.lstAction, newAction] : [newAction];
                     }
@@ -3666,10 +3805,6 @@ class WorkflowEditorComponent extends BaseComponent {
         if (!edge.editorOption.points)
             return;
         edge.editorOption.points.splice(index, 1);
-        // Nếu xoá hết → quay về auto route
-        if (edge.editorOption.points.length === 0) {
-            delete edge.editorOption.points;
-        }
     }
     //#endregion
     //#region UNDO REDU
@@ -3678,8 +3813,8 @@ class WorkflowEditorComponent extends BaseComponent {
     cloneNodePositions(nodeIds) {
         const map = new Map();
         for (const n of this.lstStage) {
-            if (nodeIds.has(n.Code)) {
-                map.set(n.Code, { x: n.editorOption.x, y: n.editorOption.y });
+            if (nodeIds.has(n.WF_TemplateStage_Id)) {
+                map.set(n.WF_TemplateStage_Id, { x: n.editorOption.x, y: n.editorOption.y });
             }
         }
         return map;
@@ -3687,7 +3822,7 @@ class WorkflowEditorComponent extends BaseComponent {
     pushAlignUndo() {
         this.pushUndo({
             type: 'move-nodes',
-            before: this.cloneNodePositions(this.lstSelectedStageCode),
+            before: this.cloneNodePositions(this.lstSelectedStageId),
         });
     }
     pushUndo(action) {
@@ -3721,7 +3856,7 @@ class WorkflowEditorComponent extends BaseComponent {
         });
         // restore
         action.before.forEach((pos, id) => {
-            const node = this.lstStage.find((n) => n.Code === id);
+            const node = this.lstStage.find((n) => n.WF_TemplateStage_Id === id);
             if (node) {
                 node.editorOption.x = pos.x;
                 node.editorOption.y = pos.y;
@@ -3739,8 +3874,8 @@ class WorkflowEditorComponent extends BaseComponent {
             case 'delete-node': {
                 const nodeId = action.node.id;
                 // redo = xoá lại
-                this.lstAction = this.lstAction.filter((e) => e.FromStage !== nodeId && e.ToStage !== nodeId);
-                const idx = this.lstStage.findIndex((n) => n.Code === nodeId);
+                this.lstAction = this.lstAction.filter((e) => e.WF_TemplateStage_Id !== nodeId && e.To_WF_TemplateStage_Id !== nodeId);
+                const idx = this.lstStage.findIndex((n) => n.WF_TemplateStage_Id === nodeId);
                 if (idx >= 0)
                     this.lstStage.splice(idx, 1);
                 this.undoStack.push(action);
@@ -3755,7 +3890,7 @@ class WorkflowEditorComponent extends BaseComponent {
             before: after,
         });
         action.before.forEach((pos, id) => {
-            const node = this.lstStage.find((n) => n.Code === id);
+            const node = this.lstStage.find((n) => n.WF_TemplateStage_Id === id);
             if (node) {
                 node.editorOption.x = pos.x;
                 node.editorOption.y = pos.y;
@@ -3771,10 +3906,10 @@ class WorkflowEditorComponent extends BaseComponent {
     NODE_HEIGHT = 80;
     //#region ALIGN
     getSelectedNodes() {
-        return this.lstStage.filter((n) => this.lstSelectedStageCode.has(n.Code));
+        return this.lstStage.filter((n) => this.lstSelectedStageId.has(n.WF_TemplateStage_Id));
     }
     alignLeft() {
-        if (this.lstSelectedStageCode.size < 2)
+        if (this.lstSelectedStageId.size < 2)
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes();
@@ -3782,7 +3917,7 @@ class WorkflowEditorComponent extends BaseComponent {
         nodes.forEach((n) => (n.editorOption.x = minX));
     }
     alignCenter() {
-        if (this.lstSelectedStageCode.size < 2)
+        if (this.lstSelectedStageId.size < 2)
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes();
@@ -3793,7 +3928,7 @@ class WorkflowEditorComponent extends BaseComponent {
         });
     }
     alignRight() {
-        if (this.lstSelectedStageCode.size < 2)
+        if (this.lstSelectedStageId.size < 2)
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes();
@@ -3801,7 +3936,7 @@ class WorkflowEditorComponent extends BaseComponent {
         nodes.forEach((n) => (n.editorOption.x = maxX - this.NODE_WIDTH));
     }
     alignTop() {
-        if (this.lstSelectedStageCode.size < 2)
+        if (this.lstSelectedStageId.size < 2)
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes();
@@ -3809,7 +3944,7 @@ class WorkflowEditorComponent extends BaseComponent {
         nodes.forEach((n) => (n.editorOption.y = minY));
     }
     alignMiddle() {
-        if (this.lstSelectedStageCode.size < 2)
+        if (this.lstSelectedStageId.size < 2)
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes();
@@ -3820,7 +3955,7 @@ class WorkflowEditorComponent extends BaseComponent {
         });
     }
     alignBottom() {
-        if (this.lstSelectedStageCode.size < 2)
+        if (this.lstSelectedStageId.size < 2)
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes();
@@ -3828,7 +3963,7 @@ class WorkflowEditorComponent extends BaseComponent {
         nodes.forEach((n) => (n.editorOption.y = maxY - this.NODE_HEIGHT));
     }
     distributeHorizontal() {
-        if (this.lstSelectedStageCode.size < 3)
+        if (this.lstSelectedStageId.size < 3)
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes().sort((a, b) => a.editorOption.x - b.editorOption.x);
@@ -3847,7 +3982,7 @@ class WorkflowEditorComponent extends BaseComponent {
         });
     }
     distributeVertical() {
-        if (this.lstSelectedStageCode.size < 3)
+        if (this.lstSelectedStageId.size < 3)
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes().sort((a, b) => a.editorOption.y - b.editorOption.y);
@@ -3889,8 +4024,12 @@ class WorkflowEditorComponent extends BaseComponent {
     //#endregion
     //#region HELPER
     isEdgeReversed(edge) {
-        const from = this.getNodeCenter(this.lstStage.find((x) => x.Code == edge.FromStage), 'right');
-        const to = this.getNodeCenter(this.lstStage.find((x) => x.Code == edge.ToStage), 'left');
+        const x = this.lstStage.find((x) => x.WF_TemplateStage_Id == edge.WF_TemplateStage_Id);
+        const y = this.lstStage.find((x) => x.WF_TemplateStage_Id == edge.To_WF_TemplateStage_Id);
+        if (!x || !y)
+            return false;
+        const from = this.getNodeCenter(x, 'right');
+        const to = this.getNodeCenter(y, 'left');
         return to.x < from.x;
     }
     getEdgeLabelPosition(edge) {
@@ -3900,8 +4039,12 @@ class WorkflowEditorComponent extends BaseComponent {
             return { x: mid.x, y: mid.y };
         }
         // fallback: giữa from → to
-        const from = this.getNodeCenter(this.lstStage.find((x) => x.Code == edge.FromStage), 'right');
-        const to = this.getNodeCenter(this.lstStage.find((x) => x.Code == edge.ToStage), 'left');
+        const x = this.lstStage.find((x) => x.WF_TemplateStage_Id == edge.WF_TemplateStage_Id);
+        const y = this.lstStage.find((x) => x.WF_TemplateStage_Id == edge.To_WF_TemplateStage_Id);
+        if (!x || !y)
+            return { x: 0, y: 0 };
+        const from = this.getNodeCenter(x, 'right');
+        const to = this.getNodeCenter(y, 'left');
         return {
             x: (from.x + to.x) / 2,
             y: (from.y + to.y) / 2,
@@ -3960,10 +4103,10 @@ class WorkflowEditorComponent extends BaseComponent {
         return Math.max(0, index);
     }
     getEdgeFullPoints(edge) {
-        if (!edge.FromStage || !edge.ToStage)
+        if (!edge.WF_TemplateStage_Id || !edge.To_WF_TemplateStage_Id)
             return null;
-        const from = this.getNode(edge.FromStage);
-        const to = this.getNode(edge.ToStage);
+        const from = this.getNode(edge.WF_TemplateStage_Id);
+        const to = this.getNode(edge.To_WF_TemplateStage_Id);
         return [
             { x: from.editorOption.x + 160, y: from.editorOption.y + 40 },
             ...(edge.editorOption.points || []),
@@ -3985,20 +4128,20 @@ class WorkflowEditorComponent extends BaseComponent {
         return Math.hypot(p.x - proj.x, p.y - proj.y);
     }
     isPositionOccupied(x, y) {
-        return this.lstStage.some((n) => Math.abs(n.editorOption.x - x) < 160 && Math.abs(n.editorOption.y - y) < 80);
+        return this.lstStage.some((n) => Math.abs(n.editorOption?.x - x) < 160 && Math.abs(n.editorOption?.y - y) < 80);
     }
     getCanvasWidth() {
         // return 3000;
         const PADDING = 200;
         const MIN_WIDTH = 800;
-        const maxX = Math.max(...this.lstStage.map((n) => (n.StageType == 'END' ? n.editorOption.x : n.editorOption.x + 160)), // 160 = node width
+        const maxX = Math.max(...this.lstStage.map((n) => (n.StageType == 'END' ? n.editorOption?.x : n.editorOption?.x + 160)), // 160 = node width
         MIN_WIDTH);
         return maxX + PADDING;
     }
     getCanvasHeight() {
         // return 2000;
         const PADDING = 100;
-        const maxY = Math.max(...this.lstStage.map((n) => n.editorOption.y + 80), 400);
+        const maxY = Math.max(...this.lstStage.map((n) => n.editorOption?.y + 80), 400);
         return maxY + PADDING;
     }
     /* =============================
@@ -4024,7 +4167,7 @@ class WorkflowEditorComponent extends BaseComponent {
         const y1 = Math.min(this.selectStart.y, this.selectEnd.y);
         const x2 = Math.max(this.selectStart.x, this.selectEnd.x);
         const y2 = Math.max(this.selectStart.y, this.selectEnd.y);
-        this.lstSelectedStageCode.clear();
+        this.lstSelectedStageId.clear();
         for (const n of this.lstStage) {
             const nx1 = n.editorOption.x;
             const ny1 = n.editorOption.y;
@@ -4032,7 +4175,7 @@ class WorkflowEditorComponent extends BaseComponent {
             const ny2 = n.editorOption.y + 80;
             const intersect = nx2 >= x1 && nx1 <= x2 && ny2 >= y1 && ny1 <= y2;
             if (intersect) {
-                this.lstSelectedStageCode.add(n.Code);
+                this.lstSelectedStageId.add(n.WF_TemplateStage_Id);
             }
         }
     }
@@ -4050,15 +4193,15 @@ class WorkflowEditorComponent extends BaseComponent {
         return Math.round(value / this.gridSize) * this.gridSize;
     }
     getNode(id) {
-        return this.lstStage.find((n) => n.Code === id);
+        return this.lstStage.find((n) => n.WF_TemplateStage_Id === id);
     }
     //#endregion
     //#region BUILD PATH
     buildPath(edge) {
-        if (!edge.FromStage || !edge.ToStage)
+        if (!edge.WF_TemplateStage_Id || !edge.To_WF_TemplateStage_Id)
             return '';
-        const from = this.getNode(edge.FromStage);
-        const to = this.getNode(edge.ToStage);
+        const from = this.getNode(edge.WF_TemplateStage_Id);
+        const to = this.getNode(edge.To_WF_TemplateStage_Id);
         const start = {
             x: from.editorOption.x + (from.editorOption.isReverse ? 0 : 160),
             y: from.editorOption.y + 40,
@@ -4224,7 +4367,7 @@ class WorkflowEditorComponent extends BaseComponent {
         const x1 = from.node.editorOption.isReverse ? from.node.editorOption.x + 160 : from.node.editorOption.x;
         const y1 = from.node.editorOption.y + 40;
         return this.lstStage.some((n) => {
-            if (n.Code === from.node.Code)
+            if (n.WF_TemplateStage_Id === from.node.WF_TemplateStage_Id)
                 return false;
             // node phải nằm giữa theo trục X
             if (!this.isNodeBetweenX(x1, x2, n))
@@ -4263,7 +4406,7 @@ class WorkflowEditorComponent extends BaseComponent {
         const x2 = toX;
         const y2 = routeY;
         return !this.lstStage.some((n) => {
-            if (n.Code === from.node.Code)
+            if (n.WF_TemplateStage_Id === from.node.WF_TemplateStage_Id)
                 return false;
             // node phải nằm giữa theo trục X
             if (!this.isNodeBetweenX(x1, x2, n))
@@ -4273,7 +4416,7 @@ class WorkflowEditorComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WorkflowEditorComponent, isStandalone: true, selector: "app-workflow-editor", inputs: { lstOrg: "lstOrg", lstTemplateType: "lstTemplateType", lstTemplatePrint: "lstTemplatePrint", template: "template", lstStage: "lstStage", lstAction: "lstAction" }, outputs: { onSave: "onSave" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "inputStageStatusElement", first: true, predicate: ["inputStageStatusElement"], descendants: true }, { propertyName: "inputActionTypeElement", first: true, predicate: ["inputActionTypeElement"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #canvasRef\n  class=\"workflow-canvas\"\n  [class.connecting]=\"!!connectingFrom\"\n  [class.dragging-point]=\"!!draggingPoint\"\n  [style.width.px]=\"CANVAS_WIDTH\"\n  [style.height.px]=\"CANVAS_HEIGHT\"\n  (mousedown)=\"onMouseDownCanvas($event)\"\n  (mousemove)=\"onMouseMoveCanvas($event)\"\n  (mouseup)=\"onMouseUpCanvas($event)\"\n  (click)=\"onClickCanvas($event)\"\n>\n  <!-- \n\n  [style.width.px]=\"getCanvasWidth()\"\n  [style.height.px]=\"getCanvasHeight()\" \n\n  style=\"width: 100%; height: calc(100vh - 120px)\"\n  \n  -->\n\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\n      <nz-icon nzType=\"setting\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\n      <nz-icon nzType=\"setting\"></nz-icon> T\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nzDanger nz-tooltip=\"Save\" (click)=\"save()\">\n      <nz-icon nzType=\"save\"></nz-icon>\n    </button>\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Move mode\"\n      (click)=\"isMoveMode = true\"\n    >\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Select mode\"\n      (click)=\"isMoveMode = false\"\n    >\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- UNDO / REDO -->\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"undoStack.length === 0\"\n      nz-tooltip=\"Undo\"\n      (click)=\"undo()\"\n    >\n      <nz-icon nzType=\"undo\"></nz-icon>\n    </button>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"redoStack.length === 0\"\n      nz-tooltip=\"Redo\"\n      (click)=\"redo()\"\n    >\n      <nz-icon nzType=\"redo\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ALIGN -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignCenter()\">\u2261</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignRight()\">\u27F9</button>\n\n    <span class=\"divider\"></span>\n\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignTop()\">\u21D1</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\n\n    <span class=\"divider\"></span>\n\n    <!-- DISTRIBUTE -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 3\" (click)=\"distributeHorizontal()\">\n      \u21C4\n    </button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 3\" (click)=\"distributeVertical()\">\n      \u21C5\n    </button>\n  </div>\n\n  <div\n    class=\"canvas-content\"\n    [class.panning]=\"isMoveMode\"\n    [style.transform]=\"'translate(' + panX + 'px,' + panY + 'px)'\"\n  >\n    <!-- GRID -->\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\n\n    <!-- <div class=\"zoom-toolbar\">\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\n    </div> -->\n\n    <!-- SVG EDGES -->\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\n      <g [attr.transform]=\"svgTransform\">\n        <!-- DEFS -->\n        <defs>\n          <!-- glow effect -->\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\n            <feMerge>\n              <feMergeNode in=\"blur\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n\n          <!-- arrow markers -->\n          <marker\n            id=\"arrow-blue\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-red\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-blue-start\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            viewBox=\"0 0 10 10\"\n            refX=\"0\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-red-start\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            viewBox=\"0 0 10 10\"\n            refX=\"0\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\n          </marker>\n        </defs>\n\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseenter)=\"onMouseEnterEdge(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <path\n            class=\"edge\"\n            [attr.id]=\"'edge-path-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-blue)\"\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\n          ></path>\n\n          <!-- LABEL -->\n          <!-- text b\u00E1m theo line -->\n          <!-- \n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.ActionText }}\n            </textPath>\n          </text> \n          \n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.labelBack }}\n            </textPath>\n          </text>\n          -->\n\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\n          <text\n            *ngIf=\"e.ActionText\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.ActionText }}\n          </text>\n\n          <text\n            *ngIf=\"e.allowBack && e.labelBack\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.labelBack }}\n          </text>\n        </ng-container>\n\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <path\n            class=\"edge red\"\n            [attr.id]=\"'edge-path-hover-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-red)\"\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\n          ></path>\n\n          <!-- LABEL -->\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.ActionText }}\n            </textPath>\n          </text>\n\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.labelBack }}\n            </textPath>\n          </text> -->\n\n          <text\n            *ngIf=\"e.ActionText\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.ActionText }}\n          </text>\n\n          <text\n            *ngIf=\"e.allowBack && e.labelBack\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.labelBack }}\n          </text>\n        </ng-container>\n\n        <!-- preview -->\n        <path\n          *ngIf=\"connectingFrom\"\n          class=\"edge\"\n          [attr.d]=\"buildPreviewPath()\"\n          stroke-dasharray=\"5,5\"\n          marker-end=\"url(#arrow-blue)\"\n        ></path>\n      </g>\n    </svg>\n\n    <div\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\n      class=\"selection-box\"\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\n    ></div>\n\n    <!-- lstStage -->\n    @for (n of lstStage; track $index) {\n      @if (n.StageType == \"NODE\") {\n        <nz-card\n          #nodeEl\n          class=\"workflow-node\"\n          [attr.data-id]=\"n.Code\"\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageCode.has(n.Code)\"\n          [style.left.px]=\"n.editorOption.x\"\n          [style.top.px]=\"n.editorOption.y\"\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">{{ n.Code }}</div>\n\n          <div>{{ n.Name }}</div>\n\n          @if (!n.editorOption.isReverse) {\n            <!-- connector RIGHT: output -->\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n\n            <!-- connector LEFT: input -->\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n          } @else {\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n          }\n        </nz-card>\n      }\n      <!-- START NODE -->\n      @else if (n.StageType === \"START\") {\n        <nz-card\n          class=\"workflow-node workflow-node-start\"\n          style=\"border: unset\"\n          [style.left.px]=\"n.editorOption.x\"\n          [style.top.px]=\"n.editorOption.y\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">&nbsp;</div>\n\n          <nz-tag\n            [class.selected]=\"n == selectedStage || lstSelectedStageCode.has(n.Code)\"\n            style=\"position: relative; top: -13px\"\n            [style.right.px]=\"n.editorOption.isReverseLabel ? -83 : 1\"\n            [nzColor]=\"'green'\"\n          >\n            {{ n.StageType }}\n          </nz-tag>\n\n          <!-- connector RIGHT: output -->\n          <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n        </nz-card>\n      }\n\n      <!-- END NODE -->\n      @else if (n.StageType === \"END\") {\n        <nz-card\n          class=\"workflow-node workflow-node-end\"\n          style=\"border: unset\"\n          [style.left.px]=\"n.editorOption.x\"\n          [style.top.px]=\"n.editorOption.y\"\n          [class.connecting-source]=\"isConnectingFrom(n)\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">&nbsp;</div>\n\n          <nz-tag\n            [class.selected]=\"n == selectedStage || lstSelectedStageCode.has(n.Code)\"\n            style=\"position: relative; top: -13px\"\n            [style.right.px]=\"n.editorOption.isReverseLabel ? 65 : -5\"\n            [nzColor]=\"'red'\"\n          >\n            {{ n.StageType }}\n          </nz-tag>\n\n          <!-- connector LEFT: input -->\n          <div class=\"connector connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n        </nz-card>\n      }\n    }\n\n    <!-- POINTS -->\n    @for (p of connectingPoints; track $index) {\n      @if (p != draggingPoint) {\n        <div\n          class=\"waypoint\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\n        ></div>\n      } @else {\n        <div\n          class=\"waypoint dragging\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n        ></div>\n      }\n    }\n  </div>\n</div>\n\n<!-- TEMPLATE -->\n<nz-drawer\n  [nzTitle]=\"drawTemplateTitle\"\n  nzPlacement=\"right\"\n  [nzWidth]=\"500\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"drawTemplateVisibel\"\n  [nzFooter]=\"footerTplTemplate\"\n  (nzOnClose)=\"drawTemplateVisibel = false\"\n>\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\n  <ng-container *nzDrawerContent>\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\n    <extend-select\n      [label]=\"'Type'\"\n      [lstItem]=\"lstTemplateType\"\n      [valueField]=\"'Code'\"\n      [displayFields]=\"['Code', 'Name']\"\n      [(_ngModel)]=\"template.DocType\"\n    ></extend-select>\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\n    <extend-select\n      [label]=\"'Print template'\"\n      [lstItem]=\"lstTemplatePrint\"\n      [valueField]=\"'Code'\"\n      [displayFields]=\"['Code', 'Name']\"\n      [(_ngModel)]=\"template.TemplatePrint\"\n    ></extend-select>\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\n\n    @for (tag of template.lstStageStatus; track tag) {\n      <nz-tag\n        [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\n        (nzOnClose)=\"handleCloseStageStatus(tag)\"\n      >\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstStageStatus && template.lstStageStatus.length\" />\n\n    @if (!inputStageStatusVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\n        <nz-icon nzType=\"plus\" />\n        New Action type\n      </nz-tag>\n    } @else {\n      <input\n        #inputStageStatusElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Code\"\n        [(ngModel)]=\"inputStageStatusCode\"\n        (keydown.enter)=\"inputStageStatusNameElement.select()\"\n      />\n      <input\n        #inputStageStatusNameElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Name\"\n        [(ngModel)]=\"inputStageStatusName\"\n        (blur)=\"handleInputStageStatusConfirm()\"\n        (keydown.enter)=\"handleInputStageStatusConfirm()\"\n      />\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\n\n    @for (tag of template.lstActionType; track tag) {\n      <nz-tag\n        [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\n        (nzOnClose)=\"handleCloseActionType(tag)\"\n      >\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstActionType && template.lstActionType.length\" />\n\n    @if (!inputActionTypeVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\n        <nz-icon nzType=\"plus\" />\n        New Action type\n      </nz-tag>\n    } @else {\n      <input\n        #inputActionTypeElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Code\"\n        [(ngModel)]=\"inputActionTypeCode\"\n        (keydown.enter)=\"inputActionTypeNameElement.select()\"\n      />\n      <input\n        #inputActionTypeNameElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Name\"\n        [(ngModel)]=\"inputActionTypeName\"\n        (blur)=\"handleInputActionTypeConfirm()\"\n        (keydown.enter)=\"handleInputActionTypeConfirm()\"\n      />\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\n\n    @for (tag of template.lstActionStatus; track tag) {\n      <nz-tag [nzMode]=\"checkRemoveableActionStatus(tag) ? 'closeable' : 'default'\" (nzOnClose)=\"handleClose(tag)\">\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstActionStatus && template.lstActionStatus.length\" />\n\n    @if (!inputVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\n        <nz-icon nzType=\"plus\" />\n        New Action status\n      </nz-tag>\n    } @else {\n      <input\n        #inputElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"+ New Action status\"\n        [(ngModel)]=\"inputValue\"\n        (blur)=\"handleInputConfirm()\"\n        (keydown.enter)=\"handleInputConfirm()\"\n      />\n    }\n  </ng-container>\n\n  <ng-template #footerTplTemplate>\n    <div nz-flex [nzGap]=\"6\">\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\n      <button nz-button nzDanger (click)=\"save()\">Save</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- STAGE -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleStage\"\n  [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition ? selectedStage?.editorOption?.drawerPosition : 'right'\"\n  [nzVisible]=\"!!selectedStage\"\n  [nzWidth]=\"750\"\n  [nzClosable]=\"false\"\n  [nzFooter]=\"footerTplNode\"\n  (nzOnClose)=\"selectedStage = undefined\"\n>\n  <ng-template #drawerTitleStage>\n    <div nz-row nzJustify=\"space-between\">\n      @if (selectedStage) {\n        @if (selectedStage.editorOption.drawerPosition == \"left\") {\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the right\"\n            (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\n          >\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          STAGE\n        } @else {\n          STAGE\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the left\"\n            (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\n          >\n            <nz-icon nzType=\"double-left\"></nz-icon>\n          </button>\n        }\n      }\n    </div>\n  </ng-template>\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedStage\">\n      <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\n        <label nz-radio nzValue=\"START\" [nzDisabled]=\"selectedStage.StageType != 'START'\">START</label>\n        <label nz-radio nzValue=\"NODE\" [nzDisabled]=\"selectedStage.StageType != 'NODE'\">NODE</label>\n        <label nz-radio nzValue=\"END\" [nzDisabled]=\"selectedStage.StageType != 'END'\">END</label>\n      </nz-radio-group>\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"32\">\n        <extend-input\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Code'\"\n          [layOutType]=\"'vertical'\"\n          [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n          [required]=\"true\"\n          [(_ngModel)]=\"selectedStage.Code\"\n        ></extend-input>\n\n        <extend-textarea\n          nz-col\n          [nzSpan]=\"16\"\n          [label]=\"'Name'\"\n          [layOutType]=\"'vertical'\"\n          [autoSize]=\"true\"\n          [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n          [required]=\"true\"\n          [(_ngModel)]=\"selectedStage.Name\"\n        ></extend-textarea>\n      </div>\n\n      <div nz-row [nzGutter]=\"32\">\n        <extend-input-number\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Sequence'\"\n          [layOutType]=\"'vertical'\"\n          [(_ngModel)]=\"selectedStage.SeqValue\"\n        ></extend-input-number>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"16\"\n          [label]=\"'Org implement'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"lstOrg\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedStage.OrgImplCode\"\n        ></extend-select>\n      </div>\n\n      @if ([\"START\", \"END\"].indexOf(selectedStage.StageType) < 0) {\n        <extend-checkbox\n          [label]=\"'Reverse'\"\n          [labelSpan]=\"0\"\n          [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\n        ></extend-checkbox>\n\n        <extend-checkbox\n          [label]=\"'Require user action'\"\n          [labelSpan]=\"0\"\n          [(_ngModel)]=\"selectedStage.IsRequireUser\"\n        ></extend-checkbox>\n      } @else {\n        <extend-checkbox\n          [label]=\"'Reverse'\"\n          [labelSpan]=\"0\"\n          [(_ngModel)]=\"selectedStage.editorOption.isReverseLabel\"\n        ></extend-checkbox>\n      }\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"16\">\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\n        <div nz-col>\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\n            <nz-icon nzType=\"plus\"></nz-icon>\n          </button>\n        </div>\n      </div>\n\n      <nz-table\n        nzSize=\"small\"\n        [nzData]=\"selectedStage.lstAction || []\"\n        [nzShowPagination]=\"false\"\n        [nzNoResult]=\"'&nbsp;'\"\n      >\n        <thead>\n          <tr [hidden]=\"true\">\n            <th nzWidth=\"50px\"></th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (action of selectedStage.lstAction; track $index) {\n            <tr>\n              <td>\n                <nz-icon\n                  nzType=\"delete\"\n                  nzTheme=\"outline\"\n                  class=\"color-warn cursor-pointer icon-size-16\"\n                  (click)=\"$event.stopPropagation(); deleteAction(action)\"\n                ></nz-icon>\n              </td>\n              <td (click)=\"hoverAction = action\">\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n                  <extend-input\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action text'\"\n                    [layOutType]=\"'vertical'\"\n                    [(_ngModel)]=\"action.ActionText\"\n                    (_ngModelChange)=\"onchangeActionText(action)\"\n                  ></extend-input>\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action type'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstActionType\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ActionType\"\n                  ></extend-select>\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstActionStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ActionStatus\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Stage status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstStageStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.StageStatus\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Next stage'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"lstStage\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ToStage\"\n                    (_ngModelChange)=\"onchangeNextStage(action)\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Next stage status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstStageStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.NextStageStatus\"\n                  ></extend-select>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </nz-table>\n\n      <box [height]=\"16\"></box>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplNode>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedStage && selectedStage.editorOption.drawerPosition == 'left' ? 'end' : 'start'\"\n    >\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\n      <button\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\n        nz-button\n        nzDanger\n        (click)=\"deleteNode()\"\n      >\n        Delete\n      </button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- EDGE -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleAction\"\n  nzTitle=\"ACTION\"\n  [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition ? selectedAction?.editorOption?.drawerPosition : 'right'\"\n  [nzClosable]=\"false\"\n  [nzWidth]=\"750\"\n  [nzVisible]=\"!!selectedAction\"\n  [nzFooter]=\"footerTplAction\"\n  (nzOnClose)=\"selectedAction = undefined\"\n>\n  <ng-template #drawerTitleAction>\n    <div nz-row nzJustify=\"space-between\">\n      @if (selectedAction) {\n        @if (selectedAction.editorOption.drawerPosition == \"left\") {\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the right\"\n            (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\n          >\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          ACTION\n        } @else {\n          ACTION\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the left\"\n            (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\n          >\n            <nz-icon nzType=\"double-left\"></nz-icon>\n          </button>\n        }\n      }\n    </div>\n  </ng-template>\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedAction\">\n      <strong>{{ selectedAction.FromStage }} -> {{ selectedAction.ToStage }}</strong>\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n        <extend-input\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action text'\"\n          [layOutType]=\"'vertical'\"\n          [(_ngModel)]=\"selectedAction.ActionText\"\n          (_ngModelChange)=\"onchangeActionText(selectedAction)\"\n        ></extend-input>\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action type'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstActionType\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ActionType\"\n        ></extend-select>\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstActionStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ActionStatus\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Stage status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstStageStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.StageStatus\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Next stage'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"lstStage\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ToStage\"\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Next stage status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstStageStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.NextStageStatus\"\n        ></extend-select>\n      </div>\n\n      <!-- <box [height]=\"16\"></box> -->\n      <nz-divider></nz-divider>\n\n      <extend-checkbox\n        [label]=\"'Allow back'\"\n        [labelSpan]=\"0\"\n        [(_ngModel)]=\"selectedAction.allowBack\"\n        (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\n      ></extend-checkbox>\n\n      <box [height]=\"16\"></box>\n\n      @if (selectedAction.allowBack) {\n        <strong>{{ selectedAction.ToStage }} -> {{ selectedAction.FromStage }}</strong>\n\n        @if (selectedBackAction) {\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n            <extend-input\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action text'\"\n              [layOutType]=\"'vertical'\"\n              [(_ngModel)]=\"selectedBackAction.ActionText\"\n              (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\n            ></extend-input>\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action type'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstActionType\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\n            ></extend-select>\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstActionStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ActionStatus\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Stage status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstStageStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Next stage'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"lstStage\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ToStage\"\n              (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Next stage status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstStageStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.NextStageStatus\"\n            ></extend-select>\n          </div>\n        }\n      }\n    </ng-container>\n  </ng-container>\n  <ng-template #footerTplAction>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'end' : 'start'\"\n    >\n      <button nz-button (click)=\"selectedAction = undefined\">Close</button>\n      <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- setting editor -->\n<nz-drawer\n  [nzTitle]=\"drawSettingTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"settingVisible\"\n  (nzOnClose)=\"settingVisible = false\"\n>\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\n  <ng-container *nzDrawerContent>\n    <div class=\"form-item-no-bottom\">\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\n\n      <box [height]=\"16\"></box>\n    </div>\n  </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";.workflow-canvas{position:relative;width:100%;height:600px;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:10000px;height:10000px}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node-start{background-color:unset;display:flex;justify-content:right}.workflow-node-end{background-color:unset;display:flex}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-3px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-6px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$1.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$1.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i4$1.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i5$2.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "component", type: i6$3.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i6$3.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i8.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i9.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i10.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i11.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "inputClass", "labelSpan", "allowClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "inputSpan", "disabled", "required", "noBottom", "selectModeType", "inputClass", "minRows", "maxRows", "autoSize", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i14.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i15.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i15.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i15.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i15.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i15.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i15.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i16.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WorkflowEditorComponent, isStandalone: true, selector: "app-workflow-editor", inputs: { lstOrg: "lstOrg", lstRole: "lstRole" }, outputs: { onSave: "onSave", onDeleteStage: "onDeleteStage", onDeleteAction: "onDeleteAction" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "inputStageStatusElement", first: true, predicate: ["inputStageStatusElement"], descendants: true }, { propertyName: "inputActionTypeElement", first: true, predicate: ["inputActionTypeElement"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #canvasRef\n  class=\"workflow-canvas\"\n  [class.connecting]=\"!!connectingFrom\"\n  [class.dragging-point]=\"!!draggingPoint\"\n  [style.width.px]=\"CANVAS_WIDTH\"\n  [style.height.px]=\"CANVAS_HEIGHT\"\n  (mousedown)=\"onMouseDownCanvas($event)\"\n  (mousemove)=\"onMouseMoveCanvas($event)\"\n  (mouseup)=\"onMouseUpCanvas($event)\"\n  (click)=\"onClickCanvas($event)\"\n>\n  <!-- \n\n  [style.width.px]=\"getCanvasWidth()\"\n  [style.height.px]=\"getCanvasHeight()\" \n\n  style=\"width: 100%; height: calc(100vh - 120px)\"\n  \n  -->\n\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\n      <nz-icon nzType=\"setting\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\n      <nz-icon nzType=\"setting\"></nz-icon> T\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nzDanger nz-tooltip=\"Save\" (click)=\"save()\">\n      <nz-icon nzType=\"save\"></nz-icon>\n    </button>\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Move mode\"\n      (click)=\"isMoveMode = true\"\n    >\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Select mode\"\n      (click)=\"isMoveMode = false\"\n    >\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- UNDO / REDO -->\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"undoStack.length === 0\"\n      nz-tooltip=\"Undo\"\n      (click)=\"undo()\"\n    >\n      <nz-icon nzType=\"undo\"></nz-icon>\n    </button>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"redoStack.length === 0\"\n      nz-tooltip=\"Redo\"\n      (click)=\"redo()\"\n    >\n      <nz-icon nzType=\"redo\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ALIGN -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\n\n    <span class=\"divider\"></span>\n\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\n\n    <span class=\"divider\"></span>\n\n    <!-- DISTRIBUTE -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\n      \u21C4\n    </button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\n  </div>\n\n  <div\n    class=\"canvas-content\"\n    [class.panning]=\"isMoveMode\"\n    [style.transform]=\"'translate(' + panX + 'px,' + panY + 'px)'\"\n  >\n    <!-- GRID -->\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\n\n    <!-- <div class=\"zoom-toolbar\">\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\n    </div> -->\n\n    <!-- SVG EDGES -->\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\n      <g [attr.transform]=\"svgTransform\">\n        <!-- DEFS -->\n        <defs>\n          <!-- glow effect -->\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\n            <feMerge>\n              <feMergeNode in=\"blur\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n\n          <!-- arrow markers -->\n          <marker\n            id=\"arrow-blue\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-red\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-blue-start\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            viewBox=\"0 0 10 10\"\n            refX=\"0\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-red-start\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            viewBox=\"0 0 10 10\"\n            refX=\"0\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\n          </marker>\n        </defs>\n\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseenter)=\"onMouseEnterEdge(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <path\n            class=\"edge\"\n            [attr.id]=\"'edge-path-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-blue)\"\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\n          ></path>\n\n          <!-- LABEL -->\n          <!-- text b\u00E1m theo line -->\n          <!-- \n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.ActionText }}\n            </textPath>\n          </text> \n          \n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.labelBack }}\n            </textPath>\n          </text>\n          -->\n\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\n          <text\n            *ngIf=\"e.ActionText\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.ActionText }}\n          </text>\n\n          <text\n            *ngIf=\"e.allowBack && e.labelBack\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.labelBack }}\n          </text>\n        </ng-container>\n\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <path\n            class=\"edge red\"\n            [attr.id]=\"'edge-path-hover-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-red)\"\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\n          ></path>\n\n          <!-- LABEL -->\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.ActionText }}\n            </textPath>\n          </text>\n\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.labelBack }}\n            </textPath>\n          </text> -->\n\n          <text\n            *ngIf=\"e.ActionText\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.ActionText }}\n          </text>\n\n          <text\n            *ngIf=\"e.allowBack && e.labelBack\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.labelBack }}\n          </text>\n        </ng-container>\n\n        <!-- preview -->\n        <path\n          *ngIf=\"connectingFrom\"\n          class=\"edge\"\n          [attr.d]=\"buildPreviewPath()\"\n          stroke-dasharray=\"5,5\"\n          marker-end=\"url(#arrow-blue)\"\n        ></path>\n      </g>\n    </svg>\n\n    <div\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\n      class=\"selection-box\"\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\n    ></div>\n\n    <!-- lstStage -->\n    @for (n of lstStage; track $index) {\n      @if (n.StageType == \"NODE\") {\n        <nz-card\n          #nodeEl\n          class=\"workflow-node\"\n          [attr.data-id]=\"n.Code\"\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\n          [style.left.px]=\"n.editorOption.x\"\n          [style.top.px]=\"n.editorOption.y\"\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">{{ n.Code }}</div>\n\n          <div>{{ n.Name }}</div>\n\n          @if (!n.editorOption.isReverse) {\n            <!-- connector RIGHT: output -->\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n\n            <!-- connector LEFT: input -->\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n          } @else {\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n          }\n        </nz-card>\n      }\n      <!-- START NODE -->\n      @else if (n.StageType === \"START\") {\n        <nz-card\n          class=\"workflow-node workflow-node-start\"\n          style=\"border: unset\"\n          [style.left.px]=\"n.editorOption.x\"\n          [style.top.px]=\"n.editorOption.y\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">&nbsp;</div>\n\n          <nz-tag\n            [class.selected]=\"n == selectedStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\n            style=\"position: relative; top: -13px\"\n            [style.right.px]=\"n.editorOption.isReverseLabel ? -83 : 1\"\n            [nzColor]=\"'green'\"\n          >\n            {{ n.StageType }}\n          </nz-tag>\n\n          <!-- connector RIGHT: output -->\n          <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n        </nz-card>\n      }\n\n      <!-- END NODE -->\n      @else if (n.StageType === \"END\") {\n        <nz-card\n          class=\"workflow-node workflow-node-end\"\n          style=\"border: unset\"\n          [style.left.px]=\"n.editorOption.x\"\n          [style.top.px]=\"n.editorOption.y\"\n          [class.connecting-source]=\"isConnectingFrom(n)\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">&nbsp;</div>\n\n          <nz-tag\n            [class.selected]=\"n == selectedStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\n            style=\"position: relative; top: -13px\"\n            [style.right.px]=\"n.editorOption.isReverseLabel ? 65 : -5\"\n            [nzColor]=\"'red'\"\n          >\n            {{ n.StageType }}\n          </nz-tag>\n\n          <!-- connector LEFT: input -->\n          <div class=\"connector connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n        </nz-card>\n      }\n    }\n\n    <!-- POINTS -->\n    @for (p of connectingPoints; track $index) {\n      @if (p != draggingPoint) {\n        <div\n          class=\"waypoint\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\n        ></div>\n      } @else {\n        <div\n          class=\"waypoint dragging\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n        ></div>\n      }\n    }\n  </div>\n</div>\n\n<!-- drawer TEMPLATE -->\n<nz-drawer\n  [nzTitle]=\"drawTemplateTitle\"\n  nzPlacement=\"right\"\n  [nzWidth]=\"500\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"drawTemplateVisibel\"\n  [nzFooter]=\"footerTplTemplate\"\n  (nzOnClose)=\"drawTemplateVisibel = false\"\n>\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\n  <ng-container *nzDrawerContent>\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\n    <extend-select\n      [label]=\"'Type'\"\n      [lstItem]=\"template.lstTemplateType\"\n      [valueField]=\"'Code'\"\n      [displayFields]=\"['Code', 'Name']\"\n      [(_ngModel)]=\"template.DocType\"\n    ></extend-select>\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\n    <extend-select\n      [label]=\"'Print template'\"\n      [lstItem]=\"template.lstTemplatePrint\"\n      [valueField]=\"'Code'\"\n      [displayFields]=\"['Code', 'Name']\"\n      [(_ngModel)]=\"template.TemplatePrint\"\n    ></extend-select>\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\n\n    @for (tag of lstStage; track tag) {\n      <nz-tag (click)=\"hoverStage = tag\">\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\n\n    @for (tag of template.lstStageStatus; track tag) {\n      <nz-tag\n        [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\n        (nzOnClose)=\"handleCloseStageStatus(tag)\"\n      >\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstStageStatus && template.lstStageStatus.length\" />\n\n    @if (!inputStageStatusVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\n        <nz-icon nzType=\"plus\" />\n        New Action type\n      </nz-tag>\n    } @else {\n      <input\n        #inputStageStatusElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Code\"\n        [(ngModel)]=\"inputStageStatusCode\"\n        (keydown.enter)=\"inputStageStatusNameElement.select()\"\n      />\n      <input\n        #inputStageStatusNameElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Name\"\n        [(ngModel)]=\"inputStageStatusName\"\n        (blur)=\"handleInputStageStatusConfirm()\"\n        (keydown.enter)=\"handleInputStageStatusConfirm()\"\n      />\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\n\n    @for (tag of template.lstActionType; track tag) {\n      <nz-tag\n        [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\n        (nzOnClose)=\"handleCloseActionType(tag)\"\n      >\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstActionType && template.lstActionType.length\" />\n\n    @if (!inputActionTypeVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\n        <nz-icon nzType=\"plus\" />\n        New Action type\n      </nz-tag>\n    } @else {\n      <input\n        #inputActionTypeElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Code\"\n        [(ngModel)]=\"inputActionTypeCode\"\n        (keydown.enter)=\"inputActionTypeNameElement.select()\"\n      />\n      <input\n        #inputActionTypeNameElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Name\"\n        [(ngModel)]=\"inputActionTypeName\"\n        (blur)=\"handleInputActionTypeConfirm()\"\n        (keydown.enter)=\"handleInputActionTypeConfirm()\"\n      />\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\n\n    @for (tag of template.lstActionStatus; track tag) {\n      <nz-tag [nzMode]=\"checkRemoveableActionStatus(tag) ? 'closeable' : 'default'\" (nzOnClose)=\"handleClose(tag)\">\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstActionStatus && template.lstActionStatus.length\" />\n\n    @if (!inputVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\n        <nz-icon nzType=\"plus\" />\n        New Action status\n      </nz-tag>\n    } @else {\n      <input\n        #inputElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"+ New Action status\"\n        [(ngModel)]=\"inputValue\"\n        (blur)=\"handleInputConfirm()\"\n        (keydown.enter)=\"handleInputConfirm()\"\n      />\n    }\n  </ng-container>\n\n  <ng-template #footerTplTemplate>\n    <div nz-flex [nzGap]=\"6\">\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\n      <button nz-button nzDanger (click)=\"save()\">Save</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- drawer STAGE -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleStage\"\n  [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n  [nzVisible]=\"!!selectedStage\"\n  [nzWidth]=\"750\"\n  [nzClosable]=\"false\"\n  [nzFooter]=\"footerTplNode\"\n  (nzOnClose)=\"selectedStage = undefined\"\n>\n  <ng-template #drawerTitleStage>\n    <div nz-row nzJustify=\"space-between\">\n      @if (selectedStage && selectedStage.editorOption) {\n        @if (selectedStage.editorOption.drawerPosition == \"left\") {\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the right\"\n            (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\n          >\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          STAGE\n        } @else {\n          STAGE\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the left\"\n            (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\n          >\n            <nz-icon nzType=\"double-left\"></nz-icon>\n          </button>\n        }\n      }\n    </div>\n  </ng-template>\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedStage\">\n      <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\n        <label nz-radio nzValue=\"START\" [nzDisabled]=\"selectedStage.StageType != 'START'\">START</label>\n        <label nz-radio nzValue=\"NODE\" [nzDisabled]=\"selectedStage.StageType != 'NODE'\">NODE</label>\n        <label nz-radio nzValue=\"END\" [nzDisabled]=\"selectedStage.StageType != 'END'\">END</label>\n      </nz-radio-group>\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\n        <extend-input\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Code'\"\n          [layOutType]=\"'vertical'\"\n          [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n          [required]=\"true\"\n          [(_ngModel)]=\"selectedStage.Code\"\n        ></extend-input>\n\n        <extend-textarea\n          nz-col\n          [nzSpan]=\"16\"\n          [label]=\"'Name'\"\n          [layOutType]=\"'vertical'\"\n          [autoSize]=\"true\"\n          [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n          [required]=\"true\"\n          [(_ngModel)]=\"selectedStage.Name\"\n        ></extend-textarea>\n      </div>\n\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\n        <extend-input-number\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Sequence'\"\n          [layOutType]=\"'vertical'\"\n          [(_ngModel)]=\"selectedStage.SeqValue\"\n        ></extend-input-number>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"16\"\n          [label]=\"'Org implement'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"lstOrg\"\n          [valueField]=\"'App_Org_Id'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedStage.App_Org_Id\"\n        ></extend-select>\n      </div>\n\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\n        <extend-input-number\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Number Day'\"\n          [layOutType]=\"'vertical'\"\n          [precision]=\"1\"\n          [(_ngModel)]=\"selectedStage.NumberDay\"\n        ></extend-input-number>\n      </div>\n\n      @if (selectedStage.editorOption) {\n        @if ([\"START\", \"END\"].indexOf(selectedStage.StageType) < 0) {\n          <extend-checkbox\n            [label]=\"'Reverse'\"\n            [labelSpan]=\"0\"\n            [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\n          ></extend-checkbox>\n\n          <extend-checkbox\n            [label]=\"'Require user action'\"\n            [labelSpan]=\"0\"\n            [(_ngModel)]=\"selectedStage.IsRequireUser\"\n          ></extend-checkbox>\n        } @else {\n          <extend-checkbox\n            [label]=\"'Reverse'\"\n            [labelSpan]=\"0\"\n            [(_ngModel)]=\"selectedStage.editorOption.isReverseLabel\"\n          ></extend-checkbox>\n        }\n      }\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"16\">\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\n        <div nz-col>\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\n            <nz-icon nzType=\"plus\"></nz-icon>\n          </button>\n        </div>\n      </div>\n\n      <nz-table\n        nzSize=\"small\"\n        [nzData]=\"selectedStage.lstAction || []\"\n        [nzShowPagination]=\"false\"\n        [nzNoResult]=\"'&nbsp;'\"\n      >\n        <thead>\n          <tr [hidden]=\"true\">\n            <th nzWidth=\"50px\"></th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (action of selectedStage.lstAction; track $index) {\n            <tr>\n              <td>\n                <nz-icon\n                  nzType=\"delete\"\n                  nzTheme=\"outline\"\n                  class=\"color-warn cursor-pointer icon-size-16\"\n                  (click)=\"$event.stopPropagation(); deleteAction(action)\"\n                ></nz-icon>\n              </td>\n              <td (click)=\"hoverAction = action\">\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n                  <extend-input\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action text'\"\n                    [layOutType]=\"'vertical'\"\n                    [(_ngModel)]=\"action.ActionText\"\n                    (_ngModelChange)=\"onchangeActionText(action)\"\n                  ></extend-input>\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action type'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstActionType\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ActionType\"\n                  ></extend-select>\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstActionStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ActionStatus\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Stage status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstStageStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.StageStatus\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Next stage'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"lstStage\"\n                    [valueField]=\"'WF_TemplateStage_Id'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\n                    (_ngModelChange)=\"onchangeNextStage(action)\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Next stage status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstStageStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.NextStageStatus\"\n                  ></extend-select>\n                </div>\n                <box [height]=\"8\"></box>\n                <div nz-row><strong>Role</strong></div>\n                <div nz-row>\n                  <extend-select\n                    nz-col\n                    nzSpan=\"24\"\n                    [size]=\"'small'\"\n                    [lstItem]=\"lstRole\"\n                    [valueField]=\"'App_Role_Id'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [multiple]=\"true\"\n                    [(_ngModel)]=\"action._lstRoleId\"\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\n                  ></extend-select>\n                </div>\n                <box [height]=\"8\"></box>\n                <div nz-row>\n                  <strong>Email action</strong>\n                </div>\n                <div nz-row>\n                  <extend-select\n                    nz-col\n                    nzSpan=\"24\"\n                    [size]=\"'small'\"\n                    [lstItem]=\"lstEmailAction\"\n                    [valueField]=\"'ID'\"\n                    [displayField]=\"'Name'\"\n                    [multiple]=\"true\"\n                    [(_ngModel)]=\"action._lstEmailActionId\"\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\n                  ></extend-select>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </nz-table>\n\n      <box [height]=\"16\"></box>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplNode>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"\n        selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\n          ? 'start'\n          : 'end'\n      \"\n    >\n      <button nz-button nzDanger nzDanger (click)=\"save()\">Save</button>\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\n      <button\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\n        nz-button\n        nzDanger\n        (click)=\"deleteStage()\"\n      >\n        Delete\n      </button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- drawer ACTION -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleAction\"\n  nzTitle=\"ACTION\"\n  [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n  [nzClosable]=\"false\"\n  [nzWidth]=\"750\"\n  [nzVisible]=\"!!selectedAction\"\n  [nzFooter]=\"footerTplAction\"\n  (nzOnClose)=\"selectedAction = undefined\"\n>\n  <ng-template #drawerTitleAction>\n    <div nz-row nzJustify=\"space-between\">\n      @if (selectedAction && selectedAction.editorOption) {\n        @if (selectedAction.editorOption.drawerPosition == \"left\") {\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the right\"\n            (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\n          >\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          ACTION\n        } @else {\n          ACTION\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the left\"\n            (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\n          >\n            <nz-icon nzType=\"double-left\"></nz-icon>\n          </button>\n        }\n      }\n    </div>\n  </ng-template>\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedAction\">\n      <strong>{{ selectedAction.FromStageCode }} -> {{ selectedAction.ToStageCode }}</strong>\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n        <extend-input\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action text'\"\n          [layOutType]=\"'vertical'\"\n          [(_ngModel)]=\"selectedAction.ActionText\"\n          (_ngModelChange)=\"onchangeActionText(selectedAction)\"\n        ></extend-input>\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action type'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstActionType\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ActionType\"\n        ></extend-select>\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstActionStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ActionStatus\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Stage status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstStageStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.StageStatus\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Next stage'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"lstStage\"\n          [valueField]=\"'WF_TemplateStage_Id'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Next stage status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstStageStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.NextStageStatus\"\n        ></extend-select>\n      </div>\n\n      <!-- <box [height]=\"16\"></box> -->\n      <nz-divider></nz-divider>\n\n      <extend-checkbox\n        [label]=\"'Allow back'\"\n        [labelSpan]=\"0\"\n        [(_ngModel)]=\"selectedAction.allowBack\"\n        (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\n      ></extend-checkbox>\n\n      <box [height]=\"16\"></box>\n\n      @if (selectedAction.allowBack) {\n        <strong>{{ selectedAction.ToStageCode }} -> {{ selectedAction.FromStageCode }}</strong>\n\n        @if (selectedBackAction) {\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n            <extend-input\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action text'\"\n              [layOutType]=\"'vertical'\"\n              [(_ngModel)]=\"selectedBackAction.ActionText\"\n              (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\n            ></extend-input>\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action type'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstActionType\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\n            ></extend-select>\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstActionStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ActionStatus\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Stage status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstStageStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Next stage'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"lstStage\"\n              [valueField]=\"'WF_TemplateStage_Id'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\n              (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Next stage status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstStageStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.NextStageStatus\"\n            ></extend-select>\n          </div>\n        }\n      }\n    </ng-container>\n  </ng-container>\n  <ng-template #footerTplAction>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\n    >\n      <button nz-button nzDanger nzDanger (click)=\"save()\">Save</button>\n      <button nz-button (click)=\"selectedAction = undefined\">Close</button>\n      <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- setting editor -->\n<nz-drawer\n  [nzTitle]=\"drawSettingTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"settingVisible\"\n  (nzOnClose)=\"settingVisible = false\"\n>\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\n  <ng-container *nzDrawerContent>\n    <div class=\"form-item-no-bottom\">\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\n\n      <box [height]=\"16\"></box>\n    </div>\n  </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";.workflow-canvas{position:relative;width:100%;height:600px;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:10000px;height:10000px}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node-start{background-color:unset;display:flex;justify-content:right}.workflow-node-end{background-color:unset;display:flex}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-3px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-6px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i3$1.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$1.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i4$1.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i5$2.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "component", type: i6$3.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i6$3.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i8.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i9.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i10.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i11.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "component", type: ExtendInput, selector: "extend-input", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "inputClass", "labelSpan", "allowClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange", "onclickClearIcon", "onenter"] }, { kind: "component", type: ExtendSelectComponent, selector: "extend-select", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "disabled", "required", "noBottom", "multiple", "showSelectAll", "maxTagCount", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "size", "lstItem", "displayField", "displayFields", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange", "itemChange", "onFocus"] }, { kind: "component", type: ExtendCheckbox, selector: "extend-checkbox", inputs: ["label", "labelSpan", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "inputSpan", "disabled", "required", "noBottom", "selectModeType", "inputClass", "minRows", "maxRows", "autoSize", "lstItem", "displayField", "valueField", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i14.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "component", type: ExtendInputNumber, selector: "extend-input-number", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "disabled", "required", "noBottom", "size", "min", "max", "precision", "inputWidth", "inputHeight", "borderBottomOnly", "displayInline", "separatorType", "formData", "controlName", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "ngmodule", type: NzTableModule }, { kind: "component", type: i15.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "noDataVirtualHeight", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "directive", type: i15.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i15.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i15.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i15.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i15.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i16.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, decorators: [{
             type: Component,
@@ -4298,22 +4441,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         ExtendInputNumber,
                         NzTableModule,
                         NzDividerModule,
-                    ], template: "<div\n  #canvasRef\n  class=\"workflow-canvas\"\n  [class.connecting]=\"!!connectingFrom\"\n  [class.dragging-point]=\"!!draggingPoint\"\n  [style.width.px]=\"CANVAS_WIDTH\"\n  [style.height.px]=\"CANVAS_HEIGHT\"\n  (mousedown)=\"onMouseDownCanvas($event)\"\n  (mousemove)=\"onMouseMoveCanvas($event)\"\n  (mouseup)=\"onMouseUpCanvas($event)\"\n  (click)=\"onClickCanvas($event)\"\n>\n  <!-- \n\n  [style.width.px]=\"getCanvasWidth()\"\n  [style.height.px]=\"getCanvasHeight()\" \n\n  style=\"width: 100%; height: calc(100vh - 120px)\"\n  \n  -->\n\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\n      <nz-icon nzType=\"setting\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\n      <nz-icon nzType=\"setting\"></nz-icon> T\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nzDanger nz-tooltip=\"Save\" (click)=\"save()\">\n      <nz-icon nzType=\"save\"></nz-icon>\n    </button>\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Move mode\"\n      (click)=\"isMoveMode = true\"\n    >\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Select mode\"\n      (click)=\"isMoveMode = false\"\n    >\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- UNDO / REDO -->\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"undoStack.length === 0\"\n      nz-tooltip=\"Undo\"\n      (click)=\"undo()\"\n    >\n      <nz-icon nzType=\"undo\"></nz-icon>\n    </button>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"redoStack.length === 0\"\n      nz-tooltip=\"Redo\"\n      (click)=\"redo()\"\n    >\n      <nz-icon nzType=\"redo\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ALIGN -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignCenter()\">\u2261</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignRight()\">\u27F9</button>\n\n    <span class=\"divider\"></span>\n\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignTop()\">\u21D1</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\n\n    <span class=\"divider\"></span>\n\n    <!-- DISTRIBUTE -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 3\" (click)=\"distributeHorizontal()\">\n      \u21C4\n    </button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageCode.size < 3\" (click)=\"distributeVertical()\">\n      \u21C5\n    </button>\n  </div>\n\n  <div\n    class=\"canvas-content\"\n    [class.panning]=\"isMoveMode\"\n    [style.transform]=\"'translate(' + panX + 'px,' + panY + 'px)'\"\n  >\n    <!-- GRID -->\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\n\n    <!-- <div class=\"zoom-toolbar\">\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\n    </div> -->\n\n    <!-- SVG EDGES -->\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\n      <g [attr.transform]=\"svgTransform\">\n        <!-- DEFS -->\n        <defs>\n          <!-- glow effect -->\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\n            <feMerge>\n              <feMergeNode in=\"blur\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n\n          <!-- arrow markers -->\n          <marker\n            id=\"arrow-blue\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-red\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-blue-start\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            viewBox=\"0 0 10 10\"\n            refX=\"0\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-red-start\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            viewBox=\"0 0 10 10\"\n            refX=\"0\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\n          </marker>\n        </defs>\n\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseenter)=\"onMouseEnterEdge(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <path\n            class=\"edge\"\n            [attr.id]=\"'edge-path-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-blue)\"\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\n          ></path>\n\n          <!-- LABEL -->\n          <!-- text b\u00E1m theo line -->\n          <!-- \n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.ActionText }}\n            </textPath>\n          </text> \n          \n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.labelBack }}\n            </textPath>\n          </text>\n          -->\n\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\n          <text\n            *ngIf=\"e.ActionText\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.ActionText }}\n          </text>\n\n          <text\n            *ngIf=\"e.allowBack && e.labelBack\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.labelBack }}\n          </text>\n        </ng-container>\n\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <path\n            class=\"edge red\"\n            [attr.id]=\"'edge-path-hover-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-red)\"\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\n          ></path>\n\n          <!-- LABEL -->\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.ActionText }}\n            </textPath>\n          </text>\n\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.labelBack }}\n            </textPath>\n          </text> -->\n\n          <text\n            *ngIf=\"e.ActionText\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.ActionText }}\n          </text>\n\n          <text\n            *ngIf=\"e.allowBack && e.labelBack\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.labelBack }}\n          </text>\n        </ng-container>\n\n        <!-- preview -->\n        <path\n          *ngIf=\"connectingFrom\"\n          class=\"edge\"\n          [attr.d]=\"buildPreviewPath()\"\n          stroke-dasharray=\"5,5\"\n          marker-end=\"url(#arrow-blue)\"\n        ></path>\n      </g>\n    </svg>\n\n    <div\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\n      class=\"selection-box\"\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\n    ></div>\n\n    <!-- lstStage -->\n    @for (n of lstStage; track $index) {\n      @if (n.StageType == \"NODE\") {\n        <nz-card\n          #nodeEl\n          class=\"workflow-node\"\n          [attr.data-id]=\"n.Code\"\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageCode.has(n.Code)\"\n          [style.left.px]=\"n.editorOption.x\"\n          [style.top.px]=\"n.editorOption.y\"\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">{{ n.Code }}</div>\n\n          <div>{{ n.Name }}</div>\n\n          @if (!n.editorOption.isReverse) {\n            <!-- connector RIGHT: output -->\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n\n            <!-- connector LEFT: input -->\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n          } @else {\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n          }\n        </nz-card>\n      }\n      <!-- START NODE -->\n      @else if (n.StageType === \"START\") {\n        <nz-card\n          class=\"workflow-node workflow-node-start\"\n          style=\"border: unset\"\n          [style.left.px]=\"n.editorOption.x\"\n          [style.top.px]=\"n.editorOption.y\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">&nbsp;</div>\n\n          <nz-tag\n            [class.selected]=\"n == selectedStage || lstSelectedStageCode.has(n.Code)\"\n            style=\"position: relative; top: -13px\"\n            [style.right.px]=\"n.editorOption.isReverseLabel ? -83 : 1\"\n            [nzColor]=\"'green'\"\n          >\n            {{ n.StageType }}\n          </nz-tag>\n\n          <!-- connector RIGHT: output -->\n          <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n        </nz-card>\n      }\n\n      <!-- END NODE -->\n      @else if (n.StageType === \"END\") {\n        <nz-card\n          class=\"workflow-node workflow-node-end\"\n          style=\"border: unset\"\n          [style.left.px]=\"n.editorOption.x\"\n          [style.top.px]=\"n.editorOption.y\"\n          [class.connecting-source]=\"isConnectingFrom(n)\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">&nbsp;</div>\n\n          <nz-tag\n            [class.selected]=\"n == selectedStage || lstSelectedStageCode.has(n.Code)\"\n            style=\"position: relative; top: -13px\"\n            [style.right.px]=\"n.editorOption.isReverseLabel ? 65 : -5\"\n            [nzColor]=\"'red'\"\n          >\n            {{ n.StageType }}\n          </nz-tag>\n\n          <!-- connector LEFT: input -->\n          <div class=\"connector connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n        </nz-card>\n      }\n    }\n\n    <!-- POINTS -->\n    @for (p of connectingPoints; track $index) {\n      @if (p != draggingPoint) {\n        <div\n          class=\"waypoint\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\n        ></div>\n      } @else {\n        <div\n          class=\"waypoint dragging\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n        ></div>\n      }\n    }\n  </div>\n</div>\n\n<!-- TEMPLATE -->\n<nz-drawer\n  [nzTitle]=\"drawTemplateTitle\"\n  nzPlacement=\"right\"\n  [nzWidth]=\"500\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"drawTemplateVisibel\"\n  [nzFooter]=\"footerTplTemplate\"\n  (nzOnClose)=\"drawTemplateVisibel = false\"\n>\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\n  <ng-container *nzDrawerContent>\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\n    <extend-select\n      [label]=\"'Type'\"\n      [lstItem]=\"lstTemplateType\"\n      [valueField]=\"'Code'\"\n      [displayFields]=\"['Code', 'Name']\"\n      [(_ngModel)]=\"template.DocType\"\n    ></extend-select>\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\n    <extend-select\n      [label]=\"'Print template'\"\n      [lstItem]=\"lstTemplatePrint\"\n      [valueField]=\"'Code'\"\n      [displayFields]=\"['Code', 'Name']\"\n      [(_ngModel)]=\"template.TemplatePrint\"\n    ></extend-select>\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\n\n    @for (tag of template.lstStageStatus; track tag) {\n      <nz-tag\n        [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\n        (nzOnClose)=\"handleCloseStageStatus(tag)\"\n      >\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstStageStatus && template.lstStageStatus.length\" />\n\n    @if (!inputStageStatusVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\n        <nz-icon nzType=\"plus\" />\n        New Action type\n      </nz-tag>\n    } @else {\n      <input\n        #inputStageStatusElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Code\"\n        [(ngModel)]=\"inputStageStatusCode\"\n        (keydown.enter)=\"inputStageStatusNameElement.select()\"\n      />\n      <input\n        #inputStageStatusNameElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Name\"\n        [(ngModel)]=\"inputStageStatusName\"\n        (blur)=\"handleInputStageStatusConfirm()\"\n        (keydown.enter)=\"handleInputStageStatusConfirm()\"\n      />\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\n\n    @for (tag of template.lstActionType; track tag) {\n      <nz-tag\n        [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\n        (nzOnClose)=\"handleCloseActionType(tag)\"\n      >\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstActionType && template.lstActionType.length\" />\n\n    @if (!inputActionTypeVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\n        <nz-icon nzType=\"plus\" />\n        New Action type\n      </nz-tag>\n    } @else {\n      <input\n        #inputActionTypeElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Code\"\n        [(ngModel)]=\"inputActionTypeCode\"\n        (keydown.enter)=\"inputActionTypeNameElement.select()\"\n      />\n      <input\n        #inputActionTypeNameElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Name\"\n        [(ngModel)]=\"inputActionTypeName\"\n        (blur)=\"handleInputActionTypeConfirm()\"\n        (keydown.enter)=\"handleInputActionTypeConfirm()\"\n      />\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\n\n    @for (tag of template.lstActionStatus; track tag) {\n      <nz-tag [nzMode]=\"checkRemoveableActionStatus(tag) ? 'closeable' : 'default'\" (nzOnClose)=\"handleClose(tag)\">\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstActionStatus && template.lstActionStatus.length\" />\n\n    @if (!inputVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\n        <nz-icon nzType=\"plus\" />\n        New Action status\n      </nz-tag>\n    } @else {\n      <input\n        #inputElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"+ New Action status\"\n        [(ngModel)]=\"inputValue\"\n        (blur)=\"handleInputConfirm()\"\n        (keydown.enter)=\"handleInputConfirm()\"\n      />\n    }\n  </ng-container>\n\n  <ng-template #footerTplTemplate>\n    <div nz-flex [nzGap]=\"6\">\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\n      <button nz-button nzDanger (click)=\"save()\">Save</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- STAGE -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleStage\"\n  [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition ? selectedStage?.editorOption?.drawerPosition : 'right'\"\n  [nzVisible]=\"!!selectedStage\"\n  [nzWidth]=\"750\"\n  [nzClosable]=\"false\"\n  [nzFooter]=\"footerTplNode\"\n  (nzOnClose)=\"selectedStage = undefined\"\n>\n  <ng-template #drawerTitleStage>\n    <div nz-row nzJustify=\"space-between\">\n      @if (selectedStage) {\n        @if (selectedStage.editorOption.drawerPosition == \"left\") {\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the right\"\n            (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\n          >\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          STAGE\n        } @else {\n          STAGE\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the left\"\n            (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\n          >\n            <nz-icon nzType=\"double-left\"></nz-icon>\n          </button>\n        }\n      }\n    </div>\n  </ng-template>\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedStage\">\n      <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\n        <label nz-radio nzValue=\"START\" [nzDisabled]=\"selectedStage.StageType != 'START'\">START</label>\n        <label nz-radio nzValue=\"NODE\" [nzDisabled]=\"selectedStage.StageType != 'NODE'\">NODE</label>\n        <label nz-radio nzValue=\"END\" [nzDisabled]=\"selectedStage.StageType != 'END'\">END</label>\n      </nz-radio-group>\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"32\">\n        <extend-input\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Code'\"\n          [layOutType]=\"'vertical'\"\n          [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n          [required]=\"true\"\n          [(_ngModel)]=\"selectedStage.Code\"\n        ></extend-input>\n\n        <extend-textarea\n          nz-col\n          [nzSpan]=\"16\"\n          [label]=\"'Name'\"\n          [layOutType]=\"'vertical'\"\n          [autoSize]=\"true\"\n          [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n          [required]=\"true\"\n          [(_ngModel)]=\"selectedStage.Name\"\n        ></extend-textarea>\n      </div>\n\n      <div nz-row [nzGutter]=\"32\">\n        <extend-input-number\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Sequence'\"\n          [layOutType]=\"'vertical'\"\n          [(_ngModel)]=\"selectedStage.SeqValue\"\n        ></extend-input-number>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"16\"\n          [label]=\"'Org implement'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"lstOrg\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedStage.OrgImplCode\"\n        ></extend-select>\n      </div>\n\n      @if ([\"START\", \"END\"].indexOf(selectedStage.StageType) < 0) {\n        <extend-checkbox\n          [label]=\"'Reverse'\"\n          [labelSpan]=\"0\"\n          [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\n        ></extend-checkbox>\n\n        <extend-checkbox\n          [label]=\"'Require user action'\"\n          [labelSpan]=\"0\"\n          [(_ngModel)]=\"selectedStage.IsRequireUser\"\n        ></extend-checkbox>\n      } @else {\n        <extend-checkbox\n          [label]=\"'Reverse'\"\n          [labelSpan]=\"0\"\n          [(_ngModel)]=\"selectedStage.editorOption.isReverseLabel\"\n        ></extend-checkbox>\n      }\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"16\">\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\n        <div nz-col>\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\n            <nz-icon nzType=\"plus\"></nz-icon>\n          </button>\n        </div>\n      </div>\n\n      <nz-table\n        nzSize=\"small\"\n        [nzData]=\"selectedStage.lstAction || []\"\n        [nzShowPagination]=\"false\"\n        [nzNoResult]=\"'&nbsp;'\"\n      >\n        <thead>\n          <tr [hidden]=\"true\">\n            <th nzWidth=\"50px\"></th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (action of selectedStage.lstAction; track $index) {\n            <tr>\n              <td>\n                <nz-icon\n                  nzType=\"delete\"\n                  nzTheme=\"outline\"\n                  class=\"color-warn cursor-pointer icon-size-16\"\n                  (click)=\"$event.stopPropagation(); deleteAction(action)\"\n                ></nz-icon>\n              </td>\n              <td (click)=\"hoverAction = action\">\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n                  <extend-input\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action text'\"\n                    [layOutType]=\"'vertical'\"\n                    [(_ngModel)]=\"action.ActionText\"\n                    (_ngModelChange)=\"onchangeActionText(action)\"\n                  ></extend-input>\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action type'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstActionType\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ActionType\"\n                  ></extend-select>\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstActionStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ActionStatus\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Stage status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstStageStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.StageStatus\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Next stage'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"lstStage\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ToStage\"\n                    (_ngModelChange)=\"onchangeNextStage(action)\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Next stage status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstStageStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.NextStageStatus\"\n                  ></extend-select>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </nz-table>\n\n      <box [height]=\"16\"></box>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplNode>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedStage && selectedStage.editorOption.drawerPosition == 'left' ? 'end' : 'start'\"\n    >\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\n      <button\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\n        nz-button\n        nzDanger\n        (click)=\"deleteNode()\"\n      >\n        Delete\n      </button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- EDGE -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleAction\"\n  nzTitle=\"ACTION\"\n  [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition ? selectedAction?.editorOption?.drawerPosition : 'right'\"\n  [nzClosable]=\"false\"\n  [nzWidth]=\"750\"\n  [nzVisible]=\"!!selectedAction\"\n  [nzFooter]=\"footerTplAction\"\n  (nzOnClose)=\"selectedAction = undefined\"\n>\n  <ng-template #drawerTitleAction>\n    <div nz-row nzJustify=\"space-between\">\n      @if (selectedAction) {\n        @if (selectedAction.editorOption.drawerPosition == \"left\") {\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the right\"\n            (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\n          >\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          ACTION\n        } @else {\n          ACTION\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the left\"\n            (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\n          >\n            <nz-icon nzType=\"double-left\"></nz-icon>\n          </button>\n        }\n      }\n    </div>\n  </ng-template>\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedAction\">\n      <strong>{{ selectedAction.FromStage }} -> {{ selectedAction.ToStage }}</strong>\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n        <extend-input\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action text'\"\n          [layOutType]=\"'vertical'\"\n          [(_ngModel)]=\"selectedAction.ActionText\"\n          (_ngModelChange)=\"onchangeActionText(selectedAction)\"\n        ></extend-input>\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action type'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstActionType\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ActionType\"\n        ></extend-select>\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstActionStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ActionStatus\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Stage status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstStageStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.StageStatus\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Next stage'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"lstStage\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ToStage\"\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Next stage status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstStageStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.NextStageStatus\"\n        ></extend-select>\n      </div>\n\n      <!-- <box [height]=\"16\"></box> -->\n      <nz-divider></nz-divider>\n\n      <extend-checkbox\n        [label]=\"'Allow back'\"\n        [labelSpan]=\"0\"\n        [(_ngModel)]=\"selectedAction.allowBack\"\n        (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\n      ></extend-checkbox>\n\n      <box [height]=\"16\"></box>\n\n      @if (selectedAction.allowBack) {\n        <strong>{{ selectedAction.ToStage }} -> {{ selectedAction.FromStage }}</strong>\n\n        @if (selectedBackAction) {\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n            <extend-input\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action text'\"\n              [layOutType]=\"'vertical'\"\n              [(_ngModel)]=\"selectedBackAction.ActionText\"\n              (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\n            ></extend-input>\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action type'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstActionType\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\n            ></extend-select>\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstActionStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ActionStatus\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Stage status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstStageStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Next stage'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"lstStage\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ToStage\"\n              (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Next stage status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstStageStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.NextStageStatus\"\n            ></extend-select>\n          </div>\n        }\n      }\n    </ng-container>\n  </ng-container>\n  <ng-template #footerTplAction>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'end' : 'start'\"\n    >\n      <button nz-button (click)=\"selectedAction = undefined\">Close</button>\n      <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- setting editor -->\n<nz-drawer\n  [nzTitle]=\"drawSettingTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"settingVisible\"\n  (nzOnClose)=\"settingVisible = false\"\n>\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\n  <ng-container *nzDrawerContent>\n    <div class=\"form-item-no-bottom\">\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\n\n      <box [height]=\"16\"></box>\n    </div>\n  </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";.workflow-canvas{position:relative;width:100%;height:600px;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:10000px;height:10000px}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node-start{background-color:unset;display:flex;justify-content:right}.workflow-node-end{background-color:unset;display:flex}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-3px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-6px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}\n"] }]
+                    ], template: "<div\n  #canvasRef\n  class=\"workflow-canvas\"\n  [class.connecting]=\"!!connectingFrom\"\n  [class.dragging-point]=\"!!draggingPoint\"\n  [style.width.px]=\"CANVAS_WIDTH\"\n  [style.height.px]=\"CANVAS_HEIGHT\"\n  (mousedown)=\"onMouseDownCanvas($event)\"\n  (mousemove)=\"onMouseMoveCanvas($event)\"\n  (mouseup)=\"onMouseUpCanvas($event)\"\n  (click)=\"onClickCanvas($event)\"\n>\n  <!-- \n\n  [style.width.px]=\"getCanvasWidth()\"\n  [style.height.px]=\"getCanvasHeight()\" \n\n  style=\"width: 100%; height: calc(100vh - 120px)\"\n  \n  -->\n\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\n      <nz-icon nzType=\"setting\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\n      <nz-icon nzType=\"setting\"></nz-icon> T\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button nz-button nzSize=\"small\" nzDanger nz-tooltip=\"Save\" (click)=\"save()\">\n      <nz-icon nzType=\"save\"></nz-icon>\n    </button>\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Move mode\"\n      (click)=\"isMoveMode = true\"\n    >\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n    <button\n      nz-button\n      nzSize=\"small\"\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\n      nz-tooltip=\"Select mode\"\n      (click)=\"isMoveMode = false\"\n    >\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- UNDO / REDO -->\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"undoStack.length === 0\"\n      nz-tooltip=\"Undo\"\n      (click)=\"undo()\"\n    >\n      <nz-icon nzType=\"undo\"></nz-icon>\n    </button>\n\n    <button\n      nz-button\n      nzSize=\"small\"\n      nzType=\"default\"\n      [disabled]=\"redoStack.length === 0\"\n      nz-tooltip=\"Redo\"\n      (click)=\"redo()\"\n    >\n      <nz-icon nzType=\"redo\"></nz-icon>\n    </button>\n\n    <box [width]=\"1\"></box>\n    <span class=\"divider\"></span>\n    <box [width]=\"1\"></box>\n\n    <!-- ALIGN -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\n\n    <span class=\"divider\"></span>\n\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\n\n    <span class=\"divider\"></span>\n\n    <!-- DISTRIBUTE -->\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\n      \u21C4\n    </button>\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\n  </div>\n\n  <div\n    class=\"canvas-content\"\n    [class.panning]=\"isMoveMode\"\n    [style.transform]=\"'translate(' + panX + 'px,' + panY + 'px)'\"\n  >\n    <!-- GRID -->\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\n\n    <!-- <div class=\"zoom-toolbar\">\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\n    </div> -->\n\n    <!-- SVG EDGES -->\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\n      <g [attr.transform]=\"svgTransform\">\n        <!-- DEFS -->\n        <defs>\n          <!-- glow effect -->\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\n            <feMerge>\n              <feMergeNode in=\"blur\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n\n          <!-- arrow markers -->\n          <marker\n            id=\"arrow-blue\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-red\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            refX=\"10\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-blue-start\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            viewBox=\"0 0 10 10\"\n            refX=\"0\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\n          </marker>\n\n          <marker\n            id=\"arrow-red-start\"\n            markerWidth=\"10\"\n            markerHeight=\"10\"\n            viewBox=\"0 0 10 10\"\n            refX=\"0\"\n            refY=\"5\"\n            orient=\"auto\"\n            markerUnits=\"strokeWidth\"\n          >\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\n          </marker>\n        </defs>\n\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseenter)=\"onMouseEnterEdge(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <path\n            class=\"edge\"\n            [attr.id]=\"'edge-path-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-blue)\"\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\n          ></path>\n\n          <!-- LABEL -->\n          <!-- text b\u00E1m theo line -->\n          <!-- \n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.ActionText }}\n            </textPath>\n          </text> \n          \n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.labelBack }}\n            </textPath>\n          </text>\n          -->\n\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\n          <text\n            *ngIf=\"e.ActionText\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.ActionText }}\n          </text>\n\n          <text\n            *ngIf=\"e.allowBack && e.labelBack\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.labelBack }}\n          </text>\n        </ng-container>\n\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\n          <path\n            class=\"edge-hit\"\n            [attr.d]=\"buildPath(e)\"\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\n            (click)=\"onClickEdge(e, $event)\"\n          ></path>\n\n          <path\n            class=\"edge red\"\n            [attr.id]=\"'edge-path-hover-' + i\"\n            [attr.d]=\"buildPath(e)\"\n            marker-end=\"url(#arrow-red)\"\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\n          ></path>\n\n          <!-- LABEL -->\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.ActionText }}\n            </textPath>\n          </text>\n\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\n              {{ e.labelBack }}\n            </textPath>\n          </text> -->\n\n          <text\n            *ngIf=\"e.ActionText\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.ActionText }}\n          </text>\n\n          <text\n            *ngIf=\"e.allowBack && e.labelBack\"\n            class=\"edge-label\"\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\n            [attr.text-anchor]=\"'middle'\"\n          >\n            {{ e.labelBack }}\n          </text>\n        </ng-container>\n\n        <!-- preview -->\n        <path\n          *ngIf=\"connectingFrom\"\n          class=\"edge\"\n          [attr.d]=\"buildPreviewPath()\"\n          stroke-dasharray=\"5,5\"\n          marker-end=\"url(#arrow-blue)\"\n        ></path>\n      </g>\n    </svg>\n\n    <div\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\n      class=\"selection-box\"\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\n    ></div>\n\n    <!-- lstStage -->\n    @for (n of lstStage; track $index) {\n      @if (n.StageType == \"NODE\") {\n        <nz-card\n          #nodeEl\n          class=\"workflow-node\"\n          [attr.data-id]=\"n.Code\"\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\n          [style.left.px]=\"n.editorOption.x\"\n          [style.top.px]=\"n.editorOption.y\"\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">{{ n.Code }}</div>\n\n          <div>{{ n.Name }}</div>\n\n          @if (!n.editorOption.isReverse) {\n            <!-- connector RIGHT: output -->\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n\n            <!-- connector LEFT: input -->\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n          } @else {\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n          }\n        </nz-card>\n      }\n      <!-- START NODE -->\n      @else if (n.StageType === \"START\") {\n        <nz-card\n          class=\"workflow-node workflow-node-start\"\n          style=\"border: unset\"\n          [style.left.px]=\"n.editorOption.x\"\n          [style.top.px]=\"n.editorOption.y\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">&nbsp;</div>\n\n          <nz-tag\n            [class.selected]=\"n == selectedStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\n            style=\"position: relative; top: -13px\"\n            [style.right.px]=\"n.editorOption.isReverseLabel ? -83 : 1\"\n            [nzColor]=\"'green'\"\n          >\n            {{ n.StageType }}\n          </nz-tag>\n\n          <!-- connector RIGHT: output -->\n          <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\n        </nz-card>\n      }\n\n      <!-- END NODE -->\n      @else if (n.StageType === \"END\") {\n        <nz-card\n          class=\"workflow-node workflow-node-end\"\n          style=\"border: unset\"\n          [style.left.px]=\"n.editorOption.x\"\n          [style.top.px]=\"n.editorOption.y\"\n          [class.connecting-source]=\"isConnectingFrom(n)\"\n          nzSize=\"small\"\n          (mousedown)=\"onMouseDownNode($event, n)\"\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\n        >\n          <div class=\"title\">&nbsp;</div>\n\n          <nz-tag\n            [class.selected]=\"n == selectedStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\n            style=\"position: relative; top: -13px\"\n            [style.right.px]=\"n.editorOption.isReverseLabel ? 65 : -5\"\n            [nzColor]=\"'red'\"\n          >\n            {{ n.StageType }}\n          </nz-tag>\n\n          <!-- connector LEFT: input -->\n          <div class=\"connector connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\n        </nz-card>\n      }\n    }\n\n    <!-- POINTS -->\n    @for (p of connectingPoints; track $index) {\n      @if (p != draggingPoint) {\n        <div\n          class=\"waypoint\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\n        ></div>\n      } @else {\n        <div\n          class=\"waypoint dragging\"\n          [style.left.px]=\"p.x\"\n          [style.top.px]=\"p.y\"\n          (mousedown)=\"onmousedownPoint($event, p)\"\n        ></div>\n      }\n    }\n  </div>\n</div>\n\n<!-- drawer TEMPLATE -->\n<nz-drawer\n  [nzTitle]=\"drawTemplateTitle\"\n  nzPlacement=\"right\"\n  [nzWidth]=\"500\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"drawTemplateVisibel\"\n  [nzFooter]=\"footerTplTemplate\"\n  (nzOnClose)=\"drawTemplateVisibel = false\"\n>\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\n  <ng-container *nzDrawerContent>\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\n    <extend-select\n      [label]=\"'Type'\"\n      [lstItem]=\"template.lstTemplateType\"\n      [valueField]=\"'Code'\"\n      [displayFields]=\"['Code', 'Name']\"\n      [(_ngModel)]=\"template.DocType\"\n    ></extend-select>\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\n    <extend-select\n      [label]=\"'Print template'\"\n      [lstItem]=\"template.lstTemplatePrint\"\n      [valueField]=\"'Code'\"\n      [displayFields]=\"['Code', 'Name']\"\n      [(_ngModel)]=\"template.TemplatePrint\"\n    ></extend-select>\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\n\n    @for (tag of lstStage; track tag) {\n      <nz-tag (click)=\"hoverStage = tag\">\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\n\n    @for (tag of template.lstStageStatus; track tag) {\n      <nz-tag\n        [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\n        (nzOnClose)=\"handleCloseStageStatus(tag)\"\n      >\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstStageStatus && template.lstStageStatus.length\" />\n\n    @if (!inputStageStatusVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\n        <nz-icon nzType=\"plus\" />\n        New Action type\n      </nz-tag>\n    } @else {\n      <input\n        #inputStageStatusElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Code\"\n        [(ngModel)]=\"inputStageStatusCode\"\n        (keydown.enter)=\"inputStageStatusNameElement.select()\"\n      />\n      <input\n        #inputStageStatusNameElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Name\"\n        [(ngModel)]=\"inputStageStatusName\"\n        (blur)=\"handleInputStageStatusConfirm()\"\n        (keydown.enter)=\"handleInputStageStatusConfirm()\"\n      />\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\n\n    @for (tag of template.lstActionType; track tag) {\n      <nz-tag\n        [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\n        (nzOnClose)=\"handleCloseActionType(tag)\"\n      >\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstActionType && template.lstActionType.length\" />\n\n    @if (!inputActionTypeVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\n        <nz-icon nzType=\"plus\" />\n        New Action type\n      </nz-tag>\n    } @else {\n      <input\n        #inputActionTypeElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Code\"\n        [(ngModel)]=\"inputActionTypeCode\"\n        (keydown.enter)=\"inputActionTypeNameElement.select()\"\n      />\n      <input\n        #inputActionTypeNameElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"Name\"\n        [(ngModel)]=\"inputActionTypeName\"\n        (blur)=\"handleInputActionTypeConfirm()\"\n        (keydown.enter)=\"handleInputActionTypeConfirm()\"\n      />\n    }\n\n    <box [height]=\"16\"></box>\n\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\n\n    @for (tag of template.lstActionStatus; track tag) {\n      <nz-tag [nzMode]=\"checkRemoveableActionStatus(tag) ? 'closeable' : 'default'\" (nzOnClose)=\"handleClose(tag)\">\n        {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\n      </nz-tag>\n    }\n\n    <br *ngIf=\"template.lstActionStatus && template.lstActionStatus.length\" />\n\n    @if (!inputVisible) {\n      <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\n        <nz-icon nzType=\"plus\" />\n        New Action status\n      </nz-tag>\n    } @else {\n      <input\n        #inputElement\n        nz-input\n        nzSize=\"small\"\n        type=\"text\"\n        style=\"width: 150px\"\n        placeholder=\"+ New Action status\"\n        [(ngModel)]=\"inputValue\"\n        (blur)=\"handleInputConfirm()\"\n        (keydown.enter)=\"handleInputConfirm()\"\n      />\n    }\n  </ng-container>\n\n  <ng-template #footerTplTemplate>\n    <div nz-flex [nzGap]=\"6\">\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\n      <button nz-button nzDanger (click)=\"save()\">Save</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- drawer STAGE -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleStage\"\n  [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n  [nzVisible]=\"!!selectedStage\"\n  [nzWidth]=\"750\"\n  [nzClosable]=\"false\"\n  [nzFooter]=\"footerTplNode\"\n  (nzOnClose)=\"selectedStage = undefined\"\n>\n  <ng-template #drawerTitleStage>\n    <div nz-row nzJustify=\"space-between\">\n      @if (selectedStage && selectedStage.editorOption) {\n        @if (selectedStage.editorOption.drawerPosition == \"left\") {\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the right\"\n            (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\n          >\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          STAGE\n        } @else {\n          STAGE\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the left\"\n            (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\n          >\n            <nz-icon nzType=\"double-left\"></nz-icon>\n          </button>\n        }\n      }\n    </div>\n  </ng-template>\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedStage\">\n      <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\n        <label nz-radio nzValue=\"START\" [nzDisabled]=\"selectedStage.StageType != 'START'\">START</label>\n        <label nz-radio nzValue=\"NODE\" [nzDisabled]=\"selectedStage.StageType != 'NODE'\">NODE</label>\n        <label nz-radio nzValue=\"END\" [nzDisabled]=\"selectedStage.StageType != 'END'\">END</label>\n      </nz-radio-group>\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\n        <extend-input\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Code'\"\n          [layOutType]=\"'vertical'\"\n          [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n          [required]=\"true\"\n          [(_ngModel)]=\"selectedStage.Code\"\n        ></extend-input>\n\n        <extend-textarea\n          nz-col\n          [nzSpan]=\"16\"\n          [label]=\"'Name'\"\n          [layOutType]=\"'vertical'\"\n          [autoSize]=\"true\"\n          [disabled]=\"['START', 'END'].indexOf(selectedStage!.StageType) >= 0\"\n          [required]=\"true\"\n          [(_ngModel)]=\"selectedStage.Name\"\n        ></extend-textarea>\n      </div>\n\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\n        <extend-input-number\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Sequence'\"\n          [layOutType]=\"'vertical'\"\n          [(_ngModel)]=\"selectedStage.SeqValue\"\n        ></extend-input-number>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"16\"\n          [label]=\"'Org implement'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"lstOrg\"\n          [valueField]=\"'App_Org_Id'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedStage.App_Org_Id\"\n        ></extend-select>\n      </div>\n\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\n        <extend-input-number\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Number Day'\"\n          [layOutType]=\"'vertical'\"\n          [precision]=\"1\"\n          [(_ngModel)]=\"selectedStage.NumberDay\"\n        ></extend-input-number>\n      </div>\n\n      @if (selectedStage.editorOption) {\n        @if ([\"START\", \"END\"].indexOf(selectedStage.StageType) < 0) {\n          <extend-checkbox\n            [label]=\"'Reverse'\"\n            [labelSpan]=\"0\"\n            [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\n          ></extend-checkbox>\n\n          <extend-checkbox\n            [label]=\"'Require user action'\"\n            [labelSpan]=\"0\"\n            [(_ngModel)]=\"selectedStage.IsRequireUser\"\n          ></extend-checkbox>\n        } @else {\n          <extend-checkbox\n            [label]=\"'Reverse'\"\n            [labelSpan]=\"0\"\n            [(_ngModel)]=\"selectedStage.editorOption.isReverseLabel\"\n          ></extend-checkbox>\n        }\n      }\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"16\">\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\n        <div nz-col>\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\n            <nz-icon nzType=\"plus\"></nz-icon>\n          </button>\n        </div>\n      </div>\n\n      <nz-table\n        nzSize=\"small\"\n        [nzData]=\"selectedStage.lstAction || []\"\n        [nzShowPagination]=\"false\"\n        [nzNoResult]=\"'&nbsp;'\"\n      >\n        <thead>\n          <tr [hidden]=\"true\">\n            <th nzWidth=\"50px\"></th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (action of selectedStage.lstAction; track $index) {\n            <tr>\n              <td>\n                <nz-icon\n                  nzType=\"delete\"\n                  nzTheme=\"outline\"\n                  class=\"color-warn cursor-pointer icon-size-16\"\n                  (click)=\"$event.stopPropagation(); deleteAction(action)\"\n                ></nz-icon>\n              </td>\n              <td (click)=\"hoverAction = action\">\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n                  <extend-input\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action text'\"\n                    [layOutType]=\"'vertical'\"\n                    [(_ngModel)]=\"action.ActionText\"\n                    (_ngModelChange)=\"onchangeActionText(action)\"\n                  ></extend-input>\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action type'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstActionType\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ActionType\"\n                  ></extend-select>\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Action status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstActionStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.ActionStatus\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Stage status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstStageStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.StageStatus\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Next stage'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"lstStage\"\n                    [valueField]=\"'WF_TemplateStage_Id'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\n                    (_ngModelChange)=\"onchangeNextStage(action)\"\n                  ></extend-select>\n\n                  <extend-select\n                    nz-col\n                    [nzSpan]=\"8\"\n                    [label]=\"'Next stage status'\"\n                    [layOutType]=\"'vertical'\"\n                    [lstItem]=\"template.lstStageStatus\"\n                    [valueField]=\"'Code'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [(_ngModel)]=\"action.NextStageStatus\"\n                  ></extend-select>\n                </div>\n                <box [height]=\"8\"></box>\n                <div nz-row><strong>Role</strong></div>\n                <div nz-row>\n                  <extend-select\n                    nz-col\n                    nzSpan=\"24\"\n                    [size]=\"'small'\"\n                    [lstItem]=\"lstRole\"\n                    [valueField]=\"'App_Role_Id'\"\n                    [displayFields]=\"['Code', 'Name']\"\n                    [multiple]=\"true\"\n                    [(_ngModel)]=\"action._lstRoleId\"\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\n                  ></extend-select>\n                </div>\n                <box [height]=\"8\"></box>\n                <div nz-row>\n                  <strong>Email action</strong>\n                </div>\n                <div nz-row>\n                  <extend-select\n                    nz-col\n                    nzSpan=\"24\"\n                    [size]=\"'small'\"\n                    [lstItem]=\"lstEmailAction\"\n                    [valueField]=\"'ID'\"\n                    [displayField]=\"'Name'\"\n                    [multiple]=\"true\"\n                    [(_ngModel)]=\"action._lstEmailActionId\"\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\n                  ></extend-select>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </nz-table>\n\n      <box [height]=\"16\"></box>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #footerTplNode>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"\n        selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\n          ? 'start'\n          : 'end'\n      \"\n    >\n      <button nz-button nzDanger nzDanger (click)=\"save()\">Save</button>\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\n      <button\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\n        nz-button\n        nzDanger\n        (click)=\"deleteStage()\"\n      >\n        Delete\n      </button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- drawer ACTION -->\n<nz-drawer\n  [nzTitle]=\"drawerTitleAction\"\n  nzTitle=\"ACTION\"\n  [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\n  [nzClosable]=\"false\"\n  [nzWidth]=\"750\"\n  [nzVisible]=\"!!selectedAction\"\n  [nzFooter]=\"footerTplAction\"\n  (nzOnClose)=\"selectedAction = undefined\"\n>\n  <ng-template #drawerTitleAction>\n    <div nz-row nzJustify=\"space-between\">\n      @if (selectedAction && selectedAction.editorOption) {\n        @if (selectedAction.editorOption.drawerPosition == \"left\") {\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the right\"\n            (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\n          >\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          ACTION\n        } @else {\n          ACTION\n          <button\n            nz-button\n            nzSize=\"small\"\n            nz-tooltip=\"To the left\"\n            (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\n          >\n            <nz-icon nzType=\"double-left\"></nz-icon>\n          </button>\n        }\n      }\n    </div>\n  </ng-template>\n  <ng-container *nzDrawerContent>\n    <ng-container *ngIf=\"selectedAction\">\n      <strong>{{ selectedAction.FromStageCode }} -> {{ selectedAction.ToStageCode }}</strong>\n\n      <box [height]=\"16\"></box>\n\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n        <extend-input\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action text'\"\n          [layOutType]=\"'vertical'\"\n          [(_ngModel)]=\"selectedAction.ActionText\"\n          (_ngModelChange)=\"onchangeActionText(selectedAction)\"\n        ></extend-input>\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action type'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstActionType\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ActionType\"\n        ></extend-select>\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Action status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstActionStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.ActionStatus\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Stage status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstStageStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.StageStatus\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Next stage'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"lstStage\"\n          [valueField]=\"'WF_TemplateStage_Id'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\n        ></extend-select>\n\n        <extend-select\n          nz-col\n          [nzSpan]=\"8\"\n          [label]=\"'Next stage status'\"\n          [layOutType]=\"'vertical'\"\n          [lstItem]=\"template.lstStageStatus\"\n          [valueField]=\"'Code'\"\n          [displayFields]=\"['Code', 'Name']\"\n          [(_ngModel)]=\"selectedAction.NextStageStatus\"\n        ></extend-select>\n      </div>\n\n      <!-- <box [height]=\"16\"></box> -->\n      <nz-divider></nz-divider>\n\n      <extend-checkbox\n        [label]=\"'Allow back'\"\n        [labelSpan]=\"0\"\n        [(_ngModel)]=\"selectedAction.allowBack\"\n        (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\n      ></extend-checkbox>\n\n      <box [height]=\"16\"></box>\n\n      @if (selectedAction.allowBack) {\n        <strong>{{ selectedAction.ToStageCode }} -> {{ selectedAction.FromStageCode }}</strong>\n\n        @if (selectedBackAction) {\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\n            <extend-input\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action text'\"\n              [layOutType]=\"'vertical'\"\n              [(_ngModel)]=\"selectedBackAction.ActionText\"\n              (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\n            ></extend-input>\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action type'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstActionType\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\n            ></extend-select>\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Action status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstActionStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.ActionStatus\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Stage status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstStageStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Next stage'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"lstStage\"\n              [valueField]=\"'WF_TemplateStage_Id'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\n              (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\n            ></extend-select>\n\n            <extend-select\n              nz-col\n              [nzSpan]=\"8\"\n              [label]=\"'Next stage status'\"\n              [layOutType]=\"'vertical'\"\n              [lstItem]=\"template.lstStageStatus\"\n              [valueField]=\"'Code'\"\n              [displayFields]=\"['Code', 'Name']\"\n              [(_ngModel)]=\"selectedBackAction.NextStageStatus\"\n            ></extend-select>\n          </div>\n        }\n      }\n    </ng-container>\n  </ng-container>\n  <ng-template #footerTplAction>\n    <div\n      nz-flex\n      [nzGap]=\"6\"\n      [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\n    >\n      <button nz-button nzDanger nzDanger (click)=\"save()\">Save</button>\n      <button nz-button (click)=\"selectedAction = undefined\">Close</button>\n      <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\n    </div>\n  </ng-template>\n</nz-drawer>\n\n<!-- setting editor -->\n<nz-drawer\n  [nzTitle]=\"drawSettingTitle\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzVisible]=\"settingVisible\"\n  (nzOnClose)=\"settingVisible = false\"\n>\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\n  <ng-container *nzDrawerContent>\n    <div class=\"form-item-no-bottom\">\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\n\n      <box [height]=\"16\"></box>\n    </div>\n  </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";.workflow-canvas{position:relative;width:100%;height:600px;background:#f0f2f5;cursor:default;overflow:hidden;outline:1px dashed rgba(0,0,0,.1)}.workflow-canvas .edges-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.workflow-canvas .edges-layer path{stroke-width:2;fill:none}.canvas-content{transform-origin:0 0;width:10000px;height:10000px}.canvas-content{outline:1px dashed red}.canvas-content.panning{cursor:grab}.canvas-content.panning:active{cursor:grabbing}.workflow-canvas.panning{cursor:grab}.workflow-canvas.panning:active{cursor:grabbing}.workflow-canvas.connecting,.workflow-canvas.connecting .workflow-node{cursor:crosshair}.workflow-node{position:absolute;width:160px;cursor:grab;-webkit-user-select:none;user-select:none;z-index:2}.workflow-node:active{cursor:grabbing}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node-start{background-color:unset;display:flex;justify-content:right}.workflow-node-end{background-color:unset;display:flex}.connector{position:absolute;top:39px;width:12px;height:12px;background:#1890ff;border-radius:50%;transform:translateY(-50%);cursor:crosshair;transition:box-shadow .15s ease-out,transform .15s ease-out}.connector:hover{box-shadow:0 0 0 3px #1890ff4d;transform:translateY(-50%) scale(1.15)}.connector-right{right:-8px;background:orange}.connector-right.reverse,.connector-left{left:-8px}.connector-left.reverse{left:unset;right:-8px}.connector-start{width:16px;height:16px;right:-3px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-6px;background:#000;box-shadow:0 0 0 3px #1890ff4d}.edge{cursor:pointer;stroke:#1890ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;fill:none;transition:stroke .15s ease}.edge-hit{stroke:transparent;stroke-width:18px!important;fill:none;cursor:pointer}.edge-hit:hover+.edge{stroke:#ff4d4f;stroke-width:2}.workflow-canvas.dragging-point .edge-hit{pointer-events:none}.edge:hover+.edge-label{fill:#1890ff;font-weight:500}.edge-label{font-size:12px;fill:#555;pointer-events:none;-webkit-user-select:none;user-select:none}.blue{stroke:#1890ff!important}.red{stroke:#ff4d4f!important;box-shadow:0 0 0 3px #1890ff4d!important}.workflow-svg{background:transparent;overflow:visible}.waypoint{position:absolute;width:10px;height:10px;background:#ff4d4f;border-radius:50%;transform:translate(-50%,-50%) scale(1);cursor:move;z-index:1;transition:transform .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.waypoint:hover{background:#ff7875;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 4px #ff787559}.waypoint.dragging{transition:none;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}.workflow-canvas.dragging-point svg{cursor:grabbing}.selection-box{position:absolute;border:1px dashed #1890ff;background:#1890ff1a;pointer-events:none}.toolbar{position:absolute;top:8px;left:8px;display:flex;gap:4px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;z-index:100}.toolbar .divider{width:1px;background:#e5e5e5;margin:0 2px}.zoom-toolbar{position:absolute;top:8px;left:8px;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;padding:4px 6px;border-radius:6px;box-shadow:0 2px 6px #00000026}.zoom-toolbar span{min-width:40px;text-align:center;font-size:12px}nz-tag.selected{outline:2px dashed #1890ff}.grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:20px 20px}.grid-layer{background-image:linear-gradient(to right,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px}.editable-tag{background:#fff;border-style:dashed}\n"] }]
         }], propDecorators: { lstOrg: [{
                 type: Input
-            }], lstTemplateType: [{
-                type: Input
-            }], lstTemplatePrint: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }], lstStage: [{
-                type: Input
-            }], lstAction: [{
+            }], lstRole: [{
                 type: Input
             }], onSave: [{
                 type: Output,
                 args: ['onSave']
+            }], onDeleteStage: [{
+                type: Output,
+                args: ['onDeleteStage']
+            }], onDeleteAction: [{
+                type: Output,
+                args: ['onDeleteAction']
             }], canvasRef: [{
                 type: ViewChild,
                 args: ['canvas', { static: true }]