@brggroup/share-lib 0.0.38 → 0.0.39

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;
@@ -2853,6 +2855,7 @@ class WorkflowAction extends WF_TemplateStageAction {
     labelBack;
     points;
     isBackAction;
+    drawerPosition;
 }
 class WorkflowEditorComponent extends BaseComponent {
     //#region NGHIỆP VỤ
@@ -2875,7 +2878,7 @@ class WorkflowEditorComponent extends BaseComponent {
     hoverStage;
     selectedAction;
     selectedBackAction;
-    hoverEdge;
+    hoverAction;
     // vẽ đường liên kết mới
     connectingFrom;
     connectingPoints = [];
@@ -2918,11 +2921,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 +2976,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);
         });
@@ -3006,8 +3023,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;
@@ -3141,6 +3158,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 +3184,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 +3221,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 +3252,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;
@@ -3517,14 +3536,14 @@ class WorkflowEditorComponent extends BaseComponent {
         // console.log('onMouseEnterEdge', e);
         if (this.connectingFrom)
             return;
-        this.hoverEdge = e;
+        this.hoverAction = e;
         this.connectingPoints = e.points || [];
     }
     onMouseLeaveEdge(e) {
         // console.log('onEdgeLeave', e);
         if (this.connectingFrom)
             return;
-        this.hoverEdge = undefined;
+        this.hoverAction = undefined;
         this.connectingPoints = [];
     }
     edgeClickTimer = null;
@@ -4240,7 +4259,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.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, 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?.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]=\"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 [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)=\"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 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]=\"drawerTitleAction\"\n  nzTitle=\"ACTION\"\n  [nzPlacement]=\"selectedAction?.drawerPosition ? selectedAction?.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.drawerPosition == \"left\") {\n          <button nz-button nzSize=\"small\" nz-tooltip=\"To the right\" (click)=\"selectedAction.drawerPosition = 'right'\">\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          ACTION\n        } @else {\n          ACTION\n          <button nz-button nzSize=\"small\" nz-tooltip=\"To the left\" (click)=\"selectedAction.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=\"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 nz-flex [nzGap]=\"6\" [nzJustify]=\"selectedAction && selectedAction.drawerPosition == 'left' ? 'end' : 'start'\">\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 +4284,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.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, 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?.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]=\"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 [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)=\"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 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]=\"drawerTitleAction\"\n  nzTitle=\"ACTION\"\n  [nzPlacement]=\"selectedAction?.drawerPosition ? selectedAction?.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.drawerPosition == \"left\") {\n          <button nz-button nzSize=\"small\" nz-tooltip=\"To the right\" (click)=\"selectedAction.drawerPosition = 'right'\">\n            <nz-icon nzType=\"double-right\"></nz-icon>\n          </button>\n          ACTION\n        } @else {\n          ACTION\n          <button nz-button nzSize=\"small\" nz-tooltip=\"To the left\" (click)=\"selectedAction.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=\"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 nz-flex [nzGap]=\"6\" [nzJustify]=\"selectedAction && selectedAction.drawerPosition == 'left' ? 'end' : 'start'\">\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: [{