@brggroup/share-lib 0.0.80 → 0.0.82

package/fesm2022/brggroup-share-lib.mjs

@@ -544,6 +544,176 @@ class TokenStorage {
     }
 }
 
+class SessionManagerService {
+    zone = inject(NgZone);
+    idleTimer;
+    refreshTimer;
+    heartbeatTimer;
+    static IDLE_MIN = 15;
+    REFRESH_BEFORE = 120;
+    get IDLE_TIME() {
+        return (SessionManagerService.IDLE_MIN || 0) * 60 * 1000;
+    }
+    LEADER_KEY = 'APP_LEADER';
+    HEARTBEAT_KEY = 'APP_LEADER_HEARTBEAT';
+    channel = new BroadcastChannel('APP_SESSION');
+    tabId = crypto.randomUUID();
+    isLeader = false;
+    handlers;
+    /* ---------------- START ---------------- */
+    start(handlers) {
+        if (this.IDLE_TIME <= 0)
+            return;
+        console.log('IDLE_TIME: ', this.IDLE_TIME);
+        this.handlers = handlers;
+        this.listenActivity();
+        this.listenChannel();
+        this.updateActivity();
+        this.resetIdle();
+        this.electLeader();
+    }
+    stop() {
+        clearTimeout(this.idleTimer);
+        clearTimeout(this.refreshTimer);
+        clearInterval(this.heartbeatTimer);
+        this.channel.close();
+    }
+    /* ---------------- ACTIVITY ---------------- */
+    listenActivity() {
+        const events = ['mousemove', 'keydown', 'click', 'scroll'];
+        events.forEach((e) => {
+            window.addEventListener(e, this.onActivity, true);
+        });
+    }
+    onActivity = this.debounce(() => {
+        this.updateActivity();
+        this.resetIdle();
+        this.channel.postMessage({ type: 'activity' });
+    }, 1000);
+    updateActivity() {
+        localStorage.setItem('APP_LAST_ACTIVITY', Date.now().toString());
+    }
+    /* ---------------- IDLE ---------------- */
+    resetIdle() {
+        clearTimeout(this.idleTimer);
+        const last = Number(localStorage.getItem('APP_LAST_ACTIVITY') || Date.now());
+        const remain = this.IDLE_TIME - (Date.now() - last);
+        if (remain <= 0) {
+            this.logout();
+            return;
+        }
+        this.zone.runOutsideAngular(() => {
+            this.idleTimer = setTimeout(() => {
+                this.zone.run(() => this.logout());
+            }, remain);
+        });
+    }
+    /* ---------------- LEADER ---------------- */
+    electLeader() {
+        const leader = localStorage.getItem(this.LEADER_KEY);
+        if (!leader) {
+            this.becomeLeader();
+            return;
+        }
+        this.checkLeaderHeartbeat();
+    }
+    becomeLeader() {
+        console.log('Become leader', this.tabId);
+        this.isLeader = true;
+        localStorage.setItem(this.LEADER_KEY, this.tabId);
+        this.startHeartbeat();
+        this.scheduleRefresh();
+    }
+    startHeartbeat() {
+        this.heartbeatTimer = setInterval(() => {
+            localStorage.setItem(this.HEARTBEAT_KEY, Date.now().toString());
+        }, 2000);
+    }
+    checkLeaderHeartbeat() {
+        setTimeout(() => {
+            const beat = Number(localStorage.getItem(this.HEARTBEAT_KEY) || 0);
+            if (Date.now() - beat > 5000) {
+                this.becomeLeader();
+            }
+        }, 3000);
+    }
+    /* ---------------- REFRESH ---------------- */
+    scheduleRefresh() {
+        if (!this.isLeader)
+            return;
+        clearTimeout(this.refreshTimer);
+        const token = TokenStorage.getToken();
+        if (!token)
+            return;
+        const exp = this.parseJwt(token).exp * 1000;
+        const delay = exp - Date.now() - this.REFRESH_BEFORE * 1000;
+        if (delay <= 0) {
+            this.refreshToken();
+            return;
+        }
+        this.refreshTimer = setTimeout(() => {
+            this.refreshToken();
+        }, delay);
+    }
+    async refreshToken() {
+        if (!this.isLeader)
+            return;
+        try {
+            const res = await this.handlers.refreshToken();
+            if (res?.IsSuccess) {
+                this.channel.postMessage({ type: 'token-refresh' });
+                this.scheduleRefresh();
+            }
+            else {
+                this.logout();
+            }
+        }
+        catch {
+            this.logout();
+        }
+    }
+    /* ---------------- CHANNEL ---------------- */
+    listenChannel() {
+        this.channel.onmessage = (msg) => {
+            const type = msg.data?.type;
+            if (type === 'activity') {
+                this.resetIdle();
+            }
+            if (type === 'logout') {
+                this.handlers.logout();
+            }
+            if (type === 'token-refresh') {
+                this.scheduleRefresh();
+            }
+        };
+    }
+    /* ---------------- LOGOUT ---------------- */
+    logout() {
+        this.channel.postMessage({ type: 'logout' });
+        this.handlers.logout();
+    }
+    /* ---------------- UTILS ---------------- */
+    debounce(fn, delay) {
+        let timer;
+        return () => {
+            clearTimeout(timer);
+            timer = setTimeout(() => fn(), delay);
+        };
+    }
+    parseJwt(token) {
+        const payload = token.split('.')[1];
+        return JSON.parse(atob(payload));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SessionManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SessionManagerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: SessionManagerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 const URLs$4 = {
     login: '/api/Auth/Login',
     register: '/api/Auth/Register',
@@ -555,9 +725,15 @@ const URLs$4 = {
 class AuthService extends HTTPService {
     notiService = inject(NotiService);
     commonService = inject(CommonService);
-    ngZone = inject(NgZone);
     router = inject(Router);
     translate = inject(TranslateService);
+    sessionManager = inject(SessionManagerService);
+    /* ----------------------------------------
+        TOKEN
+    ---------------------------------------- */
+    getToken() {
+        return TokenStorage.getToken();
+    }
     async refreshToken() {
         const refreshToken = TokenStorage.getRftToken();
         if (!refreshToken)
@@ -569,24 +745,20 @@ class AuthService extends HTTPService {
                 TokenStorage.saveTokenRft(res.Data);
                 return res;
             }
-            else {
-                return null;
-            }
         }
         catch (err) {
-            console.log(err);
+            console.error(err);
         }
         return null;
     }
-    async pingAuth() {
-        try {
-            const res = await this.get(AppGlobals.apiEndpoint + URLs$4.pingAuth, true);
-            return res?.IsSuccess;
-        }
-        catch {
-            return false;
-        }
+    async sendRftToken(body) {
+        return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + '/api/Auth/RefreshToken', body, {
+            headers: new HttpHeaders().set('Content-Type', 'application/json'),
+        }));
     }
+    /* ----------------------------------------
+        LOGIN
+    ---------------------------------------- */
     async signIn(username, password, orgid, returnUrl) {
         try {
             const body = {
@@ -601,35 +773,61 @@ class AuthService extends HTTPService {
             }
             this.notiService.success('Đăng nhập thành công');
             TokenStorage.saveToken(res);
-            this.startWatching();
+            /* start session manager */
+            this.sessionManager.start({
+                refreshToken: () => this.refreshToken(),
+                logout: () => this.signOut(),
+            });
             if (returnUrl) {
                 this.router.navigateByUrl(returnUrl);
             }
+            return true;
         }
         catch (err) {
             this.notiService.handleError(err);
             return false;
         }
-        return true;
     }
     async sendSignIn(body) {
         return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + URLs$4.login, body, {
             headers: new HttpHeaders().set('Content-Type', 'application/json'),
         }));
     }
-    async sendRftToken(body) {
-        return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + '/api/Auth/RefreshToken', body, {
-            headers: new HttpHeaders().set('Content-Type', 'application/json'),
-        }));
+    /* ----------------------------------------
+        INIT SESSION (reload page)
+    ---------------------------------------- */
+    initSession() {
+        const token = TokenStorage.getToken();
+        if (token) {
+            this.sessionManager.start({ refreshToken: () => this.refreshToken(), logout: () => this.signOut() });
+        }
     }
+    /* ----------------------------------------
+        LOGOUT
+    ---------------------------------------- */
     signOut() {
         TokenStorage.clearToken();
-        this.stopWatching();
+        this.sessionManager.stop();
         const currentUrl = this.router.routerState.snapshot.url;
         this.router.navigate(['/login'], {
             queryParams: { returnUrl: currentUrl || '/' },
         });
     }
+    /* ----------------------------------------
+        AUTH CHECK
+    ---------------------------------------- */
+    async pingAuth() {
+        try {
+            const res = await this.get(AppGlobals.apiEndpoint + URLs$4.pingAuth, true);
+            return res?.IsSuccess;
+        }
+        catch {
+            return false;
+        }
+    }
+    /* ----------------------------------------
+        MENU
+    ---------------------------------------- */
     getUserMenu(headerMenuId) {
         let data = {
             SPN: `App_User_getUserMenu`,
@@ -656,12 +854,18 @@ class AuthService extends HTTPService {
             return true;
         }
     }
+    /* ----------------------------------------
+        PASSWORD
+    ---------------------------------------- */
     changePassword(data) {
         return this.postData(AppGlobals.apiEndpoint + URLs$4.changePassword, data);
     }
     setPass(data) {
         return this.postData(AppGlobals.apiEndpoint + URLs$4.setPass, data);
     }
+    /* ----------------------------------------
+        REGISTER
+    ---------------------------------------- */
     async signUp(d) {
         try {
             const res = await this.sendSignUp(d);
@@ -673,46 +877,16 @@ class AuthService extends HTTPService {
             this.router.navigateByUrl('/login');
         }
         catch (err) {
-            console.log(err);
+            console.error(err);
             this.notiService.handleError(err);
         }
     }
     async sendSignUp(d) {
         return this.postData(AppGlobals.apiEndpoint + URLs$4.register, d);
     }
-    idleTimer;
-    get idleTime() {
-        return (AppGlobals.idleTimeInMinutes || 0) * 60 * 1000;
-    }
-    startWatching() {
-        console.log(`-- start watching idle (${AppGlobals.idleTimeInMinutes} min(s) --`);
-        if (this.idleTime > 0) {
-            this.resetTimer();
-            window.addEventListener('mousemove', () => this.resetTimer());
-            window.addEventListener('keydown', () => this.resetTimer());
-            window.addEventListener('click', () => this.resetTimer());
-        }
-        else {
-            this.stopWatching();
-        }
-    }
-    resetTimer() {
-        if (this.idleTimer) {
-            clearTimeout(this.idleTimer);
-        }
-        this.ngZone.runOutsideAngular(() => {
-            this.idleTimer = setTimeout(() => {
-                this.ngZone.run(() => {
-                    console.log('-- idle logout --');
-                    this.signOut(); // auto logout
-                });
-            }, this.idleTime);
-        });
-    }
-    stopWatching() {
-        console.log('-- stop watching idle --');
-        clearTimeout(this.idleTimer);
-    }
+    /* ----------------------------------------
+        CHANGE ORG
+    ---------------------------------------- */
     async changeOrg(org) {
         try {
             const res = await this.sendChangeOrg(org.App_Org_Id);
@@ -5229,7 +5403,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", lstRole: "lstRole", lstEmailTemplate: "lstEmailTemplate" }, outputs: { onSave: "onSave", onDeleteStage: "onDeleteStage", onDeleteAction: "onDeleteAction", onDeleteRule: "onDeleteRule", onDeleteRuleLine: "onDeleteRuleLine" }, 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\r\n  #canvasRef\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n>\r\n  <!-- \r\n\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\" \r\n\r\n  [style.width.px]=\"CANVAS_WIDTH\"\r\n  [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n  style=\"width: 100%; height: calc(100vh - 120px)\"\r\n  \r\n  -->\r\n\r\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon>\r\n    </button>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n      <nz-icon nzType=\"info-circle\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon> T\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n      <nz-icon nzType=\"save\"></nz-icon>\r\n    </button>\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Move mode\"\r\n      (click)=\"isMoveMode = true\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Select mode\"\r\n      (click)=\"isMoveMode = false\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- UNDO / REDO -->\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"undoStack.length === 0\"\r\n      nz-tooltip=\"Undo\"\r\n      (click)=\"undo()\"\r\n    >\r\n      <nz-icon nzType=\"undo\"></nz-icon>\r\n    </button>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"redoStack.length === 0\"\r\n      nz-tooltip=\"Redo\"\r\n      (click)=\"redo()\"\r\n    >\r\n      <nz-icon nzType=\"redo\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- ALIGN -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <!-- DISTRIBUTE -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n      \u21C4\r\n    </button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- <div class=\"zoom-toolbar\">\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n    </div> -->\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g [attr.transform]=\"svgTransform\">\r\n        <!-- DEFS -->\r\n        <defs>\r\n          <!-- glow effect -->\r\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n            <feMerge>\r\n              <feMergeNode in=\"blur\" />\r\n              <feMergeNode in=\"SourceGraphic\" />\r\n            </feMerge>\r\n          </filter>\r\n\r\n          <!-- arrow markers -->\r\n          <marker\r\n            id=\"arrow-blue\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-blue-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n        </defs>\r\n\r\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n          <path\r\n            class=\"edge\"\r\n            [attr.id]=\"'edge-path-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-blue)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseenter)=\"onMouseEnterEdge(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- text b\u00E1m theo line -->\r\n          <!-- \r\n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text> \r\n          \r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text>\r\n          -->\r\n\r\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n          <path\r\n            class=\"edge red\"\r\n            [attr.id]=\"'edge-path-hover-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-red)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text>\r\n\r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text> -->\r\n\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- preview -->\r\n        <path\r\n          *ngIf=\"connectingFrom\"\r\n          class=\"edge\"\r\n          [attr.d]=\"buildPreviewPath()\"\r\n          stroke-dasharray=\"5,5\"\r\n          marker-end=\"url(#arrow-blue)\"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n\r\n    <div\r\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n      class=\"selection-box\"\r\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n    ></div>\r\n\r\n    <!-- lstStage -->\r\n    @for (n of lstStage; track $index) {\r\n      <!-- START NODE -->\r\n      @if (n.StageType === \"_start_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-start\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-right connector-start reverse\"\r\n              (click)=\"onClickConnector($event, n, 'right')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n      <!-- END NODE -->\r\n      @else if (n.StageType === \"_end_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-end\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-left connector-end reverse\"\r\n              (click)=\"onClickConnector($event, n, 'left')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      } @else {\r\n        <nz-card\r\n          class=\"workflow-node\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <div class=\"title\">{{ n.Code }}</div>\r\n\r\n          <div>{{ n.Name }}</div>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n    }\r\n\r\n    <!-- POINTS -->\r\n    @for (p of connectingPoints; track $index) {\r\n      @if (p != draggingPoint) {\r\n        <div\r\n          class=\"waypoint\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n        ></div>\r\n      } @else {\r\n        <div\r\n          class=\"waypoint dragging\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawTemplateTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"500\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"drawTemplateVisibel\"\r\n  [nzFooter]=\"footerTplTemplate\"\r\n  (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <extend-select\r\n      [label]=\"'Org'\"\r\n      [lstItem]=\"lstOrg\"\r\n      [valueField]=\"'App_Org_Id'\"\r\n      [displayFields]=\"['Name', 'Code']\"\r\n      [(_ngModel)]=\"template.App_Org_Id\"\r\n    ></extend-select>\r\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n    <extend-select\r\n      [label]=\"'Type'\"\r\n      [lstItem]=\"template.lstTemplateType\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.DocType\"\r\n    ></extend-select>\r\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n    <extend-select\r\n      [label]=\"'Print template'\"\r\n      [lstItem]=\"template.lstTemplatePrint\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.TemplatePrint\"\r\n    ></extend-select>\r\n\r\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n    <extend-checkbox [label]=\"'Use Allow back'\" [(_ngModel)]=\"template.editorOption.AllowbackInUse\"></extend-checkbox>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of getLstStage; track tag) {\r\n        <div nz-col>\r\n          <nz-tag (click)=\"hoverStage = tag\">\r\n            {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n          </nz-tag>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <box [height]=\"16\"></box>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of template.lstStageStatus; track tag) {\r\n        <div nz-col>\r\n          <nz-tag\r\n            [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\r\n            (nzOnClose)=\"handleCloseStageStatus(tag)\"\r\n          >\r\n            {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n          </nz-tag>\r\n        </div>\r\n      }\r\n\r\n      <div nz-col>\r\n        @if (!inputStageStatusVisible) {\r\n          <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\r\n            <nz-icon nzType=\"plus\" />\r\n            New Action type\r\n          </nz-tag>\r\n        } @else {\r\n          <input\r\n            #inputStageStatusElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Code\"\r\n            [(ngModel)]=\"inputStageStatusCode\"\r\n            (keydown.enter)=\"inputStageStatusNameElement.select()\"\r\n          />\r\n          <input\r\n            #inputStageStatusNameElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Name\"\r\n            [(ngModel)]=\"inputStageStatusName\"\r\n            (blur)=\"handleInputStageStatusConfirm()\"\r\n            (keydown.enter)=\"handleInputStageStatusConfirm()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <box [height]=\"16\"></box>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of template.lstActionType; track tag) {\r\n        <div nz-col>\r\n          <nz-tag\r\n            [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\r\n            (nzOnClose)=\"handleCloseActionType(tag)\"\r\n          >\r\n            {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n          </nz-tag>\r\n        </div>\r\n      }\r\n\r\n      <div nz-col>\r\n        @if (!inputActionTypeVisible) {\r\n          <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\r\n            <nz-icon nzType=\"plus\" />\r\n            New Action type\r\n          </nz-tag>\r\n        } @else {\r\n          <input\r\n            #inputActionTypeElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Code\"\r\n            [(ngModel)]=\"inputActionTypeCode\"\r\n            (keydown.enter)=\"inputActionTypeNameElement.select()\"\r\n          />\r\n          <input\r\n            #inputActionTypeNameElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Name\"\r\n            [(ngModel)]=\"inputActionTypeName\"\r\n            (blur)=\"handleInputActionTypeConfirm()\"\r\n            (keydown.enter)=\"handleInputActionTypeConfirm()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <box [height]=\"16\"></box>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of template.lstActionStatus; track tag) {\r\n        <div nz-col>\r\n          @if (template.editingActionStatus != tag) {\r\n            <nz-tag\r\n              [nzMode]=\"checkRemoveableActionStatus(tag.Code) ? 'closeable' : 'default'\"\r\n              (nzOnClose)=\"handleClose(tag.Code)\"\r\n              (click)=\"template.editingActionStatus = checkRemoveableActionStatus(tag.Code) ? tag : undefined\"\r\n            >\r\n              {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n            </nz-tag>\r\n          } @else {\r\n            <input\r\n              nz-input\r\n              nzSize=\"small\"\r\n              type=\"text\"\r\n              style=\"width: 150px\"\r\n              [appAutoFocus]=\"true\"\r\n              [(ngModel)]=\"tag.Code\"\r\n              (blur)=\"template.editingActionStatus = undefined\"\r\n              (keydown.enter)=\"template.editingActionStatus = undefined\"\r\n            />&nbsp;&nbsp;\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div nz-col>\r\n        @if (!inputVisible) {\r\n          <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\r\n            <nz-icon nzType=\"plus\" />\r\n            New Action status\r\n          </nz-tag>\r\n        } @else {\r\n          <input\r\n            #inputElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"+ New Action status\"\r\n            [(ngModel)]=\"inputValue\"\r\n            (blur)=\"handleInputConfirm()\"\r\n            (keydown.enter)=\"handleInputConfirm()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplTemplate>\r\n    <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\r\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer STAGE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleStage\"\r\n  [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n  [nzVisible]=\"!!selectedStage\"\r\n  [nzWidth]=\"'calc(50vw)'\"\r\n  [nzClosable]=\"false\"\r\n  [nzFooter]=\"footerTplNode\"\r\n  (nzOnClose)=\"selectedStage = undefined\"\r\n>\r\n  <ng-template #drawerTitleStage>\r\n    <div nz-row nzJustify=\"space-between\">\r\n      @if (selectedStage && selectedStage.editorOption) {\r\n        @if (selectedStage.editorOption.drawerPosition == \"left\") {\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the right\"\r\n            (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\r\n          >\r\n            <nz-icon nzType=\"double-right\"></nz-icon>\r\n          </button>\r\n          STAGE\r\n        } @else {\r\n          STAGE\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the left\"\r\n            (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\r\n          >\r\n            <nz-icon nzType=\"double-left\"></nz-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <ng-container *ngIf=\"selectedStage\">\r\n      <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\r\n        <label nz-radio nzValue=\"_start_\">UI start</label>\r\n        <label nz-radio nzValue=\"_end_\">UI end</label>\r\n        <label nz-radio nzValue=\"start\">START</label>\r\n        <label nz-radio nzValue=\"node\">NODE</label>\r\n        <label nz-radio nzValue=\"end\">END</label>\r\n      </nz-radio-group>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Code'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [required]=\"true\"\r\n          [(_ngModel)]=\"selectedStage.Code\"\r\n        ></extend-input>\r\n\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"16\"\r\n          [label]=\"'Name'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [required]=\"true\"\r\n          [(_ngModel)]=\"selectedStage.Name\"\r\n        ></extend-input>\r\n      </div>\r\n\r\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n        <extend-input-number\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Sequence'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [(_ngModel)]=\"selectedStage.SeqValue\"\r\n        ></extend-input-number>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"16\"\r\n          [label]=\"'Org implement'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"lstOrg\"\r\n          [valueField]=\"'App_Org_Id'\"\r\n          [displayFields]=\"['Name', 'Code']\"\r\n          [(_ngModel)]=\"selectedStage.App_Org_Id\"\r\n        ></extend-select>\r\n      </div>\r\n\r\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n        <extend-input-number\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Number Day'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberDay\"\r\n        ></extend-input-number>\r\n      </div>\r\n\r\n      @if (selectedStage.editorOption) {\r\n        @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\r\n          <extend-checkbox\r\n            [label]=\"'Reverse'\"\r\n            [labelSpan]=\"0\"\r\n            [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n          ></extend-checkbox>\r\n        }\r\n\r\n        <extend-checkbox\r\n          [label]=\"'Require user action'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n        <div nz-col>\r\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n            <nz-icon nzType=\"plus\"></nz-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <nz-table nzSize=\"small\" [nzData]=\"lstActionOfCurrentStage\" [nzShowPagination]=\"false\" [nzNoResult]=\"'&nbsp;'\">\r\n        <thead>\r\n          <tr [hidden]=\"true\">\r\n            <th nzWidth=\"40px\"></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (action of lstActionOfCurrentStage; track $index) {\r\n            <tr [class.text-bold]=\"action == hoverAction\" (click)=\"onclickaction(action)\">\r\n              <td style=\"border-bottom: solid 1px orange\">\r\n                ({{ $index + 1 }})\r\n                <nz-icon\r\n                  nzType=\"delete\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-warn cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); deleteAction(action)\"\r\n                ></nz-icon>\r\n              </td>\r\n              <td style=\"border-bottom: solid 1px orange\">\r\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n                  <div nz-col [nzSpan]=\"8\">\r\n                    <nz-form-item>\r\n                      <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                      <nz-form-control [nzSpan]=\"24\">\r\n                        <nz-input-group class=\"full-width\">\r\n                          <input\r\n                            nz-input\r\n                            [(ngModel)]=\"action.ActionStatus\"\r\n                            [nzAutocomplete]=\"auto\"\r\n                            (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                            (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                            (keyup.enter)=\"onenterAotu(action.ActionStatus)\"\r\n                            (blur)=\"onenterAotu(action.ActionStatus)\"\r\n                          />\r\n                          <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                            @for (option of lstActionStatusFiltered; track $index) {\r\n                              <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                                {{ option.Code }}\r\n                                <icon-delete\r\n                                  *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                                  style=\"float: right\"\r\n                                  [size]=\"12\"\r\n                                  (click)=\"handleClose(option.Code)\"\r\n                                ></icon-delete>\r\n                              </nz-auto-option>\r\n                            }\r\n                          </nz-autocomplete>\r\n                        </nz-input-group>\r\n                      </nz-form-control>\r\n                    </nz-form-item>\r\n                  </div>\r\n\r\n                  <extend-input\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Action text'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [(_ngModel)]=\"action.ActionText\"\r\n                    (_ngModelChange)=\"onchangeActionText(action)\"\r\n                  ></extend-input>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Action type'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"template.lstActionType\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.ActionType\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Stage status'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Next stage'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"getlstStage\"\r\n                    [valueField]=\"'WF_TemplateStage_Id'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\r\n                    (_ngModelChange)=\"onchangeNextStage(action)\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Next stage status'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.To_StageStatus\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>Role</div>\r\n                <div nz-row>\r\n                  <extend-select\r\n                    nz-col\r\n                    nzSpan=\"24\"\r\n                    [size]=\"'small'\"\r\n                    [lstItem]=\"lstRole\"\r\n                    [valueField]=\"'App_Role_Id'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstRoleId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>Email action</div>\r\n                <div nz-row>\r\n                  <extend-select\r\n                    nz-col\r\n                    nzSpan=\"24\"\r\n                    [size]=\"'small'\"\r\n                    [lstItem]=\"lstEmailAction\"\r\n                    [valueField]=\"'ID'\"\r\n                    [displayField]=\"'Name'\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstEmailActionId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>Email template</div>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>\r\n                  <div nz-col nzSpan=\"1\"></div>\r\n                  <div nz-col nzSpan=\"23\" class=\"form-item-no-bottom\" style=\"font-weight: normal\">\r\n                    @for (actionRef of lstActionRefOf(action); track $index) {\r\n                      <div nz-row>\r\n                        <extend-select\r\n                          nz-col\r\n                          nzSpan=\"24\"\r\n                          [labelSpan]=\"12\"\r\n                          [size]=\"'small'\"\r\n                          [label]=\"emailActionText(actionRef.To_WF_TemplateStageAction_Id)\"\r\n                          [lstItem]=\"lstEmailTemplate\"\r\n                          [valueField]=\"'Code'\"\r\n                          [displayFields]=\"['Code', 'Name']\"\r\n                          [(_ngModel)]=\"actionRef.TemplateMail\"\r\n                          (_ngModelChange)=\"xxx(actionRef)\"\r\n                        ></extend-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row [nzGutter]=\"8\">\r\n                  Action rule\r\n                  <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"actionRuleModalVisible = true\">\r\n                    <nz-icon nzType=\"export\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                  </button>\r\n                  <button\r\n                    *ngIf=\"action.WF_TransitionsRule_Id\"\r\n                    nz-button\r\n                    nzType=\"text\"\r\n                    nzSize=\"small\"\r\n                    (click)=\"deleteActionRule(action)\"\r\n                  >\r\n                    <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n                  </button>\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplNode>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"\r\n        selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n          ? 'start'\r\n          : 'end'\r\n      \"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n      <button\r\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n        nz-button\r\n        nzDanger\r\n        (click)=\"deleteStage()\"\r\n      >\r\n        Delete\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleAction\"\r\n  nzTitle=\"ACTION\"\r\n  [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n  [nzClosable]=\"false\"\r\n  [nzWidth]=\"750\"\r\n  [nzVisible]=\"!!selectedAction\"\r\n  [nzFooter]=\"footerTplAction\"\r\n  (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n  <ng-template #drawerTitleAction>\r\n    <div nz-row nzJustify=\"space-between\">\r\n      @if (selectedAction && selectedAction.editorOption) {\r\n        @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the right\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n          >\r\n            <nz-icon nzType=\"double-right\"></nz-icon>\r\n          </button>\r\n          ACTION\r\n        } @else {\r\n          ACTION\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the left\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n          >\r\n            <nz-icon nzType=\"double-left\"></nz-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <ng-container *ngIf=\"selectedAction\">\r\n      <div>\r\n        <strong\r\n          >{{ selectedAction.getFromStageCode(lstStage) }} -> {{ selectedAction.getToStageCode(lstStage) }}</strong\r\n        >\r\n      </div>\r\n      <div>{{ selectedAction.getFromStageName(lstStage) }} -> {{ selectedAction.getToStageName(lstStage) }}</div>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n        <div nz-col [nzSpan]=\"8\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n            <nz-form-control [nzSpan]=\"24\">\r\n              <nz-input-group class=\"full-width\">\r\n                <input\r\n                  nz-input\r\n                  [(ngModel)]=\"selectedAction.ActionStatus\"\r\n                  [nzAutocomplete]=\"auto\"\r\n                  (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                  (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                  (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                  (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                />\r\n                <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                  @for (option of lstActionStatusFiltered; track $index) {\r\n                    <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                      {{ option.Code }}\r\n                      <icon-delete\r\n                        *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                        style=\"float: right\"\r\n                        [size]=\"12\"\r\n                        (click)=\"handleClose(option.Code)\"\r\n                      ></icon-delete>\r\n                    </nz-auto-option>\r\n                  }\r\n                </nz-autocomplete>\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </div>\r\n\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Action text'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [(_ngModel)]=\"selectedAction.ActionText\"\r\n          (_ngModelChange)=\"onchangeActionText(selectedAction)\"\r\n        ></extend-input>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Action type'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"template.lstActionType\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.ActionType\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Stage status'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.StageStatus\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"lstStage\"\r\n          [valueField]=\"'WF_TemplateStage_Id'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage status'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n        ></extend-select>\r\n      </div>\r\n\r\n      <!-- <box [height]=\"16\"></box> -->\r\n      <nz-divider></nz-divider>\r\n\r\n      @if (template.editorOption.AllowbackInUse) {\r\n        <extend-checkbox\r\n          [label]=\"'Allow back'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedAction.allowBack\"\r\n          (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      @if (selectedAction.allowBack) {\r\n        <div>\r\n          <strong\r\n            >{{ selectedAction.getToStageCode(lstStage) }} -> {{ selectedAction.getFromStageCode(lstStage) }}</strong\r\n          >\r\n        </div>\r\n        <div>{{ selectedAction.getToStageName(lstStage) }} -> {{ selectedAction.getFromStageName(lstStage) }}</div>\r\n\r\n        @if (selectedBackAction) {\r\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n            <div nz-col [nzSpan]=\"8\">\r\n              <nz-form-item>\r\n                <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                <nz-form-control [nzSpan]=\"24\">\r\n                  <nz-input-group class=\"full-width\">\r\n                    <input\r\n                      nz-input\r\n                      [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n                      [nzAutocomplete]=\"auto\"\r\n                      (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                      (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                      (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                      (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                    />\r\n                    <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                      @for (option of lstActionStatusFiltered; track $index) {\r\n                        <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                          {{ option.Code }}\r\n                          <icon-delete\r\n                            *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                            style=\"float: right\"\r\n                            [size]=\"12\"\r\n                            (click)=\"handleClose(option.Code)\"\r\n                          ></icon-delete>\r\n                        </nz-auto-option>\r\n                      }\r\n                    </nz-autocomplete>\r\n                  </nz-input-group>\r\n                </nz-form-control>\r\n              </nz-form-item>\r\n            </div>\r\n\r\n            <extend-input\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Action text'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [(_ngModel)]=\"selectedBackAction.ActionText\"\r\n              (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\r\n            ></extend-input>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Action type'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"template.lstActionType\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Stage status'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Next stage'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"lstStage\"\r\n              [valueField]=\"'WF_TemplateStage_Id'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\r\n              (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Next stage status'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.To_StageStatus\"\r\n            ></extend-select>\r\n          </div>\r\n        }\r\n      }\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #footerTplAction>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n      <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawSettingTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"settingVisible\"\r\n  (nzOnClose)=\"settingVisible = false\"\r\n>\r\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <div class=\"form-item-no-bottom\">\r\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </div>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawInfoTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"infoVisible\"\r\n  (nzOnClose)=\"infoVisible = false\"\r\n>\r\n  <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n    <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n    <p>\r\n      3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n      <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n      nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n      c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n      \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n    </p>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- action rule modal -->\r\n<nz-modal\r\n  [(nzVisible)]=\"actionRuleModalVisible\"\r\n  [nzMaskClosable]=\"false\"\r\n  [nzClosable]=\"false\"\r\n  [nzKeyboard]=\"true\"\r\n  [nzWidth]=\"'50vw'\"\r\n>\r\n  <ng-container *nzModalTitle>\r\n    ACTION RULE: [{{ selectedStage?.Code }}] {{ selectedStage?.Name }} > [{{ hoverAction?.ActionStatus }}]\r\n    {{ hoverAction?.ActionText }}\r\n  </ng-container>\r\n  <ng-container *nzModalContent>\r\n    @if (hoverAction && hoverAction.actionRule) {\r\n      <div nz-row [nzGutter]=\"32\">\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Code'\" [(_ngModel)]=\"hoverAction.actionRule.Code\"></extend-input>\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Name'\" [(_ngModel)]=\"hoverAction.actionRule.Name\"></extend-input>\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Note'\" [(_ngModel)]=\"hoverAction.actionRule.Note\"></extend-input>\r\n        <extend-checkbox\r\n          nz-col\r\n          nzSpan=\"12\"\r\n          [label]=\"'IsActive'\"\r\n          [(_ngModel)]=\"hoverAction.actionRule.IsActive\"\r\n        ></extend-checkbox>\r\n      </div>\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <div nz-col nzSpan=\"24\">\r\n          <nz-table nzSize=\"small\" [nzData]=\"hoverAction.actionRule.lstLine\" [nzShowPagination]=\"false\">\r\n            <thead>\r\n              <tr>\r\n                <th [nzWidth]=\"'50px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n                <th [nzWidth]=\"'25%'\">Template</th>\r\n                <th [nzWidth]=\"'25%'\">Template stage</th>\r\n                <th [nzWidth]=\"'25%'\">Template action</th>\r\n                <th [nzWidth]=\"'50px'\">IsActive</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (item of hoverAction.actionRule.lstLine; track $index) {\r\n                <tr>\r\n                  <td><icon-delete (click)=\"deleteActionRuleLine(hoverAction.actionRule, item)\"></icon-delete></td>\r\n                  <td>\r\n                    <extend-select\r\n                      #xxx\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstTemplateForRule(item)\"\r\n                      [valueField]=\"'WF_Template_Id'\"\r\n                      [displayFields]=\"['Code', 'Name']\"\r\n                      [(_ngModel)]=\"item.WF_Template_Id\"\r\n                      (_ngModelChange)=\"item.WF_TemplateStage_Id = 0; item.WF_TemplateStageAction_Id = 0\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      #yyy\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstStageForRule(xxx._ngModel)\"\r\n                      [valueField]=\"'WF_TemplateStage_Id'\"\r\n                      [displayFields]=\"['Code', 'Name']\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStage_Id\"\r\n                      (_ngModelChange)=\"item.WF_TemplateStageAction_Id = 0\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstActionForRule(yyy._ngModel)\"\r\n                      [valueField]=\"'WF_TemplateStageAction_Id'\"\r\n                      [displayFields]=\"['ActionStatus', 'ActionText']\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td class=\"text-center\">\r\n                    <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </nz-table>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n  <ng-container *nzModalFooter>\r\n    <button nz-button nzType=\"primary\" (click)=\"actionRuleModalVisible = false\">OK</button>\r\n  </ng-container>\r\n</nz-modal>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;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:100%;height:100%}.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.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.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:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;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}::ng-deep .minimap{position:fixed;width:180px;height:125px;top:60px;right:15px;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: i1$2.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", "labelFlex", "inputFlex", "allowClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "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", "labelFlex", "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", "labelFlex", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "minRows", "maxRows", "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: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { 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", "labelFlex", "inputFlex", "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"] }, { kind: "directive", type: AutoFocusDirective, selector: "[appAutoFocus]", inputs: ["appAutoFocus"] }, { kind: "ngmodule", type: NzAutocompleteModule }, { kind: "component", type: i17.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i17.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i17.NzAutocompleteTriggerDirective, selector: "input[nzAutocomplete], textarea[nzAutocomplete]", inputs: ["nzAutocomplete"], exportAs: ["nzAutocompleteTrigger"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "directive", type: NzModalTitleDirective, selector: "[nzModalTitle]", exportAs: ["nzModalTitle"] }, { kind: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "directive", type: NzModalFooterDirective, selector: "[nzModalFooter]", exportAs: ["nzModalFooter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: WorkflowEditorComponent, isStandalone: true, selector: "app-workflow-editor", inputs: { lstOrg: "lstOrg", lstRole: "lstRole", lstEmailTemplate: "lstEmailTemplate" }, outputs: { onSave: "onSave", onDeleteStage: "onDeleteStage", onDeleteAction: "onDeleteAction", onDeleteRule: "onDeleteRule", onDeleteRuleLine: "onDeleteRuleLine" }, 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\r\n  #canvasRef\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n>\r\n  <!-- \r\n\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\" \r\n\r\n  [style.width.px]=\"CANVAS_WIDTH\"\r\n  [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n  style=\"width: 100%; height: calc(100vh - 120px)\"\r\n  \r\n  -->\r\n\r\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon>\r\n    </button>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n      <nz-icon nzType=\"info-circle\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon> T\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n      <nz-icon nzType=\"save\"></nz-icon>\r\n    </button>\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Move mode\"\r\n      (click)=\"isMoveMode = true\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Select mode\"\r\n      (click)=\"isMoveMode = false\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- UNDO / REDO -->\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"undoStack.length === 0\"\r\n      nz-tooltip=\"Undo\"\r\n      (click)=\"undo()\"\r\n    >\r\n      <nz-icon nzType=\"undo\"></nz-icon>\r\n    </button>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"redoStack.length === 0\"\r\n      nz-tooltip=\"Redo\"\r\n      (click)=\"redo()\"\r\n    >\r\n      <nz-icon nzType=\"redo\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- ALIGN -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <!-- DISTRIBUTE -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n      \u21C4\r\n    </button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- <div class=\"zoom-toolbar\">\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n    </div> -->\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g [attr.transform]=\"svgTransform\">\r\n        <!-- DEFS -->\r\n        <defs>\r\n          <!-- glow effect -->\r\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n            <feMerge>\r\n              <feMergeNode in=\"blur\" />\r\n              <feMergeNode in=\"SourceGraphic\" />\r\n            </feMerge>\r\n          </filter>\r\n\r\n          <!-- arrow markers -->\r\n          <marker\r\n            id=\"arrow-blue\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-blue-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n        </defs>\r\n\r\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n          <path\r\n            class=\"edge\"\r\n            [attr.id]=\"'edge-path-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-blue)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseenter)=\"onMouseEnterEdge(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- text b\u00E1m theo line -->\r\n          <!-- \r\n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text> \r\n          \r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text>\r\n          -->\r\n\r\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n          <path\r\n            class=\"edge red\"\r\n            [attr.id]=\"'edge-path-hover-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-red)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text>\r\n\r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text> -->\r\n\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- preview -->\r\n        <path\r\n          *ngIf=\"connectingFrom\"\r\n          class=\"edge\"\r\n          [attr.d]=\"buildPreviewPath()\"\r\n          stroke-dasharray=\"5,5\"\r\n          marker-end=\"url(#arrow-blue)\"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n\r\n    <div\r\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n      class=\"selection-box\"\r\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n    ></div>\r\n\r\n    <!-- lstStage -->\r\n    @for (n of lstStage; track $index) {\r\n      <!-- START NODE -->\r\n      @if (n.StageType === \"_start_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-start\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-right connector-start reverse\"\r\n              (click)=\"onClickConnector($event, n, 'right')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n      <!-- END NODE -->\r\n      @else if (n.StageType === \"_end_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-end\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-left connector-end reverse\"\r\n              (click)=\"onClickConnector($event, n, 'left')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      } @else {\r\n        <nz-card\r\n          class=\"workflow-node\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <div class=\"title\">{{ n.Code }}</div>\r\n\r\n          <div>{{ n.Name }}</div>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n    }\r\n\r\n    <!-- POINTS -->\r\n    @for (p of connectingPoints; track $index) {\r\n      @if (p != draggingPoint) {\r\n        <div\r\n          class=\"waypoint\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n        ></div>\r\n      } @else {\r\n        <div\r\n          class=\"waypoint dragging\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawTemplateTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"500\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"drawTemplateVisibel\"\r\n  [nzFooter]=\"footerTplTemplate\"\r\n  (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <extend-select\r\n      [label]=\"'Org'\"\r\n      [lstItem]=\"lstOrg\"\r\n      [valueField]=\"'App_Org_Id'\"\r\n      [displayFields]=\"['Name', 'Code']\"\r\n      [(_ngModel)]=\"template.App_Org_Id\"\r\n    ></extend-select>\r\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n    <extend-select\r\n      [label]=\"'Type'\"\r\n      [lstItem]=\"template.lstTemplateType\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.DocType\"\r\n    ></extend-select>\r\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n    <extend-select\r\n      [label]=\"'Print template'\"\r\n      [lstItem]=\"template.lstTemplatePrint\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.TemplatePrint\"\r\n    ></extend-select>\r\n\r\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n    <extend-checkbox [label]=\"'Use Allow back'\" [(_ngModel)]=\"template.editorOption.AllowbackInUse\"></extend-checkbox>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of getLstStage; track tag) {\r\n        <div nz-col>\r\n          <nz-tag (click)=\"hoverStage = tag\">\r\n            {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n          </nz-tag>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <box [height]=\"16\"></box>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of template.lstStageStatus; track tag) {\r\n        <div nz-col>\r\n          <nz-tag\r\n            [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\r\n            (nzOnClose)=\"handleCloseStageStatus(tag)\"\r\n          >\r\n            {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n          </nz-tag>\r\n        </div>\r\n      }\r\n\r\n      <div nz-col>\r\n        @if (!inputStageStatusVisible) {\r\n          <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\r\n            <nz-icon nzType=\"plus\" />\r\n            New Action type\r\n          </nz-tag>\r\n        } @else {\r\n          <input\r\n            #inputStageStatusElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Code\"\r\n            [(ngModel)]=\"inputStageStatusCode\"\r\n            (keydown.enter)=\"inputStageStatusNameElement.select()\"\r\n          />\r\n          <input\r\n            #inputStageStatusNameElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Name\"\r\n            [(ngModel)]=\"inputStageStatusName\"\r\n            (blur)=\"handleInputStageStatusConfirm()\"\r\n            (keydown.enter)=\"handleInputStageStatusConfirm()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <box [height]=\"16\"></box>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of template.lstActionType; track tag) {\r\n        <div nz-col>\r\n          <nz-tag\r\n            [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\r\n            (nzOnClose)=\"handleCloseActionType(tag)\"\r\n          >\r\n            {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n          </nz-tag>\r\n        </div>\r\n      }\r\n\r\n      <div nz-col>\r\n        @if (!inputActionTypeVisible) {\r\n          <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\r\n            <nz-icon nzType=\"plus\" />\r\n            New Action type\r\n          </nz-tag>\r\n        } @else {\r\n          <input\r\n            #inputActionTypeElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Code\"\r\n            [(ngModel)]=\"inputActionTypeCode\"\r\n            (keydown.enter)=\"inputActionTypeNameElement.select()\"\r\n          />\r\n          <input\r\n            #inputActionTypeNameElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Name\"\r\n            [(ngModel)]=\"inputActionTypeName\"\r\n            (blur)=\"handleInputActionTypeConfirm()\"\r\n            (keydown.enter)=\"handleInputActionTypeConfirm()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <box [height]=\"16\"></box>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of template.lstActionStatus; track tag) {\r\n        <div nz-col>\r\n          @if (template.editingActionStatus != tag) {\r\n            <nz-tag\r\n              [nzMode]=\"checkRemoveableActionStatus(tag.Code) ? 'closeable' : 'default'\"\r\n              (nzOnClose)=\"handleClose(tag.Code)\"\r\n              (click)=\"template.editingActionStatus = checkRemoveableActionStatus(tag.Code) ? tag : undefined\"\r\n            >\r\n              {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n            </nz-tag>\r\n          } @else {\r\n            <input\r\n              nz-input\r\n              nzSize=\"small\"\r\n              type=\"text\"\r\n              style=\"width: 150px\"\r\n              [appAutoFocus]=\"true\"\r\n              [(ngModel)]=\"tag.Code\"\r\n              (blur)=\"template.editingActionStatus = undefined\"\r\n              (keydown.enter)=\"template.editingActionStatus = undefined\"\r\n            />&nbsp;&nbsp;\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div nz-col>\r\n        @if (!inputVisible) {\r\n          <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\r\n            <nz-icon nzType=\"plus\" />\r\n            New Action status\r\n          </nz-tag>\r\n        } @else {\r\n          <input\r\n            #inputElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"+ New Action status\"\r\n            [(ngModel)]=\"inputValue\"\r\n            (blur)=\"handleInputConfirm()\"\r\n            (keydown.enter)=\"handleInputConfirm()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplTemplate>\r\n    <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\r\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer STAGE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleStage\"\r\n  [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n  [nzVisible]=\"!!selectedStage\"\r\n  [nzWidth]=\"'calc(50vw)'\"\r\n  [nzClosable]=\"false\"\r\n  [nzFooter]=\"footerTplNode\"\r\n  (nzOnClose)=\"selectedStage = undefined\"\r\n>\r\n  <ng-template #drawerTitleStage>\r\n    <div nz-row nzJustify=\"space-between\">\r\n      @if (selectedStage && selectedStage.editorOption) {\r\n        @if (selectedStage.editorOption.drawerPosition == \"left\") {\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the right\"\r\n            (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\r\n          >\r\n            <nz-icon nzType=\"double-right\"></nz-icon>\r\n          </button>\r\n          STAGE\r\n        } @else {\r\n          STAGE\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the left\"\r\n            (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\r\n          >\r\n            <nz-icon nzType=\"double-left\"></nz-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <ng-container *ngIf=\"selectedStage\">\r\n      <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\r\n        <label nz-radio nzValue=\"_start_\">UI start</label>\r\n        <label nz-radio nzValue=\"_end_\">UI end</label>\r\n        <label nz-radio nzValue=\"start\">START</label>\r\n        <label nz-radio nzValue=\"node\">NODE</label>\r\n        <label nz-radio nzValue=\"end\">END</label>\r\n      </nz-radio-group>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Code'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [required]=\"true\"\r\n          [(_ngModel)]=\"selectedStage.Code\"\r\n        ></extend-input>\r\n\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"16\"\r\n          [label]=\"'Name'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [required]=\"true\"\r\n          [(_ngModel)]=\"selectedStage.Name\"\r\n        ></extend-input>\r\n      </div>\r\n\r\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n        <extend-input-number\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Sequence'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [(_ngModel)]=\"selectedStage.SeqValue\"\r\n        ></extend-input-number>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"16\"\r\n          [label]=\"'Org implement'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"lstOrg\"\r\n          [valueField]=\"'App_Org_Id'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedStage.App_Org_Id\"\r\n        ></extend-select>\r\n      </div>\r\n\r\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n        <extend-input-number\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Number Day'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberDay\"\r\n        ></extend-input-number>\r\n      </div>\r\n\r\n      @if (selectedStage.editorOption) {\r\n        @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\r\n          <extend-checkbox\r\n            [label]=\"'Reverse'\"\r\n            [labelSpan]=\"0\"\r\n            [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n          ></extend-checkbox>\r\n        }\r\n\r\n        <extend-checkbox\r\n          [label]=\"'Require user action'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n        <div nz-col>\r\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n            <nz-icon nzType=\"plus\"></nz-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <nz-table nzSize=\"small\" [nzData]=\"lstActionOfCurrentStage\" [nzShowPagination]=\"false\" [nzNoResult]=\"'&nbsp;'\">\r\n        <thead>\r\n          <tr [hidden]=\"true\">\r\n            <th nzWidth=\"40px\"></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (action of lstActionOfCurrentStage; track $index) {\r\n            <tr [class.text-bold]=\"action == hoverAction\" (click)=\"onclickaction(action)\">\r\n              <td style=\"border-bottom: solid 1px orange\">\r\n                ({{ $index + 1 }})\r\n                <nz-icon\r\n                  nzType=\"delete\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-warn cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); deleteAction(action)\"\r\n                ></nz-icon>\r\n              </td>\r\n              <td style=\"border-bottom: solid 1px orange\">\r\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n                  <div nz-col [nzSpan]=\"8\">\r\n                    <nz-form-item>\r\n                      <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                      <nz-form-control [nzSpan]=\"24\">\r\n                        <nz-input-group class=\"full-width\">\r\n                          <input\r\n                            nz-input\r\n                            [(ngModel)]=\"action.ActionStatus\"\r\n                            [nzAutocomplete]=\"auto\"\r\n                            (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                            (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                            (keyup.enter)=\"onenterAotu(action.ActionStatus)\"\r\n                            (blur)=\"onenterAotu(action.ActionStatus)\"\r\n                          />\r\n                          <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                            @for (option of lstActionStatusFiltered; track $index) {\r\n                              <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                                {{ option.Code }}\r\n                                <icon-delete\r\n                                  *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                                  style=\"float: right\"\r\n                                  [size]=\"12\"\r\n                                  (click)=\"handleClose(option.Code)\"\r\n                                ></icon-delete>\r\n                              </nz-auto-option>\r\n                            }\r\n                          </nz-autocomplete>\r\n                        </nz-input-group>\r\n                      </nz-form-control>\r\n                    </nz-form-item>\r\n                  </div>\r\n\r\n                  <extend-input\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Action text'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [(_ngModel)]=\"action.ActionText\"\r\n                    (_ngModelChange)=\"onchangeActionText(action)\"\r\n                  ></extend-input>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Action type'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"template.lstActionType\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.ActionType\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Stage status'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Next stage'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"getlstStage\"\r\n                    [valueField]=\"'WF_TemplateStage_Id'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\r\n                    (_ngModelChange)=\"onchangeNextStage(action)\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Next stage status'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.To_StageStatus\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>Role</div>\r\n                <div nz-row>\r\n                  <extend-select\r\n                    nz-col\r\n                    nzSpan=\"24\"\r\n                    [size]=\"'small'\"\r\n                    [lstItem]=\"lstRole\"\r\n                    [valueField]=\"'App_Role_Id'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstRoleId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>Email action</div>\r\n                <div nz-row>\r\n                  <extend-select\r\n                    nz-col\r\n                    nzSpan=\"24\"\r\n                    [size]=\"'small'\"\r\n                    [lstItem]=\"lstEmailAction\"\r\n                    [valueField]=\"'ID'\"\r\n                    [displayField]=\"'Name'\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstEmailActionId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>Email template</div>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>\r\n                  <div nz-col nzSpan=\"1\"></div>\r\n                  <div nz-col nzSpan=\"23\" class=\"form-item-no-bottom\" style=\"font-weight: normal\">\r\n                    @for (actionRef of lstActionRefOf(action); track $index) {\r\n                      <div nz-row>\r\n                        <extend-select\r\n                          nz-col\r\n                          nzSpan=\"24\"\r\n                          [labelSpan]=\"12\"\r\n                          [size]=\"'small'\"\r\n                          [label]=\"emailActionText(actionRef.To_WF_TemplateStageAction_Id)\"\r\n                          [lstItem]=\"lstEmailTemplate\"\r\n                          [valueField]=\"'Code'\"\r\n                          [displayFields]=\"['Code', 'Name']\"\r\n                          [(_ngModel)]=\"actionRef.TemplateMail\"\r\n                          (_ngModelChange)=\"xxx(actionRef)\"\r\n                        ></extend-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row [nzGutter]=\"8\">\r\n                  Action rule\r\n                  <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"actionRuleModalVisible = true\">\r\n                    <nz-icon nzType=\"export\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                  </button>\r\n                  <button\r\n                    *ngIf=\"action.WF_TransitionsRule_Id\"\r\n                    nz-button\r\n                    nzType=\"text\"\r\n                    nzSize=\"small\"\r\n                    (click)=\"deleteActionRule(action)\"\r\n                  >\r\n                    <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n                  </button>\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplNode>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"\r\n        selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n          ? 'start'\r\n          : 'end'\r\n      \"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n      <button\r\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n        nz-button\r\n        nzDanger\r\n        (click)=\"deleteStage()\"\r\n      >\r\n        Delete\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleAction\"\r\n  nzTitle=\"ACTION\"\r\n  [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n  [nzClosable]=\"false\"\r\n  [nzWidth]=\"750\"\r\n  [nzVisible]=\"!!selectedAction\"\r\n  [nzFooter]=\"footerTplAction\"\r\n  (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n  <ng-template #drawerTitleAction>\r\n    <div nz-row nzJustify=\"space-between\">\r\n      @if (selectedAction && selectedAction.editorOption) {\r\n        @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the right\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n          >\r\n            <nz-icon nzType=\"double-right\"></nz-icon>\r\n          </button>\r\n          ACTION\r\n        } @else {\r\n          ACTION\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the left\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n          >\r\n            <nz-icon nzType=\"double-left\"></nz-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <ng-container *ngIf=\"selectedAction\">\r\n      <div>\r\n        <strong\r\n          >{{ selectedAction.getFromStageCode(lstStage) }} -> {{ selectedAction.getToStageCode(lstStage) }}</strong\r\n        >\r\n      </div>\r\n      <div>{{ selectedAction.getFromStageName(lstStage) }} -> {{ selectedAction.getToStageName(lstStage) }}</div>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n        <div nz-col [nzSpan]=\"8\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n            <nz-form-control [nzSpan]=\"24\">\r\n              <nz-input-group class=\"full-width\">\r\n                <input\r\n                  nz-input\r\n                  [(ngModel)]=\"selectedAction.ActionStatus\"\r\n                  [nzAutocomplete]=\"auto\"\r\n                  (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                  (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                  (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                  (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                />\r\n                <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                  @for (option of lstActionStatusFiltered; track $index) {\r\n                    <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                      {{ option.Code }}\r\n                      <icon-delete\r\n                        *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                        style=\"float: right\"\r\n                        [size]=\"12\"\r\n                        (click)=\"handleClose(option.Code)\"\r\n                      ></icon-delete>\r\n                    </nz-auto-option>\r\n                  }\r\n                </nz-autocomplete>\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </div>\r\n\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Action text'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [(_ngModel)]=\"selectedAction.ActionText\"\r\n          (_ngModelChange)=\"onchangeActionText(selectedAction)\"\r\n        ></extend-input>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Action type'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"template.lstActionType\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.ActionType\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Stage status'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.StageStatus\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"lstStage\"\r\n          [valueField]=\"'WF_TemplateStage_Id'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage status'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n        ></extend-select>\r\n      </div>\r\n\r\n      <!-- <box [height]=\"16\"></box> -->\r\n      <nz-divider></nz-divider>\r\n\r\n      @if (template.editorOption.AllowbackInUse) {\r\n        <extend-checkbox\r\n          [label]=\"'Allow back'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedAction.allowBack\"\r\n          (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      @if (selectedAction.allowBack) {\r\n        <div>\r\n          <strong\r\n            >{{ selectedAction.getToStageCode(lstStage) }} -> {{ selectedAction.getFromStageCode(lstStage) }}</strong\r\n          >\r\n        </div>\r\n        <div>{{ selectedAction.getToStageName(lstStage) }} -> {{ selectedAction.getFromStageName(lstStage) }}</div>\r\n\r\n        @if (selectedBackAction) {\r\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n            <div nz-col [nzSpan]=\"8\">\r\n              <nz-form-item>\r\n                <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                <nz-form-control [nzSpan]=\"24\">\r\n                  <nz-input-group class=\"full-width\">\r\n                    <input\r\n                      nz-input\r\n                      [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n                      [nzAutocomplete]=\"auto\"\r\n                      (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                      (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                      (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                      (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                    />\r\n                    <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                      @for (option of lstActionStatusFiltered; track $index) {\r\n                        <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                          {{ option.Code }}\r\n                          <icon-delete\r\n                            *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                            style=\"float: right\"\r\n                            [size]=\"12\"\r\n                            (click)=\"handleClose(option.Code)\"\r\n                          ></icon-delete>\r\n                        </nz-auto-option>\r\n                      }\r\n                    </nz-autocomplete>\r\n                  </nz-input-group>\r\n                </nz-form-control>\r\n              </nz-form-item>\r\n            </div>\r\n\r\n            <extend-input\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Action text'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [(_ngModel)]=\"selectedBackAction.ActionText\"\r\n              (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\r\n            ></extend-input>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Action type'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"template.lstActionType\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Stage status'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Next stage'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"lstStage\"\r\n              [valueField]=\"'WF_TemplateStage_Id'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\r\n              (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Next stage status'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.To_StageStatus\"\r\n            ></extend-select>\r\n          </div>\r\n        }\r\n      }\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #footerTplAction>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n      <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawSettingTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"settingVisible\"\r\n  (nzOnClose)=\"settingVisible = false\"\r\n>\r\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <div class=\"form-item-no-bottom\">\r\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </div>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawInfoTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"infoVisible\"\r\n  (nzOnClose)=\"infoVisible = false\"\r\n>\r\n  <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n    <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n    <p>\r\n      3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n      <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n      nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n      c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n      \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n    </p>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- action rule modal -->\r\n<nz-modal\r\n  [(nzVisible)]=\"actionRuleModalVisible\"\r\n  [nzMaskClosable]=\"false\"\r\n  [nzClosable]=\"false\"\r\n  [nzKeyboard]=\"true\"\r\n  [nzWidth]=\"'50vw'\"\r\n>\r\n  <ng-container *nzModalTitle>\r\n    ACTION RULE: [{{ selectedStage?.Code }}] {{ selectedStage?.Name }} > [{{ hoverAction?.ActionStatus }}]\r\n    {{ hoverAction?.ActionText }}\r\n  </ng-container>\r\n  <ng-container *nzModalContent>\r\n    @if (hoverAction && hoverAction.actionRule) {\r\n      <div nz-row [nzGutter]=\"32\">\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Code'\" [(_ngModel)]=\"hoverAction.actionRule.Code\"></extend-input>\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Name'\" [(_ngModel)]=\"hoverAction.actionRule.Name\"></extend-input>\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Note'\" [(_ngModel)]=\"hoverAction.actionRule.Note\"></extend-input>\r\n        <extend-checkbox\r\n          nz-col\r\n          nzSpan=\"12\"\r\n          [label]=\"'IsActive'\"\r\n          [(_ngModel)]=\"hoverAction.actionRule.IsActive\"\r\n        ></extend-checkbox>\r\n      </div>\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <div nz-col nzSpan=\"24\">\r\n          <nz-table nzSize=\"small\" [nzData]=\"hoverAction.actionRule.lstLine\" [nzShowPagination]=\"false\">\r\n            <thead>\r\n              <tr>\r\n                <th [nzWidth]=\"'50px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n                <th [nzWidth]=\"'25%'\">Template</th>\r\n                <th [nzWidth]=\"'25%'\">Template stage</th>\r\n                <th [nzWidth]=\"'25%'\">Template action</th>\r\n                <th [nzWidth]=\"'50px'\">IsActive</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (item of hoverAction.actionRule.lstLine; track $index) {\r\n                <tr>\r\n                  <td><icon-delete (click)=\"deleteActionRuleLine(hoverAction.actionRule, item)\"></icon-delete></td>\r\n                  <td>\r\n                    <extend-select\r\n                      #xxx\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstTemplateForRule(item)\"\r\n                      [valueField]=\"'WF_Template_Id'\"\r\n                      [displayFields]=\"['Code', 'Name']\"\r\n                      [(_ngModel)]=\"item.WF_Template_Id\"\r\n                      (_ngModelChange)=\"item.WF_TemplateStage_Id = 0; item.WF_TemplateStageAction_Id = 0\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      #yyy\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstStageForRule(xxx._ngModel)\"\r\n                      [valueField]=\"'WF_TemplateStage_Id'\"\r\n                      [displayFields]=\"['Code', 'Name']\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStage_Id\"\r\n                      (_ngModelChange)=\"item.WF_TemplateStageAction_Id = 0\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstActionForRule(yyy._ngModel)\"\r\n                      [valueField]=\"'WF_TemplateStageAction_Id'\"\r\n                      [displayFields]=\"['ActionStatus', 'ActionText']\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td class=\"text-center\">\r\n                    <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </nz-table>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n  <ng-container *nzModalFooter>\r\n    <button nz-button nzType=\"primary\" (click)=\"actionRuleModalVisible = false\">OK</button>\r\n  </ng-container>\r\n</nz-modal>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;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:100%;height:100%}.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.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.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:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;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}::ng-deep .minimap{position:fixed;width:180px;height:125px;top:60px;right:15px;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: i1$2.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", "labelFlex", "inputFlex", "allowClear", "disabled", "readOnly", "required", "noBottom", "selectModeType", "autocomplete", "autofocus", "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", "labelFlex", "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", "labelFlex", "disabled", "formData", "controlName", "valueType", "_ngModel"], outputs: ["_ngModelChange"] }, { kind: "component", type: ExtendTextArea, selector: "extend-textarea", inputs: ["layOutType", "label", "placeHolder", "labelAlign", "labelSpan", "labelFlex", "inputFlex", "disabled", "required", "noBottom", "selectModeType", "inputClass", "minRows", "maxRows", "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: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { 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", "labelFlex", "inputFlex", "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"] }, { kind: "directive", type: AutoFocusDirective, selector: "[appAutoFocus]", inputs: ["appAutoFocus"] }, { kind: "ngmodule", type: NzAutocompleteModule }, { kind: "component", type: i17.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i17.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i17.NzAutocompleteTriggerDirective, selector: "input[nzAutocomplete], textarea[nzAutocomplete]", inputs: ["nzAutocomplete"], exportAs: ["nzAutocompleteTrigger"] }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "directive", type: NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { kind: "directive", type: NzModalTitleDirective, selector: "[nzModalTitle]", exportAs: ["nzModalTitle"] }, { kind: "component", type: IconAdd, selector: "icon-add", inputs: ["size"], outputs: ["click"] }, { kind: "directive", type: NzModalFooterDirective, selector: "[nzModalFooter]", exportAs: ["nzModalFooter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: WorkflowEditorComponent, decorators: [{
             type: Component,
@@ -5262,7 +5436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         NzModalTitleDirective,
                         IconAdd,
                         NzModalFooterDirective,
-                    ], template: "<div\r\n  #canvasRef\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n>\r\n  <!-- \r\n\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\" \r\n\r\n  [style.width.px]=\"CANVAS_WIDTH\"\r\n  [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n  style=\"width: 100%; height: calc(100vh - 120px)\"\r\n  \r\n  -->\r\n\r\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon>\r\n    </button>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n      <nz-icon nzType=\"info-circle\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon> T\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n      <nz-icon nzType=\"save\"></nz-icon>\r\n    </button>\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Move mode\"\r\n      (click)=\"isMoveMode = true\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Select mode\"\r\n      (click)=\"isMoveMode = false\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- UNDO / REDO -->\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"undoStack.length === 0\"\r\n      nz-tooltip=\"Undo\"\r\n      (click)=\"undo()\"\r\n    >\r\n      <nz-icon nzType=\"undo\"></nz-icon>\r\n    </button>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"redoStack.length === 0\"\r\n      nz-tooltip=\"Redo\"\r\n      (click)=\"redo()\"\r\n    >\r\n      <nz-icon nzType=\"redo\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- ALIGN -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <!-- DISTRIBUTE -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n      \u21C4\r\n    </button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- <div class=\"zoom-toolbar\">\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n    </div> -->\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g [attr.transform]=\"svgTransform\">\r\n        <!-- DEFS -->\r\n        <defs>\r\n          <!-- glow effect -->\r\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n            <feMerge>\r\n              <feMergeNode in=\"blur\" />\r\n              <feMergeNode in=\"SourceGraphic\" />\r\n            </feMerge>\r\n          </filter>\r\n\r\n          <!-- arrow markers -->\r\n          <marker\r\n            id=\"arrow-blue\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-blue-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n        </defs>\r\n\r\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n          <path\r\n            class=\"edge\"\r\n            [attr.id]=\"'edge-path-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-blue)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseenter)=\"onMouseEnterEdge(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- text b\u00E1m theo line -->\r\n          <!-- \r\n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text> \r\n          \r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text>\r\n          -->\r\n\r\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n          <path\r\n            class=\"edge red\"\r\n            [attr.id]=\"'edge-path-hover-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-red)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text>\r\n\r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text> -->\r\n\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- preview -->\r\n        <path\r\n          *ngIf=\"connectingFrom\"\r\n          class=\"edge\"\r\n          [attr.d]=\"buildPreviewPath()\"\r\n          stroke-dasharray=\"5,5\"\r\n          marker-end=\"url(#arrow-blue)\"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n\r\n    <div\r\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n      class=\"selection-box\"\r\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n    ></div>\r\n\r\n    <!-- lstStage -->\r\n    @for (n of lstStage; track $index) {\r\n      <!-- START NODE -->\r\n      @if (n.StageType === \"_start_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-start\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-right connector-start reverse\"\r\n              (click)=\"onClickConnector($event, n, 'right')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n      <!-- END NODE -->\r\n      @else if (n.StageType === \"_end_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-end\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-left connector-end reverse\"\r\n              (click)=\"onClickConnector($event, n, 'left')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      } @else {\r\n        <nz-card\r\n          class=\"workflow-node\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <div class=\"title\">{{ n.Code }}</div>\r\n\r\n          <div>{{ n.Name }}</div>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n    }\r\n\r\n    <!-- POINTS -->\r\n    @for (p of connectingPoints; track $index) {\r\n      @if (p != draggingPoint) {\r\n        <div\r\n          class=\"waypoint\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n        ></div>\r\n      } @else {\r\n        <div\r\n          class=\"waypoint dragging\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawTemplateTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"500\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"drawTemplateVisibel\"\r\n  [nzFooter]=\"footerTplTemplate\"\r\n  (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <extend-select\r\n      [label]=\"'Org'\"\r\n      [lstItem]=\"lstOrg\"\r\n      [valueField]=\"'App_Org_Id'\"\r\n      [displayFields]=\"['Name', 'Code']\"\r\n      [(_ngModel)]=\"template.App_Org_Id\"\r\n    ></extend-select>\r\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n    <extend-select\r\n      [label]=\"'Type'\"\r\n      [lstItem]=\"template.lstTemplateType\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.DocType\"\r\n    ></extend-select>\r\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n    <extend-select\r\n      [label]=\"'Print template'\"\r\n      [lstItem]=\"template.lstTemplatePrint\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.TemplatePrint\"\r\n    ></extend-select>\r\n\r\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n    <extend-checkbox [label]=\"'Use Allow back'\" [(_ngModel)]=\"template.editorOption.AllowbackInUse\"></extend-checkbox>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of getLstStage; track tag) {\r\n        <div nz-col>\r\n          <nz-tag (click)=\"hoverStage = tag\">\r\n            {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n          </nz-tag>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <box [height]=\"16\"></box>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of template.lstStageStatus; track tag) {\r\n        <div nz-col>\r\n          <nz-tag\r\n            [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\r\n            (nzOnClose)=\"handleCloseStageStatus(tag)\"\r\n          >\r\n            {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n          </nz-tag>\r\n        </div>\r\n      }\r\n\r\n      <div nz-col>\r\n        @if (!inputStageStatusVisible) {\r\n          <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\r\n            <nz-icon nzType=\"plus\" />\r\n            New Action type\r\n          </nz-tag>\r\n        } @else {\r\n          <input\r\n            #inputStageStatusElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Code\"\r\n            [(ngModel)]=\"inputStageStatusCode\"\r\n            (keydown.enter)=\"inputStageStatusNameElement.select()\"\r\n          />\r\n          <input\r\n            #inputStageStatusNameElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Name\"\r\n            [(ngModel)]=\"inputStageStatusName\"\r\n            (blur)=\"handleInputStageStatusConfirm()\"\r\n            (keydown.enter)=\"handleInputStageStatusConfirm()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <box [height]=\"16\"></box>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of template.lstActionType; track tag) {\r\n        <div nz-col>\r\n          <nz-tag\r\n            [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\r\n            (nzOnClose)=\"handleCloseActionType(tag)\"\r\n          >\r\n            {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n          </nz-tag>\r\n        </div>\r\n      }\r\n\r\n      <div nz-col>\r\n        @if (!inputActionTypeVisible) {\r\n          <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\r\n            <nz-icon nzType=\"plus\" />\r\n            New Action type\r\n          </nz-tag>\r\n        } @else {\r\n          <input\r\n            #inputActionTypeElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Code\"\r\n            [(ngModel)]=\"inputActionTypeCode\"\r\n            (keydown.enter)=\"inputActionTypeNameElement.select()\"\r\n          />\r\n          <input\r\n            #inputActionTypeNameElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Name\"\r\n            [(ngModel)]=\"inputActionTypeName\"\r\n            (blur)=\"handleInputActionTypeConfirm()\"\r\n            (keydown.enter)=\"handleInputActionTypeConfirm()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <box [height]=\"16\"></box>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of template.lstActionStatus; track tag) {\r\n        <div nz-col>\r\n          @if (template.editingActionStatus != tag) {\r\n            <nz-tag\r\n              [nzMode]=\"checkRemoveableActionStatus(tag.Code) ? 'closeable' : 'default'\"\r\n              (nzOnClose)=\"handleClose(tag.Code)\"\r\n              (click)=\"template.editingActionStatus = checkRemoveableActionStatus(tag.Code) ? tag : undefined\"\r\n            >\r\n              {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n            </nz-tag>\r\n          } @else {\r\n            <input\r\n              nz-input\r\n              nzSize=\"small\"\r\n              type=\"text\"\r\n              style=\"width: 150px\"\r\n              [appAutoFocus]=\"true\"\r\n              [(ngModel)]=\"tag.Code\"\r\n              (blur)=\"template.editingActionStatus = undefined\"\r\n              (keydown.enter)=\"template.editingActionStatus = undefined\"\r\n            />&nbsp;&nbsp;\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div nz-col>\r\n        @if (!inputVisible) {\r\n          <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\r\n            <nz-icon nzType=\"plus\" />\r\n            New Action status\r\n          </nz-tag>\r\n        } @else {\r\n          <input\r\n            #inputElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"+ New Action status\"\r\n            [(ngModel)]=\"inputValue\"\r\n            (blur)=\"handleInputConfirm()\"\r\n            (keydown.enter)=\"handleInputConfirm()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplTemplate>\r\n    <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\r\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer STAGE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleStage\"\r\n  [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n  [nzVisible]=\"!!selectedStage\"\r\n  [nzWidth]=\"'calc(50vw)'\"\r\n  [nzClosable]=\"false\"\r\n  [nzFooter]=\"footerTplNode\"\r\n  (nzOnClose)=\"selectedStage = undefined\"\r\n>\r\n  <ng-template #drawerTitleStage>\r\n    <div nz-row nzJustify=\"space-between\">\r\n      @if (selectedStage && selectedStage.editorOption) {\r\n        @if (selectedStage.editorOption.drawerPosition == \"left\") {\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the right\"\r\n            (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\r\n          >\r\n            <nz-icon nzType=\"double-right\"></nz-icon>\r\n          </button>\r\n          STAGE\r\n        } @else {\r\n          STAGE\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the left\"\r\n            (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\r\n          >\r\n            <nz-icon nzType=\"double-left\"></nz-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <ng-container *ngIf=\"selectedStage\">\r\n      <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\r\n        <label nz-radio nzValue=\"_start_\">UI start</label>\r\n        <label nz-radio nzValue=\"_end_\">UI end</label>\r\n        <label nz-radio nzValue=\"start\">START</label>\r\n        <label nz-radio nzValue=\"node\">NODE</label>\r\n        <label nz-radio nzValue=\"end\">END</label>\r\n      </nz-radio-group>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Code'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [required]=\"true\"\r\n          [(_ngModel)]=\"selectedStage.Code\"\r\n        ></extend-input>\r\n\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"16\"\r\n          [label]=\"'Name'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [required]=\"true\"\r\n          [(_ngModel)]=\"selectedStage.Name\"\r\n        ></extend-input>\r\n      </div>\r\n\r\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n        <extend-input-number\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Sequence'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [(_ngModel)]=\"selectedStage.SeqValue\"\r\n        ></extend-input-number>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"16\"\r\n          [label]=\"'Org implement'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"lstOrg\"\r\n          [valueField]=\"'App_Org_Id'\"\r\n          [displayFields]=\"['Name', 'Code']\"\r\n          [(_ngModel)]=\"selectedStage.App_Org_Id\"\r\n        ></extend-select>\r\n      </div>\r\n\r\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n        <extend-input-number\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Number Day'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberDay\"\r\n        ></extend-input-number>\r\n      </div>\r\n\r\n      @if (selectedStage.editorOption) {\r\n        @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\r\n          <extend-checkbox\r\n            [label]=\"'Reverse'\"\r\n            [labelSpan]=\"0\"\r\n            [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n          ></extend-checkbox>\r\n        }\r\n\r\n        <extend-checkbox\r\n          [label]=\"'Require user action'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n        <div nz-col>\r\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n            <nz-icon nzType=\"plus\"></nz-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <nz-table nzSize=\"small\" [nzData]=\"lstActionOfCurrentStage\" [nzShowPagination]=\"false\" [nzNoResult]=\"'&nbsp;'\">\r\n        <thead>\r\n          <tr [hidden]=\"true\">\r\n            <th nzWidth=\"40px\"></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (action of lstActionOfCurrentStage; track $index) {\r\n            <tr [class.text-bold]=\"action == hoverAction\" (click)=\"onclickaction(action)\">\r\n              <td style=\"border-bottom: solid 1px orange\">\r\n                ({{ $index + 1 }})\r\n                <nz-icon\r\n                  nzType=\"delete\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-warn cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); deleteAction(action)\"\r\n                ></nz-icon>\r\n              </td>\r\n              <td style=\"border-bottom: solid 1px orange\">\r\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n                  <div nz-col [nzSpan]=\"8\">\r\n                    <nz-form-item>\r\n                      <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                      <nz-form-control [nzSpan]=\"24\">\r\n                        <nz-input-group class=\"full-width\">\r\n                          <input\r\n                            nz-input\r\n                            [(ngModel)]=\"action.ActionStatus\"\r\n                            [nzAutocomplete]=\"auto\"\r\n                            (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                            (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                            (keyup.enter)=\"onenterAotu(action.ActionStatus)\"\r\n                            (blur)=\"onenterAotu(action.ActionStatus)\"\r\n                          />\r\n                          <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                            @for (option of lstActionStatusFiltered; track $index) {\r\n                              <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                                {{ option.Code }}\r\n                                <icon-delete\r\n                                  *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                                  style=\"float: right\"\r\n                                  [size]=\"12\"\r\n                                  (click)=\"handleClose(option.Code)\"\r\n                                ></icon-delete>\r\n                              </nz-auto-option>\r\n                            }\r\n                          </nz-autocomplete>\r\n                        </nz-input-group>\r\n                      </nz-form-control>\r\n                    </nz-form-item>\r\n                  </div>\r\n\r\n                  <extend-input\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Action text'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [(_ngModel)]=\"action.ActionText\"\r\n                    (_ngModelChange)=\"onchangeActionText(action)\"\r\n                  ></extend-input>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Action type'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"template.lstActionType\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.ActionType\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Stage status'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Next stage'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"getlstStage\"\r\n                    [valueField]=\"'WF_TemplateStage_Id'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\r\n                    (_ngModelChange)=\"onchangeNextStage(action)\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Next stage status'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.To_StageStatus\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>Role</div>\r\n                <div nz-row>\r\n                  <extend-select\r\n                    nz-col\r\n                    nzSpan=\"24\"\r\n                    [size]=\"'small'\"\r\n                    [lstItem]=\"lstRole\"\r\n                    [valueField]=\"'App_Role_Id'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstRoleId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>Email action</div>\r\n                <div nz-row>\r\n                  <extend-select\r\n                    nz-col\r\n                    nzSpan=\"24\"\r\n                    [size]=\"'small'\"\r\n                    [lstItem]=\"lstEmailAction\"\r\n                    [valueField]=\"'ID'\"\r\n                    [displayField]=\"'Name'\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstEmailActionId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>Email template</div>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>\r\n                  <div nz-col nzSpan=\"1\"></div>\r\n                  <div nz-col nzSpan=\"23\" class=\"form-item-no-bottom\" style=\"font-weight: normal\">\r\n                    @for (actionRef of lstActionRefOf(action); track $index) {\r\n                      <div nz-row>\r\n                        <extend-select\r\n                          nz-col\r\n                          nzSpan=\"24\"\r\n                          [labelSpan]=\"12\"\r\n                          [size]=\"'small'\"\r\n                          [label]=\"emailActionText(actionRef.To_WF_TemplateStageAction_Id)\"\r\n                          [lstItem]=\"lstEmailTemplate\"\r\n                          [valueField]=\"'Code'\"\r\n                          [displayFields]=\"['Code', 'Name']\"\r\n                          [(_ngModel)]=\"actionRef.TemplateMail\"\r\n                          (_ngModelChange)=\"xxx(actionRef)\"\r\n                        ></extend-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row [nzGutter]=\"8\">\r\n                  Action rule\r\n                  <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"actionRuleModalVisible = true\">\r\n                    <nz-icon nzType=\"export\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                  </button>\r\n                  <button\r\n                    *ngIf=\"action.WF_TransitionsRule_Id\"\r\n                    nz-button\r\n                    nzType=\"text\"\r\n                    nzSize=\"small\"\r\n                    (click)=\"deleteActionRule(action)\"\r\n                  >\r\n                    <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n                  </button>\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplNode>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"\r\n        selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n          ? 'start'\r\n          : 'end'\r\n      \"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n      <button\r\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n        nz-button\r\n        nzDanger\r\n        (click)=\"deleteStage()\"\r\n      >\r\n        Delete\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleAction\"\r\n  nzTitle=\"ACTION\"\r\n  [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n  [nzClosable]=\"false\"\r\n  [nzWidth]=\"750\"\r\n  [nzVisible]=\"!!selectedAction\"\r\n  [nzFooter]=\"footerTplAction\"\r\n  (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n  <ng-template #drawerTitleAction>\r\n    <div nz-row nzJustify=\"space-between\">\r\n      @if (selectedAction && selectedAction.editorOption) {\r\n        @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the right\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n          >\r\n            <nz-icon nzType=\"double-right\"></nz-icon>\r\n          </button>\r\n          ACTION\r\n        } @else {\r\n          ACTION\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the left\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n          >\r\n            <nz-icon nzType=\"double-left\"></nz-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <ng-container *ngIf=\"selectedAction\">\r\n      <div>\r\n        <strong\r\n          >{{ selectedAction.getFromStageCode(lstStage) }} -> {{ selectedAction.getToStageCode(lstStage) }}</strong\r\n        >\r\n      </div>\r\n      <div>{{ selectedAction.getFromStageName(lstStage) }} -> {{ selectedAction.getToStageName(lstStage) }}</div>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n        <div nz-col [nzSpan]=\"8\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n            <nz-form-control [nzSpan]=\"24\">\r\n              <nz-input-group class=\"full-width\">\r\n                <input\r\n                  nz-input\r\n                  [(ngModel)]=\"selectedAction.ActionStatus\"\r\n                  [nzAutocomplete]=\"auto\"\r\n                  (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                  (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                  (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                  (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                />\r\n                <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                  @for (option of lstActionStatusFiltered; track $index) {\r\n                    <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                      {{ option.Code }}\r\n                      <icon-delete\r\n                        *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                        style=\"float: right\"\r\n                        [size]=\"12\"\r\n                        (click)=\"handleClose(option.Code)\"\r\n                      ></icon-delete>\r\n                    </nz-auto-option>\r\n                  }\r\n                </nz-autocomplete>\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </div>\r\n\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Action text'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [(_ngModel)]=\"selectedAction.ActionText\"\r\n          (_ngModelChange)=\"onchangeActionText(selectedAction)\"\r\n        ></extend-input>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Action type'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"template.lstActionType\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.ActionType\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Stage status'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.StageStatus\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"lstStage\"\r\n          [valueField]=\"'WF_TemplateStage_Id'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage status'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n        ></extend-select>\r\n      </div>\r\n\r\n      <!-- <box [height]=\"16\"></box> -->\r\n      <nz-divider></nz-divider>\r\n\r\n      @if (template.editorOption.AllowbackInUse) {\r\n        <extend-checkbox\r\n          [label]=\"'Allow back'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedAction.allowBack\"\r\n          (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      @if (selectedAction.allowBack) {\r\n        <div>\r\n          <strong\r\n            >{{ selectedAction.getToStageCode(lstStage) }} -> {{ selectedAction.getFromStageCode(lstStage) }}</strong\r\n          >\r\n        </div>\r\n        <div>{{ selectedAction.getToStageName(lstStage) }} -> {{ selectedAction.getFromStageName(lstStage) }}</div>\r\n\r\n        @if (selectedBackAction) {\r\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n            <div nz-col [nzSpan]=\"8\">\r\n              <nz-form-item>\r\n                <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                <nz-form-control [nzSpan]=\"24\">\r\n                  <nz-input-group class=\"full-width\">\r\n                    <input\r\n                      nz-input\r\n                      [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n                      [nzAutocomplete]=\"auto\"\r\n                      (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                      (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                      (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                      (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                    />\r\n                    <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                      @for (option of lstActionStatusFiltered; track $index) {\r\n                        <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                          {{ option.Code }}\r\n                          <icon-delete\r\n                            *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                            style=\"float: right\"\r\n                            [size]=\"12\"\r\n                            (click)=\"handleClose(option.Code)\"\r\n                          ></icon-delete>\r\n                        </nz-auto-option>\r\n                      }\r\n                    </nz-autocomplete>\r\n                  </nz-input-group>\r\n                </nz-form-control>\r\n              </nz-form-item>\r\n            </div>\r\n\r\n            <extend-input\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Action text'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [(_ngModel)]=\"selectedBackAction.ActionText\"\r\n              (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\r\n            ></extend-input>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Action type'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"template.lstActionType\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Stage status'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Next stage'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"lstStage\"\r\n              [valueField]=\"'WF_TemplateStage_Id'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\r\n              (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Next stage status'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.To_StageStatus\"\r\n            ></extend-select>\r\n          </div>\r\n        }\r\n      }\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #footerTplAction>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n      <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawSettingTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"settingVisible\"\r\n  (nzOnClose)=\"settingVisible = false\"\r\n>\r\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <div class=\"form-item-no-bottom\">\r\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </div>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawInfoTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"infoVisible\"\r\n  (nzOnClose)=\"infoVisible = false\"\r\n>\r\n  <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n    <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n    <p>\r\n      3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n      <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n      nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n      c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n      \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n    </p>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- action rule modal -->\r\n<nz-modal\r\n  [(nzVisible)]=\"actionRuleModalVisible\"\r\n  [nzMaskClosable]=\"false\"\r\n  [nzClosable]=\"false\"\r\n  [nzKeyboard]=\"true\"\r\n  [nzWidth]=\"'50vw'\"\r\n>\r\n  <ng-container *nzModalTitle>\r\n    ACTION RULE: [{{ selectedStage?.Code }}] {{ selectedStage?.Name }} > [{{ hoverAction?.ActionStatus }}]\r\n    {{ hoverAction?.ActionText }}\r\n  </ng-container>\r\n  <ng-container *nzModalContent>\r\n    @if (hoverAction && hoverAction.actionRule) {\r\n      <div nz-row [nzGutter]=\"32\">\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Code'\" [(_ngModel)]=\"hoverAction.actionRule.Code\"></extend-input>\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Name'\" [(_ngModel)]=\"hoverAction.actionRule.Name\"></extend-input>\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Note'\" [(_ngModel)]=\"hoverAction.actionRule.Note\"></extend-input>\r\n        <extend-checkbox\r\n          nz-col\r\n          nzSpan=\"12\"\r\n          [label]=\"'IsActive'\"\r\n          [(_ngModel)]=\"hoverAction.actionRule.IsActive\"\r\n        ></extend-checkbox>\r\n      </div>\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <div nz-col nzSpan=\"24\">\r\n          <nz-table nzSize=\"small\" [nzData]=\"hoverAction.actionRule.lstLine\" [nzShowPagination]=\"false\">\r\n            <thead>\r\n              <tr>\r\n                <th [nzWidth]=\"'50px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n                <th [nzWidth]=\"'25%'\">Template</th>\r\n                <th [nzWidth]=\"'25%'\">Template stage</th>\r\n                <th [nzWidth]=\"'25%'\">Template action</th>\r\n                <th [nzWidth]=\"'50px'\">IsActive</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (item of hoverAction.actionRule.lstLine; track $index) {\r\n                <tr>\r\n                  <td><icon-delete (click)=\"deleteActionRuleLine(hoverAction.actionRule, item)\"></icon-delete></td>\r\n                  <td>\r\n                    <extend-select\r\n                      #xxx\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstTemplateForRule(item)\"\r\n                      [valueField]=\"'WF_Template_Id'\"\r\n                      [displayFields]=\"['Code', 'Name']\"\r\n                      [(_ngModel)]=\"item.WF_Template_Id\"\r\n                      (_ngModelChange)=\"item.WF_TemplateStage_Id = 0; item.WF_TemplateStageAction_Id = 0\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      #yyy\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstStageForRule(xxx._ngModel)\"\r\n                      [valueField]=\"'WF_TemplateStage_Id'\"\r\n                      [displayFields]=\"['Code', 'Name']\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStage_Id\"\r\n                      (_ngModelChange)=\"item.WF_TemplateStageAction_Id = 0\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstActionForRule(yyy._ngModel)\"\r\n                      [valueField]=\"'WF_TemplateStageAction_Id'\"\r\n                      [displayFields]=\"['ActionStatus', 'ActionText']\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td class=\"text-center\">\r\n                    <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </nz-table>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n  <ng-container *nzModalFooter>\r\n    <button nz-button nzType=\"primary\" (click)=\"actionRuleModalVisible = false\">OK</button>\r\n  </ng-container>\r\n</nz-modal>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;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:100%;height:100%}.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.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.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:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;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}::ng-deep .minimap{position:fixed;width:180px;height:125px;top:60px;right:15px;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}\n"] }]
+                    ], template: "<div\r\n  #canvasRef\r\n  class=\"workflow-canvas\"\r\n  [class.connecting]=\"!!connectingFrom\"\r\n  [class.dragging-point]=\"!!draggingPoint\"\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\"\r\n  (mousedown)=\"onMouseDownCanvas($event)\"\r\n  (mousemove)=\"onMouseMoveCanvas($event)\"\r\n  (mouseup)=\"onMouseUpCanvas($event)\"\r\n  (click)=\"onClickCanvas($event)\"\r\n>\r\n  <!-- \r\n\r\n  [style.width.px]=\"getCanvasWidth()\"\r\n  [style.height.px]=\"getCanvasHeight()\" \r\n\r\n  [style.width.px]=\"CANVAS_WIDTH\"\r\n  [style.height.px]=\"CANVAS_HEIGHT\"\r\n\r\n  style=\"width: 100%; height: calc(100vh - 120px)\"\r\n  \r\n  -->\r\n\r\n  <div class=\"toolbar\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Editor setting\" (click)=\"settingVisible = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon>\r\n    </button>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Infomation\" (click)=\"infoVisible = true\">\r\n      <nz-icon nzType=\"info-circle\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Template setting\" (click)=\"drawTemplateVisibel = true\">\r\n      <nz-icon nzType=\"setting\"></nz-icon> T\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button nz-button nzSize=\"small\" nzDanger [nzLoading]=\"!ready\" nz-tooltip=\"Save (Ctrl + S)\" (click)=\"save()\">\r\n      <nz-icon nzType=\"save\"></nz-icon>\r\n    </button>\r\n    <button nz-button nzSize=\"small\" nz-tooltip=\"Add stage\" (click)=\"addStage()\">\r\n      <nz-icon nzType=\"plus\" class=\"color-primary\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Move mode\"\r\n      (click)=\"isMoveMode = true\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/hand-palm.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      [nzType]=\"!isMoveMode ? 'primary' : 'default'\"\r\n      nz-tooltip=\"Select mode\"\r\n      (click)=\"isMoveMode = false\"\r\n    >\r\n      <nz-icon><img src=\"/assets/icon/cursor.png\" width=\"19\" height=\"19\" /></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- UNDO / REDO -->\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"undoStack.length === 0\"\r\n      nz-tooltip=\"Undo\"\r\n      (click)=\"undo()\"\r\n    >\r\n      <nz-icon nzType=\"undo\"></nz-icon>\r\n    </button>\r\n\r\n    <button\r\n      nz-button\r\n      nzSize=\"small\"\r\n      nzType=\"default\"\r\n      [disabled]=\"redoStack.length === 0\"\r\n      nz-tooltip=\"Redo\"\r\n      (click)=\"redo()\"\r\n    >\r\n      <nz-icon nzType=\"redo\"></nz-icon>\r\n    </button>\r\n\r\n    <box [width]=\"1\"></box>\r\n    <span class=\"divider\"></span>\r\n    <box [width]=\"1\"></box>\r\n\r\n    <!-- ALIGN -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignLeft()\">\u27F8</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignCenter()\">\u2261</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignRight()\">\u27F9</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignTop()\">\u21D1</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignMiddle()\">\u2550</button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 2\" (click)=\"alignBottom()\">\u21D3</button>\r\n\r\n    <span class=\"divider\"></span>\r\n\r\n    <!-- DISTRIBUTE -->\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeHorizontal()\">\r\n      \u21C4\r\n    </button>\r\n    <button nz-button nzSize=\"small\" [disabled]=\"lstSelectedStageId.size < 3\" (click)=\"distributeVertical()\">\u21C5</button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"canvas-content\"\r\n    [class.panning]=\"isMoveMode\"\r\n    [style.transform]=\"'translate(' + template.editorOption.panX + 'px,' + template.editorOption.panY + 'px)'\"\r\n  >\r\n    <!-- GRID -->\r\n    <div *ngIf=\"wfcSetting.ShowGrid\" class=\"grid-layer\"></div>\r\n\r\n    <!-- <div class=\"zoom-toolbar\">\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomOut()\">\u2212</button>\r\n      <span>{{ zoom * 100 | number: \"1.0-0\" }}%</span>\r\n      <button nz-button nzSize=\"small\" (click)=\"zoomIn()\">+</button>\r\n    </div> -->\r\n\r\n    <!-- SVG EDGES -->\r\n    <svg #svg class=\"edges-layer\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n      <g [attr.transform]=\"svgTransform\">\r\n        <!-- DEFS -->\r\n        <defs>\r\n          <!-- glow effect -->\r\n          <filter id=\"edge-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n            <feGaussianBlur stdDeviation=\"2\" result=\"blur\" />\r\n            <feMerge>\r\n              <feMergeNode in=\"blur\" />\r\n              <feMergeNode in=\"SourceGraphic\" />\r\n            </feMerge>\r\n          </filter>\r\n\r\n          <!-- arrow markers -->\r\n          <marker\r\n            id=\"arrow-blue\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            refX=\"10\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M0,0 L10,5 L0,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-blue-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"blue\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n\r\n          <marker\r\n            id=\"arrow-red-start\"\r\n            markerWidth=\"10\"\r\n            markerHeight=\"10\"\r\n            viewBox=\"0 0 10 10\"\r\n            refX=\"0\"\r\n            refY=\"5\"\r\n            orient=\"auto\"\r\n            markerUnits=\"strokeWidth\"\r\n          >\r\n            <path class=\"red\" d=\"M10,0 L0,5 L10,10\"></path>\r\n          </marker>\r\n        </defs>\r\n\r\n        <!-- EDGES B\u00CCNH TH\u01AF\u1EDCNG -->\r\n        <ng-container *ngFor=\"let e of normalEdges; let i = index\">\r\n          <path\r\n            class=\"edge\"\r\n            [attr.id]=\"'edge-path-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-blue)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-blue-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseenter)=\"onMouseEnterEdge(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- text b\u00E1m theo line -->\r\n          <!-- \r\n          <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text> \r\n          \r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text>\r\n          -->\r\n\r\n          <!-- text th\u1EB3ng n\u1EB1m ngang -->\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- EDGE \u0110ANG HOVER (LU\u00D4N TR\u00CAN C\u00D9NG) -->\r\n        <ng-container *ngFor=\"let e of hoverEdges; let i = index\">\r\n          <path\r\n            class=\"edge red\"\r\n            [attr.id]=\"'edge-path-hover-' + i\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            marker-end=\"url(#arrow-red)\"\r\n            [attr.marker-start]=\"e.allowBack ? 'url(#arrow-red-start)' : ''\"\r\n          ></path>\r\n\r\n          <path\r\n            class=\"edge-hit\"\r\n            [attr.d]=\"buildPath(e)\"\r\n            (mouseleave)=\"onMouseLeaveEdge(e)\"\r\n            (click)=\"onClickEdge(e, $event)\"\r\n          ></path>\r\n\r\n          <!-- LABEL -->\r\n          <!-- <text *ngIf=\"e.ActionText\" class=\"edge-label\" dy=\"-6\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.ActionText }}\r\n            </textPath>\r\n          </text>\r\n\r\n          <text *ngIf=\"e.allowBack && e.labelBack\" class=\"edge-label\" dy=\"14\">\r\n            <textPath [attr.href]=\"'#edge-path-hover-' + i\" startOffset=\"50%\" text-anchor=\"middle\">\r\n              {{ e.labelBack }}\r\n            </textPath>\r\n          </text> -->\r\n\r\n          <text\r\n            *ngIf=\"e.ActionText\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y - 8\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.ActionText }}\r\n          </text>\r\n\r\n          <text\r\n            *ngIf=\"e.allowBack && e.labelBack\"\r\n            class=\"edge-label\"\r\n            [attr.x]=\"getEdgeLabelPosition(e).x\"\r\n            [attr.y]=\"getEdgeLabelPosition(e).y + 14\"\r\n            [attr.text-anchor]=\"'middle'\"\r\n          >\r\n            {{ e.labelBack }}\r\n          </text>\r\n        </ng-container>\r\n\r\n        <!-- preview -->\r\n        <path\r\n          *ngIf=\"connectingFrom\"\r\n          class=\"edge\"\r\n          [attr.d]=\"buildPreviewPath()\"\r\n          stroke-dasharray=\"5,5\"\r\n          marker-end=\"url(#arrow-blue)\"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n\r\n    <div\r\n      *ngIf=\"isSelecting && selectStart && selectEnd\"\r\n      class=\"selection-box\"\r\n      [style.left.px]=\"Math.min(selectStart.x, selectEnd.x)\"\r\n      [style.top.px]=\"Math.min(selectStart.y, selectEnd.y)\"\r\n      [style.width.px]=\"Math.abs(selectEnd.x - selectStart.x)\"\r\n      [style.height.px]=\"Math.abs(selectEnd.y - selectStart.y)\"\r\n    ></div>\r\n\r\n    <!-- lstStage -->\r\n    @for (n of lstStage; track $index) {\r\n      <!-- START NODE -->\r\n      @if (n.StageType === \"_start_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-start\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'green'\"> START </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right connector-start\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-right connector-start reverse\"\r\n              (click)=\"onClickConnector($event, n, 'right')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n      <!-- END NODE -->\r\n      @else if (n.StageType === \"_end_\") {\r\n        <nz-card\r\n          class=\"workflow-node workflow-node-end\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <nz-tag [nzColor]=\"'red'\"> END </nz-tag>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left connector-end\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div\r\n              class=\"connector connector-left connector-end reverse\"\r\n              (click)=\"onClickConnector($event, n, 'left')\"\r\n            ></div>\r\n          }\r\n        </nz-card>\r\n      } @else {\r\n        <nz-card\r\n          class=\"workflow-node\"\r\n          [attr.data-id]=\"n.Code\"\r\n          [class.selected]=\"n == selectedStage || n == hoverStage || lstSelectedStageId.has(n.WF_TemplateStage_Id)\"\r\n          [style.left.px]=\"n.editorOption.x\"\r\n          [style.top.px]=\"n.editorOption.y\"\r\n          [class.connecting-source]=\"isConnectingFrom(n) || isDraggingFrom(n) || isSelectedNode(n)\"\r\n          nzSize=\"small\"\r\n          (mousedown)=\"onMouseDownNode($event, n)\"\r\n          (click)=\"$event.stopPropagation(); onClickStage(n)\"\r\n        >\r\n          <div class=\"title\">{{ n.Code }}</div>\r\n\r\n          <div>{{ n.Name }}</div>\r\n\r\n          @if (!n.editorOption.isReverse) {\r\n            <!-- connector RIGHT: output -->\r\n            <div class=\"connector connector-right\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n\r\n            <!-- connector LEFT: input -->\r\n            <div class=\"connector connector-left\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          } @else {\r\n            <div class=\"connector connector-right reverse\" (click)=\"onClickConnector($event, n, 'right')\"></div>\r\n            <div class=\"connector connector-left reverse\" (click)=\"onClickConnector($event, n, 'left')\"></div>\r\n          }\r\n        </nz-card>\r\n      }\r\n    }\r\n\r\n    <!-- POINTS -->\r\n    @for (p of connectingPoints; track $index) {\r\n      @if (p != draggingPoint) {\r\n        <div\r\n          class=\"waypoint\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n          (contextmenu)=\"onRightClickPoint($event, hoverAction!, $index)\"\r\n        ></div>\r\n      } @else {\r\n        <div\r\n          class=\"waypoint dragging\"\r\n          [style.left.px]=\"p.x\"\r\n          [style.top.px]=\"p.y\"\r\n          (mousedown)=\"onmousedownPoint($event, p)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- drawer TEMPLATE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawTemplateTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"500\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"drawTemplateVisibel\"\r\n  [nzFooter]=\"footerTplTemplate\"\r\n  (nzOnClose)=\"drawTemplateVisibel = false\"\r\n>\r\n  <ng-template #drawTemplateTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Template </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <extend-select\r\n      [label]=\"'Org'\"\r\n      [lstItem]=\"lstOrg\"\r\n      [valueField]=\"'App_Org_Id'\"\r\n      [displayFields]=\"['Name', 'Code']\"\r\n      [(_ngModel)]=\"template.App_Org_Id\"\r\n    ></extend-select>\r\n    <extend-input [label]=\"'Code'\" [(_ngModel)]=\"template.Code\"></extend-input>\r\n    <extend-input [label]=\"'Name'\" [(_ngModel)]=\"template.Name\"></extend-input>\r\n    <extend-select\r\n      [label]=\"'Type'\"\r\n      [lstItem]=\"template.lstTemplateType\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.DocType\"\r\n    ></extend-select>\r\n    <extend-textarea [label]=\"'Desscription'\" [(_ngModel)]=\"template.Description\"></extend-textarea>\r\n    <extend-select\r\n      [label]=\"'Print template'\"\r\n      [lstItem]=\"template.lstTemplatePrint\"\r\n      [valueField]=\"'Code'\"\r\n      [displayFields]=\"['Code', 'Name']\"\r\n      [(_ngModel)]=\"template.TemplatePrint\"\r\n    ></extend-select>\r\n\r\n    <extend-checkbox [label]=\"'Active'\" [(_ngModel)]=\"template.IsActive\"></extend-checkbox>\r\n    <extend-checkbox [label]=\"'Use Allow back'\" [(_ngModel)]=\"template.editorOption.AllowbackInUse\"></extend-checkbox>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of getLstStage; track tag) {\r\n        <div nz-col>\r\n          <nz-tag (click)=\"hoverStage = tag\">\r\n            {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n          </nz-tag>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <box [height]=\"16\"></box>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Stage status</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of template.lstStageStatus; track tag) {\r\n        <div nz-col>\r\n          <nz-tag\r\n            [nzMode]=\"checkRemoveableStageStatus(tag) ? 'closeable' : 'default'\"\r\n            (nzOnClose)=\"handleCloseStageStatus(tag)\"\r\n          >\r\n            {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n          </nz-tag>\r\n        </div>\r\n      }\r\n\r\n      <div nz-col>\r\n        @if (!inputStageStatusVisible) {\r\n          <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputStageStatus()\">\r\n            <nz-icon nzType=\"plus\" />\r\n            New Action type\r\n          </nz-tag>\r\n        } @else {\r\n          <input\r\n            #inputStageStatusElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Code\"\r\n            [(ngModel)]=\"inputStageStatusCode\"\r\n            (keydown.enter)=\"inputStageStatusNameElement.select()\"\r\n          />\r\n          <input\r\n            #inputStageStatusNameElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Name\"\r\n            [(ngModel)]=\"inputStageStatusName\"\r\n            (blur)=\"handleInputStageStatusConfirm()\"\r\n            (keydown.enter)=\"handleInputStageStatusConfirm()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <box [height]=\"16\"></box>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action type</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of template.lstActionType; track tag) {\r\n        <div nz-col>\r\n          <nz-tag\r\n            [nzMode]=\"checkRemoveableActionType(tag) ? 'closeable' : 'default'\"\r\n            (nzOnClose)=\"handleCloseActionType(tag)\"\r\n          >\r\n            {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n          </nz-tag>\r\n        </div>\r\n      }\r\n\r\n      <div nz-col>\r\n        @if (!inputActionTypeVisible) {\r\n          <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInputActionType()\">\r\n            <nz-icon nzType=\"plus\" />\r\n            New Action type\r\n          </nz-tag>\r\n        } @else {\r\n          <input\r\n            #inputActionTypeElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Code\"\r\n            [(ngModel)]=\"inputActionTypeCode\"\r\n            (keydown.enter)=\"inputActionTypeNameElement.select()\"\r\n          />\r\n          <input\r\n            #inputActionTypeNameElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"Name\"\r\n            [(ngModel)]=\"inputActionTypeName\"\r\n            (blur)=\"handleInputActionTypeConfirm()\"\r\n            (keydown.enter)=\"handleInputActionTypeConfirm()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <box [height]=\"16\"></box>\r\n\r\n    <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;Action status</h3>\r\n\r\n    <div nz-row [nzGutter]=\"[0, 5]\">\r\n      @for (tag of template.lstActionStatus; track tag) {\r\n        <div nz-col>\r\n          @if (template.editingActionStatus != tag) {\r\n            <nz-tag\r\n              [nzMode]=\"checkRemoveableActionStatus(tag.Code) ? 'closeable' : 'default'\"\r\n              (nzOnClose)=\"handleClose(tag.Code)\"\r\n              (click)=\"template.editingActionStatus = checkRemoveableActionStatus(tag.Code) ? tag : undefined\"\r\n            >\r\n              {{ sliceTagName(tag.Code + (tag.Name ? \" - \" + tag.Name : \"\")) }}\r\n            </nz-tag>\r\n          } @else {\r\n            <input\r\n              nz-input\r\n              nzSize=\"small\"\r\n              type=\"text\"\r\n              style=\"width: 150px\"\r\n              [appAutoFocus]=\"true\"\r\n              [(ngModel)]=\"tag.Code\"\r\n              (blur)=\"template.editingActionStatus = undefined\"\r\n              (keydown.enter)=\"template.editingActionStatus = undefined\"\r\n            />&nbsp;&nbsp;\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div nz-col>\r\n        @if (!inputVisible) {\r\n          <nz-tag class=\"editable-tag\" nzNoAnimation (click)=\"showInput()\">\r\n            <nz-icon nzType=\"plus\" />\r\n            New Action status\r\n          </nz-tag>\r\n        } @else {\r\n          <input\r\n            #inputElement\r\n            nz-input\r\n            nzSize=\"small\"\r\n            type=\"text\"\r\n            style=\"width: 150px\"\r\n            placeholder=\"+ New Action status\"\r\n            [(ngModel)]=\"inputValue\"\r\n            (blur)=\"handleInputConfirm()\"\r\n            (keydown.enter)=\"handleInputConfirm()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplTemplate>\r\n    <div nz-flex [nzGap]=\"6\" [nzJustify]=\"'end'\">\r\n      <button nz-button nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button (click)=\"drawTemplateVisibel = false\">Close</button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer STAGE -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleStage\"\r\n  [nzPlacement]=\"selectedStage?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n  [nzVisible]=\"!!selectedStage\"\r\n  [nzWidth]=\"'calc(50vw)'\"\r\n  [nzClosable]=\"false\"\r\n  [nzFooter]=\"footerTplNode\"\r\n  (nzOnClose)=\"selectedStage = undefined\"\r\n>\r\n  <ng-template #drawerTitleStage>\r\n    <div nz-row nzJustify=\"space-between\">\r\n      @if (selectedStage && selectedStage.editorOption) {\r\n        @if (selectedStage.editorOption.drawerPosition == \"left\") {\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the right\"\r\n            (click)=\"selectedStage.editorOption.drawerPosition = 'right'\"\r\n          >\r\n            <nz-icon nzType=\"double-right\"></nz-icon>\r\n          </button>\r\n          STAGE\r\n        } @else {\r\n          STAGE\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the left\"\r\n            (click)=\"selectedStage.editorOption.drawerPosition = 'left'\"\r\n          >\r\n            <nz-icon nzType=\"double-left\"></nz-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <ng-container *ngIf=\"selectedStage\">\r\n      <nz-radio-group [(ngModel)]=\"selectedStage.StageType\">\r\n        <label nz-radio nzValue=\"_start_\">UI start</label>\r\n        <label nz-radio nzValue=\"_end_\">UI end</label>\r\n        <label nz-radio nzValue=\"start\">START</label>\r\n        <label nz-radio nzValue=\"node\">NODE</label>\r\n        <label nz-radio nzValue=\"end\">END</label>\r\n      </nz-radio-group>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Code'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [required]=\"true\"\r\n          [(_ngModel)]=\"selectedStage.Code\"\r\n        ></extend-input>\r\n\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"16\"\r\n          [label]=\"'Name'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [required]=\"true\"\r\n          [(_ngModel)]=\"selectedStage.Name\"\r\n        ></extend-input>\r\n      </div>\r\n\r\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n        <extend-input-number\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Sequence'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [(_ngModel)]=\"selectedStage.SeqValue\"\r\n        ></extend-input-number>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"16\"\r\n          [label]=\"'Org implement'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"lstOrg\"\r\n          [valueField]=\"'App_Org_Id'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedStage.App_Org_Id\"\r\n        ></extend-select>\r\n      </div>\r\n\r\n      <div nz-row [nzGutter]=\"32\" class=\"form-item-no-bottom\">\r\n        <extend-input-number\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Number Day'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [precision]=\"1\"\r\n          [(_ngModel)]=\"selectedStage.NumberDay\"\r\n        ></extend-input-number>\r\n      </div>\r\n\r\n      @if (selectedStage.editorOption) {\r\n        @if ([\"start\", \"node\", \"end\"].includes(selectedStage.StageType.toLowerCase())) {\r\n          <extend-checkbox\r\n            [label]=\"'Reverse'\"\r\n            [labelSpan]=\"0\"\r\n            [(_ngModel)]=\"selectedStage.editorOption.isReverse\"\r\n          ></extend-checkbox>\r\n        }\r\n\r\n        <extend-checkbox\r\n          [label]=\"'Require user action'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedStage.IsRequireUser\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <h3 nz-col><nz-icon nzType=\"send\" nzTheme=\"outline\" />&nbsp;List Action</h3>\r\n        <div nz-col>\r\n          <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"addAction()\">\r\n            <nz-icon nzType=\"plus\"></nz-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <nz-table nzSize=\"small\" [nzData]=\"lstActionOfCurrentStage\" [nzShowPagination]=\"false\" [nzNoResult]=\"'&nbsp;'\">\r\n        <thead>\r\n          <tr [hidden]=\"true\">\r\n            <th nzWidth=\"40px\"></th>\r\n            <th></th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (action of lstActionOfCurrentStage; track $index) {\r\n            <tr [class.text-bold]=\"action == hoverAction\" (click)=\"onclickaction(action)\">\r\n              <td style=\"border-bottom: solid 1px orange\">\r\n                ({{ $index + 1 }})\r\n                <nz-icon\r\n                  nzType=\"delete\"\r\n                  nzTheme=\"outline\"\r\n                  class=\"color-warn cursor-pointer icon-size-16\"\r\n                  (click)=\"$event.stopPropagation(); deleteAction(action)\"\r\n                ></nz-icon>\r\n              </td>\r\n              <td style=\"border-bottom: solid 1px orange\">\r\n                <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n                  <div nz-col [nzSpan]=\"8\">\r\n                    <nz-form-item>\r\n                      <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                      <nz-form-control [nzSpan]=\"24\">\r\n                        <nz-input-group class=\"full-width\">\r\n                          <input\r\n                            nz-input\r\n                            [(ngModel)]=\"action.ActionStatus\"\r\n                            [nzAutocomplete]=\"auto\"\r\n                            (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                            (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                            (keyup.enter)=\"onenterAotu(action.ActionStatus)\"\r\n                            (blur)=\"onenterAotu(action.ActionStatus)\"\r\n                          />\r\n                          <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                            @for (option of lstActionStatusFiltered; track $index) {\r\n                              <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                                {{ option.Code }}\r\n                                <icon-delete\r\n                                  *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                                  style=\"float: right\"\r\n                                  [size]=\"12\"\r\n                                  (click)=\"handleClose(option.Code)\"\r\n                                ></icon-delete>\r\n                              </nz-auto-option>\r\n                            }\r\n                          </nz-autocomplete>\r\n                        </nz-input-group>\r\n                      </nz-form-control>\r\n                    </nz-form-item>\r\n                  </div>\r\n\r\n                  <extend-input\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Action text'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [(_ngModel)]=\"action.ActionText\"\r\n                    (_ngModelChange)=\"onchangeActionText(action)\"\r\n                  ></extend-input>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Action type'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"template.lstActionType\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.ActionType\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Stage status'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.StageStatus\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Next stage'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"getlstStage\"\r\n                    [valueField]=\"'WF_TemplateStage_Id'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.To_WF_TemplateStage_Id\"\r\n                    (_ngModelChange)=\"onchangeNextStage(action)\"\r\n                  ></extend-select>\r\n\r\n                  <extend-select\r\n                    nz-col\r\n                    [nzSpan]=\"8\"\r\n                    [label]=\"'Next stage status'\"\r\n                    [layOutType]=\"'vertical'\"\r\n                    [lstItem]=\"template.lstStageStatus\"\r\n                    [valueField]=\"'Code'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [(_ngModel)]=\"action.To_StageStatus\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>Role</div>\r\n                <div nz-row>\r\n                  <extend-select\r\n                    nz-col\r\n                    nzSpan=\"24\"\r\n                    [size]=\"'small'\"\r\n                    [lstItem]=\"lstRole\"\r\n                    [valueField]=\"'App_Role_Id'\"\r\n                    [displayFields]=\"['Code', 'Name']\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstRoleId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row>Email action</div>\r\n                <div nz-row>\r\n                  <extend-select\r\n                    nz-col\r\n                    nzSpan=\"24\"\r\n                    [size]=\"'small'\"\r\n                    [lstItem]=\"lstEmailAction\"\r\n                    [valueField]=\"'ID'\"\r\n                    [displayField]=\"'Name'\"\r\n                    [multiple]=\"true\"\r\n                    [(_ngModel)]=\"action._lstEmailActionId\"\r\n                    (_ngModelChange)=\"onselectedRoleEmail(action)\"\r\n                  ></extend-select>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>Email template</div>\r\n                <div *ngIf=\"action._lstEmailActionId && action._lstEmailActionId.length\" nz-row>\r\n                  <div nz-col nzSpan=\"1\"></div>\r\n                  <div nz-col nzSpan=\"23\" class=\"form-item-no-bottom\" style=\"font-weight: normal\">\r\n                    @for (actionRef of lstActionRefOf(action); track $index) {\r\n                      <div nz-row>\r\n                        <extend-select\r\n                          nz-col\r\n                          nzSpan=\"24\"\r\n                          [labelSpan]=\"12\"\r\n                          [size]=\"'small'\"\r\n                          [label]=\"emailActionText(actionRef.To_WF_TemplateStageAction_Id)\"\r\n                          [lstItem]=\"lstEmailTemplate\"\r\n                          [valueField]=\"'Code'\"\r\n                          [displayFields]=\"['Code', 'Name']\"\r\n                          [(_ngModel)]=\"actionRef.TemplateMail\"\r\n                          (_ngModelChange)=\"xxx(actionRef)\"\r\n                        ></extend-select>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                <box [height]=\"8\"></box>\r\n                <div nz-row [nzGutter]=\"8\">\r\n                  Action rule\r\n                  <button nz-button nzType=\"text\" nzSize=\"small\" (click)=\"actionRuleModalVisible = true\">\r\n                    <nz-icon nzType=\"export\" nzTheme=\"outline\" class=\"color-primary\" />\r\n                  </button>\r\n                  <button\r\n                    *ngIf=\"action.WF_TransitionsRule_Id\"\r\n                    nz-button\r\n                    nzType=\"text\"\r\n                    nzSize=\"small\"\r\n                    (click)=\"deleteActionRule(action)\"\r\n                  >\r\n                    <nz-icon nzType=\"delete\" nzTheme=\"outline\" class=\"color-warn\" />\r\n                  </button>\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </nz-table>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #footerTplNode>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"\r\n        selectedStage && selectedStage.editorOption && selectedStage.editorOption.drawerPosition == 'left'\r\n          ? 'start'\r\n          : 'end'\r\n      \"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button (click)=\"selectedStage = undefined\">Close</button>\r\n      <button\r\n        *ngIf=\"selectedStage && ['START', 'END'].indexOf(selectedStage.StageType) < 0\"\r\n        nz-button\r\n        nzDanger\r\n        (click)=\"deleteStage()\"\r\n      >\r\n        Delete\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- drawer ACTION -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawerTitleAction\"\r\n  nzTitle=\"ACTION\"\r\n  [nzPlacement]=\"selectedAction?.editorOption?.drawerPosition == 'left' ? 'left' : 'right'\"\r\n  [nzClosable]=\"false\"\r\n  [nzWidth]=\"750\"\r\n  [nzVisible]=\"!!selectedAction\"\r\n  [nzFooter]=\"footerTplAction\"\r\n  (nzOnClose)=\"selectedAction = undefined\"\r\n>\r\n  <ng-template #drawerTitleAction>\r\n    <div nz-row nzJustify=\"space-between\">\r\n      @if (selectedAction && selectedAction.editorOption) {\r\n        @if (selectedAction.editorOption.drawerPosition == \"left\") {\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the right\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'right'\"\r\n          >\r\n            <nz-icon nzType=\"double-right\"></nz-icon>\r\n          </button>\r\n          ACTION\r\n        } @else {\r\n          ACTION\r\n          <button\r\n            nz-button\r\n            nzSize=\"small\"\r\n            nz-tooltip=\"To the left\"\r\n            (click)=\"selectedAction.editorOption.drawerPosition = 'left'\"\r\n          >\r\n            <nz-icon nzType=\"double-left\"></nz-icon>\r\n          </button>\r\n        }\r\n      }\r\n    </div>\r\n  </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <ng-container *ngIf=\"selectedAction\">\r\n      <div>\r\n        <strong\r\n          >{{ selectedAction.getFromStageCode(lstStage) }} -> {{ selectedAction.getToStageCode(lstStage) }}</strong\r\n        >\r\n      </div>\r\n      <div>{{ selectedAction.getFromStageName(lstStage) }} -> {{ selectedAction.getToStageName(lstStage) }}</div>\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n        <div nz-col [nzSpan]=\"8\">\r\n          <nz-form-item>\r\n            <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n            <nz-form-control [nzSpan]=\"24\">\r\n              <nz-input-group class=\"full-width\">\r\n                <input\r\n                  nz-input\r\n                  [(ngModel)]=\"selectedAction.ActionStatus\"\r\n                  [nzAutocomplete]=\"auto\"\r\n                  (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                  (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                  (keyup.enter)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                  (blur)=\"onenterAotu(selectedAction.ActionStatus)\"\r\n                />\r\n                <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                  @for (option of lstActionStatusFiltered; track $index) {\r\n                    <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                      {{ option.Code }}\r\n                      <icon-delete\r\n                        *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                        style=\"float: right\"\r\n                        [size]=\"12\"\r\n                        (click)=\"handleClose(option.Code)\"\r\n                      ></icon-delete>\r\n                    </nz-auto-option>\r\n                  }\r\n                </nz-autocomplete>\r\n              </nz-input-group>\r\n            </nz-form-control>\r\n          </nz-form-item>\r\n        </div>\r\n\r\n        <extend-input\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Action text'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [(_ngModel)]=\"selectedAction.ActionText\"\r\n          (_ngModelChange)=\"onchangeActionText(selectedAction)\"\r\n        ></extend-input>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Action type'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"template.lstActionType\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.ActionType\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Stage status'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.StageStatus\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"lstStage\"\r\n          [valueField]=\"'WF_TemplateStage_Id'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_WF_TemplateStage_Id\"\r\n          (_ngModelChange)=\"onchangeNextStage(selectedAction)\"\r\n        ></extend-select>\r\n\r\n        <extend-select\r\n          nz-col\r\n          [nzSpan]=\"8\"\r\n          [label]=\"'Next stage status'\"\r\n          [layOutType]=\"'vertical'\"\r\n          [lstItem]=\"template.lstStageStatus\"\r\n          [valueField]=\"'Code'\"\r\n          [displayFields]=\"['Code', 'Name']\"\r\n          [(_ngModel)]=\"selectedAction.To_StageStatus\"\r\n        ></extend-select>\r\n      </div>\r\n\r\n      <!-- <box [height]=\"16\"></box> -->\r\n      <nz-divider></nz-divider>\r\n\r\n      @if (template.editorOption.AllowbackInUse) {\r\n        <extend-checkbox\r\n          [label]=\"'Allow back'\"\r\n          [labelSpan]=\"0\"\r\n          [(_ngModel)]=\"selectedAction.allowBack\"\r\n          (_ngModelChange)=\"onchangeAllowBack(selectedAction)\"\r\n        ></extend-checkbox>\r\n      }\r\n\r\n      <box [height]=\"16\"></box>\r\n\r\n      @if (selectedAction.allowBack) {\r\n        <div>\r\n          <strong\r\n            >{{ selectedAction.getToStageCode(lstStage) }} -> {{ selectedAction.getFromStageCode(lstStage) }}</strong\r\n          >\r\n        </div>\r\n        <div>{{ selectedAction.getToStageName(lstStage) }} -> {{ selectedAction.getFromStageName(lstStage) }}</div>\r\n\r\n        @if (selectedBackAction) {\r\n          <div nz-row [nzGutter]=\"16\" class=\"form-item-no-bottom\">\r\n            <div nz-col [nzSpan]=\"8\">\r\n              <nz-form-item>\r\n                <nz-form-label [nzSpan]=\"24\" style=\"height: 32px\">Action status</nz-form-label>\r\n                <nz-form-control [nzSpan]=\"24\">\r\n                  <nz-input-group class=\"full-width\">\r\n                    <input\r\n                      nz-input\r\n                      [(ngModel)]=\"selectedBackAction.ActionStatus\"\r\n                      [nzAutocomplete]=\"auto\"\r\n                      (ngModelChange)=\"nzAutocompletechange($event, template.lstActionStatus)\"\r\n                      (click)=\"lstActionStatusFiltered = template.lstActionStatus\"\r\n                      (keyup.enter)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                      (blur)=\"onenterAotu(selectedBackAction.ActionStatus)\"\r\n                    />\r\n                    <nz-autocomplete #auto [compareWith]=\"compareFun\">\r\n                      @for (option of lstActionStatusFiltered; track $index) {\r\n                        <nz-auto-option [nzValue]=\"option.Code\" [nzLabel]=\"option.Code\">\r\n                          {{ option.Code }}\r\n                          <icon-delete\r\n                            *ngIf=\"checkRemoveableActionStatus(option.Code)\"\r\n                            style=\"float: right\"\r\n                            [size]=\"12\"\r\n                            (click)=\"handleClose(option.Code)\"\r\n                          ></icon-delete>\r\n                        </nz-auto-option>\r\n                      }\r\n                    </nz-autocomplete>\r\n                  </nz-input-group>\r\n                </nz-form-control>\r\n              </nz-form-item>\r\n            </div>\r\n\r\n            <extend-input\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Action text'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [(_ngModel)]=\"selectedBackAction.ActionText\"\r\n              (_ngModelChange)=\"onchangeActionText(selectedBackAction)\"\r\n            ></extend-input>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Action type'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"template.lstActionType\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.ActionType\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Stage status'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.StageStatus\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Next stage'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"lstStage\"\r\n              [valueField]=\"'WF_TemplateStage_Id'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.To_WF_TemplateStage_Id\"\r\n              (_ngModelChange)=\"onchangeNextStage(selectedBackAction)\"\r\n            ></extend-select>\r\n\r\n            <extend-select\r\n              nz-col\r\n              [nzSpan]=\"8\"\r\n              [label]=\"'Next stage status'\"\r\n              [layOutType]=\"'vertical'\"\r\n              [lstItem]=\"template.lstStageStatus\"\r\n              [valueField]=\"'Code'\"\r\n              [displayFields]=\"['Code', 'Name']\"\r\n              [(_ngModel)]=\"selectedBackAction.To_StageStatus\"\r\n            ></extend-select>\r\n          </div>\r\n        }\r\n      }\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #footerTplAction>\r\n    <div\r\n      nz-flex\r\n      [nzGap]=\"6\"\r\n      [nzJustify]=\"selectedAction && selectedAction.editorOption.drawerPosition == 'left' ? 'start' : 'end'\"\r\n    >\r\n      <button nz-button nzDanger nzDanger [nzLoading]=\"!ready\" (click)=\"save()\">Save</button>\r\n      <button nz-button nzDanger (click)=\"deleteAction(selectedAction!)\">Delete</button>\r\n      <button nz-button (click)=\"selectedAction = undefined\">Close</button>\r\n    </div>\r\n  </ng-template>\r\n</nz-drawer>\r\n\r\n<!-- setting editor -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawSettingTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"settingVisible\"\r\n  (nzOnClose)=\"settingVisible = false\"\r\n>\r\n  <ng-template #drawSettingTitle> <nz-icon nzType=\"setting\"></nz-icon> &nbsp; Editor </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <div class=\"form-item-no-bottom\">\r\n      <extend-checkbox [label]=\"'Show grid'\" [labelSpan]=\"0\" [(_ngModel)]=\"wfcSetting.ShowGrid\"></extend-checkbox>\r\n\r\n      <box [height]=\"16\"></box>\r\n    </div>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- editor infomation -->\r\n<nz-drawer\r\n  [nzTitle]=\"drawInfoTitle\"\r\n  nzPlacement=\"right\"\r\n  [nzClosable]=\"false\"\r\n  [nzVisible]=\"infoVisible\"\r\n  (nzOnClose)=\"infoVisible = false\"\r\n>\r\n  <ng-template #drawInfoTitle> <nz-icon nzType=\"info-circle\"></nz-icon> &nbsp; Infomation </ng-template>\r\n  <ng-container *nzDrawerContent>\r\n    <p>1. C\u00E1c th\u00E0nh ph\u1EA7n: Stage or Node (stag, node quy tr\u00ECnh), Action or Connector (\u0111\u01B0\u1EDDng n\u1ED1i gi\u1EEFa c\u00E1c stage)</p>\r\n    <p>2. Save \u0111\u1EC3 load c\u00E1c th\u00F4ng tin: Stage status, Action type</p>\r\n    <p>\r\n      3. N\u1ED1i 2 node (t\u1EA1o connector t\u01B0\u01A1ng \u0111\u01B0\u01A1ng t\u1EA1o action):\r\n      <br />- Click ch\u1EA5m cam t\u1EEB Node ngu\u1ED3n \u0111\u1EBFn ch\u1EA5m xanh c\u1EE7a Node \u0111\u00EDch (ho\u1EB7c click v\u00E0o Node \u0111\u00EDch), c\u00F3 th\u1EC3 click th\u00E0nh\r\n      nhi\u1EC1u \u0111i\u1EC3m \u0111\u1EC3 t\u1EA1o \u0111\u01B0\u1EDDng n\u1ED1i cong<br />- Khi hover connector chuy\u1EC3n sang m\u1EA7u \u0111\u1ECF c\u00F3 th\u1EC3 click \u0111\u00FAp \u0111\u1EC3 th\u00EAm m\u1ED9t \u0111i\u1EC3m\r\n      c\u1EE7a connector<br />- Khi hover l\u00EAn \u0111i\u1EC3m c\u1EE7a connector c\u00F3 th\u1EC3 di chuy\u1EC3n \u0111i\u1EC3m \u0111\u00F3 b\u1EB1ng c\u00E1ch nh\u1EA5n gi\u1EEF chu\u1ED9t v\u00E0 k\u00E9o th\u1EA3\r\n      \u0111\u1EBFn v\u1ECB tr\u00ED m\u1EDBi<br />- Chu\u1ED9t ph\u1EA3i v\u00E0o \u0111i\u1EC3m n\u1ED1i connector \u0111\u1EC3 xo\u00E1 \u0111i\u1EC3m \u0111\u00F3\r\n    </p>\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n<!-- action rule modal -->\r\n<nz-modal\r\n  [(nzVisible)]=\"actionRuleModalVisible\"\r\n  [nzMaskClosable]=\"false\"\r\n  [nzClosable]=\"false\"\r\n  [nzKeyboard]=\"true\"\r\n  [nzWidth]=\"'50vw'\"\r\n>\r\n  <ng-container *nzModalTitle>\r\n    ACTION RULE: [{{ selectedStage?.Code }}] {{ selectedStage?.Name }} > [{{ hoverAction?.ActionStatus }}]\r\n    {{ hoverAction?.ActionText }}\r\n  </ng-container>\r\n  <ng-container *nzModalContent>\r\n    @if (hoverAction && hoverAction.actionRule) {\r\n      <div nz-row [nzGutter]=\"32\">\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Code'\" [(_ngModel)]=\"hoverAction.actionRule.Code\"></extend-input>\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Name'\" [(_ngModel)]=\"hoverAction.actionRule.Name\"></extend-input>\r\n        <extend-input nz-col nzSpan=\"12\" [label]=\"'Note'\" [(_ngModel)]=\"hoverAction.actionRule.Note\"></extend-input>\r\n        <extend-checkbox\r\n          nz-col\r\n          nzSpan=\"12\"\r\n          [label]=\"'IsActive'\"\r\n          [(_ngModel)]=\"hoverAction.actionRule.IsActive\"\r\n        ></extend-checkbox>\r\n      </div>\r\n      <div nz-row [nzGutter]=\"16\">\r\n        <div nz-col nzSpan=\"24\">\r\n          <nz-table nzSize=\"small\" [nzData]=\"hoverAction.actionRule.lstLine\" [nzShowPagination]=\"false\">\r\n            <thead>\r\n              <tr>\r\n                <th [nzWidth]=\"'50px'\"><icon-add (click)=\"addActionRuleLine()\"></icon-add></th>\r\n                <th [nzWidth]=\"'25%'\">Template</th>\r\n                <th [nzWidth]=\"'25%'\">Template stage</th>\r\n                <th [nzWidth]=\"'25%'\">Template action</th>\r\n                <th [nzWidth]=\"'50px'\">IsActive</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (item of hoverAction.actionRule.lstLine; track $index) {\r\n                <tr>\r\n                  <td><icon-delete (click)=\"deleteActionRuleLine(hoverAction.actionRule, item)\"></icon-delete></td>\r\n                  <td>\r\n                    <extend-select\r\n                      #xxx\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstTemplateForRule(item)\"\r\n                      [valueField]=\"'WF_Template_Id'\"\r\n                      [displayFields]=\"['Code', 'Name']\"\r\n                      [(_ngModel)]=\"item.WF_Template_Id\"\r\n                      (_ngModelChange)=\"item.WF_TemplateStage_Id = 0; item.WF_TemplateStageAction_Id = 0\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      #yyy\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstStageForRule(xxx._ngModel)\"\r\n                      [valueField]=\"'WF_TemplateStage_Id'\"\r\n                      [displayFields]=\"['Code', 'Name']\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStage_Id\"\r\n                      (_ngModelChange)=\"item.WF_TemplateStageAction_Id = 0\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td>\r\n                    <extend-select\r\n                      [size]=\"'small'\"\r\n                      [lstItem]=\"lstActionForRule(yyy._ngModel)\"\r\n                      [valueField]=\"'WF_TemplateStageAction_Id'\"\r\n                      [displayFields]=\"['ActionStatus', 'ActionText']\"\r\n                      [(_ngModel)]=\"item.WF_TemplateStageAction_Id\"\r\n                    ></extend-select>\r\n                  </td>\r\n                  <td class=\"text-center\">\r\n                    <extend-checkbox [(_ngModel)]=\"item.IsActive\"></extend-checkbox>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </nz-table>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n  <ng-container *nzModalFooter>\r\n    <button nz-button nzType=\"primary\" (click)=\"actionRuleModalVisible = false\">OK</button>\r\n  </ng-container>\r\n</nz-modal>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .workflow-wrapper{border:solid 1px lightgray;overflow:hidden;width:100%}.workflow-canvas{position:relative;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:100%;height:100%}.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.connecting-source,.workflow-node.selected,.workflow-node:hover:not(.workflow-node-start,.workflow-node-end){outline:2px dashed #1890ff}.workflow-node .title{font-weight:600;margin-bottom:6px}.workflow-node-start{width:0px}.workflow-node-start.connecting-source,.workflow-node-start.selected,.workflow-node-start:hover{outline:unset}.workflow-node-start.connecting-source nz-tag,.workflow-node-start.selected nz-tag,.workflow-node-start:hover nz-tag{outline:2px dashed}.workflow-node-start nz-tag{position:relative;top:45px;right:35px}.workflow-node-end{width:0px}.workflow-node-end.connecting-source,.workflow-node-end.selected,.workflow-node-end:hover{outline:unset}.workflow-node-end.connecting-source nz-tag,.workflow-node-end.selected nz-tag,.workflow-node-end:hover nz-tag{outline:2px dashed}.workflow-node-end nz-tag{position:relative;top:45px;right:32px}.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:-8px;background:green;box-shadow:0 0 0 3px #1890ff4d}.connector-end{width:16px;height:16px;left:-8px;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}::ng-deep .minimap{position:fixed;width:180px;height:125px;top:60px;right:15px;background-color:#eee;border:1px solid #aaa;opacity:.9;z-index:1}::ng-deep .minimap-node{position:absolute;background-color:#607a86}::ng-deep .minimap-node-round{position:absolute;background-color:#607a86;border-radius:10px}::ng-deep .minimap-node-round-start{background-color:green}::ng-deep .minimap-node-round-end{background-color:#000}::ng-deep .minimap-viewport{position:absolute;box-sizing:border-box;background-color:#4f6f7e66;z-index:1;cursor:move}\n"] }]
         }], propDecorators: { lstOrg: [{
                 type: Input
             }], lstRole: [{
@@ -6548,7 +6722,6 @@ class LayoutComponent extends BaseComponent {
             }
         });
         this.getUserMenu(sessionStorage.getItem('HEADER_MENU_ID_selected') || '');
-        this.authService.startWatching();
         this.settingService.getByCodeAnonymous('SYSTEM_NAME').then((res) => {
             if (res?.Data) {
                 this.SYSTEM_NAME = res.Data;
@@ -6897,7 +7070,6 @@ class LoginComponent extends BaseComponent {
             this.goto(this.returnUrl);
             return;
         }
-        TokenStorage.clearToken();
         this.loginForm = this.fb.group({
             username: [null, [Validators.required]],
             password: [null, [Validators.required]],
@@ -6923,7 +7095,6 @@ class LoginComponent extends BaseComponent {
             }
         }, (err) => this.handleError(err));
         this.vscService.clearInterval();
-        this.authService.stopWatching();
     }
     getLstOrg() {
         const username = this.loginForm.controls['username'].value;
@@ -6993,5 +7164,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionRule, ActionRuleLine, AnimatedDigitComponent, AppGlobals, AppStorage, App_Org, AuthGuard, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CheckModel, CommonService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DicDomainPipe, DoughnutGraphComponent, DownloadHelper, ENUM_ResponseType, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendSelectComponent, ExtendTextArea, GlobalSpinnerComponent, GridFilter, H3Icon, HTTPService, Height, HideIfErrorDirective, HighlightPipe, IconAdd, IconDelete, IconEdit, IconSave, IconSearch, IconView, LayoutComponent, LimitWordsPipe, LineGraphComponent, LoadingService, LoginComponent, NoPermission, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, PagingData, PagingModel, PdfViewerComponent, RouteMonitorService, TableHeader, ThemeService, TokenStorage, TranslateKey, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, VscService, WF_TemplateActionRef, WF_TransitionRule, WF_TransitionRuleLine, Width, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
+export { ActionRule, ActionRuleLine, AnimatedDigitComponent, AppGlobals, AppStorage, App_Org, AuthGuard, AuthService, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CheckModel, CommonService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DicDomainPipe, DoughnutGraphComponent, DownloadHelper, ENUM_ResponseType, ExtendCheckbox, ExtendDatePicker, ExtendDateRangePicker, ExtendInput, ExtendInputNumber, ExtendSelectComponent, ExtendTextArea, GlobalSpinnerComponent, GridFilter, H3Icon, HTTPService, Height, HideIfErrorDirective, HighlightPipe, IconAdd, IconDelete, IconEdit, IconSave, IconSearch, IconView, LayoutComponent, LimitWordsPipe, LineGraphComponent, LoadingService, LoginComponent, NoPermission, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, PagingData, PagingModel, PdfViewerComponent, RouteMonitorService, TableHeader, ThemeService, TokenStorage, TranslateKey, URLs$4 as URLs, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, VscService, WF_TemplateActionRef, WF_TransitionRule, WF_TransitionRuleLine, Width, Workflow, WorkflowAction, WorkflowActionEditorOption, WorkflowActionRef, WorkflowEditorComponent, WorkflowEditorOption, WorkflowStage, WorkflowStageEditorOption, XLSXHelper, authInterceptor };
 //# sourceMappingURL=brggroup-share-lib.mjs.map