@brggroup/share-lib 0.0.38 → 0.0.40

package/fesm2022/brggroup-share-lib.mjs

@@ -2751,10 +2751,12 @@ class WF_TemplateStage {
     LimitValue;
     IsRequireUser;
     // #endregion properties
+    OrgImplCode;
     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;
@@ -2823,20 +2825,27 @@ class Workflow extends WF_Template {
  * STAGE
  */
 class WorkflowStage extends WF_TemplateStage {
+    lstAction;
+    editorOption = new WorkflowStageEditorOption();
+    constructor(obj) {
+        obj = obj || {};
+        super(obj);
+        this.lstAction = obj.lstAction;
+        this.editorOption = obj.editorOption || new WorkflowStageEditorOption();
+    }
+}
+class WorkflowStageEditorOption {
     x = 0;
     y = 0;
     isReverse;
     isReverseLabel;
-    lstAction;
     drawerPosition;
     constructor(obj) {
         obj = obj || {};
-        super(obj);
         this.x = obj.x;
         this.y = obj.y;
         this.isReverse = obj.isReverse;
         this.isReverseLabel = obj.isReverseLabel;
-        this.lstAction = obj.lstAction;
         this.drawerPosition = obj.drawerPosition;
     }
 }
@@ -2851,8 +2860,12 @@ class WorkflowAction extends WF_TemplateStageAction {
     ToSide;
     allowBack; // true = 2 đầu, false/undefined = 1 đầu
     labelBack;
-    points;
     isBackAction;
+    editorOption = new WorkflowActionEditorOption();
+}
+class WorkflowActionEditorOption {
+    points;
+    drawerPosition;
 }
 class WorkflowEditorComponent extends BaseComponent {
     //#region NGHIỆP VỤ
@@ -2875,7 +2888,7 @@ class WorkflowEditorComponent extends BaseComponent {
     hoverStage;
     selectedAction;
     selectedBackAction;
-    hoverEdge;
+    hoverAction;
     // vẽ đường liên kết mới
     connectingFrom;
     connectingPoints = [];
@@ -2918,11 +2931,11 @@ class WorkflowEditorComponent extends BaseComponent {
     canvasRef;
     svgRef;
     get normalEdges() {
-        return this.lstAction.filter((e) => e !== this.hoverEdge && !e.isBackAction);
+        return this.lstAction.filter((e) => e !== this.hoverAction && !e.isBackAction);
     }
     get hoverEdges() {
-        if (this.hoverEdge && !this.hoverEdge.isBackAction) {
-            return [this.hoverEdge];
+        if (this.hoverAction && !this.hoverAction.isBackAction) {
+            return [this.hoverAction];
         }
         if (this.selectedAction && !this.selectedAction.isBackAction) {
             return [this.selectedAction];
@@ -2973,10 +2986,24 @@ class WorkflowEditorComponent extends BaseComponent {
         }
     }
     ngOnInit() {
-        console.log('ngOnInit', this.template, this.lstStage, this.lstAction);
+        console.log('ngOnInit');
         console.log('template', this.template);
         console.log('lstStage', this.lstStage);
         console.log('lstAction', this.lstAction);
+        if (!this.lstStage || !this.lstStage.length) {
+            this.lstStage = [
+                { Code: 'start', Name: 'Start', x: 5000 + -35, y: 5000 + 120, StageType: 'START', SeqValue: 1 },
+                {
+                    Code: 'end',
+                    Name: 'End',
+                    x: 5000 + 120,
+                    y: 5000 + 380,
+                    StageType: 'END',
+                    isReverseLabel: true,
+                    SeqValue: 999,
+                },
+            ];
+        }
         this.lstStage.forEach((x) => {
             x.lstAction = this.lstAction.filter((y) => y.FromStage == x.Code);
         });
@@ -2995,8 +3022,8 @@ class WorkflowEditorComponent extends BaseComponent {
         for (const n of this.lstStage) {
             if (!this.lstSelectedStageCode.has(n.Code))
                 continue;
-            n.x = this.clamp(n.x + dx, 0, this.CANVAS_WIDTH - this.NODE_WIDTH);
-            n.y = this.clamp(n.y + dy, 0, this.CANVAS_HEIGHT - this.NODE_HEIGHT);
+            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);
         }
     }
     save() {
@@ -3006,8 +3033,8 @@ class WorkflowEditorComponent extends BaseComponent {
         console.log('addStage');
         const code = 'New_Stage_' + Math.round(Math.random() * 1000);
         // tìm vị trí trống (đơn giản & hiệu quả)
-        const baseX = 200;
-        const baseY = 120;
+        const baseX = 200 - this.panX;
+        const baseY = 120 - this.panY;
         const GAP_X = 200;
         const GAP_Y = 120;
         let x = baseX;
@@ -3018,8 +3045,8 @@ class WorkflowEditorComponent extends BaseComponent {
         const stage = new WorkflowStage();
         stage.Code = code;
         stage.Name = 'New Stage';
-        stage.x = x;
-        stage.y = y;
+        stage.editorOption.x = x;
+        stage.editorOption.y = y;
         stage.StageType = 'NODE';
         stage.SeqValue = 10;
         this.lstStage.push(stage);
@@ -3141,6 +3168,8 @@ class WorkflowEditorComponent extends BaseComponent {
             return;
         stage.lstAction = stage.lstAction?.filter((x) => x != action);
         this.lstAction = this.lstAction.filter((x) => x != action);
+        this.selectedAction = undefined;
+        this.hoverAction = undefined;
     }
     //#endregion
     //#region Action type
@@ -3165,11 +3194,10 @@ class WorkflowEditorComponent extends BaseComponent {
         }, 10);
     }
     handleInputStageStatusConfirm() {
-        if (this.inputStageStatusCode && !this.template.lstStageStatus.find((x) => x.Code === this.inputValue)) {
-            this.template.lstStageStatus = [
-                ...this.template.lstStageStatus,
-                { Code: this.inputStageStatusCode, Name: this.inputStageStatusName },
-            ];
+        if (this.inputStageStatusCode && !this.template.lstStageStatus?.find((x) => x.Code === this.inputValue)) {
+            this.template.lstStageStatus = this.template.lstStageStatus
+                ? [...this.template.lstStageStatus, { Code: this.inputStageStatusCode, Name: this.inputStageStatusName }]
+                : [{ Code: this.inputStageStatusCode, Name: this.inputStageStatusName }];
         }
         this.inputStageStatusCode = '';
         this.inputStageStatusName = '';
@@ -3203,11 +3231,10 @@ class WorkflowEditorComponent extends BaseComponent {
         }, 10);
     }
     handleInputActionTypeConfirm() {
-        if (this.inputActionTypeCode && !this.template.lstActionType.find((x) => x.Code === this.inputValue)) {
-            this.template.lstActionType = [
-                ...this.template.lstActionType,
-                { Code: this.inputActionTypeCode, Name: this.inputActionTypeName },
-            ];
+        if (this.inputActionTypeCode && !this.template.lstActionType?.find((x) => x.Code === this.inputValue)) {
+            this.template.lstActionType = this.template.lstActionType
+                ? [...this.template.lstActionType, { Code: this.inputActionTypeCode, Name: this.inputActionTypeName }]
+                : [{ Code: this.inputActionTypeCode, Name: this.inputActionTypeName }];
         }
         this.inputActionTypeCode = '';
         this.inputActionTypeName = '';
@@ -3235,8 +3262,10 @@ class WorkflowEditorComponent extends BaseComponent {
         }, 10);
     }
     handleInputConfirm() {
-        if (this.inputValue && !this.template.lstActionStatus.find((x) => x.Code === this.inputValue)) {
-            this.template.lstActionStatus = [...this.template.lstActionStatus, { Code: this.inputValue }];
+        if (this.inputValue && !this.template.lstActionStatus?.find((x) => x.Code === this.inputValue)) {
+            this.template.lstActionStatus = this.template.lstActionStatus
+                ? [...this.template.lstActionStatus, { Code: this.inputValue }]
+                : [{ Code: this.inputValue }];
         }
         this.inputValue = '';
         this.inputVisible = false;
@@ -3341,14 +3370,14 @@ class WorkflowEditorComponent extends BaseComponent {
                 if (!this.lstSelectedStageCode.has(n.Code))
                     continue;
                 const start = this.dragStartPositions.get(n.Code);
-                n.x = start.x + clampedDx;
-                n.y = start.y + clampedDy;
+                n.editorOption.x = start.x + clampedDx;
+                n.editorOption.y = start.y + clampedDy;
             }
             // 🔹 move edge points
             for (const [edge, startPoints] of this.dragStartEdgePoints.entries()) {
-                if (!edge.points)
+                if (!edge.editorOption.points)
                     continue;
-                edge.points.forEach((pt, i) => {
+                edge.editorOption.points.forEach((pt, i) => {
                     pt.x = startPoints[i].x + dx;
                     pt.y = startPoints[i].y + dy;
                 });
@@ -3372,18 +3401,18 @@ class WorkflowEditorComponent extends BaseComponent {
             let rawY = p.y - this.offsetY;
             // ⭐ khoá trục
             if (event.shiftKey && this.axisLock === 'x') {
-                rawY = this.draggingNode.y;
+                rawY = this.draggingNode.editorOption.y;
             }
             if (event.shiftKey && this.axisLock === 'y') {
-                rawX = this.draggingNode.x;
+                rawX = this.draggingNode.editorOption.x;
             }
             const snap = this.snapPoint({ x: rawX, y: rawY }, event);
             // this.draggingNode.x = snap.x;
             // this.draggingNode.y = snap.y;
             const nodeW = this.NODE_WIDTH;
             const nodeH = this.NODE_HEIGHT;
-            this.draggingNode.x = this.clamp(snap.x, 0, this.CANVAS_WIDTH - nodeW);
-            this.draggingNode.y = this.clamp(snap.y, 0, this.CANVAS_HEIGHT - nodeH);
+            this.draggingNode.editorOption.x = this.clamp(snap.x, 0, this.CANVAS_WIDTH - nodeW);
+            this.draggingNode.editorOption.y = this.clamp(snap.y, 0, this.CANVAS_HEIGHT - nodeH);
             return;
         }
         // 3️⃣ đang kéo waypoint
@@ -3444,16 +3473,16 @@ class WorkflowEditorComponent extends BaseComponent {
             this.dragStartPositions.clear();
             for (const n of this.lstStage) {
                 if (this.lstSelectedStageCode.has(n.Code)) {
-                    this.dragStartPositions.set(n.Code, { x: n.x, y: n.y });
+                    this.dragStartPositions.set(n.Code, { x: n.editorOption.x, y: n.editorOption.y });
                 }
             }
             // 🔹 snapshot edge points
             this.dragStartEdgePoints = new Map();
             for (const e of this.lstAction) {
-                if (!e.points?.length)
+                if (!e.editorOption.points?.length)
                     continue;
                 if (this.lstSelectedStageCode.has(e.FromStage || '') || this.lstSelectedStageCode.has(e.ToStage || '')) {
-                    this.dragStartEdgePoints.set(e, e.points.map((p) => ({ x: p.x, y: p.y })));
+                    this.dragStartEdgePoints.set(e, e.editorOption.points.map((p) => ({ x: p.x, y: p.y })));
                 }
             }
             return;
@@ -3471,8 +3500,8 @@ class WorkflowEditorComponent extends BaseComponent {
         this.draggingNode = node;
         this.dragStartX = event.clientX;
         this.dragStartY = event.clientY;
-        this.offsetX = event.clientX - node.x;
-        this.offsetY = event.clientY - node.y;
+        this.offsetX = event.clientX - node.editorOption.x;
+        this.offsetY = event.clientY - node.editorOption.y;
         this.isDragging = false;
     }
     onClickStage(node) {
@@ -3491,7 +3520,7 @@ class WorkflowEditorComponent extends BaseComponent {
                     newAction.ToSide = 'left';
                     // ⭐ NẾU CÓ WAYPOINT → MANUAL ROUTE
                     if (this.connectingPoints.length > 0) {
-                        newAction.points = [...this.connectingPoints];
+                        newAction.editorOption.points = [...this.connectingPoints];
                     }
                     this.lstAction.push(newAction);
                     const stage = this.lstStage.find((x) => x.Code == newAction.FromStage);
@@ -3517,14 +3546,14 @@ class WorkflowEditorComponent extends BaseComponent {
         // console.log('onMouseEnterEdge', e);
         if (this.connectingFrom)
             return;
-        this.hoverEdge = e;
-        this.connectingPoints = e.points || [];
+        this.hoverAction = e;
+        this.connectingPoints = e.editorOption.points || [];
     }
     onMouseLeaveEdge(e) {
         // console.log('onEdgeLeave', e);
         if (this.connectingFrom)
             return;
-        this.hoverEdge = undefined;
+        this.hoverAction = undefined;
         this.connectingPoints = [];
     }
     edgeClickTimer = null;
@@ -3560,11 +3589,11 @@ class WorkflowEditorComponent extends BaseComponent {
         event.preventDefault();
         const p = this.getSvgPoint(event, true);
         // Nếu edge chưa có manual points → convert auto → manual
-        if (!edge.points || edge.points.length === 0) {
-            edge.points = [];
+        if (!edge.editorOption.points || edge.editorOption.points.length === 0) {
+            edge.editorOption.points = [];
         }
         const insertIndex = this.findInsertIndex(edge, p);
-        edge.points.splice(insertIndex, 0, {
+        edge.editorOption.points.splice(insertIndex, 0, {
             x: p.x,
             y: p.y,
         });
@@ -3603,7 +3632,7 @@ class WorkflowEditorComponent extends BaseComponent {
                     newAction.ToSide = 'left';
                     // ⭐ NẾU CÓ WAYPOINT → MANUAL ROUTE
                     if (this.connectingPoints.length > 0) {
-                        newAction.points = [...this.connectingPoints];
+                        newAction.editorOption.points = [...this.connectingPoints];
                     }
                     this.lstAction.push(newAction);
                     const stage = this.lstStage.find((x) => x.Code == newAction.FromStage);
@@ -3634,12 +3663,12 @@ class WorkflowEditorComponent extends BaseComponent {
         console.log('onRightClickPoint', edge, index);
         event.preventDefault();
         event.stopPropagation();
-        if (!edge.points)
+        if (!edge.editorOption.points)
             return;
-        edge.points.splice(index, 1);
+        edge.editorOption.points.splice(index, 1);
         // Nếu xoá hết → quay về auto route
-        if (edge.points.length === 0) {
-            delete edge.points;
+        if (edge.editorOption.points.length === 0) {
+            delete edge.editorOption.points;
         }
     }
     //#endregion
@@ -3650,7 +3679,7 @@ class WorkflowEditorComponent extends BaseComponent {
         const map = new Map();
         for (const n of this.lstStage) {
             if (nodeIds.has(n.Code)) {
-                map.set(n.Code, { x: n.x, y: n.y });
+                map.set(n.Code, { x: n.editorOption.x, y: n.editorOption.y });
             }
         }
         return map;
@@ -3694,8 +3723,8 @@ class WorkflowEditorComponent extends BaseComponent {
         action.before.forEach((pos, id) => {
             const node = this.lstStage.find((n) => n.Code === id);
             if (node) {
-                node.x = pos.x;
-                node.y = pos.y;
+                node.editorOption.x = pos.x;
+                node.editorOption.y = pos.y;
             }
         });
     }
@@ -3728,8 +3757,8 @@ class WorkflowEditorComponent extends BaseComponent {
         action.before.forEach((pos, id) => {
             const node = this.lstStage.find((n) => n.Code === id);
             if (node) {
-                node.x = pos.x;
-                node.y = pos.y;
+                node.editorOption.x = pos.x;
+                node.editorOption.y = pos.y;
             }
         });
     }
@@ -3749,18 +3778,18 @@ class WorkflowEditorComponent extends BaseComponent {
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes();
-        const minX = Math.min(...nodes.map((n) => n.x));
-        nodes.forEach((n) => (n.x = minX));
+        const minX = Math.min(...nodes.map((n) => n.editorOption.x));
+        nodes.forEach((n) => (n.editorOption.x = minX));
     }
     alignCenter() {
         if (this.lstSelectedStageCode.size < 2)
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes();
-        const centers = nodes.map((n) => n.x + this.NODE_WIDTH / 2);
+        const centers = nodes.map((n) => n.editorOption.x + this.NODE_WIDTH / 2);
         const centerX = centers.reduce((a, b) => a + b) / centers.length;
         nodes.forEach((n) => {
-            n.x = centerX - this.NODE_WIDTH / 2;
+            n.editorOption.x = centerX - this.NODE_WIDTH / 2;
         });
     }
     alignRight() {
@@ -3768,26 +3797,26 @@ class WorkflowEditorComponent extends BaseComponent {
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes();
-        const maxX = Math.max(...nodes.map((n) => n.x + this.NODE_WIDTH));
-        nodes.forEach((n) => (n.x = maxX - this.NODE_WIDTH));
+        const maxX = Math.max(...nodes.map((n) => n.editorOption.x + this.NODE_WIDTH));
+        nodes.forEach((n) => (n.editorOption.x = maxX - this.NODE_WIDTH));
     }
     alignTop() {
         if (this.lstSelectedStageCode.size < 2)
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes();
-        const minY = Math.min(...nodes.map((n) => n.y));
-        nodes.forEach((n) => (n.y = minY));
+        const minY = Math.min(...nodes.map((n) => n.editorOption.y));
+        nodes.forEach((n) => (n.editorOption.y = minY));
     }
     alignMiddle() {
         if (this.lstSelectedStageCode.size < 2)
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes();
-        const centers = nodes.map((n) => n.y + this.NODE_HEIGHT / 2);
+        const centers = nodes.map((n) => n.editorOption.y + this.NODE_HEIGHT / 2);
         const centerY = centers.reduce((a, b) => a + b) / centers.length;
         nodes.forEach((n) => {
-            n.y = centerY - this.NODE_HEIGHT / 2;
+            n.editorOption.y = centerY - this.NODE_HEIGHT / 2;
         });
     }
     alignBottom() {
@@ -3795,25 +3824,25 @@ class WorkflowEditorComponent extends BaseComponent {
             return;
         this.pushAlignUndo();
         const nodes = this.getSelectedNodes();
-        const maxY = Math.max(...nodes.map((n) => n.y + this.NODE_HEIGHT));
-        nodes.forEach((n) => (n.y = maxY - this.NODE_HEIGHT));
+        const maxY = Math.max(...nodes.map((n) => n.editorOption.y + this.NODE_HEIGHT));
+        nodes.forEach((n) => (n.editorOption.y = maxY - this.NODE_HEIGHT));
     }
     distributeHorizontal() {
         if (this.lstSelectedStageCode.size < 3)
             return;
         this.pushAlignUndo();
-        const nodes = this.getSelectedNodes().sort((a, b) => a.x - b.x);
+        const nodes = this.getSelectedNodes().sort((a, b) => a.editorOption.x - b.editorOption.x);
         const first = nodes[0];
         const last = nodes[nodes.length - 1];
         const totalWidth = nodes.reduce((s, n) => s + this.NODE_WIDTH, 0);
-        const space = (last.x - first.x - totalWidth + this.NODE_WIDTH) / (nodes.length - 1);
-        let x = first.x;
+        const space = (last.editorOption.x - first.editorOption.x - totalWidth + this.NODE_WIDTH) / (nodes.length - 1);
+        let x = first.editorOption.x;
         nodes.forEach((n, i) => {
             if (i === 0 || i === nodes.length - 1) {
-                x = n.x + this.NODE_WIDTH + space;
+                x = n.editorOption.x + this.NODE_WIDTH + space;
                 return;
             }
-            n.x = x;
+            n.editorOption.x = x;
             x += this.NODE_WIDTH + space;
         });
     }
@@ -3821,18 +3850,18 @@ class WorkflowEditorComponent extends BaseComponent {
         if (this.lstSelectedStageCode.size < 3)
             return;
         this.pushAlignUndo();
-        const nodes = this.getSelectedNodes().sort((a, b) => a.y - b.y);
+        const nodes = this.getSelectedNodes().sort((a, b) => a.editorOption.y - b.editorOption.y);
         const first = nodes[0];
         const last = nodes[nodes.length - 1];
         const totalHeight = nodes.reduce((s, n) => s + this.NODE_HEIGHT, 0);
-        const space = (last.y - first.y - totalHeight + this.NODE_HEIGHT) / (nodes.length - 1);
-        let y = first.y;
+        const space = (last.editorOption.y - first.editorOption.y - totalHeight + this.NODE_HEIGHT) / (nodes.length - 1);
+        let y = first.editorOption.y;
         nodes.forEach((n, i) => {
             if (i === 0 || i === nodes.length - 1) {
-                y = n.y + this.NODE_HEIGHT + space;
+                y = n.editorOption.y + this.NODE_HEIGHT + space;
                 return;
             }
-            n.y = y;
+            n.editorOption.y = y;
             y += this.NODE_HEIGHT + space;
         });
     }
@@ -3866,8 +3895,8 @@ class WorkflowEditorComponent extends BaseComponent {
     }
     getEdgeLabelPosition(edge) {
         // Ưu tiên waypoint giữa nếu có
-        if (edge.points && edge.points.length > 0) {
-            const mid = edge.points[Math.floor(edge.points.length / 2)];
+        if (edge.editorOption.points && edge.editorOption.points.length > 0) {
+            const mid = edge.editorOption.points[Math.floor(edge.editorOption.points.length / 2)];
             return { x: mid.x, y: mid.y };
         }
         // fallback: giữa from → to
@@ -3886,23 +3915,23 @@ class WorkflowEditorComponent extends BaseComponent {
         switch (side) {
             case 'left':
                 return {
-                    x: node.x,
-                    y: node.y + height / 2,
+                    x: node.editorOption.x,
+                    y: node.editorOption.y + height / 2,
                 };
             case 'right':
                 return {
-                    x: node.x + width,
-                    y: node.y + height / 2,
+                    x: node.editorOption.x + width,
+                    y: node.editorOption.y + height / 2,
                 };
             case 'top':
                 return {
-                    x: node.x + width / 2,
-                    y: node.y,
+                    x: node.editorOption.x + width / 2,
+                    y: node.editorOption.y,
                 };
             case 'bottom':
                 return {
-                    x: node.x + width / 2,
-                    y: node.y + height,
+                    x: node.editorOption.x + width / 2,
+                    y: node.editorOption.y + height,
                 };
         }
     }
@@ -3935,7 +3964,11 @@ class WorkflowEditorComponent extends BaseComponent {
             return null;
         const from = this.getNode(edge.FromStage);
         const to = this.getNode(edge.ToStage);
-        return [{ x: from.x + 160, y: from.y + 40 }, ...(edge.points || []), { x: to.x, y: to.y + 40 }];
+        return [
+            { x: from.editorOption.x + 160, y: from.editorOption.y + 40 },
+            ...(edge.editorOption.points || []),
+            { x: to.editorOption.x, y: to.editorOption.y + 40 },
+        ];
     }
     pointToSegmentDistance(p, a, b) {
         const dx = b.x - a.x;
@@ -3952,20 +3985,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.x - x) < 160 && Math.abs(n.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.x : n.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.y + 80), 400);
+        const maxY = Math.max(...this.lstStage.map((n) => n.editorOption.y + 80), 400);
         return maxY + PADDING;
     }
     /* =============================
@@ -3993,10 +4026,10 @@ class WorkflowEditorComponent extends BaseComponent {
         const y2 = Math.max(this.selectStart.y, this.selectEnd.y);
         this.lstSelectedStageCode.clear();
         for (const n of this.lstStage) {
-            const nx1 = n.x;
-            const ny1 = n.y;
-            const nx2 = n.x + 160;
-            const ny2 = n.y + 80;
+            const nx1 = n.editorOption.x;
+            const ny1 = n.editorOption.y;
+            const nx2 = n.editorOption.x + 160;
+            const ny2 = n.editorOption.y + 80;
             const intersect = nx2 >= x1 && nx1 <= x2 && ny2 >= y1 && ny1 <= y2;
             if (intersect) {
                 this.lstSelectedStageCode.add(n.Code);
@@ -4027,15 +4060,15 @@ class WorkflowEditorComponent extends BaseComponent {
         const from = this.getNode(edge.FromStage);
         const to = this.getNode(edge.ToStage);
         const start = {
-            x: from.x + (from.isReverse ? 0 : 160),
-            y: from.y + 40,
+            x: from.editorOption.x + (from.editorOption.isReverse ? 0 : 160),
+            y: from.editorOption.y + 40,
         };
         const end = {
-            x: to.x + (to.isReverse ? 160 : 0),
-            y: to.y + 40,
+            x: to.editorOption.x + (to.editorOption.isReverse ? 160 : 0),
+            y: to.editorOption.y + 40,
         };
-        if (edge.points && edge.points.length) {
-            return this.buildPathThroughPoints([start, ...edge.points, end]);
+        if (edge.editorOption.points && edge.editorOption.points.length) {
+            return this.buildPathThroughPoints([start, ...edge.editorOption.points, end]);
         }
         // return this.buildRoutedPath({ node: from, side: edge.fromSide }, to.x, to.y + 40);
         return this.buildStragePath(start.x, start.y, end.x, end.y);
@@ -4044,8 +4077,8 @@ class WorkflowEditorComponent extends BaseComponent {
         if (!this.connectingFrom)
             return '';
         const start = {
-            x: this.connectingFrom.node.x + (this.connectingFrom.node.isReverse ? 0 : 160),
-            y: this.connectingFrom.node.y + 40,
+            x: this.connectingFrom.node.editorOption.x + (this.connectingFrom.node.editorOption.isReverse ? 0 : 160),
+            y: this.connectingFrom.node.editorOption.y + 40,
         };
         const end = {
             x: this.previewX,
@@ -4086,8 +4119,8 @@ class WorkflowEditorComponent extends BaseComponent {
   `;
     }
     buildRoutedPath(from, toX, toY, ARROW_GAP = 12) {
-        const x1 = from.node.isReverse ? from.node.x : from.node.x + 160;
-        const y1 = from.node.y + 40;
+        const x1 = from.node.editorOption.isReverse ? from.node.editorOption.x : from.node.editorOption.x + 160;
+        const y1 = from.node.editorOption.y + 40;
         const x2 = toX;
         const y2 = toY;
         // const ARROW_GAP = 12;
@@ -4188,8 +4221,8 @@ class WorkflowEditorComponent extends BaseComponent {
         };
     }
     isBlockedPoint(from, x2, y2) {
-        const x1 = from.node.isReverse ? from.node.x + 160 : from.node.x;
-        const y1 = from.node.y + 40;
+        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)
                 return false;
@@ -4201,7 +4234,7 @@ class WorkflowEditorComponent extends BaseComponent {
         });
     }
     findBestRouteY(from, toX, toY) {
-        const baseY = from.node.y + 40;
+        const baseY = from.node.editorOption.y + 40;
         const OFFSETS = [0, 80, -80, 160, -160, 240, -240];
         for (const offset of OFFSETS) {
             const routeY = baseY + offset;
@@ -4213,20 +4246,20 @@ class WorkflowEditorComponent extends BaseComponent {
         return baseY + OFFSETS[OFFSETS.length - 1];
     }
     isNodeBetweenX(fromX, toX, node) {
-        const nx1 = node.x;
-        const nx2 = node.x + 160;
+        const nx1 = node.editorOption.x;
+        const nx2 = node.editorOption.x + 160;
         const minX = Math.min(fromX, toX);
         const maxX = Math.max(fromX, toX);
         return nx2 > minX && nx1 < maxX;
     }
     doesLineCrossNodeY(y, node, tolerance = 6) {
-        const top = node.y;
-        const bottom = node.y + 80;
+        const top = node.editorOption.y;
+        const bottom = node.editorOption.y + 80;
         return y > top + tolerance && y < bottom - tolerance;
     }
     isLaneClear(from, toX, routeY) {
-        const x1 = from.node.x;
-        const y1 = from.node.y + 40;
+        const x1 = from.node.editorOption.x;
+        const y1 = from.node.editorOption.y + 40;
         const x2 = toX;
         const y2 = routeY;
         return !this.lstStage.some((n) => {
@@ -4240,7 +4273,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.x\"\n          [style.top.px]=\"n.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.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.x\"\n          [style.top.px]=\"n.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.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.x\"\n          [style.top.px]=\"n.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.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, hoverEdge!, $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?.drawerPosition ? selectedStage?.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.drawerPosition == \"left\") {\n          <button nz-button nzSize=\"small\" nz-tooltip=\"To the right\" (click)=\"selectedStage.drawerPosition = 'right'\">\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          STAGE\n        } @else {\n          STAGE\n          <button nz-button nzSize=\"small\" nz-tooltip=\"To the left\" (click)=\"selectedStage.drawerPosition = 'left'\">\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]=\"true\">START</label>\n        <label nz-radio nzValue=\"NODE\" [nzDisabled]=\"true\">NODE</label>\n        <label nz-radio nzValue=\"END\" [nzDisabled]=\"true\">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.App_Org_Id\"\n        ></extend-select>\n      </div>\n\n      @if ([\"START\", \"END\"].indexOf(selectedStage.StageType) < 0) {\n        <extend-checkbox [label]=\"'Reverse'\" [labelSpan]=\"0\" [(_ngModel)]=\"selectedStage.isReverse\"></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.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)=\"hoverEdge = 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\n                  <nz-divider\n                    *ngIf=\"selectedStage.lstAction && $index + 1 < selectedStage.lstAction.length\"\n                    style=\"margin: 16px 0px 8px 0px; background-color: orange\"\n                  ></nz-divider>\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 nz-flex [nzGap]=\"6\" [nzJustify]=\"selectedStage && selectedStage.drawerPosition == 'left' ? 'end' : 'start'\">\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=\"ACTION\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzWidth]=\"750\"\n  [nzVisible]=\"!!selectedAction\"\n  (nzOnClose)=\"selectedAction = undefined\"\n>\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</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\n      <extend-input-number [label]=\"'Canvas width'\" [(_ngModel)]=\"CANVAS_WIDTH\"></extend-input-number>\n      <box [height]=\"16\"></box>\n      <extend-input-number [label]=\"'Canvas height'\" [(_ngModel)]=\"CANVAS_HEIGHT\"></extend-input-number>\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", 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, decorators: [{
             type: Component,
@@ -4265,7 +4298,7 @@ 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.x\"\n          [style.top.px]=\"n.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.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.x\"\n          [style.top.px]=\"n.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.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.x\"\n          [style.top.px]=\"n.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.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, hoverEdge!, $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?.drawerPosition ? selectedStage?.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.drawerPosition == \"left\") {\n          <button nz-button nzSize=\"small\" nz-tooltip=\"To the right\" (click)=\"selectedStage.drawerPosition = 'right'\">\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          STAGE\n        } @else {\n          STAGE\n          <button nz-button nzSize=\"small\" nz-tooltip=\"To the left\" (click)=\"selectedStage.drawerPosition = 'left'\">\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]=\"true\">START</label>\n        <label nz-radio nzValue=\"NODE\" [nzDisabled]=\"true\">NODE</label>\n        <label nz-radio nzValue=\"END\" [nzDisabled]=\"true\">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.App_Org_Id\"\n        ></extend-select>\n      </div>\n\n      @if ([\"START\", \"END\"].indexOf(selectedStage.StageType) < 0) {\n        <extend-checkbox [label]=\"'Reverse'\" [labelSpan]=\"0\" [(_ngModel)]=\"selectedStage.isReverse\"></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.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)=\"hoverEdge = 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\n                  <nz-divider\n                    *ngIf=\"selectedStage.lstAction && $index + 1 < selectedStage.lstAction.length\"\n                    style=\"margin: 16px 0px 8px 0px; background-color: orange\"\n                  ></nz-divider>\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 nz-flex [nzGap]=\"6\" [nzJustify]=\"selectedStage && selectedStage.drawerPosition == 'left' ? 'end' : 'start'\">\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=\"ACTION\"\n  nzPlacement=\"right\"\n  [nzClosable]=\"false\"\n  [nzWidth]=\"750\"\n  [nzVisible]=\"!!selectedAction\"\n  (nzOnClose)=\"selectedAction = undefined\"\n>\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</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\n      <extend-input-number [label]=\"'Canvas width'\" [(_ngModel)]=\"CANVAS_WIDTH\"></extend-input-number>\n      <box [height]=\"16\"></box>\n      <extend-input-number [label]=\"'Canvas height'\" [(_ngModel)]=\"CANVAS_HEIGHT\"></extend-input-number>\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]=\"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"] }]
         }], propDecorators: { lstOrg: [{
                 type: Input
             }], lstTemplateType: [{
@@ -4948,5 +4981,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AnimatedDigitComponent, AppGlobals, AppStorage, AuthGuard, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CheckModel, CommonService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DoughnutGraphComponent, DownloadHelper, ENUM_ResponseType, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendSelectComponent, ExtendTextArea, GlobalSpinnerComponent, GridFilter, HTTPService, Height, LimitWordsPipe, LineGraphComponent, LoadingService, NoPermission, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, PagingData, PagingModel, PdfViewerComponent, RouteMonitorService, TableHeader, ThemeService, TokenStorage, TranslateKey, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, VscService, Width, WorkflowEditorComponent, XLSXHelper, authInterceptor };
+export { AnimatedDigitComponent, AppGlobals, AppStorage, AuthGuard, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CheckModel, CommonService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DoughnutGraphComponent, DownloadHelper, ENUM_ResponseType, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendSelectComponent, ExtendTextArea, GlobalSpinnerComponent, GridFilter, HTTPService, Height, LimitWordsPipe, LineGraphComponent, LoadingService, NoPermission, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, PagingData, PagingModel, PdfViewerComponent, RouteMonitorService, TableHeader, ThemeService, TokenStorage, TranslateKey, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, VscService, Width, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowEditorComponent, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
 //# sourceMappingURL=brggroup-share-lib.mjs.map